/* ==========================================================================
   FAQ PAGE STYLES
   ==========================================================================
   Styles specific to faq.html: the search box + filter pill row,
   the accordion question/answer pattern, and the category sections that
   group them. The interactive behavior (opening answers, filtering by
   search or category) lives in js/faq.js — this file only handles what
   things LOOK like, not when they change. See js/faq.js for more on
   that division of labor.
   ========================================================================== */


/* ==========================================================================
   CONTROLS — search box + category filter pills
   ========================================================================== */

.faq-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-bottom: var(--space-4xl);
}

.faq-search-wrap {
  position: relative;
  max-width: 480px;
}

.faq-search-wrap .form-input {
  padding-left: var(--space-3xl); /* room for the icon */
}

/* A simple search icon drawn as an inline SVG, positioned inside the
   input's left padding. Using an inline SVG here (rather than an icon
   font or image file) keeps this page dependency-free — no external
   icon library needs to load just for one small icon. */
.faq-search-icon {
  position: absolute;
  left: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
  pointer-events: none; /* clicks pass through to the input beneath it */
}

.faq-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}


/* ==========================================================================
   CATEGORY SECTIONS
   ========================================================================== */

.faq-category {
  margin-bottom: var(--space-4xl);
  transition: opacity var(--duration-medium) var(--ease-smooth);
}

.faq-category.is-hidden {
  display: none;
}

.faq-category-title {
  font-size: var(--text-heading-sm);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}


/* ==========================================================================
   ACCORDION — the question/answer pattern
   ==========================================================================
   Structure: each .faq-item contains a <button class="faq-question"> and
   a .faq-answer panel. The button, not a div, is what's clickable —
   using a real <button> element means it's automatically keyboard-
   focusable and works with Enter/Space out of the box, which a clickable
   <div> would NOT give you for free.
   ========================================================================== */

.faq-item {
  border-bottom: 1px solid var(--color-border);
  transition: opacity var(--duration-medium) var(--ease-smooth);
}

.faq-item.is-hidden {
  display: none;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  width: 100%;
  padding-block: var(--space-lg);
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  font-weight: 600;
  color: var(--color-text-primary);
}

.faq-question-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-brand-blue);
  transition: transform var(--duration-medium) var(--ease-smooth);
}

/* Rotates the chevron 180° when the item is open. This is set by
   js/faq.js adding "is-open" to the parent .faq-item — the JS never
   touches a transform or rotation value directly, it only toggles this
   one class, and CSS handles the rest. Same pattern as the mobile nav
   hamburger in components.css. */
.faq-item.is-open .faq-question-icon {
  transform: rotate(180deg);
}

/* THE ANIMATED COLLAPSE/EXPAND TRICK:
   Animating from "height: 0" to "height: auto" is not something CSS
   can do directly — "auto" isn't a value transitions can animate
   between. The modern fix is animating a CSS GRID row instead of a
   height: a grid-template-rows value of "0fr" collapses the row to
   zero height, and "1fr" expands it to fit its content, and unlike
   plain height, THIS is animatable. The answer text sits inside a
   nested div with overflow:hidden so it doesn't visually spill out
   while the row is still collapsing. */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-medium) var(--ease-smooth);
}

.faq-item.is-open .faq-answer {
  grid-template-rows: 1fr;
}

.faq-answer-inner {
  overflow: hidden;
}

.faq-answer p {
  padding-bottom: var(--space-lg);
  font-size: var(--text-body-md);
  line-height: var(--leading-relaxed);
}

/* A small dashed-underline marker used inline within specific answers
   to flag that a detail is a placeholder, without needing the entire
   heavyweight .placeholder-note block inside a short FAQ answer. */
.answer-placeholder {
  border-bottom: 1.5px dashed var(--color-amber);
  color: var(--color-amber);
}


/* ==========================================================================
   EMPTY STATE — shown when a search matches nothing
   ========================================================================== */

.faq-empty-state {
  display: none; /* shown by JS only when there are zero visible results */
  text-align: center;
  padding-block: var(--space-4xl);
  color: var(--color-text-secondary);
}

.faq-empty-state.is-visible {
  display: block;
}


/* ==========================================================================
   STILL HAVE QUESTIONS — small connective CTA before the final CTA,
   pointing to the Contact page
   ========================================================================== */

.faq-contact-prompt {
  text-align: center;
  padding: var(--space-3xl);
  background: var(--color-sky-soft);
  border-radius: var(--radius-lg);
  margin-top: var(--space-4xl);
}

.faq-contact-prompt h3 {
  font-size: var(--text-heading-sm);
  margin-bottom: var(--space-sm);
}

.faq-contact-prompt p {
  margin-bottom: var(--space-xl);
}


/* ==========================================================================
   FAQ INTRO SECTION
   ==========================================================================
   BUG FIX: this section previously used class="about-section", a class
   only ever defined in about.css — which this page never loads. That
   meant the section's padding rhythm silently did nothing this whole
   time. Self-contained here instead, matching the exact fix already
   applied to the Contact page for the identical bug. Same value as
   about.css's version, so the visual output is unchanged.
   ========================================================================== */

.faq-intro-section {
  padding-block: var(--space-5xl);
}