/**
 * DocuPOW — FAQ page styles (page-templates/faq.php only).
 *
 * Scope: everything lives under .page-faq (BEM). Global chrome, container,
 * buttons, links and scroll-reveal come from main.css — this file adds the
 * centered hero + search, the two-column rail/accordion layout and the
 * light techblue-tinted closing band.
 *
 * Light-canvas contrast contract (tokens + two documented derived values):
 *  - The hero eyebrow, chevrons, rail active state and "Contact us" link
 *    are var(--techblue) — 4.54:1 on white (AA).
 *  - h1 / h2 headings / questions / rail links are var(--ink) — 16.68:1
 *    on white (AA).
 *  - Leads, answers and the count are var(--text-muted) — 9.34:1 on
 *    white (AA); in-answer prose links are var(--techblue) (4.54:1 — AA)
 *    per the legal/single prose-link pattern.
 *  - DERIVED HEX #1 — .page-faq__still background rgba(43,118,210,.08):
 *    var(--techblue) at 8% alpha over white; composites to ~#EEF4FC —
 *    the token-derived stand-in for the export's raw #e7eff8 band.
 *    var(--ink) is 15.5:1 and var(--text-muted) 8.7:1 on that tint (AA).
 *  - DERIVED HEX #2 — the sticky-bar-style translucent surfaces are NOT
 *    used here; no other raw colour values exist in this file.
 *  - Rail note: every category is populated (inc/faq-content.php), so all
 *    8 rail items are REAL links in var(--ink). The launch-era muted
 *    NON-LINK spans for contentless categories are gone (dead-anchor
 *    policy retired with the content drop); only the search's transient
 *    .is-muted state still reads muted.
 *
 * Search + accordions are FUNCTIONAL, not decorative: the [hidden] rule
 * and the open/closed panel states below apply unconditionally (never
 * inside a motion media query), so both work identically under
 * prefers-reduced-motion: reduce. Only the 200ms panel grid-rows/opacity
 * transition and the chevron rotation transition live in the
 * no-preference block.
 *
 * Motion contract (transform/opacity + grid-template-rows — STANDARD tier):
 *  - Hidden "entrance" base states sit inside
 *    @media (prefers-reduced-motion: no-preference), so with reduced
 *    motion (or if faq.js never runs) everything is visible. NO floats,
 *    NO bobs, NO loops — the ONE bespoke moment is the hero .is-ready
 *    entrance.
 *  - faq.js hooks: .is-ready on .page-faq__hero (staged copy entrance:
 *    eyebrow/h1/lead/search); .is-open on .page-faq__item (accordion
 *    panel 0fr -> 1fr + chevron 180deg); .is-active on the rail links
 *    (IntersectionObserver on the section headings); .is-muted on a rail
 *    link whose section the search emptied.
 *  - main.js owns the [data-dp-reveal] entrance on the closing band.
 *  - A final prefers-reduced-motion: reduce block keeps the entrance
 *    visible and stills the chevron/panel transitions.
 */

/* =========================================================================
   Page scope — light canvas, section rhythm, functional [hidden]
   ========================================================================= */
.page-faq {
  overflow-x: clip; /* insurance: nothing may cause horizontal scroll @320px */
}

/* Search + accordion visibility — faq.js toggles the [hidden] attribute on
   panels, items and sections. Authored display values (the panel's grid)
   would otherwise beat the UA's [hidden] rule, so restate it here.
   Unconditional: filtering and collapsing work without motion. */
.page-faq [hidden] {
  display: none !important;
}

/* 96px page rhythm on desktop, 64px under 768. */
.page-faq__hero {
  padding-block: var(--space-7) var(--space-5);
  border-bottom: 1px solid var(--border); /* the export's hero hairline */
}

.page-faq__content {
  padding-block: var(--space-7);
}

.page-faq__still {
  padding-block: var(--space-7);
}

@media (max-width: 767.98px) {
  .page-faq__hero {
    padding-block: var(--space-6) var(--space-4);
  }

  .page-faq__content,
  .page-faq__still {
    padding-block: var(--space-6);
  }
}

/* =========================================================================
   S1 — Hero + search (centered, max 768, bottom hairline)
   ========================================================================= */
.page-faq__hero-inner {
  max-width: 768px; /* export max-w-3xl */
  margin-inline: auto;
  text-align: center;
}

/* Eyebrow — mono technical label in Tech Blue per the export's
   text-primary (4.54:1 on white — AA). */
.page-faq__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--techblue);
  margin-bottom: var(--space-2);
}

/* The single h1 — headline-xl (64/1.1/-0.02em/700) in Ink per the export. */
.page-faq__title {
  font-size: 64px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-3);
}

/* body-lg lead. */
.page-faq__lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 672px; /* export max-w-2xl */
  margin-inline: auto;
  margin-bottom: var(--space-5);
}

