/* =============================================================================
   Navbar redesign (Phase 2) — scoped entirely under `.frnav` so it is inert
   unless the new variant is active (?nav=new). Three changes:
     1. EPISODES mega-menu   — the 5 SEASON dropdowns collapsed into one panel
     2. FEATURES 3-column     — the long list laid out as its 3 existing groups
     3. Restyle + active-state — dark translucent bar, per-verse accent underline
   The accent triplet (`--frnav-accent`) is set inline on the <nav> from the
   page theme, matching the values in episode-hero.css.
   ============================================================================= */

.frnav {
    --frnav-accent: 115, 159, 199;              /* blueverse default */
    background: rgba(18, 20, 24, 0.92) !important;
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid rgba(var(--frnav-accent), 0.55);
    box-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

/* --- Brand ---------------------------------------------------------------- */
/* fringeshadownav is a light-on-light letterpress; give it a legible light
   fill on the dark bar while keeping a subtle emboss. Observer-font morph
   (HEEDSERVEOBEY on S5/419) still works — it just inherits this color. */
.frnav .navbar-brand,
.frnav .navbar-brand .fringeshadownav,
.frnav .navbar-brand .observer-font {
    color: #ece8df;
    -webkit-text-fill-color: #ece8df;
    text-shadow: 0 1px 0 #000, 0 2px 4px rgba(0, 0, 0, 0.6);
    letter-spacing: 0.02em;
}

/* Brand mark: flower.ico + the fr-hero-links accent dot + the wordmark, laid
   out on one baseline. The classes are unique to the brand markup, so these
   rules are inherently scoped even though the sheet loads globally. */
.navbar-brand.frnav-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
/* THE BRAND MOTIF — the page's legacy divider glyph (App\Support\Motif),
   rendered as the REAL ART. Do not "simplify" this to a CSS mask: these icons
   keep their detail in their luminance, so a mask flattens the flower, apple,
   seahorse, MoD seal and fdg insignia to featureless blobs.

   SIZED BY HEIGHT, WIDTH DERIVED. --fr-motif-ar is the source aspect ratio,
   set inline per motif: six of the seven are square, but the white tulip is
   96x35, and forced into a square box it would render as a 22x8 sliver. */
.frnav-brand__motif {
    display: block;
    flex: 0 0 auto;
    height: 22px;
    width: calc(22px * var(--fr-motif-ar, 1));
    object-fit: contain;
}
/* Three treatments (App\Support\Motif::MOTIFS). --light needs nothing on this
   dark bar, which is the ground its art was drawn for.

   --dark is monochrome dark art (the white tulip), so inverting is lossless and
   gives literally the right answer: a white tulip. */
.frnav .frnav-brand__motif--dark {
    filter: invert(1);
}
/* --colour is dark linework carrying real colour (the Fringe Division seal is
   74% black, 17% red, 7.5% gold). NEVER FILTER IT — a grayscale+invert shipped
   here first and threw the red and gold away. It gets the light ground its art
   assumes instead, so every pixel stays true. The seal is a true disc filling
   94.7% of its canvas, so a 50% radius plate registers with it exactly; the
   1px inset stops the plate showing as a ring outside the artwork's edge. */
.frnav .frnav-brand__motif--colour {
    background: #ece8df;
    border-radius: 50%;
    padding: 1px;
    box-sizing: content-box; /* keep the art at its 22px, plate outside it */
}

/* NOTHING IS APPLIED ON THE RETIRED LEGACY BAR (?nav=current) — every rule
   above is scoped to .frnav. That bar is a FIDELITY SHIM, and the legacy site
   showed this art untouched on it, so the five pale motifs stay as washed-out
   there as flower.ico always was. An invert would make them legible and wrong:
   flower, seahorse and apple are pale CYAN cutouts (measured: 53-93% saturated
   pixels), and inverting turns them orange. Only the motif CHOICE changes on
   that bar, which is the feature; the rendering does not. */
/* Same dot that separates the fr-hero-links groups: a 3px accent circle. Rides
   the nav's per-verse --frnav-accent (blueverse fallback for the legacy bar). */
.frnav-brand__dot {
    flex: 0 0 auto;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgb(var(--frnav-accent, 115, 159, 199));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* --- Top-level links ------------------------------------------------------ */
.frnav .navbar-nav .nav-link {
    color: rgba(233, 236, 240, 0.82);
    font-weight: 600;
    letter-spacing: 0.04em;
    position: relative;
    transition: color 0.15s ease;
}
.frnav .navbar-nav .nav-link:hover,
.frnav .navbar-nav .nav-link:focus,
.frnav .navbar-nav .show > .nav-link {
    color: #ffffff;
}

/* Active section — accent underline (tinted by the current page's verse).
   Uses ::before so Bootstrap's dropdown caret (::after) is left intact. */
.frnav .navbar-nav .nav-link.frnav-active {
    color: #ffffff;
}
.frnav .navbar-nav .nav-link.frnav-active::before {
    content: "";
    position: absolute;
    left: 0.5rem;
    right: 1.4rem;                              /* stop short of the caret */
    bottom: 0.15rem;
    height: 2px;
    border-radius: 2px;
    background: rgb(var(--frnav-accent));
    box-shadow: 0 0 8px rgba(var(--frnav-accent), 0.7);
}

/* --- Dropdown / mega panels (shared dark theme) --------------------------- */
.frnav .dropdown-menu {
    background: rgba(24, 27, 32, 0.98);
    border: 1px solid rgba(var(--frnav-accent), 0.35);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    border-radius: 0.5rem;
    padding: 0.75rem;
    margin-top: 0.35rem;
}
.frnav .dropdown-item {
    color: rgba(226, 230, 235, 0.85);
    border-radius: 0.35rem;
    padding: 0.3rem 0.6rem;
    white-space: normal;
}
.frnav .dropdown-item:hover,
.frnav .dropdown-item:focus {
    background: rgba(var(--frnav-accent), 0.18);
    color: #ffffff;
}
.frnav .dropdown-item.frnav-current {          /* the exact page you're on */
    background: rgba(var(--frnav-accent), 0.28);
    color: #ffffff;
}
.frnav .dropdown-menu .frnav-col-title {
    color: rgb(var(--frnav-accent));
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.15rem 0.6rem 0.35rem;
    margin: 0;
    border-bottom: 1px solid rgba(var(--frnav-accent), 0.25);
}

/* --- EPISODES mega-menu (5 season columns) -------------------------------- */
.frnav .frnav-mega-episodes {
    max-height: 82vh;
    overflow-y: auto;
}
.frnav .frnav-mega-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.4rem 0.9rem;
}
/* EPISODES is a full-width mega-menu: with 5 season columns it is far too wide
   to right-anchor to its toggle (it would run off the left edge). On desktop we
   make the parent <li> position:static and pin the panel to the navbar edges so
   it spans the whole bar — Season 1 at the left, Season 5 at the right. The
   toggle carries data-bs-display="static" so Bootstrap skips Popper and leaves
   positioning to this CSS. FEATURES/CHARACTERS stay normal right-aligned menus. */
@media (min-width: 992px) {
    .frnav .frnav-has-mega {
        position: static;
    }
    .frnav .frnav-mega-episodes.dropdown-menu {
        left: 1rem;
        right: 1rem;
        /* Align the top edge with the Popper-positioned CHARACTERS/FEATURES
           menus, which sit at the toggle's bottom (~3px above the navbar's
           bottom) rather than at the navbar's bottom (top:100%). */
        top: calc(100% - 3px);
        width: auto;                            /* left+right define the width */
        margin-top: 0;
    }
    .frnav .frnav-mega-episodes .frnav-mega-grid {
        width: 100%;                            /* fill the pinned panel */
    }
}
.frnav .frnav-col-list {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
}
.frnav .frnav-col-list .dropdown-item {
    font-size: 0.82rem;
    line-height: 1.25;
    padding: 0.28rem 0.6rem;
}
/* Episode links never wrap: a title too long for its column is truncated with
   an ellipsis (full text via the title tooltip), so a season column stays ~22
   rows tall — no taller than the legacy single-season dropdown. */
.frnav .frnav-mega-episodes .frnav-col-list .dropdown-item {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;                     /* anchor for the accent marker */
}
/* Per-episode accent marker: a thin vertical bar in the episode's verse colour,
   sitting inside the item's existing left padding so it never shifts the "E17"
   label. Hidden by default; revealed on hover/focus, and shown persistently on
   the current episode. Colour comes from the inline --ep-accent set per link. */
.frnav .frnav-mega-episodes .frnav-col-list .dropdown-item::before {
    content: "";
    position: absolute;
    left: 0.18rem;
    top: 50%;
    width: 3px;
    height: 1.05em;
    border-radius: 2px;
    background: var(--ep-accent, transparent);
    opacity: 0;
    transform: translateY(-50%) scaleY(0.35);
    transition: opacity 0.12s ease, transform 0.12s ease;
}
.frnav .frnav-mega-episodes .frnav-col-list .dropdown-item:hover::before,
.frnav .frnav-mega-episodes .frnav-col-list .dropdown-item:focus::before,
.frnav .frnav-mega-episodes .frnav-col-list .dropdown-item.frnav-current::before {
    opacity: 1;
    transform: translateY(-50%) scaleY(1);
}
@media (prefers-reduced-motion: reduce) {
    .frnav .frnav-mega-episodes .frnav-col-list .dropdown-item::before {
        transition: none;
    }
}

/* --- FEATURES mega-menu (3 group columns) --------------------------------- */
.frnav .frnav-mega-features .frnav-mega-grid {
    grid-template-columns: repeat(3, minmax(190px, 1fr));
}

/* --- CHARACTERS (2 balanced columns) -------------------------------------- */
.frnav .frnav-mega-characters .frnav-mega-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
    gap: 0.15rem 0.9rem;
}
.frnav .frnav-mega-characters .frnav-col-list .dropdown-item {
    font-size: 0.85rem;
}

