/*
 * dotSource Reveal.js Theme
 * Generated from dotSource_presentation_en.pptx
 *
 * Usage: <link rel="stylesheet" href="dotsource-reveal.css">
 *        Add to your reveal.js initialization, or reference as a custom theme.
 *
 * Two main slide types are used in the source deck:
 *   .slide-section   — dark blue with geometric polygon background (title/section dividers)
 *   .slide-content   — white with blue top header bar (regular content)
 *   (default)        — falls back to slide-content styling
 */


/* =============================================================================
   1. DESIGN TOKENS
   ============================================================================= */

:root {
  /* --- Primary palette --- */
  --ds-blue: #0085CD;
  /* bright blue — header bars, highlights, links */
  --ds-blue-dark: #004272;
  /* dark blue — secondary elements, hover states */
  --ds-blue-navy: #002D52;
  /* deep navy — darkest bg layer on section slides */
  --ds-blue-mid: #164479;
  /* mid navy — used in some layout overlays */

  /* --- Accent palette (geometric pattern colors) --- */
  --ds-green: #97BF09;
  /* yellow-green — polygon accent, CTAs */
  --ds-green-light: #9EBD2F;
  /* slightly lighter green variant */
  --ds-amber: #FBAE40;
  /* warm amber/orange — polygon accent */

  /* --- Neutral palette --- */
  --ds-white: #FFFFFF;
  --ds-gray: #636462;
  /* body text on light backgrounds */
  --ds-gray-mid: #8A8B8A;
  /* secondary/muted text */
  --ds-gray-light: #B4B5B4;
  /* disabled, captions */
  --ds-charcoal: #595959;
  /* slightly darker body text variant */
  --ds-black: #000000;

  /* --- Semantic aliases --- */
  --ds-text-on-dark: var(--ds-white);
  --ds-text-on-light: var(--ds-gray);
  --ds-text-heading: var(--ds-blue-dark);
  --ds-text-muted: var(--ds-gray-mid);
  --ds-bg-slide: var(--ds-white);
  --ds-bg-section: var(--ds-blue-navy);
  /* section divider slides */
  --ds-bg-header-bar: var(--ds-blue);
  /* top bar on content slides */
  --ds-accent-primary: var(--ds-green);
  --ds-accent-secondary: var(--ds-amber);

  /* --- Typography --- */
  --ds-font-heading: 'Calibri Light', 'Segoe UI Light', 'Helvetica Neue', sans-serif;
  --ds-font-body: 'Calibri', 'Segoe UI', 'Helvetica Neue', sans-serif;

  /* Font scale (PPTX pt → px at 96dpi, scaled for 1280px slide width) */
  --ds-fs-display: 9vh;
  /* ~84px on 1080p — large numbers / hero text */
  --ds-fs-h1: 6.75vh;
  /* ~54px on 1080p — slide title on section slides */
  --ds-fs-h2: 5.25vh;
  /* ~42px on 1080p — section headings */
  --ds-fs-h3: 3.75vh;
  /* ~30px on 1080p — sub-headings */
  --ds-fs-body: 3vh;
  /* ~24px on 1080p — regular body text */
  --ds-fs-small: 2.625vh;
  /* ~21px on 1080p — secondary body */
  --ds-fs-caption: 2.25vh;
  /* ~18px on 1080p — captions, footnotes */

  /* --- Spacing --- */
  --ds-slide-padding-h: 3rem;
  /* horizontal safe margin from slide edge */
  --ds-slide-padding-v: 2rem;
  /* vertical safe margin from slide edge */
  --ds-gap-block: 1.5rem;
  /* space between content blocks */
  --ds-gap-item: 0.75rem;
  /* space between list items / inline elements */

  /* --- Borders & radius --- */
  --ds-radius: 4px;
  --ds-radius-card: 6px;
}


/* =============================================================================
   2. REVEAL.JS BASE OVERRIDES
   ============================================================================= */

.reveal {
  font-family: var(--ds-font-body);
  font-size: 3vh;
  color: var(--ds-text-on-light);
}

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

.reveal .slides section {
  /* Default: content-slide white background */
  color: var(--ds-text-on-light);
  padding: 0;
  /* padding is managed per-region below */
  height: 100%;
  box-sizing: border-box;
}

/* Headings */
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4 {
  font-family: var(--ds-font-heading);
  font-weight: 300;
  /* Calibri Light feel */
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 var(--ds-gap-item) 0;
}

.reveal h1 {
  font-size: var(--ds-fs-h1);
}

.reveal h2 {
  font-size: var(--ds-fs-h2);
}

.reveal h3 {
  font-size: var(--ds-fs-h3);
  font-weight: 600;
}

.reveal p,
.reveal li {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body);
  line-height: 1.5;
  margin: 0 0 var(--ds-gap-item) 0;
}

.reveal ul,
.reveal ol {
  margin: 0 0 var(--ds-gap-block) 1.25em;
  padding: 0;
}

