/* =====================================================================
   LeadsNimble FAQ — "Questions, answered" single-open accordion.
   Ported 1:1 from leadsnimble_html:
     src/html/partials/faq.html
     src/css/components/faq.css           (.faq, .faq__item, .faq__q, .faq__a)
     src/css/base/1-reset.css             (type baseline, button reset, h2 metrics)
     src/css/base/2-layout.css            (.wrap, .section, .section__head, .eyebrow)
     src/css/base/3-utilities.css         (.reveal stagger, reduced motion)
     src/css/base/4-responsive.css        (gutter / section padding / head spacing steps)
     src/css/themes/aurora-nightfall/     (tokens + the .faq__item glass override)

   Same conventions as lnew-why.css / lnew-how.css: the theme's tokens are
   resolved to literal values and re-scoped under --lnfq-*, LIGHT is the default
   mode, and [data-mode="dark"] flips the palette (the same switch the nav
   writes). The dark palette control section is emitted at
   [data-mode="dark"] {{WRAPPER}} .lnew-faq so it outranks the light controls on
   specificity, not source order.

   Measured against the reference build at 1440 / 1024 / 900 / 768 / 600 px in
   both modes. The numbers this file has to hit, for the record:
     section  112px block padding (84 / 64 / 54 at 1040 / 760 / 460)
     wrap     1360px max-width, 28px gutter (24 / 20 / 16)
     head     56px bottom margin (44 / 34 / 28), centred
     list     820px max-width, centred
     item     1px #e7e9f4, radius 18px, #fff, 12px bottom margin, shadow-sm
     button   flex/space-between, gap 16px, padding 21px 24px,
              Parkinsans 17px/600, line-height NORMAL (a <button>'s UA `font`
              shorthand resets it, and the reference never sets it back)
     svg      20x20, flex:none, accent, transform .25s ease, +45deg when open
     answer   max-height 0 -> scrollHeight, transition .3s ease
     answer p 0 24px 22px, 15.5px, muted, 1.6

   FOUR deliberate departures from a naive copy, all render-identical at the
   reference's own settings:

   1. The answer's padding lives on an inner wrapper (.lnew-faq__a-in) rather
      than on `.faq__a p`. The answer is an author-editable rich-text field, so
      the reference rule would re-pad EVERY paragraph in a two-paragraph answer.
      The inner wrapper computes to the same box for the reference's
      single-paragraph copy (24.8px line + 22px pad = 46.8px, measured).

   2. The list is block flow, NOT a grid, in its default single-column state.
      That is load-bearing: the reference's last `.faq__item` bottom margin
      COLLAPSES out through `.faq` (height 708 = 9x68 + 8x12, measured). Grid
      items do not collapse margins, so a grid would silently add 12px. Grid is
      switched on only when the author asks for more than one column, and there
      the rhythm moves to row-gap.

   3. The section paints its own background (--lnfq-bg). In the reference the
      FAQ is a plain `.section` and simply shows the page's --bg through; a
      widget cannot rely on whatever container it is dropped into, so the value
      is carried here as a control. Same call as lnew-how.css.

   4. A real :focus-visible ring, a reduced-motion block that also freezes the
      max-height transition, and rich-text rules for author-written answers
      (links, lists, multi-paragraph). None of them paint anything on the
      reference's own copy at rest.

   5. `.lnew-faq` states `font-weight: 400` — the reference's own body never
      does, it just relies on the UA default of "normal" and nothing in that
      static build's cascade contests it. A widget cannot assume that: dropped
      into a real WordPress theme, an ancestor `body { font-weight: 300 }` (a
      real Twenty Twenty-Five rule) would otherwise win by inheritance for any
      text here that has no more specific weight of its own — the lead
      paragraph and the answer copy. The eyebrow/title/question keep their own
      explicit weights and are unaffected either way.
   ===================================================================== */

/* Local reset. Wrapped in :where() so it carries ZERO specificity -- see
   [[nav-widget-feature]] for the four cascade traps this avoids. Do not
   unwrap: a bare `.lnew-faq svg {}` is (0,1,1) and would outrank the component
   rules it is meant to sit under. */
