/* ============================================================================================
   Novalie Pharma — site header
   The one home for the public header: the floating bar, desktop navigation with its sliding
   indicator and mega menus, the language menu and the mobile sheet. Behaviour (scroll state,
   indicator position, menu dismissal) lives in site.js under novalie.header.

   States
   - default      the bar sits in the page flow above the content
   - over hero    every public page opens with a dark hero; the header floats over it with
                  light text, and .site-main slides up underneath it (see "Hero overlay")
   - .is-scrolled the bar condenses into a floating glass island
   - .is-hidden   scrolled away while reading downwards; any upward scroll brings it back
   ============================================================================================ */

.site-header {
    /* Colours the header content reads from. The hero overlay and the scrolled state only
       swap these, so no rule below needs to know which state it is in. */
    --header-fg: var(--text-strong);
    --header-fg-muted: color-mix(in srgb, var(--text) 78%, transparent);
    --header-fg-active: var(--primary);
    --header-pill: color-mix(in srgb, var(--primary) 8%, transparent);
    --header-pill-ring: color-mix(in srgb, var(--primary) 14%, transparent);
    --logo-light: var(--theme-logo-light);
    --logo-dark: var(--theme-logo-dark);
    --logo-filter: none;

    position: sticky;
    top: 0;
    z-index: var(--z-header);
    height: var(--header-height);
    transition: transform var(--duration-slow) var(--ease-out);
}

.site-header.is-hidden { transform: translateY(calc(-100% - .75rem)); }

/* A soft scrim behind the transparent header, so light text survives a bright hero photo. */
.site-header::before {
    content: "";
    position: absolute;
    inset: 0 0 -2rem;
    background: linear-gradient(180deg, rgba(12, 8, 28, .52), rgba(12, 8, 28, .2) 55%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-slow) var(--ease-out);
}

.header-shell { position: relative; height: 100%; }

.header-bar {
    display: flex;
    align-items: center;
    gap: clamp(.75rem, 2vw, 1.75rem);
    height: 100%;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    transition:
        height var(--duration-slow) var(--ease-out),
        margin var(--duration-slow) var(--ease-out),
        padding var(--duration-slow) var(--ease-out),
        background-color var(--duration-slow) var(--ease-out),
        border-color var(--duration-slow) var(--ease-out),
        box-shadow var(--duration-slow) var(--ease-out);
}

/* The island. The header keeps its height, so condensing never shifts the page below it. */
.site-header.is-scrolled .header-bar {
    height: calc(var(--header-height) - 1rem);
    margin-top: .5rem;
    padding-inline: 1.125rem .4375rem;
    background: var(--glass-bg);
    border-color: var(--glass-border);
    box-shadow: var(--shadow-float);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

/* Reading progress along the top edge of the viewport, only once the page has moved. */
.header-progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    height: 2px;
    z-index: 1;
    background: linear-gradient(90deg, var(--brand), var(--accent));
    transform: scaleX(var(--page-progress, 0));
    transform-origin: left;
    opacity: 0;
    transition: opacity var(--duration) var(--ease-out);
    pointer-events: none;
}

html[dir="rtl"] .header-progress { transform-origin: right; }
.site-header.is-scrolled .header-progress { opacity: 1; }

/* -- Brand ------------------------------------------------------------------------------------ */

.brand {
    display: inline-flex;
    align-items: center;
    flex: none;
    text-decoration: none;
    color: var(--text-strong);
}

.brand-logo {
    height: 2.125rem;
    width: auto;
    transition: transform var(--duration) var(--ease-spring), filter var(--duration-slow) var(--ease-out);
}

.brand:hover .brand-logo { transform: translateY(-1px) scale(1.025); }
.brand-logo-light { display: var(--logo-light); }
.brand-logo-dark { display: var(--logo-dark); }
.brand-logo-only { filter: var(--logo-filter); }

.brand-fallback {
    display: inline-flex;
    align-items: baseline;
    gap: .125rem;
    font-family: var(--font-sans);
    font-size: 1.375rem;
    font-weight: var(--weight-black);
    letter-spacing: -.03em;
    color: var(--brand);
}

