/*-- scss:defaults --*/

// Wan Academy slide theme — navy/cream palette matching the book and Academy
$navy:        #2a3f5c;
$navy-light:  #3c5078;
$navy-dark:   #1f2d4a;
$gold:        #a67b2c;
$gold-light:  #c79753;
$cream:       #f6f4ef;
$cream-dark:  #ece6d6;
$ink:         #1a1a1a;
$ink-soft:    #3a3a3a;
$muted:       #6a6a6a;
$rule:        #d8d4ca;
$green:       #557a55;
$red:         #c0392b;

// reveal.js theme variables
$body-bg:                 $cream;
$body-color:              $ink;
$link-color:              $navy-light;
$link-color-hover:        $navy;
$heading-color:           $navy;
$heading-font-weight:     700;
$heading-text-transform:  none;
$main-font:               "Georgia", "Charter", "Iowan Old Style", serif;
$main-font-size:          30px;
$heading-font:            "Georgia", "Charter", "Iowan Old Style", serif;
$code-font:               "SF Mono", "Menlo", "Consolas", monospace;

$presentation-heading-color: $navy;
$presentation-heading-font-weight: 700;

/*-- scss:rules --*/

// =====================================================================
// SLIDE LAYOUT — each slide is a WHITE paper card on a cream "desk".
// =====================================================================
.reveal {
  font-family: "Georgia", "Charter", "Iowan Old Style", serif;
  font-size: 28px;
  color: $ink;
}

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

// White paper card. Generous internal padding so margins look like a
// real document, not a screen.
.reveal .slides section {
  background: #ffffff !important;
  padding: 60px 80px !important;
  box-sizing: border-box;
}

// Top "eyebrow" tag style — small uppercase label above a slide title
.reveal .eyebrow {
  display: block;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: $gold;
  font-weight: 700;
  margin-bottom: 10px;
}

// =====================================================================
// HEADINGS
// =====================================================================
.reveal h1, .reveal h2, .reveal h3, .reveal h4 {
  color: $navy !important;
  font-weight: 700;
  line-height: 1.15;
  text-transform: none;
  letter-spacing: -0.005em;
  margin-bottom: 0.4em;
}
.reveal h1 { font-size: 56px; }
.reveal h2 { font-size: 36px; padding-bottom: 0.18em; border-bottom: 2px solid $gold; display: inline-block; }
.reveal h3 { font-size: 24px; color: $navy-light !important; }
.reveal h4 { font-size: 18px; font-style: italic; color: $ink-soft !important; }

// =====================================================================
// PROSE
// =====================================================================
.reveal p {
  font-size: 26px;
  line-height: 1.4;
  color: $ink;
  margin-bottom: 0.5em;
}
.reveal p.lead {
  font-size: 30px;
  color: $ink-soft;
  line-height: 1.4;
}
.reveal p.muted { color: $muted; font-size: 22px; }

.reveal ul, .reveal ol {
  font-size: 26px;
  line-height: 1.45;
}
.reveal li {
  margin-bottom: 0.35em;
  color: $ink;
}
.reveal li::marker { color: $gold; font-weight: 700; }

.reveal strong { color: $navy; font-weight: 700; }
.reveal em { font-style: italic; color: $ink-soft; }

