/* ============================================================================
   RHCES Unified Theme  —  StrucTools skin + light/dark toggle
   ----------------------------------------------------------------------------
   Default theme : "light"  → StrucTools look (navy #1B3A5C + gold #D4A017)
   Alternate     : "dark"   → original calculator look (cyan/gold on near-black)

   HOW IT WORKS
   The calculator template family reads every colour from CSS custom
   properties (--bg-0, --cyan, --gold, --text ...). Re-declaring those
   variables under  :root[data-theme="..."]  out-specifies each page's own
   :root{} block, so the entire page re-skins with zero markup changes.
   Shared variable names (--text, --muted, --border) resolve correctly for
   BOTH page families because "light mode → dark text / light borders" is the
   right answer for every page.

   Loaded after each page's inline <style>, and theme is set on <html> by the
   inline no-FOUC snippet + theme.js (defaults to "light").
   ============================================================================ */

/* ============================================================================
   STRICT StrucTools font — Segoe UI everywhere, in BOTH themes.
   Overrides the calculator/style.css font vars (Inter / Space Grotesk /
   Source Code Pro) so the whole site matches the StrucTools reference exactly.
   ============================================================================ */
:root[data-theme="light"], :root[data-theme="dark"]{
  --font-sans:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-display:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
/* Comments widget (tool-comments.js) hardcodes Inter — force Segoe to match. */
:root[data-theme] #rhces-comments,
:root[data-theme] #rhces-comments *{
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif !important;
}

/* ============================  LIGHT  (default · StrucTools)  ============== */
:root[data-theme="light"]{
  /* ---- calculator-family surfaces ---- */
  --bg-0:#F4F6F8;                 /* page background            */
  --bg-1:#FFFFFF;                 /* raised surfaces / panels   */
  --bg-2:#EAEEF3;                 /* subtle alternate surface   */
  --panel:#FFFFFF;
  --border:#E5E7EB;
  --border-2:#D6DCE4;
  /* ---- accents (cyan primary remapped to StrucTools navy) ---- */
  --cyan:#1B3A5C;                 /* primary accent → navy      */
  --cyan-dim:rgba(27,58,92,.12);
  --gold:#D4A017;                 /* StrucTools gold            */
  --amber:#B26B00;
  --green:#16A34A;
  --red:#DC2626;
  /* ---- text ---- */
  --text:#1F2933;
  --muted:#6B7280;
  --dim:#8A94A3;
  /* ---- effects ---- */
  --shadow:0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.10);
  --grad-accent:linear-gradient(135deg,#1B3A5C 0%,#14304b 100%);

  /* ---- StrucTools-family variables (native light values) ---- */
  --primary:#1B3A5C;  --primary-2:#14304b;  --accent:#D4A017;
  --bg:#F4F6F8;       --card:#FFFFFF;
  --ok:#16A34A;       --warn:#F59E0B;        --fail:#DC2626;
}

