/* ==========================================================================
   Athena Peptides Education — light content theme
   ==========================================================================

   The site was built dark: a deep-navy page with navy cards and snow text.
   This sheet flips the *content* to a white page with dark navy text, while
   the chrome that reads as brand furniture — the fixed nav bar, the drawer,
   the dropdown panels and the footer — deliberately stays dark navy.

   HOW IT WORKS
   ------------
   Every page carries its own inline <style> block; there is no build step and
   no shared stylesheet to edit. Rather than hand-editing 41 duplicated style
   blocks, this sheet loads last and re-points the brand custom properties the
   pages already use, so one declaration moves hundreds of rules at once.

   Two naming conventions exist for the same palette — the long form
   (--deep-navy, --navy-card, --snow, --athena-teal, --blaze-orange) on the
   older pages and a compact form (--dn, --nc, --sn, --teal, --orange) on the
   newer ones. Both are re-pointed together throughout.

   WHICH VARIABLES CAN BE FLIPPED, AND WHY
   ---------------------------------------
   --snow / --snow-60 / --snow-30  (--sn / --sn6 / --sn3)
       Only ever used as a text colour, never as a background, so they can be
       re-pointed straight to dark ink.

   --navy-card  (--nc)
       Only ever used as a surface, never as a text colour, so it can be
       re-pointed straight to a light wash. The four places that need to stay
       dark (the drop-down panel, the open drawer, the footer, table headers)
       get the dark value handed back to them below.

   --deep-navy  (--dn)
       NOT flipped. It is the page background, but it is also the text colour
       sitting on top of every orange and teal fill — 145 of those. Flipping
       it would turn every button label invisible. The eleven selectors that
       use it as a surface are converted individually instead.

   --athena-teal / --blaze-orange  (--teal / --orange)
       Text usage dominates (339 teal, 302 orange), so both are re-pointed to
       accessible ink values for white. The handful of selectors that use them
       as a fill get the bright brand value handed back, so buttons, chips and
       progress bars keep the exact orange and teal they have today.

   Contrast, ink on #FFFFFF (WCAG AA needs 4.5:1 for body text):
       #12263F  ink        14.6:1      #40566F  secondary   7.5:1
       #0F7490  teal ink    4.9:1      #B4530C  orange ink  5.0:1
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Palette
   -------------------------------------------------------------------------- */
:root {
  /* Light-theme tokens, used by the rules further down. */
  --apx-page: #FFFFFF;
  --apx-wash: #F2F7FC;
  --apx-card: #FFFFFF;
  --apx-ink: #12263F;
  --apx-ink-2: #40566F;
  /* Secondary text. Measured rather than picked: the lighter #6B7C92 it started
     as reached only 4.27:1 on white and 4.03:1 on the zebra row, both short of
     AA for the small type it is used on. */
  --apx-ink-3: #627286;
  --apx-line: #D9E4F0;
  --apx-line-2: #C3D4E5;
  --apx-teal-ink: #0F7490;
  --apx-orange-ink: #B4530C;

  /* Brand values kept verbatim for fills and for the dark chrome. */
  --apx-brand-navy: #0C1927;
  --apx-brand-navy-card: #152A42;
  --apx-brand-teal: #2CB5D6;
  --apx-brand-orange: #F58232;
  --apx-brand-snow: #EEF2F7;

  /* --- re-pointed page variables --------------------------------------- */
  --snow: var(--apx-ink);
  --snow-60: var(--apx-ink-2);
  --snow-30: var(--apx-ink-3);
  --sn: var(--apx-ink);
  --sn6: var(--apx-ink-2);
  --sn3: var(--apx-ink-3);

  --navy-card: var(--apx-wash);
  --nc: var(--apx-wash);
  --navy-lighter: #E7EEF6;

  --athena-teal: var(--apx-teal-ink);
  --teal: var(--apx-teal-ink);
  --blaze-orange: var(--apx-orange-ink);
  --orange: var(--apx-orange-ink);

  /* Tints. On navy these were faint glows; on white the same alpha would be
     invisible, so they are deepened enough to read as a wash and as a rule. */
  --teal-glow: rgba(15, 116, 144, .10);
  --tg: rgba(15, 116, 144, .10);
  --orange-glow: rgba(245, 130, 50, .10);
  --og: rgba(245, 130, 50, .10);

  /* Status colours darkened for white. Each of these is used as text sitting on
     its own 8-10% tint of itself, so the background is never quite white and
     the value has to clear 4.5:1 against the tint, not against the page. */
  --green-ok: #15754A;
  --red-alert: #B43628;
  --yellow-caution: #945F00;
  --grn: #15754A;
  --red: #B43628;
}

/* --------------------------------------------------------------------------
   2. Page surface
   -------------------------------------------------------------------------- */
body {
  background: var(--apx-page);
  color: var(--apx-ink);
}

/* Sections that used the deep navy directly as a band. */
.edu,
.pop-card,
.quiz-section,
.safety-lead,
.stat-card,
.trend-card,
.math {
  background: var(--apx-wash);
  color: var(--apx-ink);
  border: 1px solid var(--apx-line);
}

