/* Base / "none" theme defaults */
:root {
  --faq-font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --faq-font-heading: var(--faq-font-body);
  --faq-color-bg: #ffffff;
  --faq-color-text: #1b1b1b;
  --faq-color-muted: #666666;
  --faq-color-primary: #333333;
  --faq-color-accent: #333333;
  --faq-color-surface: #f5f5f5;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--faq-font-body);
  color: var(--faq-color-text);
  background: var(--faq-color-bg);
}

/* Theme switcher - deliberately neutral in every theme, always the same look.
   Hidden by default: app.js only reveals it when window.FAQ_ENVIRONMENT === "dev".
   Fails closed if JS doesn't run for any reason - the control simply stays hidden
   rather than risk showing dev-only tooling to real visitors. */
.theme-switcher {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: #eeeeee;
  border-bottom: 1px solid #cccccc;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 0.85rem;
}

.theme-switcher.is-visible {
  display: flex;
}

.theme-switcher select {
  font-size: 0.85rem;
  padding: 0.2rem 0.4rem;
}

/* Hide every theme block by default; show only the one matching data-theme */
.theme-block {
  display: none;
}

html[data-theme="vba"] .theme-block[data-for="vba"],
html[data-theme="gdit"] .theme-block[data-for="gdit"],
html[data-theme="none"] .theme-block[data-for="none"] {
  display: block;
}

.faq-main {
  min-height: 50vh;
}

.faq-content {
  max-width: 60rem;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

.faq-placeholder {
  text-align: center;
  color: var(--faq-color-muted);
  padding: 3rem 1rem;
}

.faq-placeholder h1 {
  font-family: var(--faq-font-heading);
  font-size: 1.5rem;
  color: var(--faq-color-text);
  margin-bottom: 0.5rem;
}

/* ---------- Plain ("none") header/footer ---------- */
.plain-header {
  background: var(--faq-color-surface);
  border-bottom: 1px solid #dddddd;
}

.plain-header-inner,
.plain-footer-inner {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1rem 1.5rem;
}

.plain-title {
  font-weight: 600;
  font-size: 1.1rem;
}

.plain-footer {
  border-top: 1px solid #dddddd;
  color: var(--faq-color-muted);
  font-size: 0.85rem;
}

/* ---------- VBA-style theme ---------- */
/* Colors/typography pulled from VA.gov's own published stylesheet: navy #162e51,
   link blue #005ea2, crisis red #8b0a03, Source Sans Pro + Bitter. Structure
   (trust banner, header, crisis-line footer bar) is a styled homage, not a copy of
   VA.gov's actual markup, logo, or seal. */
html[data-theme="vba"] {
  --faq-font-body: "Source Sans Pro", Arial, sans-serif;
  --faq-font-heading: "Bitter", Georgia, serif;
  --faq-color-bg: #ffffff;
  --faq-color-text: #1b1b1b;
  --faq-color-muted: #4b4b4b;
  --faq-color-primary: #162e51;
  --faq-color-accent: #005ea2;
  --faq-color-alert: #8b0a03;
  --faq-color-surface: #f0f0f0;
}

.vba-trust-banner {
  background: #e3e3e3;
  color: #1b1b1b;
  font-size: 0.8rem;
  text-align: center;
  padding: 0.3rem 1rem;
}

.vba-header {
  background: var(--faq-color-primary);
  color: #ffffff;
}

.vba-header-inner {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.vba-logo-img {
  height: 2.5rem;
  width: auto;
}

.vba-seal-img {
  height: 3.5rem;
  width: auto;
  flex-shrink: 0;
}

.vba-title {
  font-family: var(--faq-font-heading);
  font-weight: 700;
  font-size: 1.2rem;
}

html[data-theme="vba"] .faq-content a {
  color: var(--faq-color-accent);
}

.vba-footer {
  background: var(--faq-color-surface);
  border-top: 3px solid var(--faq-color-primary);
}

.vba-footer-inner {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  font-size: 0.85rem;
  color: #333333;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.vba-crisis {
  color: var(--faq-color-alert);
  font-weight: 600;
}

/* ---------- GDIT-style theme ---------- */
/* Colors pulled from gdit.com's own published stylesheet: dark navy/charcoal
   #0c0f19 / #1b242c, orange accent #ffa51f, light gray #f5f8fa. Font is a fallback
   for VisueltPro (GDIT's actual licensed font, not freely bundleable here).
   Structure is a styled homage, not a copy of gdit.com's actual markup or logo. */
html[data-theme="gdit"] {
  --faq-font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --faq-font-heading: var(--faq-font-body);
  --faq-color-bg: #ffffff;
  --faq-color-text: #474a4c;
  --faq-color-muted: #6c757d;
  --faq-color-primary: #0c0f19;
  --faq-color-accent: #ffa51f;
  --faq-color-surface: #f5f8fa;
}

.gdit-header {
  background: var(--faq-color-primary);
  color: #ffffff;
  border-bottom: 3px solid var(--faq-color-accent);
}

.gdit-header-inner {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.gdit-logo-svg {
  width: 9.5rem;
  height: auto;
  flex-shrink: 0;
}

.gdit-logo-svg path {
  fill: #ffffff;
}

.gdit-tagline {
  font-size: 1rem;
  color: #ffffff;
}

html[data-theme="gdit"] .faq-content a {
  color: #0c0f19;
  border-bottom: 2px solid var(--faq-color-accent);
  text-decoration: none;
}

.gdit-footer {
  background: var(--faq-color-surface);
  border-top: 1px solid #d7dadc;
}

.gdit-footer-inner {
  max-width: 60rem;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  font-size: 0.85rem;
  color: var(--faq-color-text);
}