/* ============================  DARK  (original calculator look)  =========== */
:root[data-theme="dark"]{
  /* ---- calculator-family surfaces (verbatim originals) ---- */
  --bg-0:#020817;
  --bg-1:#0a1628;
  --bg-2:#061220;
  --panel:rgba(255,255,255,0.04);
  --border:rgba(255,255,255,0.08);
  --border-2:rgba(255,255,255,0.14);
  /* ---- accents ---- */
  --cyan:#00d4ff;
  --cyan-dim:rgba(0,212,255,0.18);
  --gold:#f0a500;
  --amber:#fbbf24;
  --green:#34d399;
  --red:#f87171;
  /* ---- text ---- */
  --text:#e2e8f0;
  --muted:#94a3b8;
  --dim:#64748b;
  /* ---- effects ---- */
  --shadow:0 10px 40px rgba(0,0,0,0.55);
  --grad-accent:linear-gradient(135deg,#00d4ff 0%,#0066cc 100%);

  /* ---- StrucTools-family dark variant ---- */
  --primary:#3E6FA0;  --primary-2:#1B3A5C;  --accent:#E6B53D;
  --bg:#0b1422;       --card:#15263d;
  --ok:#34d399;       --warn:#fbbf24;        --fail:#f87171;
}

/* ============================================================================
   Homepage family — style.css variable scheme (navy/cyan/gold).
   Shared by: index, about, contact, trainings, blogs, webtools, store,
   checkout, rhces-estimator, payment-status, disk-space-manager.
   ============================================================================ */
:root[data-theme="light"]{
  --navy-950:#FFFFFF; --navy-900:#F4F6F8; --navy-800:#FFFFFF;
  --navy-700:#EAEEF3; --navy-600:#DCE3EC;
  --steel-700:#1F2933; --steel-500:#6B7280; --steel-300:#6B7280; --steel-200:#374151;
  --cyan-400:#1B3A5C; --cyan-500:#1B3A5C; --cyan-bright:#1B3A5C; --cyan-glow:rgba(27,58,92,.10);
  --gold-400:#D4A017; --gold-500:#D4A017; --gold-glow:rgba(212,160,23,.15);
  --off-white:#1F2933; --text-primary:#1F2933; --text-muted:#6B7280; --text-dim:#8A94A3;
  --border:rgba(16,24,40,.10); --border-glow:rgba(27,58,92,.28);
  --grad-hero:linear-gradient(135deg,#EEF3F8 0%,#F4F6F8 50%,#E9EEF4 100%);
  --grad-accent:linear-gradient(135deg,#1B3A5C 0%,#14304b 100%);
  --grad-gold:linear-gradient(135deg,#D4A017 0%,#E6B53D 100%);
  --grad-card:linear-gradient(135deg,#FFFFFF 0%,#FBFCFD 100%);
  --shadow-sm:0 1px 3px rgba(16,24,40,.08); --shadow-md:0 4px 20px rgba(16,24,40,.10);
  --shadow-lg:0 10px 40px rgba(16,24,40,.12); --shadow-cyan:0 0 40px rgba(27,58,92,.10);
  --shadow-card:0 8px 32px rgba(16,24,40,.10);
}
:root[data-theme="dark"]{
  --navy-950:#020817; --navy-900:#0a0e1a; --navy-800:#0d1b2a;
  --navy-700:#112240; --navy-600:#1a3052;
  --steel-700:#334155; --steel-500:#64748b; --steel-300:#94a3b8; --steel-200:#cbd5e1;
  --cyan-400:#22d3ee; --cyan-500:#06b6d4; --cyan-bright:#00d4ff; --cyan-glow:rgba(0,212,255,0.15);
  --gold-400:#fbbf24; --gold-500:#f0a500; --gold-glow:rgba(240,165,0,0.15);
  --off-white:#f0f4f8; --text-primary:#e2e8f0; --text-muted:#94a3b8; --text-dim:#64748b;
  --border:rgba(255,255,255,0.08); --border-glow:rgba(0,212,255,0.2);
  --grad-hero:linear-gradient(135deg,#020817 0%,#0a1628 50%,#061220 100%);
  --grad-accent:linear-gradient(135deg,#00d4ff 0%,#0066cc 100%);
  --grad-gold:linear-gradient(135deg,#f0a500 0%,#fbbf24 100%);
  --grad-card:linear-gradient(135deg,rgba(255,255,255,0.06) 0%,rgba(255,255,255,0.02) 100%);
  --shadow-sm:0 1px 3px rgba(0,0,0,0.4); --shadow-md:0 4px 20px rgba(0,0,0,0.5);
  --shadow-lg:0 10px 40px rgba(0,0,0,0.6); --shadow-cyan:0 0 40px rgba(0,212,255,0.15);
  --shadow-card:0 8px 32px rgba(0,0,0,0.4);
}

/* ============================================================================
   Calculator-template overrides — elements that HARDCODE the dark surface
   colour rgba(2,8,23,*) instead of reading a variable, so the variable swap
   alone can't reach them. These class names come from the shared calculator
   template, so this one block re-skins the whole family for light mode.
   (Dark mode leaves the originals untouched.)
   ============================================================================ */
:root[data-theme="light"] .nav{
  background:linear-gradient(180deg,#1B3A5C,#14304b) !important;
  border-bottom:2px solid var(--gold) !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
:root[data-theme="light"] .nav .brand,
:root[data-theme="light"] .nav .brand span,
:root[data-theme="light"] .nav-back{ color:#eef4fa !important; }
:root[data-theme="light"] .nav-back{ border-color:rgba(255,255,255,.32) !important; }
:root[data-theme="light"] .nav-back:hover{
  background:rgba(255,255,255,.12) !important;
  border-color:var(--gold) !important; color:#fff !important;
}

:root[data-theme="light"] .input,
:root[data-theme="light"] .select,
:root[data-theme="light"] textarea{
  background:#FFFFFF !important; border-color:var(--border-2) !important;
}
:root[data-theme="light"] .seg{ background:#E7ECF2 !important; }
:root[data-theme="light"] .result{ background:#FFFFFF !important; }
:root[data-theme="light"] .diagram{ background:#FFFFFF !important; }
:root[data-theme="light"] .formula{ background:#F4F6F8 !important; }
:root[data-theme="light"] details.notes{ background:#FFFFFF !important; }

/* hero eyebrow pill ("Free Web Tool") — crisp navy pill instead of faint tint */
:root[data-theme="light"] .hero-tag{
  background:#EAF0F6 !important; color:#1B3A5C !important; border-color:#C9D6E5 !important;
}
/* segmented control — clear white "active" chip with navy label */
:root[data-theme="light"] .seg button.is-active{
  background:#FFFFFF !important; color:#1B3A5C !important;
  box-shadow:0 1px 2px rgba(16,24,40,.14), 0 1px 1px rgba(16,24,40,.06) !important;
}

/* ----------------------------------------------------------------------------
   Comments widget (rendered by tool-comments.js, shared by every calculator).
   It injects its own <style> with hardcoded cyan/dark values; re-skin for light
   mode here with !important so it wins regardless of injection order. Dark mode
   is left untouched (these rules are scoped to data-theme="light").
   ---------------------------------------------------------------------------- */
:root[data-theme="light"] #rhces-comments{ color:var(--text) !important; }
:root[data-theme="light"] #rhces-comments .rc-head{ border-bottom-color:var(--border) !important; }
:root[data-theme="light"] #rhces-comments .rc-head h2{ color:#1B3A5C !important; }
:root[data-theme="light"] #rhces-comments .rc-count{ color:#1B3A5C !important; }
:root[data-theme="light"] #rhces-comments .rc-form{ background:#FFFFFF !important; border-color:var(--border) !important; }
:root[data-theme="light"] #rhces-comments .rc-input,
:root[data-theme="light"] #rhces-comments .rc-textarea{
  background:#FFFFFF !important; color:var(--text) !important; border-color:var(--border-2) !important;
}
:root[data-theme="light"] #rhces-comments .rc-input:focus,
:root[data-theme="light"] #rhces-comments .rc-textarea:focus{
  border-color:#1B3A5C !important; box-shadow:0 0 0 3px rgba(27,58,92,.12) !important;
}
:root[data-theme="light"] #rhces-comments .rc-meta{ color:var(--muted) !important; }
:root[data-theme="light"] #rhces-comments .rc-submit{
  background:linear-gradient(135deg,#1B3A5C,#14304b) !important; color:#fff !important;
}
:root[data-theme="light"] #rhces-comments .rc-empty{
  background:#F8FAFC !important; color:var(--muted) !important; border-color:var(--border) !important;
}
:root[data-theme="light"] #rhces-comments .rc-item{ background:#FFFFFF !important; border-color:var(--border) !important; }
:root[data-theme="light"] #rhces-comments .rc-name{ color:#9A7400 !important; }
:root[data-theme="light"] #rhces-comments .rc-date{ color:var(--dim) !important; }
:root[data-theme="light"] #rhces-comments .rc-body{ color:#374151 !important; }
:root[data-theme="light"] #rhces-comments .rc-reply-link{ color:#1B3A5C !important; }
:root[data-theme="light"] #rhces-comments .rc-replies{ border-left-color:rgba(27,58,92,.25) !important; }
:root[data-theme="light"] #rhces-comments .rc-reply{ background:#F8FAFC !important; border-color:var(--border) !important; }
:root[data-theme="light"] #rhces-comments .rc-reply .rc-name{ color:#1B3A5C !important; }
:root[data-theme="light"] #rhces-comments .rc-reply-form{ background:#F4F8FB !important; border-color:rgba(27,58,92,.2) !important; }
:root[data-theme="light"] #rhces-comments .rc-cancel{ color:var(--muted) !important; border-color:var(--border-2) !important; }
:root[data-theme="light"] #rhces-comments .rc-load-more{ color:#1B3A5C !important; border-color:var(--border-2) !important; }
:root[data-theme="light"] #rhces-comments .rc-load-more:hover{ border-color:#1B3A5C !important; color:#1B3A5C !important; }
:root[data-theme="light"] #rhces-comments .rc-loading{ color:var(--muted) !important; }

/* ============================================================================
   Homepage (index.php) — hardcoded-white text that turns invisible on the
   now-light page. Darken just these (buttons/gradient-text keep their white).
   ============================================================================ */
:root[data-theme="light"] .hero-title{ color:#1F2933 !important; }
:root[data-theme="light"] .nav-link.active{ color:#1B3A5C !important; }
:root[data-theme="light"] .hld-val{ color:#1F2933 !important; }
:root[data-theme="light"] .hld-lbl{ color:#5B6675 !important; }
:root[data-theme="light"] .hero-live-data{
  background:#FFFFFF !important; border:1px solid var(--border) !important;
  box-shadow:0 8px 32px rgba(16,24,40,.08) !important;
}
:root[data-theme="light"] .footer-heading{ color:#1B3A5C !important; }

/* style.css family — headings/labels that hardcode white text → invisible on
   the light bg. (Buttons like .btn-primary/.btn-nav keep white: navy bg.) */
:root[data-theme="light"] .section-title,
:root[data-theme="light"] .product-name,
:root[data-theme="light"] .product-price,
:root[data-theme="light"] .metric-val,
:root[data-theme="light"] .training-title,
:root[data-theme="light"] .value-title,
:root[data-theme="light"] .pay-title,
:root[data-theme="light"] .pay-product-name{ color:#1B3A5C !important; }
:root[data-theme="light"] .nav-link:hover{ color:#1B3A5C !important; }
/* NOTE: .modal-title/.modal-product-name intentionally NOT darkened — the
   product modal is a dark overlay (rgba(2,8,23,.85)); white text is correct. */

/* RHCES Estimator product page (rhces-estimator) — its est-* scheme hardcodes
   white headings. Scoped to est- containers (the est- prefix is unique to this
   page). Figure-caption sits on the dark app screenshot, so it's left white. */
:root[data-theme="light"] .est-section-title,
:root[data-theme="light"] .est-price-headline,
:root[data-theme="light"] [class*="est-"] h1,
:root[data-theme="light"] [class*="est-"] h2,
:root[data-theme="light"] [class*="est-"] h3,
:root[data-theme="light"] [class*="est-"] summary{
  color:#1B3A5C !important; -webkit-text-fill-color:#1B3A5C !important;
}

/* ============================================================================
   Blog template (blogs/*.html) — white H1 gradient + emphasis/headings that
   vanish on the light background. Scoped to .blog-container / .blog-body.
   ============================================================================ */
:root[data-theme="light"] .blog-container h1{
  -webkit-text-fill-color:#1B3A5C !important; color:#1B3A5C !important;
}
:root[data-theme="light"] .blog-body h2,
:root[data-theme="light"] .blog-body h3{ color:#1B3A5C !important; }
:root[data-theme="light"] .blog-body strong{ color:#1F2933 !important; }
:root[data-theme="light"] .step-num{ background:#1B3A5C !important; color:#FFFFFF !important; }

/* disk-space-manager — dsm-* content article whose body text is white (built
   for a dark bg). Darken text inside dsm- containers (dsm- prefix is unique). */
:root[data-theme="light"] [class*="dsm-"] p,
:root[data-theme="light"] [class*="dsm-"] li,
:root[data-theme="light"] [class*="dsm-"] td,
:root[data-theme="light"] .dsm-lead{ color:#374151 !important; }
:root[data-theme="light"] [class*="dsm-"] h1,
:root[data-theme="light"] [class*="dsm-"] h2,
:root[data-theme="light"] [class*="dsm-"] h3,
:root[data-theme="light"] [class*="dsm-"] h4,
:root[data-theme="light"] [class*="dsm-"] strong{ color:#1B3A5C !important; -webkit-text-fill-color:#1B3A5C !important; }

/* ============================================================================
   Navy polish — hardcoded cyan accents remapped to StrucTools navy (light mode)
   ============================================================================ */
:root[data-theme="light"] .webtool-cta{
  background:linear-gradient(135deg,#1B3A5C,#14304b) !important;
  color:#FFFFFF !important; border-color:#14304b !important;
}
:root[data-theme="light"] .back-to-top{
  background:#1B3A5C !important; color:#FFFFFF !important; border-color:#14304b !important;
}

/* ============================================================================
   Floating theme toggle  (injected by theme.js, present on every page)
   ============================================================================ */
#rhces-theme-toggle{
  position:fixed; z-index:2147483000; left:18px; bottom:18px;
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 15px; border-radius:999px; cursor:pointer;
  font:600 13px/1 "Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  background:linear-gradient(180deg,#1B3A5C,#14304b); color:#fff;
  border:1px solid rgba(212,160,23,.55); border-bottom:2px solid #D4A017;
  box-shadow:0 4px 14px rgba(0,0,0,.28);
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
  -webkit-tap-highlight-color:transparent;
}
#rhces-theme-toggle:hover{ transform:translateY(-2px); filter:brightness(1.08);
  box-shadow:0 7px 20px rgba(0,0,0,.34); }
#rhces-theme-toggle:active{ transform:translateY(0); }
#rhces-theme-toggle:focus-visible{ outline:2px solid #D4A017; outline-offset:2px; }
#rhces-theme-toggle svg{ width:16px; height:16px; flex:none; }
#rhces-theme-toggle .rtt-label{ letter-spacing:.3px; }

/* in dark mode, give the pill a matching cyan-on-black accent */
:root[data-theme="dark"] #rhces-theme-toggle{
  background:linear-gradient(180deg,#0a1628,#020817);
  border-color:rgba(0,212,255,.5); border-bottom-color:#00d4ff;
}

@media (max-width:560px){
  #rhces-theme-toggle{ left:12px; bottom:12px; padding:9px 12px; font-size:12px; }
  #rhces-theme-toggle .rtt-label{ display:none; }   /* icon-only on small screens */
}
@media print{ #rhces-theme-toggle{ display:none !important; } }
