/* ==========================================================================
   LendSwift — Site header
   Utility bar + glass sticky nav + mega menus + drawer.
   Fully token-driven, so light and dark both come from tokens.css.
   ========================================================================== */

/* border-box is essential here: with content-box the inline padding is ADDED to
   max-width, pushing the shell past the viewport and scrolling the whole page
   sideways. */
.site-shell {
    box-sizing: border-box;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding-inline: clamp(1rem, 3vw, 2rem);
}

.site-topbar *,
.site-header *,
.site-drawer *,
.mega * {
    box-sizing: border-box;
}

/* ============================== UTILITY BAR ============================== */

.site-topbar {
    background: var(--ls-brand-900);
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.8125rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: calc(var(--ls-z-sticky) + 2);
}

:root[data-theme="dark"] .site-topbar { background: #0b0d14; }

.site-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ls-space-4);
    min-height: 42px;
    flex-wrap: wrap;
}

.site-topbar-contact,
.site-topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--ls-space-5);
}

.topbar-link {
    display: inline-flex;
    align-items: center;
    gap: var(--ls-space-2);
    color: inherit;
    text-decoration: none;
    padding: 0.25rem 0;
    border-bottom: 1px solid transparent;
    transition: color var(--ls-duration) var(--ls-ease),
                border-color var(--ls-duration) var(--ls-ease);
    white-space: nowrap;
}

.topbar-link:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.5); }
.topbar-link i { font-size: 0.75rem; opacity: 0.75; }
.topbar-muted { cursor: default; }
.topbar-muted:hover { border-bottom-color: transparent; color: inherit; }

/* ------------------------------------------------------ Language switch */

.lang-switch { position: relative; }

.lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--ls-space-2);
    padding: 0.3rem 0.7rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--ls-radius-full);
    color: #fff;
    font-family: var(--ls-font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--ls-duration) var(--ls-ease);
}

.lang-trigger:hover { background: rgba(255, 255, 255, 0.2); }
.lang-caret { font-size: 0.6rem; transition: transform var(--ls-duration) var(--ls-ease); }
.lang-switch.is-open .lang-caret { transform: rotate(180deg); }

.lang-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 320px;
    background: var(--ls-surface);
    border: 1px solid var(--ls-border);
    border-radius: var(--ls-radius-lg);
    box-shadow: var(--ls-shadow-xl);
    padding: var(--ls-space-4);
    z-index: var(--ls-z-dropdown);
    animation: hdr-pop var(--ls-duration) var(--ls-ease);
}

.lang-panel[hidden] { display: none; }

.lang-panel-head { margin-bottom: var(--ls-space-3); }
.lang-panel-head strong { display: block; color: var(--ls-text); font-size: var(--ls-text-sm); }
.lang-panel-head span { font-size: var(--ls-text-xs); color: var(--ls-text-muted); }

.lang-quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ls-space-2);
}

.lang-quick button {
    display: flex;
    align-items: center;
    gap: var(--ls-space-2);
    padding: 0.45rem 0.6rem;
    background: var(--ls-surface-2);
    border: 1px solid var(--ls-border);
    border-radius: var(--ls-radius-md);
    color: var(--ls-text-secondary);
    font-family: var(--ls-font-sans);
    font-size: var(--ls-text-xs);
    cursor: pointer;
    text-align: left;
    transition: all var(--ls-duration) var(--ls-ease);
}

.lang-quick button:hover {
    border-color: var(--ls-brand-600);
    color: var(--ls-brand-600);
    background: var(--ls-brand-bg);
}

.lang-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    padding: 1px 4px;
    background: var(--ls-brand-600);
    color: #fff;
    border-radius: var(--ls-radius-sm);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.lang-native {
    margin-top: var(--ls-space-3);
    padding-top: var(--ls-space-3);
    border-top: 1px solid var(--ls-border);
}