.lnew-faq, .lnew-faq *, .lnew-faq *::before, .lnew-faq *::after { box-sizing: border-box; }
:where(.lnew-faq) :where(a) { color: inherit; text-decoration: none; }
:where(.lnew-faq) :where(p) { margin: 0; }
:where(.lnew-faq) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.lnew-faq) :where(svg) { display: block; }
:where(.lnew-faq) :where(h1, h2, h3, h4, h5, h6) { margin: 0; }
:where(.lnew-faq) :where(button) { font-family: inherit; cursor: pointer; border: none; background: none; padding: 0; }

.lnew-faq {
  /* ---- motion ---- */
  --lnfq-ease: cubic-bezier(.22,1,.36,1);
  --lnfq-rv-dist: 70px;
  --lnfq-rv-dur: 1.2s;
  --lnfq-rv-step: 70ms;

  /* ---- geometry ---- */
  --lnfq-maxw: 1360px;
  --lnfq-gutter: 28px;
  --lnfq-title-size: clamp(31px, 3.6vw, 47px);
  --lnfq-head-align: center;

  --lnfq-list-maxw: 820px;
  --lnfq-list-top: 0px;
  --lnfq-cols: 1;
  --lnfq-col-gap: 18px;
  --lnfq-item-gap: 12px;

  --lnfq-radius: 18px;
  --lnfq-border-w: 1px;

  --lnfq-q-pad-y: 21px;
  --lnfq-q-pad-x: 24px;
  --lnfq-q-size: 17px;
  --lnfq-q-weight: 600;
  --lnfq-q-gap: 16px;

  --lnfq-a-pad-x: 24px;
  --lnfq-a-pad-b: 22px;
  --lnfq-a-pad-t: 0px;
  --lnfq-a-size: 15.5px;
  --lnfq-a-lh: 1.6;
  --lnfq-a-block-gap: 12px;
  --lnfq-a-dur: .3s;

  --lnfq-ic-size: 20px;
  --lnfq-ic-sw: 2;
  --lnfq-ic-dur: .25s;
  --lnfq-ic-rot: 45deg;          /* the reference plus -> x. Per-icon defaults below. */
  --lnfq-ic-pad: 0px;
  --lnfq-ic-radius: 50%;
  --lnfq-ic-bg: transparent;

  /* ---- type ---- */
  --lnfq-font-sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --lnfq-font-head: 'Parkinsans', 'DM Sans', sans-serif;

  /* ---- palette · LIGHT (the site's default mode) ---- */
  --lnfq-bg: #dde2f4;            /* --bg, i.e. a plain .section */
  --lnfq-ink: #12122a;
  --lnfq-body: #454a63;
  --lnfq-muted: #6b7089;

  --lnfq-eyebrow-bg: #eef0ff;
  --lnfq-eyebrow-ink: #5b46e0;
  --lnfq-eyebrow-border: #e0e3ff;

  --lnfq-grad-1: #6366f1;
  --lnfq-grad-2: #a855f7;
  --lnfq-grad-3: #22d3ee;
  --lnfq-accent-grad: linear-gradient(100deg, var(--lnfq-grad-1) 0%, var(--lnfq-grad-2) 52%, var(--lnfq-grad-3) 100%);
  --lnfq-accent: #6d5cf5;
  --lnfq-accent-halo: rgba(139,124,255,.28);

  --lnfq-item-bg: #ffffff;       /* --surface */
  --lnfq-line: #e7e9f4;          /* --line */
  --lnfq-shadow-1: rgba(30,30,80,.05);
  --lnfq-shadow-2: rgba(30,30,80,.05);
  --lnfq-item-shadow: 0 1px 2px var(--lnfq-shadow-1), 0 2px 6px var(--lnfq-shadow-2);
  --lnfq-blur: none;

  --lnfq-q-ink: var(--lnfq-ink);
  --lnfq-ic-ink: var(--lnfq-accent);

  position: relative;
  overflow-x: clip;
  padding-top: 112px;
  padding-bottom: 112px;
  background: var(--lnfq-bg);
  font-family: var(--lnfq-font-sans);
  color: var(--lnfq-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
}

/* ---- palette · DARK ([data-mode="dark"] on <html>, written by the nav) ----
   The aurora dark tokens, plus the theme's own glassmorphism override for
   .faq__item (overrides.css line 34: --glass-bg + backdrop blur + an inset
   highlight instead of the flat light shadow). */
[data-mode="dark"] .lnew-faq {
  --lnfq-bg: #0a0a12;
  --lnfq-ink: #f5f6ff;
  --lnfq-body: #b8bed6;
  --lnfq-muted: #949bbb;

  --lnfq-eyebrow-bg: rgba(255,255,255,.05);
  --lnfq-eyebrow-ink: #cdc6ff;
  --lnfq-eyebrow-border: rgba(255,255,255,.12);

  --lnfq-accent: #8b7cff;
  --lnfq-accent-halo: rgba(139,124,255,.28);

  --lnfq-item-bg: rgba(255,255,255,.045);   /* --glass-bg */
  --lnfq-line: rgba(255,255,255,.10);
  --lnfq-glass-hi: rgba(255,255,255,.10);
  --lnfq-shadow-1: rgba(0,0,0,.4);
  --lnfq-item-shadow: inset 0 1px 0 var(--lnfq-glass-hi), 0 1px 2px var(--lnfq-shadow-1);
  --lnfq-blur: blur(14px) saturate(150%);
}

/* Per-icon open-state rotation. (0,1,0) like `.lnew-faq` itself, so source
   order decides -- and an Elementor control at {{WRAPPER}} .lnew-faq (0,2,0)
   outranks both, which is why the rotation control ships with an EMPTY
   default: set it and it wins everywhere, leave it and the icon's own
   behaviour governs. */
.lnew-faq--ic-plusminus { --lnfq-ic-rot: 0deg; }
.lnew-faq--ic-chevron,
.lnew-faq--ic-caret     { --lnfq-ic-rot: 180deg; }
.lnew-faq--ic-arrow     { --lnfq-ic-rot: 90deg; }

/* =====================================================================
   Layout shell
   ===================================================================== */
.lnew-faq__wrap {
  width: 100%;
  max-width: var(--lnfq-maxw);
  margin-inline: auto;
  padding-inline: var(--lnfq-gutter);
}

.lnew-faq__head {
  max-width: none;
  margin-inline: auto;
  margin-bottom: 56px;
  text-align: var(--lnfq-head-align);
}

/* =====================================================================
   Eyebrow — the dim indicator lamp. Kept dim on purpose: a continuous
   sine pulse reads as decoration, a lit/unlit cycle reads as a status light.
   ===================================================================== */
.lnew-faq__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--lnfq-font-sans);
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: var(--lnfq-eyebrow-ink);
  background: var(--lnfq-eyebrow-bg);
  border: 1px solid var(--lnfq-eyebrow-border);
  padding: 7px 14px; border-radius: 100px;
}
.lnew-faq__eyebrow-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--lnfq-accent);
  box-shadow: 0 0 0 4px var(--lnfq-accent-halo);
  opacity: .45;
  animation: lnfq-dot-lamp 5.2s ease-in-out infinite;
}
@keyframes lnfq-dot-lamp {
  0%        { opacity: .35; box-shadow: 0 0 0 4px var(--lnfq-accent-halo), 0 0 0 0 transparent; }
  8%        { opacity: 1;   box-shadow: 0 0 0 4px var(--lnfq-accent-halo), 0 0 7px 1px var(--lnfq-accent); }
  22%       { opacity: 1;   box-shadow: 0 0 0 4px var(--lnfq-accent-halo), 0 0 7px 1px var(--lnfq-accent); }
  40%, 100% { opacity: .35; box-shadow: 0 0 0 4px var(--lnfq-accent-halo), 0 0 0 0 transparent; }
}

