/**
 * CUTIS Theme — Service "Frequently asked questions" section
 * Classes kept identical to _design-reference/style.css (faq-item, faq-q,
 * faq-a, faq-a-inner) since none of them collide with anything in
 * header.css/layout.css.
 *
 * .container-cutis, .eyebrow, .section-head are already defined in
 * single-service-types.css; .row/.g-5/.align-items-center in
 * single-service-candidate.css; .col-lg-4 in single-service-types.css (and
 * re-asserted for cascade safety in single-service-blog.css, which loads
 * before this file); .btn-cutis/.btn-cutis-outline in single-service-
 * doctor-video.css. All are enqueued alongside this file on every service
 * singular page (all conditioned on is_singular('service') in functions.php)
 * — not redeclared here. .col-lg-8 doesn't exist yet anywhere in the theme,
 * so it's added below. section-head is used WITHOUT the ".center" modifier
 * here (left-aligned), same as Blog/Publications — the reference has no
 * "center" class on this section either, and its <h2> has no inline
 * font-size override (unlike Awards/Publications), so section-head's
 * default sizing from single-service-types.css is used as-is.
 *
 * This section has a plain white background in the reference (no bg wash
 * class) and uses the standard site-wide "section-padding" utility (the
 * reference's own "py-section" here is the site's *default* padding scale,
 * not the smaller "py-section-sm" seen in Awards/Publications — so this is
 * not the same trade-off flagged in those files; "section-padding" already
 * is this theme's one padding utility for every section, so it's simply the
 * correct choice here, not a deviation).
 *
 * DEVIATION FROM REFERENCE (implementation, not visual design): the
 * reference animates .faq-a open/closed via a hardcoded inline
 * `style="max-height:200px"` on the first (open) item, with the CSS default
 * being `max-height:0`. That clips any answer taller than 200px and would
 * require JS to measure pixel heights for arbitrary content. Instead, this
 * file uses the CSS grid-template-rows 0fr/1fr technique: .faq-a is a
 * single-column grid whose track size is animated between `0fr` (closed)
 * and `1fr` (open), with .faq-a-inner clipped via overflow:hidden and
 * min-height:0 so the collapsed track has zero visible height regardless of
 * content length. This animates smoothly for answers of any length with no
 * JS-measured pixel heights — single-service-faq.js only toggles the "open"
 * class / aria attributes, it never touches height.
 *
 * BUG FIX (verified live via Chrome devtools): the vertical spacing below
 * each answer must NOT live on .faq-a-inner (the overflow:hidden/min-height:0
 * element itself) — padding is part of an element's own box and is never
 * zeroed by min-height:0/the automatic-minimum-size-to-0 override (that
 * override only zeroes the CONTENT-driven minimum, not the element's own
 * padding). With `padding: 0 4px 22px` previously on .faq-a-inner, every
 * "closed" item's rendered height floored at 22px (confirmed live: forcing
 * padding-bottom to 0 via devtools dropped the measured height from 22px to
 * 0px on the nose) instead of collapsing to 0 — visible as a stray sliver of
 * clipped answer text under every collapsed question. Fixed by moving
 * padding-bottom onto .faq-a (the grid container, not the clipped item) and
 * animating it in lockstep with grid-template-rows, so the closed state is
 * truly padding-bottom:0 + grid-template-rows:0fr = 0px, and the open state
 * restores both together.
 *
 * Colors/fonts/spacing are pulled from the CSS custom properties defined in
 * assets/css/header.css :root and from the Theme Settings design tokens
 * (inc/theme-settings.php -> cutis_output_theme_css_vars()). The reference's
 * --slate tone (answer text) has no matching token, so it's derived via
 * color-mix() from --cutis-color-text, same technique used for the
 * "slate-soft" tone in single-service-awards.css / single-service-
 * publications.css.
 */

/* ------------------------------------------------------------------ */
/* Grid addition — col-lg-8, on top of the .row/.g-5/.col-lg-4 rules already
   defined elsewhere. */
/* ------------------------------------------------------------------ */
@media (min-width: 992px) {
  .col-lg-8 {
    width: 66.6667%;
  }
}

/* ------------------------------------------------------------------ */
/* Left column — description + CTA */
/* ------------------------------------------------------------------ */
.faq-description {
  margin-top: 16px;
  font-size: 15.5px;
  color: var(--cutis-color-text);
}
.faq-cta {
  margin-top: 22px;
}

/* ------------------------------------------------------------------ */
/* Accordion */
/* ------------------------------------------------------------------ */
.faq-item {
  border-bottom: 1px solid var(--cutis-color-border);
}
.faq-item:first-child {
  border-top: 1px solid var(--cutis-color-border);
}

.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 22px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 16px;
  font-weight: 600;
  color: var(--cutis-color-heading);
  cursor: pointer;
}
.faq-q svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
  stroke: var(--cutis-color-primary);
}
.faq-item.open .faq-q svg {
  transform: rotate(45deg);
}

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  padding-bottom: 0;
  transition:
    grid-template-rows 0.35s ease,
    padding-bottom 0.35s ease;
}
.faq-item.open .faq-a {
  grid-template-rows: 1fr;
  padding-bottom: 22px;
}
.faq-a-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 4px;
  font-size: 14.5px;
  color: color-mix(in srgb, var(--cutis-color-text) 80%, white);
  max-width: 760px;
}