/* ==============================================
   blueboy theme - Cote's reveal.js theme
   Lives at themes/blueboy/blueboy.css.
   Font paths are relative to this CSS file.
   ============================================== */

@font-face {
  font-family: 'Cartridge';
  src: url('fonts/Cartridge-Regular.otf') format('opentype');
}
@font-face {
  font-family: 'Cartridge Bold';
  src: url('fonts/Cartridge-Bold.otf') format('opentype');
}
@font-face {
  font-family: 'Cartridge Rough';
  src: url('fonts/Cartridge-Rough.otf') format('opentype');
}
@font-face {
  font-family: 'Cartridge BoldRough';
  src: url('fonts/Cartridge-BoldRough.otf') format('opentype');
}

/* Times New Human - serif used for non-slide text (speaker notes when
   visible inline, slide-number indicator, reveal UI chrome). Loaded from
   talks.cote.io to avoid bundling four otf files in every deck. Falls back
   to system Times if the load fails (e.g. offline). */
@font-face {
  font-family: 'Times New Human';
  src: url('https://talks.cote.io/fonts/TimesNewHuman-Reg.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Times New Human';
  src: url('https://talks.cote.io/fonts/TimesNewHuman-Bol.otf') format('opentype');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Times New Human';
  src: url('https://talks.cote.io/fonts/TimesNewHuman-RegIta.otf') format('opentype');
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: 'Times New Human';
  src: url('https://talks.cote.io/fonts/TimesNewHuman-BolIta.otf') format('opentype');
  font-weight: bold;
  font-style: italic;
}

/* Non-slide text: notes content + reveal UI chrome. */
.reveal aside.notes,
.reveal .slide-number,
.reveal .controls,
.reveal .progress {
  font-family: 'Times New Human', 'Times New Roman', Times, serif;
}

:root {
  --cote-blue: #0091DA;
  --tanzu-green: #00C7B7;
  --black: #121212;
}

/* Default all slides to blue-boy blue */
.reveal .slide-background {
  background-color: var(--cote-blue);
}

/* Section title - big Cartridge Rough for divider slides */
.section-title {
  font-family: 'Cartridge Rough', 'Cartridge', sans-serif !important;
  font-size: 1.6em;
}

/* Default paragraph styling on slides - sized smaller than h2 (1.1em) so a
   naked <p> next to a title reads as supporting text. Inline styles and
   class-based overrides (.slide-footer, .thanks-big-line, .pull-quote, etc)
   still win via specificity / source order. */
.reveal .slides section p {
  font-size: 0.6em;
  margin: 0.2em 0 0.4em 0;
}

/* Title slide: vertically center content inside the slide stage.
   Apply with <section class="title-slide" ...>. The deck-wide reveal config
   has center: false (content tops-aligns by default), so the cover overrides
   that to read like a poster. */
.reveal .slides section.title-slide {
  height: 100%;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

/* Section divider slide: one big Cartridge Rough title, vertically centered.
   Apply with <section class="section-divider" data-background-color="#0091DA">
     <h2>Big rough title here.</h2>
   </section>
   The h2 inside gets the rough-title font + size automatically. */
.reveal .slides section.section-divider {
  height: 100%;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.reveal .slides section.section-divider h2 {
  font-family: 'Cartridge Rough', 'Cartridge', sans-serif !important;
  font-size: 2em;
  text-transform: none;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 95%;
}

/* Photo slide: image fitted to slide (contain) with title overlaid at the
   bottom-right corner. All positioning lives on the .photo-slide-inner
   wrapper, NOT the <section> itself - styling the section directly with
   flex/position interferes with reveal's vertical-stack sibling rendering.
   Usage:
     <section data-background-color="#0091DA">
       <div class="photo-slide">
         <img src="slides/images/foo.jpg" alt="Description">
         <h2>Title in the bottom-right.</h2>
       </div>
     </section>  */
.photo-slide {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 600px;
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: 1fr;
  gap: 0.2em;
}
.photo-slide > img {
  grid-row: 1;
  grid-column: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  object-position: top right;
  display: block;
}
.photo-slide > h2 {
  grid-row: 2;
  grid-column: 1;
  margin: 0;
  padding: 0;
  text-align: left;
  font-family: 'Cartridge Rough', 'Cartridge', sans-serif;
  font-size: 1.6em;
  color: #fff;
  line-height: 1.1;
  text-transform: none;
}

/* Two-up slide: two images side-by-side, both vertically centered. Same
   shape as .big-image - class goes on the <section>, optional h2 on top,
   .slide-footer for the source line. Use when pairing/contrasting two
   visuals.
   Usage (no title):
     <section class="two-up" data-background-color="#0091DA">
       <img src="slides/images/foo.png" alt="...">
       <img src="slides/images/bar.png" alt="...">
       <p class="slide-footer">Sources: ...</p>
     </section>
   Usage (with title):
     <section class="two-up" data-background-color="#0091DA">
       <h2>Title.</h2>
       <img src="slides/images/foo.png" alt="...">
       <img src="slides/images/bar.png" alt="...">
       <p class="slide-footer">Sources: ...</p>
     </section>  */
.reveal .slides section.two-up {
  height: 100%;
  display: grid !important;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 0.5em;
  padding-bottom: 0.7em;
  align-items: center;
}
.reveal .slides section.two-up > h2 {
  grid-row: 1;
  grid-column: 1 / -1;
  margin: 0;
  align-self: start;
}
.reveal .slides section.two-up > img {
  grid-row: 2;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  justify-self: center;
}

/* Big-image slide: centered image with an optional h2 on top and a source
   line at the bottom (.slide-footer). The image fits inside the slide
   (aspect preserved - no cropping); the h2 and source line sit above/below.
   Use when the picture IS the slide.
   Usage (no title):
     <section class="big-image" data-background-color="#0091DA">
       <img src="slides/images/foo.jpg" alt="...">
       <p class="slide-footer">Source: ...</p>
     </section>
   Usage (with title):
     <section class="big-image" data-background-color="#0091DA">
       <h2>Title.</h2>
       <img src="slides/images/foo.jpg" alt="...">
       <p class="slide-footer">Source: ...</p>
     </section>  */
.reveal .slides section.big-image {
  height: 100%;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-bottom: 0.7em;
}
.reveal .slides section.big-image > img {
  flex: 1 1 auto;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Two-column with-image slides: 2/3 text column on the left (vertically
   centered) + 1/3 image column on the right (image fills available vertical
   space, aspect preserved). Two variants share the same grid:
     - .statement-with-image    -> h2 uses default Cartridge Bold
     - .section-divider-with-image -> h2 uses Cartridge Rough 1.6em (like .section-divider)
   Both built as wrapper divs INSIDE the section, NOT classes on the section
   itself - putting display:grid/flex directly on a section interferes with
   reveal's vertical-stack sibling rendering.
   Usage:
     <section data-background-color="#0091DA">
       <div class="statement-with-image">
         <div class="si-text"><h2>Point.</h2></div>
         <img src="slides/images/foo.jpg" alt="...">
       </div>
       <aside class="notes">...</aside>
     </section>  */
.statement-with-image,
.section-divider-with-image {
  width: 100%;
  height: 100%;
  min-height: 600px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr;
  gap: 1em;
  align-items: stretch;
  padding-bottom: 0.7em;
}
.statement-with-image .si-text,
.section-divider-with-image .si-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  min-width: 0;
}
.statement-with-image > img,
.section-divider-with-image > img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: 100%;
  object-fit: contain;
  object-position: center right;
  justify-self: end;
  display: block;
}
/* Section-divider title styling on the text column h2.
   !important on font-size is needed because the reveal default
   `.reveal .slides section h2 { font-size: 1.1em }` has higher
   selector specificity (3 classes) than this rule (2 classes).
   Without it, the section title would shrink instead of wrap. */
.section-divider-with-image .si-text h2 {
  font-family: 'Cartridge Rough', 'Cartridge', sans-serif !important;
  font-size: 1.6em !important;
  text-transform: none;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Statement slide: vertically centered h2 with optional supporting content
   (p tags, lists, images) flowing directly underneath. The h2 keeps its
   default theme styling (Cartridge Bold) - this is the everyday content slide
   when you want the title to read like a poster.
   Usage:
     <section class="statement" data-background-color="#0091DA">
       <h2>The single point.</h2>
       <p>Optional supporting line.</p>
       <ul><li>Optional bullets.</li></ul>
     </section>  */
.reveal .slides section.statement {
  height: 100%;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.reveal .slides section.statement h2 {
  font-size: 2em;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 95%;
}

/* Font + alignment overrides on stock white theme */
.reveal .slides section {
  font-family: 'Cartridge', sans-serif;
  text-align: left;
  font-feature-settings: "calt" 0, "liga" 0, "clig" 0;
}
.reveal .slides section h1,
.reveal .slides section h2,
.reveal .slides section h3 {
  font-family: 'Cartridge Bold', 'Cartridge', sans-serif;
  text-align: left;
  text-transform: none;
  color: inherit;
}
.reveal .slides section h2 {
  font-size: 1.1em;
}
.rough-title {
  font-family: 'Cartridge Rough', 'Cartridge', sans-serif !important;
}

/* Light-background slides (data-background-color="#fff") - flip text + links
   to var(--black) and use cote-blue for links so everything stays legible.
   Selector targets the data attribute directly so it works regardless of
   whether reveal applies .has-light-background to body (vertical stacks
   sometimes don't propagate the body class reliably). */
.reveal .slides section[data-background-color="#fff"] h1,
.reveal .slides section[data-background-color="#fff"] h2,
.reveal .slides section[data-background-color="#fff"] h3,
.reveal .slides section[data-background-color="#fff"] p,
.reveal .slides section[data-background-color="#fff"] li {
  color: var(--black);
}
.reveal .slides section[data-background-color="#fff"] a {
  color: var(--cote-blue);
}
.reveal .slides section[data-background-color="#fff"] .slide-footer {
  color: var(--black);
}

/* Reveal adds .has-dark-background to <body> when current slide has dark bg */
.has-dark-background .reveal .slides section h1,
.has-dark-background .reveal .slides section h2,
.has-dark-background .reveal .slides section h3,
.has-dark-background .reveal .slides section p,
.has-dark-background .reveal .slides section li {
  color: #fff;
}

/* Global list style — hyphen instead of bullet, with hanging indent */
.reveal ul {
  list-style: none;
}
.reveal ul li {
  padding-left: 0.7em;
  text-indent: -0.7em;
}
.reveal ul li::before {
  content: '- ';
}

/* Layout utilities */
.two-col { display: flex; gap: 2em; align-items: flex-start; }
.two-col .col { flex: 1; }
.two-col h3 { font-size: 0.75em; margin-bottom: 0.5em; }
.three-col { display: flex; gap: 1.5em; }
.three-col .col { flex: 1; }
.three-col h3 { font-size: 0.7em; margin-bottom: 0.4em; }
.three-col ul { font-size: 0.65em; padding-left: 1.2em; }
.three-col li { margin-bottom: 0.2em; line-height: 1.3; }


/* Quote slide — full-bleed decorative block quote layout */
.quote-layout {
  position: relative;
  padding-left: 2.2em;
}
.quote-layout::before {
  content: '\201C';
  position: absolute;
  left: 0;
  top: -0.25em;
  font-size: 3em;
  font-family: 'Cartridge Bold', 'Cartridge', sans-serif;
  color: #fff;
  line-height: 1;
}
.pull-quote {
  /* Same sizing as .section-divider h2: 2em Cartridge Rough with wrap. */
  font-family: 'Cartridge Rough', 'Cartridge', sans-serif !important;
  font-size: 2em;
  line-height: 1.15;
  color: #fff;
  margin: 0;
  padding: 0;
  max-width: 95%;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.pull-quote p:first-child { margin-top: 0; }
.pull-quote p { margin-bottom: 0.6em; }
.attribution {
  font-size: 0.64em;
  color: #fff;
  margin-top: 0.8em;
  text-align: right;
}

/* Slide footer - small citation/source text, pinned to the bottom of the
   slide stage. Absolute-positioned so it anchors to the slide regardless of
   how the rest of the content is laid out (flex/grid/normal flow). The slide
   <section> is reveal's positioning context, so the footer lands at the
   bottom edge of the slide. Selector is boosted to .reveal .slides section
   .slide-footer so it beats the default p style (which sets font-size 0.6em
   on every <p> on a slide). */
.reveal .slides section .slide-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 0.28em;
  color: #fff;
  margin: 0;
  text-align: left;
}

/* Working/todo vertical slides */
.todo-slide h3 { font-size: 0.6em; color: #333; font-family: 'Cartridge Bold', sans-serif; }
.todo-slide ul { font-size: 0.6em; }
.todo-slide a { color: var(--cote-blue); }

/* Links — always white, always underlined */
.reveal a {
  color: #fff;
  text-decoration: underline;
}
.reveal a:hover {
  color: #fff;
  text-decoration: underline;
}

/* Card columns — three-column layout with gradient cards and white pills */
.card-cols {
  display: flex;
  gap: 0.6em;
  align-items: stretch;
}
.card {
  flex: 1;
  border-radius: 0.4em;
  padding: 0.5em;
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}
.card .card-header {
  font-family: 'Cartridge Bold', 'Cartridge', sans-serif;
  font-size: 0.55em;
  color: #fff;
  margin-bottom: 0.2em;
  padding-bottom: 0.15em;
}
.card .card-item {
  background: #fff;
  border-radius: 0.25em;
  padding: 0.2em 0.4em;
  font-size: 0.4em;
  color: #333;
  line-height: 1.3;
}
/* Override global list styles inside cards */
.card-cols ul { list-style: none; margin: 0; padding: 0; }
.card-cols li { padding-left: 0; text-indent: 0; }
.card-cols li::before { content: none; }

/* Four-up image grid — 2x2, centered, fits slide */
.four-up {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin: auto;
}
.four-up img {
  width: 48%;
  max-height: 320px;
  object-fit: contain;
}

/* AI Timeline — alternating top/bottom zigzag */
.ai-timeline {
  position: relative;
  width: 90%;
  margin: 0.8em auto 0;
  height: 280px;
}
.tl-line {
  position: absolute;
  top: 50%;
  left: 5%;
  right: 5%;
  height: 3px;
  background: rgba(255,255,255,0.4);
  transform: translateY(-50%);
}
.tl-dot {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.tl-item {
  position: absolute;
  width: 18%;
  text-align: center;
}
.tl-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1em;
}
.tl-icon {
  font-size: 1.4em;
  line-height: 1;
}
.tl-title {
  font-family: 'Cartridge Bold', 'Cartridge', sans-serif;
  font-size: 0.55em;
  color: #fff;
  line-height: 1.2;
}
.tl-date {
  font-size: 0.4em;
  color: #fff;
}
.tl-top {
  bottom: 55%;
}
.tl-bottom {
  top: 55%;
}
/* Connector lines from dots to labels */
.tl-top::after,
.tl-bottom::before {
  content: '';
  position: absolute;
  left: 50%;
  width: 2px;
  height: 20px;
  background: rgba(255,255,255,0.4);
}
.tl-top::after {
  bottom: -20px;
}
.tl-bottom::before {
  top: -20px;
}

/* Thanks slide — text upper-left, QR lower-right */
.thanks-layout {
  position: relative;
  width: 100%;
  min-height: 580px;
}
.thanks-left {
  position: absolute;
  top: 0;
  left: 0;
}
.thanks-qr-area {
  position: absolute;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.thanks-qr {
  width: 340px;
  height: 340px;
}
.thanks-qr-label {
  font-family: 'Cartridge Rough', 'Cartridge', sans-serif;
  font-size: 0.55em;
  color: #fff;
  margin: 0 0 0.15em 0;
}
.thanks-qr-label a {
  color: #fff;
  text-decoration: none;
}

/* Service/feature grid — 5x2 icon boxes (Spring AI style) */
.sai-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.4em;
  margin-top: 0.4em;
}
.sai-box {
  border: 2px solid #6BA539;
  border-radius: 0.3em;
  padding: 0.3em 0.25em;
  text-align: center;
  background: #fff;
}
.sai-icon {
  font-size: 1.4em;
  color: #6BA539;
  margin-bottom: 0.15em;
}
.sai-title {
  font-family: 'Cartridge Bold', 'Cartridge', sans-serif;
  font-size: 0.42em;
  color: #333;
  margin-bottom: 0.15em;
  line-height: 1.2;
}
.sai-desc {
  font-size: 0.32em;
  color: #666;
  line-height: 1.3;
}

/* Text selection — highlighter yellow so it's visible on blue slides */
::selection { background-color: #FFE000; color: #000; }
::-webkit-selection { background-color: #FFE000; color: #000; }
.reveal ::selection { background-color: #FFE000; color: #000; }
.reveal ::-webkit-selection { background-color: #FFE000; color: #000; }