.lang-native > span {
    display: block;
    font-size: var(--ls-text-xs);
    color: var(--ls-text-muted);
    margin-bottom: var(--ls-space-2);
}

/* Google's widget ships its own chrome; strip it back to fit the panel. */
.lang-native .goog-te-gadget { font-size: 0 !important; color: transparent !important; }
.lang-native .goog-te-gadget-simple {
    background: var(--ls-surface-2) !important;
    border: 1px solid var(--ls-border) !important;
    border-radius: var(--ls-radius-md) !important;
    padding: 0.45rem 0.6rem !important;
    font-size: 0.8125rem !important;
    width: 100%;
    display: block !important;
}
.lang-native .goog-te-gadget-simple span { color: var(--ls-text-secondary) !important; border: 0 !important; }
.lang-native .goog-te-gadget-icon { display: none !important; }

/* =============================== MAIN BAR =============================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--ls-z-sticky);
    background: color-mix(in srgb, var(--ls-surface) 82%, transparent);
    backdrop-filter: saturate(180%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    border-bottom: 1px solid var(--ls-border);
    transition: box-shadow var(--ls-duration) var(--ls-ease),
                background var(--ls-duration) var(--ls-ease);
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
    .site-header { background: var(--ls-surface); }
}

.site-header.is-stuck {
    box-shadow: var(--ls-shadow-lg);
    background: color-mix(in srgb, var(--ls-surface) 94%, transparent);
}

.site-header-inner {
    display: flex;
    align-items: center;
    gap: var(--ls-space-6);
    min-height: 74px;
}

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

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--ls-space-3);
    text-decoration: none;
    flex: 0 0 auto;
}

.site-brand-mark { height: 38px; width: auto; display: block; }

.site-brand-name {
    font-size: var(--ls-text-lg);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ls-text);
    white-space: nowrap;
}

/* ---------------------------------------------------------- Navigation */

.site-nav { flex: 1 1 auto; display: flex; justify-content: center; }
.site-nav-list { display: flex; align-items: center; gap: var(--ls-space-1); list-style: none; margin: 0; padding: 0; }
.site-nav-item { position: relative; }

.site-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.6rem 0.9rem;
    border: 0;
    background: transparent;
    border-radius: var(--ls-radius-md);
    color: var(--ls-text-secondary);
    font-family: var(--ls-font-sans);
    font-size: 0.9375rem;
    font-weight: 550;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--ls-duration) var(--ls-ease), background var(--ls-duration) var(--ls-ease);
}

.site-nav-link:hover,
.site-nav-item.is-open > .site-nav-link { color: var(--ls-brand-600); background: var(--ls-brand-bg); }

/* Animated underline on the active item. */
.site-nav-link.is-active { color: var(--ls-brand-600); }
.site-nav-link.is-active::after {
    content: '';
    position: absolute;
    left: 0.9rem; right: 0.9rem; bottom: 0.15rem;
    height: 2px;
    border-radius: 2px;
    background: var(--ls-brand-600);
}

.nav-caret { font-size: 0.6rem; opacity: 0.7; transition: transform var(--ls-duration) var(--ls-ease); }
.site-nav-item.is-open .nav-caret { transform: rotate(180deg); }

/* ------------------------------------------------------------ Mega menu */

.mega {
    position: fixed;
    left: 0;
    right: 0;
    background: var(--ls-surface);
    border-bottom: 1px solid var(--ls-border);
    box-shadow: var(--ls-shadow-xl);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity var(--ls-duration) var(--ls-ease),
                transform var(--ls-duration) var(--ls-ease),
                visibility var(--ls-duration) var(--ls-ease);
    z-index: calc(var(--ls-z-sticky) - 1);
    pointer-events: none;
}

.site-nav-item.is-open .mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.mega-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--ls-space-7, 1.75rem);
    /* Was 2rem top and bottom, which left the first row sitting ~90px under the
       nav and read as a detached floating sheet. */
    padding-block: var(--ls-space-5) var(--ls-space-6);
}

