/* ============================================================
   WeatherEngland.com — Design System 2026
   Mobile-first, card-based, light + dark (prefers-color-scheme)
   ============================================================ */

/* ------------------------------
   1) Design tokens (Light)
-------------------------------- */
:root{
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'SF Mono','Fira Code',monospace;

  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:20px;--s-6:24px;--s-8:32px;--s-10:40px;--s-12:48px;--s-16:64px;

  --text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:2rem;--text-4xl:2.75rem;

  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;

  --bg-body:#F1F5F9;
  --bg-card:#FFF;
  --bg-card-hover:#F8FAFC;

  --bg-hero:linear-gradient(135deg,#0F172A 0%,#1E2A3A 55%,#243245 100%);
  --bg-sticky:rgba(255,255,255,.85);
  --text-on-hero:#F1F5F9;
  --text-primary:#0F172A;
  --text-secondary:#475569;
  --text-muted:#94A3B8;
  --text-inverse:#F1F5F9;

  --border:#E2E8F0;
  --border-hover:#CBD5E1;

  --shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 12px rgba(0,0,0,.06);
  --shadow-lg:0 8px 24px rgba(0,0,0,.08);

  --temp-cold:#3B82F6;
  --temp-cool:#06B6D4;
  --temp-mild:#10B981;
  --temp-warm:#F59E0B;
  --temp-hot:#EF4444;

  /* BRAND ACCENT (AMBER) */
  --accent:#F79C27;
  --accent-hover:#E88716;
  --accent-ink:#1F1407;
  --accent-soft:rgba(247,156,39,.14);
  --accent-ring:rgba(247,156,39,.28);
  --accent-light:#FFF2E0;

  /* INTENT (semantic) colors */
  --intent-overview:#64748B;
  --intent-forecast:#3B82F6;
  --intent-rain:#38BDF8;
  --intent-wind:#8B5CF6;
  --intent-uv:#22C55E;
  --intent-sun:#F59E0B;
  --intent-pressure:#14B8A6;

  /* Chart colors (semantic) */
  --chart-overview: var(--intent-overview);
  --chart-forecast: var(--intent-forecast);
  --chart-rain: var(--intent-rain);
  --chart-wind: var(--intent-wind);
  --chart-gust:#EC4899;
  --chart-humidity:#06B6D4;
  --chart-pressure: var(--intent-pressure);
  --chart-sun: var(--intent-sun);
  --chart-uv: var(--intent-sun);
  --chart-uv-soft: rgba(245,158,11,.12);

  /* UV levels (fixed) */
  --uv-low:#10B981;
  --uv-moderate:#F59E0B;
  --uv-high:#F97316;
  --uv-very-high:#EF4444;
  --uv-extreme:#7C3AED;

  /* Header height token (used by city-nav sticky offset) */
  --header-h:60px;
}

/* ------------------------------
   2) Design tokens (Dark)
-------------------------------- */
@media(prefers-color-scheme:dark){
  :root{
    --bg-body:#0B1120;
    --bg-card:#1E293B;
    --bg-card-hover:#283548;

    --bg-hero:linear-gradient(135deg,#0B1120 0%,#1a2744 50%,#0F172A 100%);
    --bg-sticky:rgba(30,41,59,.9);

    --text-primary:#F1F5F9;
    --text-secondary:#94A3B8;
    --text-muted:#64748B;
    --text-inverse:#0F172A;

    --border:#334155;
    --border-hover:#475569;

    --shadow-sm:0 1px 2px rgba(0,0,0,.2);
    --shadow-md:0 4px 12px rgba(0,0,0,.3);
    --shadow-lg:0 8px 24px rgba(0,0,0,.4);

    /* BRAND ACCENT (AMBER) - dark */
    --accent:#F79C27;
    --accent-hover:#FFB35A;
    --accent-ink:#1A1208;
    --accent-soft:rgba(247,156,39,.18);
    --accent-ring:rgba(247,156,39,.34);
    --accent-light:#3A2A16;

    /* INTENTS - dark tuned */
    --intent-overview:#94A3B8;
    --intent-forecast:#60A5FA;
    --intent-rain:#38BDF8;
    --intent-wind:#A78BFA;
    --intent-uv:#34D399;
    --intent-sun:#FBBF24;
    --intent-pressure:#2DD4BF;

    /* Charts follow intents */
    --chart-overview: var(--intent-overview);
    --chart-forecast: var(--intent-forecast);
    --chart-rain: var(--intent-rain);
    --chart-wind: var(--intent-wind);
    --chart-pressure: var(--intent-pressure);
    --chart-sun: var(--intent-sun);
    --chart-uv: var(--intent-sun);
    --chart-uv-soft: rgba(251,191,36,.14);
  }
}

/* ------------------------------
   3) Semantic helpers
-------------------------------- */
.uv-low{color:var(--uv-low)}
.uv-moderate{color:var(--uv-moderate)}
.uv-high{color:var(--uv-high)}
.uv-very-high{color:var(--uv-very-high)}
.uv-extreme{color:var(--uv-extreme)}

/* ------------------------------
   4) Base / Reset
-------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-sans);background:var(--bg-body);color:var(--text-primary);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none;transition:color .15s}
a:hover{color:var(--accent-hover)}

/* iOS/Safari tap flash */
a,button{-webkit-tap-highlight-color:transparent}

/* Accessibility */
.skip-link{position:absolute;left:-9999px;top:auto;z-index:9999;padding:var(--s-3) var(--s-4);background:var(--accent);color:#fff;border-radius:var(--radius-sm)}
.skip-link:focus{left:var(--s-4);top:var(--s-4)}

.container{max-width:1200px;margin:0 auto;padding:0 var(--s-4)}
@media(min-width:640px){.container{padding:0 var(--s-6)}}

/* ------------------------------
   5) Header / Nav / Logo
-------------------------------- */
.site-header{
  background:var(--bg-card);
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:100;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

/* Desktop: single row, fixed 60px */
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:var(--header-h);
  gap:var(--s-3);
}

/* Mobile: wrap to two rows (logo+toggle row, nav row) */
@media(max-width:767px){
  .header-inner{
    flex-wrap:wrap;
    height:auto;
    min-height:var(--header-h);
    padding-top:var(--s-2);
    padding-bottom:0;
  }
  /* Row 1: logo (left) + unit-toggle (right) */
  .logo{order:1}
  .unit-toggle{order:2;margin-left:auto}
  /* Row 2: nav spans full width */
  .header-nav{order:3}
}

/* Logo */
.logo{
  display:flex;
  align-items:baseline;
  gap:2px;
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1;
  font-size:1.4rem;
  flex-shrink:0;
}
@media(min-width:640px){.logo{font-size:1.55rem}}
.logo-text{color:var(--text-primary)}
.logo-accent{color:var(--accent)}
.logo-dot{
  color:var(--text-muted);
  font-weight:600;
  opacity:.55;
  font-size:.92em;
  transform:translateY(-1px);
}

/* Hamburger button: still in header.php, just hidden everywhere now.
   Kept as display:none so no HTML change is needed in header.php */
.nav-toggle{display:none}

/* ---- Main nav ---- */
/* Base: horizontal scrollable row */
.header-nav{
  display:flex;
  gap:var(--s-6);
  align-items:center;
  overflow-x:auto;
  scrollbar-width:none;
}
.header-nav::-webkit-scrollbar{display:none}

/* Mobile: full-width second row, scrollable like city-nav */
@media(max-width:767px){
  .header-nav{
    width:100%;
    flex:0 0 100%;
    gap:var(--s-1);
    padding:var(--s-2) 0;
    border-top:1px solid var(--border);
    overflow-x:auto;
    overflow-y:visible;
    -webkit-overflow-scrolling:touch;
  }
}

/* Nav links (shared) */
.header-nav a{
  position:relative;
  padding:6px 0;
  font-size:var(--text-base);
  font-weight:700;
  letter-spacing:.02em;
  color:var(--text-secondary);
  text-decoration:none;
  opacity:.92;
  transition:color .15s ease, opacity .15s ease;
  white-space:nowrap;
}
.header-nav a:hover{color:var(--accent);opacity:1}

/* Mobile: pill-style nav links (like city-nav) */
@media(max-width:767px){
  .header-nav a{
    font-size:var(--text-sm);
    padding:var(--s-1) var(--s-3);
    border-radius:999px;
  }
  .header-nav a[aria-current="page"],
  .header-nav a.is-active{
    background:var(--accent-soft);
  }
}

/* Desktop underline effect */
.header-nav a::after{
  content:'';
  position:absolute;
  left:0; bottom:-8px;
  width:100%; height:2px;
  border-radius:2px;
  background:var(--accent);
  opacity:0;
  transform:scaleX(.85);
  transform-origin:center;
  transition:opacity .15s ease, transform .15s ease;
  pointer-events:none;
}
@media(max-width:767px){
  .header-nav a::after{display:none}
}
.header-nav a:hover::after{opacity:.7;transform:scaleX(1)}

.header-nav a[aria-current="page"],
.header-nav a.is-active{
  color:var(--accent);
  opacity:1;
}
.header-nav a[aria-current="page"]::after,
.header-nav a.is-active::after{
  opacity:1;
  transform:scaleX(1);
}

/* Unit toggle */
.unit-toggle{display:flex;background:var(--bg-body);border-radius:999px;padding:2px;border:1px solid var(--border);flex-shrink:0}
.unit-btn{
  border:none;background:0;
  padding:var(--s-1) var(--s-3);
  font-size:var(--text-sm);
  font-weight:700;
  cursor:pointer;
  border-radius:999px;
  color:var(--text-muted);
  transition:all .2s;
  min-width:36px;
  font-family:var(--font-sans);
}
.unit-btn.active{background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow-sm)}

/* ------------------------------
   6) Breadcrumbs
-------------------------------- */
.breadcrumbs{background:var(--bg-card);border-bottom:1px solid var(--border)}
.breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1);list-style:none;padding:var(--s-2) 0;font-size:var(--text-sm)}
.breadcrumbs li{display:flex;align-items:center;gap:var(--s-1);color:var(--text-muted)}
.breadcrumbs li+li::before{content:'›';color:var(--text-muted);margin-right:var(--s-1)}
.breadcrumbs a{color:var(--text-secondary)}
.breadcrumbs a:hover{color:var(--accent)}
.breadcrumbs [aria-current]{color:#2d343e;font-weight:600}

/* ------------------------------
   7) Hero
-------------------------------- */
.hero{
  background:var(--bg-hero);
  color:var(--text-on-hero);
  padding:var(--s-10) 0;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.hero::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 420px at 28% 45%, rgba(247,156,39,.18) 0%, transparent 60%),
    radial-gradient(700px 420px at 78% 18%, rgba(255,200,120,.08) 0%, transparent 62%);
  pointer-events:none;
}
.hero::before{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:3px;
  background:linear-gradient(90deg, transparent 0%, rgba(247,156,39,.65) 35%, rgba(255,200,120,.35) 65%, transparent 100%);
  opacity:.75;
}
.hero .container{position:relative;z-index:1}
.hero-city{font-size:var(--text-3xl);font-weight:800;margin-bottom:var(--s-1)}
.hero-county{font-size:var(--text-lg);opacity:.7;margin-bottom:var(--s-4)}
.hero-nation{display:inline-block;font-size:var(--text-sm);background:rgba(255,255,255,.15);padding:var(--s-1) var(--s-3);border-radius:999px;margin-bottom:var(--s-4)}
.hero-temp{font-size:var(--text-4xl);font-weight:800;font-family:var(--font-mono);letter-spacing:-.02em}
.hero-condition{font-size:var(--text-lg);opacity:.85;margin-top:var(--s-2)}
.hero-meta{display:flex;gap:var(--s-6);margin-top:var(--s-6);font-size:var(--text-sm);opacity:.65;flex-wrap:wrap}
.hero-updated{position:absolute;top:var(--s-4);right:var(--s-4);font-size:var(--text-xs);opacity:.5}
@media(min-width:640px){
  .hero{padding:var(--s-16) 0 var(--s-12)}
  .hero-city{font-size:var(--text-4xl)}
}