.edu p,
.edu-card p,
.trend-card p,
.math {
  color: var(--apx-ink-2);
}

/* Half-opaque navy panels inside quiz cards. */
.cq-opt,
.q-opt,
.quiz-option {
  background: var(--apx-card);
  border-color: var(--apx-line-2);
  color: var(--apx-ink);
}

.cq-opt:hover,
.q-opt:hover,
.quiz-option:hover {
  background: var(--apx-wash);
}

/* The radial brand glows were tuned for a dark page; on white they turn the
   corner of every hero grey. Warmed and lightened so they still tint. */
.compound-hero::before,
.hero::before,
section::before {
  opacity: .55;
}

/* --------------------------------------------------------------------------
   3. Cards
   Card and section both resolved to --navy-card before, which is now a single
   light wash — so cards are lifted back to white and given a real border, or
   they would vanish into the section they sit in.
   -------------------------------------------------------------------------- */
.compound-card,
.edu-card,
.lead-box,
.mechanism-card,
.modal,
.q-card,
.quiz-box,
.results-panel,
.sm-card {
  background: var(--apx-card);
  border: 1px solid var(--apx-line);
  box-shadow: 0 1px 2px rgba(18, 38, 63, .04), 0 8px 24px rgba(18, 38, 63, .05);
}

.compound-card:hover,
.edu-card:hover,
.sm-card:hover {
  border-color: var(--apx-teal-ink);
  box-shadow: 0 2px 4px rgba(18, 38, 63, .06), 0 14px 34px rgba(18, 38, 63, .10);
}

/* Bands that alternate against the white page. */
.about,
.compound-quiz,
.edu-alt,
.faq,
.popular,
.ref-section,
.safety-gate {
  background: var(--apx-wash);
  border-top: 1px solid var(--apx-line);
  border-bottom: 1px solid var(--apx-line);
}

/* --------------------------------------------------------------------------
   4. Accent fills
   The brand orange and teal stay exactly as they are wherever they are a
   fill; only their *text* use was re-pointed to darker ink above.
   -------------------------------------------------------------------------- */
/* .btn-p is dosing.html's own name for the primary button; without it here that
   one call to action kept white-on-orange at 2.59:1 while every other primary
   button on the site had moved to navy-on-orange at 6.86:1. */
.btn-primary,
.btn-p,
.cc-learn,
.cq-bar.active,
.cta-nav,
.nav-cta,
a.cta-nav,
.quiz-progress-bar.done {
  background: var(--apx-brand-orange);
  color: var(--apx-brand-navy);
}

.btn-primary:hover,
.cta-nav:hover,
.nav-cta:hover,
a.cta-nav:hover {
  background: #E0741F;
  color: var(--apx-brand-navy);
}

.cq-opt.selected,
.cq-opt-dot,
.quiz-option.selected,
.quiz-option-marker,
.modal-safety input[type="checkbox"]:checked,
.safety-check input[type="checkbox"]:checked {
  background: var(--apx-brand-orange);
  border-color: var(--apx-brand-orange);
}

.cq-opt.selected,
.quiz-option.selected {
  background: rgba(245, 130, 50, .12);
  color: var(--apx-ink);
}

/* Teal fills. Navy on the darkened teal is too close a pair, so these read
   white instead — the only place the fill treatment changes at all. */
.cat-btn:hover,
.cat-btn.active,
.quiz-compound-tag:hover {
  background: var(--apx-teal-ink);
  color: #FFFFFF;
  border-color: var(--apx-teal-ink);
}

.cq-bar.done,
.quiz-progress-bar.active {
  background: var(--apx-teal-ink);
}

/* Outline buttons inverted to a dark fill on hover, which still works. */
.btn-outline,
.btn-o {
  border-color: var(--apx-line-2);
}

.btn-outline:hover,
.btn-o:hover {
  background: var(--apx-brand-navy);
  color: var(--apx-brand-snow);
  border-color: var(--apx-brand-navy);
}

/* --------------------------------------------------------------------------
   5. Form fields
   -------------------------------------------------------------------------- */
.lead-form input,
.modal-form input,
.result-email-form input,
.lead-form textarea,
.modal-form textarea,
.lead-form select,
.modal-form select {
  background: var(--apx-card);
  color: var(--apx-ink);
  border: 1px solid var(--apx-line-2);
}

.lead-form input::placeholder,
.modal-form input::placeholder,
.result-email-form input::placeholder {
  color: var(--apx-ink-3);
}

.lead-form input:focus,
.modal-form input:focus,
.result-email-form input:focus {
  border-color: var(--apx-teal-ink);
  outline: 2px solid rgba(15, 116, 144, .18);
  outline-offset: 0;
}

/* MailerLite embeds render into their own containers; keep their surface
   white and their text dark without touching any of their own markup. */
.ml-form-embedContainer,
.ml-form-embedWrapper,
.ml-form-embedBody {
  background: transparent !important;
}

/* --------------------------------------------------------------------------
   6. Dark chrome — handed the original palette back
   Custom properties resolve on the element that uses them, so re-declaring
   the dark values on these roots restores the whole subtree at once.
   -------------------------------------------------------------------------- */