.mega-heading { margin-bottom: var(--ls-space-4); }

.mega-eyebrow {
    display: inline-block;
    font-size: var(--ls-text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ls-brand-600);
    margin-bottom: var(--ls-space-2);
}

.mega-heading h3 { margin: 0 0 var(--ls-space-1); font-size: var(--ls-text-xl); color: var(--ls-text); letter-spacing: -0.01em; }
.mega-heading p { margin: 0; font-size: var(--ls-text-sm); color: var(--ls-text-muted); }

.mega-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: var(--ls-space-3);
}

.mega-card {
    display: flex;
    align-items: flex-start;
    gap: var(--ls-space-3);
    padding: var(--ls-space-3);
    border: 1px solid transparent;
    border-radius: var(--ls-radius-lg);
    text-decoration: none;
    transition: background var(--ls-duration) var(--ls-ease),
                border-color var(--ls-duration) var(--ls-ease),
                transform var(--ls-duration) var(--ls-ease);
}

.mega-card:hover {
    background: var(--ls-surface-2);
    border-color: var(--ls-border);
    transform: translateY(-2px);
}

.mega-card-icon {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--ls-radius-md);
    font-size: 1rem;
}

.tone-1 { background: color-mix(in srgb, var(--ls-brand-600) 14%, transparent); color: var(--ls-brand-600); }
.tone-2 { background: color-mix(in srgb, var(--ls-sky) 14%, transparent);       color: var(--ls-sky); }
.tone-3 { background: color-mix(in srgb, var(--ls-success) 14%, transparent);   color: var(--ls-success); }
.tone-4 { background: color-mix(in srgb, var(--ls-warning) 16%, transparent);   color: var(--ls-warning); }
.tone-5 { background: color-mix(in srgb, var(--ls-purple) 14%, transparent);    color: var(--ls-purple); }
.tone-6 { background: color-mix(in srgb, var(--ls-pink) 14%, transparent);      color: var(--ls-pink); }

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .mega-card-icon { background: var(--ls-surface-3); color: var(--ls-brand-600); }
}

.mega-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mega-card-body strong { font-size: var(--ls-text-sm); font-weight: 650; color: var(--ls-text); }
.mega-card-meta { font-size: var(--ls-text-xs); color: var(--ls-text-muted); line-height: 1.45; }
.mega-card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }

.mega-tag {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: var(--ls-radius-full);
    background: var(--ls-surface-3);
    /* --ls-text-muted lands at 4.39:1 here, just under AA. */
    color: var(--ls-text-secondary);
}

.mega-footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ls-space-5);
    margin-top: var(--ls-space-5);
    padding-top: var(--ls-space-4);
    border-top: 1px solid var(--ls-border);
}

.mega-link {
    display: inline-flex;
    align-items: center;
    gap: var(--ls-space-2);
    color: var(--ls-brand-600);
    font-size: var(--ls-text-sm);
    font-weight: 600;
    text-decoration: none;
}

.mega-link i { transition: transform var(--ls-duration) var(--ls-ease); font-size: 0.75rem; }
.mega-link:hover i { transform: translateX(4px); }

/* ------------------------------------------------------------ Mega promo */

.mega-promo {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--ls-space-2);
    padding: var(--ls-space-6);
    border-radius: var(--ls-radius-xl);
    background: linear-gradient(160deg, var(--ls-brand-700), var(--ls-brand-900));
    color: #fff;
    overflow: hidden;
    min-height: 260px;
}