.reveal ul li::marker {
  color: var(--ds-blue);
}

.reveal a {
  color: var(--ds-blue);
  text-decoration: none;
}

.reveal a:hover {
  color: var(--ds-blue-dark);
  text-decoration: underline;
}

/* Remove reveal.js default text-shadow */
.reveal h1,
.reveal h2,
.reveal h3 {
  text-shadow: none;
}


/* =============================================================================
   3. SLIDE TYPE: CONTENT SLIDE  (white, blue top bar)
   ============================================================================= */

/*
 * Markup pattern:
 *
 * <section class="slide-content">
 *   <div class="slide-header">Slide Title Here</div>
 *   <div class="slide-body">
 *     ...content...
 *   </div>
 * </section>
 */

.slide-content {
  display: flex !important;
  flex-direction: column;
}

/* Blue header bar */
.slide-content .slide-header,
.reveal .slides section .slide-header {
  background-color: var(--ds-bg-header-bar);
  color: var(--ds-white);
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-h3);
  font-weight: 600;
  padding: 1rem var(--ds-slide-padding-h);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  letter-spacing: 0.01em;
  position: relative;
  top: 5vh;
}

/* Category label inside header (e.g. "General Information") */
.slide-content .slide-header .slide-category {
  font-size: var(--ds-fs-caption);
  font-weight: 400;
  opacity: 0.8;
  margin-left: auto;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Content area below the bar */
.slide-content .slide-body {
  position: relative;
  top: 7vh;
  flex: 1;
  padding: var(--ds-slide-padding-v) var(--ds-slide-padding-h);
  overflow: hidden;
}

.slide-content .slide-body h2,
.slide-content .slide-body h3 {
  color: var(--ds-blue);
  font-weight: 600;
}

.slide-content .slide-body p,
.slide-content .slide-body li {
  color: var(--ds-text-on-light);
  font-size: var(--ds-fs-small);
}


/* =============================================================================
   4. SLIDE TYPE: SECTION DIVIDER  (dark blue + geometric polygon bg)
   ============================================================================= */

/*
 * Markup pattern:
 *
 * <section class="slide-section">
 *   <div class="slide-section-number">1</div>
 *   <div class="slide-section-title">General Information</div>
 * </section>
 *
 * For the geometric background, either use an SVG/image asset, or the
 * CSS gradient approximation provided below via .slide-section::before.
 */

.slide-section {
  background-color: var(--ds-bg-section) !important;
  color: var(--ds-white) !important;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--ds-slide-padding-v) var(--ds-slide-padding-h) !important;
  position: relative;
  overflow: hidden;
}

/* Simulated multi-tone geometric gradient background */
.slide-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(151, 191, 9, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse at 95% 55%, rgba(0, 133, 205, 0.45) 0%, transparent 45%),
    radial-gradient(ellipse at 65% 80%, rgba(251, 174, 64, 0.25) 0%, transparent 40%),
    radial-gradient(ellipse at 10% 10%, rgba(0, 66, 114, 0.6) 0%, transparent 60%),
    linear-gradient(135deg, #002D52 0%, #004272 50%, #0085CD 100%);
  z-index: 0;
}

.slide-section>* {
  position: relative;
  z-index: 1;
}

/* Big section number (bottom-right, very large) */
.slide-section-number {
  position: absolute !important;
  right: var(--ds-slide-padding-h);
  bottom: 10vh;
  font-family: var(--ds-font-heading);
  font-size: 30vh;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

/* Section title (bottom-left) */
.slide-section-title {
  position: relative;
  bottom: 20vh;
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-h1);
  font-weight: 600;
  color: var(--ds-white);
  margin-bottom: 1rem;
}


/* =============================================================================
   5. TITLE SLIDE  (same dark geometric bg, centered layout)
   ============================================================================= */

/*
 * Markup pattern:
 *
 * <section class="slide-title">
 *   <div class="slide-title-bar">
 *     <h1>An Introduction to dotSource</h1>
 *     <p class="slide-meta">Author Name | Year</p>
 *   </div>
 * </section>
 */

.slide-title {
  background-color: var(--ds-bg-section) !important;
  color: var(--ds-white) !important;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 !important;
  position: relative;
  overflow: hidden;
}

/* Same geometric background as section slides */
.slide-title::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 75% 15%, rgba(151, 191, 9, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 50%, rgba(0, 133, 205, 0.50) 0%, transparent 45%),
    radial-gradient(ellipse at 60% 85%, rgba(251, 174, 64, 0.20) 0%, transparent 40%),
    radial-gradient(ellipse at 15% 10%, rgba(0, 66, 114, 0.65) 0%, transparent 65%),
    linear-gradient(135deg, #002D52 0%, #003a6b 40%, #0085CD 100%);
  z-index: 0;
}

