/* ====================================================================
   EAA 309 Forms — accessible dark theme
   ====================================================================
   Designed to meet WCAG 2.1 AA across every generated form artefact:
     /forms/index.php           (hub)
     /forms/<id>.php            (standalone form)
     /forms/_handler/<id>.php   (post-submit landing — uses .form-section)
     /forms/thanks/<id>.html    (post-DOI confirm landing)

   Contrast math (relative luminance, WCAG formula):

                          L     vs page (0.013)  vs surface (0.054)
     text on dark        0.92      15.4:1             9.3:1   AAA
     text muted          0.62      10.6:1             6.4:1   AAA
     heading             1.00      16.7:1            10.0:1   AAA
     accent (links)      0.55       9.5:1             5.7:1   AAA
     border-strong       0.34       5.4:1             4.4:1   ✓ 3:1 non-text
     btn primary text    on orange (L 0.32) = 5.9:1           ✓ AA
     status-error        0.40       7.1:1                     ✓ AA
     status-ok           0.61      10.5:1                    AAA

   Other WCAG criteria addressed:
     - 2.4.7 Focus Visible  — 3px solid outline + 2px offset
     - 2.5.5 Touch target   — 48px minimum on inputs and buttons
     - 1.4.4 Resize text    — rem units throughout, 17px base
     - 1.4.12 Text spacing  — line-height 1.6 on body
     - 1.3.1 Info+Relations — fieldset/label semantics in markup
     - 2.3.3 prefers-reduced-motion respected (no transitions/transform)

   Light-mode utility classes that older code may still load are kept;
   dark-theme rules win via later cascade. ============================== */

:root {
  --bg-page:           #0a1a35;   /* deep navy — body */
  --bg-surface:        #1f3a6f;   /* mid navy — cards / form panel */
  --bg-surface-hover:  #2a4d8c;
  --bg-input:          #06122a;   /* deepest — input fill */
  --border-strong:     #7da3d9;   /* AA non-text border on surface */
  --border-focus:      #ffb066;   /* AA focus outline on any bg */
  --text-on-dark:      #f4f1ea;   /* cream — body text */
  --text-muted:        #c9d2e3;   /* muted — captions, footnotes */
  --text-heading:      #ffffff;
  --accent:            #ffb066;   /* lighter orange — links, accents */
  --accent-strong:     #e87722;   /* chapter orange — primary CTAs */
  --status-error:      #ff8080;
  --status-ok:         #7fe3a3;

  --btn-primary-bg:        var(--accent-strong);
  --btn-primary-bg-hover:  #f08a36;
  --btn-primary-text:      var(--bg-page);

  /* Backward-compat aliases — older selectors elsewhere may still use these. */
  --eaa-navy:        var(--bg-surface);
  --eaa-navy-deep:   var(--bg-page);
  --eaa-orange:      var(--accent-strong);
  --eaa-cream:       var(--text-on-dark);
}

/* ----- Skip link (visible on focus) ------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 9999;
  background: var(--accent-strong);
  color: var(--bg-page);
  padding: 0.6rem 1rem;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
}

/* ----- Section base ----------------------------------------------- */
.cid-formshubhead,
.cid-formshublist,
.cid-formpage,
.cid-thankshead,
.form-section {
  background-color: var(--bg-page);
  color: var(--text-on-dark);
  font-size: 1.0625rem;          /* 17px base for body */
  line-height: 1.6;
}

/* Padding so content clears the (sticky) Mobirise menu1 nav. */
.cid-formshubhead,
.cid-thankshead {
  padding: 7rem 0 3rem 0;
}
.cid-formshublist {
  padding: 3rem 0 5rem 0;
}
.cid-formpage,
.form-section {
  padding: 7rem 0 5rem 0;
}

/* ----- Headings on dark ------------------------------------------- */
.cid-formshubhead .mbr-section-title,
.cid-thankshead .mbr-section-title,
.cid-formpage h1,
.cid-formpage .mbr-section-title,
.cid-formpage h2,
.form-section h1,
.form-section .display-2 {
  color: var(--text-heading);
  line-height: 1.25;
}