.mega-promo-alt { background: linear-gradient(160deg, #0f766e, #134e4a); }

.mega-promo img {
    position: absolute;
    inset: auto -18% 48% auto;
    width: 78%;
    opacity: 0.22;
    pointer-events: none;
}

.mega-promo-badge {
    display: inline-block;
    align-self: flex-start;
    padding: 0.2rem 0.6rem;
    border-radius: var(--ls-radius-full);
    background: rgba(255, 255, 255, 0.2);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    position: relative;
}

.mega-promo h4 { margin: 0; font-size: var(--ls-text-lg); color: #fff; position: relative; }
.mega-promo p { margin: 0; font-size: var(--ls-text-sm); opacity: 0.88; line-height: 1.55; position: relative; }

.mega-promo-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--ls-space-2);
    margin-top: var(--ls-space-2);
    color: #fff;
    font-weight: 650;
    font-size: var(--ls-text-sm);
    text-decoration: none;
}

.mega-promo-cta i { transition: transform var(--ls-duration) var(--ls-ease); font-size: 0.75rem; }
.mega-promo-cta:hover i { transform: translateX(4px); }

/* ------------------------------------------------------------- Dropdown */

.dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 268px;
    padding: var(--ls-space-3);
    background: var(--ls-surface);
    border: 1px solid var(--ls-border);
    border-radius: var(--ls-radius-lg);
    box-shadow: var(--ls-shadow-xl);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--ls-duration) var(--ls-ease),
                transform var(--ls-duration) var(--ls-ease),
                visibility var(--ls-duration) var(--ls-ease);
    z-index: var(--ls-z-dropdown);
    pointer-events: none;
}

.site-nav-item.is-open .dropdown,
.site-account.is-open .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.dropdown-right { left: auto; right: 0; }
.dropdown[hidden] { display: block; }   /* animation handles visibility */

.dropdown-title {
    display: block;
    padding: var(--ls-space-2) var(--ls-space-3) var(--ls-space-1);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ls-text-muted);
}

.dropdown a {
    display: flex;
    align-items: center;
    gap: var(--ls-space-3);
    padding: var(--ls-space-2) var(--ls-space-3);
    border-radius: var(--ls-radius-md);
    color: var(--ls-text-secondary);
    text-decoration: none;
    transition: background var(--ls-duration) var(--ls-ease), color var(--ls-duration) var(--ls-ease);
}

.dropdown a:hover { background: var(--ls-brand-bg); color: var(--ls-brand-600); }
.dropdown a i { width: 18px; text-align: center; color: var(--ls-brand-600); font-size: 0.875rem; }
.dropdown a span { display: flex; flex-direction: column; }
.dropdown a strong { font-size: var(--ls-text-sm); font-weight: 600; color: inherit; }
.dropdown a small { font-size: var(--ls-text-xs); color: var(--ls-text-muted); }
.dropdown a.dropdown-danger:hover { background: var(--ls-danger-bg); color: var(--ls-danger-fg); }
.dropdown a.dropdown-danger:hover i { color: var(--ls-danger-fg); }
.dropdown-divider { height: 1px; margin: var(--ls-space-2) var(--ls-space-3); background: var(--ls-border); }

/* ================================ ACTIONS =============================== */

.site-actions {
    display: flex;
    align-items: center;
    gap: var(--ls-space-3);
    flex: 0 0 auto;
}

/* Separate the utility controls (search, theme) from the account actions, so
   the toggle no longer reads as if it belongs to the Log in button. */
.site-actions::before {
    content: '';
    display: block;
    width: 1px;
    height: 26px;
    background: var(--ls-border);
    order: 1;
    margin-inline: var(--ls-space-1);
}

.site-search { order: 0; }
.site-theme-toggle { order: 0; }
.site-account,
.site-btn-ghost,
.site-btn-primary { order: 2; }
.site-burger { order: 3; }

@media (max-width: 1024px) {
    .site-actions::before { display: none; }
}

/* --------------------------------------------------------------- Search */

.site-search {
    display: flex;
    align-items: center;
    position: relative;
    height: 40px;
    border-radius: var(--ls-radius-full);
    border: 1px solid transparent;
    background: transparent;
    transition: border-color var(--ls-duration) var(--ls-ease),
                background var(--ls-duration) var(--ls-ease),
                width var(--ls-duration-slow) var(--ls-ease);
    width: 40px;
    overflow: hidden;
}

