/* Base reveal.js styles
 *
 * Copy this file as styles.css for each new presentation.
 * Customize the CSS variables (especially colors) for your theme.
 *
 * IMPORTANT: All font sizes use pt (points) for predictable sizing.
 * Base text is intentionally small (16pt) to fit content-heavy slides.
 * Use .text-lg, .text-xl, etc. classes when slides have less content.
 */

/* ===========================================
   CSS VARIABLES - Customize these for each presentation
   =========================================== */
:root {
  /* ===========================================
     BACKGROUND COLORS
     For dark presentations, change to dark colors (e.g., #1a1a2e, #0d1117)
     Then update --text-color and --muted-color to light colors below.
     =========================================== */
  --background-color: #101820;              /* Main slide background */
  --section-divider-bg: #101820;            /* Section divider background (set different for contrast) */

  /* Typography - ALWAYS use pt for font sizes */
  --heading-font: Georgia, "Times New Roman", serif;
  --body-font: Helvetica, Arial, sans-serif;
  --base-font-size: 32px;   /* Only px value - sets reveal.js base */
  --text-size: 17pt;        /* Base body text - intentionally small */
  --h1-size: 52pt;
  --h2-size: 34pt;
  --h3-size: 21pt;
  --footnote-size: 11pt;

  /* Colors - CUSTOMIZE THESE */
  --primary-color: #39C5BB;    /* Main accent color */
  --secondary-color: #F2A65A;  /* Secondary accent */
  --text-color: #F5F7FA;       /* Main text - use light color (e.g., #f0f0f0) for dark backgrounds */
  --muted-color: #A9B7C7;      /* Secondary text - use lighter color for dark backgrounds */
  --line-color: #3E5368;       /* Decorative lines */
  --card-bg: #172536;
  --card-bg-soft: #E9F3F1;
  --card-text: #142230;
  --danger-color: #E85D5A;
  --green-color: #5CC48A;
  --blue-color: #5BA8E5;

  /* Layout */
  --slide-padding: 56px;
  --slide-padding-top: 34px;
  --content-gap: 30px;

  /* Border radius for custom components */
  --box-radius: 8px;           /* Set to 0 for sharp corners */
}

/* ===========================================
   BASE STYLES - Override reveal.js defaults
   =========================================== */

.reveal {
  font-family: var(--body-font);
  font-size: var(--base-font-size);
}

/* Restore bold after reset.css strips it with font: inherit */
.reveal strong,
.reveal b {
  font-weight: bold;
}

/* Apply background colors */
.reveal-viewport {
  background-color: var(--background-color);
}

/* Section divider background via data-state */
.reveal-viewport.is-section-divider .slide-background.present {
  background-color: var(--section-divider-bg) !important;
}

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  font-family: var(--heading-font);
  text-transform: none;
  color: var(--text-color);
  font-weight: 700;
  line-height: 1.2;
}

.reveal h1 { font-size: var(--h1-size); }
.reveal h2 {
  font-size: var(--h2-size);
  margin-bottom: 0;
  letter-spacing: 0;
  border-bottom: 1px solid var(--line-color);
  padding-bottom: 12px;
}
.reveal h3 { font-size: var(--h3-size); }

.reveal p,
.reveal li,
.reveal td,
.reveal th,
.reveal blockquote {
  font-size: var(--text-size);
  color: var(--text-color);
  line-height: 1.5;
}

/* ===========================================
   LISTS
   =========================================== */

.reveal ul {
  list-style: none;
  padding-left: 0;
  margin: 15px 0;
}

.reveal ul li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 10px;
}

.reveal ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  background: var(--primary-color);
  border-radius: 50%;
}

.reveal ul ul li::before {
  background: var(--muted-color);
  width: 6px;
  height: 6px;
}

/* Prevent double-sizing for nested elements */
.reveal blockquote p {
  font-size: inherit;
}

/* ===========================================
   SLIDE LAYOUT
   =========================================== */