/* ------------------------------
   8) Sections / Grid / Cards
-------------------------------- */
.section{padding:var(--s-8) 0}
.section-title{font-size:var(--text-2xl);font-weight:800;margin-bottom:var(--s-6)}
.section-sub{font-size:var(--text-sm);color:var(--text-muted);margin-top:calc(-1*var(--s-4));margin-bottom:var(--s-6)}

.section:last-of-type{margin-top:40px;}

.grid{display:grid;gap:var(--s-4)}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:1fr 1fr}
@media(min-width:640px){
  .grid-2{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr 1fr}
}
@media(min-width:1024px){
  .grid-3{grid-template-columns:1fr 1fr 1fr}
  .grid-4{grid-template-columns:1fr 1fr 1fr 1fr}
}

.card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--s-6);
  box-shadow:var(--shadow-sm);
  transition:box-shadow .2s,border-color .2s,transform .2s;
}
.card:hover{box-shadow:var(--shadow-md);border-color:var(--border-hover)}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s-4);gap:var(--s-3)}
.card-title{font-size:var(--text-lg);font-weight:700}
.card-badge{font-size:var(--text-xs);font-weight:700;padding:var(--s-1) var(--s-2);border-radius:999px;background:var(--accent-light);color:var(--accent)}

.data-row{display:flex;justify-content:space-between;align-items:baseline;padding:var(--s-2) 0;border-bottom:1px solid var(--border)}
.data-row:last-child{border-bottom:none}
.data-label{font-size:var(--text-sm);color:var(--text-secondary)}
.data-value{font-family:var(--font-mono);font-weight:800;font-size:var(--text-base)}

