/* ── Redesigned navbar ────────────────────────────────────────────────────────
   Loads on every page, so everything here is scoped to .evas-navbar (plus the
   two body/menu rules the fixed bar needs). Nothing may leak onto the legacy
   Bootstrap templates.
   ──────────────────────────────────────────────────────────────────────────── */

/* ── Scoped preflight ─────────────────────────────────────────────────────────
   Tailwind's global reset is switched off in tailwind.config.js because this
   build ships on legacy pages too. A few utilities are useless without it —
   most importantly `border`, which sets border-WIDTH only and renders nothing
   unless a border-style exists. These are the preflight rules the navbar
   depends on, confined to the navbar.

   Every selector below is wrapped in :where() so it carries ZERO specificity
   from the scope class, exactly like the real preflight it stands in for.
   Without that, `.evas-navbar a {color:inherit}` (0,1,1) would beat
   `.text-slate-400` (0,1,0) and every nav link would inherit Bootstrap's dark
   body colour instead of its utility colour.
   ──────────────────────────────────────────────────────────────────────────── */
:where(.evas-navbar),
:where(.evas-navbar) *,
:where(.evas-navbar) *::before,
:where(.evas-navbar) *::after {
    box-sizing: border-box;
    border: 0 solid var(--border-muted);
}

:where(.evas-navbar) button {
    margin: 0;
    padding: 0;
    background: transparent;
    font-family: inherit;
    font-size: 100%;
    line-height: inherit;
    color: inherit;
    text-transform: none;
    -webkit-appearance: button;
}

:where(.evas-navbar) a {
    color: inherit;
    text-decoration: inherit;
}

:where(.evas-navbar) svg {
    display: block;
    vertical-align: middle;
}

/* style.css sets `*:not(i){font-family:'Roboto'}` globally, which would beat the
   inherited brand font on nav text — so re-assert it inside the navbar.
   Several menu labels also contain emoji (🆕 ✔). BDO Grotesk has no emoji
   glyphs and a bare `sans-serif` fallback renders them as tofu boxes, so the
   colour emoji fonts are named explicitly. */
.evas-navbar,
.evas-navbar a,
.evas-navbar button,
.evas-navbar span {
    font-family: 'BDO Grotesk', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
}

/* ── Layout ───────────────────────────────────────────────────────────────────
   The bar is fixed, so every page needs to start below it. theme.css sets this
   for redesigned pages; the navbar now needs it site-wide.
   ──────────────────────────────────────────────────────────────────────────── */
body {
    padding-top: 56px;
}

/* The legacy admin bar, when logged in, already offsets the page. */
body.admin-bar .evas-navbar {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .evas-navbar {
        top: 46px;
    }
}

/* ── Nav links ────────────────────────────────────────────────────────────────
   Named .evas-nav-link, NOT .nav-link: Bootstrap already defines .nav-link with
   `display:block; padding:.5rem 1rem`, which would push the items apart. Same
   visual result as the design kit's .nav-link, under a name Bootstrap doesn't
   own.
   ──────────────────────────────────────────────────────────────────────────── */
.evas-nav-link {
    position: relative;
    transition: color .2s;
}

.evas-nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--brand-purpleL);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s;
}

.evas-nav-link:hover {
    color: var(--brand-purpleL) !important;
}

.evas-nav-link:hover::after {
    transform: scaleX(1);
}

/* ── Dropdown ─────────────────────────────────────────────────────────────────
   Opens on hover on desktop and on focus for keyboard users. Bootstrap's
   .dropdown-menu is deliberately not used.
   ──────────────────────────────────────────────────────────────────────────── */
.evas-dropdown-menu {
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}

.evas-dropdown:hover .evas-dropdown-menu,
.evas-dropdown:focus-within .evas-dropdown-menu {
    opacity: 1;
    visibility: visible;
}

.evas-dropdown:hover .evas-dropdown-chevron,
.evas-dropdown:focus-within .evas-dropdown-chevron {
    transform: rotate(180deg);
}

.evas-dropdown-chevron {
    transition: transform .2s ease;
}

/* ── Mobile drawer ────────────────────────────────────────────────────────────
   Animated with opacity + scaleY so it can be driven by a single class toggle
   rather than inline styles.
   ──────────────────────────────────────────────────────────────────────────── */
.evas-mobile-menu {
    opacity: 0;
    transform: scaleY(0);
    pointer-events: none;
    transform-origin: top;
    transition: opacity .3s ease-out, transform .3s ease-out;

    /* This menu is much longer than the design mockup's — 9 sections, one with
       19 links — so the drawer scrolls itself. Body scroll is locked while it
       is open, so without this the lower entries are unreachable. dvh accounts
       for mobile browser chrome; the vh line is the fallback. */
    max-height: calc(100vh - 56px);
    max-height: calc(100dvh - 56px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* animations.css sets `.nav-mobile-link{display:block}` and loads after the
   Tailwind utilities, so `flex` on the submenu buttons loses. Re-assert it here
   (navbar.css loads last) or the chevron drops onto its own line. */
.evas-navbar [data-evas-submenu-toggle] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.evas-navbar.is-open .evas-mobile-menu {
    opacity: 1;
    transform: scaleY(1);
    pointer-events: auto;
}

.evas-mobile-submenu {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .25s ease, opacity .25s ease;
}

/* Generous enough for the longest submenu (19 links); the drawer itself scrolls,
   so this only needs to avoid clipping. */
.evas-mobile-item.is-open .evas-mobile-submenu {
    max-height: 1500px;
    opacity: 1;
}

.evas-mobile-item.is-open .evas-dropdown-chevron {
    transform: rotate(180deg);
}

/* Hidden until the toggle opens it, so it never eats taps while closed. */
.evas-navbar .evas-backdrop {
    display: none;
}

.evas-navbar.is-open .evas-backdrop {
    display: block;
}