/* =========================================================================
   template-parts/sections/section-faq.php
   The FAQ section on every page that renders the shared partial.

   Rebuilt to the homepage FAQ on the owner's instruction (10 Sep 2026): the
   page's heading and a question box in a sticky left column, the accordion
   on the right as plain rows between hairlines, and an orange "+" that turns
   into an x when a row opens. The sizes, colours and spacing below are the
   values the homepage's own FAQ uses (assets/css/es-home.css, SECTION 10),
   so the two read as one design.

   The accordion stays native <details>: no JavaScript, one row open at a
   time through the shared `name`, and every answer in the initial HTML.

   Printed by en_print_css() (inc/css-loader.php) where the partial renders,
   once per page.
   ========================================================================= */

/* ── Layout ─────────────────────────────────────────────────
   Left column one part, accordion 1.6 parts, 64px apart: the
   homepage split. One column below 992px, where the left column
   stops being sticky. */
.es-faq__grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: var(--space-8);
  align-items: start;
}

.es-faq__side {
  position: sticky;
  top: 120px;
}

@media (max-width: 991px) {
  .es-faq__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .es-faq__side {
    position: static;
  }
}

/* The page's own heading and intro, left-aligned in the column. An intro
   sits 28px above the question box, as `.rv-faq-aside .rv-lede` sets it on
   the homepage. */
.es-faq__head .es-lede {
  margin-bottom: 28px;
}

/* ── Question box ───────────────────────────────────────────
   The homepage's "Have a question that's not covered here?" box. A page
   that passes its own panel shows that panel's title, text and link in this
   same box instead. */
.es-faq__ask {
  margin-top: var(--space-5);
  padding: 26px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--gray-50);
}

.es-faq__ask p {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-caption);
  color: var(--text-body);
}

.es-faq__ask .es-faq__ask-title {
  margin-bottom: var(--space-2);
  font-weight: var(--font-bold);
  color: var(--text-heading);
}

.es-faq__ask > :last-child {
  margin-bottom: 0;
}

.es-faq__ask a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-caption);
  font-weight: var(--font-bold);
  color: var(--brand-500);
  text-decoration: none;
}

.es-faq__ask a:hover {
  color: var(--brand-600);
}

/* On a grey section (the two white-label pages pass `bg => gray`) the box
   would be the same colour as its ground and show only its hairline. The
   homepage box sits one step off a white ground, so here it takes the white
   surface to keep that same step. */
.es-bg-gray .es-faq__ask {
  background: var(--bg-surface);
}

/* ── Rows ───────────────────────────────────────────────────
   Plain rows between hairlines, no card, no shadow: the homepage
   accordion. */
.es-faq__item {
  border-bottom: 1px solid var(--border-subtle);
}

.es-faq__item:first-child {
  border-top: 1px solid var(--border-subtle);
}

/* ── Question ───────────────────────────────────────────────
   The summary is the button. list-style: none plus the WebKit
   pseudo-element remove the browser's own disclosure triangle;
   the "+" is the affordance. */
.es-faq__q {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-2);
  cursor: pointer;
  list-style: none;
}

.es-faq__q::-webkit-details-marker {
  display: none;
}

.es-faq__q:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: -2px;
}

/* An h3 inside the summary keeps the page outline intact; it takes the
   homepage question's type rather than a heading's. Measured on the
   homepage question: 17px, 700, line-height 20.4px, which is 1.2. No
   line-height token equals 1.2, so it is written out.

   The weight carries !important on purpose. style.css sets
   `h1, h2, h3 { font-weight: 800 !important }` site-wide, which no ordinary
   selector can beat; the homepage escapes it only because its question is a
   <button>, not an h3. Between two !important declarations the more
   specific selector wins, so this three-class rule takes the weight back for
   the FAQ question alone, without touching that legacy rule. */
.es-faq .es-faq__q .es-faq__qtext {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--font-bold) !important;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-heading);
}

.es-faq__q::after {
  content: "+";
  flex-shrink: 0;
  margin-left: auto;
  font-family: var(--font-label);
  font-size: 22px;
  font-weight: var(--font-regular);
  line-height: 1;
  color: var(--brand-500);
  transition: transform 0.3s var(--ease-out);
}

.es-faq__item[open] > .es-faq__q .es-faq__qtext {
  color: var(--brand-600);
}

.es-faq__item[open] > .es-faq__q::after {
  transform: rotate(45deg);
}

/* ── Answer ─────────────────────────────────────────────────
   `font: inherit` on the paragraphs so a global `p` rule cannot
   pull the answer off the homepage's size. */
.es-faq__a {
  padding: 0 var(--space-2) 26px;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--text-body);
}

.es-faq__a p {
  margin: 0;
  font: inherit;
  color: inherit;
}

.es-faq__a p + p {
  margin-top: var(--space-4);
}

/* Height transition on a <details>. `interpolate-size` is scoped to the
   section rather than set on :root, since it is inherited and nothing else
   on the page asked for it. Where either feature is missing the row simply
   snaps open. */
.es-faq {
  interpolate-size: allow-keywords;
}

.es-faq__item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size var(--duration-normal) var(--ease-out),
              content-visibility var(--duration-normal) var(--ease-out) allow-discrete;
}

.es-faq__item[open]::details-content {
  block-size: auto;
}

@media (prefers-reduced-motion: reduce) {
  .es-faq__q::after,
  .es-faq__item::details-content {
    transition: none;
  }
}