.site-search.is-open {
    width: clamp(200px, 22vw, 300px);
    background: var(--ls-surface-2);
    border-color: var(--ls-border-strong);
}

.site-search-toggle,
.site-search-submit {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border: 0;
    background: transparent;
    color: var(--ls-text-muted);
    cursor: pointer;
    border-radius: var(--ls-radius-full);
    transition: color var(--ls-duration) var(--ls-ease), background var(--ls-duration) var(--ls-ease);
}

.site-search-toggle:hover { color: var(--ls-brand-600); background: var(--ls-surface-3); }

.site-search input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    font-family: var(--ls-font-sans);
    font-size: var(--ls-text-sm);
    color: var(--ls-text);
    padding: 0;
    opacity: 0;
    transition: opacity var(--ls-duration) var(--ls-ease);
}

.site-search.is-open input[type="search"] { opacity: 1; }
.site-search input[type="search"]::placeholder { color: var(--ls-text-muted); }

.site-search-submit { display: none; color: var(--ls-brand-600); }
.site-search.is-open .site-search-submit { display: flex; }
.site-search-submit:hover { background: var(--ls-brand-bg); }

/* --------------------------------------------------------------- Buttons */

.site-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ls-space-2);
    padding: 0.6rem 1.15rem;
    border-radius: var(--ls-radius-full);
    font-family: var(--ls-font-sans);
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--ls-duration) var(--ls-ease);
}

.site-btn i { font-size: 0.75rem; transition: transform var(--ls-duration) var(--ls-ease); }

.site-btn-ghost {
    color: var(--ls-text-secondary);
    border-color: var(--ls-border-strong);
    background: transparent;
}
.site-btn-ghost:hover { color: var(--ls-brand-600); border-color: var(--ls-brand-600); background: var(--ls-brand-bg); }

.site-btn-primary {
    background: linear-gradient(135deg, var(--ls-brand-600), var(--ls-brand-800));
    color: #fff;
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--ls-brand-600) 70%, transparent);
}
.site-btn-primary:hover { color: #fff; transform: translateY(-1px); box-shadow: var(--ls-shadow-lg); }
.site-btn-primary:hover i { transform: translateX(3px); }

.site-btn-block { width: 100%; justify-content: center; }

/* The theme toggle needs its own breathing room from the auth buttons. */
.site-theme-toggle {
    width: 40px;
    height: 40px;
    border-radius: var(--ls-radius-full);
    margin-right: var(--ls-space-1);
}

/* --------------------------------------------------------------- Account */

.site-account { position: relative; }

.site-account-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--ls-space-2);
    padding: 0.35rem 0.75rem 0.35rem 0.35rem;
    background: var(--ls-surface-2);
    border: 1px solid var(--ls-border);
    border-radius: var(--ls-radius-full);
    color: var(--ls-text-secondary);
    font-family: var(--ls-font-sans);
    font-size: var(--ls-text-sm);
    font-weight: 550;
    cursor: pointer;
    transition: border-color var(--ls-duration) var(--ls-ease);
}

.site-account-trigger:hover { border-color: var(--ls-brand-600); }

.site-avatar {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ls-brand-600), var(--ls-brand-800));
    color: #fff;
    font-weight: 700;
    font-size: var(--ls-text-xs);
}

.site-account-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- Burger */

.site-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px; height: 44px;
    padding: 0 10px;
    background: var(--ls-surface-2);
    border: 1px solid var(--ls-border);
    border-radius: var(--ls-radius-md);
    cursor: pointer;
}

.site-burger span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--ls-text);
    transition: transform var(--ls-duration) var(--ls-ease), opacity var(--ls-duration) var(--ls-ease);
}

.site-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

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

.site-drawer-overlay {
    position: fixed;
    inset: 0;
    background: var(--ls-overlay);
    backdrop-filter: blur(3px);
    z-index: var(--ls-z-overlay);
    opacity: 0;
    transition: opacity var(--ls-duration) var(--ls-ease);
}

