/* ─── DESIGN SYSTEM TOKEN OVERRIDES (light→dark) ─── */
/* Pages that load design-system/tokens.css get light defaults.
   These overrides remap them to dark-theme values. */
:root{
  --paper:        #0e1116 !important;
  --paper-2:      #14181f !important;
  --paper-3:      #1a1f2e !important;
  --line:         rgba(255,255,255,.08) !important;
  --line-strong:  rgba(255,255,255,.15) !important;
  --ink:          #fafafa !important;
  --ink-2:        #d4d4d8 !important;
  --ink-3:        #a1a1aa !important;
  --ink-4:        #71717a !important;
  --panel:        #080a0e !important;
  --panel-2:      #14181f !important;
  --panel-3:      #1c2129 !important;
  --panel-line:   rgba(255,255,255,.1) !important;
  --panel-line-2: rgba(255,255,255,.18) !important;
  --on-panel:     #fafafa !important;
  --on-panel-2:   #d4d4d8 !important;
  --on-panel-3:   #a1a1aa !important;
  --amber:        #E3AF25 !important;
  --amber-bright: #fbbf24 !important;
  --amber-deep:   #E3AF25 !important;
  --green:        #4ade80 !important;
  --green-deep:   #22c55e !important;
  --red:          #ef4444 !important;
  --blue:         #60a5fa !important;
  --ice:          #60a5fa !important;
  --orange:       #f97316 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   KERR DESIGN SYSTEM — Unified dark palette across all pages
   Author: Claude for Errol Kerr
   Date: May 31, 2026
   
   This file is the SINGLE source of truth for colors, typography, and 
   spacing across errolkerr.com. Every page loads this file.
   
   RULE: Light text on dark background. Always readable in direct sunlight.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ─── PALETTE ─── */
:root{
  /* Backgrounds */
  --kerr-bg:          #0e1116;
  --kerr-bg-raised:   #14181f;
  --kerr-bg-card:     #1a1f2e;
  --kerr-bg-hover:    rgba(227,175,37,.08);
  
  /* Text */
  --kerr-text:        #fafafa;    /* primary — white */
  --kerr-text-2:      #d4d4d8;   /* secondary — zinc-300 */
  --kerr-text-3:      #a1a1aa;   /* muted — zinc-400 */
  --kerr-text-4:      #71717a;   /* faint — zinc-500 */
  
  /* Brand */
  --kerr-gold:        #E3AF25;   /* primary accent */
  --kerr-gold-dim:    rgba(227,175,37,.6);
  --kerr-gold-bg:     rgba(227,175,37,.12);
  
  /* Status */
  --kerr-green:       #4ade80;
  --kerr-blue:        #60a5fa;
  --kerr-amber:       #fbbf24;
  --kerr-red:         #ef4444;
  --kerr-orange:      #f97316;
  
  /* Borders */
  --kerr-border:      rgba(255,255,255,.08);
  --kerr-border-gold: rgba(227,175,37,.25);
  
  /* Fonts — Inter for body (designed for screens), Chakra Petch for headers */
  --kerr-font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --kerr-mono:        'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
  --kerr-display:     'Chakra Petch', -apple-system, sans-serif;
  
  /* Font sizes — bigger for outdoor readability */
  --kerr-fs-xs:       12px;
  --kerr-fs-sm:       14px;
  --kerr-fs-base:     16px;
  --kerr-fs-md:       18px;
  --kerr-fs-lg:       20px;
  --kerr-fs-xl:       24px;
  --kerr-fs-2xl:      30px;
  --kerr-fs-3xl:      36px;
}

/* ─── GLOBAL RESET ─── */
body{
  background: var(--kerr-bg);
  color: var(--kerr-text-2);
  font-family: var(--kerr-font);
  font-size: var(--kerr-fs-base);
  line-height: 1.65;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv01', 'cv02', 'cv03';
}

/* ─── TYPOGRAPHY ─── */
h1, h2, h3, h4, h5, h6{
  color: var(--kerr-text);
  font-family: var(--kerr-display);
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.2;
}
h1{ font-size: clamp(32px, 6vw, 52px); }
h2{ font-size: clamp(26px, 4.5vw, 40px); }
h3{ font-size: clamp(20px, 3.5vw, 28px); }
h4{ font-size: var(--kerr-fs-lg); }

p, li, td, th, label{
  color: var(--kerr-text-2);
  font-size: var(--kerr-fs-base);
  line-height: 1.7;
  font-weight: 400;
}

a{
  color: var(--kerr-blue);
  text-decoration: none;
  transition: color .15s;
}
a:hover{
  color: #93c5fd;
}

/* ─── CARDS ─── */
.card, .wx-section, [class*="card"]{
  background: var(--kerr-bg-raised);
  border: 1px solid var(--kerr-border);
  border-radius: 12px;
}

/* ─── BUTTONS ─── */
button, .btn, [class*="btn"]{
  color: var(--kerr-text-2);
  font-weight: 700;
  min-height: 44px;
  cursor: pointer;
  transition: all .15s;
}
button:hover, .btn:hover{
  color: var(--kerr-text);
}

/* ─── NAV ─── */
header, .site-header, [class*="header"]{
  background: rgba(14,17,22,.95);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--kerr-border-gold);
}

