/* ============================================================
   ArtPartner Workshop Slide Deck
   Reveal.js Overrides — matches the project design system
   ============================================================ */

/* ----- CDN Imports ----- */
@import url('https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/reveal.css');
@import url('https://cdn.jsdelivr.net/npm/reveal.js@5.1.0/dist/theme/white.css');

/* ----- Reveal.js Variable Overrides ----- */
:root {
  --r-background-color: #ffffff;
  --r-main-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --r-main-font-size: 28px;
  --r-main-color: #2c2c3e;
  --r-heading-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --r-heading-color: #1a1a2e;
  --r-heading-font-weight: 700;
  --r-heading-line-height: 1.25;
  --r-heading-letter-spacing: -0.01em;
  --r-heading1-size: 2.2em;
  --r-heading2-size: 1.6em;
  --r-heading3-size: 1.25em;
  --r-heading4-size: 1.05em;
  --r-link-color: #e94560;
  --r-link-color-hover: #ff6b81;
  --r-selection-background-color: rgba(233, 69, 96, 0.25);
  --r-selection-color: #1a1a2e;

  /* Project tokens (reused in custom classes) */
  --ap-primary: #1a1a2e;
  --ap-secondary: #16213e;
  --ap-accent: #e94560;
  --ap-accent-light: #ff6b81;
  --ap-white: #ffffff;
  --ap-off-white: #f8f9fa;
  --ap-grey-200: #e9ecef;
  --ap-grey-600: #868e96;
  --ap-text: #2c2c3e;
  --ap-text-light: #555566;
  --ap-legal-bg: #eef2ff;
  --ap-legal-border: #4361ee;
  --ap-radius: 8px;
  --ap-radius-sm: 4px;
}


/* ----- Global Reveal Tweaks ----- */
.reveal {
  font-family: var(--r-main-font);
}

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

.reveal .slides section {
  padding: 40px 50px;
}

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4 {
  text-transform: none;
  text-align: left;
}

.reveal ul,
.reveal ol {
  display: block;
  margin-left: 1em;
}

.reveal li {
  margin-bottom: 0.4em;
  line-height: 1.45;
}

.reveal p {
  line-height: 1.5;
  margin-bottom: 0.6em;
}

.reveal strong {
  color: var(--ap-primary);
  font-weight: 700;
}

.reveal .slides section .fragment.visible {
  opacity: 1;
}


