/* ==========================================================================
   Sanctuary v2, page-scoped styles: faq.html (catalog revamp, 2026-07-11).
   Loads AFTER styles.css and only extends it. Every value traces to
   design/brands/sanctuary.md (the kit), to a locked value in styles.css,
   or to a catalog component's extracted motion values. Catalog placements
   on this page: 008 FAQs-Accordion (measured height, one open, plus-circle
   icon), 058 Hover Text Highlight (question underline wipe), 011 Tilt Card
   (download cards), 138 Icon Slide (download link arrows), 124 Scroll Progress
   Bar (top reading bar). Inner pages are CALM:
   static world-light, no world flips, no pinned stacks.
   House rule: no em or en dashes anywhere in this file.
   ========================================================================== */

/* ---- catalog 027-style reading progress: 3px scroll-driven bar at the top
        edge, kit accent fill; sits under the nav's z-100, invisible at 0 ---- */
.page-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 99;
  pointer-events: none;
}
.page-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--accent-cta);   /* kit: accent-cta carries the progress role */
  transform: scaleX(0);
  transform-origin: 0 50%;         /* fills left to right with real scroll */
}

/* ---- Page hero (system vocabulary from the home hero) ---- */
.page-hero {
  padding: 96px 48px 64px;   /* kit: section pads {76, 96, 128}; page gutter 48 */
  text-align: center;
}
.page-eyebrow {
  font-size: 24px;           /* locked system: hero eyebrow 24px (styles.css .hero-eyebrow) */
  font-weight: 400;
  opacity: .82;              /* locked system: eyebrow sits quieter than the h1 */
}
.page-h1 {
  font-size: 80px;           /* kit: hero h1 80px (ref typeScale) */
  line-height: 1.1;          /* kit: ref h1 88px at 80 = 1.1 */
  letter-spacing: -2px;      /* kit: ref h1 letter-spacing -2px */
  font-weight: 400;          /* kit: hierarchy by SIZE at weight 400 */
  margin: 20px auto 0;
}
.page-lead {
  max-width: 760px;          /* derived: calm lead measure inside the ref 1344 content box */
  margin: 32px auto 0;
  font-size: 20px;           /* derived: one step over body 16 (locked sheet-row 20 is the same step) */
  line-height: 1.6;
}

/* ---- Accordion group (catalog 008, re-tokened) ---- */
.faq-sec {
  padding: 32px 48px 0;      /* kit: page gutter 48; hero already carries the top rhythm */
}
.faq-wrap {
  max-width: 900px;          /* derived: single reading column inside the ref 1344 content box */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;                 /* kit: spacing base 16 between cards */
}
.faq-group-head { margin-bottom: 16px; } /* kit: spacing base 16 */

/* accordion card: locked card vocabulary, flat cream fill, radius 32 */
.qa {
  border-radius: 32px;       /* kit: cards flat filled, radius 32, border NONE, shadow NONE */
  overflow: hidden;          /* clips the collapsing answer to the card radius */
}
.qa-h { font-weight: 400; }  /* kit: hierarchy by SIZE at weight 400; the button carries the size */
.qa-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 24px;                 /* kit: radius scale member 24 as the text-to-icon gap */
  padding: 28px 32px;        /* locked system: card pad 32, tightened vertically */
  font-size: 20px;           /* locked system: sheet-row scale 20 (styles.css .sheet-row) */
  text-align: left;
  line-height: 1.35;
}
.qa-btn:hover { background: rgba(250, 222, 222, .35); } /* kit line at 35 percent as the hover wash */

/* catalog 058 Hover Text Highlight, re-tokened: a kit-red underline wipes in
   under the question text on hover or keyboard focus. The component's scaleX
   sweep is reproduced as an animated background-size (0 -> 100 percent width)
   so it wraps cleanly across multi-line questions (box-decoration-break clone);
   transition 0.25s cubic-bezier(0.4,0,0.2,1) exact from the source. */
