/* ==========================================================================
   Eagles Nest — public navbar
   ==========================================================================

   Everything the marketing navbar needs, in one file, so the component is
   styled wherever it is rendered. It used to depend on `assets/css/style.css`
   for its layout and on `eagles-nest-site.css` for its panels; any layout that
   loaded neither (Start Your Store did exactly that) rendered a navbar whose
   dropdowns never opened. A component's styling should travel with the
   component, not with whichever page happens to include the right sheet.

   Colours, fonts and identity are NOT set here — those stay in
   eagles-nest-brand.css. This file owns size, spacing and behaviour only.
   ========================================================================== */

/* ---- Brand ---------------------------------------------------------------- */
.en-nav .navbar-brand { display: flex; align-items: center; gap: .55rem; padding-block: 0; }
.en-nav .brand-logo { width: 34px; height: 34px; flex: 0 0 auto; }
.en-nav .brand-text { line-height: 1.1; white-space: nowrap; }
.en-nav .brand-text .name { font-weight: 800; font-size: 1rem; letter-spacing: .02em; }
.en-nav .brand-text .tag { font-size: .6rem; letter-spacing: .04em; }

/* ---- Links ----------------------------------------------------------------
   Trimmed from .5rem/.85rem to claw back horizontal room, which is what was
   pushing the two action buttons into wrapping. Still a comfortable target. */
.en-nav .navbar-nav .nav-link {
    font-weight: 500;
    font-size: .93rem;
    padding: .45rem .68rem !important;
}
.en-nav .navbar-nav .nav-link.active { position: relative; }

@media (min-width: 992px) {
    /* Two-word items ("About Us") must not stack. */
    .en-nav .navbar-nav .nav-link { white-space: nowrap; }
}

/* ---- Actions --------------------------------------------------------------
   The reported bug: "Log In" and "Get Started" broke onto two lines, which was
   also what made the bar 88px tall. They are labels, not paragraphs — they
   never wrap, and the row is allowed to keep its natural width rather than
   being squeezed by the nav list beside it. */
.en-nav .en-nav-actions { gap: .375rem; flex: 0 0 auto; }

.en-nav .btn-login,
.en-nav .en-nav-actions .btn-gold,
.en-nav .en-nav-actions .btn {
    white-space: nowrap;
    line-height: 1.25;
}

.en-nav .btn-login {
    border-radius: 10px;
    padding: .4rem .85rem;
    font-weight: 600;
    font-size: .875rem;
}

.en-nav .en-nav-actions .btn-gold {
    padding: .44rem 1rem;
    font-size: .9rem;
    font-weight: 700;
    border-radius: 10px;
}

.en-nav .btn-search {
    background: transparent;
    border: 0;
    font-size: 1.02rem;
    line-height: 1;
    padding: .35rem .4rem;
    display: inline-grid;
    place-items: center;
}

@media (min-width: 992px) {
    /* The link list may shrink; the buttons may not. */
    .en-nav .navbar-nav { min-width: 0; }
}

/* ---- Small desktops (992-1199px) -------------------------------------------
   Eight links, a search icon and two buttons do not fit inside Bootstrap's
   960px `lg` container. Rather than let them overflow — or collapse the bar to
   a burger on a size that is clearly a desktop — the navbar drops the page's
   side gutters (it has no need of them) and tightens a notch. Same design,
   same items, just closer together. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .en-nav > .container {
        max-width: none;
        width: 100%;
        padding-inline: 1rem;
    }

    .en-nav .navbar-nav .nav-link { padding: .45rem .4rem !important; font-size: .875rem; }
    .en-nav .brand-text .tag { display: none; }
    .en-nav .brand-logo { width: 30px; height: 30px; }
    .en-nav .btn-login { padding: .38rem .62rem; font-size: .82rem; }
    .en-nav .en-nav-actions .btn-gold { padding: .4rem .72rem; font-size: .84rem; }
    .en-nav .en-nav-actions { gap: .3rem; }
    .en-nav .btn-search { padding: .3rem .3rem; font-size: .95rem; }
}

/* ---- Dropdowns: shared behaviour -------------------------------------------
   Both kinds of panel (the wide mega menu and the plain Resources list) sit
   above everything else and are never clipped by the page beneath them. */
.en-nav { position: relative; z-index: 1035; }
.en-nav .dropdown-menu {
    border: 0;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(9, 14, 24, .22);
    z-index: 1040;
}

/*
 * THE HOVER GAP.
 *
 * The panel is offset below the trigger, and that offset used to be a real
 * margin — so the strip between the two belonged to neither element. Moving the
 * pointer down crossed it, `:hover` was lost on the way, and the menu closed
 * before it could be reached.
 *
 * The offset is now drawn by a transparent pseudo-element that is part of the
 * panel, so the trigger and the panel form one continuous hover region. No
 * timers, no delays — there is simply no dead space left to fall through.
 */
.en-nav .nav-item.dropdown > .dropdown-menu {
    margin-top: 0;
    top: 100%;
}
.en-nav .nav-item.dropdown > .dropdown-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-1 * var(--en-nav-bridge, 10px));
    height: var(--en-nav-bridge, 10px);
    background: transparent;
    /* Behind the panel's own surface, and — with the rule below — behind the
       navbar's links, so a bridge that reaches up past them cannot swallow a
       click meant for the trigger. */
    z-index: -1;
}

