/**
 * reveal-custom.css
 * Core Design System for Presentation Conversion Pipeline
 * Target Geometry: 1050x590 (Scaled Widescreen Canvas)
 * Color Theme: Light Mode (Authoritative Black-on-White Standard)
 */

/* ==========================================================================
   1. Base Slide Layout & Typography Reset
   ========================================================================== */
.reveal {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 24px; /* Trimmed baseline text for scaled canvas proportions */
  font-weight: normal;
  color: #111111;            /* Strict Black Text */
  background-color: #ffffff; /* Strict White Canvas Background */
}

/* Force global slide container dimensions to align with Pandoc parameters */
.reveal .slides {
  text-align: left;
}

.reveal section {
  line-height: 1.4;
  text-align: left;
}

/* ==========================================================================
   2. Typography Hierarchies (Headers & Inline Markers)
   ========================================================================== */
.reveal h1 {
  font-size: 2.2em;
  font-weight: bold;
  color: #000000;
  text-transform: none;
  margin-bottom: 0.4em;
}

.reveal h2 {
  font-size: 1.5em;
  font-weight: bold;
  color: #222222;
  text-transform: none;
  margin-top: 0.6em;
  margin-bottom: 0.3em;
}

/* Standard typographic elements preserved across the pipeline */
.reveal strong, .reveal b {
  font-weight: bold;
  color: #000000;
}

.reveal em, .reveal i {
  font-style: italic;
}

.reveal u {
  text-decoration: underline;
}

/* Native HTML5 Mark block replacement for text highlights */
.reveal mark {
  background-color: #fef08a; /* High contrast soft yellow highlight */
  color: #000000;
  padding: 0 4px;
  border-radius: 4px;
}

/* Character-level cue for emphasizing a single letter inside a word */
.emph-letter {
  font-weight: bold !important;
  text-decoration: underline double 3px !important;
}

/* ==========================================================================
   3. Unqualified High-Contrast Accessible Color Extensions
   ========================================================================== */
/* First-Generation Core Palette Nodes */
.text-brick-red {
  color: #b91c1c !important;
}

.text-dark-blue {
  color: #1d4ed8 !important;
}

.text-dark-green {
  color: #15803d !important;
}

.text-violet {
  color: #6d28d9 !important;
}

/* Second-Generation Intermediate Palette Nodes */
.text-burnt-orange {
  color: #b45309 !important;
}

.text-dark-teal {
  color: #0f766e !important;
}

.text-deep-magenta {
  color: #be185d !important;
}

/* ==========================================================================
   4. Semantic List Hierarchies (Bug 3 Overrides)
   ========================================================================== */
/* First-level list configuration */
.reveal ul {
  display: block;
  list-style-type: disc !important;
  margin-left: 2em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.reveal li {
  display: list-item;
  margin-bottom: 0.3em;
}

/* Second-level nested sub-lists */
.reveal ul ul {
  list-style-type: circle !important;
  margin-left: 1.5em;
  margin-top: 0.2em;
  font-size: 0.9em; /* Clean relative typographic scale */
}

/* Third-level nested sub-lists */
.reveal ul ul ul {
  list-style-type: square !important;
  margin-left: 1.5em;
  font-size: 0.8em;
}

/* ==========================================================================
   5. Block-Level Layout Alignment Overrides
   ========================================================================== */
/* Explicit container wrappers for centered slide layouts */
.reveal .center, 
.reveal .align-center,
.reveal div[style*="text-align: center"],
.reveal div[style*="text-align:center"] {
  text-align: center !important;
}
.reveal .center *, 
.reveal .align-center *,
.reveal div[style*="text-align: center"] *,
.reveal div[style*="text-align:center"] * {
  text-align: center !important;
}

/* Explicit container wrappers for right-aligned data blocks */
.reveal .right, 
.reveal .align-right,
.reveal div[style*="text-align: right"],
.reveal div[style*="text-align:right"] {
  text-align: right !important;
}
.reveal .right *, 
.reveal .align-right *,
.reveal div[style*="text-align: right"] *,
.reveal div[style*="text-align:right"] * {
  text-align: right !important;
}

/* Explicit container wrappers for standard left alignment */
.reveal .left, 
.reveal .align-left,
.reveal div[style*="text-align: left"],
.reveal div[style*="text-align:left"] {
  text-align: left !important;
}

/* Ensure images scale responsively within their structural wrappers */
.reveal img {
  max-width: 100%;
  max-height: 450px;
  object-fit: contain;
  margin: 10px auto;
  display: block;
}

/* ==========================================================================
   6. Custom Component Overlays (Manual Slide-by-Slide Shrouds)
   ========================================================================== */
/* Reusable, semi-transparent high-contrast white background panel */
.text-overlay {
  background-color: rgba(255, 255, 255, 0.80) !important; /* Fixed 80% opaque white backing */
  border-radius: 8px !important;                          /* Clean structural borders */
  padding: 20px !important;                               /* Generous internal spacing for text */
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.12) !important; /* Subtle float separation depth */
  display: block;                                         /* Guarantee block layout behavior */
}

/* ==========================================================================
   7. Semantic Block Quotes & Attributions
   ========================================================================== */
.reveal blockquote {
  display: block;
  position: relative;
  width: 85%;
  margin: 0.8em auto;
  padding: 0.5em 1.2em;
  font-style: italic;
  line-height: 1.5;
  color: #222222;
  border-left: 5px solid #1d4ed8; /* Left accent line using our high-contrast blue */
  background-color: rgba(243, 244, 246, 0.6); /* Very soft gray background backing tint */
  border-radius: 0 8px 8px 0;
}

/* Quote mark decoration */
.reveal blockquote::before {
  content: "“";
  position: absolute;
  top: -0.2em;
  left: 0.2em;
  font-size: 4em;
  color: rgba(29, 78, 216, 0.15); /* Faded blue quote accent */
  font-family: Georgia, serif;
  line-height: 1;
}

.reveal blockquote p {
  margin-bottom: 0.5em;
}

/* Clean, right-aligned citation block with an em-dash */
.reveal blockquote cite {
  display: block;
  text-align: right;
  font-size: 0.8em;
  font-style: normal;
  font-weight: bold;
  color: #444444;
  margin-top: 0.6em;
}

/* Automatically inject the long em-dash preceding the attribution text string */
.reveal blockquote cite::before {
  content: "— "; /* True typographic Em-Dash with trailing space */
}

/* ==========================================================================
   8. Centered Compact Presentation Data Tables
   ========================================================================== */
.reveal table {
  display: table;
  margin: 0.5em auto !important; /* Forces block-level horizontal centering */
  width: 85%;                    /* Leaves clean visual breathing room on sides */
  border-collapse: collapse;
  font-size: 0.85em;             /* Master table scaling factor */
  line-height: 1.2;
  color: #111111;
}

.reveal th {
  font-weight: bold;
  text-align: left;
  background-color: #f3f4f6;     /* Soft gray header backing */
  border-bottom: 2px solid #1d4ed8; /* Dark blue baseline accent border */
  padding: 3px 10px !important;  /* Ultra-compressed vertical padding */
}

.reveal td {
  font-size: 0.85em !important;  /* Reduces body cell text size by an additional 15% */
  padding: 2px 10px !important;  /* Strict minimum vertical padding per row */
  border-bottom: 1px solid #e5e7eb; /* Thin row dividers */
}

.reveal tr:nth-child(even) {
  background-color: rgba(243, 244, 246, 0.4);
}