/* =====================================================================
   Title + lead
   ===================================================================== */
.lnew-faq__title {
  font-family: var(--lnfq-font-head);
  font-weight: 500;
  font-size: var(--lnfq-title-size);
  margin-top: 18px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--lnfq-ink);
  text-wrap: balance;
}
.lnew-faq__lead {
  margin-top: 18px;
  font-size: 18px;
  color: var(--lnfq-muted);
  line-height: 1.65;
  text-wrap: balance;
}
.lnew-faq__accent {
  background: var(--lnfq-accent-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* =====================================================================
   The accordion

   Single column is BLOCK FLOW on purpose -- see departure #2 in the header.
   ===================================================================== */
.lnew-faq__list {
  max-width: var(--lnfq-list-maxw);
  margin-inline: auto;
  margin-top: var(--lnfq-list-top);
}
.lnew-faq__list--grid {
  display: grid;
  grid-template-columns: repeat(var(--lnfq-cols), minmax(0, 1fr));
  column-gap: var(--lnfq-col-gap);
  row-gap: var(--lnfq-item-gap);
  align-items: start;
}

.lnew-faq__item {
  border: var(--lnfq-border-w) solid var(--lnfq-line);
  border-radius: var(--lnfq-radius);
  background: var(--lnfq-item-bg);
  margin-bottom: var(--lnfq-item-gap);
  box-shadow: var(--lnfq-item-shadow);
  overflow: hidden;
  -webkit-backdrop-filter: var(--lnfq-blur);
          backdrop-filter: var(--lnfq-blur);
  transition: border-color .25s var(--lnfq-ease), background-color .25s var(--lnfq-ease);
}
/* In grid mode the rhythm is row-gap, so the per-item margin has to go --
   otherwise every row gains a second 12px. */
.lnew-faq__list--grid > .lnew-faq__item { margin-bottom: 0; }

/* Optional author states. Every one of these vars is unset by default, so
   `border-color: var(--x, <current>)` resolves back to the resting value and
   nothing is painted until a colour control is filled in. */
.lnew-faq .lnew-faq__item:hover {
  border-color: var(--lnfq-item-border-hover, var(--lnfq-line));
  background: var(--lnfq-item-bg-hover, var(--lnfq-item-bg));
}
.lnew-faq .lnew-faq__item.is-open {
  border-color: var(--lnfq-item-border-open, var(--lnfq-line));
  background: var(--lnfq-item-bg-open, var(--lnfq-item-bg));
}

/* Optional heading wrapper around the question button (WAI-ARIA's accordion
   pattern). Reset hard so an h2-h6 here is metrically identical to the
   reference's bare <button>. */
.lnew-faq__qh {
  margin: 0; padding: 0; border: 0;
  font: inherit; color: inherit;
  line-height: inherit; letter-spacing: inherit;
  text-transform: none; text-align: inherit;
  display: block;
}

/* The question button. Scoped to (0,2,0) rather than (0,1,0): themes and
   Elementor both ship real `button` rules, and a bare .lnew-faq__q would lose
   to any of them on properties this file does not restate. Elementor's own
   control output ({{WRAPPER}} .lnew-faq__q) ties at (0,2,0) and wins on source
   order, which is exactly what the Style tab needs. */
.lnew-faq .lnew-faq__q {
  -webkit-appearance: none; appearance: none;
  width: 100%;
  margin: 0;
  padding: var(--lnfq-q-pad-y) var(--lnfq-q-pad-x);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lnfq-q-gap);
  text-align: left;
  text-transform: none;
  font-family: var(--lnfq-font-head);
  font-size: var(--lnfq-q-size);
  font-weight: var(--lnfq-q-weight);
  letter-spacing: normal;
  /* NOT 1.6. A <button>'s UA `font` shorthand resets line-height to normal and
     the reference never sets it back -- that is where the measured 66px row
     height comes from (21 + 24 + 21). */
  line-height: normal;
  color: var(--lnfq-q-ink);
  cursor: pointer;
}
.lnew-faq .lnew-faq__q:focus-visible {
  outline: 2px solid var(--lnfq-accent);
  outline-offset: -3px;
}

/* The label. A <span> rather than the reference's anonymous text box so the
   Style tab has something to hang typography on; blockified as a flex item
   either way, so the box is the same. min-width/overflow-wrap are a safety
   net for author copy longer than the reference's -- inert on this content. */
.lnew-faq__q-t {
  min-width: 0;
  overflow-wrap: break-word;
}

.lnew-faq .lnew-faq__ic {
  flex: none;
  width: var(--lnfq-ic-size);
  height: var(--lnfq-ic-size);
  padding: var(--lnfq-ic-pad);
  border-radius: var(--lnfq-ic-radius);
  background: var(--lnfq-ic-bg);
  color: var(--lnfq-ic-ink);
  transition: transform var(--lnfq-ic-dur) ease, color var(--lnfq-ic-dur) ease, background-color var(--lnfq-ic-dur) ease;
}
/* Stroke weight is a CSS rule, not the `stroke-width` presentation attribute
   on the path: presentation attributes are parsed as attributes, so a var()
   inside one is a dead string. The attribute stays on the markup at the
   reference's 2 as the no-CSS fallback, and this rule (which always beats a
   presentation attribute) is what the Style tab drives. */
.lnew-faq .lnew-faq__ic path { stroke-width: var(--lnfq-ic-sw); }

.lnew-faq__item.is-open .lnew-faq__ic {
  transform: rotate(var(--lnfq-ic-rot));
  color: var(--lnfq-ic-ink-open, var(--lnfq-ic-ink));
  background: var(--lnfq-ic-bg-open, var(--lnfq-ic-bg));
}
/* The plus/minus variant morphs instead of rotating: its vertical stroke
   collapses to nothing while the horizontal one stays put. */
.lnew-faq__ic-v {
  transform-origin: 12px 12px;
  transition: transform var(--lnfq-ic-dur) ease, opacity var(--lnfq-ic-dur) ease;
}
.lnew-faq__item.is-open .lnew-faq__ic-v { transform: scaleY(0); opacity: 0; }

/* The panel. max-height is written inline by lnew-faq.js (scrollHeight), the
   same mechanism the reference uses; the 0 here is the resting state. */
.lnew-faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--lnfq-a-dur) ease;
}
.lnew-faq__a-in {
  padding: var(--lnfq-a-pad-t) var(--lnfq-a-pad-x) var(--lnfq-a-pad-b);
  font-size: var(--lnfq-a-size);
  color: var(--lnfq-muted);
  line-height: var(--lnfq-a-lh);
}

