/* =============================================================================
   CppCon 2026 deck theme — derived from the official title card.
   Every colour below was sampled from API_Design_is_Language_Design_Title_Card.png
   or derived from it, then checked against WCAG 2.1 contrast ratios.
   Ratios are noted inline; the target is >= 4.5:1 for body text and >= 3:1 for
   large text (>= 24px bold / 30px regular), which every slide element clears.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Sampled straight from the title card */
  --cc-ink-deep:  #1F2844;  /* gradient edge      */
  --cc-ink:       #232E4D;  /* solid fallback     */
  --cc-ink-lift:  #2E3D66;  /* gradient centre    */
  --cc-accent:    #FF8933;  /* CppCon orange      */
  --cc-gold:      #FFBB33;  /* title yellow       */
  --cc-paper:     #FFFFFF;

  /* Derived */
  --cc-muted:     #B9C4DC;  /* 7.3:1 on --cc-ink — captions, footer      */
  --cc-rule:      #6B7CA8;  /* structural lines, 3.2:1 — non-text floor  */
  --cc-linenum:   #8593B4;  /* 5.1:1 on --cc-code-bg — it is real text   */
  --cc-code-bg:   #19223C;  /* one step darker than the slide            */
  --cc-code-fg:   #E6ECF8;  /* 14.9:1 on --cc-code-bg                    */
  --cc-focus:     #7FD1F0;  /* keyboard focus ring                       */

  /* Syntax palette — all >= 6:1 on --cc-code-bg.
     Meaning is never carried by colour alone: comments are also italic,
     keywords are also bold, focused code lines also get a left bar. */
  --cc-hl-keyword:  #FF9D4D;  /*  7.6:1 */
  --cc-hl-type:     #FFD166;  /* 10.9:1 */
  --cc-hl-string:   #9BE39B;  /* 10.4:1 */
  --cc-hl-number:   #7FD1F0;  /*  9.7:1 */
  --cc-hl-comment:  #93A3C4;  /*  6.2:1 */
  --cc-hl-meta:     #C7A6F5;  /*  7.6:1 */
  --cc-hl-title:    #FFFFFF;  /* 14.9:1 */

  /* Focused-code-line marker. The gap is applied to every row, highlighted or
     not, so the code does not shift sideways as you step through. */
  --cc-hl-bar-width: 4px;
  --cc-hl-bar-gap:   0.75em;

  /* Listing metrics. The vertical budget under a one-line title, with a
     language caption, is 413px:

       720 - 52 top pad - 98 bottom pad and footer - 98 title - 29 caption
           - 30 figure margin

     At the values below that is a hair over 11 lines. Drop the font size to
     0.76em for 12, or 0.72em for 13; 0.72em still lands at 32px on a 1080p
     projector, which is about the floor for a ballroom.

     The cap must be a length, not a percentage: the <pre> has an auto height,
     so a percentage max-height resolves to none and the block runs off the
     slide instead of scrolling. Override per slide with
     <!-- .slide: style="--cc-code-max-height: 540px; --cc-code-font-size: 0.76em" -->. */
  --cc-code-max-height:  412px;
  --cc-code-font-size:   0.80em;
  --cc-code-line-height: 1.40;
  --cc-code-padding:     0.7em 0.9em;

  /* Same reasoning for pictures: max-width alone caps the width and lets the
     height run off the bottom of the slide. Roughly the space under a
     one-line title. Override per slide the same way as the code cap. */
  --cc-image-max-height: 460px;

  /* Where the language caption sits on a listing. `left` reads better when
     you use data-lang for a file path instead of a language name. */
  --cc-listing-label-align: right;

  /* Layout */
  --cc-pad-x: 72px;
  --cc-pad-y: 52px;
  --cc-footer-h: 46px;

  /* Live accessibility controls, driven by keyboard (see index.html) */
  --cc-text-scale: 1;
}

