/* ╔═══════════════════════════════════════════════════════════════╗
   ║   NAV PANEL  —  ULTRA REFINED  •  USER FRIENDLY  EDITION    ║
   ║   Based on the provided base CSS — every section improved.   ║
   ║   JS class map:                                              ║
   ║     body.nav-open        ← body.classList.add("nav-open")   ║
   ║     .np-scrim.show       ← classList.add("show")            ║
   ║     .np-panel.open       ← classList.add("open")            ║
   ║     .np-dropdown.open    ← classList.toggle("open")         ║
   ║     .search-suggestions  ← JS createElement + append        ║
   ╚═══════════════════════════════════════════════════════════════╝ */

/* ═══════════════════════════════════════════
   §1  DESIGN TOKENS  (panel-scoped)
   All values live here — change one, cascade everywhere
═══════════════════════════════════════════ */
.np-panel {
    /* Backgrounds */
    --np-bg:            #0c0d12;
    --np-bg-grad:       linear-gradient(160deg, #13141d 0%, #0c0d12 100%);
    --np-surface:       rgba(255,255,255,.038);
    --np-surface-h:     rgba(255,255,255,.07);
    --np-surface-act:   rgba(255,159,28,.1);

    /* Borders */
    --np-border:        rgba(255,255,255,.07);
    --np-border-warm:   rgba(255,159,28,.22);

    /* Brand colours */
    --np-amber:         #FF9F1C;
    --np-rose:          #FF2E63;
    --np-gold:          #FFD166;
    --np-grad:          linear-gradient(135deg,#FF9F1C,#FF2E63);

    /* Text */
    --np-text:          #FFF6EB;
    --np-muted:         #94a3b8;
    --np-sub:           #64748b;

    /* Shape */
    --np-radius:        11px;
    --np-radius-sm:     7px;
    --np-radius-xs:     5px;

    /* Motion */
    --ease-out:         cubic-bezier(.22,.61,.36,1);
    --ease-spring:      cubic-bezier(.34,1.56,.64,1);
    --dur:              .34s;
    --dur-fast:         .18s;
}

/* ═══════════════════════════════════════════
   §2  BODY LOCK
   JS: document.body.classList.add("nav-open")
═══════════════════════════════════════════ */
body.nav-open {
    overflow: hidden;
    /* prevent page shift on browsers that have scrollbar gutter */
    padding-right: var(--scrollbar-width, 0px);
}

/* ═══════════════════════════════════════════
   §3  SCRIM
   JS: .np-scrim / #npScrim  →  classList.add("show")
═══════════════════════════════════════════ */
.np-scrim {
    position: fixed;
    inset: 0;
    z-index: 9997;

    background: rgba(0,0,0,.55);
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);

    opacity: 0;
    visibility: hidden;
    /* separate transitions so visibility doesn't lag */
    transition: opacity .28s ease, visibility .28s ease;
    cursor: pointer;  /* communicates "click to close" */
}

.np-scrim.show {
    opacity: 1;
    visibility: visible;
}

/* ═══════════════════════════════════════════
   §4  PANEL SHELL
   JS: .np-panel  →  classList.add("open")
═══════════════════════════════════════════ */
.np-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: min(370px, 92vw);
    height: 100dvh;             /* dvh: safe on mobile address-bar chrome */
    z-index: 9998;

    display: flex;
    flex-direction: column;

    /* ⚠️  overflow: visible is REQUIRED so .search-suggestions
       (position:absolute) can escape the panel boundary and
       receive pointer events without being clipped.
       The panel shell does NOT need overflow:hidden —
       inner scroll is handled by .np-inner instead.       */
    overflow: visible;

    background: var(--np-bg-grad);
    border-right: 1px solid var(--np-border);

    transform: translateX(-100%);
    transition: transform var(--dur) var(--ease-out),
                box-shadow  var(--dur) ease;

    box-shadow: none;
}

/* — open state — */
.np-panel.open {
    transform: translateX(0);
    box-shadow:
        8px 0 60px rgba(0,0,0,.7),
        2px 0 0 rgba(255,159,28,.06);
}