header a, nav a, .nl{
  color: var(--kerr-text) !important;
  font-family: var(--kerr-display);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
header a:hover, nav a:hover{
  color: var(--kerr-gold) !important;
}
.nl.active, [aria-current="page"]{
  color: var(--kerr-gold) !important;
}

/* ─── INPUTS ─── */
input, select, textarea{
  color: var(--kerr-text);
  background: var(--kerr-bg-raised);
  border: 1px solid var(--kerr-border);
  border-radius: 8px;
  font-weight: 600;
}
input::placeholder{
  color: var(--kerr-text-4);
}

/* ─── FOOTER ─── */
footer, .site-footer{
  color: var(--kerr-text-3);
  border-top: 1px solid var(--kerr-border);
}
footer a{
  color: var(--kerr-text-3);
}
footer a:hover{
  color: var(--kerr-gold);
}

/* ─── PHOTO CARDS (Homepage, DIY, Equipment) ─── */
.photo-card, .product-card, .build-card, [class*="photo-card"]{
  background: var(--kerr-bg-card);
  border: 1px solid var(--kerr-border);
  border-radius: 12px;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.photo-card:hover, .product-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  border-color: var(--kerr-border-gold);
}
.photo-card h3, .product-card h3{
  color: var(--kerr-text);
  font-size: 16px;
}
.photo-card p, .product-card p{
  color: var(--kerr-text-3);
  font-size: 13px;
}

/* ─── PRICE / CTA ELEMENTS ─── */
.price, [class*="price"]{
  color: var(--kerr-gold);
  font-weight: 900;
}
.cta, [class*="cta"], .btn-primary{
  background: var(--kerr-gold);
  color: #000000;
  font-weight: 800;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
}
.cta:hover{
  background: #d4a020;
  color: #000000;
}

/* ─── BADGES / CHIPS ─── */
.chip, .badge, .tag, [class*="chip"], [class*="badge"]{
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ─── TABLES ─── */
table{
  border-collapse: collapse;
  width: 100%;
}
th{
  color: var(--kerr-gold);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 11px;
  padding: 12px;
  border-bottom: 2px solid var(--kerr-border-gold);
}
td{
  color: var(--kerr-text-2);
  padding: 10px 12px;
  border-bottom: 1px solid var(--kerr-border);
}
tr:hover td{
  background: var(--kerr-bg-hover);
}

/* ─── MOBILE ─── */
@media(max-width:768px){
  :root{
    --kerr-fs-base: 16px;
    --kerr-fs-sm: 14px;
  }
  body{ font-size: 16px; line-height: 1.7; }
  h1{ font-size: 28px; }
  h2{ font-size: 24px; }
  h3{ font-size: 20px; }
  p{ font-size: 15px; line-height: 1.7; }
  button, .btn{ min-height: 48px; font-size: 15px; }
  
  /* Data readability on mobile */
  .hour-temp{ font-size: 18px !important; }
  .f16-day{ font-size: 14px !important; }
}

/* ─── ACCESSIBILITY ─── */
*:focus-visible{
  outline: 2px solid var(--kerr-gold);
  outline-offset: 2px;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   PLATFORM-WIDE DARK THEME — Applied to ALL pages
   DIY, Tools, Equipment, Welding, About, Contact, etc.
   Matches the homepage premium dark aesthetic.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ─── PAGE BACKGROUNDS ─── */
body, html{
  background:#0e1116 !important;
  color:#d4d4d8 !important;
}
main, .main, .content, .wrap, .container{
  background:transparent !important;
}

/* ─── SECTIONS ─── */
section, .section{
  border-color:rgba(255,255,255,.06) !important;
}

/* ─── HEADINGS — Chakra Petch everywhere ─── */
h1{
  font-family:'Chakra Petch',-apple-system,sans-serif !important;
  color:#fafafa !important;
  font-weight:900 !important;
  font-size:clamp(32px,6vw,56px) !important;
  line-height:1 !important;
  letter-spacing:-.02em !important;
}
h2{
  font-family:'Chakra Petch',-apple-system,sans-serif !important;
  color:#fafafa !important;
  font-weight:800 !important;
  font-size:clamp(24px,4vw,40px) !important;
}
h3{
  font-family:'Chakra Petch',-apple-system,sans-serif !important;
  color:#fafafa !important;
  font-weight:700 !important;
  font-size:clamp(18px,3vw,28px) !important;
}
h4,h5,h6{
  font-family:'Chakra Petch',-apple-system,sans-serif !important;
  color:#fafafa !important;
  font-weight:700 !important;
}

/* ─── BODY TEXT ─── */
p{
  color:#d4d4d8 !important;
  font-family:'Inter',-apple-system,sans-serif !important;
  font-size:15px !important;
  line-height:1.7 !important;
}
li{
  color:#d4d4d8 !important;
}

/* ─── EYEBROWS / LABELS ─── */
.eyebrow, .label, .overline, [class*="eyebrow"]{
  color:#E3AF25 !important;
  font-family:'Chakra Petch',sans-serif !important;
  font-weight:800 !important;
  font-size:11px !important;
  letter-spacing:.18em !important;
  text-transform:uppercase !important;
}

/* ─── LINKS ─── */
a:not(#kerrNavUnified a):not([class*="cta"]):not([class*="btn"]):not(.cat-cta){color:#60a5fa !important}
a:not(#kerrNavUnified a):not([class*="cta"]):not([class*="btn"]):not(.cat-cta):hover{color:#93c5fd !important}

/* ─── CARDS (product cards, build cards, photo cards) ─── */
.card, .product-card, .build-card, .photo-card, .feature-card,
[class*="card"]:not(.dir-card):not(.instrument){
  background:#1a1f2e !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:12px !important;
  color:#d4d4d8 !important;
}
.card:hover, .product-card:hover, .build-card:hover{
  border-color:rgba(227,175,37,.3) !important;
  box-shadow:0 8px 32px rgba(0,0,0,.4) !important;
}
.card h3, .product-card h3, .build-card h3{
  color:#fafafa !important;
}
.card p, .product-card p, .build-card p{
  color:#a1a1aa !important;
}

/* ─── IMAGES ─── */
img{
  border-radius:8px;
}

/* ─── HERO SECTIONS (every page) ─── */
/* Hero sections keep their own backgrounds */
.page-hero {
  color:#fafafa !important;
}

/* ─── BANNERS ─── */
.banner{
  background:#1a1f2e !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:10px !important;
  color:#d4d4d8 !important;
}
.banner strong{color:#fafafa !important}

/* ─── BUTTONS ─── */
.btn, [class*="btn"]{
  border-radius:8px !important;
  font-family:'Chakra Petch',sans-serif !important;
  font-weight:700 !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
  min-height:48px !important;
  transition:all .15s !important;
}
.btn-primary, .btn-amber, [class*="btn-primary"]{
  background:#E3AF25 !important;
  color:#000000 !important;
  border:none !important;
}
.btn-primary:hover{
  background:#d4a020 !important;
  color:#000000 !important;
  box-shadow:0 4px 20px rgba(227,175,37,.3) !important;
}
.btn-ghost, [class*="btn-ghost"]{
  background:transparent !important;
  color:#fafafa !important;
  border:1px solid rgba(255,255,255,.2) !important;
}
.btn-ghost:hover{
  border-color:#E3AF25 !important;
  color:#E3AF25 !important;
}

/* ─── TABLES ─── */
table{border-collapse:collapse !important;width:100% !important}
th{
  background:#141820 !important;
  color:#E3AF25 !important;
  font-family:'Chakra Petch',sans-serif !important;
  font-weight:800 !important;
  font-size:11px !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  padding:14px 16px !important;
  border-bottom:2px solid rgba(227,175,37,.25) !important;
  text-align:left !important;
}
td{
  color:#d4d4d8 !important;
  padding:12px 16px !important;
  border-bottom:1px solid rgba(255,255,255,.04) !important;
}
tr:hover td{
  background:rgba(227,175,37,.04) !important;
}

/* ─── FORMS ─── */
input, select, textarea{
  background:#141820 !important;
  color:#fafafa !important;
  border:1px solid rgba(255,255,255,.1) !important;
  border-radius:8px !important;
  padding:12px 16px !important;
  font-family:'Inter',sans-serif !important;
  font-size:15px !important;
}
input:focus, select:focus, textarea:focus{
  border-color:#E3AF25 !important;
  outline:none !important;
  box-shadow:0 0 0 3px rgba(227,175,37,.15) !important;
}
input::placeholder{color:#b0b0b8 !important}
label{
  color:#a1a1aa !important;
  font-family:'Chakra Petch',sans-serif !important;
  font-weight:700 !important;
  font-size:11px !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}

/* ─── DETAILS/DROPDOWNS ─── */
details{
  background:#1a1f2e !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:10px !important;
}
summary{
  color:#fafafa !important;
  font-weight:700 !important;
  cursor:pointer !important;
  padding:16px 20px !important;
}

/* ─── FOOTER (all pages) ─── */
footer, .footer, .site-footer{
  background:#0a0d12 !important;
  color:#a1a1aa !important;
  border-top:1px solid rgba(227,175,37,.15) !important;
}
footer a, .footer a{
  color:#d4d4d8 !important;
}
footer a:hover, .footer a:hover{
  color:#E3AF25 !important;
}

/* ─── NAV (all pages) ─── */
.nav, header, .site-header, [class*="header"]{
  background:rgba(8,10,14,.97) !important;
  backdrop-filter:blur(20px) saturate(200%) !important;
  -webkit-backdrop-filter:blur(20px) saturate(200%) !important;
  border-bottom:1px solid rgba(227,175,37,.15) !important;
}
.nav a, header a, nav a, .nl{
  color:#fafafa !important;
  font-family:'Chakra Petch',sans-serif !important;
  font-weight:700 !important;
}
.nav a:hover, header a:hover, .nl:hover{
  color:#E3AF25 !important;
}

/* ─── BREADCRUMBS ─── */
.breadcrumb, [class*="breadcrumb"]{
  color:#b0b0b8 !important;
  font-size:12px !important;
}
.breadcrumb a{color:#a1a1aa !important}
.breadcrumb a:hover{color:#E3AF25 !important}

/* ─── PRICE TAGS ─── */
.price, [class*="price"]{
  color:#E3AF25 !important;
  font-family:'Chakra Petch',sans-serif !important;
  font-weight:900 !important;
}

/* ─── BADGES / TAGS ─── */
.badge, .tag, [class*="badge"]{
  font-family:'Inter',sans-serif !important;
  font-weight:700 !important;
  font-size:10px !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
  border-radius:999px !important;
  padding:4px 10px !important;
}

/* ─── GALLERY / IMAGE GRIDS ─── */
.gallery img, .grid img, [class*="gallery"] img{
  border-radius:10px !important;
  border:1px solid rgba(255,255,255,.06) !important;
}

/* ─── HORIZONTAL RULES ─── */
hr{
  border:none !important;
  border-top:1px solid rgba(255,255,255,.06) !important;
  margin:32px 0 !important;
}

/* ─── BLOCKQUOTES ─── */
blockquote{
  border-left:3px solid #E3AF25 !important;
  padding-left:20px !important;
  color:#d4d4d8 !important;
  font-style:italic !important;
}

/* ─── CODE ─── */
code, pre{
  background:#141820 !important;
  color:#d4d4d8 !important;
  border:1px solid rgba(255,255,255,.06) !important;
  border-radius:6px !important;
  font-family:'JetBrains Mono',monospace !important;
}

/* ─── SCROLLBAR (webkit) ─── */
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:#0e1116}
::-webkit-scrollbar-thumb{background:#2a2f3d;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#3a4050}

/* ─── SELECTION ─── */
::selection{background:rgba(227,175,37,.3);color:#fafafa}

/* ─── MOBILE RESPONSIVE ─── */
@media(max-width:768px){
  h1{font-size:28px !important}
  h2{font-size:22px !important}
  h3{font-size:18px !important}
  p{font-size:15px !important}
  .btn,[class*="btn"]{width:100% !important;justify-content:center !important}
}


/* ━━━━ NUCLEAR FONT OVERRIDE — ensures Inter + Chakra Petch everywhere ━━━━ */
/* This block goes LAST and uses maximum specificity */

*:not(svg):not(svg *):not(code):not(pre):not(.mono):not([class*="mono"]) {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.title, [class*="title"],
.heading, [class*="heading"],
button, .btn, [class*="btn"],
summary,
.eyebrow, [class*="eyebrow"],
.label, [class*="label"],
nav a, header a, .nl, .nav a,
.dir-link, [class*="dir-link"],
.price, [class*="price"],
.chip, [class*="chip"] {
  font-family: 'Chakra Petch', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

code, pre, .mono, [class*="mono"],
.font-mono, [style*="monospace"],
.hud-k, .hud-v, .hud-item,
.radar-ts, .freshness-chip,
.kcra-credits, .sd-meta,
.storm-track-sub, .at-source, .at-stat-sub {
  font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace !important;
}

/* Ensure readable base size everywhere */
body {
  font-size: 16px !important;
  line-height: 1.65 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

/* Mobile: slightly smaller but still readable */
@media (max-width: 768px) {
  body { font-size: 15px !important; }
  p { font-size: 15px !important; line-height: 1.7 !important; }
}


/* ━━━━ DROPDOWN UPGRADES — Nav + Weather Maps ━━━━ */

/* Main mobile nav dropdown */
#mobileNavMenu{
  background:linear-gradient(180deg,#0a0d12,#0e1216) !important;
  border-bottom:2px solid #E3AF25 !important;
  padding:4px 0 8px !important;
  box-shadow:0 12px 40px rgba(0,0,0,.7) !important;
}
#mobileNavMenu a{
  font-family:'Chakra Petch',sans-serif !important;
  font-size:18px !important;
  font-weight:700 !important;
  color:#fafafa !important;
  padding:20px 24px !important;
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  border-bottom:1px solid rgba(255,255,255,.04) !important;
  text-decoration:none !important;
  transition:all .15s !important;
  letter-spacing:.02em !important;
}
#mobileNavMenu a:active,
#mobileNavMenu a:hover{
  background:rgba(227,175,37,.08) !important;
  color:#E3AF25 !important;
}
#mobileNavMenu a:last-child{
  color:#E3AF25 !important;
  border-bottom:none !important;
}
#mobileNavMenu a svg{
  opacity:.8 !important;
  flex-shrink:0 !important;
}

/* Weather Maps dropdown */
.weather-maps-dropdown{
  background:linear-gradient(135deg,#0e1218,#141a24) !important;
  border:1px solid rgba(227,175,37,.2) !important;
  border-radius:12px !important;
  overflow:hidden !important;
  box-shadow:0 4px 20px rgba(0,0,0,.4) !important;
}
.weather-maps-summary{
  padding:16px 20px !important;
  font-family:'Chakra Petch',sans-serif !important;
  font-size:13px !important;
  font-weight:800 !important;
  color:#E3AF25 !important;
  letter-spacing:.14em !important;
  background:rgba(227,175,37,.06) !important;
  border-bottom:1px solid rgba(227,175,37,.12) !important;
}

/* Weather Maps option buttons */
.weather-maps-options{
  padding:8px !important;
  gap:6px !important;
}
.wm-opt{
  font-family:'Inter',sans-serif !important;
  font-size:13px !important;
  font-weight:600 !important;
  color:#d4d4d8 !important;
  background:rgba(255,255,255,.03) !important;
  border:1px solid rgba(255,255,255,.06) !important;
  border-radius:10px !important;
  padding:14px 16px !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  transition:all .15s !important;
  cursor:pointer !important;
  min-height:48px !important;
}
.wm-opt:hover{
  background:rgba(227,175,37,.08) !important;
  border-color:rgba(227,175,37,.25) !important;
  color:#fafafa !important;
}
.wm-opt.on{
  background:rgba(227,175,37,.15) !important;
  border-color:#E3AF25 !important;
  color:#fafafa !important;
  font-weight:800 !important;
  box-shadow:0 0 12px rgba(227,175,37,.1) !important;
}


/* ━━━━ NAV HIDE — Only hide actual navigation elements ━━━━ */
#mobileNavDrop,
.mobile-nav-dropdown,
#mobileBottomNav,
.mobile-bottom-nav {
  display: none !important;
}
/* Hide desktop nav bars that have nav-inner (confirms they're nav, not content) */
.nav:has(.nav-inner),
.nav:has(.nav-links),
nav:has(.nav-inner),
nav:has(.nav-links) {
  display: none !important;
}
#kerrNavUnified {
  display: block !important;
}

/* Make sure the unified nav is always visible */
#kerrNavUnified {
  display: block !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99999 !important;
}

/* Unified nav — override nuclear font/color rules */
#kerrNavUnified,
#kerrNavUnified *:not(svg):not(svg *){
  font-family:'Chakra Petch',sans-serif !important;
}
#kerrNavUnified .knav-hint{
  font-family:'Inter',sans-serif !important;
}
#kerrNavUnified .knav-label{
  color:#E3AF25 !important;
}
#kerrNavUnified .knav-hint{
  color:rgba(161,161,170,.5) !important;
}
#kerrNavUnified .knav-hamburger span{
  color:transparent !important;
  background:#E3AF25 !important;
}
#kerrNavUnified .knav-link{
  color:#e4e4e7 !important;
  font-family:'Chakra Petch',sans-serif !important;
  font-size:15px !important;
  font-weight:700 !important;
  text-decoration:none !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
}
#kerrNavUnified .knav-link.active{
  color:#E3AF25 !important;
}
#kerrNavUnified .knav-link.contact{
  color:#E3AF25 !important;
}
#kerrNavUnified .knav-link:hover{
  color:#fafafa !important;
}
#kerrNavUnified .knav-link svg{
  color:inherit !important;
}
#kerrNavUnified .knav-link.active svg,
#kerrNavUnified .knav-link.contact svg{
  color:#E3AF25 !important;
}


