/* Load a clean font (optional) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap');

:root {
  --accent: #5bc0be;          /* brand accent color */
  --text: rgb(21, 31, 59);    /* heading color */
  --muted: rgb(57, 67, 83);   /* body text (de-emphasized) */
  --bg: #f6f8fb;              /* subtle slide background */
  --panel: #ffffff;           /* panels/cards */
  --shadow: 0 10px 30px rgba(11,19,43,0.08);

  /* Pattern controls */
  --pattern-size: 28px;

  /* Subtle dotted pattern (default). Adjust fill-opacity below (0.03–0.07 recommended) */
  /* --pattern-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23151F3B' fill-opacity='0.09'/%3E%3C/svg%3E"); */

  /* Optional alternatives (uncomment one and swap in background-image): */
  --pattern-grid: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2232%22 height=%2232%22%3E%3Cpath d=%22M0 32V0M32 0H0%22 stroke=%22%23151F3B%22 stroke-opacity=%220.03%22 stroke-width=%221%22/%3E%3C/svg%3E');
  /* --pattern-diag: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2236%22 height=%2236%22%3E%3Cpath d=%22M-9 27 27-9M-9 45 45-9M9 45 45 9%22 stroke=%22%23151F3B%22 stroke-opacity=%220.025%22 stroke-width=%221%22/%3E%3C/svg%3E'); */

  --illustration-size: 220px;
  --illustration-opacity: 0.36; /* overall dim level for placement */
  --illustration-url: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22%23e8e8e8%22%3E%3Cpath%20d%3D%22M4.913%202.658c2.075-.27%204.19-.408%206.337-.408%202.147%200%204.262.139%206.337.408%201.922.25%203.291%201.861%203.405%203.727a4.403%204.403%200%200%200-1.032-.211%2050.89%2050.89%200%200%200-8.42%200c-2.358.196-4.04%202.19-4.04%204.434v4.286a4.47%204.47%200%200%200%202.433%203.984L7.28%2021.53A.75.75%200%200%201%206%2021v-4.03a48.527%2048.527%200%200%201-1.087-.128C2.905%2016.58%201.5%2014.833%201.5%2012.862V6.638c0-1.97%201.405-3.718%203.413-3.979Z%22%20%2F%3E%3Cpath%20d%3D%22M15.75%207.5c-1.376%200-2.739.057-4.086.169C10.124%207.797%209%209.103%209%2010.609v4.285c0%201.507%201.128%202.814%202.67%202.94%201.243.102%202.5.157%203.768.165l2.782%202.781a.75.75%200%200%200%201.28-.53v-2.39l.33-.026c1.542-.125%202.67-1.433%202.67-2.94v-4.286c0-1.505-1.125-2.811-2.664-2.94A49.392%2049.392%200%200%200%2015.75%207.5Z%22%20%2F%3E%3C%2Fsvg%3E");
}

/* Base */
.reveal {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
}

/* Background with subtle SVG pattern */
html, body { background: var(--bg); }
.reveal .backgrounds .slide-background {
  background-color: var(--bg);
  background-image: var(--pattern-grid); /* swap to var(--pattern-grid) or var(--pattern-diag) if preferred */
  background-size: var(--pattern-size) var(--pattern-size);
  background-repeat: repeat;
  background-position: top left;
}

/* Optional: toggle pattern off by adding class="no-pattern" to the .reveal element */
.reveal.no-pattern .backgrounds .slide-background { background-image: none; }

/* Typography */
.reveal h1, .reveal h2, .reveal h3 {
  letter-spacing: -0.02em;
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 0.7em;
  color: var(--text);
}

/* Accent underline under headings for visual hierarchy */
.reveal h1::after, .reveal h2::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  background: var(--accent);
  border-radius: 999px;
  margin-top: 12px;
}

/* Body text slightly de-emphasized */
.reveal p, .reveal li {
  color: var(--muted);
  font-size: 1.06em;
  line-height: 1.7;
}

.reveal ul {
    list-style-type: '\2714\0020';
}

/* Links + emphasis */
.reveal a { color: var(--accent); text-decoration: none; }
.reveal a:hover { text-decoration: underline; }
.reveal strong { color: var(--text); font-weight: 800; }

