/* ==========================================================================
   CHL — Explore mega-menu (BP:CHL_EXPLORE v2). Premium centred panel.
   Loaded by topbar.php on EVERY public page; only .chl-mega* selectors are
   touched and NO :root custom properties are declared (a global --chl-search-*
   would shadow the per-page tokens home / explore / results define for
   themselves). Tokens live on .chl-mega. Orange is the one action colour —
   the former purple treatment is gone.

   FROZEN SEARCH COMPONENT: the .chl-mega__form / .chl-mega__f rules are this
   menu's instance of the shared CHL search bar (same pill language as the
   homepage .searchbar, /explore .ex-searchbar, results .exm-search and the
   floating .chl-float-search). They are marked FROZEN below and must not be
   edited — the menu is designed AROUND them.

   THEME-BLEED FIREWALL: the panel lives inside ul.side_menu, so theme rules
   like `.top_right_menu li a:hover{color:var(--org)}` (specificity 0,2,2) and
   the header's responsive `.side_menu li a{... !important}` blocks would
   otherwise restyle every link in the panel (that cascade is what produced
   the old purple-button-with-orange-text state). Every rule here is prefixed
   with `.chl-mega` for specificity, and the few properties the header forces
   with !important (display / padding / font-size / text-transform) are
   re-asserted with !important, scoped strictly to this namespace.
   ========================================================================== */
.chl-mega-li{position:relative}