.reveal .slides section {
  height: 100%;
  display: flex !important;
  flex-direction: column !important;
  padding: var(--slide-padding-top) var(--slide-padding) var(--slide-padding) var(--slide-padding) !important;
  box-sizing: border-box;
  text-align: left;
}

.reveal code {
  color: #F2D479;
  font-size: 15pt;
}

/* Vertical stack wrapper - no padding, just pass through */
.reveal .slides section.stack {
  padding: 0 !important;
}

/* Content area - fills remaining space */
.reveal .slides section > .content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: var(--content-gap);
  text-align: left;
}

/* Footnotes at bottom */
.reveal .slides section > .footnote {
  position: absolute;
  bottom: 15px;
  left: var(--slide-padding);
  right: var(--slide-padding);
  font-size: var(--footnote-size);
  color: var(--muted-color);
}

.reveal .slides section > .footnote p {
  font-size: var(--footnote-size) !important;
  color: var(--muted-color) !important;
  margin: 0;
}

.reveal .footnote p {
  font-size: var(--footnote-size) !important;
  color: var(--muted-color) !important;
  margin: 0;
}

/* ===========================================
   SECTION DIVIDERS - Centered title slides
   =========================================== */

.reveal .slides section.section-divider {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center;
}

.reveal .slides section.section-divider h1 {
  font-size: 58pt;
  text-align: center;
  border-bottom: none;
}

.reveal .slides section.section-divider p {
  font-size: 20pt;
  color: var(--muted-color);
}

/* ===========================================
   HUBKV WALKTHROUGH COMPONENTS
   =========================================== */

.reveal .title-slide h1 {
  font-size: 76pt;
  margin: 8px 0 10px 0;
}

.eyebrow {
  color: var(--primary-color) !important;
  font-size: 15pt !important;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0;
}

.subtitle {
  max-width: 920px;
  text-align: center;
  font-size: 24pt !important;
  color: var(--text-color) !important;
}

.title-meta {
  display: flex;
  gap: 14px;
  margin-top: 26px;
  flex-wrap: wrap;
  justify-content: center;
}

.title-meta p {
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--line-color);
  border-radius: 999px;
  background: #142232;
  color: var(--muted-color) !important;
  font-size: 13pt !important;
}

.title-meta i {
  color: var(--secondary-color);
  margin-right: 8px;
}

.large-callout {
  background: var(--card-bg);
  border: 1px solid var(--line-color);
  border-radius: var(--box-radius);
  padding: 30px;
}

.large-callout p {
  margin: 0 0 18px 0;
}

.large-callout p:last-child {
  margin-bottom: 0;
}

.pipeline {
  display: grid;
  grid-template-columns: 1fr 36px 1fr 36px 1fr;
  align-items: center;
  gap: 8px;
}

.pipe-step {
  min-height: 132px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: var(--box-radius);
  background: #E8EEF4;
  border: 2px solid #9EB2C4;
}

.pipe-step p {
  color: var(--card-text) !important;
  font-size: 17pt !important;
  font-weight: 700;
}

.pipe-step.accent {
  background: #DBF4F1;
  border-color: var(--primary-color);
}

.pipe-arrow p {
  color: var(--secondary-color) !important;
  font-size: 30pt !important;
  text-align: center;
  margin: 0;
}

.note-strip {
  margin-top: 24px;
  padding: 16px 20px;
  border-left: 5px solid var(--secondary-color);
  background: #172536;
  border-radius: var(--box-radius);
}

.note-strip.compact {
  margin-top: 12px;
}

.note-strip p {
  margin: 0;
}

.concept-card,
.plain-card,
.lesson-card,
.algo-step,
.figure-card {
  border-radius: var(--box-radius);
  border: 1px solid var(--line-color);
}

.concept-card {
  min-height: 340px;
  padding: 26px;
  background: var(--card-bg);
}

.concept-card h3,
.plain-card h3,
.lesson-card h3,
.algo-step h3,
.figure-card h3 {
  margin: 0 0 12px 0;
  font-size: 20pt;
}

