/* ==========================================================================
   CHL — Explore (BP:CHL_EXPLORE v1). Public discovery gateway: Ask / Browse / Post.
   NEW isolated file. Scoped under .chl-explore. Premium light community theme.
   ========================================================================== */
/* Shared search proportions, ported from the homepage search component.
   SOURCE OF TRUTH: application/views/front/home_new.php (its :root block).
   Declared on :root here because the floating bar is mounted OUTSIDE .chl-explore and so
   cannot see that scope's tokens. This file is loaded only by front/explore.php, so nothing
   leaks to other pages. The values are duplicated by necessity — the homepage's styles are
   inline in its view — not by preference. If they change there, mirror them here. */
:root{
  --chl-search-fy:12px;                        /* field vertical padding — drives bar height */
  --chl-search-where:clamp(150px,22%,210px);   /* location box: narrow, secondary */
  --chl-search-divider:rgba(20,17,31,.10);
}
.chl-explore{
  --ex-ink:#1c1930; --ex-muted:#5a5570; --ex-line:rgba(20,17,31,.10);
  --ex-panel:#faf9fd; --ex-orange:#f0883e; --ex-orange-soft:#fff3e9;
  --ex-purple:#7c5cff; --ex-pink:#d16ba5;
  color:var(--ex-ink); background:#fff;
  font-family:inherit; line-height:1.6;
}
.chl-explore *{box-sizing:border-box}
.chl-explore__wrap{max-width:1120px;margin:0 auto;padding:0 20px}