// =====================================================================
// CODE
// =====================================================================
.reveal pre {
  background: #fbfaf6 !important;
  border-left: 4px solid $navy !important;
  border-radius: 0 4px 4px 0 !important;
  padding: 14px 18px !important;
  font-family: $code-font !important;
  font-size: 18px !important;
  line-height: 1.45 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.reveal pre code {
  font-size: 18px !important;
  background: transparent !important;
  color: $ink !important;
}
.reveal code {
  background: $cream-dark;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: $code-font;
  font-size: 0.9em;
  color: $navy;
}

// =====================================================================
// CALLOUTS  (.callout-note / .callout-tip / .callout-important etc.)
// =====================================================================
.reveal .callout {
  border-left: 4px solid $navy !important;
  background: rgba(255, 255, 255, 0.7) !important;
  border-radius: 0 4px 4px 0 !important;
  margin: 0.6em 0 !important;
  padding: 10px 16px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.reveal .callout-title {
  font-family: "Georgia", serif !important;
  color: $navy !important;
  font-weight: 700;
  font-size: 18px !important;
  margin-bottom: 4px;
}
.reveal .callout-body, .reveal .callout p, .reveal .callout li {
  font-size: 20px !important;
  line-height: 1.4 !important;
}
.reveal .callout-tip       { border-left-color: $green !important; }
.reveal .callout-tip       .callout-title { color: $green !important; }
.reveal .callout-important { border-left-color: $red !important; }
.reveal .callout-important .callout-title { color: $red !important; }
.reveal .callout-warning   { border-left-color: $gold !important; }
.reveal .callout-warning   .callout-title { color: $gold !important; }
.reveal .callout-note      { border-left-color: $navy-light !important; }
.reveal .callout-note      .callout-title { color: $navy-light !important; }

// =====================================================================
// TABLES
// =====================================================================
.reveal table {
  font-size: 22px;
  border-collapse: collapse;
  margin: 0.5em auto;
}
.reveal table th, .reveal table td {
  padding: 8px 14px;
  border: none;
  border-bottom: 1px solid $rule;
  text-align: left;
}
.reveal table thead th {
  border-bottom: 2px solid $navy;
  color: $navy;
  font-weight: 700;
  background: rgba($navy, 0.04);
}

// =====================================================================
// COLUMNS (two-column layouts)
// =====================================================================
.reveal .columns {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.reveal .column { flex: 1; }

// =====================================================================
// PROGRESS BAR / SLIDE NUMBER / NAVBAR
// =====================================================================
.reveal .progress {
  color: $gold !important;
  height: 4px !important;
}
.reveal .slide-number {
  background: rgba($navy, 0.85) !important;
  color: $cream !important;
  font-family: "Helvetica Neue", Arial, sans-serif !important;
  font-size: 12px !important;
  padding: 4px 9px;
  border-radius: 3px;
}
.reveal .footer {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  color: $muted;
  letter-spacing: 0.04em;
}

// =====================================================================
// PYODIDE / LIVE-REVEALJS CELLS
// =====================================================================
.reveal .qpy-cell, .reveal [class*="qpy-"] {
  font-size: 18px !important;
}
.reveal .exercise-cell, .reveal .cell-output {
  background: #fbfaf6 !important;
  border-left: 3px solid $navy !important;
  border-radius: 0 4px 4px 0 !important;
  font-size: 18px !important;
}

// Style the Run button to match the navy theme
.reveal button[class*="run"], .reveal .qpy-run {
  background: $navy !important;
  color: white !important;
  border-radius: 3px !important;
  font-family: "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 600 !important;
  padding: 4px 12px !important;
  font-size: 13px !important;
  border: none !important;
}
.reveal button[class*="run"]:hover, .reveal .qpy-run:hover {
  background: $navy-light !important;
}

// =====================================================================
// PAPER-PAGE LOOK
// Slide = WHITE paper card with a hairline outline + soft drop shadow,
// resting on a CREAM "desk" canvas (matches the Academy aesthetic the
// user wants the deck to mirror).
// =====================================================================
.reveal-viewport {
  background: $cream !important;
}
.reveal .slides section {
  box-shadow: 0 10px 36px rgba(0,0,0,0.18),
              0 2px 6px rgba(0,0,0,0.10);
  outline: 1px solid rgba(0,0,0,0.08);
  // IMPORTANT: do NOT set `position: relative` here — reveal.js relies on
  // `position: absolute` on every slide to stack them. Overriding that
  // pushes slides 2..N off-screen and only slide 1 displays correctly.

  // When a Pyodide cell runs and its output makes the content taller
  // than the slide, let the slide scroll vertically instead of growing
  // past the viewport.
  //
  // Two pieces are required: a `max-height` so the section actually
  // has a scroll boundary, AND `overflow-y: auto` so a scrollbar
  // appears when content exceeds it. `100%` here resolves to the
  // slides-container height (720px per the YAML), which is exactly
  // the visible slide area.
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

// Subtle styled scrollbar so the scroll cue is obvious but not noisy
.reveal .slides section::-webkit-scrollbar { width: 8px; }
.reveal .slides section::-webkit-scrollbar-track { background: transparent; }
.reveal .slides section::-webkit-scrollbar-thumb {
  background: rgba(42, 63, 92, 0.18);
  border-radius: 4px;
}
.reveal .slides section::-webkit-scrollbar-thumb:hover {
  background: rgba(42, 63, 92, 0.32);
}
// Inset hairline frame just inside the paper edge.
// (The ::before is itself position:absolute and resolves against the
// reveal-js position:absolute section, so we don't need any explicit
// positioning override on the section.)
.reveal .slides section::before {
  content: "";
  position: absolute;
  top: 22px; left: 28px; right: 28px; bottom: 22px;
  border: 1px solid rgba(42, 63, 92, 0.06);
  pointer-events: none;
}

// =====================================================================
// TITLE / COVER SLIDE — white paper book-cover layout
// (gold rule beneath the title, navy ink, generous margins)
// =====================================================================
.reveal .title-slide, .reveal section.cover {
  background: #ffffff !important;
  color: $ink !important;
  padding: 80px 100px !important;
  position: relative;
}
.reveal .title-slide::after, .reveal section.cover::after {
  // Gold horizontal rule under the title block — like a book title page
  content: "";
  position: absolute;
  left: 80px; right: 80px;
  top: 56%;
  border-top: 3px solid $gold;
  opacity: 0.85;
}
.reveal .title-slide .eyebrow, .reveal section.cover .eyebrow {
  color: $gold !important;
}
.reveal .title-slide h1, .reveal section.cover h1 {
  color: $navy !important;
  font-size: 68px;
  border: none;
  font-family: "Georgia", serif;
  letter-spacing: -0.005em;
  line-height: 1.05;
}
.reveal .title-slide .subtitle, .reveal section.cover .subtitle {
  font-size: 26px;
  color: $ink-soft !important;
  font-style: italic;
  margin-top: 12px;
  font-family: "Georgia", serif;
}
.reveal .title-slide .author, .reveal section.cover .author {
  color: $navy !important;
  font-size: 20px;
  margin-top: 64px;
  letter-spacing: 0.02em;
  font-family: "Georgia", serif;
  font-weight: 700;
}
.reveal .title-slide .pub-info, .reveal section.cover .pub-info {
  color: $muted !important;
  font-size: 14px;
  margin-top: 6px;
  font-family: "Georgia", serif;
  font-style: italic;
}

// Optional dark variant — explicitly opt in with `.cover-dark`
.reveal section.cover-dark {
  background: linear-gradient(135deg, $navy-light 0%, $navy-dark 100%) !important;
  color: $cream !important;
}
.reveal section.cover-dark::after { display: none; }
.reveal section.cover-dark h1 { color: $cream !important; }
.reveal section.cover-dark .subtitle { color: rgba(255,255,255,0.85) !important; }
.reveal section.cover-dark .author { color: $gold-light !important; }
.reveal section.cover-dark .pub-info { color: rgba(255,255,255,0.65) !important; }

// =====================================================================
// SECTION DIVIDER SLIDES — white paper, centred, gold rule under title
// =====================================================================
.reveal section.divider {
  background: #ffffff !important;
  color: $ink !important;
  padding: 100px 80px !important;
  text-align: center;
}
.reveal section.divider h2 {
  color: $navy !important;
  font-size: 50px;
  border-bottom: 3px solid $gold;
  padding-bottom: 10px;
  display: inline-block;
}
.reveal section.divider p {
  color: $ink-soft;
  font-size: 24px;
  font-style: italic;
}

// =====================================================================
// KEY-TAKEAWAY BOX  (.box)
// =====================================================================
.reveal .box {
  background: white;
  border: 1px solid $rule;
  border-left: 4px solid $gold;
  border-radius: 0 4px 4px 0;
  padding: 14px 18px;
  margin: 14px 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  font-size: 22px;
}
.reveal .box h4 {
  margin: 0 0 6px;
  font-size: 16px;
  color: $gold;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

// =====================================================================
// LANDING / INDEX PAGE
// =====================================================================
body.landing {
  background: $cream;
  font-family: $main-font;
}
body.landing .grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 900px;
  margin: 30px auto;
}
body.landing .deck-card {
  background: white;
  border: 1px solid $rule;
  border-radius: 6px;
  padding: 20px 24px;
  text-decoration: none;
  color: $ink;
  transition: all 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
body.landing .deck-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  border-color: $navy;
}
body.landing .deck-card .ch {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: $gold;
  font-weight: 700;
  display: block;
  margin-bottom: 6px;
}
body.landing .deck-card h3 {
  color: $navy;
  font-size: 22px;
  margin: 0 0 8px;
}
body.landing .deck-card p {
  color: $ink-soft;
  font-size: 14px;
  margin: 0;
  line-height: 1.45;
}
@media (max-width: 720px) {
  body.landing .grid { grid-template-columns: 1fr; }
}