/* ============================================================================
   E-Waste Center Pune — shared design tokens
   Extracted from the live homepage (https://ewastecenterpune.online/) on
   2026-10-19. This is the ONLY design source of truth. Do not invent tokens.

   Homepage measured values (hydrated, real Chrome, 2026-10-19):
     body bg        #F5F5F0      body text      #1E293B
     brand green    #2E7D32      accent blue    #1565C0
     emerald CTA    #047857      borders        #e2e8f0
     muted text     #64748b      footer/hdr bar #1E293B
     container      1280px       card radius    12px
     button radius  8px          h1             60px / 900 (desktop), 36px h2 / 800
     header border  1px #e2e8f0 body p         18px / 1.625
     body font-size 16px         font stack     system-ui

   Loaded AFTER the page-level <style> so these win.
   ============================================================================ */

:root{
  --g:#2E7D32;
  --g-dark:#1B5E20;
  --blue:#1565C0;
  --emerald:#047857;
  --bg:#F5F5F0;
  --ink:#1E293B;
  --mut:#64748b;
  --line:#e2e8f0;
  --surface:#ffffff;
  --slate-bar:#1E293B;
  --radius-card:12px;
  --radius-btn:8px;
  --maxw:1280px;
}

/* ---------- base ---------- */
body{
  background:var(--bg) !important;
  color:var(--ink) !important;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}

/* ---------- containers: match homepage 1200px measure ---------- */
.wrap{max-width:var(--maxw) !important;margin:0 auto;padding:0 20px;}

/* ---------- heading scale: homepage h2 is 36px/800 ---------- */
h1{font-size:60px !important;font-weight:900 !important;line-height:1.15 !important;color:var(--ink) !important;letter-spacing:-0.01em;}
h2{font-size:36px !important;font-weight:800 !important;line-height:1.25 !important;color:var(--ink) !important;margin:1.9em 0 .5em;}
h3{font-size:18px !important;font-weight:700 !important;color:var(--ink) !important;}
p,li{color:#334155;font-size:18px;line-height:1.625;}
.lead{font-size:18px !important;color:#334155 !important;line-height:1.65;}

/* ---------- article card: homepage card = 12px radius, 1px #e2e8f0 ---------- */
article{
  background:var(--surface) !important;
  border:1px solid var(--line) !important;
  border-radius:var(--radius-card) !important;
  padding:36px !important;
  max-width:var(--maxw) !important;
  margin:28px auto !important;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}

/* ---------- header: match homepage header ---------- */
header{
  background:#fff !important;
  border-bottom:1px solid var(--line) !important;
  padding:16px 20px !important;
  position:sticky;top:0;z-index:40;
  box-shadow:0 1px 2px rgba(15,23,42,.05);
}
.hdr{max-width:var(--maxw) !important;}
.brand{color:var(--g) !important;font-size:24px !important;font-weight:800 !important;letter-spacing:-0.01em;}
.hdr nav a{color:var(--ink) !important;font-size:14px !important;font-weight:500;margin-left:16px;}
.hdr nav a:hover{color:var(--g) !important;}

/* ---------- CTA buttons: homepage radius 8px, weight 700 ---------- */
.cta{
  background:var(--g) !important;
  color:#fff !important;
  border-radius:var(--radius-btn) !important;
  padding:11px 20px !important;
  font-weight:700 !important;
  font-size:15px;
  text-decoration:none !important;
  display:inline-block;
  transition:background .15s ease;
}
.cta:hover{background:var(--g-dark) !important;}
a.cta{color:#fff !important;}

/* ---------- links ---------- */
a{color:var(--g);}
a:hover{color:var(--g-dark);}
article a{color:var(--g) !important;}
article a.cta{color:#fff !important;}

/* ---------- breadcrumbs ---------- */
.crumbs{font-size:13px;color:var(--mut) !important;margin:0 0 18px;}
.crumbs a{color:var(--mut) !important;text-decoration:none;}
.crumbs a:hover{color:var(--g) !important;text-decoration:underline;}

/* ---------- kicker ---------- */
.kicker{color:var(--g) !important;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:12px;}

/* ---------- images: homepage card radius ---------- */
img.hero{width:100%;height:auto;border-radius:var(--radius-card) !important;margin:14px 0 6px;}

/* ---------- FAQ accordion: match homepage card styling ---------- */
details{
  border:1px solid var(--line) !important;
  border-radius:var(--radius-card) !important;
  background:var(--surface) !important;
  padding:16px 20px !important;
  margin:12px 0 !important;
}
details summary{font-weight:700;cursor:pointer;color:var(--ink);}
details p{margin:10px 0 0;line-height:1.7;color:#334155;}

/* ---------- footer: homepage uses #1E293B slate, NOT green ---------- */
footer{
  background:var(--slate-bar) !important;
  color:#cbd5e1 !important;
  padding:40px 20px 32px !important;
  margin-top:48px;
  border-top:1px solid #0f172a;
}
footer .wrap{max-width:var(--maxw);}
footer strong{color:#fff !important;}
footer a{color:#94d3a2 !important;text-decoration:none;}
footer a:hover{color:#fff !important;text-decoration:underline;}
footer .nap{font-size:14px;line-height:1.8;}

/* ---------- multi-column link lists ---------- */
ul.links{columns:2;column-gap:32px;padding-left:20px;}
ul.links li{margin-bottom:6px;}

/* ---------- mobile: match homepage responsive behaviour ---------- */
@media(max-width:768px){
  .wrap{padding:0 16px;}
  article{padding:22px !important;margin:16px auto !important;border-radius:var(--radius-card) !important;}
  h1{font-size:34px !important;}
  h2{font-size:30px !important;}
  h3{font-size:18px !important;}
  p,li{font-size:16px;}
  header{padding:12px 16px !important;}
  .brand{font-size:20px !important;}
  .hdr{flex-wrap:wrap;gap:10px;}
  .hdr nav{width:100%;margin-top:4px;}
  .hdr nav a{margin-left:0;margin-right:14px;font-size:13px;}
  .cta{width:100%;text-align:center;padding:12px 16px !important;}
  ul.links{columns:1;}
  footer{padding:28px 16px 24px !important;}
}
@media(max-width:480px){
  article{padding:18px !important;}
  h1{font-size:30px !important;}
  h2{font-size:30px !important;}
}

/* tablet */
@media(min-width:769px) and (max-width:1024px){
  h1{font-size:44px !important;}
  h2{font-size:30px !important;}
}