.nav,
.nav-dd-menu,
.apx-dd-menu,
.nav-links.open,
.nk.open,
.nav-right.open,
.apx-navrow.open,
.modal-overlay,
footer {
  --snow: var(--apx-brand-snow);
  --snow-60: rgba(238, 242, 247, .6);
  --snow-30: rgba(238, 242, 247, .3);
  --sn: var(--apx-brand-snow);
  --sn6: rgba(238, 242, 247, .6);
  --sn3: rgba(238, 242, 247, .3);
  --navy-card: var(--apx-brand-navy-card);
  --nc: var(--apx-brand-navy-card);
  --athena-teal: var(--apx-brand-teal);
  --teal: var(--apx-brand-teal);
  --blaze-orange: var(--apx-brand-orange);
  --orange: var(--apx-brand-orange);
  --teal-glow: rgba(44, 181, 214, .15);
  --tg: rgba(44, 181, 214, .15);
}

.nav {
  background: rgba(12, 25, 39, .94);
  border-bottom: 1px solid rgba(44, 181, 214, .12);
}

footer {
  background: var(--apx-brand-navy-card);
  color: var(--apx-brand-snow);
}

/* The modal backdrop keeps its scrim; only the dialog inside it is light. */
.modal-overlay {
  background: rgba(12, 25, 39, .72);
}

.modal {
  --snow: var(--apx-ink);
  --snow-60: var(--apx-ink-2);
  --snow-30: var(--apx-ink-3);
  --sn: var(--apx-ink);
  --sn6: var(--apx-ink-2);
  --sn3: var(--apx-ink-3);
  --navy-card: var(--apx-wash);
  --nc: var(--apx-wash);
  --athena-teal: var(--apx-teal-ink);
  --teal: var(--apx-teal-ink);
  --blaze-orange: var(--apx-orange-ink);
  --orange: var(--apx-orange-ink);
  color: var(--apx-ink);
}

/* --------------------------------------------------------------------------
   7. Typography and rules
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  color: var(--apx-ink);
}

h1 em, h2 em, h3 em {
  color: var(--apx-teal-ink);
}

hr,
.divider {
  border-color: var(--apx-line);
}

a {
  color: var(--apx-teal-ink);
}

a:hover {
  color: var(--apx-orange-ink);
}

/* Section kickers and eyebrow labels: mono, uppercase, orange. Kept, just
   darkened enough to be legible at their small size on white. */
.section-label,
.compound-cat,
.cc-cat,
.modal-cat,
.pop-card-cat,
.timeline-year,
.email-series-title,
.q-num {
  color: var(--apx-orange-ink);
}

/* Faint hairlines that disappeared on white. */
.timeline-item::before,
.faq-item,
.ref-section li {
  border-color: var(--apx-line);
}

/* --------------------------------------------------------------------------
   8. Callouts
   -------------------------------------------------------------------------- */
.safety-banner,
.disclaimer-box {
  background: rgba(245, 130, 50, .07);
  border: 1px solid rgba(245, 130, 50, .35);
}

.safety-banner p,
.disclaimer-box p {
  color: var(--apx-ink-2);
}

.safety-banner strong,
.disclaimer-box strong {
  color: var(--apx-orange-ink);
}

/* --------------------------------------------------------------------------
   9. Hard-coded colours the variables cannot reach

   Everything above works by re-pointing a custom property, which moves every
   rule that reads it. These are the leftovers: hex values typed directly into
   a page's own <style> block or into a style="" attribute. On navy they were
   fine; on white the brighter ones drop to between 1.8:1 and 3.5:1, so they
   are corrected here rather than by editing the same literal across 44 files.
   Replacement values are the existing tokens wherever one already fits, and
   are chosen to clear 4.5:1 against the tint each one actually sits on.
   -------------------------------------------------------------------------- */

/* Card tags on the home page: mint green at 1.76:1 and a red at 3.52:1. */
.pop-tag.green,
[style*="color:#3ECF8E"],
[style*="color: #3ECF8E"],
[style*="color:#1A8A5C"],
[style*="color: #1A8A5C"] {
  color: var(--green-ok) !important;
}

.pop-tag.red,
[style*="color:#E04040"],
[style*="color: #E04040"] {
  color: var(--red-alert) !important;
}

/* The worked-example boxes on the dosing page: the term being defined in each
   line of arithmetic, and the citation under a callout at 2.64:1. */
.math .step {
  color: var(--apx-orange-ink);
}

.callout .src {
  color: var(--apx-ink-3);
}

/* Full-strength brand orange written inline as a text colour. Almost every use
   is inside the nav or the footer, where it belongs and still reads well, so
   the correction is applied broadly and then withdrawn inside those two — the
   same approach section 6 takes with the palette. */
[style*="color:#F58232"],
[style*="color: #F58232"] {
  color: var(--apx-orange-ink) !important;
}

.nav [style*="color:#F58232"],
.nav [style*="color: #F58232"],
footer [style*="color:#F58232"],
footer [style*="color: #F58232"] {
  color: var(--apx-brand-orange) !important;
}