.brand-fallback .brand-sub {
    font-size: .8125rem;
    font-weight: var(--weight-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ============================================================================================
   Desktop navigation
   ============================================================================================ */

.primary-nav { display: none; }

@media (min-width: 62rem) {
    .primary-nav { display: flex; flex: 1; justify-content: center; min-width: 0; }
}

.nav-list {
    position: relative;
    display: flex;
    align-items: center;
    gap: .125rem;
    margin: 0;
    padding: .3125rem;
    list-style: none;
}

/* One pill that glides to whichever link is hovered or focused and rests on the active one.
   site.js measures the target and writes --ind-x / --ind-w / --ind-o onto the list. */
.nav-indicator {
    position: absolute;
    inset-block: .3125rem;
    left: 0;
    width: var(--ind-w, 0);
    transform: translateX(var(--ind-x, 0));
    opacity: var(--ind-o, 0);
    border-radius: var(--radius-pill);
    background: var(--header-pill);
    box-shadow: inset 0 0 0 1px var(--header-pill-ring);
    pointer-events: none;
    transition:
        transform 480ms var(--ease-glide),
        width 480ms var(--ease-glide),
        opacity var(--duration) var(--ease-out),
        background-color var(--duration-slow) var(--ease-out);
}

/* No gliding in from the left edge on the first measurement. */
.nav-list:not(.is-ready) .nav-indicator { transition: none; }

.nav-item { position: relative; }

.nav-link {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .625rem .95rem;
    border-radius: var(--radius-pill);
    color: var(--header-fg-muted);
    font-family: var(--font-sans);
    font-size: .9375rem;
    font-weight: var(--weight-medium);
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: color var(--duration) var(--ease-out);
}

.nav-link:hover,
.nav-item:has(:focus-visible) > .nav-link { color: var(--header-fg); }

.nav-link.active { color: var(--header-fg-active); font-weight: var(--weight-semibold); }

/* The active page keeps a quiet marker even while the pill is off hovering another link. */
.nav-link.active::after {
    content: "";
    position: absolute;
    left: 50%;
    inset-block-end: .2rem;
    width: .25rem;
    height: .25rem;
    border-radius: 50%;
    background: var(--accent);
    transform: translateX(-50%);
}

.nav-item.has-menu > .nav-link.active::after { margin-inline-start: -.5rem; }

.nav-caret {
    flex: none;
    opacity: .6;
    transition: transform var(--duration-slow) var(--ease-spring), opacity var(--duration) var(--ease-out);
}

.nav-item:is(:hover, :has(:focus-visible)):not([data-dismissed]) .nav-caret { transform: rotate(180deg); opacity: 1; }

/* -- Menus ------------------------------------------------------------------------------------
   Opened by hover or keyboard focus alone, so they work before and without JavaScript. The short
   open delay and longer close delay forgive a pointer that clips the edge on its way past. */

.nav-menu {
    position: absolute;
    top: calc(100% + .9rem);
    left: 50%;
    z-index: 2;
    padding: .5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface-raised);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, .625rem) scale(.975);
    transform-origin: 50% 0;
    transition:
        opacity 200ms var(--ease-out) 90ms,
        transform 280ms var(--ease-out) 90ms,
        visibility 0s linear 380ms;
}

/* Bridges the gap between the link and the panel so the pointer can travel across it. */
.nav-menu::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 100%;
    height: 1.25rem;
}

.nav-item:is(:hover, :has(:focus-visible)):not([data-dismissed]) > .nav-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0) scale(1);
    transition-delay: 60ms, 60ms, 0s;
}

.nav-menu ul { margin: 0; padding: 0; list-style: none; }

.nav-menu-title {
    margin: 0 .625rem .625rem;
    font-family: var(--font-sans);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted-soft);
}

html[dir="rtl"] .nav-menu-title { letter-spacing: 0; }

.nav-menu-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .625rem .6875rem;
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.nav-menu-link:hover,
.nav-menu-link:focus-visible { background: var(--background-alt); color: var(--text); }

.nav-menu-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .75rem;
    background: var(--primary-050);
    color: var(--primary);
    transition:
        transform var(--duration-slow) var(--ease-spring),
        background-color var(--duration) var(--ease-out),
        color var(--duration) var(--ease-out);
}

.nav-menu-link:hover .nav-menu-icon,
.nav-menu-link:focus-visible .nav-menu-icon {
    background: var(--primary);
    color: var(--on-primary);
    transform: scale(1.06) rotate(-4deg);
}

.nav-menu-text { display: grid; gap: .125rem; min-width: 0; }

.nav-menu-text strong {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: 1.3;
    color: var(--text-strong);
}

.nav-menu-text small { font-size: var(--text-xs); line-height: 1.4; color: var(--muted); }

/* Menu items settle in one after another as the panel opens. */
.nav-menu li {
    opacity: 0;
    transform: translateY(.3rem);
    transition: opacity 240ms var(--ease-out), transform 320ms var(--ease-out);
}