.concept-card.red {
  border-top: 5px solid var(--danger-color);
}

.concept-card.green {
  border-top: 5px solid var(--green-color);
}

.formula {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26pt !important;
  color: #F2D479 !important;
  margin: 16px 0;
}

.small-text {
  color: var(--muted-color) !important;
  font-size: 14pt !important;
}

.figure-card {
  background: #F7FAFC;
  padding: 12px;
  min-height: 466px;
}

.figure-card img {
  display: block;
  width: 100%;
  height: 255px;
  object-fit: contain;
  background: #FFFFFF;
  border-radius: 4px;
}

.figure-card h3,
.figure-card p {
  color: var(--card-text) !important;
}

.figure-card h3 {
  margin-top: 16px;
}

.figure-card p {
  font-size: 14pt !important;
}

.image-frame {
  background: #F7FAFC;
  border-radius: var(--box-radius);
  padding: 12px;
  border: 1px solid #BFD0DA;
}

.image-frame img {
  width: 100%;
  height: 448px;
  object-fit: contain;
  display: block;
}

.mini-point {
  border-left: 4px solid var(--primary-color);
  background: var(--card-bg);
  border-radius: 0 var(--box-radius) var(--box-radius) 0;
  padding: 16px 18px;
  margin-bottom: 16px;
}

.mini-point p {
  margin: 0;
}

.coverage-diagram {
  position: relative;
  height: 220px;
  border-radius: var(--box-radius);
  background: #E9F3F1;
  border: 1px solid #A4C9C3;
  padding: 30px;
  box-sizing: border-box;
}

.token-row {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 12px;
  margin-top: 28px;
}

.token-row span {
  height: 38px;
  border-radius: 5px;
  background: #9DB1C2;
}

.token-row span.hot {
  background: #F2A65A;
}

.token-row span.hub {
  background: #39C5BB;
  transform: translateY(-14px);
  box-shadow: 0 14px 22px rgba(16, 24, 32, 0.18);
}

.coverage-band {
  position: absolute;
  bottom: 24px;
  height: 48px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #2F6F74;
}

.coverage-band.left {
  left: 210px;
  width: 330px;
}

.coverage-band.right {
  right: 210px;
  width: 300px;
}

.coverage-band p {
  color: var(--card-text) !important;
  font-size: 13pt !important;
  margin: 0;
}

.plain-card {
  background: var(--card-bg);
  padding: 22px;
  min-height: 136px;
}

.returns-scene {
  background: #142232;
  border: 1px solid var(--line-color);
  border-radius: var(--box-radius);
  padding: 24px;
}

.score-strip {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 10px;
  align-items: end;
  min-height: 132px;
  padding: 0 6px;
}

.score-token {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: 6px 6px 4px 4px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.14);
}

.score-token p {
  margin: 0 0 8px 0;
  color: #0B1720 !important;
  font-size: 11pt !important;
  font-weight: 800;
}

.score-token.low {
  height: 46px;
  background: #8EA4B8;
}

.score-token.mid {
  height: 72px;
  background: #B8C8D8;
}

.score-token.hot {
  height: 112px;
  background: var(--secondary-color);
}

.score-token.hub {
  height: 126px;
  background: var(--primary-color);
  transform: translateY(-10px);
  border-color: #BDF6EF;
}

.score-token.discounted {
  opacity: 0.44;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(16, 24, 32, 0.0) 0,
    rgba(16, 24, 32, 0.0) 8px,
    rgba(16, 24, 32, 0.26) 8px,
    rgba(16, 24, 32, 0.26) 14px
  );
}

.score-token.distant {
  outline: 2px dashed rgba(57, 197, 187, 0.72);
  outline-offset: 4px;
}

.returns-arrow p {
  color: var(--secondary-color) !important;
  font-size: 24pt !important;
  text-align: center;
  margin: 4px 0 10px 0;
}