/* ── A · ASK ─────────────────────────────────────────────────────────── */
.ex-ask{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 120% at 12% 0%, rgba(124,92,255,.10), transparent 55%),
    radial-gradient(120% 120% at 100% 20%, rgba(240,136,62,.12), transparent 55%),
    #fff;
  border-bottom:1px solid var(--ex-line);
  padding:66px 0 54px;
}
.ex-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ex-purple);margin-bottom:16px}
.ex-eyebrow::before{content:"";width:26px;height:2px;background:linear-gradient(90deg,var(--ex-purple),var(--ex-orange))}
.ex-ask h1{font-size:clamp(2rem,5vw,3rem);font-weight:800;line-height:1.08;margin:0 0 10px}
.ex-ask h1 span{background:linear-gradient(90deg,var(--ex-purple),var(--ex-pink),var(--ex-orange));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ex-ask__sub{color:var(--ex-muted);font-size:1.05rem;margin:0 0 26px;max-width:56ch}
.ex-ask__sub b{color:var(--ex-ink);font-weight:600}

/* Search bar — homepage geometry (pill sides, slimmer, query field dominant, narrow
   location box). Explore keeps its OWN accent tokens (--ex-orange), so it reads as a
   sibling of the homepage component rather than a clone of the homepage. */
.ex-searchbar{
  display:flex;gap:8px;flex-wrap:wrap;align-items:stretch;
  background:#fff;border:1px solid var(--ex-line);border-radius:999px;
  padding:8px;box-shadow:0 18px 44px -26px rgba(28,25,48,.5);
}
/* main field: grow-only, so it absorbs all slack and stays visually dominant */
.ex-field{display:flex;align-items:center;gap:10px;padding:0 14px;flex:1 1 auto;min-width:0}
.ex-field:first-child{padding-left:20px}          /* clear the pill's curve */
.ex-field + .ex-field{border-left:1px solid var(--chl-search-divider)}
.ex-field i{color:var(--ex-orange);flex:0 0 auto}
.ex-field input{border:0;outline:0;width:100%;font-size:1rem;font-family:inherit;color:var(--ex-ink);background:transparent;padding:var(--chl-search-fy) 0}
/* location: fixed and narrow — it must not compete with the query box */
.ex-field.ex-field--where{flex:0 0 var(--chl-search-where)}
.ex-searchbar button{
  flex:0 0 auto;min-height:44px;border:0;cursor:pointer;border-radius:999px;padding:0 20px;
  font-family:inherit;font-weight:700;font-size:.98rem;color:#fff;
  background:linear-gradient(90deg,var(--ex-orange),#f2a15f);
  transition:filter .22s,transform .22s;
}
.ex-searchbar button:hover{filter:brightness(1.04);transform:translateY(-1px)}
.ex-hint{margin:14px 0 0;font-size:.8rem;color:var(--ex-muted)}
.ex-hint b{color:var(--ex-purple)}

.ex-prompts{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.ex-prompts a{
  font-size:.85rem;color:var(--ex-muted);text-decoration:none;
  background:var(--ex-panel);border:1px solid var(--ex-line);
  padding:8px 13px;border-radius:999px;transition:.15s;
}
.ex-prompts a:hover{border-color:var(--ex-purple);color:var(--ex-ink)}
.ex-prompts a i{color:var(--ex-orange);margin-right:6px;font-size:.75rem}

/* centred hero (Task 2) — width matched to the homepage hero bar */
.ex-ask .chl-explore__wrap{max-width:1000px;margin:0 auto;text-align:center}
.ex-ask__sub{margin-left:auto;margin-right:auto}
.ex-searchbar{margin-left:auto;margin-right:auto;width:min(92vw,920px);max-width:100%}
/* compact centred "Try:" row (Task 4) — homepage chip language: pill, 44px tap target, lift */
.ex-try{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:18px;font-size:.88rem}
.ex-try>span{color:var(--ex-muted);font-weight:700}
.ex-try a{display:inline-flex;align-items:center;min-height:44px;color:var(--ex-muted);text-decoration:none;background:var(--ex-panel);border:1px solid var(--ex-line);border-radius:999px;padding:0 15px;transition:border-color .22s,color .22s,background .22s,transform .22s cubic-bezier(.16,.82,.3,1)}
.ex-try a:hover{border-color:var(--ex-orange);color:var(--ex-ink);background:var(--ex-orange-soft);transform:translateY(-2px)}

/* ── section scaffold ────────────────────────────────────────────────── */
.ex-sec{padding:56px 0}
.ex-sec + .ex-sec{border-top:1px solid var(--ex-line)}
.ex-sec__head{margin:0 0 26px}
.ex-sec__kicker{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ex-orange);font-weight:700;margin:0 0 6px}
.ex-sec__head h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;margin:0 0 6px}
.ex-sec__head p{color:var(--ex-muted);margin:0}

/* ── B · BROWSE — Layer 1 intent tiles ───────────────────────────────── */
.ex-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ex-tile{
  display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;
  background:var(--ex-panel);border:1px solid var(--ex-line);border-radius:16px;
  padding:22px 20px;transition:.18s;
}
.ex-tile:hover{transform:translateY(-3px);border-color:var(--ex-purple);box-shadow:0 22px 40px -28px rgba(28,25,48,.55)}
.ex-tile__ico{
  width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:6px;
  background:var(--ex-orange-soft);color:var(--ex-orange);font-size:1.15rem;
}
.ex-tile h3{font-size:1.02rem;font-weight:700;margin:0}
.ex-tile p{font-size:.85rem;color:var(--ex-muted);margin:0}

/* Layer 2 — industry chips */
.ex-chips{display:flex;flex-wrap:wrap;gap:9px}
.ex-chip{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ex-ink);
  background:#fff;border:1px solid var(--ex-line);border-radius:999px;padding:9px 15px;font-size:.9rem;font-weight:500;transition:.15s;
}
.ex-chip:hover{border-color:var(--ex-orange);background:var(--ex-orange-soft)}
.ex-chip i{color:var(--ex-purple)}
.ex-sub-label{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ex-muted);margin:28px 0 12px;font-weight:700}