.qh {
  background-image: linear-gradient(var(--accent), var(--accent)); /* kit red highlight */
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 3px;                 /* rest: no underline (component underlineThickness -> 3px hairline) */
  padding-bottom: 2px;
  transition: background-size .25s cubic-bezier(.4, 0, .2, 1);
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
.qa-btn:hover .qh,
.qa-btn:focus-visible .qh { background-size: 100% 3px; }

/* plus-circle icon (catalog 008): 28px circle, two 12px bars; choreography
   exact from the export: H bar -90deg -> 90deg, V bar -180deg -> 90deg,
   0.25s cubic-bezier(0.4, 0, 0.2, 1); fills re-tokened to the kit */
.acc-ico {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 100px;
  background: var(--line);   /* component icon fill role -> kit secondary fill */
  position: relative;
  overflow: hidden;
}
.acc-ico i {
  position: absolute;
  width: 1.5px;
  height: 12px;
  background: var(--ink);    /* component bar color role -> kit ink */
  left: calc(50% - 0.75px);
  top: calc(50% - 6px);
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}
.acc-ico .b1 { transform: rotate(-90deg); }
.acc-ico .b2 { transform: rotate(-180deg); }
.qa.open .acc-ico .b1 { transform: rotate(90deg); }
.qa.open .acc-ico .b2 { transform: rotate(90deg); }

/* answer reveal: catalog 008 measured-height pattern; faq.js writes the
   measured pixel height, CSS owns the curve (kit house ease) and the
   reduced-motion kill; noscript forces height auto (head override) */
.qa-a {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height .35s var(--ease-house), opacity .25s ease;
}
.qa.open .qa-a { opacity: 1; }
.qa-a-inner { min-height: 0; }
.qa-a p {
  padding: 0 32px 28px;      /* locked system: card pad 32; matches the button pad */
  font-size: 16px;           /* kit: body 16 */
  line-height: 1.6;          /* derived: answer leading, one step over body 1.5 */
  max-width: 720px;          /* derived: calm answer measure inside the card */
}

/* ---- Downloads: real published documents as pastel cards with catalog 011
        tilt (fine pointers, JS-gated) and a 013-style arrow slide ---- */
.dl-sec {
  padding: 128px 48px 32px;  /* kit: section pad 128 */
}
.dl-sec .display { margin-bottom: 48px; } /* kit: head-to-grid step 48 */
.dl-wrap {
  max-width: 1100px;         /* derived: two-column row grid inside the ref 1344 content box */
  margin: 0 auto;
}
.dl-group {
  font-size: 16px;           /* kit: body 16 */
  color: var(--muted-ink);   /* locked system: muted labels (styles.css .col-head) */
  margin: 32px 0 16px;       /* locked system: card gap 32 above, base 16 below */
}
.dl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;                 /* kit: spacing base 16 */
}
.dl-card {
  position: relative;        /* tilt glare + arrow anchor */
  overflow: hidden;          /* clips the injected glare and the sliding arrow */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 128px;
  border-radius: 24px;       /* kit: radius scale member 24 (locked footer card, sheet, dropdown) */
  padding: 24px 28px;        /* derived: card-scale padding under the card pad 32 */
  color: var(--ink);
}
.dl-kind {
  font-size: 13px;           /* derived: one step under the 14 legal-row scale for the tiny format tag */
  color: var(--muted-ink);
}
.dl-name {
  margin-top: auto;
  font-size: 20px;           /* locked system: sheet-row scale 20 */
  line-height: 1.3;
  max-width: 85%;            /* keeps the name clear of the arrow corner */
}
/* catalog 013-style arrow slide: the resting arrow exits up-right while its
   twin slides in from down-left; pure transform, overflow clipped */
.dl-arrow {
  position: absolute;
  top: 22px;
  right: 24px;
  width: 20px;
  height: 20px;
  overflow: hidden;
}
.dl-arrow svg {
  position: absolute;
  inset: 2px;
  transition: transform .3s var(--ease-house); /* kit house ease at the micro scale */
}
.dl-arrow .a2 { transform: translate(-120%, 120%); }
.dl-card:hover .dl-arrow .a1,
.dl-card:focus-visible .dl-arrow .a1 { transform: translate(120%, -120%); }
.dl-card:hover .dl-arrow .a2,
.dl-card:focus-visible .dl-arrow .a2 { transform: translate(0, 0); }
/* catalog 011 tilt: transform set by faq.js on fine pointers; the card only
   declares the settle transition (component's extracted 0.2s ease-out) */
.dl-card[data-tilt] { transition: transform .2s ease-out; transform-style: preserve-3d; }
.tilt-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 80%);
  transition: opacity .2s ease-out;
}
.dl-card:hover .tilt-glare { opacity: 1; }

/* ---- Staggered scroll reveals (JS-gated via html.js-reveal; no-JS never hides) ---- */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
}
.js-reveal [data-reveal].in {
  opacity: 1;
  transform: none;
  transition: opacity .6s var(--ease-house), transform .6s var(--ease-house);
  transition-delay: var(--rd, 0s);
}

/* ---- Mobile (locked breakpoint 820; kit: mobile gutter 20, h1 28) ---- */
@media (max-width: 820px) {
  .page-hero { padding: 56px 20px 32px; } /* kit: mobile gutter 20 */
  .page-eyebrow { font-size: 16px; }      /* locked system: mobile eyebrow 16 */
  .page-h1 {
    font-size: 28px;         /* kit: mobile h1 28px */
    letter-spacing: -0.7px;  /* locked system: mobile h1 tracking fingerprint, rounded */
  }
  .page-lead { font-size: 16px; margin-top: 20px; }
  .faq-sec { padding: 16px 20px 0; }
  .qa-btn { padding: 20px 24px; font-size: 16px; } /* kit: body 16 on mobile rows */
  .qa-a p { padding: 0 24px 20px; }
  .dl-sec { padding: 76px 20px 16px; }    /* kit: section pad 76 on mobile */
  .dl-sec .display { margin-bottom: 32px; }
  .dl-grid { grid-template-columns: 1fr; }
  .dl-card { padding: 20px 22px; min-height: 108px; }
  .dl-name { font-size: 16px; }           /* kit: body 16 on mobile rows */
  .dl-arrow { top: 18px; right: 20px; }
}

/* ---- catalog 058 Hover Text Highlight on the shared footer link columns:
        mirrors index.html's .hl-links footer treatment so the accent underline
        wipe (scaleX from the leading edge, house ease) is live on this page too.
        (Distinct placement from the 058 question underline above.) ---- */
.hl-links a { position: relative; }
.hl-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s var(--ease-house);
}
.hl-links a:hover::after,
.hl-links a:focus-visible::after { transform: scaleX(1); }

/* ---- Reduced motion: every animation on this page dies here (build law) ---- */
@media (prefers-reduced-motion: reduce) {
  .qa-a, .acc-ico i { transition: none; }
  .qh { transition: none; }                 /* underline appears without the wipe */
  .hl-links a::after { transition: none; }
  .dl-arrow svg { transition: none; }
  .dl-card[data-tilt] { transition: none; transform: none !important; }
  .tilt-glare { display: none; }
  .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
  .page-progress i { transition: none; }
}