/* top accent bar — animated shimmer */
.np-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--np-grad);
    background-size: 200% 100%;
    animation: shimmerBar 4s linear infinite paused;
    pointer-events: none;
    z-index: 1;
}
.np-panel.open::before {
    animation-play-state: running;
}

@keyframes shimmerBar {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════
   §5  INNER SCROLL
═══════════════════════════════════════════ */
.np-inner {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,159,28,.2) transparent;
    /* np-panel is overflow:visible so suggestions can escape —
       np-inner clips the scrollable body content instead       */
    min-height: 0;              /* flex child must have this to scroll */
}
.np-inner::-webkit-scrollbar       { width: 3px; }
.np-inner::-webkit-scrollbar-track { background: transparent; }
.np-inner::-webkit-scrollbar-thumb {
    background: rgba(255,159,28,.25);
    border-radius: 99px;
}

/* staggered fade-up when panel opens */
.np-panel.open .np-header      { animation: fadeUp var(--dur) var(--ease-out) .08s both; }
.np-panel.open .np-search-wrap { animation: fadeUp var(--dur) var(--ease-out) .13s both; }
.np-panel.open .np-divider     { animation: fadeUp var(--dur) var(--ease-out) .16s both; }
.np-panel.open .np-links       { animation: fadeUp var(--dur) var(--ease-out) .19s both; }
.np-panel.open .np-howto       { animation: fadeUp var(--dur) var(--ease-out) .24s both; }
.np-panel.open .np-footer      { animation: fadeUp var(--dur) var(--ease-out) .28s both; }

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════
   §6  HEADER  — .np-header
   Contains brand logo + close button
═══════════════════════════════════════════ */
.np-header {
    padding: 18px 20px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;

    /* sticky — brand always visible while inner scrolls */
    position: sticky;
    top: 0;
    z-index: 5;
    background: linear-gradient(180deg,
        rgba(12,13,18,1)   0%,
        rgba(12,13,18,.96) 80%,
        transparent 100%);
}

/* ─── Close button — .np-close ─── */
.np-close {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: var(--np-radius-sm);
    background: var(--np-surface);
    border: 1px solid var(--np-border);
    color: var(--np-muted);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    /* rotate + colour on hover — feels satisfying */
    transition:
        transform      var(--dur-fast) var(--ease-spring),
        background     var(--dur-fast) ease,
        color          var(--dur-fast) ease,
        border-color   var(--dur-fast) ease;
}

.np-close:hover {
    background: rgba(255,46,99,.13);
    color: var(--np-rose);
    border-color: rgba(255,46,99,.3);
    transform: rotate(90deg) scale(1.05);
}
.np-close:active {
    transform: rotate(90deg) scale(.92);
}

/* ═══════════════════════════════════════════
   §7  SEARCH
   JS: creates .search-suggestions and appends
       to input.parentNode  →  .np-search-wrap
   CRITICAL: .np-search-wrap must stay position:relative
             .np-panel must NOT be overflow:hidden
             (fixed above — now overflow:visible)
═══════════════════════════════════════════ */
.np-search-wrap {
    position: relative;           /* ← anchor for .search-suggestions */
    padding: 0 20px 12px;
    flex-shrink: 0;
    /* z-index above .np-inner so suggestions float over nav links */
    z-index: 20;
}

/* search icon in pseudo, no extra HTML */
.np-search-wrap::before {
    content: "";
    position: absolute;
    left: 34px;
    top: 15px;
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") center/contain no-repeat;
    opacity: .55;
    pointer-events: none;
    z-index: 2;
    transition: opacity var(--dur-fast) ease;
}
.np-search-wrap:focus-within::before { opacity: 1; }

/* the <input> — right padding reserves room for clear ✕ button */
.np-search-wrap input[name="search"] {
    width: 100%;
    padding: 12px 40px 12px 40px;   /* right:40px for clear btn */
    border-radius: var(--np-radius);
    background: var(--np-surface);
    border: 1px solid var(--np-border);
    color: var(--np-text);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    -webkit-appearance: none;
    transition:
        border-color var(--dur-fast) ease,
        background   var(--dur-fast) ease,
        box-shadow   var(--dur-fast) ease;
}

.np-search-wrap input[name="search"]:focus {
    border-color: var(--np-border-warm);
    background: rgba(255,159,28,.05);
    box-shadow:
        0 0 0 3px rgba(255,159,28,.09),
        inset 0 1px 4px rgba(0,0,0,.25);
}

