/* prpl Foundation reveal.js theme. Source of truth: BRAND.md.
   Canvas 1920x1080 (set width/height in Reveal.initialize). */

:root {
  /* brand colours */
  --c-purple: #72166b;
  --c-yellow: #ffd166;
  --c-blue:   #5cbbf6;
  --c-ground: #f7f7f7;
  --c-ink:    #303030;
  --c-band:   #ededed;
  --c-muted:  #b3b3b3;
  --c-fail:   #c0392b;   /* only failure colour; not a brand colour */
  --c-white:  #f7f7f7;   /* text on purple (brand "white" is the ground colour) */

  /* derived tints */
  --c-purple-10: rgba(114, 22, 107, .10);
  --c-purple-20: rgba(114, 22, 107, .20);
  --c-yellow-40: rgba(255, 209, 102, .40);
  --c-blue-20:   rgba(92, 187, 246, .20);
  --c-fail-10:   rgba(192, 57, 43, .10);
  --c-fail-20:   rgba(192, 57, 43, .20);
  --c-ink-50:    rgba(48, 48, 48, .50);

  /* type */
  --font-sans: "Roboto", "Myriad Pro", "Gill Sans", "Gill Sans MT", sans-serif;
  --font-heading: "Poppins", "Roboto", "Myriad Pro", "Gill Sans", "Gill Sans MT", sans-serif;
  --font-mono: "Courier New", "Trebuchet MS", monospace;
  --fs-h1: 72px; --fs-h2: 56px; --fs-h3: 40px;
  --fs-body: 34px; --fs-small: 26px; --fs-code: 28px;

  /* shape */
  --radius: 10px;
  --shadow: 0 0 15px rgba(201, 201, 201, .25);
  --pad: 30px;
}

/* ---------- base ---------- */
html, body { background: var(--c-ground); }
.reveal-viewport { background: var(--c-ground); }
.reveal {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--c-ink);
}
.reveal ::selection { background: #24890d; color: #fff; }

.reveal .slides { text-align: left; }
.reveal .slides section,
.reveal .slides section.present {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 60px 80px;
  text-align: left;
}
/* purple slides: full-bleed via the section's own box, which fills the canvas */
.reveal .slides section.divider,
.reveal .slides section.title {
  background: var(--c-purple);
  color: var(--c-white);
  display: flex !important;
  flex-direction: column;
  justify-content: center;
}
.reveal .slides section.divider h1, .reveal .slides section.divider h2, .reveal .slides section.divider h3,
.reveal .slides section.title h1, .reveal .slides section.title h2, .reveal .slides section.title h3 { color: var(--c-white); }
.reveal .slides section.divider .kicker,
.reveal .slides section.title .kicker { color: var(--c-yellow); }
.reveal .slides section.divider a, .reveal .slides section.title a { color: var(--c-yellow); }
.reveal .slides section.divider .hl, .reveal .slides section.title .hl { color: var(--c-ink); }

/* reveal sets a default background colour via data-background; make the purple
   fill the whole viewport on wide/tall screens too */
.reveal.has-dark, .has-dark.reveal-viewport { background: var(--c-purple); }
.reveal-viewport:has(.reveal.has-dark) { background: var(--c-purple); }

/* ---------- headings ---------- */
.reveal h1, .reveal h2, .reveal h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--c-ink);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
  margin: 0 0 var(--pad);
  text-align: left;
}
.reveal h1 { font-size: var(--fs-h1); line-height: 1.25; }
.reveal h2 { font-size: var(--fs-h2); line-height: 1.3; }
.reveal h3 { font-size: var(--fs-h3); line-height: 1.35; }
.reveal h1 .accent, .reveal h2 .accent, .reveal h3 .accent { color: var(--c-yellow); }

.reveal .kicker {
  display: block;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-small);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--c-purple);   /* blue fails contrast on ground; purple is safe */
  margin: 0 0 15px;
}
.reveal .kicker.blue { color: var(--c-blue); font-size: 32px; font-weight: 600; }