.nav-item:is(:hover, :has(:focus-visible)):not([data-dismissed]) .nav-menu li { opacity: 1; transform: none; }
.nav-menu li:nth-child(2) { transition-delay: 30ms; }
.nav-menu li:nth-child(3) { transition-delay: 60ms; }
.nav-menu li:nth-child(4) { transition-delay: 90ms; }
.nav-menu li:nth-child(5) { transition-delay: 120ms; }
.nav-menu li:nth-child(6) { transition-delay: 150ms; }
.nav-menu li:nth-child(n + 7) { transition-delay: 180ms; }

.nav-dropdown { min-width: 17rem; }
.nav-dropdown ul { display: grid; gap: .125rem; }

.nav-mega {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15rem;
    gap: .5rem;
    width: min(46rem, calc(100vw - 2 * var(--gutter)));
}

.nav-mega-body { padding: .875rem .25rem .25rem; }

.nav-mega-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .125rem;
}

.nav-mega-feature {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.375rem 1.25rem 1.25rem;
    border-radius: calc(var(--radius-xl) - .5rem);
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--highlight) 38%, transparent), transparent 55%),
        linear-gradient(155deg, var(--primary-800), var(--primary) 72%, color-mix(in srgb, var(--accent) 55%, var(--primary)));
    color: #fff;
    text-decoration: none;
}

.nav-mega-feature::after {
    content: "";
    position: absolute;
    z-index: -1;
    width: 13rem;
    aspect-ratio: 1;
    inset-inline-end: -6rem;
    inset-block-end: -6rem;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    box-shadow: 0 0 0 2rem rgba(255, 255, 255, .035), 0 0 0 4rem rgba(255, 255, 255, .02);
    transition: transform 900ms var(--ease-out);
}

.nav-mega-feature:hover { color: #fff; }
.nav-mega-feature:hover::after { transform: scale(1.12) rotate(8deg); }

.nav-mega-feature-icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: .5rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.nav-mega-feature strong {
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    line-height: 1.2;
    letter-spacing: -.015em;
}

.nav-mega-feature-copy {
    flex: 1;
    font-size: var(--text-sm);
    line-height: 1.55;
    color: rgba(255, 255, 255, .76);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

.nav-mega-feature-cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .5rem;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

.nav-mega-feature-cta svg { transition: transform var(--duration) var(--ease-spring); }
.nav-mega-feature:hover .nav-mega-feature-cta svg { transform: translateX(4px); }
html[dir="rtl"] .nav-mega-feature:hover .nav-mega-feature-cta svg { transform: scaleX(-1) translateX(4px); }

@media (max-width: 71.99rem) {
    .nav-mega { grid-template-columns: minmax(0, 1fr) 13rem; }
    .nav-mega-list { grid-template-columns: 1fr; }
}

/* ============================================================================================
   Actions
   ============================================================================================ */

.header-actions {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-inline-start: auto;
}

@media (min-width: 62rem) { .header-actions { margin-inline-start: 0; } }

.site-header .icon-btn,
.lang-trigger {
    border-radius: var(--radius-pill);
    color: var(--header-fg);
}

.site-header .icon-btn:hover,
.lang-trigger:hover,
.lang-trigger[aria-expanded="true"] {
    background: var(--header-pill);
    color: var(--header-fg);
}

.header-cta { display: none; margin-inline-start: .375rem; }
@media (min-width: 62rem) { .header-cta { display: inline-flex; } }

/* -- Language selector --------------------------------------------------------------------- */

.lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    height: 2.625rem;
    padding-inline: .75rem;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration) var(--ease-out);
}

.lang-trigger .caret { opacity: .6; transition: transform var(--duration-slow) var(--ease-spring); }
.lang-trigger[aria-expanded="true"] .caret { transform: rotate(180deg); }

.lang-menu {
    min-width: 14rem;
    padding: .375rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}

.lang-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    padding: .625rem .75rem;
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.lang-option:hover { background: var(--background-alt); color: var(--text); }
.lang-option.is-active { background: var(--primary-050); color: var(--primary); }
.lang-native { font-weight: var(--weight-semibold); }
.lang-english { font-size: var(--text-xs); color: var(--muted-soft); margin-inline-start: auto; }
.lang-option.is-active .lang-english { color: color-mix(in srgb, var(--primary) 70%, transparent); }

/* -- Hamburger ----------------------------------------------------------------------------- */

.menu-toggle { display: inline-grid; }
@media (min-width: 62rem) { .menu-toggle { display: none; } }