/* ------------------------------
   9) City Nav (intent pills bar)
-------------------------------- */
.city-nav{
  position:sticky;
  top:var(--header-h);
  z-index:90;
  background:var(--bg-sticky);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
  overflow-x:auto;
  scrollbar-width:none;
}
.city-nav::-webkit-scrollbar{display:none}
.city-nav-inner{display:flex;gap:var(--s-1);padding:var(--s-2) 0;min-width:max-content}
.city-nav a{
  display:inline-block;
  padding:var(--s-2) var(--s-4);
  font-size:var(--text-sm);
  font-weight:700;
  white-space:nowrap;
  border-radius:999px;
  color:var(--text-secondary);
  transition:all .15s;
}
.city-nav a:hover{background:var(--accent-light);color:var(--accent)}
.city-nav a.active{
  background:linear-gradient(180deg, rgba(247,156,39,.18), rgba(247,156,39,.10));
  color:var(--accent);
  border:1px solid rgba(247,156,39,.40);
}

/* ------------------------------
   10) City link cards + Nearby cards
-------------------------------- */
.city-link-card,
.nearby-grid a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:var(--s-4);
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  text-decoration:none;
  transition:all .15s;
  color:inherit;
}
.city-link-card:hover,
.nearby-grid a:hover{
  border-color:var(--accent);
  box-shadow:var(--shadow-md);
  transform:translateY(-1px);
}
.city-link-name{font-weight:800;color:var(--text-primary)}
.city-link-pop{font-size:var(--text-xs);color:var(--text-muted)}

