/*
 * Frontend header (templates/layout/web.php).
 * - .is-sticky   pins the header (Configure 'Header.sticky')
 * - .is-scrolled added by js/site-header.js once the page scrolls: frosted background + shadow
 * - desktop menu: animated underline, chevron flip, active section, refined dropdown panels
 * Header height never changes on scroll, so sticky mode cannot make the page jump.
 */

:root {
    --nav-ink: #000022;
    --nav-accent: #D87A61;
    --nav-sage: #A3C4A9;
    --nav-sage-ink: #3E6B48;
    --nav-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Shell ---------- */

.site-header.is-sticky {
    position: sticky;
    top: 0;
}

/* Background lives on a pseudo-element: a backdrop-filter on the header itself would
   trap the fixed mobile-menu overlay inside the header box. */
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    box-shadow: 0 1px 0 rgba(0, 0, 34, 0.06), 0 10px 30px -18px rgba(0, 0, 34, 0.35);
    opacity: 0;
    transition: opacity 0.35s var(--nav-ease);
}

.site-header.is-scrolled::before {
    opacity: 1;
}

.site-logo {
    transition: transform 0.35s var(--nav-ease);
}

.site-logo:hover {
    transform: scale(1.04);
}

/* ---------- Desktop menu ---------- */

#mainNavLinks > li > button {
    position: relative;
    transition: color 0.25s ease;
}

#mainNavLinks > li > button:not(.nav-cta) {
    color: var(--nav-ink);
}

#mainNavLinks > li > button svg {
    transition: transform 0.35s var(--nav-ease);
}

#mainNavLinks > li:hover > button svg,
#mainNavLinks > li:focus-within > button svg {
    transform: rotate(180deg);
}

/* Underline for the text links (not the My Account pill) */
#mainNavLinks > li > button:not(.nav-cta)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--nav-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.4s var(--nav-ease);
}

#mainNavLinks > li:hover > button:not(.nav-cta),
#mainNavLinks > li:focus-within > button:not(.nav-cta),
#mainNavLinks > li.is-active > button:not(.nav-cta) {
    color: var(--nav-accent);
}

#mainNavLinks > li:hover > button:not(.nav-cta)::after,
#mainNavLinks > li:focus-within > button:not(.nav-cta)::after,
#mainNavLinks > li.is-active > button:not(.nav-cta)::after {
    transform: scaleX(1);
}

#mainNavLinks > li > button:focus-visible {
    outline: 2px solid var(--nav-accent);
    outline-offset: 4px;
    border-radius: 4px;
}

/* My Account pill */
#mainNavLinks .nav-cta {
    color: #fff;
    padding: 8px 16px;
    border-radius: 999px;
    box-shadow: 0 6px 16px -8px rgba(216, 122, 97, 0.8);
    transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s var(--nav-ease);
}

#mainNavLinks .nav-cta:hover,
#mainNavLinks > li:focus-within > .nav-cta {
    color: #fff;
    /* deeper sage than the brand #A3C4A9 so the white label stays readable */
    background-color: #5E8C68;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -10px rgba(163, 196, 169, 0.95);
}

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

#mainNavLinks > li > div {
    top: 100%;
    margin-top: 10px !important;
    min-width: 220px;
    padding: 8px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 34, 0.06), 0 22px 48px -18px rgba(0, 0, 34, 0.28);
    transform-origin: top left;
}

/* Invisible bridge across the gap so moving from the button to the panel keeps it open */
#mainNavLinks > li > div::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    height: 14px;
}

/* Rightmost panel opens to the left so it never runs off screen */
#mainNavLinks > li:last-child > div {
    left: auto;
    right: 0;
    transform-origin: top right;
}

#mainNavLinks > li > div > a {
    position: relative;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 15px;
    color: var(--nav-ink);
    transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.25s var(--nav-ease);
}

#mainNavLinks > li > div > a:hover,
#mainNavLinks > li > div > a:focus-visible {
    background: rgba(163, 196, 169, 0.2);
    color: var(--nav-sage-ink);
    padding-left: 18px;
    outline: none;
}

/* Small accent tick that slides in on hover */
#mainNavLinks > li > div > a::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--nav-accent);
    opacity: 0;
    transform: translate(-4px, -50%);
    transition: opacity 0.2s ease, transform 0.25s var(--nav-ease);
}

#mainNavLinks > li > div > a:hover::before,
#mainNavLinks > li > div > a:focus-visible::before {
    opacity: 1;
    transform: translate(0, -50%);
}

/* Group labels inside My Account ("Student", "Center & Teacher", ...) */
#mainNavLinks > li > div > span {
    padding: 10px 12px 6px;
    border: 0 !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #9A9AA6;
}

#mainNavLinks > li > div > div.border-t {
    margin: 6px 4px;
    border-color: rgba(0, 0, 34, 0.08);
}

/* ---------- Mobile menu button ---------- */

.site-header .md\:hidden > button[aria-label="Open menu"] {
    border-radius: 10px;
    box-shadow: 0 6px 18px -10px rgba(0, 0, 34, 0.45);
    transition: transform 0.2s ease;
}

.site-header .md\:hidden > button[aria-label="Open menu"]:active {
    transform: scale(0.94);
}

@media (prefers-reduced-motion: reduce) {
    .site-header *,
    .site-header::before {
        transition: none !important;
    }
}