/* ---------------------------------------------------
   Woof of Walk Street — Mini Styles (v4.7)
   Dark page by default (white text). Light components
   use .surface (black text). Keep this BEFORE styles.css.
--------------------------------------------------- */

/* ===== Tokens ===== */
:root{
  /* Light surface (cards, hero, ribbons) */
  --surface: #ffffff;
  --on-surface: #0b0e12;         /* text on light surface */

  /* Page (dark) */
  --page-bg: #0b0e12;            /* site background */
  --on-page: #ffffff;            /* text on dark page */

  /* Brand + UI */
  --brand:#f5b200; 
  --brand-ink:#0b0e12;
  --accent:#1f2732;              
  --stroke:#eae6de;
  --line-dark: rgba(255,255,255,.12);

  --card:#fff;                   
  --muted:#4a4a4a;               
  --shadow:0 2px 6px rgba(0,0,0,.08);
  --radius:14px; --maxw:1100px; --gap:20px;

  /* Promo helpers */
  --promo-bg:#fff9e5; 
  --promo-border:#f3e2a8;
  --promo-btn-bg:#ffe44d; 
  --promo-btn-color:#111;

  /* layout helpers */
  --container-pad:16px;
  --promo-h:0px; 
  --sticky-cta-h:0px;
}

/* ===== Base ===== */
html,body{
  margin:0; padding:0;
  background:var(--page-bg);
  color:var(--on-page);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:#fff;text-decoration:none}
a:hover,a:focus{text-decoration:underline}
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--container-pad)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 1) Utility: light background components use dark text */
.surface,
.card,
.hero,
.section.light,
.promo-ribbon,
.footer,
.blog-card {
  background: var(--surface);
  color: var(--on-surface);
}
.surface :where(h1,h2,h3,h4,h5,h6,p,li,small,span,strong,a){
  color: var(--on-surface);
}
.surface a{color: var(--on-surface);text-decoration: underline}

/* ===== Promo Ribbon ===== */
.promo-ribbon{
  position:sticky; top:0; z-index:1100;
  background:var(--promo-bg);
  border-bottom:1px solid var(--promo-border);
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:.6rem; padding:.6rem .8rem; text-align:center; line-height:1.35;
  color:var(--on-surface);
}

/* ===== Impact Ribbon (dark) ===== */
.impact-ribbon{
  position:relative;
  background:#0c1117!important;
  color:#fff!important;
  border-block:4px solid var(--brand);
  font-size:clamp(.95rem,1.6vw,1.05rem);
}
.impact-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:12px 16px;
  display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;line-height:1.45;
}
.impact-ribbon h2,.impact-ribbon h3,.impact-ribbon p,.impact-ribbon strong{color:#fff!important}
.impact-ribbon a{color:#ffd166!important;text-underline-offset:2px}
.impact-ribbon a:hover{text-decoration:underline}

/* ===== Header / Nav ===== */
.site-header{
  position:sticky; top:var(--promo-h); z-index:1000;
  background:#0c1117;
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 2px 10px rgba(0,0,0,.24);
}
.navbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px var(--container-pad);
}
.brand{display:flex; align-items:center; gap:10px}
.brand img{width:40px;height:40px;border-radius:8px}
.brand strong{
  font-size:1.15rem; font-weight:900; letter-spacing:-.3px;
  color:#fff; text-transform:uppercase; text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.brand strong::after{
  content:""; display:block; width:36%; height:2px;
  background:var(--brand); margin-top:2px; border-radius:2px;
}
.nav-links{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.nav-links a{
  padding:8px 10px;border-radius:8px;font-weight:800;
  color:#e6edf3; transition:color .18s,background-color .18s;
}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav-links a[aria-current="page"]{
  color:#111; background:#ffd166;
}

/* ===== Buttons ===== */
.btn,.cta-button{
  display:inline-block;
  padding:12px 18px;
  border-radius:999px;
  background:var(--brand);
  color:var(--brand-ink);
  font-weight:900;
  border:1px solid transparent;
  box-shadow:0 8px 22px rgba(245,178,0,.4);
  transition:transform .15s,box-shadow .15s;
}
.btn:hover,.cta-button:hover{
  transform:translateY(-1px) scale(1.03);
  box-shadow:0 10px 26px rgba(255,209,102,.5);
}
.btn-ghost,.cta-button.secondary{
  background:transparent;
  border:1px solid rgba(255,255,255,.3);
  color:#fff;
}
.btn-ghost:hover,.cta-button.secondary:hover{
  border-color:#fff; box-shadow:0 6px 18px rgba(255,255,255,.2);
}

/* ===== Cards, Grids, Sections ===== */
section{padding-block:clamp(28px,4vw,48px)}
.card{
  background:var(--surface);
  color:var(--on-surface);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
}

/* ===== Footer ===== */
.site-footer{
  background:#0b0e12;
  color:#fff;
  border-top:1px solid rgba(255,255,255,.12);
  padding:28px 0 18px;
  text-align:center;
}
.footer-brand strong,
.footer-col h3,
.footer-col a,
.footer-geo,
.footer-bottom {color:#fff}

/* ===== Sticky CTA (mobile) ===== */
@media (max-width:820px){
  .sticky-cta{
    position:fixed;left:12px;right:12px;bottom:12px;z-index:1100;
    background:#fff;border:1px solid var(--stroke);border-radius:16px;
    box-shadow:0 10px 30px rgba(0,0,0,.18);
    backdrop-filter:blur(6px);
    padding:10px;text-align:center;
  }
  .sticky-cta a{color:#111;font-weight:800}
}