/* ============================================================
   GLOBAL  · reset, :root tokens, brand colours, typography, .wrap/.section-head utilities, .ph placeholders, .note, reduced-motion, overflow guard
   Auto-split from main.css (Phase 1). Load order fixed in inc/enqueue.php.
   ============================================================ */
/* =====================================================================
   SecurityBlog-style recreation — self-contained live preview.
   Faithful to the theme tokens: Atkinson Hyperlegible body + Source Serif 4 headings,
   accent maroon #6B0A06, beige surface, #fff / #f9f9f9 / #000, pill buttons.
   Photos are shown as gradient image-frames (real photos slot in later).
   ===================================================================== */
:root{
  /* SecurityBlogs palette — beige background · navy primary · blue secondary · maroon accent (gold removed) */
  --sb-navy:#1D3A54; --sb-dark:#001526; --sb-blue:#1A5578; --sb-lightblue:#D5E3F2;
  --sb-maroon:#6B0A06; --sb-gold:#6B0A06; /* legacy name retired → maroon */
  --sb-light:#FBF5E5; --sb-black:#000000; --sb-white:#FFFFFF;
  /* accent token now points to maroon; kept named so existing rules recolour automatically */
  --green:var(--sb-maroon); --green-dark:#520805;
  --black:var(--sb-black); --ink:var(--sb-navy); --text:#3d4a52; --text-2:#2a3b45; --muted:#6a7780;
  --white:var(--sb-white); --raised:var(--sb-light); --line:#e6dcc6; --line-dark:#12324a;
  --shadow:rgba(0,0,0,.08) 0 10px 30px -8px;
  --shadow-sm:rgba(0,0,0,.3) 0 1px 4px -1px;
  --pill:50px; --radius:6px;
  --font:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-head:"Source Serif 4",Georgia,serif;
  --t:300ms ease;
  --g1:linear-gradient(135deg,#1d3a54,#1a5578);
  --g2:linear-gradient(135deg,#1a5578,#1d3a54);
  --g3:linear-gradient(135deg,#22384f,#1a5578);
  --g4:linear-gradient(135deg,#1d3a54,#2a4a66);
  --g5:linear-gradient(135deg,#001526,#1a5578);
  --g6:linear-gradient(135deg,#3d1418,#6b0a06);
  color-scheme:light;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
img{max-width:100%;height:auto;}
.nd{font-family:var(--font);font-size:1.125rem;font-weight:400;line-height:1.75;color:var(--text);background:var(--sb-light);-webkit-font-smoothing:antialiased;}
.nd h1,.nd h2,.nd h3{font-family:var(--font-head);color:var(--ink);margin:0 0 .5em;line-height:1.2;font-weight:700;letter-spacing:-.02em;text-wrap:balance;text-transform:none;}
.nd h1{font-size:clamp(3rem,6vw,5.5rem);line-height:1.1;}
.nd h2{font-size:clamp(2.25rem,4vw,3.5rem);line-height:1.2;}
.nd h3{font-size:1.5rem;font-weight:600;line-height:1.3;}
.nd h4{font-family:var(--font);font-size:1.25rem;font-weight:600;line-height:1.4;color:var(--ink);margin:0 0 .5em;text-transform:none;}
.nd p{margin:0 0 1rem;}
.nd a{color:inherit;text-decoration:none;transition:color var(--t);}
.nd ul{margin:0;padding:0;list-style:none;}
.nd img{max-width:100%;display:block;}
.wrap{width:min(1170px,92%);margin-inline:auto;}
.accent{color:var(--sb-maroon);}
.eyebrow{display:inline-block;color:var(--sb-maroon);font-size:.9rem;font-weight:700;letter-spacing:.02em;text-transform:none;margin-bottom:.7rem;}
.section-head{text-align:center;max-width:640px;margin:0 auto 3rem;}
.section-head h2{margin:0;}
:focus-visible{outline:3px solid var(--green);outline-offset:2px;}

/* image placeholders */
.ph{position:relative;overflow:hidden;background:var(--g1);}
.ph::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.4px);background-size:12px 12px;opacity:.5;}
.ph--1{background:var(--g1);}.ph--2{background:var(--g2);}.ph--3{background:var(--g3);}
.ph--4{background:var(--g4);}.ph--5{background:var(--g5);}.ph--6{background:var(--g6);}
.ph__person{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:62%;opacity:.85;z-index:1;}
.section-head--left{text-align:left;max-width:none;margin:0 0 2.5rem;}

.note{background:#eef8f2;border-top:1px solid #d5ecdf;color:#356b52;font-size:.85rem;text-align:center;padding:.7rem 1rem;}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}}
html{scroll-padding-top:90px;}

/* Prevent horizontal scroll from the off-canvas drawer / wide content (H7) */
html,body{overflow-x:hidden;}