/* Lead / body text sized for comfortable reading on dark. */
.cid-formshubhead .mbr-text,
.cid-thankshead .mbr-text,
.cid-formpage .mbr-text,
.form-section p,
.form-section .display-5 {
  color: var(--text-on-dark);
  font-size: 1.125rem;            /* 18px lead */
  line-height: 1.55;
}

/* ----- Hub list (cards — whole card is a click target) ------------
   "Block link" / "card link" pattern: only the title text is wrapped
   in <a> for semantic correctness, but a pseudo-element overlay on the
   anchor expands the click area to fill the whole card. The summary
   text gets a higher z-index so it remains text-selectable.
   Focus styles ride on the <a> directly so keyboard focus is correct. */
.forms-hub-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}
.forms-hub-item {
  position: relative;             /* anchor for the overlay */
  background: var(--bg-surface);
  border: 2px solid var(--border-strong);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.forms-hub-item:hover,
.forms-hub-item:focus-within {
  background: var(--bg-surface-hover);
  border-color: var(--accent);
  transform: translateY(-2px);
}
.forms-hub-item-title {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  line-height: 1.3;
}
.forms-hub-item-title a {
  color: var(--text-heading);
  text-decoration: none;
  outline: none;                  /* moved onto card for keyboard focus */
}
.forms-hub-item-title a::after {
  content: '';
  position: absolute;
  inset: 0;                       /* covers the whole .forms-hub-item */
  z-index: 1;
  border-radius: 10px;
}
.forms-hub-item-title a:hover,
.forms-hub-item-title a:focus {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
/* Keyboard focus ring drawn on the card (since the anchor's overlay
   covers it). Visible at 9.5:1 against the page bg. */
.forms-hub-item:focus-within {
  outline: 3px solid var(--border-focus);
  outline-offset: 3px;
}
.forms-hub-item-summary {
  position: relative;
  z-index: 2;                     /* above the anchor overlay so text is selectable */
  margin: 0;
  color: var(--text-on-dark);
  font-size: 1rem;
  line-height: 1.55;
}
.forms-hub-intro {
  color: var(--text-on-dark);
  font-size: 1.05rem;
  line-height: 1.55;
  margin-bottom: 1.5rem;
}
.forms-hub-footnote {
  margin-top: 2rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}
.forms-hub-footnote a {
  color: var(--accent);
}

/* ----- Form panel ------------------------------------------------- */
.brevo-form {
  max-width: 720px;
  margin: 0 auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 1.75rem 1.75rem 2rem;
}
.brevo-form-intro {
  margin-bottom: 1.5rem;
}
.brevo-form-title {
  color: var(--text-heading);
  font-size: 1.5rem;
  margin: 0 0 0.5rem;
}
.brevo-form-intro-body {
  color: var(--text-on-dark);
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0;
}

.brevo-form-body {
  display: grid;
  gap: 1.25rem;
}
.brevo-form-row {
  display: grid;
  gap: 0.4rem;
}
.brevo-form-label {
  color: var(--text-heading);
  font-weight: 600;
  font-size: 1rem;
}
.brevo-form-required {
  color: var(--accent);
  margin-left: 0.15rem;
}

/* ----- Inputs (48px min touch target via padding) ----------------- */
.brevo-form-input {
  width: 100%;
  min-height: 48px;
  padding: 0.85rem 1rem;
  background: var(--bg-input);
  border: 1.5px solid var(--border-strong);
  border-radius: 6px;
  color: var(--text-heading);
  font-size: 1.0625rem;
  font-family: inherit;
  line-height: 1.4;
}
.brevo-form-input::placeholder {
  color: var(--text-muted);
  opacity: 1;                     /* override Firefox default */
}
.brevo-form-input:focus,
.brevo-form-input:focus-visible {
  outline: 3px solid var(--border-focus);
  outline-offset: 2px;
  border-color: var(--border-focus);
  background: #08183a;
}
.brevo-form-input:disabled {
  opacity: 0.6;
}
.brevo-form-textarea {
  min-height: 7rem;
  resize: vertical;
}
select.brevo-form-input {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-on-dark) 50%),
    linear-gradient(135deg, var(--text-on-dark) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 13px) calc(50% - 3px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}
select.brevo-form-input option {
  background: var(--bg-input);
  color: var(--text-heading);
}

/* Honeypot — visually hidden, kept reachable. */
.brevo-form-honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ----- Consent checkbox ------------------------------------------- */
.brevo-form-consent {
  align-items: flex-start;
}
.brevo-form-checkbox-label {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-on-dark);
  cursor: pointer;
}
.brevo-form-checkbox-label input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin-top: 0.15rem;
  accent-color: var(--accent-strong);
  flex-shrink: 0;
}
.brevo-form-checkbox-label input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--border-focus);
  outline-offset: 2px;
}
.brevo-form-checkbox-label a {
  color: var(--accent);
}