.nearby-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
@media(min-width:640px){.nearby-grid{grid-template-columns:repeat(4,1fr)}}

/* ------------------------------
   11) Forecast grid
-------------------------------- */
.forecast-grid{display:grid;gap:var(--s-3)}
.forecast-day{
  display:grid;
  grid-template-columns:1fr auto auto auto;
  align-items:center;
  gap:var(--s-3) var(--s-4);
  padding:var(--s-3) var(--s-4);
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
}
.forecast-day-name{font-weight:800;font-size:var(--text-sm)}
.forecast-day-date{font-size:var(--text-xs);color:var(--text-muted)}
.forecast-day-temps{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:800}
.forecast-day-rain{font-size:var(--text-sm);color:var(--temp-cool)}
@media(min-width:640px){.forecast-day{grid-template-columns:120px 1fr auto auto auto auto}}

/* ------------------------------
   12) Charts
-------------------------------- */
.chart-wrap{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--s-4);
  position:relative;
}
.chart-wrap canvas{width:100%!important;max-height:280px}
.chart-wrap::before{
  content:'';
  position:absolute;
  left:14px; top:14px;
  width:10px; height:10px;
  border-radius:999px;
  background:var(--accent);
  box-shadow:0 0 0 6px var(--accent-soft);
  opacity:.95;
}

