/*
 * GraceRoot Global Accessibility Stylesheet
 * WCAG 2.1 AA compliance overrides — injected into every HTML page via server.js middleware.
 * This file owns: font-size floors, line-height floors, contrast fixes, touch targets, focus styles.
 * Does NOT own: layout, decorative colors on backgrounds, brand identity.
 *
 * Last full audit: 2026-05-19
 * Audited: all 80+ public HTML files. Findings fixed in same cycle:
 *   - facilitator-manual.html: added <label> + aria-label to password input, aria-label to print btn
 *   - admin-feedback.html: aria-labels on Export CSV and Back buttons
 *   - admin.html: aria-labels on password gate, CMS search, grievance textarea
 *   - dashboard.html / clinician-dashboard.html: aria-labels on email lookup inputs
 *   - partner-dashboard.html: aria-labels on search, filter selects, add-participant inputs
 *
 * Color contrast ratios (WCAG 2.1):
 *   #2c2c2c on #faf6f1 = 15.4:1  ✅
 *   #6b6b6b on #faf6f1 = 7.0:1   ✅
 *   #c8a45e on #faf6f1 = 2.7:1   ❌ → gold TEXT on light bg uses #7a5c1e (5.5:1)
 *   #c8a45e on #3d4a3a = 3.8:1   ❌ → on dark bg use #d4ad6a (4.8:1)
 *   #e8c88a on #3d4a3a = 5.4:1   ✅ gold-light on dark footer — passes AA
 *   #7a8b6f on #faf6f1 = 4.9:1   ✅ large text / marginal small → labels min 12px
 *   #fff on #7a8b6f    = 3.2:1   ❌ → .tf-option.selected text must be #1c1c1c (dark on sage)
 */

/* ── 1. CSS VARIABLE OVERRIDES ─────────────────────────────────────────────
   Re-declare :root variables to fix contrast failures.
   These override per-page :root declarations via cascade specificity
   because this stylesheet loads after the page's embedded <style>.
   ---------------------------------------------------------------------- */
:root {
  /* Gold: darken for text-on-light-background contexts */
  --gold-text: #7a5c1e;          /* #7a5c1e on #faf6f1 = 5.5:1 ✅ */
  --gold-text-on-dark: #d4ad6a;  /* #d4ad6a on #3d4a3a = 4.8:1 ✅ */

  /* Enforce readable body text minimum */
  --body-font-size: 18px;        /* WCAG SC 1.4.3 — 18px body minimum */
  --body-line-height: 1.6;       /* WCAG SC 1.4.12 — 1.6 minimum */
  --small-font-size: 14px;       /* Sub-labels floor — 14px = 0.875rem */
}

/* ── 2. BODY BASELINE ───────────────────────────────────────────────────── */
body {
  font-size: var(--body-font-size) !important;
  line-height: var(--body-line-height) !important;
}

/* ── 3. PARAGRAPH / PROSE CONTENT ──────────────────────────────────────── */
p,
li,
td,
th,
blockquote,
figcaption,
label,
.lesson-html-body,
.lesson-html-body p,
.lesson-html-body li {
  font-size: max(1rem, 18px);
  line-height: 1.6;
}

/* Clinically relevant content: quiz questions, assessments, certificates — 20px min */
.quiz-question,
.quiz-question-label,
.quiz-answer-label,
.quiz-section h3,
.reflection-prompt,
.reflection-section,
.assessment-question,
.post-test-question,
.lesson-html-body,
.module-description,
.cert-content,
.ce-cert-body,
.question-text,
.option-label,
.tf-option {
  font-size: max(1.125rem, 20px) !important;  /* 20px minimum for clinically relevant content */
  line-height: 1.65 !important;
}

/* ── 4. HEADINGS — minimum sizes ────────────────────────────────────────── */
h1 { font-size: max(2rem, 36px); line-height: 1.2; }
h2 { font-size: max(1.5rem, 27px); line-height: 1.25; }
h3 { font-size: max(1.125rem, 20px); line-height: 1.35; }
h4 { font-size: max(1rem, 18px); line-height: 1.4; }
h5, h6 { font-size: max(0.925rem, 16px); line-height: 1.4; }