.site-drawer-overlay.is-open { opacity: 1; }
.site-drawer-overlay[hidden] { display: none; }

.site-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(360px, 88vw);
    display: flex;
    flex-direction: column;
    background: var(--ls-surface);
    border-left: 1px solid var(--ls-border);
    box-shadow: var(--ls-shadow-xl);
    z-index: var(--ls-z-modal);
    transform: translateX(100%);
    transition: transform var(--ls-duration-slow) var(--ls-ease);
    overflow-y: auto;
}

.site-drawer.is-open { transform: translateX(0); }
.site-drawer[hidden] { display: none; }

.site-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ls-space-5);
    border-bottom: 1px solid var(--ls-border);
}

.site-drawer-close {
    /* 44px is the smallest reliably tappable target on a handset. */
    width: 44px; height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--ls-border);
    border-radius: var(--ls-radius-md);
    background: var(--ls-surface-2);
    color: var(--ls-text-secondary);
    cursor: pointer;
}

.drawer-search {
    display: flex;
    align-items: center;
    gap: var(--ls-space-2);
    margin: var(--ls-space-4) var(--ls-space-5) 0;
    padding: var(--ls-space-3);
    background: var(--ls-surface-2);
    border: 1px solid var(--ls-border);
    border-radius: var(--ls-radius-md);
}

.drawer-search i { color: var(--ls-text-muted); }
.drawer-search input {
    flex: 1 1 auto; min-width: 0;
    border: 0; outline: none; background: transparent;
    font-family: var(--ls-font-sans); font-size: var(--ls-text-sm); color: var(--ls-text);
}

.drawer-nav { flex: 1 1 auto; padding: var(--ls-space-4) var(--ls-space-3); }

.drawer-link,
.drawer-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ls-space-3);
    width: 100%;
    padding: var(--ls-space-3);
    border: 0;
    background: transparent;
    border-radius: var(--ls-radius-md);
    color: var(--ls-text-secondary);
    font-family: var(--ls-font-sans);
    font-size: var(--ls-text-base);
    font-weight: 550;
    text-decoration: none;
    cursor: pointer;
    text-align: left;
}

.drawer-link i,
.drawer-toggle > span i { color: var(--ls-brand-600); width: 20px; text-align: center; margin-right: var(--ls-space-2); }
.drawer-toggle > span { display: inline-flex; align-items: center; }
.drawer-link:hover, .drawer-toggle:hover { background: var(--ls-surface-2); color: var(--ls-brand-600); }
.drawer-link.is-active { background: var(--ls-brand-bg); color: var(--ls-brand-600); }
.drawer-toggle > i:last-child { transition: transform var(--ls-duration) var(--ls-ease); font-size: 0.75rem; }
.drawer-toggle[aria-expanded="true"] > i:last-child { transform: rotate(180deg); }

/* Collapsible group.
   --------------------------------------------------------------------------
   The 0fr -> 1fr grid technique animates a single row, so the panel must have
   exactly one child. The links used to sit directly inside it, which meant only
   the FIRST link got the 0fr row — every link after it landed in an implicit
   `auto` row and stayed at full height whether the group was open or shut. That
   is what left a clipped, half-drawn first item ghosting behind the rest.
   `.drawer-panel-inner` is that single child. */
.drawer-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--ls-duration-slow) var(--ls-ease);
}
.drawer-panel > .drawer-panel-inner { overflow: hidden; min-height: 0; }
.drawer-group.is-open .drawer-panel { grid-template-rows: 1fr; }

.drawer-panel a {
    display: block;
    padding: var(--ls-space-2) var(--ls-space-3) var(--ls-space-2) calc(var(--ls-space-6) + var(--ls-space-2));
    color: var(--ls-text-muted);
    text-decoration: none;
    font-size: var(--ls-text-sm);
    border-radius: var(--ls-radius-sm);
}
.drawer-panel a:hover { color: var(--ls-brand-600); background: var(--ls-surface-2); }

