/* ─────────────────────────────────────────────────────────────
   presentation-mode.css — projector / "present" experience for
   explainer pages. Pairs with presentation-mode.js (self-injecting).
   On-brand with the AI-Glass dark + emerald identity.
   ───────────────────────────────────────────────────────────── */

/* ── Launch button (floating) ── */
.present-fab{
  position:fixed; top:18px; right:70px; z-index:300;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid rgba(255,255,255,.18);
  background:rgba(12,19,34,.65);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  color:#34D399; cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
  transition:transform .25s cubic-bezier(.4,0,.2,1), border-color .25s ease, box-shadow .25s ease;
}
.present-fab:hover{ transform:scale(1.06); border-color:rgba(52,211,153,.5); box-shadow:0 6px 22px rgba(0,0,0,.30); }
.present-fab:active{ transform:scale(.98); }
.present-fab:focus-visible{ outline:2px solid #A7F3D0; outline-offset:2px; }
.present-fab svg{ width:18px; height:18px; display:block; margin-left:2px; }
/* Light theme — mirror the theme toggle's colour flip */
html:not([data-theme="dark"]) .present-fab{
  background:rgba(255,255,255,.92); border-color:rgba(15,23,42,.10); color:#059669;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
}
html:not([data-theme="dark"]) .present-fab:hover{ border-color:rgba(5,150,105,.35); }
body.presenting .present-fab{ display:none; }

/* ── Hide ALL chrome while presenting ──
   Nothing floats over the slide: no control dock, no footer nav, no rail.
   .page-nav is the Previous / Next-module strip at the foot of each explainer —
   on a projector it's dead weight and invites a mis-click out of the deck.
   ← / → move between section tabs, Esc leaves. */
body.presenting .theme-fab,
body.presenting .nav-cluster,
body.presenting .side-nav-panel,
body.presenting .side-nav-scrim,
body.presenting .nav-rail,
body.presenting .nr-crumb,
body.presenting .page-nav,
body.presenting .footer{ display:none !important; }

/* Rail may have left body.rail-active set — force the real tabs back. */
body.presenting .section-nav button{
  opacity:1 !important; pointer-events:auto !important; transform:none !important;
}

/* ── Full-bleed projector layout: fill the screen, don't sit in a column ── */
/* Pages wrap content either in .container (M1–M3 style) or directly in
   .explainer-section tab panels (automation-stack, skills, etc.). Both are
   width-capped + centered by default; force both to full-bleed in present mode. */
/* Bottom padding is just breathing room now — no dock to clear. */
body.presenting .container,
body.presenting .explainer-section{
  max-width:none !important;
  width:100%;
  margin:0;
  padding:24px clamp(40px,5.5vw,150px) 56px;
}
/* Compact the hero so the first section shows with little/no scroll */
body.presenting .hero,
body.presenting .module-hero{ padding-top:38px; padding-bottom:26px; }
body.presenting .hero h1,
body.presenting .module-hero h1{ font-size:clamp(34px,4.6vw,60px); line-height:1.12; }
body.presenting .hero .subtitle,
body.presenting .hero .mod-subtitle,
body.presenting .module-hero .mod-subtitle{ font-size:clamp(16px,1.7vw,24px); max-width:min(1100px,80vw); }

/* Bigger tabs + body copy for the back of the room */
body.presenting .section-nav button{ font-size:16px; padding:11px 22px; }
body.presenting .explainer-section p,
body.presenting .explainer-section li,
body.presenting .card p,
body.presenting .card li,
body.presenting .section p,
body.presenting .section li{ font-size:clamp(16px,1.15vw,21px); line-height:1.7; }
body.presenting .explainer-section h2,
body.presenting .card h2,
body.presenting .section > h2{ font-size:clamp(22px,2.1vw,34px); }
body.presenting .explainer-section h4,
body.presenting .section h4,
body.presenting .concept-card h3,
body.presenting .concept-card h4,
body.presenting .card h3,
body.presenting .card h4{ font-size:clamp(17px,1.45vw,24px); line-height:1.3; }
/* Section subtitles (h3) get their own heading tier — clearly larger than the
   body copy (clamp 16->21) and sitting just below the h2 title (clamp 22->34),
   so a subtitle like "The attack surface expands in a chain" reads as a real
   heading on a projector rather than blending into the paragraph text. */
body.presenting .explainer-section h3,
body.presenting .section h3{ font-size:clamp(21px,1.9vw,29px); line-height:1.25; }

/* Wider viewport means grids can breathe and fill the space */
body.presenting .concept-grid{ gap:22px; }

/* No control dock: present mode is chrome-free by design. Section tabs are
   driven by ← / → (see presentation-mode.js) and Esc leaves, so nothing
   overlays the slide and the screen recording is clean edge to edge. */

@media (prefers-reduced-motion: reduce){
  .present-fab{ transition:none; }
}
@media (max-width:640px){
  .present-fab{ top:12px; right:58px; width:38px; height:38px; }
}

/* ─────────────────────────────────────────────────────────────
   Sticky module title while presenting.
   Pin the hero (module title) to the top so it stays visible as the
   section content scrolls beneath it. The top section tabs stop being
   sticky in present mode — the control dock (dots / arrow keys) drives
   section navigation there — so the pinned title and the tabs don't
   collide. The hero's navy background is opaque, so content scrolls
   cleanly behind it.
   ───────────────────────────────────────────────────────────── */
body.presenting .module-hero,
body.presenting .hero {
  position: sticky;
  top: 0;
  z-index: 60;
}
/* Compact the pinned band a touch and drop the secondary bits so the
   title stays prominent without eating the slide. */
body.presenting .module-hero { padding-top: 22px; padding-bottom: 16px; }
body.presenting .module-hero .back-link,
body.presenting .module-hero .module-duration,
body.presenting .module-hero .mod-subtitle,
body.presenting .hero .subtitle { display: none; }
body.presenting .module-hero h1,
body.presenting .hero h1 { margin-bottom: 0; }

/* Sub-menu (section tabs) also stays pinned — as a slim agenda strip
   directly beneath the title. presentation-mode.js measures the pinned
   title height and exposes it as --pm-hero-h so the tabs sit exactly
   below it at any viewport width (no overlap, no magic numbers). */
body.presenting .section-nav {
  position: sticky;
  top: var(--pm-hero-h, 0px);
  z-index: 55;                       /* below the title (60), above content */
  background: #f2f3f3;               /* opaque so content scrolls cleanly under */
  border-bottom: 1px solid var(--border, #e9ebed);
  box-shadow: 0 2px 8px rgba(0,7,22,.06);
  margin-bottom: 20px;
}
html[data-theme="dark"] body.presenting .section-nav { background: var(--bg, #0F1B2D); }
/* Compact the pinned tabs so the title + agenda together stay slim */
body.presenting .section-nav button { font-size: 14px; padding: 8px 16px; }