/* ===========================================================================
   MAGI brand layer — navy palette
   ---------------------------------------------------------------------------
   styles.css was authored around a teal/green palette. This file re-points the
   brand to the navy family used by the MAGI association mark (which is navy +
   cyan, not green), so every page reads as one brand.

   LOAD ORDER: this must be the LAST stylesheet on the page. script.js injects
   generated-backgrounds.css and friends at runtime and deliberately inserts
   them *before* this file (see addStylesheet there) — otherwise their older
   teal values would win.

   Because it loads last, this file must not set anything those generated
   sheets are responsible for. In particular it must not touch the `background`
   shorthand on .hero / .page-hero: those carry the sub-page header photography,
   and a shorthand here would silently erase it.
   =========================================================================== */

:root {
  /* Core tokens (overriding styles.css) */
  --ink: #1a2233;   /* body text                                   */
  --deep: #1c2b4a;  /* primary navy — buttons, headers, dark bands  */
  --teal: #1f5fa0;  /* accent blue — 6.0:1 on white, safe for the
                       11px kickers and labels that use it          */
  --mint: #dde6f2;
  --pale: #f4f6f9;
  --line: #d5dae3;
  --muted: #5b6b8a; /* 4.6:1 on white                               */

  /* Brand extensions used by the rules below and by lp.css */
  --navy-deep: #14213d; /* footer / darkest band                    */
  --navy-soft: #3c4a63; /* long-form prose                          */
  --navy-tint: #e8edf5; /* numerals, decorative accents             */
  --navy-pale: #f7f9fc;
  --cyan: #00a5c8;      /* logo cyan — decorative use only, never
                           small text (2.6:1 on white)              */
}

/* --- Action icons --------------------------------------------------------
   script.js swaps the "→" in .header-apply / .nav-login / .nav-entry /
   .simple-login for an inline SVG. Sizing lives in generated-backgrounds.css
   (it varies per context); only the paint is restated here so the brand layer
   still renders them if that file is ever dropped. */
.action-icon svg {
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* styles.css collapses .header-apply to a 48px square on phones with
   `.header-apply span{display:none}` — written when the arrow was a <b>. The
   icon swap turned that arrow into a <span class="action-icon">, so the rule
   started hiding the button's only remaining content, leaving an empty navy
   square. Keep the label hidden, bring the icon back. */
@media (max-width: 680px) {
  .header-apply .action-icon { display: grid; }
}

/* --- Decorative numerals (steps, syllabus, detail lists) ------------------ */
.steps > li > b,
.number-list b,
.syllabus-list b,
.detail-steps > li > b { color: #9fadc6; }

.mini-steps b { background: var(--pale); color: var(--deep); }

/* --- Light-on-dark accents ----------------------------------------------- */
.page-cta .en { color: #9fc0e8; }

/* --- Dark bands ----------------------------------------------------------- */
.footer,
.mini-footer { background: var(--navy-deep); }

.footer-bottom,
.footer-logo small,
.mini-footer small { color: #9fabc2; }

/* --- Prose ---------------------------------------------------------------- */
.prose p,
.legal p,
.legal li,
.news-detail-item p { color: var(--navy-soft); }

/* --- Chrome --------------------------------------------------------------- */
.header.scrolled { box-shadow: 0 6px 30px rgba(28, 43, 74, .07); }
.button:hover { box-shadow: 0 12px 28px rgba(28, 43, 74, .16); }
.header .nav { background: var(--navy-pale); box-shadow: -30px 0 80px rgba(20, 33, 61, .2); }
.header .nav > a:not(.nav-login):not(.nav-entry):before { color: #8ea3c4; }
.nav-overlay { background: rgba(14, 24, 43, .48); }

/* --- Forms and wizard ----------------------------------------------------- */
.entry-form input:not([type=checkbox]),
.entry-form select,
.entry-form textarea { border-color: #c2cbdb; }

.form-progress b { background: var(--mint); }
.form-progress li.complete b { background: var(--teal); }
.form-progress li.complete span { color: var(--navy-soft); }

.wizard-heading { border-bottom-color: var(--line); }
.wizard-heading small { color: var(--teal); }
.wizard-heading h3 { color: var(--deep); }
.wizard-heading p { color: var(--navy-soft); }
.wizard-controls { border-top-color: var(--line); }
.wizard-picker-label { color: var(--deep); }
.wizard-review { border-color: var(--line); }
.wizard-review div { border-bottom-color: var(--line); }
.wizard-review dt { color: var(--deep); }
.wizard-review dd { color: var(--ink); }
.wizard-panel input[type=file] { background: var(--navy-pale); }
.wizard-panel input:focus-visible,
.wizard-panel select:focus-visible,
.wizard-back:focus-visible,
.wizard-next:focus-visible { outline-color: rgba(31, 95, 160, .3); }

.email-verification-actions { background: var(--navy-pale); border-color: #c9d6e8; }
.email-verification-actions [data-verification-status] { color: var(--navy-soft); }

.payment-status { background: var(--navy-pale); color: var(--deep); }
.payment-status[data-state=paid] { border-color: var(--deep); background: var(--pale); }

@media (max-width: 680px) {
  .wizard-controls { box-shadow: 0 -8px 24px rgba(20, 33, 61, .08); }
}

@media (prefers-reduced-motion: reduce) {
  .action-icon { transition: none; }
}