.menu-toggle .bars { display: grid; gap: 5px; width: 1.125rem; }

.menu-toggle .bars span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform-origin: center;
    transition: transform var(--duration-slow) var(--ease-spring), opacity var(--duration-fast) var(--ease-out), width var(--duration) var(--ease-out);
}

.menu-toggle .bars span:nth-child(2) { width: 70%; margin-inline-start: auto; }
.menu-toggle:hover .bars span:nth-child(2) { width: 100%; }
.menu-toggle[aria-expanded="true"] .bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .bars span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] .bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================================================
   Hero overlay
   Every public page opens with a dark hero. When one is the first thing in <main>, the main
   element slides up under the header and the hero's content container moves back down by the
   same amount: nothing on the page shifts, but the hero now runs behind a transparent header.
   Browsers without :has() simply keep the solid header.
   ============================================================================================ */

.site-shell:has(> .site-main > :is(.hero, .page-header):first-child,
                > .site-main > .home-experience:first-child > .hero:first-child) .site-main {
    margin-top: calc(var(--header-height) * -1);
}

.site-shell .site-main > :is(.hero, .page-header):first-child > .container,
.site-shell .site-main > .home-experience:first-child > .hero:first-child > .container:not(.hero-slide-controls) {
    margin-top: var(--header-height);
}

/* The home hero fills the first screen now that it also owns the header's strip. */
.site-shell .site-main > .home-experience:first-child > .home-hero:first-child {
    min-height: max(36rem, min(100svh, 64rem));
}

.site-shell:has(> .site-main > :is(.hero, .page-header):first-child,
                > .site-main > .home-experience:first-child > .hero:first-child) .site-header:not(.is-scrolled) {
    --header-fg: #fff;
    --header-fg-muted: rgba(255, 255, 255, .78);
    --header-fg-active: #fff;
    --header-pill: rgba(255, 255, 255, .13);
    --header-pill-ring: rgba(255, 255, 255, .2);
    --logo-light: none;
    --logo-dark: block;
    --logo-filter: brightness(0) invert(1);
}

.site-shell:has(> .site-main > :is(.hero, .page-header):first-child,
                > .site-main > .home-experience:first-child > .hero:first-child) .site-header:not(.is-scrolled)::before {
    opacity: 1;
}

/* Over the hero the call to action reverses out, so it reads as part of the scene. */
.site-shell:has(> .site-main > :is(.hero, .page-header):first-child,
                > .site-main > .home-experience:first-child > .hero:first-child) .site-header:not(.is-scrolled) .header-cta {
    --btn-bg: #fff;
    --btn-fg: var(--primary-700);
    --btn-shadow: 0 10px 26px -12px rgba(0, 0, 0, .55);
    background-image: none;
}

/* Without :has(), the overlay offsets above must not apply. */
@supports not selector(:has(a)) {
    .site-shell .site-main > :is(.hero, .page-header):first-child > .container,
    .site-shell .site-main > .home-experience:first-child > .hero:first-child > .container:not(.hero-slide-controls) {
        margin-top: 0;
    }
}

/* ============================================================================================
   Mobile sheet
   ============================================================================================ */

.drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer);
    background: var(--overlay);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 380ms var(--ease-out), visibility 0s linear 380ms;
}

.drawer-backdrop.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }

.drawer {
    --logo-light: var(--theme-logo-light);
    --logo-dark: var(--theme-logo-dark);

    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: calc(var(--z-drawer) + 1);
    display: flex;
    flex-direction: column;
    width: min(26rem, 100%);
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 22rem),
        radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 20rem),
        var(--surface);
    box-shadow: var(--shadow-xl);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 560ms var(--ease-drawer), visibility 0s linear 560ms;
}

html[dir="rtl"] .drawer { transform: translateX(-100%); }
.drawer.is-open { transform: none; visibility: visible; transition-delay: 0s; }

@media (min-width: 62rem) {
    .drawer, .drawer-backdrop { display: none; }
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: var(--header-height);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border);
}

.drawer-close { border-radius: 50%; border: 1px solid var(--border); }
.drawer-close svg { transition: transform var(--duration-slow) var(--ease-spring); }
.drawer-close:hover svg { transform: rotate(90deg); }

.drawer-body {
    flex: 1;
    display: grid;
    align-content: start;
    gap: var(--space-6);
    padding: var(--space-5);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.drawer-footer {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-5);
    padding-bottom: max(var(--space-5), env(safe-area-inset-bottom));
    border-top: 1px solid var(--border);
}