/* ── Everyday Help feature band ──────────────────────────────────────── */
.ex-eh{
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(124,92,255,.10), transparent 55%),
    var(--ex-panel);
  border:1px solid var(--ex-line);border-radius:22px;padding:34px;margin-top:8px;
}
.ex-eh__intro{max-width:60ch}
.ex-eh__intro h3{font-size:1.35rem;font-weight:800;margin:0 0 8px}
.ex-eh__intro p{color:var(--ex-muted);margin:0}
.ex-eh__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:22px}
.ex-eh__item{
  display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--ex-line);border-radius:14px;padding:16px;transition:.15s;position:relative;
}
.ex-eh__item:hover{border-color:var(--ex-purple)}
.ex-eh__item i{color:var(--ex-orange);font-size:1.05rem}
.ex-eh__item span{font-size:.9rem;font-weight:600;line-height:1.3}
.ex-risk{font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:999px;align-self:flex-start}
.ex-risk--low{background:#e8f6ee;color:#1f7a48}
.ex-risk--medium{background:#fff2df;color:#a86412}
.ex-risk--high{background:#fdeef0;color:#a83246}
.ex-badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.ex-badge{font-size:.72rem;font-weight:600;color:var(--ex-muted);background:#fff;border:1px dashed var(--ex-line);border-radius:999px;padding:5px 11px}
.ex-badge i{color:var(--ex-purple);margin-right:5px}
.ex-eh__note{font-size:.76rem;color:var(--ex-muted);margin:14px 0 0;font-style:italic}

/* ── C · POST A NEED ─────────────────────────────────────────────────── */
.ex-post{
  text-align:center;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(240,136,62,.14), transparent 55%),
    radial-gradient(120% 160% at 100% 100%, rgba(124,92,255,.14), transparent 55%),
    #17141f;
  color:#fff;border-radius:24px;padding:52px 30px;margin:0 0 12px;
}
.ex-post h2{font-size:clamp(1.6rem,3vw,2.1rem);font-weight:800;margin:0 0 10px}
.ex-post p{color:#c9c5da;max-width:52ch;margin:0 auto 24px}
.ex-post a{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;
  background:linear-gradient(90deg,var(--ex-orange),#f2a15f);color:#fff;padding:15px 28px;border-radius:12px;
}
.ex-post a:hover{filter:brightness(1.04)}

/* ── responsive ──────────────────────────────────────────────────────── */
@media (max-width:900px){
  .ex-grid{grid-template-columns:repeat(2,1fr)}
  .ex-eh__grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:600px){
  .ex-ask{padding:44px 0 40px}
  /* the bar wraps to stacked rows here; a 999px radius on a tall block reads as a capsule */
  .ex-searchbar{border-radius:20px}
  .ex-field:first-child{padding-left:12px}
  .ex-field + .ex-field{border-left:0;border-top:1px solid var(--ex-line)}
  .ex-field.ex-field--where{flex:1 1 100%}
  .ex-searchbar button{flex:1 1 100%;padding:14px}
  .ex-grid,.ex-eh__grid{grid-template-columns:repeat(2,1fr)}
  .ex-eh{padding:22px}
}
/* NOTE: the floating bar's own responsive + reduced-motion rules used to live here, BEFORE
   its base rule further down. Same specificity, so the base rule won and they never applied.
   They now sit immediately after the base rule at the end of this file. */
@media (max-width:380px){
  .ex-grid,.ex-eh__grid{grid-template-columns:1fr}
}

/* ==========================================================================
   FLOATING SEARCH — ported verbatim from the homepage component
   (application/views/front/home_new.php, .chl-float-search). Same class name so the two
   pages share one visual language; this file is loaded only by front/explore.php.

   Deliberately NOT scoped under .chl-explore, and mounted outside <main>: .ex-ask sets
   overflow:hidden, which would clip a fixed-position descendant. Outside, it is
   viewport-fixed.

   z-index 900 sits BELOW .menu-backdrop (998) and .side_menu (999), so the mobile drawer
   and its backdrop always win. Hidden state uses visibility:hidden, which removes the
   inputs from the tab order — pointer-events alone would leave them keyboard-reachable,
   and (per spec) a visibility:hidden subtree is never painted, so the backdrop blur costs
   nothing until the bar is actually visible.
   ========================================================================== */
/* CARET FIX (iOS/iPadOS): centred with auto margins, NOT translateX(-50%).
   A fixed element of width min(92vw,820px) lands on a fractional pixel when 50%-translated on
   an odd viewport (92vw of 834px = 767.28px). WebKit snaps the painted text but not the
   caret's layer, so the caret sits subpixel-off on first focus and a re-tap forces the repaint
   that "fixes" it. left:0;right:0;margin-inline:auto centres by layout at integer positions,
   leaving transform for the slide only. will-change stays on this shell, never on the input. */
.chl-float-search{
  position:fixed;top:16px;left:0;right:0;z-index:900;
  width:min(92vw,820px);margin-inline:auto;
  transform:translateY(-10px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s cubic-bezier(.4,0,.2,1),transform .22s cubic-bezier(.4,0,.2,1),visibility 0s linear .22s;
}
.chl-float-search.is-visible{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateY(0);
  transition-delay:0s,0s,0s;
}
/* INACTIVE = frosted glass. ACTIVE (:focus-within) = solid white.
   No overflow:hidden here: it would clip the inputs' focus ring (outline-offset:3px). */
.chl-float-search form{
  position:relative;
  display:flex;gap:8px;align-items:stretch;
  background:transparent;
  border:1px solid rgba(124,92,255,.14);
  border-radius:999px;padding:7px;
  box-shadow:0 18px 44px -22px rgba(28,25,48,.42),0 2px 10px rgba(20,17,31,.05);
  font-family:inherit;
  transition:box-shadow .2s cubic-bezier(.4,0,.2,1),border-color .2s;
}
/* GLASS ON A PSEUDO-ELEMENT, NOT ON THE FORM.
   backdrop-filter on the form made every input a DESCENDANT of a filtered, composited box, and
   iOS computes the caret from that stale layer on first focus. The glass now lives on
   form::before — a sibling of the fields — so the inputs sit in a plain, unfiltered box.
   Pixel-identical result; the caret is simply no longer inside the filtered stack. */
.chl-float-search form::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  border-radius:inherit;
  background:rgba(255,255,255,.76);
  -webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);
  transition:background .2s cubic-bezier(.4,0,.2,1);
}
/* fields + button paint above the glass */
.chl-float-search .cfs-field,
.chl-float-search button{position:relative;z-index:1;}
/* ACTIVE = FOCUSED, not FILLED. A bar holding text but not focused stays frosted:
   "has text" is not "in use". Pure CSS :focus-within — no class, no JS listener, so
   the visual state cannot desync from reality (and blur restores frost instantly). */
.chl-float-search form:focus-within::before{background:#fff;}
.chl-float-search form:focus-within{
  border-color:rgba(20,17,31,.10);
  box-shadow:0 24px 56px -22px rgba(28,25,48,.52),0 2px 10px rgba(20,17,31,.06);
}
/* Without backdrop-filter, translucency would show page text straight through the bar. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .chl-float-search form::before{background:rgba(255,255,255,.97);}
}
.chl-float-search .cfs-field{display:flex;align-items:center;gap:9px;padding:0 12px;flex:1 1 auto;min-width:0;margin:0;}
.chl-float-search .cfs-field:first-child{padding-left:18px;}   /* clear the pill's curve */
.chl-float-search .cfs-field + .cfs-field{border-left:1px solid var(--chl-search-divider);}
.chl-float-search .cfs-field i{color:#f0883e;flex:0 0 auto;font-size:15px;}
.chl-float-search .cfs-field input{border:0;outline:0;background:none;font:inherit;font-size:15px;width:100%;min-width:0;color:#1c1930;padding:var(--chl-search-fy) 0;
  -webkit-appearance:none;appearance:none;box-sizing:border-box;}
.chl-float-search .cfs-where{flex:0 0 var(--chl-search-where);}
.chl-float-search button{flex:0 0 auto;min-height:44px;border:0;cursor:pointer;border-radius:999px;padding:0 24px;font:inherit;font-weight:700;font-size:14.5px;color:#fff;background:linear-gradient(90deg,#f0883e,#f2a15f);transition:filter .2s,transform .2s;}
.chl-float-search button:hover{filter:brightness(1.04);transform:translateY(-1px);}
.chl-float-search :focus-visible{outline:2.5px solid #7c5cff;outline-offset:3px;border-radius:4px;}

/* CARET FIX (touch): iOS zooms any focused input below 16px; the resulting reflow is what
   leaves the caret mis-set until a second tap. 16px on coarse pointers suppresses the zoom.
   Desktop keeps 15px, so its appearance is untouched. */
@media (hover:none) and (pointer:coarse){
  /* No transform ANYWHERE in the input's ancestor chain on touch — iOS otherwise places the
     caret from a stale composited layer on first focus. Show/hide becomes opacity-only. */
  .chl-float-search{transform:none;}
  .chl-float-search.is-visible{transform:none;}
  .chl-float-search .cfs-field,
  .chl-float-search .cfs-field input{transform:none;}
  /* 16px suppresses iOS focus-zoom. line-height 1.5 keeps a 24px line box — identical to
     desktop's 15px x 1.6 — so the bar height never changes between pointer types. */
  .chl-float-search .cfs-field input{font-size:16px;line-height:1.5;}
}
/* These MUST come after the base rule above — they previously sat higher in the file and were
   silently overridden by it (same specificity, later wins). */
@media (max-width:600px){
  /* compact: dropping the location field still submits location="" — identical to leaving it
     blank — so results are unchanged, just less cramped. */
  .chl-float-search{top:12px;width:94vw}
  .chl-float-search .cfs-where{display:none}
  .chl-float-search button{padding:0 16px}
}
@media (prefers-reduced-motion:reduce){
  .chl-float-search{transition:opacity .01s linear,visibility 0s linear;transform:none}
  .chl-float-search.is-visible{transform:none}
}