/* Blue bar at the bottom containing the title */
.slide-title-bar {
  position: relative;
  bottom: 20vh;
  z-index: 1;
  background-color: var(--ds-blue);
  padding: 1.25rem var(--ds-slide-padding-h);
  font-weight: 500;
  width: max-content;
}

.slide-title-bar h1 {
  font-size: var(--ds-fs-h1);
  color: var(--ds-white);
  margin-bottom: 0.25rem;
  font-weight: 900;
}

.slide-title-bar .slide-meta {
  font-size: var(--ds-fs-small);
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}


/* =============================================================================
   6. UTILITY COMPONENTS
   ============================================================================= */

/* --- Highlight chip (colored label, e.g. "Benefits", "Conditions") --- */
.ds-chip {
  display: inline-block;
  background-color: var(--ds-blue);
  color: var(--ds-white);
  font-size: var(--ds-fs-caption);
  font-weight: 600;
  padding: 0.2em 0.65em;
  border-radius: var(--ds-radius);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ds-chip--green {
  background-color: var(--ds-green);
  color: #fff;
}

.ds-chip--amber {
  background-color: var(--ds-amber);
  color: #222;
}

.ds-chip--navy {
  background-color: var(--ds-blue-dark);
  color: #fff;
}

.ds-chip--gray {
  background-color: var(--ds-gray-light);
  color: var(--ds-charcoal);
}

/* --- Two-column grid --- */
.ds-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-gap-block);
  align-items: start;
}

.ds-two-col--wide-left {
  grid-template-columns: 2fr 1fr;
}

.ds-two-col--wide-right {
  grid-template-columns: 1fr 2fr;
}

/* --- Stat callout (big number + label) --- */
.ds-stat {
  text-align: center;
}

.ds-stat-value {
  display: block;
  font-family: var(--ds-font-heading);
  font-size: var(--ds-fs-display);
  font-weight: 700;
  color: var(--ds-blue);
  line-height: 1;
}

.ds-stat-label {
  display: block;
  font-size: var(--ds-fs-caption);
  color: var(--ds-gray);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.3em;
}

/* --- Card --- */
.ds-card {
  background-color: #f4f8fc;
  border-left: 4px solid var(--ds-blue);
  border-radius: var(--ds-radius-card);
  padding: var(--ds-gap-item) var(--ds-gap-block);
}

.ds-card--green {
  border-color: var(--ds-green);
}

.ds-card--amber {
  border-color: var(--ds-amber);
}

.ds-card--navy {
  border-color: var(--ds-blue-dark);
}

/* --- Logo placement (top right corner, content slides) --- */
.ds-logo {
  position: absolute;
  top: 0.5rem;
  right: var(--ds-slide-padding-h);
  height: 1.5rem;
  width: auto;
  z-index: 10;
}

/* Logo on dark (section/title) slides */
.slide-section .ds-logo,
.slide-title .ds-logo {
  top: 0.75rem;
  filter: brightness(0) invert(1);
  /* force white if logo is dark */
}

/* --- Bullet list with blue dot accent --- */
.ds-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ds-list li {
  padding-left: 1.25em;
  position: relative;
  margin-bottom: 0.5em;
  color: black !important;
}

.ds-list li::before {
  content: '•';
  color: var(--ds-blue);
  position: absolute;
  left: 0;
  font-weight: 700;
}

/* --- Divider line (blue) --- */
.ds-divider {
  border: none;
  border-top: 2px solid var(--ds-blue);
  margin: var(--ds-gap-block) 0;
}

/* --- Caption / footnote --- */
.ds-caption {
  font-size: var(--ds-fs-caption);
  color: var(--ds-gray-mid);
  line-height: 1.4;
}


/* =============================================================================
   7. REVEAL.JS CONTROLS & PROGRESS BAR
   ============================================================================= */

.reveal .controls {
  color: var(--ds-blue);
}

.reveal .progress {
  background: rgba(0, 133, 205, 0.2);
  color: var(--ds-blue);
  height: 3px;
}

.reveal .progress span {
  background: var(--ds-blue);
}

.reveal .slide-number {
  background-color: var(--ds-blue);
  color: var(--ds-white);
  font-size: 0.7rem;
  padding: 0.2em 0.5em;
  border-radius: var(--ds-radius) 0 0 0;
}

.center-image {
  display: grid;
  place-items: center;
  height: 100%;
  width: 100%;
}

/* Half‑radial chart container */
.half-radial-chart {
  display: grid;
  place-items: center;
  height: 100%;
  max-width: 100%;
}

.partners-grid,
.customer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1.5rem;
  height: 100%;
  align-items: start;
  justify-items: center;
}

.partners-grid {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
}

.grid-cell {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1vh;
  padding: 1vh;
}

.catch-word {
  font-family: var(--ds-font-heading);
  font-size: var(--ds-fs-h3);
  color: var(--ds-blue);
  margin-bottom: 1vh;
  font-weight: 600;
}

.images-row {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-direction: column;
  width: 75%;
}

.round-img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}