/*
 * A mega panel is anchored to the NAVBAR rather than to its list item, because
 * it spans the full width and has to be. That would leave a second dead strip
 * between the item's bottom edge and the navbar's — so instead of stretching
 * the bridge up over the links (where it would start swallowing their clicks),
 * the items themselves fill the bar's height, the way a navbar cell normally
 * does. The item's bottom edge and the navbar's then coincide, and the only
 * distance left to cover is the visual gap, which the bridge above already
 * handles.
 */
@media (min-width: 992px) {
    /* Pinned so the bridge below can be sized against a known value rather
       than whatever utility class happens to be on the element. */
    .en-nav { padding-block: .5rem; }

    /* What is left between the item and the panel is the bar's own bottom
       padding plus the visual gap — and nothing else. */
    .en-nav .nav-item.dropdown.en-mega > .dropdown-menu {
        --en-nav-bridge: calc(var(--en-nav-gap, 10px) + .5rem + 2px);
    }

    .en-nav > .container { align-items: stretch; }
    .en-nav .navbar-collapse,
    .en-nav .navbar-nav { align-items: stretch; }
    .en-nav .navbar-nav .nav-item { display: flex; align-items: stretch; }
    .en-nav .navbar-nav .nav-link { display: flex; align-items: center; }
}

/* The visual gap itself, kept as spacing INSIDE the positioned box. */
.en-nav .nav-item.dropdown > .dropdown-menu { transform: translateY(var(--en-nav-gap, 10px)); }

/* Open on hover at desktop width only. Touch devices keep Bootstrap's click
   behaviour, so a tap opens the panel instead of navigating past it. */
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
    .en-nav .nav-item.dropdown:hover > .dropdown-menu { display: block; }
}

/* ---- Mega panel ------------------------------------------------------------ */
.en-nav .en-mega { position: static; }

.en-mega-panel {
    width: min(1080px, calc(100vw - 32px));
    left: 50%;
    padding: 22px 24px 6px;
    border: 0;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(9, 14, 24, .22);
}

/* The mega panel is both centred and nudged down, so its transform has to
   carry the centring as well as the gap. */
.en-nav .nav-item.dropdown.en-mega > .dropdown-menu {
    transform: translateX(-50%) translateY(var(--en-nav-gap, 10px));
}

.en-mega-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 28px; }
.en-mega-col { min-width: 0; }
.en-mega-title {
    font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--en-gold-deep, #8A6410); margin: 6px 0 8px; display: flex; align-items: center; gap: 7px;
}
.en-mega-link {
    display: flex; gap: 11px; align-items: flex-start;
    padding: 8px 10px; margin-bottom: 2px; border-radius: 10px;
    text-decoration: none; color: var(--en-ink, #0E1013); transition: background .14s, transform .14s;
}
.en-mega-link:hover { background: var(--en-soft, #F7F5F0); transform: translateX(2px); color: var(--en-ink, #0E1013); }
.en-mega-link .ic {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
    background: var(--en-gold-100, #FBF3DC); color: var(--en-gold-deep, #8A6410); font-size: .95rem;
}
.en-mega-link .bd { min-width: 0; }
.en-mega-link .t { display: block; font-size: .875rem; font-weight: 650; line-height: 1.3; }
.en-mega-link .d {
    display: block; font-size: .77rem; color: var(--en-muted, #767E88);
    line-height: 1.45; margin-top: 2px;
}
.en-mega-foot {
    margin-top: 12px; padding: 12px 10px 14px; border-top: 1px solid var(--en-line, #E7E5E0);
}
.en-mega-foot a {
    font-size: .82rem; font-weight: 700; text-decoration: none;
    color: var(--en-gold-deep, #8A6410);
}
.en-mega-foot a:hover { text-decoration: underline; }

/* ---- Plain dropdown (Resources) -------------------------------------------- */
.en-nav .nav-item.dropdown > ul.dropdown-menu {
    min-width: 230px;
    padding: 8px;
}
.en-nav .dropdown-item {
    border-radius: 8px;
    padding: .5rem .6rem;
    font-size: .875rem;
    font-weight: 500;
}
.en-nav .dropdown-item:hover,
.en-nav .dropdown-item:focus {
    background: var(--en-soft, #F7F5F0);
    color: var(--en-ink, #0E1013);
}

/* ---- Mobile / tablet --------------------------------------------------------
   The collapsed navbar is a stacked list, so the panels are plain blocks in
   the flow — no offset, no floating card, and no hover behaviour at all. */
@media (max-width: 991.98px) {
    .en-nav .nav-item.dropdown > .dropdown-menu {
        transform: none;
        box-shadow: none;
        margin-top: 0;
    }
    .en-nav .nav-item.dropdown > .dropdown-menu::before { display: none; }

    .en-mega-panel {
        width: 100%;
        left: 0;
        padding: 4px 0 8px;
        max-height: 60vh;
        overflow-y: auto;
    }
    .en-nav .nav-item.dropdown.en-mega > .dropdown-menu { transform: none; }

    .en-mega-grid { grid-template-columns: 1fr; gap: 0; }
    .en-mega-link .d { display: none; }

    .en-nav-actions { padding: 12px 0 4px; }
    .en-nav .en-nav-actions { gap: .5rem; }
    .en-nav .collapse.navbar-collapse { max-height: 80vh; overflow-y: auto; }
}

/* Someone who prefers less motion still gets the menus, just without the
   nudge on the links. */
@media (prefers-reduced-motion: reduce) {
    .en-mega-link { transition: none; }
    .en-mega-link:hover { transform: none; }
}