/* Fallback for browsers without grid-template-rows animation. */
@supports not (grid-template-rows: 0fr) {
    .drawer-panel { display: none; }
    .drawer-group.is-open .drawer-panel { display: block; }
    .drawer-panel-inner { overflow: visible; }
}

.drawer-foot {
    display: flex;
    flex-direction: column;
    gap: var(--ls-space-3);
    padding: var(--ls-space-5);
    border-top: 1px solid var(--ls-border);
}

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

.drawer-lang { display: flex; flex-direction: column; gap: var(--ls-space-2); }
.drawer-lang > span { font-size: var(--ls-text-xs); color: var(--ls-text-muted); }

/* ============================== RESPONSIVE ============================== */

@media (max-width: 1140px) {
    .site-nav-link { padding: 0.6rem 0.65rem; font-size: 0.9rem; }
    .site-account-name { display: none; }
}

@media (max-width: 1024px) {
    .site-nav { display: none; }
    .site-burger { display: flex; }
    .site-search { display: none; }
    .site-header-inner { justify-content: space-between; gap: var(--ls-space-3); }
    .mega-inner { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .site-topbar-contact .topbar-link:nth-child(n+2) { display: none; }
    .site-topbar-actions .topbar-link { display: none; }
}

@media (max-width: 600px) {
    .site-btn-ghost { display: none; }
    .site-header-inner { min-height: 64px; }
    .site-brand-mark { height: 32px; }
    .lang-panel { position: fixed; left: var(--ls-space-3); right: var(--ls-space-3); width: auto; }
}

@keyframes hdr-pop {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media print { .site-topbar, .site-header, .site-drawer, .site-drawer-overlay { display: none !important; } }

/* --------------------------------------------------------------------------
   Phone header
   --------------------------------------------------------------------------
   Measured at 375px: brand 183 + gap 12 + actions 178 + 32 of shell padding =
   405px of content in a 375px viewport. The row overflowed by 30px, which put
   the burger's right edge at 389 — past the viewport, where the overflow-x
   guard clipped it. The menu button was physically half off the screen, which
   is why phones appeared to have no menu at all even once the header was
   visible again.

   Two changes buy back the space: the account control folds into the drawer,
   which already carries the same links for both the signed-in and signed-out
   states, and the logo lockup is capped so a long site name cannot push the
   burger off on its own.
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .site-account { display: none; }

    /* The theme toggle moves into the drawer, beside Language. Three controls
       plus the logo did not fit a 375px row without shrinking the brand to the
       point of being unreadable; the toggle is the one people touch once. */
    .site-actions > .ls-theme-toggle { display: none; }

    .site-header-inner { gap: 10px; }

    .site-brand {
        min-width: 0;
        flex: 0 1 auto;
    }

    .site-brand-mark {
        /* contain, not fill — an admin can upload a lockup of any aspect ratio
           and it must letterbox rather than stretch. */
        max-width: 210px;
        height: 38px;
        width: auto;
        object-fit: contain;
        object-position: left center;
    }

    /* Keeps the burger hard against the right padding edge. */
    .site-actions {
        margin-left: auto;
        flex: 0 0 auto;
    }
}

/* Narrow handsets: the utility bar's language control was a 27px-tall target. */
@media (max-width: 480px) {
    .site-brand-mark { max-width: 180px; height: 34px; }

    .lang-trigger,
    .site-topbar .lang-trigger {
        min-height: 34px;
        padding: 6px 10px;
    }
}

/* Appearance row in the mobile drawer, paired with the language row above it. */
.drawer-appearance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ls-space-3);
    padding: var(--ls-space-3) 0 0;
    margin-top: var(--ls-space-3);
    border-top: 1px solid var(--ls-border);
    font-size: var(--ls-text-sm);
    color: var(--ls-text-secondary);
}