/* ------------------------------
   13) Search (hero)
-------------------------------- */
.hero{overflow:visible}
.search-wrap{position:relative;max-width:480px;margin-top:var(--s-6)}
.search-box{
  position:relative;
  display:flex;
  align-items:center;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.search-box:focus-within{
  border-color:rgba(255,255,255,.28);
  box-shadow:0 0 0 3px rgba(255,255,255,.18);
  background:rgba(255,255,255,.12);
  outline:none;
}
.search-icon{
  position:absolute;
  left:var(--s-4);
  top:50%;
  transform:translateY(-50%);
  color:rgba(255,255,255,.55);
  width:18px;height:18px;
  pointer-events:none;
}
.search-input{
  width:100%;
  padding:var(--s-4) var(--s-6) var(--s-4) var(--s-10);
  border:0;
  outline:0;
  background:transparent;
  color:#fff;
  font-size:var(--text-base);
  font-family:var(--font-sans);
  box-shadow:none;
  -webkit-appearance:none;
}
.search-input::placeholder{color:rgba(255,255,255,.55)}
.search-input:focus,
.search-input:focus-visible{outline:none!important;box-shadow:none!important}

/* Autocomplete dropdown */
.search-results{
  position:absolute;
  left:0;right:0;
  top:calc(100% + 10px);
  z-index:60;
  background:#0f172a;
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-lg);
  box-shadow:0 25px 60px rgba(0,0,0,.55);
  max-height:320px;
  overflow:auto;
  display:none;
}
.search-results.is-open{display:block}
.sr-item{
  display:block;
  padding:12px 16px;
  font-size:15px;
  color:rgba(255,255,255,.92);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.05);
  transition:background .15s ease,color .15s ease;
}
.sr-item:last-child{border-bottom:none}
.sr-item:hover,
.sr-item.is-active{background:rgba(255,255,255,.18);color:#fff}
.sr-item.is-active{border-left:3px solid rgba(255,255,255,.45);padding-left:13px}
.search-results::-webkit-scrollbar{width:10px}
.search-results::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px}
.search-results::-webkit-scrollbar-track{background:transparent}

/* ------------------------------
   14) FAQ
-------------------------------- */
.faq-item{border-bottom:1px solid var(--border);padding:var(--s-4) 0}
.faq-item:last-child{border-bottom:none}
.faq-q{font-weight:800;margin-bottom:var(--s-2)}
.faq-a{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.7}

/* ------------------------------
   15) Buttons
-------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  padding:var(--s-3) var(--s-6);
  background:var(--accent);
  color:var(--accent-ink);
  border:none;
  border-radius:999px;
  font-weight:900;
  font-size:var(--text-sm);
  cursor:pointer;
  transition:all .15s;
  font-family:var(--font-sans);
  text-decoration:none;
  box-shadow:var(--shadow-sm);
}
.btn:hover{
  background:var(--accent-hover);
  color:var(--accent-ink);
  transform:translateY(-1px);
  box-shadow:var(--shadow-md);
}
.btn-outline{background:0;color:var(--accent);border:1.5px solid var(--accent)}
.btn-outline:hover{background:var(--accent-light);color:var(--accent)}

/* ------------------------------
   16) Map
-------------------------------- */
.map-container{border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);background:var(--bg-card);min-height:300px}
.map-container iframe{width:100%;height:400px;border:none;display:block}
.map-placeholder{display:flex;align-items:center;justify-content:center;min-height:300px;color:var(--text-muted);font-size:var(--text-sm)}

