/* My Eloah - house palette.
   Red and white only. The v7 tokens leaned on an oxblood/brass scheme whose
   browns read as dull; every brown is replaced here with either the house red
   or a true neutral grey. Loaded after the design system on every page, so it
   is the single place the brand colours are set.

   Light only: a dark scheme in these colours would have to invent a second
   palette, so the site commits to one. */

:root, :root[data-theme="dark"] {
  color-scheme: light;

  /* action */
  --red:        #8B1A1A;
  --red-deep:   #6E1515;
  --on-red:     #FFFFFF;
  --band:       #8B1A1A;
  --on-band:    #FFFFFF;

  /* dark surfaces are deep red, never brown */
  --ox:         #7A1717;
  --ink-band:   #6E1515;
  --on-ink:     #FFFFFF;

  /* the pale red-white used for eyebrows and hairlines on those dark surfaces */
  --brass:      #F4CFCD;

  /* neutrals: true greys, no warm cast */
  --ink:        #1A1A1A;
  --ink-2:      #4A4A4A;
  --muted:      #6E6E6E;
  --paper:      #FFFFFF;
  --surface:    #FFFFFF;
  --sunk:       #F6F6F8;
  --rule:       #E3E3E6;
  --rule-soft:  #EFEFF2;

  --ok:         #1B6B4C;
  --wa:         #1F7A55;

  --lift:   0 1px 1px rgba(20,20,20,.03), 0 14px 34px -20px rgba(20,20,20,.20);
  --lift-2: 0 2px 3px rgba(20,20,20,.05), 0 22px 48px -22px rgba(20,20,20,.28);
}

/* Hold the same palette when the visitor's OS prefers dark, rather than
   falling back to the design system's brown dark theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: light;
    --red:#8B1A1A; --red-deep:#6E1515; --on-red:#FFFFFF;
    --band:#8B1A1A; --on-band:#FFFFFF;
    --ox:#7A1717; --ink-band:#6E1515; --on-ink:#FFFFFF;
    --brass:#F4CFCD;
    --ink:#1A1A1A; --ink-2:#4A4A4A; --muted:#6E6E6E;
    --paper:#FFFFFF; --surface:#FFFFFF; --sunk:#F6F6F8;
    --rule:#E3E3E6; --rule-soft:#EFEFF2;
    --ok:#1B6B4C; --wa:#1F7A55;
  }
}

/* The guilloche watermark was drawn in brass; keep it in the red family. */
#guilloche { opacity: .30; }

/* ===== READABILITY PASS =====
   Measured against the surface each element actually sits on, not the section
   class it belongs to: dark boxes live inside light sections and white cards
   live inside dark ones. Several of the pages set these colours with an inline
   style attribute, which is why the overrides below carry !important.
   Do NOT replace any of this with a blanket star{color:inherit} rule - that
   breaks the WhatsApp button. */