/* ----- Submit button (48px target, AA-compliant orange/navy) ----- */
.brevo-form-actions {
  margin-top: 0.75rem;
}
.brevo-form-submit {
  min-height: 48px;
  min-width: 200px;
  padding: 0.85rem 1.5rem;
  background: var(--btn-primary-bg);
  border: 2px solid var(--btn-primary-bg);
  border-radius: 6px;
  color: var(--btn-primary-text);
  font-weight: 700;
  font-size: 1.0625rem;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease;
}
.brevo-form-submit:hover,
.brevo-form-submit:focus {
  background: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
}
.brevo-form-submit:focus-visible {
  outline: 3px solid var(--text-heading);
  outline-offset: 2px;
}
.brevo-form-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ----- Status region (aria-live) --------------------------------- */
.brevo-form-status {
  min-height: 1.5rem;
  font-size: 1rem;
  margin-top: 0.5rem;
}
.brevo-form-status[data-state="error"] { color: var(--status-error); }
.brevo-form-status[data-state="ok"]    { color: var(--status-ok); }

/* ----- Thanks-page buttons --------------------------------------- */
.cid-thankshead .btn-primary {
  min-height: 48px;
  min-width: 200px;
  padding: 0.85rem 1.5rem;
  background: var(--btn-primary-bg);
  border: 2px solid var(--btn-primary-bg);
  border-radius: 6px;
  color: var(--btn-primary-text);
  font-weight: 700;
}
.cid-thankshead .btn-primary:hover,
.cid-thankshead .btn-primary:focus {
  background: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-bg-hover);
}
.cid-thankshead .btn-outline-primary {
  min-height: 48px;
  min-width: 200px;
  padding: 0.85rem 1.5rem;
  background: transparent;
  border: 2px solid var(--text-heading);
  border-radius: 6px;
  color: var(--text-heading);
  font-weight: 700;
}
.cid-thankshead .btn-outline-primary:hover,
.cid-thankshead .btn-outline-primary:focus {
  background: var(--text-heading);
  color: var(--bg-page);
}
.cid-thankshead .btn-primary:focus-visible,
.cid-thankshead .btn-outline-primary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* ----- Generic in-section links ---------------------------------- */
.cid-formshubhead a,
.cid-formshublist a,
.cid-formpage a,
.cid-thankshead a,
.form-section a {
  color: var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}
.cid-formshubhead a:hover,
.cid-formshublist a:hover,
.cid-formpage a:hover,
.cid-thankshead a:hover,
.form-section a:hover,
.cid-formshubhead a:focus,
.cid-formshublist a:focus,
.cid-formpage a:focus,
.cid-thankshead a:focus,
.form-section a:focus {
  text-decoration-thickness: 3px;
}

/* ----- Reduced-motion respect (WCAG 2.3.3) ----------------------- */
@media (prefers-reduced-motion: reduce) {
  .forms-hub-item,
  .brevo-form-input,
  .brevo-form-submit,
  .cid-thankshead .btn-primary,
  .cid-thankshead .btn-outline-primary {
    transition: none;
  }
  .forms-hub-item:hover,
  .forms-hub-item:focus-within {
    transform: none;
  }
}

/* ----- Smaller viewports ----------------------------------------- */
@media (max-width: 768px) {
  .cid-formshubhead,
  .cid-thankshead,
  .cid-formpage,
  .form-section {
    padding-top: 6rem;
  }
  .brevo-form {
    padding: 1.25rem 1.25rem 1.5rem;
  }
  .brevo-form-submit {
    width: 100%;
  }
  .forms-hub-item-title {
    font-size: 1.15rem;
  }
}