/* trigger: open-state affordance + chevron driven by state, not hover */
.chl-mega-li > a .dropdown-icon{transition:transform .18s ease}
.chl-mega-li.is-open > a{color:var(--org,#F26122)}
.chl-mega-li.is-open > a .dropdown-icon{transform:rotate(180deg)}
/* when JS owns the state, the theme's hover-rotate must not fight it */
.chl-mega-li.chl-mega-js:not(.is-open) > a .dropdown-icon{transform:none}
.chl-mega-li > a:focus-visible{outline:2px solid var(--org,#F26122);outline-offset:4px;border-radius:6px}

/* ── panel: centred under the navbar, clamped to the viewport ───────────── */
.chl-mega{
  --nav-h:78px;                                  /* fallback; JS measures the real header bottom */
  --mega-ink:#1c1930;
  --mega-muted:#5a5570;
  --mega-faint:#6b6680;
  --mega-line:rgba(20,17,31,.08);
  --mega-surface:#faf9fd;
  --mega-accent:#f0883e;
  --mega-accent-2:#f2a15f;
  --mega-accent-soft:#fff3e9;
  --mega-accent-deep:#b0500f;                    /* AA on white and on --mega-accent-soft */
  position:fixed;top:var(--nav-h);left:50%;
  width:min(1060px,100vw - 40px);
  z-index:1200;                                  /* above header (1000) and floating search (900) */
  background:#fff;color:var(--mega-ink);
  border:1px solid var(--mega-line);
  border-radius:20px;
  box-shadow:0 24px 64px -32px rgba(28,25,48,.45),0 2px 10px rgba(28,25,48,.06);
  /* Padding is split with __inner (10px there): the visual inset stays 22/24/20, but the
     10px living on the scroll container gives hover lifts + focus rings room before its
     clip edge. See the __inner block. */
  padding:12px 14px 10px;
  display:block;                                 /* own display so reveal never depends on theme (.dropdown-menu) */
  /* theme `.dropdown-menu{overflow:hidden}` (style.css) otherwise clips the ::before
     hover-bridge, which is positioned above the panel's own box */
  overflow:visible;
  text-transform:none;                           /* stop `.top_right_menu.li_m li{uppercase!important}` inheriting into panel text */
  text-align:left;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateX(-50%) translateY(-4px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.chl-mega,.chl-mega *{box-sizing:border-box}

/* reveal: JS-driven (.is-open); :hover/:focus-within ONLY as the no-JS fallback */
.chl-mega-li.is-open > .chl-mega,
.chl-mega-li:not(.chl-mega-js):hover > .chl-mega,
.chl-mega-li:not(.chl-mega-js):focus-within > .chl-mega{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

/* Internal scroll is the LAST resort, on constrained viewport heights only. It lives on
   __inner (not the panel) so the hover-bridge ::before isn't clipped.
   overflow-y:auto makes this a scroll container, which clips at its PADDING box on both axes
   (per CSS Overflow, overflow-x:visible is coerced to auto). Its own 10px padding — borrowed
   back from .chl-mega so the visual inset is unchanged — is what keeps that clip edge clear of
   the Open Explore button's 1px hover lift and its 4px focus ring. The 42px below is the
   panel's own chrome (12+10 padding + 2 border + ~18px bottom breathing room); since __inner
   is border-box, its 20px of padding cancels out and the usable content height is identical
   to the pre-split `- 62px`. */
.chl-mega__inner{
  display:flex;flex-direction:column;gap:16px;
  padding:10px;
  max-height:calc(100vh - var(--nav-h) - 42px);
  max-height:calc(100dvh - var(--nav-h) - 42px);
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
}

/* theme-bleed firewall for every link inside the panel */
.chl-mega .chl-mega__inner a{
  text-transform:none !important;
  letter-spacing:normal !important;
  line-height:1.35;
  text-decoration:none;
}
.chl-mega .chl-mega__inner a:focus-visible{outline:2px solid var(--mega-accent);outline-offset:2px}

/* ── header row: title + one primary action ─────────────────────────────── */
.chl-mega .chl-mega__top{display:flex;align-items:center;justify-content:space-between;gap:18px}
.chl-mega .chl-mega__title{font-size:1.08rem;font-weight:800;letter-spacing:-.01em;color:var(--mega-ink);margin:0 0 2px}
.chl-mega .chl-mega__sub{font-size:.84rem;color:var(--mega-muted);margin:0;max-width:60ch}
.chl-mega .chl-mega__open{
  flex:0 0 auto;display:inline-flex !important;align-items:center;gap:9px;
  min-height:44px;padding:0 20px !important;border-radius:999px;
  font-size:.88rem !important;font-weight:700;color:#fff !important;
  background:linear-gradient(90deg,var(--mega-accent),var(--mega-accent-2));
  box-shadow:0 10px 22px -12px rgba(240,136,62,.65);
  transition:filter .18s,transform .18s;
}
.chl-mega .chl-mega__open:hover{filter:brightness(1.05);transform:translateY(-1px);color:#fff !important}
.chl-mega .chl-mega__open i{font-size:.8rem}

/* ── search row — FROZEN shared component, do not edit ──────────────────────
   The CHL search bar, mega-menu instance: 999px pill, soft white surface,
   hairline dividers, inset pill button, ~64px height rhythm shared with the
   homepage / explore / results bars. Literal values on purpose (no :root
   tokens may be declared here — see file header). */
.chl-mega__form{display:flex;align-items:stretch;gap:9px;background:#fff;border:1px solid rgba(20,17,31,.10);border-radius:999px;padding:7px;box-shadow:0 12px 30px -22px rgba(28,25,48,.5)}
/* field spans carry the flex now: the inputs are nested, so `flex` on the input would size
   it inside its span instead of dividing the bar. Query field grows, location is fixed. */
.chl-mega__f{display:flex;align-items:center;gap:9px;padding:0 12px;flex:1 1 auto;min-width:0}
.chl-mega__f:first-child{padding-left:18px}                 /* clear the pill's curve */
.chl-mega__f + .chl-mega__f{border-left:1px solid rgba(20,17,31,.10)}
.chl-mega__f--loc{flex:0 0 clamp(150px,25%,220px)}          /* narrow + secondary */
.chl-mega__form i{color:#f0883e;flex:0 0 auto}
.chl-mega__form input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:.95rem;color:#1c1930;padding:12px 0}
.chl-mega__form button{flex:0 0 auto;min-height:44px;min-width:130px;border:0;cursor:pointer;border-radius:999px;padding:0 24px;font:inherit;font-weight:700;color:#fff;background:linear-gradient(90deg,#f0883e,#f2a15f);transition:filter .22s,transform .22s}
.chl-mega__form button:hover{filter:brightness(1.04);transform:translateY(-1px)}
/* ── end FROZEN search component ────────────────────────────────────────── */

/* ── section labels ─────────────────────────────────────────────────────── */
.chl-mega .chl-mega__label{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mega-faint);font-weight:700;margin:0 0 10px}

/* ── main discovery area: need cards, whole card clickable ──────────────── */
.chl-mega .chl-mega__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 10px}
.chl-mega .chl-mega__card{
  display:flex !important;align-items:center;gap:10px;
  min-height:56px;padding:9px 10px !important;border-radius:14px;
  border:1px solid transparent;
  font-size:.86rem !important;color:var(--mega-ink);
  transition:background .14s,border-color .14s,transform .14s;
}
.chl-mega .chl-mega__card:hover{background:var(--mega-accent-soft);border-color:rgba(240,136,62,.35);transform:translateY(-1px);color:var(--mega-ink)}
.chl-mega .chl-mega__ico{
  flex:0 0 auto;width:36px;height:36px;display:grid;place-items:center;border-radius:10px;
  background:var(--mega-accent-soft);color:var(--mega-accent);font-size:.92rem;
  transition:background .14s;
}
/* The theme's `.top_right_menu li a i{margin-left:5px}` (style.css) — meant to space a nav
   chevron off its label — also matches these glyphs, and grid centring centres the MARGIN box,
   so every icon sat 2.5px right of its tile. Reset the inherited spacing here only: the frozen
   search bar's `.chl-mega__form i` deliberately keeps that margin and is not touched. */
.chl-mega .chl-mega__ico i{margin:0;line-height:1}
.chl-mega .chl-mega__card:hover .chl-mega__ico{background:#fff}
.chl-mega .chl-mega__ct{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.chl-mega .chl-mega__ct strong{font-size:.84rem;font-weight:650;color:var(--mega-ink)}
.chl-mega .chl-mega__ct em{font-size:.74rem;font-style:normal;color:var(--mega-faint)}

/* ── popular right now: chips that run real focused searches ────────────── */
.chl-mega .chl-mega__pop{border-top:1px solid var(--mega-line);padding-top:14px}
.chl-mega .chl-mega__chips{display:flex;flex-wrap:wrap;gap:8px}
.chl-mega .chl-mega__chips a{
  display:inline-flex !important;align-items:center;
  min-height:36px;padding:0 14px !important;border-radius:999px;
  font-size:.82rem !important;color:#4a4560;
  background:var(--mega-surface);border:1px solid rgba(20,17,31,.10);
  transition:border-color .14s,background .14s,color .14s,transform .14s;
}
.chl-mega .chl-mega__chips a:hover{border-color:var(--mega-accent);color:var(--mega-ink);background:var(--mega-accent-soft);transform:translateY(-1px)}

/* ── closing strip: Post a Need (supportive, not competing) ─────────────── */
.chl-mega .chl-mega__cta{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--mega-surface);border:1px solid var(--mega-line);
  border-radius:14px;padding:12px 16px;
}
.chl-mega .chl-mega__cta-t{margin:0;font-size:.84rem;color:var(--mega-muted)}
.chl-mega .chl-mega__cta-t strong{color:var(--mega-ink);font-weight:700;margin-right:6px}
.chl-mega .chl-mega__cta a{
  flex:0 0 auto;display:inline-flex !important;align-items:center;gap:9px;
  min-height:40px;padding:0 18px !important;border-radius:999px;
  font-size:.85rem !important;font-weight:700;color:var(--mega-accent-deep);
  background:#fff;border:1px solid rgba(240,136,62,.45);
  transition:background .15s,border-color .15s;
}
.chl-mega .chl-mega__cta a:hover{background:var(--mega-accent-soft);border-color:var(--mega-accent);color:var(--mega-accent-deep)}

/* ── desktop breakpoints ────────────────────────────────────────────────── */
/* hover-bridge: invisible strip across the navbar→panel gap so hover-assist
   never drops while the cursor travels down into the panel */
@media (min-width:768px){
  .chl-mega::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
}
@media (max-width:1135px){ .chl-mega{--nav-h:70px} }
@media (max-width:1080px){
  .chl-mega .chl-mega__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* tablet band (header still shows the desktop row): same floating panel,
   tightened — the old build dumped the panel inline into the nav row here */
@media (min-width:768px) and (max-width:991px){
  .chl-mega{width:calc(100vw - 28px);padding:8px 8px 6px}   /* + __inner's 10px = 18/18/16 */
  .chl-mega .chl-mega__top{flex-wrap:wrap}
}

/* ── mobile (≤767px): accordion inside the existing drawer ──────────────── */
@media (max-width:767px){
  /* The drawer must scroll once the accordion expands (it is a 100vh fixed panel).
     overflow-y:auto coerces overflow-x from visible to auto, which exposed a PRE-EXISTING
     box-model conflict as an 8px sideways drag:
       #mainHeader .top_right_menu li{margin:0 8px !important}  (style.css, specificity 1,1,1)
       .side_menu li{width:100% !important}                     (header.php, mobile block)
       .side_menu{align-items:center !important}                (header.php)
     A 100%-wide item plus 16px of horizontal margin makes each item's MARGIN box 16px wider
     than the drawer's 220px content box; centring splits the excess, pushing the right margin
     edge 8px past it. The margins are already visually inert (width:100% + border-box means
     the item still renders flush at the content box), so zeroing them corrects the overflow
     with zero geometry change. Specificity 1,1,1 ties the theme rule; nav.css is linked from
     topbar.php inside <body>, so it wins on document order.
     overflow-x is then pinned as a defensive guard, never as the fix. */
  #mainHeader .side_menu li{margin-left:0 !important;margin-right:0 !important}
  .side_menu{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
  .chl-mega{
    position:static;width:auto;max-width:none;
    display:none;opacity:1;visibility:visible;pointer-events:auto;transform:none;
    box-shadow:none;border:0;border-radius:0;background:transparent;
    padding:12px 2px calc(8px + env(safe-area-inset-bottom,0px));margin:0;
    transition:none;
  }
  /* `.is-open` is the ONLY thing that may reveal the accordion.
     The trigger's <li> is `class="has_dropdown chl-mega-li"` and the panel is
     `class="dropdown-menu chl-mega"`, so the theme's
        .has_dropdown:hover .dropdown-menu{display:block}      (specificity 0,2,0)
     matches it — and it outranked the `.chl-mega{display:none}` above (0,1,0). Touch
     browsers leave :hover stuck on the last-tapped element, so after the second tap the
     JS correctly cleared `.is-open` and aria-expanded, but the panel stayed on screen and
     Explore read as un-collapsible. NOTE the theme rule is (0,3,0), not (0,2,0) — a
     pseudo-class carries class-level specificity — so both states below are stated at
     (0,3,0) to tie it, and nav.css (linked from topbar.php inside <body>) wins the tie on
     document order. Hover can no longer reveal anything here; `.is-open` is the sole switch. */
  .chl-mega-li:not(.is-open) > .chl-mega{display:none}
  .chl-mega-li.is-open > .chl-mega{display:block}
  .chl-mega-li:not(.chl-mega-js):focus-within > .chl-mega{display:block}   /* no-JS fallback */
  /* the desktop open-state selectors above carry (0,3,0)+ specificity and would re-apply
     the centring translateX(-50%) to the static in-drawer panel — neutralise at equal
     specificity (this block is later in the file, so it wins the tie) */
  .chl-mega-li.is-open > .chl-mega,
  .chl-mega-li:not(.chl-mega-js):hover > .chl-mega,
  .chl-mega-li:not(.chl-mega-js):focus-within > .chl-mega{transform:none}
  /* not a scroll container here (the drawer scrolls), so the borrowed padding is given back */
  .chl-mega__inner{max-height:none;overflow:visible;gap:14px;padding:0}
  .chl-mega .chl-mega__top{flex-direction:column;align-items:stretch;gap:10px}
  .chl-mega .chl-mega__open{justify-content:center}
  .chl-mega .chl-mega__grid{grid-template-columns:1fr;gap:5px}
  .chl-mega .chl-mega__card{min-height:48px;padding:8px 10px !important;border:1px solid var(--mega-line);background:#fff}
  .chl-mega .chl-mega__chips a{min-height:44px;padding:0 16px !important}
  .chl-mega .chl-mega__cta{flex-direction:column;align-items:stretch}
  .chl-mega .chl-mega__cta a{justify-content:center;min-height:44px}

  /* FROZEN search — drawer extension: the drawer is ~270px wide at every
     mobile viewport, so the component's own ≤480px stacked variant must apply
     across the whole drawer range. Declarations are verbatim copies of the
     frozen block below; do not edit. */
  .chl-mega__form{flex-wrap:wrap;border-radius:20px;padding:8px;gap:0}
  .chl-mega__f{flex:1 1 100%;padding:0 10px}
  .chl-mega__f:first-child{padding-left:10px}
  .chl-mega__f--loc{flex:1 1 100%}
  .chl-mega__f + .chl-mega__f{border-left:0;border-top:1px solid rgba(20,17,31,.10)}
  .chl-mega__form button{flex:1 1 100%;min-width:0;margin-top:8px;padding:0 16px}
}

/* FROZEN search — original narrow-viewport variant, kept verbatim:
   three elements will not fit one row on a narrow panel without crushing the
   query input, so stack — need / where / button. A 999px radius on a tall
   stacked block reads as a capsule, hence 20px. 44px targets preserved. */
@media (max-width:480px){
  .chl-mega__form{flex-wrap:wrap;border-radius:20px;padding:8px;gap:0}
  .chl-mega__f{flex:1 1 100%;padding:0 10px}
  .chl-mega__f:first-child{padding-left:10px}
  .chl-mega__f--loc{flex:1 1 100%}
  .chl-mega__f + .chl-mega__f{border-left:0;border-top:1px solid rgba(20,17,31,.10)}
  .chl-mega__form button{flex:1 1 100%;min-width:0;margin-top:8px;padding:0 16px}
}

/* ── reduced motion: no entrance slide, no hover lifts, no chevron spin ─── */
@media (prefers-reduced-motion:reduce){
  .chl-mega{transition:none}
  .chl-mega-li > a .dropdown-icon{transition:none}
  .chl-mega .chl-mega__open,.chl-mega .chl-mega__card,.chl-mega .chl-mega__chips a,.chl-mega .chl-mega__cta a{transition:none}
  .chl-mega .chl-mega__open:hover,.chl-mega .chl-mega__card:hover,.chl-mega .chl-mega__chips a:hover{transform:none}
}
/* desktop only: keep the centring transform but drop the 4px entrance slide.
   (Must NOT touch ≤767px, where the in-drawer panel is static and untransformed.) */
@media (prefers-reduced-motion:reduce) and (min-width:768px){
  .chl-mega{transform:translateX(-50%)}
  .chl-mega-li.is-open > .chl-mega,
  .chl-mega-li:not(.chl-mega-js):hover > .chl-mega,
  .chl-mega-li:not(.chl-mega-js):focus-within > .chl-mega{transform:translateX(-50%)}
}