/* ---------- text ---------- */
.reveal p { margin: 0 0 var(--pad); }
.reveal strong, .reveal b, .reveal em { font-weight: 400; font-style: normal; }
.reveal a { color: var(--c-purple); font-family: var(--font-sans); font-weight: 400; text-decoration: none; }
.reveal a:hover, .reveal a:focus, .reveal a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.reveal small, .reveal .small { font-size: var(--fs-small); line-height: 1.4; }
.reveal .caption { font-size: var(--fs-small); color: var(--c-ink-50); margin-top: 15px; }
.reveal ul, .reveal ol { display: block; margin: 0 0 var(--pad) 1.1em; text-align: left; }
.reveal li { margin: 0 0 12px; }
.reveal li::marker { color: var(--c-purple); }

.reveal code, .reveal pre {
  font-family: var(--font-mono);
  font-size: var(--fs-code);
  font-weight: 400;
}
.reveal code { background: var(--c-band); padding: 2px 8px; border-radius: 6px; }
.reveal pre {
  width: 100%;
  margin: 0 0 var(--pad);
  background: var(--c-band);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  line-height: 1.4;
}
.reveal pre code { background: none; padding: var(--pad); max-height: none; color: var(--c-ink); }

/* ---------- cards / utilities for diagrams ---------- */
.reveal .card {
  background: var(--c-ground);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--pad);
}
.reveal .lane-band { background: var(--c-band); border-radius: var(--radius); padding: var(--pad); }
.reveal .step { }   /* use with class="fragment step"; kept as a hook for diagram steps */
.reveal .fragment.step { transition: none; }
.reveal .fail { color: var(--c-fail); }
.reveal .ok   { color: var(--c-purple); }
.reveal .muted { color: #6a6a6a; }   /* 5.05:1 on ground; --c-muted stays for diagram marks */
.reveal .hl {
  background: linear-gradient(transparent 12%, var(--c-yellow) 12%, var(--c-yellow) 92%, transparent 92%);
  padding: 0 .2em;
  border-radius: 4px;
  color: var(--c-ink);
}
.reveal .fail-fill { background: var(--c-fail-10); }
.reveal .ok-fill   { background: var(--c-purple-10); }
.reveal .cols { display: flex; gap: var(--pad); }
.reveal .cols > * { flex: 1 1 0; min-width: 0; }

/* ---------- tables ---------- */
/* rules: --c-rule is 2.76:1 on ground, 2.53:1 on the zebra band */
:root { --c-rule: #969696; }
.reveal table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1.5px solid var(--c-rule);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0 0 var(--pad);
  font-size: var(--fs-small);
  text-align: left;
}
.reveal table th, .reveal table td {
  text-align: left;
  padding: 16px 22px;
  border: none;
  border-left: 1px solid var(--c-rule);
  border-top: 1.5px solid var(--c-rule);
}
.reveal table tr > :first-child { border-left: none; }
.reveal table tr > :nth-child(2) { border-left-width: 1.5px; }   /* right rule of the label column */
.reveal table tr:first-child > * { border-top: none; }
.reveal table thead tr:last-child > * { border-bottom: 3px solid var(--c-purple); }
.reveal table thead + tbody tr:first-child > * { border-top: none; }
.reveal table th {
  color: var(--c-purple);
  font-family: var(--font-heading);
  font-weight: 600;
  background: none;
}
.reveal table tbody td:first-child { font-weight: 400; }
.reveal table tbody tr:nth-child(even) > * { background: var(--c-band); }
.reveal table tbody tr:nth-child(odd) > * { background: var(--c-ground); }

/* ---------- chrome: logo, counter, progress ---------- */
.prpl-logo {
  position: fixed;
  left: 2.6vw;
  bottom: 2.4vh;
  width: 8.33vw;            /* 160px on a 1920 viewport */
  height: auto;
  z-index: 30;
  pointer-events: none;
}
.prpl-logo.white { display: none; }
.reveal.has-dark .prpl-logo.purple { display: none; }
.reveal.has-dark .prpl-logo.white { display: block; }

.reveal .slide-number {
  right: 2.6vw;
  bottom: 2.4vh;
  background: none;
  color: var(--c-ink-50);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: max(14px, 1.35vw);
}
.reveal.has-dark .slide-number { color: var(--c-white); }
.reveal .progress { height: 6px; color: var(--c-purple); background: var(--c-band); }
.reveal.has-dark .progress { color: var(--c-yellow); background: rgba(247, 247, 247, .2); }

/* ---------- print ---------- */
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body { background: var(--c-ground); }
  .prpl-logo { display: none; }   /* fixed overlay does not paginate; use per-slide logos if PDF is needed */
}