/* ============================================================================
   nav.css — dashboard navigation (Overview + project-category dropdowns)
   ----------------------------------------------------------------------------
   Styles includes/redtape_nav.html. Sits directly under the header and speaks
   the same visual language (see header.css): white surface, #dde5ef hairline,
   bold navy labels, slate text, pill controls, and the footer's red → orange
   gradient as the "you are here" underline.

   SELF-CONTAINED: anchored on #site-nav, with its own class namespace (.pnav*),
   so it can't inherit from — or be broken by — the older .site-nav* rules
   that may still exist in shared stylesheets.

   PROGRESSIVE ENHANCEMENT: the partial adds `.is-enhanced` to #site-nav with an
   inline script the moment it is parsed. Only then are the project lists
   turned into dropdowns. Without JS they stay open as plain link lists, so
   every project is still reachable.

   BEHAVIOUR lives in nav.js: it toggles `.is-open` on an item (and
   `.has-open` on the nav), manages aria-expanded, filtering and keyboard use.
   ============================================================================ */


/* ============================================================================
   1. TOKENS — same values as header.css, scoped to this nav
   ============================================================================ */
#site-nav {
    --pn-navy:     #07366c;
    --pn-red:      #aa241d;
    --pn-orange:   #ff8a2a;
    --pn-ink:      #334155;
    --pn-muted:    #64748b;
    --pn-border:   #dde5ef;
    --pn-divider:  #eef2f7;
    --pn-pill:     #f8fafc;
    --pn-hover:    #f1f5f9;
    --pn-current:  #eef4fb;
    --pn-bar-h:    52px;
    --pn-underline: linear-gradient(90deg, var(--pn-red), var(--pn-orange));
}


/* ============================================================================
   2. BAR
   ============================================================================ */
#site-nav {
    position: relative;
    z-index: 290;                /* under the header (300, so ITS mobile menu stays on top), over page content */

    margin: 0;
    padding: 0;
    background: #ffffff;
    color: var(--pn-ink);
    border: 0;
    border-bottom: 1px solid var(--pn-border);
    font-family: inherit;
}
#site-nav,
#site-nav *,
#site-nav *::before,
#site-nav *::after { box-sizing: border-box; }

#site-nav a { text-decoration: none; }

#site-nav :focus-visible {
    outline: 2px solid var(--pn-navy);
    outline-offset: -2px;
    border-radius: 6px;
}

.pnav__inner {
    display: flex;
    align-items: stretch;
    gap: 4px;
    min-height: var(--pn-bar-h);
    margin: 0;
    padding: 0 clamp(16px, 3.4vw, 64px);   /* same left edge as header + footer */
}

.pnav__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.pnav__icon {
    display: inline-block;
    min-width: 1.3em;
    text-align: center;
    font-size: 1rem;
    line-height: 1;
}


/* ============================================================================
   3. OVERVIEW LINK + TABS
   ============================================================================ */
.pnav__overview,
.pnav__tab,
.pnav__flat {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0 14px;
    background: none;
    border: 0;
    border-radius: 0;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--pn-ink);
    white-space: nowrap;
    cursor: pointer;
    transition: color 160ms ease, background 160ms ease;
}
.pnav__overview:hover,
.pnav__tab:hover,
.pnav__flat:hover { color: var(--pn-navy); background: var(--pn-hover); }

/* the gradient underline: current page, or the open dropdown */
.pnav__overview::after,
.pnav__tab::after,
.pnav__flat::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--pn-underline);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pnav__overview[aria-current="page"],
.pnav__flat[aria-current="page"],
.pnav__item.is-current > .pnav__tab,
.pnav__item.is-open > .pnav__tab { color: var(--pn-navy); }

.pnav__overview[aria-current="page"]::after,
.pnav__flat[aria-current="page"]::after,
.pnav__item.is-current > .pnav__tab::after,
.pnav__item.is-open > .pnav__tab::after { transform: scaleX(1); }

.pnav__tabs {
    display: flex;
    align-items: stretch;
    gap: 2px;
    margin: 0 0 0 8px;
    padding: 0 0 0 8px;
    list-style: none;
    border-left: 1px solid var(--pn-border);   /* Overview | categories */
}
.pnav__item { position: relative; display: flex; margin: 0; padding: 0; list-style: none; }
.pnav__tabs--flat { border-left: 0; margin-left: 0; padding-left: 0; }

.pnav__count {
    padding: 2px 7px;
    background: var(--pn-divider);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1.4;
    color: var(--pn-navy);
}
.pnav__chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: var(--pn-muted);
    transition: transform 200ms ease, color 160ms ease;
}
.pnav__item.is-open .pnav__chevron { transform: rotate(180deg); color: var(--pn-navy); }


/* ============================================================================
   3b. USER MANAGEMENT — admin-only link at the right-hand end of the bar
   ============================================================================ */
.pnav__admin {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin: 0 0 0 auto;             /* pushes it to the far end of the bar */
    padding: 7px 14px;
    background: var(--pn-pill);
    color: var(--pn-navy);
    border: 1px solid var(--pn-border);
    border-radius: 999px;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.pnav__admin:hover {
    background: #ffffff;
    border-color: var(--pn-navy);
    box-shadow: 0 2px 8px rgba(7, 54, 108, 0.10);
}
.pnav__admin[aria-current="page"] {
    background: var(--pn-current);
    border-color: var(--pn-navy);
}


/* ============================================================================
   4. DROPDOWN PANEL
   ----------------------------------------------------------------------------
   Without JS (no .is-enhanced) the panel is just a static block, so the list
   is always reachable. With JS it becomes an absolutely positioned card.
   ============================================================================ */
.pnav__panel {
    display: flex;
    flex-direction: column;
    background: #ffffff;
}

#site-nav.is-enhanced .pnav__panel {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 260;

    width: min(420px, calc(100vw - 24px));
    max-height: min(72vh, 520px);
    margin-top: 6px;
    overflow: hidden;

    border: 1px solid var(--pn-border);
    border-radius: 14px;
    box-shadow: 0 24px 48px rgba(7, 54, 108, 0.16), 0 2px 6px rgba(7, 54, 108, 0.06);

    opacity: 0;
    visibility: hidden;                 /* also removes it from the tab order */
    transform: translateY(-6px);
    /* closing: fade first, THEN hide (visibility waits out the fade) */
    transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}
