/* ============================================================
   GNAT-o-sphere — Reveal.js Theme
   ============================================================ */

/* ── CSS variable definitions (used by reveal.css internals) ── */

.reveal {
  --r-background-color:           #0f0f11;
  --r-main-font:                  Inter, Arial, sans-serif;
  --r-main-font-size:             32px;
  --r-main-color:                 #c8cad2;
  --r-block-margin:               0.75rem;
  --r-heading-margin:             0 0 0.6rem 0;
  --r-heading-font:               Inter, Arial, sans-serif;
  --r-heading-color:              #ffffff;
  --r-heading-line-height:        1.15;
  --r-heading-letter-spacing:     -0.02em;
  --r-heading-text-transform:     none;
  --r-heading-text-shadow:        none;
  --r-heading-font-weight:        800;
  --r-heading1-size:              2.2em;
  --r-heading2-size:              1.5em;
  --r-heading3-size:              1.1em;
  --r-heading4-size:              0.9em;
  --r-code-font:                  'Courier New', monospace;
  --r-link-color:                 #d42c1e;
  --r-link-color-hover:           #b01e13;
  --r-selection-background-color: #d42c1e;
  --r-selection-color:            #fff;

  /* brand tokens */
  --brand:      #d42c1e;
  --brand-dark: #b01e13;
  --surface:    #1a1a1e;
  --line:       #2a2a34;
  --muted:      #8a8a9a;
  --dim:        #5a5a6a;

  /* product accents */
  --gnat:    #ffffff;
  --sense:   #8a3aa4;
  --sand:    #da7e20;
  --red:     #d91d14;
  --gui:     #2d8cb8;
}

/* ── Explicit base colors (ensure visibility without a Reveal base theme) ── */

body,
.reveal-viewport {
  background: #0f0f11;
  background-color: #0f0f11;
}

.reveal {
  font-family: Inter, Arial, sans-serif;
  font-size: 32px;
  color: #c8cad2;
  background-color: #0f0f11;
}

.reveal a {
  color: #d42c1e;
  text-decoration: none;
}