.np-search-wrap input[name="search"]::placeholder {
    color: var(--np-muted);
    opacity: .7;
}

/* ─── Clear ✕ button — .np-search-clear ───
   JS creates and appends this button.
   CSS shows it only when input has a value (JS adds .has-value to wrap)
   and hides it when empty.
─────────────────────────────────────────── */
.np-search-clear {
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-58%);  /* vertically centre inside input */
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.1);
    color: var(--np-muted);
    font-size: 11px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3;
    padding: 0;

    /* hidden by default — JS adds .has-value to .np-search-wrap */
    opacity: 0;
    pointer-events: none;
    transform: translateY(-58%) scale(.7);
    transition:
        opacity    var(--dur-fast) ease,
        transform  var(--dur-fast) var(--ease-spring),
        background var(--dur-fast) ease;
}

/* JS adds class .has-value to .np-search-wrap when input has text */
.np-search-wrap.has-value .np-search-clear {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-58%) scale(1);
}

.np-search-clear:hover {
    background: rgba(255,46,99,.25);
    color: #fff;
}
.np-search-clear:active { transform: translateY(-58%) scale(.88); }

/* ─── Live suggestions ───
   JS creates:  const s = document.createElement("div")
                s.className = "search-suggestions"
                input.parentNode.appendChild(s)
   JS populates: s.innerHTML  (forEach cat → div)
   JS clears:    s.innerHTML = ""  when query < 2

   BUG FIX: position:absolute + high z-index + panel overflow:visible
   ensures clicks reach the suggestion divs at all times.
─────────────────────────────────────────────────────────── */
.search-suggestions {
    position: absolute;
    top: calc(100% - 4px);
    left: 20px;
    right: 20px;
    /* z-index must beat .np-links (z-index auto) and .np-header (z-index 5) */
    z-index: 9999;

    background: #13141e;
    border: 1px solid var(--np-border-warm);
    border-radius: var(--np-radius);

    /* ⚠️  overflow:hidden here clips CHILD content, not the parent panel.
       This is safe because .search-suggestions is not a scroll container.
       Do NOT add overflow:hidden to the panel itself.                    */
    overflow: hidden;

    /* hidden when empty */
    max-height: 0;
    opacity: 0;
    transform: translateY(-5px);
    transition:
        max-height .26s var(--ease-out),
        opacity    .2s  ease,
        transform  .2s  var(--ease-out);

    box-shadow:
        0 16px 48px rgba(0,0,0,.6),
        0 0 0 1px rgba(255,159,28,.06);

    /* pointer-events must be auto so clicks register */
    pointer-events: auto;
}

/* CSS auto-reveal: triggered by JS filling innerHTML */
.search-suggestions:not(:empty) {
    max-height: 260px;
    opacity: 1;
    transform: translateY(0);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,159,28,.2) transparent;
}

/* each result <div> from JS forEach */
.search-suggestions > div {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 16px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--np-text);
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,.04);
    /* pointer-events:auto is the default but state explicitly for clarity */
    pointer-events: auto;
    user-select: none;
    transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}

/* arrow micro-icon via ::before — no HTML needed */
.search-suggestions > div::before {
    content: "→";
    font-size: 11px;
    color: var(--np-amber);
    opacity: 0;
    flex-shrink: 0;
    transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease;
}

.search-suggestions > div:last-child { border-bottom: none; }

.search-suggestions > div:hover {
    background: rgba(255,159,28,.08);
    color: var(--np-gold);
}
.search-suggestions > div:hover::before {
    opacity: 1;
    transform: translateX(2px);
}

/* ═══════════════════════════════════════════
   §8  DIVIDER  — .np-divider
═══════════════════════════════════════════ */
.np-divider {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--np-border) 20%,
        var(--np-border) 80%,
        transparent
    );
    margin: 6px 20px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   §9  NAV LINKS  — .np-links
═══════════════════════════════════════════ */
.np-links {
    padding: 8px 12px 16px;
}