/* invisible bridge so the pointer can cross the 6px gap without closing it */
#site-nav.is-enhanced .pnav__panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -8px;
    height: 8px;
}
#site-nav.is-enhanced .pnav__panel.is-flip { left: auto; right: 0; }
#site-nav.is-enhanced .pnav__item.is-open > .pnav__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    /* opening: become focusable IMMEDIATELY (visibility 0s, no delay), so
       nav.js can move focus into the list on the same tick it opens it */
    transition: opacity 160ms ease, transform 160ms ease, visibility 0s;
}

.pnav__panel-head {
    flex-shrink: 0;
    padding: 16px 18px 10px;
}
.pnav__panel-head::before {          /* small gradient tick, echoing the footer bar */
    content: "";
    display: block;
    width: 28px;
    height: 3px;
    margin-bottom: 10px;
    border-radius: 3px;
    background: var(--pn-underline);
}
.pnav__panel-title {
    display: block;
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--pn-navy);
}
.pnav__panel-meta {
    display: block;
    margin-top: 2px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--pn-muted);
}

.pnav__filter { flex-shrink: 0; padding: 0 14px 10px; }
.pnav__filter-input {
    display: block;
    width: 100%;
    margin: 0;
    padding: 9px 14px 9px 38px;
    background: var(--pn-pill)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")
        no-repeat 13px center / 16px 16px;
    border: 1px solid var(--pn-border);
    border-radius: 999px;
    font: inherit;
    font-size: 0.86rem;
    color: var(--pn-ink);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.pnav__filter-input::placeholder { color: var(--pn-muted); }
.pnav__filter-input:focus {
    outline: none;
    background-color: #ffffff;
    border-color: var(--pn-navy);
    box-shadow: 0 0 0 3px rgba(7, 54, 108, 0.12);
}

.pnav__list {
    position: relative;                 /* nav.js scrolls the current item into view */
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 4px 8px 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
    scrollbar-width: thin;
    scrollbar-color: var(--pn-border) transparent;
}
.pnav__row { margin: 0; padding: 0; list-style: none; }

.pnav__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--pn-ink);
    transition: background 140ms ease, color 140ms ease;
}
.pnav__link:hover { background: var(--pn-hover); color: var(--pn-navy); }
.pnav__link[aria-current="page"] {
    background: var(--pn-current);
    color: var(--pn-navy);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--pn-red);
}

.pnav__empty,
.pnav__none {
    margin: 0;
    padding: 14px 18px 18px;
    font-size: 0.86rem;
    color: var(--pn-muted);
    list-style: none;
}
.pnav__none[hidden] { display: none; }


/* ============================================================================
   5. NO-JS FALLBACK — lists stay open, laid out as readable blocks
   ============================================================================ */
#site-nav:not(.is-enhanced) .pnav__tabs { flex-wrap: wrap; }
#site-nav:not(.is-enhanced) .pnav__item { flex-direction: column; min-width: 240px; }
#site-nav:not(.is-enhanced) .pnav__tab { min-height: var(--pn-bar-h); cursor: default; }
#site-nav:not(.is-enhanced) .pnav__chevron { display: none; }


/* ============================================================================
   6. PHONES — scrolling tab strip + bottom-sheet dropdowns
   ----------------------------------------------------------------------------
   A strip of tabs can scroll sideways, but an absolutely positioned dropdown
   inside it would be clipped. So on phones the panel is fixed to the bottom of
   the screen as a sheet, with a dimmed backdrop behind it.
   ============================================================================ */
@media (max-width: 860px) {
    .pnav__inner {
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .pnav__inner::-webkit-scrollbar { display: none; }
    .pnav__admin { margin-left: 12px; }      /* auto-margin has no spare room in a scrolling strip */

    #site-nav.is-enhanced .pnav__panel {
        position: fixed;
        top: auto;
        left: 10px;
        right: 10px;
        bottom: 10px;
        width: auto;
        max-height: min(74vh, 580px);
        margin-top: 0;
        border-radius: 18px;
        transform: translateY(16px);
        z-index: 2;
    }
    #site-nav.is-enhanced .pnav__panel::before { display: none; }
    #site-nav.is-enhanced .pnav__panel.is-flip { left: 10px; right: 10px; }

    #site-nav.has-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 1;
        background: rgba(7, 30, 60, 0.4);
    }
    .pnav__link { padding: 12px 10px; font-size: 0.95rem; }
}


/* ============================================================================
   6b. STACKING GUARD — keep maps from painting over the header and dropdowns
   ----------------------------------------------------------------------------
   Leaflet gives its map panes z-index 400 and its controls 800-1000. Unless the
   map container forms its own stacking context, those numbers compete with the
   rest of the page — so a map can be drawn OVER the header and over an open
   project dropdown. `isolation: isolate` confines all of that to the map
   itself; the map still layers normally inside its own box.
   ============================================================================ */
.leaflet-container { isolation: isolate; }


/* ============================================================================
   7. REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    #site-nav,
    #site-nav *,
    #site-nav *::before,
    #site-nav *::after { transition-duration: 0.001ms !important; }
}