/* ------------------------------
   17) Intent pills (generic)
-------------------------------- */
.intent-pills{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.intent-pill{
  display:inline-flex;
  align-items:center;
  gap:var(--s-1);
  padding:var(--s-2) var(--s-4);
  border-radius:999px;
  font-size:var(--text-sm);
  font-weight:700;
  background:var(--bg-card);
  border:1px solid var(--border);
  color:var(--text-secondary);
  transition:all .15s;
}
.intent-pill:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}

/* ------------------------------
   18) County list
-------------------------------- */
.county-list{columns:1;gap:var(--s-4);list-style:none}
@media(min-width:640px){.county-list{columns:2}}
@media(min-width:1024px){.county-list{columns:3}}
.county-list li{break-inside:avoid;padding:var(--s-2) 0;border-bottom:1px solid var(--border)}
.county-list a{display:flex;justify-content:space-between;color:var(--text-primary)}
.county-list .count{color:var(--text-muted);font-size:var(--text-sm)}

/* ------------------------------
   19) Footer
-------------------------------- */
.site-footer .footer-desc{
  font-size:var(--text-sm);
  color:var(--text-secondary);
  line-height:1.7;
  max-width:32ch;
  opacity:.9;
}

.site-footer .footer-inner{padding-top:40px;padding-bottom:24px}

.footer-title{
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:12px;
  opacity:.75;
  margin:0 0 14px;
}

.footer-links{list-style:none;padding:0;margin:0}
.footer-links li{margin:10px 0}
.footer-links a{text-decoration:none}
.footer-links a:hover{text-decoration:underline}

.footer-divider{
  border:0;
  border-top:1px solid var(--border);
  margin:26px 0;
  opacity:.9;
}

.footer-grid{display:grid;gap:28px 40px}
.footer-grid--primary{grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;align-items:start}
.footer-grid--meta{grid-template-columns:1.2fr 1.6fr 1fr;align-items:start}

.footer-col--right{justify-self:end;text-align:right}

.footer-links--inline li{margin:8px 0}
.footer-links--inline span{opacity:.9}

.footer-bottom{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--border);
  text-align:center;
  opacity:.8;
  font-size:14px;
  color:var(--text-muted);
}