/* Contents arrive in sequence once the sheet has mostly slid in. */
.drawer-reveal {
    opacity: 0;
    transform: translateX(1.5rem);
    transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}

html[dir="rtl"] .drawer-reveal { transform: translateX(-1.5rem); }

.drawer.is-open .drawer-reveal {
    opacity: 1;
    transform: none;
    transition: opacity 420ms var(--ease-out), transform 560ms var(--ease-out);
    transition-delay: calc(140ms + var(--i, 0) * 45ms);
}

.drawer-search {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: .875rem 1.125rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--background-alt);
    color: var(--muted);
    font-size: var(--text-base);
    text-align: start;
    transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}

.drawer-search:hover { border-color: var(--border-strong); background: var(--surface); }

.drawer-nav { display: grid; list-style: none; }
.drawer-nav > li { border-bottom: 1px solid var(--border); }

.drawer-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 1rem .25rem;
    color: var(--text-strong);
    font-family: var(--font-sans);
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    letter-spacing: -.02em;
    text-decoration: none;
    cursor: pointer;
    list-style: none;
    transition: color var(--duration-fast) var(--ease-out), padding var(--duration) var(--ease-out);
}

html[dir="rtl"] .drawer-link { letter-spacing: 0; }
.drawer-link::-webkit-details-marker { display: none; }
.drawer-link:hover { color: var(--primary); padding-inline-start: .625rem; }

.drawer-link.active { color: var(--primary); }

.drawer-link.active > span:first-child::after {
    content: "";
    display: inline-block;
    width: .375rem;
    height: .375rem;
    margin-inline-start: .5rem;
    vertical-align: middle;
    border-radius: 50%;
    background: var(--accent);
}

.drawer-link-arrow { color: var(--muted-soft); transition: transform var(--duration) var(--ease-spring), color var(--duration-fast); }
.drawer-link:hover .drawer-link-arrow { color: var(--primary); transform: translateX(3px); }
html[dir="rtl"] .drawer-link:hover .drawer-link-arrow { transform: scaleX(-1) translateX(3px); }

.drawer-caret { color: var(--muted-soft); transition: transform var(--duration-slow) var(--ease-spring); }
.drawer-group[open] .drawer-caret { transform: rotate(180deg); color: var(--primary); }

.drawer-sublist {
    display: grid;
    gap: .125rem;
    padding: 0 0 1rem;
    list-style: none;
}

.drawer-group[open] .drawer-sublist { animation: fade-down var(--duration-slow) var(--ease-out); }

.drawer-sublink {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .625rem .875rem;
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: var(--text-base);
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}

.drawer-sublink:hover { background: var(--background-alt); color: var(--text); }
.drawer-sublink.is-overview { color: var(--primary); font-weight: var(--weight-semibold); }

.drawer-section-title {
    margin-bottom: var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted-soft);
}

html[dir="rtl"] .drawer-section-title { letter-spacing: 0; }

.drawer-langs { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.drawer-lang {
    padding: .5rem .95rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}

.drawer-lang:hover { border-color: var(--primary); color: var(--primary); }
.drawer-lang.is-active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

.drawer-mail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: .5rem;
    color: var(--muted);
    font-size: var(--text-sm);
    text-decoration: none;
}

.drawer-mail:hover { color: var(--primary); }

/* ============================================================================================
   Compact desktop — the full navigation just fits between 62rem and 75rem, with less air.
   ============================================================================================ */

@media (min-width: 62rem) and (max-width: 74.99rem) {
    .header-bar { gap: .75rem; }
    .brand-logo { height: 1.875rem; }
    .nav-list { gap: 0; }
    .nav-link { padding-inline: .7rem; font-size: var(--text-sm); }
    .header-actions { gap: 0; }
    .header-cta .icon-shift { display: none; }
    .site-header .lang-trigger { padding-inline: .5rem; }
    .site-header .lang-trigger .caret { display: none; }
}

/* ============================================================================================
   Small screens
   ============================================================================================ */

@media (max-width: 47.99rem) {
    .brand-logo { height: 1.875rem; }
    .site-header .lang-trigger > span { display: none; }
    .site-header .lang-trigger { width: 2.625rem; padding: 0; justify-content: center; }
    .site-header .lang-trigger .caret { display: none; }
    .site-header.is-scrolled .header-bar { padding-inline: 1rem .3125rem; }
}

@media (prefers-reduced-motion: reduce) {
    .site-header.is-hidden { transform: none; }
}