/* -----------------------------------------------------------------------------
   2. High-contrast mode  —  toggled with the "c" key
   Pure black ground, brighter tokens. Everything here clears 10:1.
   -------------------------------------------------------------------------- */
html.cc-contrast {
  --cc-ink-deep: #000000;
  --cc-ink:      #000000;
  --cc-ink-lift: #000000;
  --cc-muted:    #E2E8F5;
  --cc-rule:     #8B99B8;
  --cc-linenum:  #E2E8F5;
  --cc-code-bg:  #000000;
  --cc-code-fg:  #FFFFFF;
  --cc-gold:     #FFD75E;
  --cc-accent:   #FFA24D;

  --cc-hl-keyword: #FFB870;
  --cc-hl-type:    #FFE08A;
  --cc-hl-string:  #B6F5B6;
  --cc-hl-number:  #A8E4FF;
  --cc-hl-comment: #C3CFE6;
  --cc-hl-meta:    #DCC4FF;
  --cc-hl-title:   #FFFFFF;
}

/* reveal.js core hooks */
:root {
  --r-background-color: var(--cc-ink);   /* also becomes the PDF page colour */
  --r-main-font: 'Barlow', system-ui, sans-serif;
  --r-heading-font: 'Barlow Semi Condensed', 'Barlow', system-ui, sans-serif;
  --r-code-font: 'JetBrains Mono', ui-monospace, monospace;
  --r-main-color: var(--cc-paper);
  --r-heading-color: var(--cc-gold);
  --r-link-color: var(--cc-gold);
  --r-link-color-hover: var(--cc-accent);
  --r-selection-background-color: var(--cc-accent);
  --r-selection-color: var(--cc-ink-deep);
  --r-main-font-size: 30px;
}

/* -----------------------------------------------------------------------------
   3. Ground
   -------------------------------------------------------------------------- */
.reveal-viewport {
  background-color: var(--cc-ink);
  background-image: radial-gradient(
    ellipse 90% 80% at 50% 42%,
    var(--cc-ink-lift) 0%,
    var(--cc-ink) 46%,
    var(--cc-ink-deep) 100%
  );
}
html.cc-contrast .reveal-viewport { background-image: none; }

.reveal {
  font-family: var(--r-main-font);
  font-size: calc(var(--r-main-font-size) * var(--cc-text-scale));
  font-weight: 400;
  color: var(--cc-paper);
  -webkit-font-smoothing: antialiased;
}

.reveal .slides { text-align: left; }

.reveal .slides section {
  box-sizing: border-box;
  height: 100%;
  padding: var(--cc-pad-y) var(--cc-pad-x)
           calc(var(--cc-pad-y) + var(--cc-footer-h)) var(--cc-pad-x);
}

/* -----------------------------------------------------------------------------
   4. Type scale
   -------------------------------------------------------------------------- */
.reveal h1, .reveal h2, .reveal h3, .reveal h4 {
  font-family: var(--r-heading-font);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.005em;
  text-transform: none;
  text-shadow: none;
  margin: 0 0 0.5em 0;
  color: var(--cc-gold);
}

.reveal h1 { font-size: 2.15em; }

/* Slide title: gold, with the orange rule that echoes the card's fold. */
.reveal h2 {
  font-size: 1.55em;
  padding-bottom: 0.22em;
  margin-bottom: 0.72em;
  border-bottom: 4px solid var(--cc-accent);
}

.reveal h3 {
  font-size: 1.12em;
  font-weight: 600;
  color: var(--cc-paper);
  margin-bottom: 0.4em;
}

