/*
 * Shared "pillar" + service-page styling.
 * Enqueued by functions.php only on the relevant page templates.
 * Source of truth for: hero spec stats bar, sticky in-page TOC, numbered
 * section badges, and the IS/IS-NOT comparison card.
 *
 * Per-page accent colors via CSS custom properties on the `.pillar` root.
 * Defaults match the VAPT pillar (purple → cyan). Override on individual
 * pages by setting these on `.pillar`:
 *   --p-accent       primary brand accent (text, borders, leader line)
 *   --p-accent-2     gradient endpoint
 *   --p-accent-bg    tinted background (eyebrow / label pill)
 *   --p-accent-bd    border tint (matches accent-bg)
 *   --p-grad         heading-text gradient
 *   --p-tocactive-bg gradient for the active sticky-toc chip
 *   --p-tocactive-bd border for the active sticky-toc chip
 *   --p-cta-grad     cta-card background gradient
 *   --p-cta-bd       cta-card border tint
 */
.pillar {
	color: var(--white);
	--p-accent: #A855F7;
	--p-accent-2: #06B6D4;
	--p-accent-bg: rgba(168,85,247,0.08);
	--p-accent-bd: rgba(168,85,247,0.35);
	--p-grad: linear-gradient(135deg,#A855F7,#06B6D4);
	--p-leader: rgba(168,85,247,0.6);
	--p-tocactive-bg: linear-gradient(135deg, rgba(168,85,247,0.18), rgba(6,182,212,0.10));
	--p-tocactive-bd: rgba(168,85,247,0.6);
	--p-cta-grad: linear-gradient(135deg, rgba(168,85,247,0.06), rgba(6,182,212,0.04));
	--p-cta-bd: rgba(168,85,247,0.28);
	--p-hover-bd: rgba(168,85,247,0.4);
	--p-hover-bg: rgba(168,85,247,0.05);
}
.pillar-hero { padding: clamp(80px,12vh,130px) 0 clamp(40px,5vw,60px); text-align: center; }
.pillar-hero .container { max-width: 880px; }
.pillar-hero .eyebrow {
	display:inline-block; padding:6px 14px; background:var(--p-accent-bg);
	border:1px solid var(--p-accent-bd); border-radius:100px;
	color:var(--p-accent); font-size:0.72rem; font-weight:700; letter-spacing:1.5px;
	text-transform:uppercase; margin-bottom:16px;
}
.pillar-hero h1 { font-size: clamp(2rem,4vw,3rem); line-height:1.1; margin:0 0 18px; letter-spacing:-0.02em; }
.pillar-hero h1 .grad,
.pillar-heading h2 .grad,
.pillar-hero .grad {
	background: var(--p-grad);
	-webkit-background-clip:text; background-clip:text; color:transparent;
}
.pillar-hero p { color: var(--muted); font-size: clamp(1rem,1.4vw,1.1rem); line-height:1.7; max-width: 720px; margin: 0 auto; }

/* Stats spec bar — LABEL above, VALUE below. Text values stay readable,
   only the headline stat (first cell) uses the big gradient number. */
.pillar-stats {
	display:grid; grid-template-columns:repeat(4,1fr); gap:0; align-items:stretch;
	margin-top:40px; padding:0; max-width:920px; margin-left:auto; margin-right:auto;
	background:rgba(255,255,255,0.02); border:1px solid var(--border); border-radius:16px;
	overflow:hidden;
}
.pillar-stats .stat {
	text-align:center; padding:22px 18px; border-right:1px solid var(--border);
	display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.pillar-stats .stat:last-child { border-right:0; }
.pillar-stats .stat .lbl { color:var(--muted); font-size:0.66rem; letter-spacing:1.4px;
	text-transform:uppercase; font-weight:700; order:1; }
.pillar-stats .stat .num { font-size:1.4rem; font-weight:800; line-height:1.15; color:var(--white); order:2; }
.pillar-stats .stat.is-headline .num {
	font-size:2rem;
	background:var(--p-grad);
	-webkit-background-clip:text; background-clip:text; color:transparent;
}
@media (max-width:640px){
	.pillar-stats{ grid-template-columns:repeat(2,1fr); }
	.pillar-stats .stat:nth-child(2){ border-right:0; }
	.pillar-stats .stat:nth-child(-n+2){ border-bottom:1px solid var(--border); }
}

/* Sticky in-page chip nav — only added to longer pillar pages */
.pillar-tocbar {
	position:sticky; top:82px; z-index:8; background:rgba(8,11,13,0.85);
	-webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
	border-bottom:1px solid var(--border); padding:10px 0;
}
.pillar-tocbar-inner {
	max-width:1100px; margin:0 auto; padding:0 16px;
	display:flex; gap:6px; overflow-x:auto; scrollbar-width:none;
}
.pillar-tocbar-inner::-webkit-scrollbar { display:none; }
.pillar-tocbar a {
	flex-shrink:0; padding:6px 12px; border-radius:999px;
	border:1px solid var(--border); color:var(--muted); text-decoration:none;
	font-size:0.78rem; font-weight:600; letter-spacing:0.2px;
	transition:all .15s; white-space:nowrap;
}
.pillar-tocbar a:hover { color:var(--white); border-color:var(--p-accent-bd); background:var(--p-hover-bg); }
.pillar-tocbar a.is-active {
	color:var(--white); border-color:var(--p-tocactive-bd);
	background:var(--p-tocactive-bg);
}
.pillar-tocbar .tocbar-num { color:var(--p-accent); font-weight:800; margin-right:6px; font-size:0.72rem; }

/* Section wrappers — alternating .alt for visual rhythm */
.pillar-section { padding: clamp(56px,7vw,88px) 0; position:relative; }
.pillar-section.alt { background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.pillar-section .container { max-width: 1100px; }

/* Section heading + numbered badge */
.pillar-heading { text-align:center; margin-bottom: 44px; }
.pillar-heading .label {
	display:inline-block; padding:6px 14px; background:var(--p-accent-bg);
	border:1px solid var(--p-accent-bd); border-radius:100px;
	color:var(--p-accent); font-size:0.7rem; font-weight:700; letter-spacing:1.5px;
	text-transform:uppercase; margin-bottom:14px;
}
.pillar-heading h2 { font-size: clamp(1.5rem,2.6vw,2rem); margin: 0 0 14px; letter-spacing:-0.01em; line-height:1.2; }
.pillar-heading p { color: var(--muted); max-width: 720px; margin: 0 auto; line-height: 1.7; }
.section-num {
	display:inline-flex; align-items:center; gap:8px;
	font:700 0.72rem var(--mono, ui-monospace);
	letter-spacing:1.5px; text-transform:uppercase; color:var(--p-accent); margin-bottom:14px;
}
.section-num::before {
	content:""; display:inline-block; width:32px; height:1px;
	background:linear-gradient(90deg, var(--p-leader), transparent);
}
.section-num.is-center { margin-left:auto; margin-right:auto; display:table; }

/* Prose blocks */
.pillar-prose { max-width: 820px; margin: 0 auto; }
.pillar-prose h3 { color: var(--white); font-size: 1.2rem; margin: 32px 0 14px; font-weight: 700; }
.pillar-prose p { color: var(--muted); line-height: 1.75; margin: 0 0 16px; font-size: 0.97rem; }
.pillar-prose ul { color: var(--muted); line-height: 1.75; padding-left: 24px; margin: 0 0 18px; font-size: 0.97rem; }
.pillar-prose li { margin-bottom: 8px; }
.pillar-prose li::marker { color: var(--p-accent); }
.pillar-prose strong { color: var(--white); }

/* IS / IS NOT side-by-side comparison */
.compare-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:820px; margin:0 auto; }
@media (max-width:740px){ .compare-grid { grid-template-columns:1fr; } }
.compare-col { border:1px solid var(--border); border-radius:14px; padding:24px; background:rgba(255,255,255,0.02); }
.compare-col.is { border-top:3px solid #22c55e; }
.compare-col.isnot { border-top:3px solid #ef4444; }
.compare-col h4 { color:var(--white); font-size:0.95rem; margin:0 0 14px; display:flex; align-items:center; gap:8px; }
.compare-col h4 .compare-ic {
	width:22px; height:22px; border-radius:50%; display:inline-flex;
	align-items:center; justify-content:center; font-size:0.85rem; font-weight:900;
}
.compare-col.is h4 .compare-ic { background:rgba(34,197,94,0.15); color:#22c55e; }
.compare-col.isnot h4 .compare-ic { background:rgba(239,68,68,0.15); color:#ef4444; }
.compare-col ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.compare-col li { color:var(--muted); font-size:0.88rem; line-height:1.55; padding-left:20px; position:relative; }
.compare-col.is li::before { content:"✓"; position:absolute; left:0; color:#22c55e; font-weight:800; }
.compare-col.isnot li::before { content:"✗"; position:absolute; left:0; color:#ef4444; font-weight:800; }
.compare-col li strong { color:var(--white); }

/* Hub-card / scope-tile / cta-card / faq blocks reused by pillar templates */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.hub-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 24px; transition: transform .2s, border-color .2s, box-shadow .2s; text-decoration: none; display: flex; flex-direction: column; }
.hub-card:hover { transform: translateY(-2px); border-color: var(--p-hover-bd); box-shadow: 0 12px 28px rgba(0,0,0,0.25); }
.hub-card-eyebrow { color: var(--p-accent); font-size: 0.65rem; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; margin-bottom: 10px; }
.hub-card h3 { color: var(--white); font-size: 1rem; margin: 0 0 10px; line-height: 1.4; font-weight: 700; }
.hub-card p { color: var(--muted); font-size: 0.88rem; margin: 0 0 14px; line-height: 1.55; flex: 1; }
.hub-card-arrow { color: var(--p-accent); font-size: 0.82rem; font-weight: 600; }

.scope-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; max-width: 980px; margin: 0 auto; }
.scope-tile { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 22px; }
.scope-tile h4 { color: var(--white); margin: 0 0 8px; font-size: 1rem; font-weight: 700; }
.scope-tile p { color: var(--muted); margin: 0; font-size: 0.86rem; line-height: 1.55; }
.scope-tile .scope-icon { color: var(--p-accent); font-size: 1.4rem; margin-bottom: 10px; }

.faq-pillar { display: flex; flex-direction: column; gap: 14px; max-width: 880px; margin: 0 auto; }
.faq-pillar details { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px 24px; transition: border-color 0.2s; }
.faq-pillar details[open] { border-color: var(--p-hover-bd); }
.faq-pillar summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--white); font-weight: 600; font-size: 1rem; }
.faq-pillar summary::-webkit-details-marker { display: none; }
.faq-pillar .faq-icon { color: var(--p-accent); font-size: 1.4rem; line-height: 1; transition: transform 0.25s; }
.faq-pillar details[open] .faq-icon { transform: rotate(45deg); }
.faq-pillar p { margin: 14px 0 0; color: var(--muted); line-height: 1.7; font-size: 0.94rem; }

.cta-card { position:relative; overflow:hidden; isolation:isolate; max-width: 780px; margin: 0 auto; padding: clamp(30px,5vw,52px); background: var(--p-cta-grad); border: 1px solid var(--p-cta-bd); border-radius: 18px; text-align: center; }
/* Atmospheric streams backdrop (added 2026-05-24) — bright edges glow via
   screen blend; light mode falls back to a faint normal layer. */
.cta-card::after { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:url(../img/cta-streams.webp) center/cover no-repeat; opacity:.45; mix-blend-mode:screen; }
:root[data-theme="light"] .cta-card::after { opacity:.10; mix-blend-mode:normal; }
.cta-card > * { position:relative; }
.cta-card .eyebrow { display:inline-block; padding:6px 14px; background:var(--p-accent-bg); border:1px solid var(--p-accent-bd); border-radius:100px; color:var(--p-accent); font-size:0.72rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:16px; }
.cta-card h2 { color: var(--white); margin: 0 0 14px; font-size: clamp(1.3rem,2.4vw,1.7rem); }
.cta-card p { color: var(--muted); max-width: 520px; margin: 0 auto 26px; line-height: 1.7; }

/* ── Legacy .page-hero — auto-apply the same .pillar-stats spacing ──────
   Many older templates use `<div class="page-hero">` with their own label,
   h1, p. If they include a `.pillar-stats` grid inside, the shared spec-bar
   styling kicks in automatically and the section feels like a sibling of
   the new pillar pages — without each page needing a CSS rewrite. */
.page-hero .pillar-stats{ margin-top:34px; }

/* ── Any page with multiple <section> + an h2 inside ────────────────────
   Long-form pages that use raw <section><h2> patterns (not .pillar-section)
   sometimes lack visual rhythm. Adding a faint top border for the second
   section and on gives a free divider without per-page changes. Scoped to
   <main> so it doesn't affect nav/footer sections. */
main > section + section > .container > h2:first-child,
main > section + section > .wrap > h2:first-child{ scroll-margin-top:100px; }

/* ── Guide-body section separator ───────────────────────────────────────
   The 10 framework / compliance guide pages use a single .guide-body container
   with numbered h2s (01 · 02 · 03 …) that flowed together with no visual break
   between sections. Add a thin accent line + breathing room before each h2
   (skipping the first one) so readers see "new section" cleanly. Applies to
   every page that enqueues pillar.css, so no per-page edits needed. */
.guide-body h2:not(:first-child){
	position:relative;
	margin-top:72px !important;
	padding-top:48px !important;
	border-top:1px solid var(--border);
}
.guide-body h2:not(:first-child)::before{
	content:"";
	position:absolute;
	top:-1px; left:0;
	width:96px; height:2px;
	background:linear-gradient(90deg, var(--p-accent, #A855F7), transparent);
	opacity:.7;
}
/* Subtle alternating tint inside .guide-body — every-other h2 section gets a
   faint left-side accent so the eye can track "I'm in a new section now"
   even faster than the divider alone. */
.guide-body h2:not(:first-child){
	padding-left:0;
}
.guide-body{ counter-reset: section; }
.guide-body h2{ counter-increment: section; }

/* ── Guide-page hero stats override ─────────────────────────────────────
   The 10 compliance / framework guide pages share a `.guide-hero-stats`
   pattern that sized every value as a huge gradient — fine for numerical
   values, broken for text values ("Annual", "Board", "CISO", "2-6h") which
   wrapped and looked oversized. This override:
   1. Drops the default value size so text fits without wrapping
   2. Removes the gradient by default (per-page palette still kicks in via
      `.guide-hero-stats .num` overrides each guide already has — but only
      the headline value should be big & gradient)
   3. Restores big+gradient when an `.is-headline` modifier is on the stat,
      matching the pillar pattern used elsewhere. */
.guide-hero-stats .stat .num{
	font-size:1.4rem !important;
	font-weight:700;
	line-height:1.15;
	background:none !important;
	-webkit-text-fill-color:var(--white) !important;
	color:var(--white) !important;
}
.guide-hero-stats .stat.is-headline .num{
	font-size:2rem !important;
	font-weight:800;
}

/* ── Light mode (added 2026-05-24) ──────────────────────────────────────
   Several surfaces above use hardcoded dark or translucent-white fills that
   either vanish or invert on a light background:
     • .pillar-tocbar  → near-black bg, so its (dark) link labels became
       dark-on-dark and unreadable in light mode.
     • .pillar-stats / .compare-col → rgba(255,255,255,.02) tints that show
       nothing over a white panel.
   Restore legible light surfaces. Scoped to light theme only; dark mode is
   unchanged. */
:root[data-theme="light"] .pillar-tocbar{
	background:rgba(255,255,255,0.88);
	border-bottom-color:rgba(10,12,14,0.10);
}
:root[data-theme="light"] .pillar-stats,
:root[data-theme="light"] .compare-col{
	background:rgba(10,12,14,0.025);
}

/* Anchor jumps clear the fixed nav (~102px) + sticky pillar TOC (~50px). */
.pillar [id]{ scroll-margin-top:140px }