/* ---- rich text inside an answer (the field is a WYSIWYG) ---- */
.lnew-faq__a-in > * + * { margin-top: var(--lnfq-a-block-gap); }
.lnew-faq__a-in a {
  color: var(--lnfq-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lnew-faq__a-in ul,
.lnew-faq__a-in ol { padding-left: 1.3em; list-style: revert; }
.lnew-faq__a-in li { list-style: inherit; }
.lnew-faq__a-in li + li { margin-top: 6px; }
.lnew-faq__a-in strong, .lnew-faq__a-in b { color: var(--lnfq-ink); font-weight: 600; }

/* =====================================================================
   Scroll reveal — --i is assigned by lnew-faq.js (index within parent)
   ===================================================================== */
.lnew-faq .lnew-reveal {
  opacity: 0;
  transform: translate3d(0, var(--lnfq-rv-dist), 0);
  transition: opacity var(--lnfq-rv-dur) var(--lnfq-ease),
              transform var(--lnfq-rv-dur) var(--lnfq-ease);
  transition-delay: calc(var(--i, 0) * var(--lnfq-rv-step));
}
.lnew-faq .lnew-reveal.is-in { opacity: 1; transform: none; }
.elementor-editor-active .lnew-faq .lnew-reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .lnew-faq .lnew-reveal { opacity: 1; transform: none; transition: none; }
  .lnew-faq__eyebrow-dot { animation: none !important; opacity: 1; }
  /* The accordion still opens and closes -- it just arrives instantly. */
  .lnew-faq .lnew-faq__a,
  .lnew-faq .lnew-faq__ic,
  .lnew-faq .lnew-faq__ic-v,
  .lnew-faq .lnew-faq__item { transition: none !important; }
}

/* =====================================================================
   Responsive — the reference's own steps, nothing invented.
     base/4-responsive.css : 1040 / 760 / 460  (gutter, section pad, head gap)
   components/faq.css has NO media queries: the card metrics are fixed at
   every width in the reference, and they stay fixed here.
   ===================================================================== */
@media (max-width: 1040px) {
  .lnew-faq { --lnfq-gutter: 24px; padding-top: 84px; padding-bottom: 84px; }
  .lnew-faq__head { margin-bottom: 44px; }
}

@media (max-width: 760px) {
  .lnew-faq { --lnfq-gutter: 20px; padding-top: 64px; padding-bottom: 64px; }
  .lnew-faq__head { margin-bottom: 34px; }
  .lnew-faq__lead { font-size: 16.5px; }
}

@media (max-width: 460px) {
  .lnew-faq { --lnfq-gutter: 16px; padding-top: 54px; padding-bottom: 54px; }
  .lnew-faq__head { margin-bottom: 28px; }
}