.reveal a:hover { color: #b01e13; }

.reveal ::selection {
  background: #d42c1e;
  color: #fff;
}

/* ── Base layout ── */

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

.reveal .slides section {
  box-sizing: border-box;
  height: 100%;
}

/* ── Typography ── */

.reveal h1,
.reveal h2 {
  color: #ffffff;
  font-family: Inter, Arial, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-shadow: none;
  text-transform: none;
  margin: 0 0 0.6rem 0;
  word-wrap: break-word;
}

.reveal h1 { font-size: 2.2em; }
.reveal h2 { font-size: 1.5em; }

.reveal h3 {
  color: #c8cad2;
  font-family: Inter, Arial, sans-serif;
  font-weight: 700;
  font-size: 1.1em;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: none;
  text-shadow: none;
  margin: 0 0 0.6rem 0;
}

.reveal h4 {
  color: #c8cad2;
  font-weight: 700;
  font-size: 0.9em;
  margin: 0 0 0.6rem 0;
}

.reveal p {
  margin: 0 0 0.5em;
  color: #c8cad2;
  line-height: 1.4;
}

.reveal strong {
  color: #fff;
  font-weight: 600;
}

.reveal em { color: #c8cad2; }

.reveal code {
  background: #1a1a1e;
  border: 1px solid #2a2a34;
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-size: 0.85em;
  color: #edeef2;
  font-family: 'Courier New', monospace;
}

/* ── Lists ── */

.reveal ul {
  list-style: none;
  padding: 0;
  margin: 0.5em 0 0;
  color: #c8cad2;
}

.reveal ul li {
  position: relative;
  padding-left: 1.2em;
  margin-bottom: 0.45em;
  line-height: 1.4;
  color: #c8cad2;
}

.reveal ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: #d42c1e;
  font-weight: 700;
}

.reveal ul.spaced li { margin-bottom: 0.65em; }

/* ── Kicker ── */

.reveal .kicker {
  display: block;
  font-size: 0.4em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #8a8a9a;
  margin-bottom: 0.4em;
}

.reveal .accent-rule {
  display: block;
  width: 2.5rem;
  height: 3px;
  background: #d42c1e;
  border-radius: 2px;
  margin: 0.6rem 0 0.9rem;
}

/* ── Title slide ── */

.reveal section.slide-title {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.reveal .title-logo {
  width: 110px;
  height: 110px;
  object-fit: contain;
  border-radius: 14px;
  margin-bottom: 1rem;
}

.reveal .title-sub {
  font-size: 0.6em;
  color: #8a8a9a;
  margin: 0.25em 0 0;
  font-weight: 400;
}

.reveal .title-tagline {
  font-size: 0.45em;
  color: #5a5a6a;
  margin: 0.15em 0 0;
  font-weight: 400;
}

/* ── Section divider slide ── */

.reveal section.slide-divider {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.reveal section.slide-divider h2 {
  font-size: 2em;
}

/* ── Two / three column layouts ── */

.reveal .cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
  margin-top: 0.75rem;
}

.reveal .cols-3 {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  margin-top: 0.75rem;
}

.reveal .cols-wide {
  grid-template-columns: 1.4fr 1fr;
  gap: 1.5rem;
  margin-top: 0.75rem;
}

/* ── Box / card ── */

.reveal .box {
  background: #1a1a1e;
  border: 1px solid #2a2a34;
  border-radius: 10px;
  padding: 0.85rem 1rem;
}

.reveal .box h3 {
  font-size: 0.7em;
  margin: 0 0 0.3em;
  color: #c8cad2;
}

.reveal .box p,
.reveal .box ul {
  font-size: 0.55em;
  color: #8a8a9a;
  margin: 0;
}

.reveal .box ul li { color: #8a8a9a; }

.reveal .box ul { margin-top: 0.3em; }

.reveal .box--gnat  { border-color: #ffffff; }
.reveal .box--gnat  h3 { color: #ffffff; }
.reveal .box--sense { border-color: #8a3aa4; }
.reveal .box--sense h3 { color: #8a3aa4; }
.reveal .box--sand  { border-color: #da7e20; }
.reveal .box--sand  h3 { color: #da7e20; }
.reveal .box--red   { border-color: #d91d14; }
.reveal .box--red   h3 { color: #d91d14; }
.reveal .box--gui   { border-color: #2d8cb8; }
.reveal .box--gui   h3 { color: #2d8cb8; }

/* ── Callout ── */

.reveal .callout {
  background: #1a1a1e;
  border-left: 3px solid #d42c1e;
  border-radius: 0 8px 8px 0;
  padding: 0.7rem 1rem;
  margin-top: 0.75rem;
  font-size: 0.6em;
  color: #edeef2;
}

/* ── Role tag ── */

.reveal .role-tag {
  display: inline-block;
  background: #d42c1e;
  color: #fff;
  font-size: 0.38em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25em 0.7em;
  border-radius: 4px;
  margin-bottom: 0.5em;
  vertical-align: middle;
}

/* ── Workflow flow teaser ── */

.reveal .flow-row {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.reveal .flow-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.reveal .flow-col--wide { flex: 1.25; }

.reveal .flow-node {
  background: #1a1a1e;
  border: 1px solid #2a2a34;
  border-radius: 7px;
  padding: 0.55rem 0.75rem;
  flex: 1;
}

.reveal .flow-node .fn-step {
  display: block;
  font-size: 0.35em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #8a8a9a;
  margin-bottom: 0.25em;
}

.reveal .flow-node strong {
  display: block;
  font-size: 0.5em;
  font-weight: 700;
  color: #c8cad2;
  margin-bottom: 0.2em;
}

.reveal .flow-node span {
  display: block;
  font-size: 0.38em;
  color: #8a8a9a;
  line-height: 1.35;
}

.reveal .flow-node--gnat  { border-color: #ffffff; }
.reveal .flow-node--gnat  strong { color: #ffffff; }
.reveal .flow-node--sense { border-color: #8a3aa4; }
.reveal .flow-node--sense strong { color: #8a3aa4; }
.reveal .flow-node--sand  { border-color: #da7e20; }
.reveal .flow-node--sand  strong { color: #da7e20; }
.reveal .flow-node--red   { border-color: #d91d14; }
.reveal .flow-node--red   strong { color: #d91d14; }
.reveal .flow-node--gui   { border-color: #2d8cb8; }
.reveal .flow-node--gui   strong { color: #2d8cb8; }

.reveal .flow-arrow {
  display: flex;
  align-items: center;
  color: #5a5a6a;
  font-size: 0.85em;
  flex-shrink: 0;
}

/* ── Step list ── */

.reveal ol.step-list {
  list-style: none;
  padding: 0;
  counter-reset: steps;
  margin-top: 0.5em;
}

.reveal ol.step-list li {
  counter-increment: steps;
  padding-left: 1.6em;
  margin-bottom: 0.55em;
  position: relative;
  line-height: 1.4;
  color: #c8cad2;
}

.reveal ol.step-list li::before {
  content: counter(steps);
  position: absolute;
  left: 0;
  color: #d42c1e;
  font-weight: 800;
  font-size: 0.9em;
}

/* ── CTA grid ── */

.reveal .cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-top: 0.75rem;
}

.reveal .cta-item {
  background: #1a1a1e;
  border: 1px solid #2a2a34;
  border-radius: 9px;
  padding: 0.75rem 1rem;
}

.reveal .cta-item .label {
  display: block;
  font-size: 0.36em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #8a8a9a;
  margin-bottom: 0.4em;
}

.reveal .cta-item a {
  font-size: 0.5em;
  color: #d42c1e;
  text-decoration: none;
  word-break: break-all;
}

/* ── Reveal.js chrome ── */

.reveal .progress { height: 3px; color: #d42c1e; }
.reveal .progress span { background: #d42c1e; }
.reveal .controls { color: #d42c1e; }
.reveal .slide-number { background: transparent; color: #5a5a6a; font-size: 0.75rem; }