/* Search field — white input, 1px hairline border, 8px radius, inline 20px
   search glyph at the left (decorative; the visually-hidden label carries
   the name). The techblue focus ring comes from the global :focus-visible
   outline in main.css. */
.page-faq__search {
  position: relative;
  max-width: 576px; /* export max-w-xl */
  margin-inline: auto;
}

.page-faq__search-icon {
  position: absolute;
  left: var(--space-2);
  top: 50%;
  translate: 0 -50%;
  display: block;
  color: var(--text-muted);
  pointer-events: none;
}

.page-faq__search-icon svg {
  display: block;
  width: 20px;
  height: 20px;
}

.page-faq__search-input {
  width: 100%;
  padding: 15px var(--space-2) 15px 48px; /* 56px total height (export py-4); 48 = export pl-12 clears the glyph */
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
}

.page-faq__search-input::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

/* Result count — aria-live status, mono 13 muted (9.34:1 on white — AA). */
.page-faq__count {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: var(--space-2);
}

/* =========================================================================
   S2 — Content: rail (25%) + accordion sections (75%) on the NAMED wrapper
   ========================================================================= */
.page-faq__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); /* export md:w-1/4 + md:w-3/4 */
  gap: var(--space-5);
  align-items: start;
}

/* <768 — single column; the rail disappears entirely per the export's
   hidden md:block (the h2 section headings carry the categories). */
@media (max-width: 767.98px) {
  .page-faq__layout {
    grid-template-columns: 1fr;
  }

  .page-faq__rail {
    display: none;
  }
}

/* Sticky wrapper — 104px clears the 72px header plus breathing room (the
   house offset; the export's top-32 was tuned to its own chrome). */
.page-faq__rail-sticky {
  position: sticky;
  top: 104px;
}

/* Vertical nav with a left hairline; links/spans sit 16px in. */
.page-faq__rail-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 1px solid var(--border);
  padding-left: var(--space-2);
}

/* Real category links — 16/500 Ink (see the header's rail note); active =
   techblue text + a 2px left border that overlays the hairline (the
   negative margin pulls the link's own transparent border over it:
   -17px + 2px border + 15px padding = flush with the sibling spans). */
.page-faq__rail-link {
  display: block;
  margin-left: -17px;
  border-left: 2px solid transparent;
  padding: var(--space-1) 0 var(--space-1) 15px;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--ink);
  transition: color .18s ease, border-color .18s ease;
}

.page-faq__rail-link:hover,
.page-faq__rail-link:focus-visible {
  color: var(--techblue);
}

.page-faq__rail-link.is-active {
  color: var(--techblue);
  border-left-color: var(--techblue);
}

/* A rail link whose section the current search emptied — reads muted
   until the query changes (faq.js). */
.page-faq__rail-link.is-muted {
  color: var(--text-muted);
}

/* Section stack — 64px between sections (export space-y-xl reads as one
   step down inside the 96px section rhythm). */
.page-faq__sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Anchor targets clear the sticky header (matches the rail-sticky offset
   and the observer's top rootMargin in faq.js). */
.page-faq__section {
  scroll-margin-top: 104px;
}

/* Section heading — headline-md weight up (24/600) in Ink over the
   export's 2px Ink rule. */
.page-faq__section-title {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--ink);
  padding-bottom: var(--space-1);
  border-bottom: 2px solid var(--ink);
  margin-bottom: var(--space-3);
}

.page-faq__items {
  display: block;
}

/* Accordion item — bottom hairline per the export. */
.page-faq__item {
  border-bottom: 1px solid var(--border);
}

/* The h3 is purely structural — the button inside carries the hit area. */
.page-faq__q {
  margin: 0;
}

/* Full-row disclosure button — native <button>, question left, chevron
   right. Unstyled-button reset; the global :focus-visible ring applies. */
.page-faq__q-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

/* Question — 18/500 Ink; techblue on hover per the export's group-hover. */
.page-faq__q-text {
  font-size: 18px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink);
  transition: color .18s ease;
}

.page-faq__q-btn:hover .page-faq__q-text,
.page-faq__q-btn:focus-visible .page-faq__q-text {
  color: var(--techblue);
}

/* Chevron — 20px techblue glyph (decorative); rotates 180deg when open.
   The rotation TRANSITION lives in the no-preference block below — the
   rotated end state itself is unconditional (open/closed must always be
   visually distinct). */
.page-faq__chevron {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--techblue);
}

.page-faq__item.is-open .page-faq__chevron {
  transform: rotate(180deg);
}

/* Panel — the grid-template-rows 0fr -> 1fr technique: the closed panel
   measures zero height without a magic max-height. These STATES are
   unconditional (functional under reduce); only the 200ms transition is
   motion-gated below. Closed panels ALSO carry [hidden] (display:none) —
   faq.js sequences the attribute around the transition. */
.page-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
}

.page-faq__item.is-open .page-faq__panel {
  grid-template-rows: 1fr;
  opacity: 1;
}