/* --- Responsive: collapse the grids as the navbar collapses --------------- */
@media (max-width: 991.98px) {
    .frnav .dropdown-menu {
        background: rgba(16, 18, 22, 0.6);
        border-color: rgba(var(--frnav-accent), 0.25);
        box-shadow: none;
        margin-left: 0.5rem;
    }
    .frnav .frnav-mega-grid {
        grid-template-columns: 1fr;
        gap: 0.6rem;
        max-width: 100%;
    }
    .frnav .frnav-mega-episodes {
        max-height: none;                       /* the collapse itself scrolls */
    }
    /* On the stacked mobile menu, let long titles wrap instead of truncating */
    .frnav .frnav-mega-episodes .frnav-col-list .dropdown-item {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
    /* Keep each season/group visually separated when stacked */
    .frnav .frnav-mega-col + .frnav-mega-col {
        margin-top: 0.4rem;
        padding-top: 0.4rem;
    }
}

/* --- DEV-ONLY floating switcher (local env) ------------------------------- */
.frnav-devbar {
    position: fixed;
    bottom: 14px;
    left: 14px;
    z-index: 2000;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    font: 600 12px/1 "Montserrat", system-ui, sans-serif;
    background: rgba(18, 20, 24, 0.92);
    border: 1px solid rgba(115, 159, 199, 0.5);
    border-radius: 999px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}
.frnav-devbar__label {
    color: #8fb3d9;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0 6px 0 4px;
}
.frnav-devbar a {
    color: #cfd6dd;
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 999px;
}
.frnav-devbar a:hover {
    background: rgba(255, 255, 255, 0.08);
}
.frnav-devbar a.is-active {
    background: #739fc7;
    color: #10141a;
}