/* Section labels */
.np-section-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--np-muted);
    opacity: .55;
    margin: 16px 0 5px 10px;
    user-select: none;
    pointer-events: none;
}
/* ═══════════════════════════════════════════
   § CTA BUTTON — Text Generator
═══════════════════════════════════════════ */

.np-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 14px 10px 6px;
    padding: 11px 16px;
    border-radius: 10px;

    background: var(--np-grad);
    color: white;
    font-weight: 600;
    font-size: 13.5px;
    text-decoration: none;

    box-shadow:
        0 8px 22px rgba(255,159,28,.25),
        0 0 30px rgba(255,46,99,.15);

    transition:
        transform .18s var(--ease-spring),
        box-shadow .25s ease,
        filter .25s ease;
}

.np-cta:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow:
        0 12px 28px rgba(255,159,28,.45),
        0 0 45px rgba(255,46,99,.3);
}

.np-cta:active {
    transform: scale(.96);
}
/* ─── Nav items — .np-item ───
   Shared by <a> and accordion <button>
   hover: fill sweeps in from left, warm left bar
───────────────────────────────────────────── */
.np-item,
.np-accordion > button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--np-radius-sm);
    color: var(--np-text);
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    overflow: hidden;  /* contain pseudo fill */

    transition: color var(--dur-fast) ease;
}

/* fill sweep on hover */
.np-item::before,
.np-accordion > button::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--np-surface-h);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s var(--ease-out);
}

/* left warm accent bar */
.np-item::after,
.np-accordion > button::after {
    content: "";
    position: absolute;
    left: 0; top: 18%; bottom: 18%;
    width: 2.5px;
    border-radius: 0 3px 3px 0;
    background: var(--np-grad);
    transform: scaleY(0);
    transition: transform .22s var(--ease-spring);
}

.np-item:hover,
.np-accordion > button:hover {
    color: var(--np-gold);
}
.np-item:hover::before,
.np-accordion > button:hover::before  { transform: scaleX(1); }
.np-item:hover::after,
.np-accordion > button:hover::after   { transform: scaleY(1); }
.np-item:active { transform: scale(.98); }

/* — active / current page — */
.np-item.active { color: var(--np-amber); font-weight: 600; }
.np-item.active::before { transform: scaleX(1); background: var(--np-surface-act); }
.np-item.active::after  { transform: scaleY(1); }

/* ═══════════════════════════════════════════
   §10  ACCORDION  — .np-accordion
   JS: toggleNavCategories()
       → document.getElementById("navCategoryDropdown")
             .classList.toggle("open")
═══════════════════════════════════════════ */
.np-accordion > button {
    justify-content: space-between;
}

/* chevron — rotates via :has() when list has .open */
.np-chevron {
    font-size: 11px;
    opacity: .5;
    flex-shrink: 0;
    transition: transform .28s var(--ease-out), opacity .2s ease;
    position: relative;
    z-index: 1;  /* above ::before fill */
}

.np-accordion:has(> ul.open) .np-chevron {
    transform: rotate(180deg);
    opacity: .9;
}

/* ═══════════════════════════════════════════
   §11  DROPDOWN  — #navCategoryDropdown / .np-dropdown
   JS: classList.toggle("open")
═══════════════════════════════════════════ */
.np-dropdown {
    list-style: none;
    margin: 0;
    padding: 2px 0 6px 8px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s var(--ease-out);
}

/* JS adds this */
.np-dropdown.open { max-height: 400px; }

/* connector line when expanded */
.np-accordion:has(> ul.open) > ul {
    border-left: 1px solid rgba(255,159,28,.16);
    margin-left: 12px;
}

/* stagger each item in when dropdown opens */
.np-dropdown.open > li { animation: dropIn .24s var(--ease-out) both; }
.np-dropdown.open > li:nth-child(1) { animation-delay: .02s; }
.np-dropdown.open > li:nth-child(2) { animation-delay: .05s; }
.np-dropdown.open > li:nth-child(3) { animation-delay: .08s; }
.np-dropdown.open > li:nth-child(4) { animation-delay: .11s; }
.np-dropdown.open > li:nth-child(5) { animation-delay: .14s; }
.np-dropdown.open > li:nth-child(6) { animation-delay: .17s; }
.np-dropdown.open > li:nth-child(7) { animation-delay: .20s; }
.np-dropdown.open > li:nth-child(8) { animation-delay: .23s; }