/* ━━━━ FINAL TEXT COLOR OVERRIDE — ABSOLUTE LAST RULE ━━━━ */
/* This ensures ALL text is light on dark, no exceptions */
/* color inheritance handled by specific rules below */
body {
  color: #d4d4d8 !important;
  background-color: #0e1116 !important;
}
h1,h2,h3,h4,h5,h6 { color: #fafafa !important; }
p,li,td,span,div,label,figcaption { color: #d4d4d8 !important; }
strong,b,em { color: #fafafa !important; }
a:not(#kerrNavUnified a):not([class*="cta"]):not([class*="btn"]):not(.cat-cta) { color: #60a5fa !important; }
small { color: #a1a1aa !important; }

/* Specific elements that might be dark */
.lede, .eyebrow, .ins-sub, .ins-label { color: #d4d4d8 !important; }
.ins-value { color: #fafafa !important; }
.dir-card h3, .dir-card-body h3 { color: #fafafa !important; }
.dir-card p, .dir-card-body p { color: rgba(255,255,255,.8) !important; }
.kcra-meta h2, .kcra-meta p { color: #fafafa !important; }
.kcra-credits, .kcra-credits strong { color: #a1a1aa !important; }
.social-authority h2 { color: #fafafa !important; }
.social-authority p { color: #a1a1aa !important; }
.profile-links a { color: #fafafa !important; }
.profile-links small { color: #71717a !important; }
.footer, .footer * { color: #a1a1aa !important; }
.footer a { color: #d4d4d8 !important; }
.footer-brand { color: #fafafa !important; }

/* Hero text */
.photo-hero h1, .photo-hero .lede { color: #fafafa !important; }
.photo-hero h1 .amber { color: #E3AF25 !important; }
.photo-hero h1 .small { color: rgba(255,255,255,.6) !important; }

/* Section backgrounds - keep dark but DON'T override hero backgrounds */
main, article {
  background-color: transparent;
}
.directory { background: #181c28 !important; }
.kcra-section { background: #161a24 !important; }
.footer { background: #0a0d12 !important; }

/* Protect hero background images */
.photo-hero, .photo-hero-bg, [class*="hero-bg"] {
  background-color: #0e1116 !important;
}
.photo-hero-bg {
  background-size: cover !important;
  background-position: center !important;
}


/* ━━━━ MAXIMUM CONTRAST — Black on light, White on dark ━━━━ */
/* ANY element with a yellow/gold/amber/light background gets BLACK text */
/* Uses a][ double-attribute trick to beat a:not(#id) specificity */
[style*="background:#FFC107"],
[style*="background:#E3AF25"],
[style*="background:#FFE082"],
[style*="background:var(--yellow)"],
.btn-pri, .btn-amber,
.chip-amber, .chip-green, .chip-blue,
.banner-amber, .banner.banner-amber,
[class*="cta-dewalt"], [class*="cta-amazon"],
a[class*="cta-dewalt"], a[class*="cta-amazon"],
a.cat-cta, .cat-cta,
a.new-cta, .new-cta,
a.kvb-cta, .kvb-cta,
.action-gallery-banner,
[style*="background:rgba(255,193,7"],
[style*="background:rgba(227,175,37"],
.btn-primary, a.btn-primary {
  color: #000000 !important;
}

/* Text INSIDE yellow/gold elements — force black */
.btn-pri *, .btn-amber *,
.chip-amber *, .chip-green *, .chip-blue *,
.banner-amber *,
[class*="cta-dewalt"] *, [class*="cta-amazon"] *,
a[class*="cta-dewalt"] *, a[class*="cta-amazon"] *,
.cat-cta *, .new-cta *, .kvb-cta *,
.action-gallery-banner * {
  color: #000000 !important;
}

/* SVGs inside yellow buttons keep their original fill */
.btn-pri svg, .btn-amber svg,
[class*="cta-amazon"] svg {
  color: #000000 !important;
}
[class*="cta-amazon"] svg path {
  fill: #000000 !important;
}

/* Hover states on yellow CTAs — STAY BLACK, never white or blue */
.new-cta:hover, a.new-cta:hover,
.cat-cta:hover, a.cat-cta:hover,
.kvb-cta:hover, a.kvb-cta:hover,
[class*="cta-dewalt"]:hover, a[class*="cta-dewalt"]:hover,
[class*="cta-amazon"]:hover, a[class*="cta-amazon"]:hover,
.btn-pri:hover, .btn-amber:hover,
.btn-primary:hover, a.btn-primary:hover {
  color: #000000 !important;
}

/* Dark backgrounds — force WHITE text */
.new-card, .tool-card, [class*="new-card"],
.action-card, [class*="action-card"] {
  color: #ffffff !important;
}
.new-card h3, .tool-card h3, .action-card h3,
.new-card h4, .tool-card h4 {
  color: #ffffff !important;
}
.new-card p, .tool-card p, .action-card p,
.new-card .desc, .tool-card .desc {
  color: #d4d4d8 !important;
}

/* Badge chips on dark — keep them readable */
.chip, .badge, .tag, [class*="chip"] {
  font-weight: 800 !important;
}

/* Remove all fluorescent/neon text colors platform-wide */
/* Replace with clean white or black only */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SOCIAL ICONS — Real brand colors, used across all pages
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.social-icons{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  justify-content:center;
}
.social-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:10px;
  transition:transform .15s,box-shadow .15s;
  text-decoration:none !important;
}
.social-icon:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(0,0,0,.3);
}
.social-icon svg{width:20px;height:20px;flex-shrink:0}

/* Instagram — real gradient */
.social-icon-ig{
  background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
}
.social-icon-ig svg{fill:#fff}

/* Facebook — real blue */
.social-icon-fb{
  background:#1877F2;
}
.social-icon-fb svg{fill:#fff}

/* YouTube — real red */
.social-icon-yt{
  background:#FF0000;
}
.social-icon-yt svg{fill:#fff}

/* X / Twitter — white on dark bg */
.social-icon-x{
  background:#000;border:1px solid rgba(255,255,255,.15);
}
.social-icon-x svg{fill:#fff}

/* TikTok */
.social-icon-tt{
  background:#000;border:1px solid rgba(255,255,255,.15);
  position:relative;overflow:hidden;
}
.social-icon-tt svg{fill:#fff}

/* Larger social buttons (for follow page, etc.) */
.social-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 24px;border-radius:10px;
  font-family:'Chakra Petch',sans-serif !important;
  font-weight:700 !important;font-size:14px;
  letter-spacing:.04em;text-transform:uppercase;
  text-decoration:none !important;color:#fff !important;
  transition:transform .15s,box-shadow .15s;
}
.social-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 24px rgba(0,0,0,.4);
  color:#fff !important;
}
.social-btn svg{width:18px;height:18px;flex-shrink:0;fill:#fff}
.social-btn-ig{background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888)}
.social-btn-fb{background:#1877F2}
.social-btn-yt{background:#FF0000}
.social-btn-x{background:#000;border:1px solid rgba(255,255,255,.2)}
.social-btn-tt{background:#000;border:1px solid rgba(255,255,255,.2)}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   STANDARDIZED FOOTER — Blog-quality footer for all pages
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.kerr-footer{
  background:#080a10 !important;
  border-top:1px solid rgba(227,175,37,.2) !important;
  padding:48px 24px 32px !important;
  text-align:center !important;
}
.kerr-footer .footer-brand{
  font:700 18px/1 'Chakra Petch',sans-serif !important;
  color:#fafafa !important;letter-spacing:.06em;margin-bottom:8px;
}
.kerr-footer .footer-brand .gold{color:#E3AF25 !important}
.kerr-footer .footer-loc{
  font:500 13px/1.4 'Inter',sans-serif !important;
  color:#b0b0b8 !important;margin-bottom:20px;
}
.kerr-footer .footer-nav{
  display:flex;justify-content:center;gap:20px;flex-wrap:wrap;
  margin-bottom:20px;
}
.kerr-footer .footer-nav a{
  font:600 13px/1 'Chakra Petch',sans-serif !important;
  color:#a1a1aa !important;text-decoration:none !important;
  letter-spacing:.04em;transition:color .15s;
}
.kerr-footer .footer-nav a:hover{color:#E3AF25 !important}
.kerr-footer .footer-social{
  display:flex;justify-content:center;gap:12px;
  margin-bottom:20px;
}
.kerr-footer .footer-legal{
  margin-top:20px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,.06);
  font:500 11px/1.4 'JetBrains Mono',monospace !important;
  color:#b0b0b8 !important;
}