.reveal h4 {
  font-size: 0.92em;
  font-weight: 600;
  color: var(--cc-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.reveal p { line-height: 1.4; margin: 0 0 0.7em 0; }

.reveal ul, .reveal ol {
  display: block;
  margin: 0 0 0.7em 1.1em;
  line-height: 1.4;
}
.reveal li { margin-bottom: 0.42em; }
.reveal li::marker { color: var(--cc-accent); }
.reveal ul ul, .reveal ol ol { margin-top: 0.42em; font-size: 0.92em; }

.reveal strong, .reveal b { font-weight: 600; color: var(--cc-gold); }
.reveal em { font-style: italic; }

.reveal blockquote {
  width: auto;
  box-shadow: none;
  background: rgb(255 255 255 / 0.05);
  border-left: 5px solid var(--cc-accent);
  border-radius: 0 4px 4px 0;
  margin: 0.6em 0;
  padding: 0.55em 0.9em;
  font-style: normal;
}
.reveal blockquote p:last-child { margin-bottom: 0; }

.reveal a {
  color: var(--cc-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.reveal a:hover { color: var(--cc-accent); }

.reveal table { font-size: 0.85em; border-collapse: collapse; }
.reveal table th {
  font-family: var(--r-heading-font);
  color: var(--cc-gold);
  border-bottom: 3px solid var(--cc-accent);
}
.reveal table th, .reveal table td {
  padding: 0.3em 0.7em;
  border-bottom: 1px solid var(--cc-rule);
}

/* Reveal ships `html:not(.print-pdf) .reveal section img` with a white plate
   and a grey border, specificity (0,2,3). A plain `.reveal img` rule (0,1,1)
   never lands. Match its shape and add a class to win. */
html .reveal .slides section img {
  display: block;
  height: auto;
  margin: 0.4em 0;
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 4px;
}

/* Cap both axes so a tall image cannot run off the slide. Replaced elements
   honour max-width and max-height together and keep their aspect ratio, so
   one rule covers portrait and landscape.

   r-stretch is excluded deliberately: reveal measures the slide and writes an
   explicit width and height onto that element, and its own
   `.reveal .r-stretch { max-width: none; max-height: none }` is only (0,2,0),
   which this selector would otherwise outrank and undo. */
html .reveal .slides section img:not(.r-stretch):not(.stretch) {
  max-width: 100%;
  max-height: var(--cc-image-max-height);
}

/* Diagrams drawn for a light background need a plate under them; screenshots
   of a dark UI usually just need an edge. Both beat the base rule on class
   count, so they can stay short. */
.reveal .slides section img.cc-plate {
  background: #FFFFFF;
  padding: 0.7em;
  border-radius: 6px;
}
.reveal .slides section img.cc-frame {
  border: 1px solid var(--cc-rule);
}

/* -----------------------------------------------------------------------------
   5. Code
   -------------------------------------------------------------------------- */
.reveal code { font-family: var(--r-code-font); font-variant-ligatures: none; }

/* Inline code reads as a distinct object, not just a colour change. */
.reveal :not(pre) > code {
  background: var(--cc-code-bg);
  color: var(--cc-code-fg);
  border: 1px solid var(--cc-rule);
  border-radius: 4px;
  padding: 0.06em 0.32em;
  font-size: 0.88em;
}

.reveal pre {
  /* position: relative is load-bearing, not cosmetic. Reveal renders each
     step of a [1-3|5|7-9] sequence as an extra <code> absolutely positioned
     at top:0 left:0. Without a positioned <pre> they resolve against the
     <section> and land on top of the slide title. */
  position: relative;
  width: 100%;
  margin: 0.4em 0 0.6em 0;
  box-shadow: none;
  font-size: var(--cc-code-font-size, 0.80em);
  line-height: var(--cc-code-line-height, 1.40);
}

/* The .hljs part of this selector is load-bearing. highlight.js stamps .hljs
   onto every code block, and a bare `.reveal pre code` (0,1,2) loses to any
   `.reveal .hljs` rule (0,2,0). If that happens the background falls back to
   transparent, the stacked step copies show through each other, and a
   replace-the-highlight sequence reads as an additive one. */
.reveal pre > code,
.reveal pre > code.hljs {
  display: block;
  /* The absolutely positioned step copies are width:100% of the <pre>, so the
     base block has to measure the same way or the steps shift by the border. */
  box-sizing: border-box;
  padding: var(--cc-code-padding, 0.7em 0.9em);
  max-height: var(--cc-code-max-height);
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--cc-rule) transparent;
  background: var(--cc-code-bg);   /* must be opaque: it occludes the step below */
  color: var(--cc-code-fg);
  border: 1px solid var(--cc-rule);
  border-radius: 6px;
  tab-size: 2;
  word-wrap: normal;
}

/* -----------------------------------------------------------------------------
   Book quotes. index.html lifts the attribution line out of the blockquote
   into a <figcaption>, so the citation is not spoken as part of the quotation.
   -------------------------------------------------------------------------- */
.reveal .cc-quote { margin: 0.6em 0; }

.reveal .cc-quote blockquote {
  position: relative;
  background: none;
  border-left: none;
  border-radius: 0;
  padding: 0 0 0 1.35em;
  margin: 0;
  font-size: var(--cc-quote-size, 1.15em);
  line-height: 1.28;
  color: var(--cc-paper);
}

/* Decorative opening mark. Two things here are deliberate. The glyph sits
   inside the blockquote's left gutter rather than at a negative offset, so no
   clipping ancestor can ever swallow it. And the weight is pinned: the deck
   only self-hosts Barlow Semi Condensed at 600 and 700, so an inherited 400
   would leave the browser to pick a substitute face. */
.reveal .cc-quote blockquote::before {
  content: '\201C';
  position: absolute;
  left: 0;
  top: -0.14em;
  font-family: var(--r-heading-font), serif;
  font-size: 2.4em;
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  color: var(--cc-accent);
}

/* Closing mark. Inline after the last word rather than parked in the right
   margin, because a margin mark on the right would collide with the ragged
   edge of the text. Set --cc-quote-closing to '' to drop it. */
.reveal .cc-quote blockquote > p:last-of-type::after {
  content: var(--cc-quote-closing, '\201D');
  display: inline-block;
  font-family: var(--r-heading-font), serif;
  font-size: 1.5em;
  font-weight: 700;
  line-height: 0;
  vertical-align: -0.22em;
  margin-left: 0.06em;
  color: var(--cc-accent);
}

/* Attribution: bottom right, clear of the opening mark's gutter. */
.reveal .cc-quote figcaption {
  margin-top: 0.55em;
  padding-left: 1.35em;
  text-align: right;
  font-family: var(--r-heading-font);
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cc-muted);
}
.reveal .cc-quote figcaption cite { font-style: italic; }

/* -----------------------------------------------------------------------------
   Listing captions. index.html wraps every <pre> in a <figure class="cc-listing">
   and inserts the language as a <figcaption>. Flex order moves the caption
   below the code without changing the DOM order a screen reader reads.
   -------------------------------------------------------------------------- */
.reveal .cc-listing {
  display: flex;
  flex-direction: column;
  margin: 0.4em 0 0.6em 0;
}
.reveal .cc-listing pre { margin: 0; }

.reveal .cc-listing figcaption {
  font-family: var(--r-heading-font);
  font-size: 0.66em;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.2;
  color: var(--cc-muted);
  text-align: var(--cc-listing-label-align, right);
  margin-bottom: 0.28em;
}

.reveal .cc-listing.cc-label-below figcaption {
  order: 1;
  margin-bottom: 0;
  margin-top: 0.28em;
}

/* Leave the scrollbar visible. It is the only cue the audience gets that the
   listing continues past the bottom edge. */
.reveal pre > code::-webkit-scrollbar { width: 10px; }
.reveal pre > code::-webkit-scrollbar-track { background: transparent; }
.reveal pre > code::-webkit-scrollbar-thumb {
  background: var(--cc-rule);
  border-radius: 5px;
}

/* Reveal crossfades between steps over 200ms. For the duration of that fade
   two steps are visible at once, which is the thing we are trying to avoid.
   Cut instead of fade. Beats reveal's own .2s rule on class count. */
.reveal pre > code.hljs.has-highlights.fragment {
  transition: none;
}

/* Line numbers: brighter than reveal's default, which is too faint to project. */
.reveal .hljs-ln-numbers {
  opacity: 1;
  color: var(--cc-linenum);
  padding-right: 0.55em;
  user-select: none;
}

/* Reveal resets both cells to padding:0. Put the gutter back on every code
   cell so the accent bar has room to breathe and nothing reflows when a row
   becomes the focused one. */
.reveal .hljs-ln-code {
  padding-left: var(--cc-hl-bar-gap);
}

/* Stepped line focus. Reveal dims to 0.4, which is unreadable for low vision.
   Lift the floor, and mark the focused rows with a bar and a tint as well. */
.reveal .hljs.has-highlights tr:not(.highlight-line) { opacity: 0.5; }
.reveal .hljs.has-highlights .highlight-line { opacity: 1; }
.reveal .hljs.has-highlights .highlight-line .hljs-ln-code {
  background: rgb(255 137 51 / 0.14);
  box-shadow: inset var(--cc-hl-bar-width) 0 0 0 var(--cc-accent);
}
html.cc-contrast .reveal .hljs.has-highlights tr:not(.highlight-line) { opacity: 0.62; }

/* Syntax tokens. */
.reveal .hljs { color: var(--cc-code-fg); }
.reveal .hljs-comment,
.reveal .hljs-quote          { color: var(--cc-hl-comment); font-style: italic; }
.reveal .hljs-keyword,
.reveal .hljs-selector-tag,
.reveal .hljs-literal,
.reveal .hljs-doctag         { color: var(--cc-hl-keyword); font-weight: 700; }
.reveal .hljs-type,
.reveal .hljs-class .hljs-title,
.reveal .hljs-built_in,
.reveal .hljs-selector-class { color: var(--cc-hl-type); }
.reveal .hljs-string,
.reveal .hljs-regexp,
.reveal .hljs-addition        { color: var(--cc-hl-string); }
.reveal .hljs-number,
.reveal .hljs-symbol,
.reveal .hljs-attr,
.reveal .hljs-variable        { color: var(--cc-hl-number); }
.reveal .hljs-meta,
.reveal .hljs-meta .hljs-keyword,
.reveal .hljs-meta-string     { color: var(--cc-hl-meta); }
.reveal .hljs-title,
.reveal .hljs-section,
.reveal .hljs-function .hljs-title { color: var(--cc-hl-title); font-weight: 700; }
.reveal .hljs-deletion        { color: #FF9AA0; }
.reveal .hljs-emphasis        { font-style: italic; }
.reveal .hljs-strong          { font-weight: 700; }

/* -----------------------------------------------------------------------------
   6. Slide chrome — the orange corner fold from the title card, plus a footer
   -------------------------------------------------------------------------- */
.reveal .slides section.cc-slide::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 74px; height: 74px;
  background: var(--cc-accent);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  pointer-events: none;
}

.reveal .slides section.cc-slide::after {
  content: attr(data-footer);
  position: absolute;
  left: var(--cc-pad-x);
  right: var(--cc-pad-x);
  bottom: calc(var(--cc-pad-y) * 0.55);
  padding-top: 0.55em;
  border-top: 1px solid var(--cc-rule);
  font-family: var(--r-heading-font);
  font-size: 0.6em;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--cc-muted);
  pointer-events: none;
}

/* A vertical stack's parent <section> also matches the padding rule above, and
   its children sit inside it, so every vertical slide would be indented twice.
   Reveal zeroes padding-top and padding-bottom on .stack but not the sides. */
.reveal .slides > section.stack {
  padding-left: 0;
  padding-right: 0;
}

/* Full-bleed slides (title, section dividers, the closing card) opt out. */
.reveal .slides section.cc-bleed {
  padding: 0;
}
.reveal .slides section.cc-bleed::before,
.reveal .slides section.cc-bleed::after { content: none; }

/* -----------------------------------------------------------------------------
   7. Authoring helpers — reach for these from Markdown with
      <!-- .element: class="cc-lead" -->
   -------------------------------------------------------------------------- */
.cc-lead {
  font-family: var(--r-heading-font);
  font-size: 1.5em;
  font-weight: 600;
  line-height: 1.15;
  color: var(--cc-paper);
}

.cc-note {
  font-size: 0.72em;
  color: var(--cc-muted);
  line-height: 1.35;
}

/* Horizontal centring of a block: an image, a <pre>, a cc-cols grid. Only
   visible if the block is narrower than the slide, so pair it with a width
   or with r-stretch, which writes an explicit width of its own. Deliberately
   does not touch text-align; centred body text is harder to read at distance. */
.reveal .slides section .cc-center,
.reveal .slides section img.cc-center {
  margin-left: auto;
  margin-right: auto;
}

/* Vertical centring of everything on the slide. Note that reveal's own
   `center` class does nothing here: it works by comparing scrollHeight to the
   slide height, and this theme gives every section height:100%, so the
   difference is always zero. Flexbox instead. */
.reveal .slides section.cc-middle {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4em; align-items: start; }
.cc-cols-center { align-items: center; }
.cc-cols-2-1 { grid-template-columns: 2fr 1fr; }
.cc-cols-1-2 { grid-template-columns: 1fr 2fr; }
.cc-cols > * { min-width: 0; }
.cc-cols pre { font-size: 0.72em; }

.cc-callout {
  border-left: 5px solid var(--cc-gold);
  background: rgb(255 255 255 / 0.05);
  border-radius: 0 4px 4px 0;
  padding: 0.55em 0.9em;
  margin: 0.6em 0;
}

/* An eyebrow above a slide title, for marking which act of the talk you're in.
   Only use it if the deck really has parts — otherwise it is decoration. */
.cc-eyebrow {
  font-family: var(--r-heading-font);
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cc-accent);
  margin-bottom: 0.35em;
}