.returns-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.return-card {
  min-height: 158px;
  border-radius: var(--box-radius);
  padding: 16px;
  border: 1px solid var(--line-color);
  background: #101C28;
}

.return-card h3 {
  margin: 4px 0 8px 0;
  font-size: 18pt;
}

.return-card p {
  margin: 0;
  font-size: 13.5pt !important;
}

.return-card.keep {
  border-top: 5px solid var(--primary-color);
}

.return-card.shrink {
  border-top: 5px solid var(--secondary-color);
}

.return-card.move {
  border-top: 5px solid var(--green-color);
}

.card-kicker {
  color: var(--muted-color) !important;
  font-size: 11pt !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.coverage-lens {
  min-height: 392px;
  background: #E9F3F1;
  color: var(--card-text);
  border: 1px solid #A4C9C3;
  border-radius: var(--box-radius);
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.coverage-axis {
  position: relative;
  height: 280px;
  border-bottom: 4px solid #35535C;
}

.coverage-hill {
  position: absolute;
  bottom: 0;
  width: 310px;
  height: 190px;
  border-radius: 160px 160px 8px 8px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 34px;
  opacity: 0.88;
}

.coverage-hill p,
.overlap-zone p,
.marginal-callout p {
  color: var(--card-text) !important;
  margin: 0;
}

.coverage-hill p {
  font-size: 15pt !important;
  font-weight: 800;
}

.hub-hill {
  left: 66px;
  justify-content: flex-start;
  padding-left: 46px;
  background: rgba(57, 197, 187, 0.72);
  border: 3px solid #1B837C;
}

.neighbor-hill {
  right: 72px;
  justify-content: flex-end;
  padding-right: 36px;
  background: rgba(242, 166, 90, 0.68);
  border: 3px solid #B96E25;
}

.overlap-zone {
  position: absolute;
  left: 258px;
  bottom: 0;
  width: 142px;
  height: 154px;
  border-radius: 86px 86px 6px 6px;
  background: rgba(232, 93, 90, 0.32);
  border: 2px dashed #B33A3A;
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlap-zone p {
  font-size: 14pt !important;
  font-weight: 800;
}

.marginal-callout {
  margin-top: 18px;
  padding: 14px 16px;
  border-left: 5px solid var(--danger-color);
  background: #FFFFFF;
  border-radius: var(--box-radius);
}

.marginal-callout p {
  font-size: 15pt !important;
}

.equation-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.equation-card {
  flex: 1;
  border-radius: var(--box-radius);
  border: 1px solid var(--line-color);
  background: #172536;
  padding: 18px;
}

.equation-card.accent {
  border-color: var(--secondary-color);
  background: #1D2B38;
}

.equation-label {
  color: var(--muted-color) !important;
  font-size: 12pt !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 8px 0;
}

.big-equation {
  color: #F2D479 !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 23pt !important;
  line-height: 1.25 !important;
  margin: 0;
}

.guarantee-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.guarantee-card {
  min-height: 282px;
  background: var(--card-bg);
  border: 1px solid var(--line-color);
  border-radius: var(--box-radius);
  padding: 18px;
}

.guarantee-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--primary-color);
  color: #0A2024 !important;
  margin: 0 0 14px 0;
}

.guarantee-icon i {
  font-size: 17pt;
}

.guarantee-card h3 {
  margin: 0 0 10px 0;
  font-size: 18pt;
}

.guarantee-card p {
  font-size: 13.3pt !important;
  margin: 0 0 12px 0;
}

.mini-equation {
  color: #F2D479 !important;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15pt !important;
  line-height: 1.25 !important;
}

.guarantee-boundary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
}

.guarantee-boundary div {
  border-radius: var(--box-radius);
  padding: 16px 18px;
  background: #E8EEF4;
  border-left: 5px solid var(--green-color);
}

.guarantee-boundary div:last-child {
  border-left-color: var(--danger-color);
}

.guarantee-boundary h3,
.guarantee-boundary p {
  color: var(--card-text) !important;
}

