/* ==========================================================================
   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 ---------- */
/* Selectors here are taken from the live index markup, not guessed:
   .blog-controls .cat-pill .view-toggle .blog-search .blog-card .exc etc. */

:root[data-theme="dark"] .blog-wrap{background:var(--surface)}

/* sticky filter bar */
:root[data-theme="dark"] .blog-controls{
  background:rgba(20,18,15,.95);
  border-bottom-color:var(--line);
}
:root[data-theme="dark"] .blog-search input{
  background:var(--surface-2);
  border-color:var(--line-strong);
  color:var(--text);
}
:root[data-theme="dark"] .blog-search input::placeholder{color:var(--text-muted)}
:root[data-theme="dark"] .s-ico{stroke:var(--text-muted)}
:root[data-theme="dark"] .search-clear{color:var(--text-muted)}
:root[data-theme="dark"] .search-clear:hover{color:var(--text-strong)}

/* LATEST / BY TOPIC segmented control */
:root[data-theme="dark"] .view-toggle{background:var(--surface-3)}
:root[data-theme="dark"] .view-toggle button{color:var(--text-muted)}
:root[data-theme="dark"] .view-toggle button:hover{color:var(--text-strong)}
:root[data-theme="dark"] .view-toggle button[aria-pressed="true"]{
  background:var(--gold);
  color:#14120f;
}

/* year and category pills */
:root[data-theme="dark"] .cat-pill{
  background:var(--surface-2);
  border-color:var(--line-strong);
  color:var(--text);
}
:root[data-theme="dark"] .cat-pill b{color:var(--text-muted)}
:root[data-theme="dark"] .cat-pill:hover{border-color:var(--gold);color:var(--text-strong)}
:root[data-theme="dark"] .cat-pill[aria-pressed="true"]{
  background:var(--gold);
  border-color:var(--gold);
  color:#14120f;
}
:root[data-theme="dark"] .cat-pill[aria-pressed="true"] b{color:#14120f}

:root[data-theme="dark"] .result-count{color:var(--text-muted)}

/* cards */
: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);
  border-color:var(--gold);
  box-shadow:0 14px 32px rgba(0,0,0,.45);
}
:root[data-theme="dark"] .blog-card h3{color:var(--text-strong)}
:root[data-theme="dark"] .exc{color:var(--text-muted)}
:root[data-theme="dark"] .blog-meta{
  color:var(--text-muted);
  border-top-color:var(--line);
}

:root[data-theme="dark"] .blog-empty{
  border-color:var(--line-strong);
  color:var(--text-muted);
}
:root[data-theme="dark"] .blog-empty h2{color:var(--text-strong)}

/* portfolio grid, used on other pages sharing this stylesheet */
: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-card-desc,
:root[data-theme="dark"] .section-sub{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}
}

/* ==========================================================================
   SITE LAYER - root pages (index, network, webdesign)
   Selectors below are taken from the live markup of those pages, not guessed.
   Nav, hero, footers and ink CTA panels were already dark in both themes and
   are deliberately left alone.
   ========================================================================== */

/* section wrappers that set the light surface */
:root[data-theme="dark"] .other-services{background:var(--surface-2)}
:root[data-theme="dark"] .section-sub{color:var(--text-muted)}
:root[data-theme="dark"] .subpage-body p,
:root[data-theme="dark"] .process-step p,
:root[data-theme="dark"] .contact-detail p,
:root[data-theme="dark"] .contact-info>p,
:root[data-theme="dark"] .stats-bar-item p{color:var(--text-muted)}

/* cards */
:root[data-theme="dark"] .service-card,
:root[data-theme="dark"] .sp-feature,
:root[data-theme="dark"] .other-service-pill,
:root[data-theme="dark"] .service-overlay-body .sp-feature{
  background:var(--surface-2);
  border-color:var(--line);
}
:root[data-theme="dark"] .service-card p,
:root[data-theme="dark"] .sp-feature p,
:root[data-theme="dark"] .service-overlay-body .sp-feature p{color:var(--text-muted)}
:root[data-theme="dark"] .service-card:hover,
:root[data-theme="dark"] .other-service-pill:hover{background:var(--surface-3)}

/* portfolio grid */
:root[data-theme="dark"] .portfolio-card{
  background:var(--surface-2);
  border:1px solid var(--line);
}
:root[data-theme="dark"] .portfolio-card-img{background:var(--surface-3)}
:root[data-theme="dark"] .portfolio-card-title{color:var(--text-strong)}
:root[data-theme="dark"] .portfolio-card-desc{color:var(--text-muted)}

/* process numbering */
:root[data-theme="dark"] .process-num{color:var(--gold)}

/* contact form */
:root[data-theme="dark"] .form-group label{color:var(--text)}
:root[data-theme="dark"] .form-group input,
:root[data-theme="dark"] .form-group textarea,
:root[data-theme="dark"] .form-group select{
  background:var(--surface-2);
  border-color:var(--line-strong);
  color:var(--text);
}
:root[data-theme="dark"] .form-group input::placeholder,
:root[data-theme="dark"] .form-group textarea::placeholder{color:var(--text-muted)}
:root[data-theme="dark"] .form-group input:focus,
:root[data-theme="dark"] .form-group textarea:focus,
:root[data-theme="dark"] .form-group select:focus{border-color:var(--gold)}

/* service overlay */
:root[data-theme="dark"] .service-overlay-inner{background:var(--surface)}
:root[data-theme="dark"] .service-overlay-body p{color:var(--text)}
:root[data-theme="dark"] .service-overlay-close{color:var(--text)}
:root[data-theme="dark"] .service-overlay-close:hover{background:var(--surface-3)}

/* owned-network cards already sit on a dark panel; lift them off the surface */
:root[data-theme="dark"] .owner-site-card{background:var(--surface-2)}
:root[data-theme="dark"] .owner-site-card:hover{background:var(--surface-3)}

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

/* --------------------------------------------------------------------------
   Toggle position in the nav.

   It sits inside the nav list so it renders immediately after Contact.
   On desktop it is taken OUT of the flow: nav is justify-content:space-between,
   so any width the toggle adds to the list shifts the whole menu left. Absolute
   positioning keeps the list exactly the width it was before the toggle existed,
   which puts the menu back where it was.
   -------------------------------------------------------------------------- */

.nav-links li.nav-theme{display:flex;align-items:center}

@media(min-width:769px){
  .nav-links{position:relative}
  .nav-links li.nav-theme{
    position:absolute;
    left:100%;
    top:50%;
    transform:translateY(-50%);
    margin-left:1.4rem;
  }
}

@media(max-width:768px){
  /* in the slide-out panel it is a normal list item */
  .nav-links li.nav-theme{
    position:static;
    transform:none;
    margin:.6rem 0 0;
    padding-top:1.2rem;
    border-top:1px solid rgba(255,255,255,.12);
    width:100%;
    justify-content:center;
  }
}