/* ═══════════════════════════════════════
   FAQ — design taken from the Node site (views/pages/faq.ejs, the
   content-pages.css "FAQ" block and the main.css tokens/base rules it
   relies on). Every rule is scoped to main.faq-page so the legacy
   common.css .faq-item/.faq-question/.faq-answer accordions used on other
   pages are untouched.
   ═══════════════════════════════════════ */

/* stylesheet.css sets overflow-x:hidden on html/body, which stops the
   sidebar card from sticking. clip keeps the no-horizontal-scroll guard
   without creating a scroll container (this page only). */
html:has(main.faq-page), body:has(main.faq-page) { overflow-x: clip; }

/* ── Tokens + base (Node main.css) ── */
.faq-page {
  --white: #fff; --bg: #f9f9f9; --ink: #2a2a2a; --muted: #606060; --border: #e8e8e8;
  --green-800: #008944; --green-900: #006432; --green-1000: #003f1f;
  --green: var(--green-800); --green-hover: var(--green-900); --green-active: var(--green-1000);
  --max: 1180px; --nav-h: 78px;
  --r-lg: 20px;
  --text-h1: 34px; --text-h2: 28px; --text-h2-lh: 42px; --text-h4: 20px; --text-h4-lh: 30px;
  --text-body-lg: 18px; --text-body: 16px; --text-body-lh: 20px;
  --text-sm: 14px; --text-sm-lh: 18px;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: var(--text-body);
  line-height: var(--text-body-lh);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  display: block;
  padding: 56px 0 80px;
}
.faq-page *, .faq-page *::before, .faq-page *::after { box-sizing: border-box; margin: 0; padding: 0; }
.faq-page h1, .faq-page h2, .faq-page h3 { text-transform: capitalize; color: var(--ink); font-family: inherit; }
.faq-page a { color: inherit; text-decoration: none; }
.faq-page .wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ── Button (Node .btn + .btn-cta) ── */
.faq-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  min-height: 54px;
  padding: 0 24px;
  border-radius: 10px;
  font-family: inherit;
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: var(--text-sm-lh);
  border: 2px solid transparent;
  transition: background .22s, border-color .22s, transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s;
  white-space: nowrap;
}
.faq-page .faq-sidebar-btn { background: var(--green); color: #fff !important; border-color: var(--green); box-shadow: 0 6px 24px rgba(0, 137, 68, .28); }
.faq-page .faq-sidebar-btn:hover { background: var(--green-hover); border-color: var(--green-hover); transform: translateY(-2px); box-shadow: 0 10px 32px rgba(0, 137, 68, .36); }
.faq-page .faq-sidebar-btn:active { background: var(--green-active); border-color: var(--green-active); transform: translateY(0); box-shadow: 0 4px 12px rgba(0, 137, 68, .20); }

/* ── content-pages.css: FAQ ── */
.faq-page .faq-header { margin-bottom: 40px; }

.faq-page .faq-header h1 {
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: 1.2;
}

.faq-page .faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}

@media (min-width: 900px) {
  .faq-page .faq-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 48px;
  }
}

.faq-page .faq-category { margin-bottom: 36px; }

.faq-page .faq-category h2 {
  font-size: var(--text-h2);
  line-height: var(--text-h2-lh);
  font-weight: 700;
  margin-bottom: 16px;
}

/* Reset the legacy common.css card look (border box, padding, radius) */
.faq-page .faq-item {
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 0;
}

.faq-page .faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  background: none;
  border: none;
  text-align: left;
  font: inherit;
  font-size: var(--text-body-lg);
  line-height: normal;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: color .2s;
}

.faq-page .faq-question:hover { color: var(--green); }
.faq-page .faq-question:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.faq-page .faq-icon {
  flex-shrink: 0;
  transform: none;
  transition: transform 0.25s;
}

.faq-page .faq-item.is-open .faq-icon { transform: rotate(45deg); }

.faq-page .faq-answer {
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* Fallback when JS has not set an exact height yet */
.faq-page .faq-item.is-open .faq-answer { max-height: 400px; }

/* CMS answers may be plain text or HTML (p, lists, links, media) */
.faq-page .faq-answer-body {
  padding: 0 0 18px;
  font-size: var(--text-body-lg);
  line-height: 1.65;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.faq-page .faq-answer-body p { font-size: inherit; line-height: inherit; color: inherit; font-weight: 400; }
.faq-page .faq-answer-body p + p,
.faq-page .faq-answer-body p + ul,
.faq-page .faq-answer-body p + ol,
.faq-page .faq-answer-body ul + p,
.faq-page .faq-answer-body ol + p { margin-top: 12px; }
.faq-page .faq-answer-body ul,
.faq-page .faq-answer-body ol { padding-left: 24px; }
.faq-page .faq-answer-body ul { list-style: disc; }
.faq-page .faq-answer-body ol { list-style: decimal; }
.faq-page .faq-answer-body li { margin-bottom: 6px; }
.faq-page .faq-answer-body a { color: var(--green); text-decoration: underline; }
.faq-page .faq-answer-body img { max-width: 100%; height: auto; }
.faq-page .faq-answer-body video,
.faq-page .faq-answer-body iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

.faq-page .faq-sidebar-card {
  padding: 28px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: calc(var(--nav-h) + 24px);
}

.faq-page .faq-sidebar-card h3 {
  font-size: var(--text-h4);
  line-height: var(--text-h4-lh);
  font-weight: 700;
  margin-bottom: 10px;
}

.faq-page .faq-sidebar-card p {
  color: var(--muted);
  font-size: var(--text-body);
  line-height: var(--text-body-lh);
  margin-bottom: 20px;
}

.faq-page .faq-sidebar-card .btn { width: 100%; }