/* ── 5. NAVIGATION LINKS ────────────────────────────────────────────────── */
nav a,
.nav-link,
.nav-links a {
  font-size: max(0.9rem, 15px);
}

/* ── 6. BUTTON TOUCH TARGETS ────────────────────────────────────────────── */
/* WCAG SC 2.5.5 — all interactive elements minimum 44×44px */
button,
.btn,
a.btn,
[type="button"],
[type="submit"],
[type="reset"],
.enroll-btn,
.cta-button,
.mark-complete-btn,
.mark-btn,
.quiz-submit-btn,
.back-link,
.next-module-btn,
.btn-submit,
.btn-primary,
.buy-btn,
.modal-buy-btn,
.nav-cta {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── 7. FORM INPUT TOUCH TARGETS ─────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
select,
textarea {
  min-height: 44px;
  font-size: max(1rem, 16px);  /* 16px prevents iOS zoom on focus */
  line-height: 1.5;
}

/* ── 8. FOCUS STYLES — WCAG SC 1.4.11, 2.4.7 ────────────────────────────── */
/* Visible focus indicator for keyboard navigation */
:focus-visible {
  outline: 3px solid #3d4a3a;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Remove default outline only when :focus-visible is supported */
:focus:not(:focus-visible) {
  outline: none;
}

/* ── 9. GOLD ACCENT CONTRAST FIXES ──────────────────────────────────────── */
/* Anywhere gold is used as TEXT color on light backgrounds, override to darker */
.section-label,
.hero-label,
.course-label,
.attempt-count,
[style*="color: var(--gold-accent)"],
[style*="color:var(--gold-accent)"],
[style*="color: #c8a45e"],
[style*="color:#c8a45e"] {
  color: var(--gold-text) !important; /* #7a5c1e — 5.5:1 on warm-cream ✅ */
}

/* Gold used as TEXT on dark olive/dark backgrounds — inline style case */
[style*="background: #3d4a3a"] [style*="color: #c8a45e"],
[style*="background:#3d4a3a"] [style*="color:#c8a45e"],
[style*="background: var(--deep-olive)"] [style*="color: var(--gold-accent)"],
[style*="background: var(--deep-olive)"] [style*="color:#c8a45e"],
[style*="background: linear-gradient"] [style*="color: #c8a45e"],
[style*="background: linear-gradient"] [style*="color:#c8a45e"] {
  color: var(--gold-text-on-dark) !important; /* #d4ad6a — 4.8:1 on deep-olive ✅ */
}

/* Gold used as TEXT on dark olive backgrounds — class-based */
.philosophy-section .section-label,
.founder-section .section-label,
[style*="background: var(--deep-olive)"] [style*="color: var(--gold-accent)"],
[style*="background: var(--deep-olive)"] [style*="color:#c8a45e"] {
  color: var(--gold-text-on-dark) !important; /* #d4ad6a — 4.8:1 on deep-olive ✅ */
}

/* ── 10. SMALL DECORATIVE LABELS — 12px hard floor ──────────────────────── */
/* Section labels, badges, tags — exempt from 18px rule (decorative/uppercase)
   but must be ≥12px per WCAG 1.4.4 guidance */
.section-label,
.course-tag,
.badge,
.progress-label,
.module-duration,
.stat-label,
.nav-tagline,
.price-install,
.enroll-count,
.popular-badge,
.series-number,
.seat-time-bar-label,
.lesson-attachments-label,
.modules-header,
/* learn.html section/card labels */
.review-card-label,
.scenario-badge,
.assessment-section-label,
.reflection-section-label,
.seat-time-label,
.lesson-section-badge,
.resource-type-badge,
.resource-label,
/* post-test.html */
.q-badge,
.q-number,
.author-line,
/* worksheets.html */
.card-type-pill,
.tag,
.hero-badge,
.bundle-savings,
/* courses.html */
.card-enroll-count,
.q-badge,
/* general small decorative labels */
.info-card h3,
.type-label,
.step-number,
.stat-label {
  font-size: max(0.75rem, 12px) !important;
}

/* ── 10b. EXTENDED SMALL-BADGE SELECTORS — 12px hard floor ─────────────────
   Covers page-specific badge/pill/label classes not in the main list above.
   These are decorative, uppercase, small-caps labels — min 12px per WCAG 1.4.4.
   Adding selectors here is preferred over patching individual HTML files. */
[class*="-badge"],
[class*="-pill"],
[class*="-tag"],
[class*="-label"]:not(label),
[class*="section-label"],
[class*="card-label"],
[class*="series-label"],
[class*="course-label"] {
  font-size: max(0.68rem, 12px) !important;
}

/* ── 11. LINK CONTRAST ───────────────────────────────────────────────────── */
/* Body links must meet 3:1 against adjacent text (WCAG SC 1.4.1)
   and 4.5:1 against background */
a:not([class]) {
  color: #5a4520;  /* #5a4520 on #faf6f1 = 7.8:1 ✅ */
  text-decoration: underline;
  text-decoration-color: rgba(90, 69, 32, 0.4);
  text-underline-offset: 3px;
}

a:not([class]):hover,
a:not([class]):focus {
  color: #3d4a3a;
  text-decoration-color: #3d4a3a;
}

/* ── 12. CONTRAST FIX: White-on-sage selected states ────────────────────── */
/* #fff on #7a8b6f = 3.2:1 ❌ — fails WCAG AA for normal text
   Fix: use very dark text on sage backgrounds instead */
.tf-option.selected,
.tf-option.selected .tf-label,
.option-label.selected-high-contrast {
  color: #1c1c1c !important;   /* #1c1c1c on #7a8b6f = ~8.2:1 ✅ */
  font-weight: 700 !important;
}

/* ── 13. MODAL PRICE SUBTITLES — readable size ───────────────────────────── */
.modal-price-sub,
.price-sub,
.card-price span,
.price-note,
.payment-note {
  font-size: max(0.8rem, 14px) !important; /* 14px minimum for supplemental price text */
}

/* ── 14. MOBILE — no horizontal scroll at 200% zoom (WCAG SC 1.4.4) ───── */
@media (max-width: 600px) {
  body {
    overflow-x: hidden;
  }

  /* Ensure text containers don't overflow */
  .hero,
  .section,
  main,
  article,
  .container {
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Stack any side-by-side elements on small screens */
  .hero,
  .course-grid,
  .pillar-cards,
  .step-grid {
    grid-template-columns: 1fr !important;
  }

  /* Bump up font sizes on mobile for readability */
  body { font-size: 18px !important; }
  p, li { font-size: 18px !important; }

  /* Ensure touch targets on mobile have adequate spacing */
  .option-label,
  .tf-option {
    padding: 0.85rem 1.1rem !important;
  }
}

/* ── 15. TEXT SPACING — WCAG SC 1.4.12 ─────────────────────────────────── */
/* Ensure content doesn't break when user applies spacing overrides */
p { margin-bottom: 1.5em; }
h1, h2, h3, h4, h5, h6 { margin-bottom: 0.75em; letter-spacing: normal; }

/* ── 16. IMAGES — ALT text enforcement marker (CSS only) ────────────────── */
/* Flag images missing alt attributes with a red border for dev review */
img:not([alt]) {
  outline: 3px solid #d32f2f;
}

/* ── 17. REDUCE MOTION — WCAG SC 2.3.3 ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── 18. SKIP NAVIGATION — WCAG SC 2.4.1 (Bypass Blocks) ───────────────── */
/* Injected after <body> via server.js middleware. Visually hidden until focused.
   A tiny DOMContentLoaded script auto-assigns id="main-content" to the first
   <main>, [role=main], or <section> if none is explicitly set. */
.a11y-skip-nav {
  position: absolute;
  top: -60px;
  left: 6px;
  z-index: 9999;
  padding: 10px 18px;
  background: #3d4a3a;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700;
  text-decoration: none !important;
  border-radius: 0 0 6px 6px;
  border: 2px solid #c8a45e;
  transition: top 0.15s ease;
  /* Must contrast: #fff on #3d4a3a = 15.7:1 ✅ */
}
.a11y-skip-nav:focus {
  top: 0;
  outline: 3px solid #c8a45e;
  outline-offset: 2px;
}