/* Section divider slide. */
.cc-divider {
  display: flex; flex-direction: column; justify-content: center;
  height: 100%;
  padding: 0 var(--cc-pad-x);
}
.cc-divider h2 { font-size: 2.3em; border-bottom: none; padding-bottom: 0; }

/* -----------------------------------------------------------------------------
   8. Accessibility floor
   -------------------------------------------------------------------------- */
.reveal .slide-number {
  font-family: var(--r-heading-font);
  font-size: 20px;
  font-weight: 600;
  background: rgb(0 0 0 / 0.55);
  color: var(--cc-paper);
  padding: 4px 9px;
  border-radius: 4px;
}

.reveal .progress { color: var(--cc-accent); height: 5px; }

:focus-visible {
  outline: 3px solid var(--cc-focus);
  outline-offset: 3px;
}

/* Announced to screen readers, invisible on screen. */
.cc-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Small on-screen readout for the contrast / text-size controls. */
#cc-a11y-status {
  position: fixed;
  left: 12px; bottom: 12px;
  z-index: 60;
  font-family: var(--r-heading-font);
  font-size: 15px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--cc-ink-deep);
  background: var(--cc-gold);
  padding: 5px 11px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
#cc-a11y-status.cc-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .reveal .slides section,
  .reveal .fragment,
  #cc-a11y-status { transition: none !important; }
}

/* -----------------------------------------------------------------------------
   9. PDF export (?print-pdf) — keep the ground dark, drop the chrome noise
   -------------------------------------------------------------------------- */
html.reveal-print .reveal .slide-background {
  background-color: var(--cc-ink);
  background-image: radial-gradient(
    ellipse 90% 80% at 50% 42%,
    var(--cc-ink-lift) 0%,
    var(--cc-ink) 46%,
    var(--cc-ink-deep) 100%
  );
}
html.reveal-print #cc-a11y-status { display: none; }
html.reveal-print .reveal pre code { max-height: none; overflow: visible !important; }