/* =========================
   NAVBAR
========================= */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    width: 100%;

    z-index: 99999;

    background:
        rgba(255, 250, 240, 0.94);

    border-bottom:
        1px solid rgba(201, 157, 73, 0.18);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    box-shadow:
        0 8px 24px rgba(52, 34, 10, 0.05);
}

/* =========================
   CONTAINER
========================= */

.navbar {
    width:
        min(
            1240px,
            calc(100% - 24px)
        );

    min-height: 84px;

    margin: 0 auto;

    padding: 10px 0;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;
}

/* =========================
   BRAND
========================= */

.navbar-brand {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 14px;

    flex: 0 0 auto;

    color: #062e5f;
}

.navbar-logo {
    width: 60px;
    height: auto;

    flex-shrink: 0;
}

.navbar-text {
    display: flex;
    flex-direction: column;
    justify-content: center;

    line-height: 1.05;
}

.navbar-text strong {
    color: #062e5f;

    font-size:
        clamp(1.16rem, 1.5vw, 1.6rem);

    font-weight: 850;

    letter-spacing: -0.03em;

    white-space: nowrap;
}

.navbar-text span {
    margin-top: 4px;

    color: #8a5f2c;

    font-size: 0.76rem;
    font-weight: 650;

    white-space: nowrap;
}

/* =========================
   LINKS
========================= */

.navbar-links {
    min-width: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;

    flex: 1 1 auto;
}

.navbar-links a {
    min-height: 40px;

    padding: 0 12px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    border-radius: 999px;

    color: #062e5f;

    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1;

    white-space: nowrap;

    transition:
        background .22s ease,
        color .22s ease,
        transform .22s ease;
}

.navbar-links a i {
    color: #d4a64f;

    font-size: 0.82rem;

    transition: color .22s ease;
}

.navbar-links a:hover,
.navbar-links a.active {
    background: #062e5f;
    color: #fff7e8;

    transform: translateY(-1px);
}

.navbar-links a:hover i,
.navbar-links a.active i {
    color: #fff7e8;
}

/* =========================
   THEME BUTTON
========================= */

.theme-toggle.navbar-theme {
    height: 40px;

    padding: 0 16px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    flex: 0 0 auto;

    border-radius: 999px;

    border:
        1px solid rgba(201, 157, 73, 0.35);

    background:
        rgba(255, 250, 240, 0.92);

    color: #062e5f;

    font-size: 0.84rem;
    font-weight: 800;

    transition:
        background .22s ease,
        color .22s ease,
        border-color .22s ease,
        transform .22s ease;
}

.theme-toggle.navbar-theme:hover {
    background: #062e5f;
    color: #fff7e8;

    border-color: #062e5f;

    transform: translateY(-1px);
}

/* =========================
   OFFSET
========================= */

body {
    padding-top: 86px;
}

html {
    scroll-padding-top: 104px;
}

#inicio,
#nosotros,
#espiritismo,
#biblioteca,
#links-interes,
#radio,
#cine-espirita,
#contacto,
.accordion-card {
    scroll-margin-top: 104px;
}

/* =========================
   DARK MODE
========================= */

html[data-theme="dark"] .site-header {
    background:
        rgba(255, 250, 240, 0.94) !important;

    border-bottom-color:
        rgba(201, 157, 73, 0.2) !important;
}

html[data-theme="dark"] .navbar-brand,
html[data-theme="dark"] .navbar-text strong,
html[data-theme="dark"] .navbar-links a,
html[data-theme="dark"] .theme-toggle.navbar-theme {
    color: #062e5f !important;
}

html[data-theme="dark"] .navbar-text span {
    color: #8a5f2c !important;
}

html[data-theme="dark"] .navbar-links a i {
    color: #d4a64f !important;
}

html[data-theme="dark"] .navbar-links a:hover,
html[data-theme="dark"] .navbar-links a.active,
html[data-theme="dark"] .theme-toggle.navbar-theme:hover {
    background: #062e5f !important;
    color: #fff7e8 !important;
}

html[data-theme="dark"] .navbar-links a:hover i,
html[data-theme="dark"] .navbar-links a.active i {
    color: #fff7e8 !important;
}

/* =========================
   LARGE TABLET
========================= */

@media (max-width: 1180px) {

    .navbar {
        min-height: 118px;

        flex-wrap: wrap;

        justify-content: center;

        gap: 10px 14px;

        padding:
            10px
            0
            12px;
    }

    .navbar-brand {
        flex: 1 1 auto;

        justify-content: flex-start;
    }

    .navbar-theme {
        order: 2;
    }

    .navbar-links {
        order: 3;

        flex: 1 1 100%;

        justify-content: center;

        flex-wrap: wrap;

        gap: 7px;
    }

    .navbar-links a {
        min-height: 36px;

        padding: 0 11px;

        font-size: 0.76rem;
    }

    body {
        padding-top: 132px;
    }

    html {
        scroll-padding-top: 148px;
    }

    #inicio,
    #nosotros,
    #espiritismo,
    #biblioteca,
    #links-interes,
    #radio,
    #cine-espirita,
    #contacto,
    .accordion-card {
        scroll-margin-top: 148px;
    }
}

/* =========================
   MOBILE
========================= */

@media (max-width: 640px) {

    .navbar {
        width: calc(100% - 16px);

        min-height: 164px;

        gap: 10px;

        padding:
            10px
            0
            12px;
    }

    .navbar-brand {
        width: 100%;

        justify-content: center;

        text-align: center;
    }

    .navbar-logo {
        width: 48px;
    }

    .navbar-text strong {
        font-size: 1.18rem;
    }

    .navbar-text span {
        font-size: 0.72rem;
    }

    .navbar-theme {
        order: 2;

        height: 36px;

        padding: 0 14px;

        font-size: 0.8rem;
    }

    .navbar-links {
        width: 100%;

        display: grid;
        grid-template-columns:
            repeat(4, minmax(0, 1fr));

        gap: 7px;
    }

    .navbar-links a {
        width: 100%;

        min-height: 40px;

        padding: 0 6px;

        gap: 5px;

        background:
            rgba(255,255,255,.42);

        border:
            1px solid rgba(201,157,73,.16);

        font-size: 0.72rem;
    }

    .navbar-links a span {
        display: none;
    }

    .navbar-links a i {
        font-size: 0.95rem;
    }

    body {
        padding-top: 184px;
    }

    html {
        scroll-padding-top: 198px;
    }

    #inicio,
    #nosotros,
    #espiritismo,
    #biblioteca,
    #links-interes,
    #radio,
    #cine-espirita,
    #contacto,
    .accordion-card {
        scroll-margin-top: 198px;
    }
}

/* =========================
   EXTRA SMALL
========================= */

@media (max-width: 380px) {

    .navbar {
        min-height: 170px;
    }

    .navbar-text strong {
        font-size: 1.04rem;
    }

    body {
        padding-top: 190px;
    }

    html {
        scroll-padding-top: 206px;
    }

    #inicio,
    #nosotros,
    #espiritismo,
    #biblioteca,
    #links-interes,
    #radio,
    #cine-espirita,
    #contacto,
    .accordion-card {
        scroll-margin-top: 206px;
    }
}