/* ============================================================================
   assets/css/page-faq.css — the FAQ accordion.

   WHY THIS FILE EXISTS AT ALL. Declaring $page_css is what makes header.php
   link wtv-base.css, so creating this stylesheet is also what gives the page
   the brand tokens. Before it, /faq/ rendered its headings in base.css's
   default ink because the design system was never loaded here.

   The questions were <h2> inside <summary> with the browser's default
   disclosure triangle and a bottom border. On screen that read as a list of
   bold headings with no signal that anything opened, which is the whole job of
   the component. Each item is a card now, with a chevron that rotates.

   The measure is 68ch to match `.page-head .container`, which inventory.css
   sets for the three prose pages. Mismatch that and the h1 and the accordion
   start at different left edges - the exact defect fixed on the financing page.
   ========================================================================== */

.faq-wrap {
  max-width: 68ch;
  margin-inline: auto;
  padding-bottom: 3rem;
}

.faq-list {
  display: grid;
  gap: .6rem;
}

/* ----------------------------------------------------------------------------
   THE ITEM
   -------------------------------------------------------------------------- */
.faq-item {
  border: 1px solid var(--color-border, #d9dde3);
  border-radius: .6rem;
  background: var(--color-bg, #fff);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.faq-item:hover { border-color: var(--color-border-strong, #b6bcc6); }

/* Open items carry a lime edge and a tinted head, so an answer you have
   already opened stays findable when several are expanded at once. */
.faq-item[open] {
  border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
  box-shadow: 0 1px 2px rgb(0 0 0 / .05);
}
.faq-item[open] .faq-item__q { background: var(--color-primary-soft, #f2f4fb); }

/* ----------------------------------------------------------------------------
   THE QUESTION (the <summary>)

   list-style plus the WebKit pseudo-element: both are needed, because Safari
   and older Chrome draw the triangle through ::-webkit-details-marker and
   ignore list-style entirely.
   -------------------------------------------------------------------------- */
.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem 1.1rem;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q:hover { background: var(--color-bg-alt, #f6f7f9); }

/* The h2 is the flex child that grows. font-size is set here because a heading
   inside a summary must not inherit the document h2 scale - at 1.6rem the
   questions competed with the page h1. */
.faq-item__q h2 {
  flex: 1 1 auto;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--color-primary);
}

.faq-item__chev {
  flex: none;
  color: var(--color-primary);
  transition: transform .18s ease;
}
.faq-item[open] .faq-item__chev { transform: rotate(180deg); }

/* Keyboard users get the same affordance the mouse does. The outline sits on
   the summary rather than the card so it tracks the focused control. */
.faq-item__q:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: -3px;
}

/* ----------------------------------------------------------------------------
   THE ANSWER

   Left padding matches the question's so the two align, and the answer is
   inset from the bottom rather than the card edge, which keeps the open card
   from looking bottom-heavy.
   -------------------------------------------------------------------------- */
.faq-item__a {
  padding: 0 1.1rem 1.05rem;
  border-top: 1px solid var(--color-border, #d9dde3);
}
.faq-item__a p {
  margin: .9rem 0 0;
  color: var(--color-text-muted, #5a626e);
  line-height: 1.65;
}

/* ----------------------------------------------------------------------------
   THE CLOSING CALL TO ACTION
   -------------------------------------------------------------------------- */
.faq-cta {
  margin-top: 2.25rem;
  padding: 1.5rem 1.25rem;
  border-radius: .6rem;
  background: var(--color-bg-alt, #f6f7f9);
  text-align: center;
}
.faq-cta__lead {
  margin: 0 0 .9rem;
  font-weight: 700;
  color: var(--color-primary);
}
.faq-cta__row {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
}
/* The second action is an outline button so the two do not read as equal
   weight: the form is the ask, the phone number is the shortcut. */
.faq-cta__call {
  background: transparent;
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}
.faq-cta__call:hover {
  background: var(--color-primary);
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .faq-item,
  .faq-item__chev { transition: none; }
}

@media (max-width: 480px) {
  .faq-item__q   { padding: .85rem .9rem; }
  .faq-item__q h2 { font-size: 1rem; }
  .faq-item__a   { padding: 0 .9rem .95rem; }
  .faq-cta__row .btn { width: 100%; }
}