/* =========================================================
   Shree Ganesh – white-led colour themes (v2 exploration)
   Load AFTER style.css. Switch with <html data-theme="...">
   navy | graphite | petrol | red-light
   ========================================================= */

/* ---------- palettes ---------- */
html[data-theme="navy"]{
  --red:#0B2545; --red-600:#071A33; --red-50:#EAF0F7;   /* accent (re-mapped) */
  --acc2:#3E6D9C;        /* steel blue */
  --em:#3E6D9C;          /* headline highlight */
  --hl:#0B2545;          /* eyebrow dash */
  --panel:#F3F6F9; --ink:#0E1726; --slate:#3B4656; --charcoal:#1E2A3A;
  --foot:#0B2545; --ring:rgba(11,37,69,.06); --tile-ring:rgba(62,109,156,.18);
}
html[data-theme="graphite"]{
  --red:#2B2F36; --red-600:#16191D; --red-50:#EEF0F2;
  --acc2:#7A838F;        /* cool steel grey */
  --em:#C8102E;          /* red only as a small highlight */
  --hl:#C8102E;
  --panel:#F4F5F6; --ink:#1A1D21; --slate:#454B53; --charcoal:#2B2F36;
  --foot:#1E2126; --ring:rgba(43,47,54,.05); --tile-ring:rgba(43,47,54,.10);
}
html[data-theme="petrol"]{
  --red:#0E5E6F; --red-600:#0A4754; --red-50:#E6F2F2;
  --acc2:#3E9A9C;        /* lighter teal */
  --em:#0E7C8C;
  --hl:#0E5E6F;
  --panel:#F0F6F5; --ink:#132126; --slate:#3D4D52; --charcoal:#1D3036;
  --foot:#0B3E49; --ring:rgba(14,94,111,.07); --tile-ring:rgba(14,94,111,.14);
}
html[data-theme="red-light"]{
  --red:#C8102E; --red-600:#A50D26; --red-50:#FCEEF0;
  --acc2:#2B2F36;        /* charcoal secondary */
  --em:#C8102E;
  --hl:#C8102E;
  --panel:#F6F4F1; --ink:#16181B; --slate:#43474D; --charcoal:#2B2F36;
  --foot:#1C1E21; --ring:rgba(200,16,46,.05); --tile-ring:rgba(200,16,46,.12);
}

/* ---------- shared light treatment ---------- */
html[data-theme] .eyebrow::before{background:var(--hl)}
html[data-theme] .section.grey{background:var(--panel)}

/* top bar: light */
html[data-theme] .topbar{background:var(--panel);color:var(--slate);border-bottom:1px solid var(--g-200)}
html[data-theme] .topbar a:hover{color:var(--red)}

/* home hero: white, photo in a rounded panel on the right */
html[data-theme] .hero{background:#fff;color:var(--ink);min-height:720px;align-items:center}
html[data-theme] .hero::before{display:none}
html[data-theme] .hero::after{right:auto;top:auto;left:-220px;bottom:-260px;width:620px;height:620px;border:100px solid var(--ring)}
html[data-theme] .hero .bg{inset:56px 0 56px 53%;border-radius:28px 0 0 28px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(14,23,38,.35)}
html[data-theme] .hero .bg img{filter:none;transform:none}
html[data-theme] .hero .container{padding-top:96px;padding-bottom:96px}
html[data-theme] .hero h1{max-width:600px;font-size:clamp(40px,4.3vw,62px)}
html[data-theme] .hero h1 em{color:var(--em)}
html[data-theme] .hero .lead{color:var(--slate);max-width:540px}
html[data-theme] .hero .cert-chip{color:var(--g-500);border-top-color:var(--g-200);max-width:580px;flex-wrap:wrap}
html[data-theme] .hero .cert-chip b{color:var(--ink)}
html[data-theme] .btn-ghost{border-color:var(--g-300);color:var(--ink)}
html[data-theme] .btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff}

