/* ─────────────────────────────────────────────────────────────────────────────
   asecuritygeek.com — "Red / White / Black (light)" theme override
   Loaded AFTER style.css when active. Flips the palette to a light theme:
   near-white background, near-black text, bold podcast-red accent. Includes the
   header/hero/CTA gradient overrides that style.css hard-codes for the dark look.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  --bg:        #ffffff;   /* white */
  --bg-2:      #f5f5f7;   /* near-white panels */
  --surface:   #ffffff;   /* cards */
  --surface-2: #f0f0f2;
  --border:    #e2e2e6;   /* light gray border */
  --text:      #16161a;   /* near-black */
  --muted:     #55555c;   /* gray */
  --faint:     #8a8a92;
  --accent:    #e11d2a;   /* podcast red */
  --accent-2:  #c50f1c;   /* darker red for links (readable on white) */
  --accent-ink:#ffffff;   /* white text on red buttons */
  --danger:    #c81e1e;
  --warn:      #b26a00;
  --ok:        #1a7f4b;
}

/* Sticky header: light translucent instead of slate */
.site-header { background: rgba(255, 255, 255, .9); }
.logo-mark   { background: #ffffff; }

/* Hero + CTA + feature glows: recolor for a light background */
.hero {
  background:
    radial-gradient(900px 400px at 80% -10%, rgba(225, 29, 42, .10), transparent),
    radial-gradient(700px 400px at 0% 0%, rgba(0, 0, 0, .04), transparent),
    var(--bg-2);
}
.cta-band {
  background:
    radial-gradient(700px 300px at 50% 0%, rgba(225, 29, 42, .10), transparent),
    var(--bg-2);
}
.feature .aside {
  background:
    linear-gradient(160deg, rgba(225, 29, 42, .16), rgba(0, 0, 0, .04)),
    var(--bg-2);
  color: var(--accent);
}
.inline-cap {
  background:
    linear-gradient(160deg, rgba(225, 29, 42, .10), rgba(0, 0, 0, .03)),
    var(--surface);
}

/* Give cards a touch of lift on the white background */
.card, .tool-box, .tool-card { box-shadow: 0 1px 3px rgba(0, 0, 0, .05); }

/* Nav hover needs a visible tint since surface == header background here */
.site-nav a:hover { background: var(--surface-2); }

.btn-primary:hover { background: #c50f1c; }