/* ----- Slide Title (dark background section headers) ----- */
.slide-title {
  background: linear-gradient(135deg, var(--ap-primary) 0%, var(--ap-secondary) 100%);
  color: var(--ap-white) !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.slide-title h1,
.slide-title h2,
.slide-title h3,
.slide-title h4,
.slide-title p {
  color: var(--ap-white) !important;
}

.slide-title h2 {
  font-size: 2em;
  margin-bottom: 0.3em;
}

.slide-title .subtitle {
  color: var(--ap-accent-light) !important;
  font-size: 1.1em;
  font-weight: 400;
}

.slide-title .module-number {
  display: inline-block;
  background: var(--ap-accent);
  color: var(--ap-white);
  font-size: 0.7em;
  font-weight: 700;
  padding: 0.2em 0.8em;
  border-radius: 50px;
  margin-bottom: 0.6em;
  letter-spacing: 0.04em;
}


/* ----- Legal Reference Box ----- */
.legal-box {
  background: var(--ap-legal-bg);
  border-left: 5px solid var(--ap-legal-border);
  border-radius: 0 var(--ap-radius) var(--ap-radius) 0;
  padding: 0.8em 1.1em;
  margin: 0.6em 0;
  font-size: 0.85em;
}

.legal-box h4,
.legal-box strong {
  color: var(--ap-legal-border);
}

.legal-box p {
  margin-bottom: 0.3em;
}


/* ----- Highlight Box (accent emphasis) ----- */
.highlight-box {
  background: rgba(233, 69, 96, 0.08);
  border-left: 5px solid var(--ap-accent);
  border-radius: 0 var(--ap-radius) var(--ap-radius) 0;
  padding: 0.8em 1.1em;
  margin: 0.6em 0;
}

.highlight-box strong {
  color: var(--ap-accent);
}


/* ----- Penalty Box (red-tinted warnings) ----- */
.penalty-box {
  background: #fdf0f0;
  border-left: 5px solid #c0392b;
  border-radius: 0 var(--ap-radius) var(--ap-radius) 0;
  padding: 0.8em 1.1em;
  margin: 0.6em 0;
  font-size: 0.88em;
}

.penalty-box strong {
  color: #c0392b;
}

.penalty-box .penalty-figure {
  font-size: 1.15em;
  font-weight: 700;
  color: #c0392b;
}


/* ----- Two-Column Grid ----- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5em;
  align-items: start;
}

.two-col > * {
  min-width: 0;
}


/* ----- Scenario Slide ----- */
.scenario-slide {
  background: #fffcf0;
  border-left: 5px solid #f0c040;
  border-radius: 0 var(--ap-radius) var(--ap-radius) 0;
  padding: 0.8em 1.1em;
  margin: 0.6em 0;
}

.scenario-slide .scenario-label {
  display: inline-block;
  background: #f0c040;
  color: var(--ap-primary);
  font-size: 0.7em;
  font-weight: 700;
  padding: 0.15em 0.6em;
  border-radius: 50px;
  margin-bottom: 0.5em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.scenario-slide em {
  display: block;
  font-style: italic;
  color: var(--ap-text-light);
  margin: 0.5em 0;
  padding-left: 0.5em;
  border-left: 3px solid #f0c040;
}


/* ----- Bilingual Pair (FR left, EN right with divider) ----- */
.bilingual-pair {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0 1.2em;
  align-items: start;
  width: 100%;
}

.bilingual-pair .lang-fr,
.bilingual-pair .lang-en {
  padding: 0;
}

.bilingual-pair .divider {
  background: var(--ap-grey-200);
  width: 1px;
  height: 100%;
  min-height: 40px;
  align-self: stretch;
}


/* ----- Language Indicator Labels ----- */
.lang-indicator {
  display: inline-block;
  font-size: 0.55em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.1em 0.5em;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 0.3em;
  line-height: 1;
}

.lang-indicator.fr {
  background: #002395;
  color: #ffffff;
}

.lang-indicator.en {
  background: #c8102e;
  color: #ffffff;
}


/* ----- Stacked Bilingual (alternative: FR then EN, stacked) ----- */
.bilingual-stack .fr-block {
  margin-bottom: 0.6em;
  padding-bottom: 0.6em;
  border-bottom: 1px solid var(--ap-grey-200);
}

.bilingual-stack .en-block {
  color: var(--ap-text-light);
  font-size: 0.92em;
}


/* ----- Agenda / List Styling ----- */
.agenda-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: agenda;
}

.agenda-list li {
  counter-increment: agenda;
  padding: 0.45em 0 0.45em 2.4em;
  position: relative;
  border-bottom: 1px solid var(--ap-grey-200);
}

.agenda-list li:last-child {
  border-bottom: none;
}

.agenda-list li::before {
  content: counter(agenda);
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 1.7em;
  height: 1.7em;
  background: var(--ap-accent);
  color: var(--ap-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75em;
}


/* ----- Key Takeaway Slide ----- */
.key-takeaway {
  background: linear-gradient(135deg, var(--ap-primary) 0%, var(--ap-secondary) 100%);
  color: var(--ap-white) !important;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.key-takeaway h2,
.key-takeaway h3,
.key-takeaway p {
  color: var(--ap-white) !important;
}

.key-takeaway .accent-text {
  color: var(--ap-accent-light) !important;
  font-weight: 700;
}


/* ----- Commitment / Exercise Slide ----- */
.exercise-slide {
  background: var(--ap-off-white);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.exercise-slide .exercise-icon {
  font-size: 2.5em;
  margin-bottom: 0.3em;
}

.exercise-slide p {
  max-width: 75%;
  margin-left: auto;
  margin-right: auto;
}


/* ----- Resource List ----- */
.resource-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.resource-list li {
  padding: 0.4em 0 0.4em 1.6em;
  position: relative;
}

.resource-list li::before {
  content: '\2192';
  position: absolute;
  left: 0;
  color: var(--ap-accent);
  font-weight: 700;
}


/* ----- Protected Characteristics Grid ----- */
.char-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.3em 1em;
  font-size: 0.72em;
  list-style: none;
  padding: 0;
  margin: 0;
}

.char-grid li {
  padding: 0.2em 0.4em;
  background: var(--ap-off-white);
  border-radius: var(--ap-radius-sm);
  margin-bottom: 0;
}


/* ----- Slide Number Styling ----- */
.reveal .slide-number {
  background: var(--ap-primary);
  color: var(--ap-white);
  font-size: 14px;
  padding: 4px 10px;
  border-radius: 4px 0 0 0;
  right: 0;
  bottom: 0;
}


/* ----- Progress Bar ----- */
.reveal .progress {
  height: 4px;
  color: var(--ap-accent);
}

.reveal .progress span {
  background: var(--ap-accent);
}


/* ----- Controls ----- */
.reveal .controls {
  color: var(--ap-accent);
}

.reveal .controls button {
  color: var(--ap-accent);
}


/* ----- Compact text for dense slides ----- */
.compact {
  font-size: 0.82em;
}

.compact li {
  margin-bottom: 0.25em;
}

.compact p {
  margin-bottom: 0.4em;
}

.small-text {
  font-size: 0.75em;
  color: var(--ap-text-light);
}


/* ----- Print / PDF Export ----- */
@media print {
  .slide-title,
  .key-takeaway {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}