/* inner page hero: soft panel, photo card on the right */
html[data-theme] .page-hero{background:var(--panel);color:var(--ink);border-bottom:1px solid var(--g-200)}
html[data-theme] .page-hero::before{display:none}
html[data-theme] .page-hero .bg{inset:44px 0 44px 58%;border-radius:24px 0 0 24px;overflow:hidden}
html[data-theme] .page-hero .bg img{filter:none;opacity:1}
html[data-theme] .page-hero h1{max-width:640px;font-size:clamp(38px,4.4vw,60px)}
html[data-theme] .page-hero .lead{color:var(--slate);max-width:580px}
html[data-theme] .crumbs{color:var(--g-500)}
html[data-theme] .crumbs a:hover{color:var(--red)}
html[data-theme] .page-hero .anchors{max-width:640px}
html[data-theme] .page-hero .anchors a{border-color:var(--g-300);color:var(--charcoal);background:#fff}
html[data-theme] .page-hero .anchors a:hover{border-color:var(--red);color:var(--red)}
html[data-theme] .on-dark .eyebrow{color:var(--red)}

/* numbers strip: white with hairlines, coloured figures */
html[data-theme] .stats,html[data-theme] .stats.dark{background:#fff;color:var(--ink);border-top:1px solid var(--g-200);border-bottom:1px solid var(--g-200)}
html[data-theme] .stat{border-color:var(--g-200) !important}
html[data-theme] .stat .n{color:var(--red)}
html[data-theme] .stat .l,html[data-theme] .stats.dark .l{color:var(--g-500)}

/* former dark sections -> light panel */
html[data-theme] .section.dark{background:var(--panel);color:var(--ink)}
html[data-theme] .section.dark h2{color:var(--ink) !important}
html[data-theme] .section.dark p,html[data-theme] .on-dark p,html[data-theme] .section.dark .lead{color:var(--slate) !important}
html[data-theme] .on-dark .bar .track{background:var(--g-200)}
html[data-theme] .on-dark .bar .top{color:var(--ink)}
html[data-theme] .bar .fill[style*="#fff"]{background:var(--acc2) !important}
html[data-theme] .bar .fill[style*="FF5A6E"]{background:var(--g-300) !important}
html[data-theme] .tile{background:#fff;color:var(--ink);border:1px solid var(--g-200)}
html[data-theme] .tile .pct{color:var(--red)}
html[data-theme] .tile p{color:var(--slate)}
html[data-theme] .tile::after{border-color:var(--tile-ring)}
html[data-theme] .tile .num{color:var(--red) !important}
html[data-theme] .tile.red{background:var(--red);border-color:var(--red);color:#fff}
html[data-theme] .tile.red .pct{color:#fff}
html[data-theme] .tile.red p{color:rgba(255,255,255,.82)}
html[data-theme] .tile.red::after{border-color:rgba(255,255,255,.14)}

/* small accents */
html[data-theme] .process span::before{background:var(--red)}
html[data-theme] .split-media .tag{background:rgba(255,255,255,.94);color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.12)}

/* CTA band: tinted, not a solid block */
html[data-theme] .cta-band{background:var(--red-50);color:var(--ink);border:1px solid color-mix(in srgb,var(--red) 14%,#fff)}
html[data-theme] .cta-band h2{color:var(--ink)}
html[data-theme] .cta-band p{color:var(--slate)}
html[data-theme] .cta-band::after{border-color:color-mix(in srgb,var(--red) 8%,transparent)}
html[data-theme] .cta-band .btn{background:var(--red);color:#fff}
html[data-theme] .cta-band .btn:hover{background:var(--red-600)}

/* footer: deep theme tone */
html[data-theme] .site-footer{background:var(--foot)}

/* placeholders: neutral amber so they never read as brand colour */
html[data-theme] .ph{border-color:#D9A845;background:repeating-linear-gradient(135deg,#FFFBF1 0 14px,#FFF5DF 14px 28px);color:#6B4A00}
html[data-theme] .ph::before{background:#C98A00}
html[data-theme] .ph b{color:#6B4A00}
html[data-theme] .ph span{color:#87631A}
html[data-theme] .pill-ph{color:#7A5600;background:#FFF6E3;border-color:#D9A845}
html[data-theme] .pcard.more{border-color:#E2BD6C;background:#FFFAEE;color:#7A5600}
html[data-theme] .f-ph{color:#F2C46B;border-color:rgba(242,196,107,.5)}

/* ---------- D: red-light = no big red blocks ---------- */
html[data-theme="red-light"] .tile.red{background:#fff;color:var(--ink);border:1px solid var(--g-200);border-top:4px solid var(--red)}
html[data-theme="red-light"] .tile.red .pct{color:var(--red)}
html[data-theme="red-light"] .tile.red p{color:var(--slate)}
html[data-theme="red-light"] .tile.red::after{border-color:var(--tile-ring)}
html[data-theme="red-light"] .cta-band{background:#fff;border:1px solid var(--g-200);border-left:4px solid var(--red)}
html[data-theme="red-light"] .tl .yr{background:#fff;color:var(--red);box-shadow:inset 0 0 0 2px var(--red)}
html[data-theme="red-light"] .site-header{border-top:3px solid var(--red)}
/* B: graphite = Swiss minimal; secondary marks in steel grey */
html[data-theme="graphite"] .tl .yr{background:var(--ink)}
html[data-theme="graphite"] .tl .loc,html[data-theme="graphite"] .card .num,html[data-theme="graphite"] .cap-index{color:var(--acc2)}
html[data-theme="graphite"] .main-nav a.active::after{background:#C8102E}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  html[data-theme] .hero{flex-direction:column;align-items:stretch;min-height:0}
  html[data-theme] .hero .container{order:1;padding-top:64px;padding-bottom:40px}
  html[data-theme] .hero .bg{order:2;position:relative;inset:auto;height:380px;margin:0 0 0 28px;border-radius:24px 0 0 24px}
  html[data-theme] .hero h1{max-width:760px}
  html[data-theme] .hero .lead{max-width:640px}
  html[data-theme] .page-hero .bg{display:none}
}
@media (max-width:560px){
  html[data-theme] .hero .bg{height:240px;margin-left:20px}
  html[data-theme] .hero h1{font-size:40px}
}

/* ---------- review fixes ---------- */
html[data-theme] .hero{min-height:660px}
html[data-theme] .hero::after{display:none}
html[data-theme] .hero .bg{inset:52px 0 52px 55%}
html[data-theme] .hero h1{max-width:680px;font-size:clamp(40px,3.9vw,56px)}
html[data-theme] .hero .lead{max-width:580px}
html[data-theme] .hero .cert-chip{display:block;line-height:1.7}
/* a short accent rule under the hero photo edge, for a touch of brand */
html[data-theme] .hero .bg::after{content:"";position:absolute;left:0;bottom:0;width:38%;height:6px;background:var(--red)}
html[data-theme="graphite"] .hero .bg::after{background:#C8102E;width:22%}
/* never two panels back to back under an inner hero */
html[data-theme] .page-hero + .section.grey{background:#fff}
/* filled tile text stays light (beats the .section.dark p rule) */
html[data-theme] .section.dark .tile.red p{color:rgba(255,255,255,.85) !important}
html[data-theme="red-light"] .section.dark .tile.red p{color:var(--slate) !important}
/* quieter tile rings */
html[data-theme] .tile::after{opacity:.55}
html[data-theme] .cta-band::after{opacity:.6}
/* footer button must stand out on the deep footer */
html[data-theme] .site-footer .btn-red{background:#fff;color:var(--foot)}
html[data-theme] .site-footer .btn-red:hover{background:var(--red-50)}
html[data-theme="red-light"] .site-footer .btn-red{background:var(--red);color:#fff}
@media (max-width:1060px){html[data-theme] .hero .bg{inset:auto}}
html[data-theme] .hero h1 em{white-space:nowrap}