.page-faq__panel-inner {
  min-height: 0;
  overflow: hidden;
}

/* Answer — body-md muted; right/bottom padding per the export's pr-8/pb. */
.page-faq__answer {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  padding: 0 var(--space-4) var(--space-3) 0;
}

/* In-answer prose links — techblue, underline on hover/focus (the
   legal.css/single.css prose-link pattern; 4.54:1 on white — AA, and
   >3:1 against the surrounding muted copy so colour is a sufficient
   cue per G183). Answers carry only <a>/<strong>/<em> (wp_kses
   allowlist in faq.php). */
.page-faq__answer a {
  color: var(--techblue);
}

.page-faq__answer a:hover,
.page-faq__answer a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* <strong> product-term callouts inside answers read Ink like the legal
   prose pattern. */
.page-faq__answer strong {
  color: var(--ink);
  font-weight: 600;
}

/* Zero-results state — hidden until faq.js filters out every item;
   centered mono message + a real reset button. */
.page-faq__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-3);
  text-align: center;
}

.page-faq__empty-msg {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--text-muted);
}

/* =========================================================================
   S3 — Still have questions (light techblue-tinted band, centered)
   ========================================================================= */

/* Band tint — DERIVED HEX #1 (header comment): the export's raw #e7eff8
   becomes var(--techblue) rgba(43,118,210,.08) over the white canvas
   (composites to ~#EEF4FC). */
.page-faq__still {
  background-color: rgba(43, 118, 210, .08);
  text-align: center;
}

/* headline-lg (36/1.2/-0.01em/600) in Ink. */
.page-faq__still-title {
  font-size: 36px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-2);
}

.page-faq__still-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 672px;
  margin-inline: auto;
  margin-bottom: var(--space-4);
}

.page-faq__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

/* <640 — the button pair stacks full-width. */
@media (max-width: 639.98px) {
  .page-faq__cta-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* "Contact us ->" text link — 16/500 techblue (4.54:1 on the tint — AA). */
.page-faq__contact-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-3);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--techblue);
}

.page-faq__contact-link svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.page-faq__contact-link:hover,
.page-faq__contact-link:focus-visible {
  color: var(--techblue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================================================================
   Mobile type scale (<768) — 64->44, 36->28, 24->20
   ========================================================================= */
@media (max-width: 767.98px) {
  .page-faq__title {
    font-size: 44px;
    line-height: 1.1;
  }

  .page-faq__still-title {
    font-size: 28px;
    line-height: 1.2;
  }

  .page-faq__section-title {
    font-size: 20px;
    line-height: 1.3;
  }
}

/* =========================================================================
   Motion — entrance base states + the accordion transitions (no-preference
   only). The open/closed STATES are NOT here: they must work under every
   motion preference.
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* Hero entrance — faq.js adds .is-ready to the hero on init (double
     rAF); copy rises in with 0/80/160/240ms delays. */
  .page-faq__hero .page-faq__eyebrow,
  .page-faq__hero .page-faq__title,
  .page-faq__hero .page-faq__lead,
  .page-faq__hero .page-faq__search {
    opacity: 0;
    transform: translateY(12px);
    transition:
      opacity .5s cubic-bezier(0.16, 1, 0.3, 1),
      transform .5s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .page-faq__hero .page-faq__title {
    transition-delay: 80ms;
  }

  .page-faq__hero .page-faq__lead {
    transition-delay: 160ms;
  }

  .page-faq__hero .page-faq__search {
    transition-delay: 240ms;
  }

  .page-faq__hero.is-ready .page-faq__eyebrow,
  .page-faq__hero.is-ready .page-faq__title,
  .page-faq__hero.is-ready .page-faq__lead,
  .page-faq__hero.is-ready .page-faq__search {
    opacity: 1;
    transform: none;
  }

  /* Accordion motion — 200ms height (grid rows) + opacity on the panel,
     200ms rotation on the chevron. faq.js's collapse timer matches this
     duration (OPEN_MS). */
  .page-faq__panel {
    transition: grid-template-rows .2s ease, opacity .2s ease;
  }

  .page-faq__chevron {
    transition: transform .2s ease;
  }
}

/* =========================================================================
   Reduced motion — every animated element visible and static. The search,
   count, empty state and the accordion open/close states are untouched:
   they are functional.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .page-faq__hero .page-faq__eyebrow,
  .page-faq__hero .page-faq__title,
  .page-faq__hero .page-faq__lead,
  .page-faq__hero .page-faq__search {
    opacity: 1;
    transform: none;
  }
}

/* -------------------------------------------------------------------------
   Named markup hooks that intentionally carry no styles of their own —
   named here so every markup class resolves in this sheet (build rule).
   ------------------------------------------------------------------------- */
.page-faq__empty-reset {
  /* no-op: styled by .dp-btn--secondary; named as the reset hook */
}