/* 1. FAQ toggle glyph sits on the deep-red FAQ panel. */
.faq-item .faq-icon, .faq-q .faq-icon { color: #F7D9D7 !important; }

/* 2. Inclusion ticks appear on both white and deep-red boxes, so the tick is
      made self-contained instead of coloured for one ground. */
.inc-tick {
  color: #FFFFFF !important;
  background: #1B6B4C;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em; height: 1.15em;
  font-size: .78em;
  line-height: 1;
  flex: 0 0 auto;
}

/* 3. The comparison table sits on a dark red section. */
.vs-table th { color: #F7D9D7 !important; background: rgba(255,255,255,.08) !important; }
.vs-table td { color: #FFFFFF !important; background: transparent !important; }
.vs-table .vs-check { color: #8FE3B8 !important; }
.vs-table .vs-cross { color: #FFB3AE !important; }

/* 4. The calculator result panel is dark; its rows were inheriting light ink. */
.ec-out .ec-rows li, .ec-out .ec-rows li span, .ec-out .ec-rows li strong,
.ec-out .ec-row, .ec-out .ec-total { color: #FFFFFF !important; }
.ec-out .ec-cap, .ec-out .ec-note, .ec-out small { color: rgba(255,255,255,.82) !important; }

/* 5. Grey support text on white measured 2.3-3.5:1. */
.eqc-s, .elc-note, .elc-small, .calc-note, .edc-note { color: #55555C !important; }
.sec--white .sec-wrap > p, .sec--light .sec-wrap > p { color: #55555C !important; }
.sec--white .contact-grid p, .sec--white .contact-grid span,
.sec--light .contact-grid p, .sec--light .contact-grid span,
.sec--white .calc-inner li span, .sec--light .calc-inner li span { color: #55555C !important; }

/* 6. Translucent white text on red measured 2.3-4.4:1. The calculator panels
      are excluded because they paint white inside a dark section. */
.edc-s { color: rgba(255,255,255,.88) !important; }
.sec--dark .sec-wrap > p, .sec--dark-alt .sec-wrap > p { color: rgba(255,255,255,.88) !important; }
.sec--dark .sec-wrap div:not([class]):not(.calc-inner div),
.sec--dark-alt .sec-wrap div:not([class]):not(.calc-inner div) {
  color: rgba(255,255,255,.88);
}

/* 7. The rose accent is for dark grounds only; on the sunk grey it read 1.3:1. */
.ref { color: var(--red) !important; }
.sec--dark .elc-card .ref, .sec--dark-alt .elc-card .ref { color: var(--red) !important; }

/* 8. No brown on this site. The decorative numerals and the small controls
      that were gold-brown now tint from the red family. */
.sec-num { color: rgba(139,26,26,.07) !important; }
.sec--dark .sec-num, .sec--dark-alt .sec-num { color: rgba(255,255,255,.08) !important; }
.exit-popup-close, .ei-close { color: #55555C !important; }
.logo-sub { color: var(--red) !important; }
.btn-gold { background: var(--wa) !important; color: #FFFFFF !important; border-color: var(--wa) !important; }

/* ===== CONTAINMENT =====
   Wide data tables must scroll inside their own wrapper, never push the page
   sideways. /golden-visa/ had a 1743px table in a 1100px column. */
.elc-tablewrap { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.elc-tablewrap > table { min-width: 0; }
.inc-box, .inc-row > *, .calc-inner, .sec-wrap { min-width: 0; }
@media (max-width: 860px) { .elc-tablewrap > table { min-width: 560px; } }

/* ===== FIRST PAINT =====
   The script adds body.anim, which hides every .rise element until an
   IntersectionObserver adds .in. On a cold load that gap lasted seconds and
   the hero rendered blank. The first screen is now painted at rest; the
   scroll reveal below the fold is untouched, and if the script never runs
   body.anim is never added, so nothing can be stranded invisible. */
body.anim .hero .rise, body.anim .hero .stag > *,
body.anim .hero .reveal, body.anim .bar .rise, body.anim .strip .rise {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ===== HOVER STATES =====
   A link on a deep-red section hovered to the brand red, which is the same
   family as the ground it sits on (1.3:1). Hover follows the panel too. */
.sec--dark a:hover, .sec--dark-alt a:hover { color: #F7D9D7 !important; }
.sec--dark .elc-card a:hover, .sec--dark-alt .elc-card a:hover,
.sec--dark .calc-inner a:hover, .sec--dark-alt .calc-inner a:hover,
.sec--dark .eqc a:hover, .sec--dark-alt .eqc a:hover { color: var(--red) !important; }
.sec--dark .btn:hover, .sec--dark-alt .btn:hover { color: inherit; }
.btn-primary:hover, .btn-wa:hover { color: #FFFFFF !important; }

/* ===== CHECKLIST PAGES =====
   /checklists/<slug>/ paints its own deep-red pitfall panel inside a white
   section, so text in it follows the panel, not the section. The selectors are
   deliberately long: the bridge carries an !important rule on unclassed list
   items in light sections, and that has to lose here. */
.sec .sec-wrap .ck-wrap .ck-pit,
.sec .sec-wrap .ck-wrap .ck-pit h2,
.sec .sec-wrap .ck-wrap .ck-pit p { color: #FFFFFF !important; }
.sec .sec-wrap .ck-wrap .ck-pit ul li,
.sec .sec-wrap .ck-wrap .ck-pit ul li:not([class]) { color: rgba(255,255,255,.92) !important; }
.sec .sec-wrap .ck-wrap .ck-pit li::marker { color: rgba(255,255,255,.6); }
.sec .sec-wrap .ck-wrap ul.ck-list li,
.sec .sec-wrap .ck-wrap ul.ck-list li:not([class]) { color: #1A1A1A !important; }