/*
 * /faqs/ — the client's 25 questions, in four sections.
 *
 * WHY THERE IS NO TEMPLATE AND NO JAVASCRIPT
 * ------------------------------------------
 * The content is EDITOR content, seeded by woo/40-pages.php from woo/data/pages/faqs.html, and
 * every question is a core/details block. So the client edits, reorders, adds and removes questions
 * in the block editor like any other page — which matters more here than anywhere else on the site,
 * because an FAQ is the copy a shop revises most often.
 *
 * That also means no accordion script: <details> collapses natively, with keyboard support and
 * find-in-page expansion for free. The homepage's three-question accordion is a different thing —
 * hand-built .faq-item markup driven by site.js §3 — and it stays as it is because it is part of a
 * pixel-verified design.
 *
 * ⚑ These are NOT given a shared `name`, unlike the product page's .prod-panel group. There, an
 * exclusive accordion exists to stop a sticky column growing past one open panel. Here the page
 * scrolls normally and someone comparing the return window against the exchange window wants both
 * open at once.
 *
 * Loaded automatically by bebold_page_css_slug() matching the page's `faqs` slug.
 */

/*
 * ⚑ NO HAIRLINE ABOVE THE SECTION HEADINGS HERE — client review, 17 Sep 2026: "there's a line
 * above each of the section … remove the extra line". This file's own header used to say the
 * headings "need nothing" because shell.css already gives `.page-body h2` a hairline. That was
 * true on a page of prose and wrong on this one, and the difference is what the heading is
 * followed by:
 *
 *   faqs               h2 -> <details>, which carries `border-top` of its own (below)
 *   shipping-returns   h2 -> <p>
 *   privacy-policy     h2 -> <p>
 *   terms-of-use       h2 -> <p>
 *
 * So on the three policy pages that hairline is the ONLY thing separating one section from the
 * next and has to stay. Here it lands one line above another line, bracketing the heading in a box
 * nobody drew on purpose. Checked on all four pages before touching the shared rule.
 *
 * Which is why this is in faqs.css rather than shell.css: it is scoped to the one page whose
 * structure makes it redundant, and it loads nowhere else.
 *
 * `border-top` only. The margin and padding stay exactly as they were, so the vertical rhythm of
 * the page does not move — the client asked for a line to go, not for the sections to close up.
 */
body:not(.woocommerce-page) .page-body h2{border-top:0}

/*
 * A hairline-separated row, matching .prod-panel on the product page — same rhythm, same gold-free
 * restraint, so the two accordions on the site read as one component family.
 */
body:not(.woocommerce-page) .page-body .wp-block-details{
  border-bottom:1px solid var(--hair);
  margin:0;
}
/* The first question after a section heading sits against it; h2+* already spaces it. */
body:not(.woocommerce-page) .page-body h2+.wp-block-details{border-top:1px solid var(--hair)}

body:not(.woocommerce-page) .page-body .wp-block-details>summary{
  position:relative;
  display:flex;align-items:baseline;
  padding:clamp(15px,1.8vw,19px) 40px clamp(15px,1.8vw,19px) 0;
  cursor:pointer;list-style:none;
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:clamp(.92rem,1.05vw,1rem);line-height:1.5;letter-spacing:.01em;
  color:var(--green);
}
/* Both are needed: WebKit uses the pseudo-element, everyone else honours list-style. */
body:not(.woocommerce-page) .page-body .wp-block-details>summary::-webkit-details-marker{display:none}

/*
 * A + that becomes a −, drawn from two bars so there is no glyph to go missing in a fallback font —
 * the same construction as .prod-panel-mark, which has the same note. Positioned against the
 * summary's own box rather than given a wrapper span, because the markup here is the block
 * editor's and cannot carry one.
 */
body:not(.woocommerce-page) .page-body .wp-block-details>summary::before,
body:not(.woocommerce-page) .page-body .wp-block-details>summary::after{
  content:"";position:absolute;right:0;top:calc(50% - .5px);
  width:12px;height:1px;background:var(--green);
  transition:transform .3s ease,opacity .3s ease;
}
body:not(.woocommerce-page) .page-body .wp-block-details>summary::after{transform:rotate(90deg)}
body:not(.woocommerce-page) .page-body .wp-block-details[open]>summary::after{
  transform:rotate(90deg) scaleX(0);opacity:0;
}

body:not(.woocommerce-page) .page-body .wp-block-details:hover>summary{color:var(--green-mid)}
/* The focus ring belongs on the row, not on the text: summary is what takes keyboard focus. */
body:not(.woocommerce-page) .page-body .wp-block-details>summary:focus-visible{
  outline:2px solid var(--green);outline-offset:3px;
}

/*
 * The answer. Specificity is deliberate: `body:not(.woocommerce-page) .page-body p` in shell.css
 * scores (0,2,2) and would otherwise keep its 1.15em bottom margin inside a panel, leaving a gap
 * under the last line that reads as a broken row.
 */
body:not(.woocommerce-page) .page-body .wp-block-details p{
  margin:0 0 clamp(16px,2vw,22px);
  max-width:66ch;
  color:var(--muted);
}
body:not(.woocommerce-page) .page-body .wp-block-details p:last-child{
  margin-bottom:clamp(16px,2vw,22px);
}

/* The closing "write to us" line, which is the last block on the page. */
body:not(.woocommerce-page) .page-body>p:last-child{
  margin-top:clamp(30px,3.4vw,44px);
}