/* ==========================================================================
   Navigation
   ========================================================================== */

.sl-site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: var(--sl-z-nav);
}

.sl-header-top {
    background: var(--sl-color-black);
    color: var(--sl-text-on-dark-muted);
    font-size: 0.8rem;
}
.sl-header-top__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0;
}
.sl-header-top__tagline { margin: 0; font-style: italic; letter-spacing: 0.02em; }
.sl-header-top__meta { display: flex; align-items: center; gap: var(--sl-space-3); }
.sl-header-top__divider { color: var(--sl-color-charcoal-lighter); }

.sl-navbar {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--sl-color-mist);
    box-shadow: var(--sl-shadow-sm);
    transition: box-shadow var(--sl-transition-base), background var(--sl-transition-base);
}
/* .is-scrolled is toggled on #siteHeader by nav-dropdown.js once the page
   scrolls past 12px, giving the header a slightly more solid, lifted look. */
.sl-site-header.is-scrolled .sl-navbar {
    background: rgba(255, 255, 255, 0.97);
    box-shadow: var(--sl-shadow-md);
}
.sl-navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sl-space-3) 0;
    gap: var(--sl-space-6);
}

.sl-brand { display: flex; align-items: center; gap: var(--sl-space-3); color: var(--sl-color-charcoal); }
.sl-brand__mark { color: var(--sl-color-primary); flex-shrink: 0; }
.sl-brand__mark img { display: block; object-fit: contain; }
.sl-brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.sl-brand__name { font-family: var(--sl-font-heading); font-weight: 800; font-size: 1.15rem; letter-spacing: -0.01em; }
.sl-brand__sub { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sl-color-primary); font-weight: 700; }

.sl-nav { display: flex; align-items: center; gap: var(--sl-space-6); flex: 1; justify-content: flex-end; }
.sl-nav__list { display: flex; align-items: center; gap: var(--sl-space-1); flex-wrap: wrap; }
.sl-nav__item { position: relative; }
.sl-nav__link {
    display: inline-flex;
    align-items: center;
    padding: 0.7rem 0.85rem;
    font-family: var(--sl-font-heading);
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--sl-color-charcoal);
    border-radius: var(--sl-radius-sm);
    transition: color var(--sl-transition-fast), background var(--sl-transition-fast);
}
.sl-nav__link:hover, .sl-nav__link.is-active { color: var(--sl-color-primary); background: var(--sl-color-primary-lighter); }

.sl-nav__link-row { display: flex; align-items: center; }
.sl-nav__caret {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--sl-color-charcoal);
    transition: transform var(--sl-transition-fast);
}
.sl-nav__item--dropdown.is-open .sl-nav__caret { transform: rotate(180deg); }

.sl-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 260px;
    background: #fff;
    border-radius: var(--sl-radius-md);
    box-shadow: var(--sl-shadow-lg);
    border: 1px solid var(--sl-color-mist);
    padding: var(--sl-space-3);
    display: grid;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--sl-transition-base), transform var(--sl-transition-base), visibility var(--sl-transition-base);
    z-index: var(--sl-z-dropdown);
}
.sl-dropdown--wide { min-width: 320px; max-height: 60vh; overflow-y: auto; }
.sl-nav__item--dropdown:hover .sl-dropdown,
.sl-nav__item--dropdown.is-open .sl-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.sl-dropdown__link {
    display: block;
    padding: 0.6rem 0.85rem;
    border-radius: var(--sl-radius-sm);
    font-size: 0.88rem;
    color: var(--sl-text-body);
    transition: background var(--sl-transition-fast), color var(--sl-transition-fast);
}
.sl-dropdown__link:hover { background: var(--sl-color-off-white); color: var(--sl-color-primary); }
.sl-dropdown__link--heading {
    font-weight: 700;
    color: var(--sl-color-primary-dark);
    border-bottom: 1px solid var(--sl-color-mist);
    border-radius: 0;
    margin-bottom: var(--sl-space-2);
    padding-bottom: var(--sl-space-3);
}

.sl-nav__cta { display: flex; align-items: center; gap: var(--sl-space-3); }
.sl-nav__cta .sl-btn--ghost-invert { color: var(--sl-color-charcoal); border-color: var(--sl-color-silver); }
.sl-nav__cta .sl-btn--ghost-invert:hover { background: var(--sl-color-off-white); border-color: var(--sl-color-primary); color: var(--sl-color-primary); }

.sl-nav-toggle {
    display: none;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background: var(--sl-color-white);
    border: 1.5px solid var(--sl-color-charcoal);
    border-radius: var(--sl-radius-sm);
    z-index: 5;
}
.sl-nav-toggle span { display: block; width: 20px; height: 2px; background: var(--sl-color-charcoal); transition: transform var(--sl-transition-fast), opacity var(--sl-transition-fast); }
.sl-nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.sl-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sl-nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1180px) {
    .sl-header-top__meta { display: none; }
}

@media (max-width: 992px) {
    .sl-nav-toggle { display: flex; }
    .sl-brand { position: relative; z-index: 5; }
    /* Full-screen mobile menu: covers the entire viewport (including behind
       the header row) so it reads as a true full-screen takeover. The logo
       and toggle button stay above it (z-index 5 vs 4) so they remain
       visible/tappable to close the menu; padding-top pushes the actual nav
       links down below where the header visually sits. */
    .sl-nav {
        position: fixed;
        top: 0;
        left: 0; right: 0;
        bottom: 0;
        height: 100vh;
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        padding: var(--sl-space-5);
        padding-top: calc(var(--sl-header-height) + var(--sl-space-4));
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform var(--sl-transition-base);
        justify-content: flex-start;
        z-index: 4;
    }
    .sl-nav.is-open { transform: translateX(0); }
    .sl-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .sl-nav__item { border-bottom: 1px solid var(--sl-color-mist); }
    .sl-nav__link-row { justify-content: space-between; }
    .sl-nav__link-row .sl-nav__link { flex: 1; }
    .sl-nav__caret { display: flex; }
    .sl-dropdown {
        position: static;
        opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border: none;
        display: none;
        padding: 0 0 var(--sl-space-3) var(--sl-space-4);
    }
    .sl-nav__item--dropdown.is-open .sl-dropdown { display: grid; }
    .sl-nav__cta { flex-direction: column; align-items: stretch; margin-top: var(--sl-space-5); }
}

@media (max-width: 640px) {
    /* Drop the utility bar (tagline/meta) on phones: it's decorative, it
       was liable to wrap to two lines and desync the header height that
       the mobile nav panel and main's top padding rely on (see tokens.css),
       and removing it gives the logo + hamburger more visible breathing room. */
    .sl-header-top { display: none; }
    .sl-navbar__inner {
        padding: var(--sl-space-2) 0;
        gap: var(--sl-space-3);
    }
    .sl-brand { gap: var(--sl-space-2); min-width: 0; flex-shrink: 1; }
    .sl-brand__mark svg, .sl-brand__mark img { width: 32px; height: 32px; }
    .sl-brand__text { min-width: 0; overflow: hidden; }
    .sl-brand__name, .sl-brand__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* Nudge the toggle in from the screen edge so it isn't flush in the corner. */
    .sl-nav-toggle { margin-right: var(--sl-space-2); }
}

@media (max-width: 360px) {
    .sl-brand__sub { display: none; }
}