/* Layout */
.reveal section { text-align: left; }
.reveal .slides { max-width: 1600px; margin: 0 auto; }

/* Lists: nicer bullets and spacing */
.reveal ul, .reveal ol { margin: 0.5em 0 0; padding-left: 1.1em; }
.reveal ul li::marker,
.reveal ol li::marker { color: var(--accent); }

/* Optional: checklist style (use class="checklist" on UL) */
.reveal ul.checklist { list-style: none; padding-left: 0; }
.reveal ul.checklist li { position: relative; padding-left: 1.6em; }
.reveal ul.checklist li::before {
  content: "✓";
  position: absolute; left: 0; top: 0.1em;
  color: var(--accent); font-weight: 800;
}

/* Blockquotes with accent bar */
.reveal blockquote {
  border-left: 4px solid var(--accent);
  padding: 0.5em 1em;
  margin: 0.5em 0 0;
  color: var(--muted);
  background: rgba(91,192,190,0.08);
  border-radius: 8px;
}

/* Horizontal rule as soft separator */
.reveal hr {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(11,19,43,0.15), transparent);
  margin: 1.2em 0;
}

/* CTA button (use [Text](#){.cta}) */
a.cta {
  display: inline-block;
  margin-top: 1rem;
  padding: .8rem 1.1rem;
  background: var(--accent);
  color: #fff;
  border-radius: 12px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(91,192,190,0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.cta:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(91,192,190,0.45); }

/* Progress + controls in brand color */
.reveal .progress { height: 5px; background: rgba(11,19,43,0.08); }
.reveal .progress span { background: var(--accent); }
.reveal .controls { color: var(--accent); }

/* Author/meta style */
p.author { font-size: 0.85em; color: #6b7280; margin-top: 3em; }

/* Utility visuals you can opt into via Markdown classes */

/* Cards (wrap content in <div class="cards"> <div class="card">… */
.cards { display: grid; gap: 16px; }
.cards.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card {
  background: var(--panel);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(11,19,43,0.06);
}
.card h3 { margin: 0 0 .4em; }

/* KPI numbers (use <div class="kpi"><div class="value">…</div><div class="label">… */
.kpi { display: inline-grid; gap: 2px; margin-right: 24px; }
.kpi .value {
  font-size: 2.4em;
  font-weight: 800;
  line-height: 0.9;
  color: var(--text);
  letter-spacing: -0.02em;
}
.kpi .label { color: var(--muted); font-size: 0.9em; }

/* Badges (use <span class="badge">Beta</span>) */
.badge {
  display: inline-block;
  padding: .25rem .5rem;
  border-radius: 999px;
  background: rgba(11,19,43,0.06);
  color: var(--text);
  font-weight: 700;
  font-size: .8em;
}
.badge.accent { background: rgba(91,192,190,0.15); color: var(--text); }

/* Callouts (::: tip …) */
.callout {
  border: 1px solid rgba(11,19,43,0.08);
  background: #fff;
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
}
.callout .title { font-weight: 800; color: var(--text); margin-bottom: .25em; }
.callout p { margin: 0; }

/* Simple two-column grid (wrap with <div class="grid-2">… */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }

/* Images: subtle framing */
.reveal section img {
  border-radius: 12px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(11,19,43,0.06);
}

/* Code/inline code (if used) */
.reveal code { background: rgba(11,19,43,0.06); padding: 0.1em 0.35em; border-radius: 6px; }

.reveal .slides::after {
    content: "";
    position: absolute;
    right: -24px;
    top: -24px;
    width: var(--illustration-size);
    height: var(--illustration-size);
    background-image: var(--illustration-url);
    background-repeat: no-repeat;
    background-size: contain;
    opacity: var(--illustration-opacity);
    pointer-events: none;
    z-index: 0;
}

/* Ensure slide content is above the illustration */
.reveal .slides section > * { position: relative; z-index: 1; }

/* Print tweaks: remove pattern for cleaner/smaller PDFs. Delete to keep pattern in PDFs. */
@media print {
    .reveal .controls, .reveal .progress { display: none !important; }
    .reveal .backgrounds .slide-background { background-image: none !important; }
    .reveal .slides section::after { display: none !important; }
    .reveal .speaker-notes { display: none !important; }
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
}