/*
 * Kapernikov Kiosk Theme for reveal.js
 * Ports Kapernikov branding from the Marp theme (kapernikov-theme.css)
 *
 * Recommended slide dimensions: 1280x720 (16:9), set via Reveal config:
 *   width: 1280, height: 720
 *
 * This is a standalone theme - do NOT import reveal.js default themes.
 */

/* ============================================
   Kapernikov brand fonts
   ============================================ */

@font-face {
  font-family: 'Agenda';
  src: url('./assets/fonts/Agenda-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Agenda';
  src: url('./assets/fonts/Agenda-LightItalic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'Agenda';
  src: url('./assets/fonts/Agenda-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Agenda';
  src: url('./assets/fonts/Agenda-MediumItalic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: 'Agenda';
  src: url('./assets/fonts/Agenda-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Agenda';
  src: url('./assets/fonts/Agenda-BoldItalic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: 'Avenir LT Std';
  src: url('./assets/fonts/AvenirLTStd-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Avenir LT Std';
  src: url('./assets/fonts/AvenirLTStd-LightOblique.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'Avenir LT Std';
  src: url('./assets/fonts/AvenirLTStd-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Avenir LT Std';
  src: url('./assets/fonts/AvenirLTStd-MediumOblique.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: 'Avenir LT Std';
  src: url('./assets/fonts/AvenirLTStd-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: 'Avenir LT Std';
  src: url('./assets/fonts/AvenirLTStd-BlackOblique.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
}

/* ============================================
   Kapernikov brand colors - from huisstijlgids v4
   ============================================ */

:root {
  --kpv-primary: #ba2415;
  --kpv-red-light: #D4734F;
  --kpv-red-lighter: #dd977a;
  --kpv-black: #000000;
  --kpv-dark-grey: #484847;
  --kpv-medium-grey: #818281;
  --kpv-light-grey: #bfc0c0;
  --kpv-very-light-grey: #ececec;
  --kpv-beige: #e2d7cd;
  /* Secondary - accents */
  --kpv-burgundy: #5a322b;
  --kpv-crimson: #901C1D;
  --kpv-tangerine: #DD8028;
  --kpv-amber: #FFB31B;
  --kpv-emerald: #1E9F49;
  --kpv-jade: #36b191;
  --kpv-petrol: #1D6E88;
  --kpv-cyan: #1F92A6;
}

/* ============================================
   Content wrapper - centers original 1280px layout
   within wider ultrawide slides
   ============================================ */

:root {
  --content-offset: 0px;
}

.content-wrapper {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1280px;
  height: 100%;
  box-sizing: border-box;
}

/* Default slides: flow content needs padding below the header chrome and is
   vertically centered (matches Marp's default section flex behavior). */
section:not(.lead):not(.section):not(.fullscreen-light):not(.fullscreen-dark) > .content-wrapper {
  padding: 130px 50px 30px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Fullscreen slides have no wrapper (they manage their own layout); but if
   one is present it should span the full slide so videos/images can fill it. */
.fullscreen-dark > .content-wrapper,
.fullscreen-light > .content-wrapper {
  width: 100%;
  left: 0;
  transform: none;
}

/* ============================================
   Hide reveal.js chrome
   ============================================ */

.reveal .controls {
  color: var(--kpv-light-grey);
}

.reveal .progress {
  display: none;
}

/* ============================================
   Base slide styles
   ============================================ */

.reveal .slides section {
  font-family: 'Avenir LT Std', 'Avenir', 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 28px;
  line-height: 1.3;
  color: var(--kpv-dark-grey);
  text-align: left;
  box-sizing: border-box;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* Tighter paragraph rhythm — match Marp's compact spacing */
.reveal .slides section p {
  margin: 0.5em 0;
  line-height: 1.3;
}

/* Disable reveal.js vertical centering globally */
.reveal .slides {
  text-align: left;
}

.reveal .slides section.present {
  top: 0 !important;
}

/* ============================================
   Default slides (no class)
   White background, red header bar, logo top-left, h1 in bar
   ============================================ */

.reveal .slides section:not(.lead):not(.section):not(.fullscreen-light):not(.fullscreen-dark) {
  padding: 130px 50px 30px 50px;
  background: white;
  box-shadow: inset 0 110px 0 0 #ba2415;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;
}

.reveal .slides section:not(.lead):not(.section):not(.fullscreen-light):not(.fullscreen-dark)::before {
  content: '';
  position: absolute;
  top: 55px;
  left: calc(var(--content-offset) + 40px);
  width: 58px;
  height: 58px;
  background-image: url('./assets/kapernikov-logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateY(-50%);
}

.reveal .slides section:not(.lead):not(.section):not(.fullscreen-light):not(.fullscreen-dark) h1 {
  color: white;
  font-family: 'Agenda', 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: normal;
  font-size: 1.5em;
  position: absolute;
  top: 55px;
  left: calc(var(--content-offset) + 130px);
  margin: 0;
  padding: 0;
  height: 58px;
  display: flex;
  align-items: center;
  transform: translateY(-50%);
}

/* ============================================
   Headings (shared across slide types)
   ============================================ */

.reveal .slides section h2 {
  color: var(--kpv-primary);
  font-family: 'Agenda', 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: normal;
  font-size: 1.3em;
}

.reveal .slides section h3 {
  color: var(--kpv-dark-grey);
  font-family: 'Agenda', 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: normal;
}

/* ============================================
   .lead - Title / cover slides
   Solid red background, white text, centered, logo top-right
   ============================================ */

.reveal .slides section.lead {
  background: var(--kpv-primary);
  color: white;
  padding: 80px;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  box-shadow: none;
}

.reveal .slides section.lead::before {
  display: none;
}

.reveal .slides section.lead img {
  position: absolute;
  top: 50px;
  right: 60px;
}

.reveal .slides section.lead h1 {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  font-family: 'Agenda', 'Segoe UI', Roboto, Arial, sans-serif;
  font-weight: normal;
  font-size: 3em;
  color: white;
  margin-bottom: 20px;
  height: auto;
  display: block;
}

.reveal .slides section.lead h2,
.reveal .slides section.lead p,
.reveal .slides section.lead strong {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.3em;
}

/* ============================================
   .section - Section transition slides
   White background, centered logo-header, h1 in grey box
   ============================================ */

.reveal .slides section.section {
  background: white;
  box-shadow: none;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 60px 100px;
  text-align: center;
}

.reveal .slides section.section::before {
  content: '';
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: 400px;
  height: 144px;
  background-image: url('./assets/kapernikov-logo-header.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 30px;
  flex-shrink: 0;
}

.reveal .slides section.section h1 {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  color: var(--kpv-dark-grey);
  font-family: 'Agenda', 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 1.8em;
  font-weight: normal;
  margin: 0;
  padding: 20px 80px;
  background-color: var(--kpv-very-light-grey);
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
}

.reveal .slides section.section h2 {
  color: var(--kpv-dark-grey);
  font-size: 1.3em;
  font-weight: normal;
  margin: 20px 0 0 0;
}

.reveal .slides section.section p {
  color: var(--kpv-medium-grey);
  font-size: 1.1em;
  margin-top: 20px;
}

/* ============================================
   .fullscreen-dark - Full-bleed dark image slides
   Transparent background, white text, no branding
   ============================================ */

.reveal .slides section.fullscreen-dark {
  padding: 60px;
  background: transparent;
  box-shadow: none;
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  justify-content: center !important;
}

/* When fullscreen slides contain a video, remove all padding */
.reveal .slides section.fullscreen-dark:has(video) {
  padding: 0 !important;
  margin: 0 !important;
}

.reveal .slides section.fullscreen-dark::before {
  display: none;
}

.reveal .slides section.fullscreen-dark h1 {
  color: white;
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  font-size: 2.5em;
  margin-bottom: 20px;
  height: auto;
  display: block;
}

.reveal .slides section.fullscreen-dark h2 {
  color: rgba(255, 255, 255, 0.9);
}

.reveal .slides section.fullscreen-dark p,
.reveal .slides section.fullscreen-dark li {
  color: rgba(255, 255, 255, 0.9);
}

.reveal .slides section.fullscreen-dark strong {
  color: white;
}

/* ============================================
   .fullscreen-light - Full-bleed light image slides
   Transparent background, dark text, h1 in red, no branding
   ============================================ */

.reveal .slides section.fullscreen-light {
  padding: 60px;
  background: transparent;
  box-shadow: none;
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  justify-content: center !important;
}

.reveal .slides section.fullscreen-light:has(video) {
  padding: 0 !important;
  margin: 0 !important;
}

.reveal .slides section.fullscreen-light::before {
  display: none;
}

.reveal .slides section.fullscreen-light h1 {
  color: var(--kpv-primary);
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  font-size: 2.5em;
  margin-bottom: 20px;
  height: auto;
  display: block;
}

.reveal .slides section.fullscreen-light h2 {
  color: var(--kpv-primary);
}

.reveal .slides section.fullscreen-light p,
.reveal .slides section.fullscreen-light li {
  color: var(--kpv-dark-grey);
}

/* ============================================
   Animated agent-illustrator (.ail-anim-wrap)
   ============================================ */

/* Trigger spans drive reveal fragments; they must not occupy layout. */
.reveal .ail-trigger {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: 0 !important;
  visibility: hidden;
}

.reveal .ail-anim-wrap {
  width: 100%;
}

.reveal .ail-anim-wrap svg.ail-anim {
  display: block;
  margin: 0 auto;
  width: var(--ail-width, 900px);
  height: var(--ail-height, 480px);
  max-width: 100%;
  max-height: 100%;
}

/* Smooth opacity transitions between keyframes. */
.reveal .ail-anim-wrap svg.ail-anim .kf-hidden,
.reveal .ail-anim-wrap svg.ail-anim [class*="kf-"],
.reveal .ail-anim-wrap svg.ail-anim .ai-connection {
  transition: opacity 0.35s ease-in-out;
}

/* ============================================
   Two-column layout (.twocol)
   ============================================ */

.reveal .slides section.twocol .columns {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.reveal .slides section.twocol .col-left {
  flex: 3;
  min-width: 0;
}

.reveal .slides section.twocol .col-right {
  flex: 2;
  min-width: 0;
  color: var(--kpv-dark-grey);
}

.reveal .slides section.twocol .col-right p {
  margin: 4px 0;
}

.reveal .slides section.twocol table {
  font-size: 0.6em;
}

/* Images inside columns honor the column width */
.reveal .slides section.twocol .columns img {
  max-width: 100%;
}

/* ============================================
   Blockquotes - highlight boxes
   ============================================ */

.reveal .slides section blockquote {
  background-color: var(--kpv-very-light-grey);
  border-left: 4px solid var(--kpv-primary);
  padding: 15px 20px;
  margin: 15px 0;
  font-style: normal;
  box-shadow: none;
  width: auto;
}

.reveal .slides section blockquote strong {
  color: var(--kpv-primary);
}

/* ============================================
   Tables
   ============================================ */

.reveal .slides section table {
  font-size: 0.8em;
  border-collapse: collapse;
  margin: 0 auto 1.5em auto;
}

.reveal .slides section table th {
  background-color: var(--kpv-dark-grey);
  color: white;
  padding: 10px 12px;
  text-align: left;
  border: none;
}

.reveal .slides section table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--kpv-light-grey);
  border-left: none;
  border-right: none;
  border-top: none;
}

.reveal .slides section table tr:nth-child(even) {
  background-color: var(--kpv-very-light-grey);
}

/* ============================================
   Code blocks
   ============================================ */

.reveal .slides section pre {
  background-color: var(--kpv-very-light-grey);
  border-left: 4px solid var(--kpv-primary);
  padding: 15px;
  font-size: 0.75em;
  box-shadow: none;
  width: auto;
}

.reveal .slides section code {
  font-size: 0.9em;
}

/* ============================================
   Lists
   ============================================ */

.reveal .slides section ul,
.reveal .slides section ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

.reveal .slides section li {
  margin-bottom: 0.2em;
  line-height: 1.3;
}

.reveal .slides section ul ul,
.reveal .slides section ol ol,
.reveal .slides section ul ol,
.reveal .slides section ol ul {
  margin-top: 0.3em;
  font-size: 0.95em;
}

/* ============================================
   Images - fit within slide content area
   ============================================ */

.reveal .slides section img {
  display: block;
  max-width: 100%;
  max-height: 480px;
  object-fit: contain;
  margin: 10px auto;
  flex: 0 1 auto;
  min-height: 0;
}

/* When multiple images are on one line (inline), shrink them */
.reveal .slides section p > img {
  display: inline-block;
  vertical-align: middle;
  margin: 5px 10px;
}

/* If a paragraph has multiple images, constrain each */
.reveal .slides section p > img + img {
  max-height: 350px;
}

/* Lead slide logo - small, positioned */
.reveal .slides section.lead img {
  max-width: 180px;
  max-height: 80px;
}

/* ============================================
   Video
   ============================================ */

/* Video: fit within the content area (720px canvas minus padding) */
.reveal .slides section video {
  display: block;
  max-width: 90%;
  max-height: 520px;
  object-fit: contain;
  margin: 0 auto;
  flex: 0 1 auto;
  min-height: 0;
}

/* Fullscreen slides with video — fill the entire slide */
.reveal .slides section.fullscreen-dark video,
.reveal .slides section.fullscreen-light video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

/* ============================================
   Links
   ============================================ */

.reveal .slides section a {
  color: var(--kpv-primary);
  text-decoration: underline;
}

.reveal .slides section a:hover {
  color: var(--kpv-crimson);
}