@keyframes dropIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* sub-links — .np-sub-item */
.np-sub-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--np-muted);
    text-decoration: none;
    border-radius: var(--np-radius-xs);
    transition:
        background var(--dur-fast) ease,
        color      var(--dur-fast) ease,
        padding-left .18s ease;
}

.np-sub-item::before {
    content: "·";
    font-size: 18px;
    line-height: 0;
    color: var(--np-amber);
    opacity: 0;
    flex-shrink: 0;
    transition: opacity var(--dur-fast) ease;
}

.np-sub-item:hover {
    background: rgba(255,46,99,.07);
    color: #ff9de2;
    padding-left: 14px;
}
.np-sub-item:hover::before { opacity: 1; }

/* ═══════════════════════════════════════════
   §12  HOW-TO PILL  — .np-howto
═══════════════════════════════════════════ */
.np-howto {
    display: flex;
    justify-content: center;
    padding: 14px 20px 8px;
    flex-shrink: 0;
}

.np-howto a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 22px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    color: var(--np-gold);
    text-decoration: none;
    background: rgba(255,209,102,.06);
    border: 1px solid rgba(255,209,102,.2);
    overflow: hidden;
    position: relative;
    transition:
        background  .22s ease,
        border-color .22s ease,
        transform   .18s var(--ease-spring);
}

/* shimmer sweep on hover */
.np-howto a::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 30%,
        rgba(255,209,102,.18) 50%,
        transparent 70%
    );
    transform: translateX(-100%);
    transition: transform .5s ease;
}
.np-howto a:hover::after   { transform: translateX(100%); }
.np-howto a:hover {
    background: rgba(255,209,102,.11);
    border-color: rgba(255,209,102,.38);
    transform: translateY(-1px);
}
.np-howto a:active { transform: scale(.97); }

/* ═══════════════════════════════════════════
   §13  PANEL FOOTER  — .np-footer
═══════════════════════════════════════════ */
.np-footer {
    padding: 18px 20px 22px;
    border-top: 1px solid var(--np-border);
    font-size: 13px;
    color: var(--np-muted);
    flex-shrink: 0;
    position: relative;
}

/* warm ambient glow behind footer copy */
.np-footer::before {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 110px;
    background: radial-gradient(
        ellipse 200px 90px at 50% 100%,
        rgba(255,159,28,.06),
        transparent
    );
    pointer-events: none;
}

/* brand row — .footer-logo */
.np-footer .footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 6px;
    text-decoration: none;

    background: var(--np-grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    z-index: 1;
}

/* logo img inside gradient text row */
.np-footer .footer-logo img {
    height: 26px;
    width: auto;
    -webkit-text-fill-color: initial;   /* img must NOT inherit transparent fill */
    filter: drop-shadow(0 0 7px rgba(255,159,28,.45));
    transition: filter .28s ease;
}
.np-footer .footer-logo:hover img {
    filter: drop-shadow(0 0 14px rgba(255,159,28,.8));
}

.np-footer p,
.np-footer div { position: relative; z-index: 1; }

/* ═══════════════════════════════════════════
   §14  RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 380px) {
    .np-panel { width: 100vw; }
}

/* ═══════════════════════════════════════════
   §15  ACCESSIBILITY — REDUCED MOTION
   Respect user OS preference. Keep visibility
   transitions so focus/keyboard still works.
═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .np-panel,
    .np-panel::before,
    .np-scrim,
    .np-close,
    .np-item,
    .np-item::before,
    .np-item::after,
    .np-accordion > button,
    .np-accordion > button::before,
    .np-accordion > button::after,
    .np-chevron,
    .np-dropdown,
    .np-dropdown > li,
    .np-sub-item,
    .np-howto a,
    .np-howto a::after,
    .search-suggestions,
    .search-suggestions > div,
    /* panel open stagger */
    .np-panel.open .np-header,
    .np-panel.open .np-search-wrap,
    .np-panel.open .np-divider,
    .np-panel.open .np-links,
    .np-panel.open .np-howto,
    .np-panel.open .np-footer {
        animation: none !important;
        transition: opacity .15s ease, visibility .15s ease !important;
    }
}