.guarantee-boundary h3 {
  margin: 0 0 6px 0;
  font-size: 17pt;
}

.guarantee-boundary p {
  margin: 0;
  font-size: 14pt !important;
}

.wide-figure {
  background: #F7FAFC;
  border: 1px solid #BFD0DA;
  border-radius: var(--box-radius);
  padding: 12px;
}

.wide-figure img {
  width: 100%;
  height: 440px;
  object-fit: contain;
  display: block;
}

.step-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.algo-step {
  background: var(--card-bg);
  min-height: 250px;
  padding: 18px;
}

.step-num {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--primary-color);
  color: #082022 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  margin: 0 0 16px 0;
}

.algo-step p:not(.step-num) {
  font-size: 14pt !important;
}

.formula-box {
  margin-top: 24px;
  background: #0B1219;
  border: 1px solid var(--primary-color);
  border-radius: var(--box-radius);
  padding: 20px;
  text-align: center;
}

.formula-box p {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 28pt !important;
  color: #F2D479 !important;
  margin: 0;
}

.lesson-card {
  background: var(--card-bg);
  padding: 20px;
  min-height: 290px;
}

.lesson-card p {
  font-size: 14pt !important;
}

.tagline {
  color: var(--secondary-color) !important;
  font-size: 12pt !important;
  font-weight: 700;
  margin-top: 16px;
}

.storyline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.storyline div {
  background: #E8EEF4;
  border-left: 5px solid var(--primary-color);
  border-radius: var(--box-radius);
  padding: 16px;
  min-height: 120px;
}

.storyline p {
  color: var(--card-text) !important;
  font-size: 14pt !important;
  margin: 0;
}

.final-note {
  margin-top: 22px;
  background: #172536;
  border: 1px solid var(--secondary-color);
  border-radius: var(--box-radius);
  padding: 20px;
}

.final-note p {
  margin: 0;
  font-size: 18pt !important;
}

/* ===========================================
   TEXT SIZE UTILITIES

   Base text is 16pt - use these to scale UP when
   slides have less content and you want to fill space.
   =========================================== */

.text-lg { font-size: 18pt !important; }   /* Slightly larger */
.text-xl { font-size: 20pt !important; }   /* Medium emphasis */
.text-2xl { font-size: 24pt !important; }  /* Strong emphasis */
.text-3xl { font-size: 28pt !important; }  /* Very large */
.text-4xl { font-size: 32pt !important; }  /* Maximum body text */

/* Other text utilities */
.text-muted { color: var(--muted-color) !important; }
.text-center { text-align: center !important; }
.text-uppercase { text-transform: uppercase; letter-spacing: 0.1em; }
.font-light { font-weight: 300; }
.font-bold { font-weight: 600; }

/* ===========================================
   BLOCKQUOTES
   =========================================== */

.reveal blockquote {
  border-left: 4px solid var(--primary-color);
  padding-left: 20px;
  margin: 20px 0;
  font-style: italic;
  background: none;
  box-shadow: none;
  width: 100%;
  max-width: none;
}

.reveal blockquote cite {
  display: block;
  margin-top: 10px;
  font-style: normal;
  color: var(--muted-color);
}

/* ===========================================
   OPTIONAL: TITLE WITH UNDERLINE

   Add this to presentations where you want
   a line under the slide title.
   =========================================== */

/*
.reveal .slides section > h1,
.reveal .slides section > h2 {
  flex-shrink: 0;
  margin: 0;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--line-color);
}
*/

/* ===========================================
   OPTIONAL: DECORATIVE ELEMENTS
   =========================================== */

/* Top decorative line on all slides */
/*
.reveal .slides section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--primary-color);
}
*/

/* Bottom decorative line */
/*
.reveal .slides section::after {
  content: '';
  position: absolute;
  bottom: 40px;
  left: var(--slide-padding);
  right: var(--slide-padding);
  height: 2px;
  background: var(--line-color);
}
*/