@media (max-width:1100px){
  .footer-grid--primary{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .footer-grid--meta{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .footer-col--right{justify-self:start;text-align:left}
  .footer-desc{max-width:none}
}

@media (max-width:640px){
  .footer-grid--primary{grid-template-columns:1fr}
  .footer-grid--meta{grid-template-columns:1fr}
}

/* Back-compat if old markup still uses these */
.footer-col h4{font-size:var(--text-sm);font-weight:900;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:var(--s-3)}
.footer-links li{font-size:var(--text-sm);color:var(--text-secondary);padding:var(--s-1) 0}
.footer-links a{color:var(--text-secondary)}
.footer-links a:hover{color:var(--accent)}
.footer-bottom{font-size:var(--text-xs)}

/* ------------------------------
   20) Tables
-------------------------------- */
.tbl{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.tbl thead tr{background:var(--bg-body);border-bottom:2px solid var(--border)}
.tbl th,.tbl td{padding:var(--s-3);text-align:center}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl tbody tr{border-bottom:1px solid var(--border)}
.tbl td:first-child{font-weight:800}

/* ------------------------------
   21) Utilities
-------------------------------- */
.text-center{text-align:center}
.text-muted{color:var(--text-muted)}
.mt-4{margin-top:var(--s-4)}
.mt-8{margin-top:var(--s-8)}
.mb-4{margin-bottom:var(--s-4)}
.mb-8{margin-bottom:var(--s-8)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.err-pg{display:flex;min-height:100vh;align-items:center;justify-content:center}

/* ------------------------------
   22) Focus (global, brand)
-------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
  box-shadow:0 0 0 6px var(--accent-ring);
}

/* ------------------------------
   23) Media (advertising & section sponsorship)
-------------------------------- */

.media-preview {
  position: relative;
  margin: 30px 0;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.media-preview img {
  width: 100%;
  height: auto;
  display: block;
}

.ad-overlay {
  position: absolute;
  top: 18%;
  right: 8%;
  width: 28%;
  height: 18%;
  border: 2px solid #ffcc00;
  background: rgba(255, 204, 0, 0.15);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: #ffcc00;
  text-align: center;
  pointer-events: none;
}

/* ------------------------------
   23) Glossary (glossary-item & glossary-toggle)
-------------------------------- */

  .glossary-item { border-bottom:1px solid var(--border); }
  .glossary-toggle {
    width:100%;
    background:none;
    border:0;
    text-align:left;
    padding:16px 0;
    font-size:1rem;
    font-weight:600;
    cursor:pointer;
    position:relative;
  }
  .glossary-toggle::after {
    content:"+";
    position:absolute;
    right:0;
    font-weight:700;
  }
  .glossary-toggle[aria-expanded="true"]::after {
    content:"−";
  }
  .glossary-content {
    display:none;
    padding:0 0 16px 0;
  }
  .glossary-content.open {
    display:block;
  }
  .glossary-readmore a {
    font-size:0.9rem;
    font-weight:600;
  }
  
  .glossary-abc { margin: 18px 0 26px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,0.02); }
  .glossary-abc-title { margin: 0 0 10px; opacity: 0.95; }
  .glossary-abc-nav { display: flex; flex-wrap: wrap; gap: 8px; }
  .glossary-abc-nav a { display: inline-block; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 0.92rem; }
  .glossary-abc-nav a:hover { text-decoration: none; }
  
  .glossary-abc-nav a.is-disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

.glossary-readmore.disabled {
  opacity: 0;
  font-size: 0.9rem;
}

/* =====================================================
   Header dropdown (Guides)
===================================================== */

@media (min-width:768px){
  .header-nav{overflow:visible}
}

.nav-item.has-dropdown{
  position:relative;
}

.nav-item.has-dropdown > a{
  position:relative;
  padding-right:16px;
}

.nav-item.has-dropdown > a::before{
  content:"▾";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-46%);
  font-size:.7em;
  opacity:.7;
  pointer-events:none;
}

@media (min-width:768px){
  .nav-item.has-dropdown::after{
    content:"";
    position:absolute;
    left:-6px;
    right:-6px;
    top:100%;
    height:10px;
  }
}

/* Dropdown panel (desktop default: absolute, hidden) */
.dropdown{
  position:absolute;
  top:100%;
  left:0;
  min-width:220px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg);
  padding:8px 0;
  z-index:9999;
  overflow:hidden;

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-6px);
  transition:opacity .14s ease, transform .14s ease, visibility 0s linear .14s;
}

/* Desktop: hover/focus reveal */
@media (min-width:768px){
  .nav-item.has-dropdown:hover .dropdown,
  .nav-item.has-dropdown:focus-within .dropdown{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
    transition:opacity .14s ease, transform .14s ease, visibility 0s;
  }
}

/* Mobile: dropdown opens ABOVE content (not inline accordion)
   — positioned below header, full width, high z-index */
@media (max-width:767px){
  .nav-item.has-dropdown{
    position:static;
  }
  .dropdown{
    position:fixed;
    top:auto;
    left:0;
    right:0;
    min-width:0;
    width:100%;
    border-radius:0 0 var(--radius-md) var(--radius-md);
    max-height:60vh;
    overflow-y:auto;
    z-index:9999;
  }
  .nav-item.open .dropdown{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
    transition:opacity .14s ease, transform .14s ease, visibility 0s;
  }
}

/* JS-triggered open state (both mobile + desktop) */
.nav-item.open .dropdown{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
  transition:opacity .14s ease, transform .14s ease, visibility 0s;
}

/* Dropdown link styles */
.dropdown a{
  display:block;
  padding:10px 16px;
  font-size:var(--text-sm);
  font-weight:600;
  color:var(--text-secondary);
  border-bottom:none!important;
  box-shadow:none!important;
}

.dropdown a:hover{
  background:var(--accent-light);
  color:var(--accent);
}

.dropdown a[aria-current="page"]{
  background:var(--accent-light);
  color:var(--accent);
}