/* ==========================================================================
   WCMS blog - theme layer
   Loaded on every blog page. Dark is the served default (data-theme="dark"
   is written into the html tag). Light is opt-in and remembered per visitor.

   The nav, hero, footer and CTA panels were already dark in both themes.
   Only the reading surface changes.
   ========================================================================== */

:root[data-theme="dark"]{
  --surface:      #14120f;   /* page background            */
  --surface-2:    #1d1a16;   /* raised panels, cards       */
  --surface-3:    #23201b;   /* hover state                */
  --text:         #e8e3d9;   /* body text                  */
  --text-strong:  #f7f3ea;   /* headings, strong           */
  --text-muted:   #a39c90;   /* secondary text             */
  --line:         rgba(255,255,255,.09);
  --line-strong:  rgba(255,255,255,.16);
}

/* ---------- page surface ---------- */
:root[data-theme="dark"] body{background:var(--surface);color:var(--text)}

/* ---------- article ---------- */
:root[data-theme="dark"] .article-body h2,
:root[data-theme="dark"] .article-body h3,
:root[data-theme="dark"] .article-body strong{color:var(--text-strong)}
:root[data-theme="dark"] .article-body p,
:root[data-theme="dark"] .article-body li{color:var(--text)}

:root[data-theme="dark"] .article-answer{
  background:var(--surface-2);
  border-left-color:var(--gold);
}
:root[data-theme="dark"] .article-answer p{color:var(--text-strong)}

:root[data-theme="dark"] .article-note{
  background:var(--surface-2);
  color:var(--text-muted);
}

:root[data-theme="dark"] .article-divider{background:var(--line)}

:root[data-theme="dark"] .faq-item{border-bottom-color:var(--line)}
:root[data-theme="dark"] .faq-q{color:var(--text-strong)}
:root[data-theme="dark"] .faq-a{color:var(--text)}

:root[data-theme="dark"] .check-group{
  background:var(--surface-2);
  border-color:var(--line);
}

/* CTA panel is already ink; lift it so it separates from a dark page */
:root[data-theme="dark"] .article-cta,
:root[data-theme="dark"] .sp-cta{
  background:var(--surface-2);
  border:1px solid var(--line-strong);
}

/* ---------- blog index ---------- */
:root[data-theme="dark"] .blog-card{
  background:var(--surface-2);
  border-color:var(--line);
}
:root[data-theme="dark"] .blog-card:hover{background:var(--surface-3)}
:root[data-theme="dark"] .blog-card h3{color:var(--text-strong)}
:root[data-theme="dark"] .blog-card .exc{color:var(--text-muted)}
:root[data-theme="dark"] .blog-meta,
:root[data-theme="dark"] .section-sub,
:root[data-theme="dark"] .portfolio-card-desc{color:var(--text-muted)}
:root[data-theme="dark"] .portfolio-card{background:var(--surface-2)}
:root[data-theme="dark"] .portfolio-card-title{color:var(--text-strong)}
:root[data-theme="dark"] .portfolio-grid,
:root[data-theme="dark"] .blog-listing{background:var(--surface)}

/* filter pills */
:root[data-theme="dark"] .filter-pill,
:root[data-theme="dark"] .year-pill{
  background:var(--surface-2);
  color:var(--text-muted);
  border-color:var(--line);
}
:root[data-theme="dark"] .filter-pill.active,
:root[data-theme="dark"] .year-pill.active{
  background:var(--gold);
  color:#14120f;
  border-color:var(--gold);
}
:root[data-theme="dark"] #blogSearch{
  background:var(--surface-2);
  color:var(--text);
  border-color:var(--line);
}
:root[data-theme="dark"] #blogSearch::placeholder{color:var(--text-muted)}

/* ---------- legal overlays ---------- */
:root[data-theme="dark"] .legal-overlay-box{background:var(--surface-2)}
:root[data-theme="dark"] .legal-overlay-box h2,
:root[data-theme="dark"] .legal-overlay-box h3{color:var(--text-strong)}
:root[data-theme="dark"] .legal-overlay-box p,
:root[data-theme="dark"] .legal-overlay-box ul li{color:var(--text-muted)}

/* ==========================================================================
   The toggle control itself. Sits in the nav, right hand side.
   ========================================================================== */
.theme-toggle{
  width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;
  margin-left:1.1rem;
  background:transparent;
  border:1.5px solid rgba(255,255,255,.22);
  border-radius:50%;
  cursor:pointer;
  color:#fff;
  transition:border-color .3s,background .3s,color .3s;
  flex-shrink:0;
  padding:0;
  line-height:0;
}
.theme-toggle:hover{border-color:var(--gold);color:var(--gold)}
.theme-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.theme-toggle svg{width:16px;height:16px;display:block}

/* show the sun when dark is active (click to go light), moon when light */
.theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:block}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:block}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:none}

@media(max-width:900px){
  .theme-toggle{margin-left:auto;margin-right:.9rem}
}

@media(prefers-reduced-motion:reduce){
  .theme-toggle{transition:none}
}