/*
 * policy.css — FAQ + Shipping/Returns pages (Phase 5, B). Consumes tokens.css
 * only; zero literals (single narrow column at every width — no @media needed).
 * Enqueued on the `faq` and `shipping-returns` page slugs (see functions.php).
 *
 * Head = the sitewide eyebrow/title/lead pattern (mirrors about.css). FAQ = a
 * native <details>/<summary> accordion: hairline dividers, +/− indicator drawn
 * in CSS, focus-visible ring, no JS. Shipping = h2 sections on the narrow
 * measure.
 */

/* — Section rhythm — mirrors .about-section / .contact-section cadence. — */
.policy-section {
  padding-block: var(--space-80);
}

.policy__inner {
  max-width: var(--container-narrow);
}

/* ============================================================
 * Head — eyebrow + title + lead (the sitewide section-head pattern).
 * ============================================================ */
.policy__head {
  margin-block-end: var(--space-48);
}

.policy__eyebrow {
  display: inline-block;
  margin-block-end: var(--space-16);
  font-size: var(--type-caption);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.policy__title {
  margin-block-end: var(--space-24);
  letter-spacing: var(--tracking-tight);
}

.policy__lead {
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

/* ============================================================
 * FAQ accordion — each item is a <details> under a hairline rule; the last
 * closes with one. The <summary> is the whole clickable row: question left,
 * +/− indicator right.
 * ============================================================ */
.faq-list {
  border-block-end: var(--border-hairline) solid var(--color-border);
}

.faq {
  border-block-start: var(--border-hairline) solid var(--color-border);
}

.faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  padding-block: var(--space-20);
  list-style: none;
  cursor: pointer;
  color: var(--color-text);
  transition: color var(--duration-fast);
}

.faq__summary::-webkit-details-marker {
  display: none;
}

.faq__summary::marker {
  content: "";
}

.faq__summary:hover {
  color: var(--color-text-muted);
}

.faq__summary:focus-visible {
  outline: var(--border-thin) solid var(--color-brand);
  outline-offset: var(--space-4);
}

.faq__question {
  font-family: var(--font-display);
  font-size: var(--type-subheading);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}

/* +/− indicator — two hairline bars; the vertical one rotates away when open.
   Sized on the spacing scale; brand red so it reads as the control. */
.faq__indicator {
  position: relative;
  flex: 0 0 auto;
  width: var(--space-16);
  height: var(--space-16);
}

.faq__indicator::before,
.faq__indicator::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  width: 100%;
  height: var(--border-thin);
  background-color: var(--color-brand);
  transform: translateY(-50%);
  transition: transform var(--duration-fast) var(--ease-out);
}

.faq__indicator::after {
  transform: translateY(-50%) rotate(90deg);
}

.faq[open] .faq__indicator::after {
  transform: translateY(-50%) rotate(0deg);
}

.faq__answer {
  padding-block-end: var(--space-24);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

.faq__answer p {
  margin-block-end: 0;
}

/* Open reveal — a short fade/rise on the answer, only when motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  .faq[open] .faq__answer {
    animation: faq-reveal var(--duration-base) var(--ease-out);
  }

  @keyframes faq-reveal {
    from {
      opacity: 0;
      transform: translateY(calc(-1 * var(--space-8)));
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq__summary,
  .faq__indicator::before,
  .faq__indicator::after {
    transition: none;
  }
}

/* ============================================================
 * Shipping / Returns / Warranty — editorial sections on the narrow measure.
 * ============================================================ */
.policy-body h2 {
  margin-block-start: var(--space-48);
  margin-block-end: var(--space-24);
  padding-block-start: var(--space-24);
  border-block-start: var(--border-hairline) solid var(--color-border);
  letter-spacing: var(--tracking-tight);
}

.policy-body h2:first-child {
  margin-block-start: 0;
  padding-block-start: 0;
  border-block-start: 0;
}

.policy-body h3 {
  margin-block-start: var(--space-32);
  margin-block-end: var(--space-12);
}

.policy-body p {
  color: var(--color-text);
  line-height: var(--leading-normal);
}

.policy-body p + p {
  margin-block-start: var(--space-16);
}