/* =========================================================================
   Paradox theme for Compassion-A-Thon 3.0
   Inspired by the IITM Paradox underwater-festival artwork:
   deep indigo radial glow, silver-blue wordmark, teal/magenta paper fans,
   green stylised clouds, gold accents.
   Loaded last via #+REVEAL_EXTRA_CSS so it overrides the night theme.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700&family=Quicksand:wght@400;500;600;700&display=swap');

:root {
  --pdx-navy-deep:  #0d0d38;
  --pdx-navy:       #161653;
  --pdx-indigo:     #2a2370;
  --pdx-glow:       #4b3fa6;
  --pdx-silver:     #dbe6ff;   /* wordmark light */
  --pdx-silver-2:   #93a8d8;   /* wordmark shade */
  --pdx-teal:       #34c6c6;   /* fans */
  --pdx-cyan:       #6fe3df;
  --pdx-magenta:    #ff3e86;   /* centre fan */
  --pdx-pink:       #ff5fa2;
  --pdx-green:      #5fbf5f;   /* clouds */
  --pdx-gold:       #f3d488;   /* top accents */
  --pdx-text:       #e9edff;
}

/* ---- Base background: deep radial glow like the artwork ---------------- */
.reveal-viewport,
body.reveal-viewport {
  background: radial-gradient(ellipse 85% 65% at 50% 80%,
              var(--pdx-glow) 0%,
              var(--pdx-indigo) 36%,
              var(--pdx-navy) 68%,
              var(--pdx-navy-deep) 100%) fixed !important;
}

/* Decorative cloud band (top) and fan band (bottom) from the artwork,
   faded so slide content stays readable. Sit behind the slides. */
.reveal-viewport::before,
.reveal-viewport::after {
  content: "";
  position: fixed;
  left: 0; right: 0;
  height: 30vh;
  background-image: url('paradox-bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
  z-index: 0;
}
.reveal-viewport::before {       /* top clouds + waves */
  top: 0;
  background-position: center top;
  opacity: 0.38;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
          mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}
.reveal-viewport::after {        /* bottom paper fans */
  bottom: 0;
  background-position: center bottom;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
          mask-image: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));
}

/* keep the actual slides above the decorative bands */
.reveal { z-index: 1; }
.reveal .slides { z-index: 2; }
.reveal .slides section { background: transparent !important; }

/* ---- Typography -------------------------------------------------------- */
.reveal {
  font-family: 'Quicksand', system-ui, sans-serif;
  color: var(--pdx-text);
}
.reveal p, .reveal li, .reveal td, .reveal th {
  color: var(--pdx-text);
  font-family: 'Quicksand', system-ui, sans-serif;
}

.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5 {
  font-family: 'Baloo 2', 'Quicksand', system-ui, sans-serif;
  letter-spacing: 0.5px;
  text-transform: none;
  text-shadow: 0 2px 18px rgba(75,63,166,0.55);
}

/* Big titles get the silver-blue "wordmark" gradient fill */
.reveal h1, .reveal h2 {
  background: linear-gradient(180deg, var(--pdx-silver) 0%, var(--pdx-silver-2) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--pdx-silver);   /* fallback */
}
.reveal h3, .reveal h4 { color: var(--pdx-silver); }

/* Big standalone phrases (font-size set inline on <p>) read as silver too */
.reveal section > p { text-shadow: 0 2px 16px rgba(13,13,56,0.6); }

/* ---- Emphasis & links -------------------------------------------------- */
.reveal strong, .reveal b { color: var(--pdx-cyan); font-weight: 700; }
.reveal em, .reveal i     { color: var(--pdx-gold); font-style: italic; }
.reveal a                 { color: var(--pdx-pink); text-decoration: none; }
.reveal a:hover           { color: var(--pdx-gold); text-shadow: 0 0 12px rgba(243,212,136,0.7); }

/* list markers in festival colours */
.reveal ul li::marker { color: var(--pdx-teal); }
.reveal ol li::marker { color: var(--pdx-pink); font-weight: 700; }

/* ---- Blockquotes (portmanteau / Given-When-Then) ----------------------- */
.reveal blockquote {
  background: rgba(20,20,70,0.55);
  border-left: 6px solid var(--pdx-magenta);
  border-radius: 10px;
  box-shadow: 0 6px 28px rgba(0,0,0,0.35);
  color: var(--pdx-text);
  width: auto;
}

/* ---- Code blocks (BDD / TDD snippets) ---------------------------------- */
.reveal pre {
  width: 92%;
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
  border-radius: 12px;
}
.reveal pre code {
  background: rgba(10,12,40,0.82);
  border: 1px solid rgba(52,198,198,0.5);
  border-left: 6px solid var(--pdx-teal);
  border-radius: 12px;
  color: #e8f6ff;
  padding: 1em 1.1em;
}

/* ---- Tables (scorecard / 5-lessons / self-eval) ------------------------ */
.reveal table {
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(20,20,70,0.5);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.reveal table th {
  background: rgba(52,198,198,0.22);
  color: var(--pdx-silver);
  border-bottom: 2px solid var(--pdx-teal);
}
.reveal table td, .reveal table th {
  border-color: rgba(111,227,223,0.22);
  padding: 0.4em 0.7em;
}
.reveal table tr:nth-child(even) td { background: rgba(255,255,255,0.04); }

/* ---- Image framing ----------------------------------------------------- */
.reveal section img:not([data-background]) {
  border: none;
  background: transparent;
  box-shadow: 0 10px 36px rgba(0,0,0,0.45);
  border-radius: 12px;
}

/* ---- Progress bar / controls in festival colours ----------------------- */
.reveal .progress { color: var(--pdx-magenta); }
.reveal .controls { color: var(--pdx-teal); }

/* ---- Title slide ------------------------------------------------------- */
/* The artwork itself is the title background; place the event title in the
   glow band below the PARADOX wordmark, on a soft panel for legibility. */
/* Force the title section to fill the slide so % positions are measured
   against the full slide height (reveal otherwise centres a short box). */
.reveal .slides section#sec-title-slide {
  height: 100% !important;
  top: 0 !important;
}
#sec-title-slide .paradox-title-box {
  position: absolute;
  left: 50%;
  top: 47%;                 /* below the PARADOX wordmark, above the fans */
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  width: 78%;
  max-width: 900px;
  text-align: center;
  padding: 0.4em 1.1em 0.6em;
  background: rgba(13,13,56,0.5);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
  backdrop-filter: blur(2px);
}
#sec-title-slide .paradox-title-box h1 {
  font-size: 2.1em;
  margin: 0;
  background: none;
  -webkit-text-fill-color: #ffffff !important;   /* override gradient clip */
  color: #ffffff !important;
  text-shadow: 0 2px 16px rgba(0,0,0,0.6);
}
#sec-title-slide .paradox-title-box h3 {
  color: var(--pdx-gold);
  font-weight: 500;
  margin: 0.2em 0 0 0;
  font-size: 0.95em;
}
#sec-title-slide .paradox-title-box h4 {
  color: var(--pdx-cyan);
  font-weight: 500;
  margin: 0.3em 0 0 0;
  font-size: 0.8em;
}

/* Speaker-note image overlay label keeps contrast on busy art */
.image-overlay-text { background-color: rgba(13,13,56,0.7); }

/* ---- Full-bleed photo slides ------------------------------------------- */
/* Darken only slides that actually carry a background photo, so white text
   overlaid on top stays readable. Plain/colour slides are untouched. */
.reveal .slide-background-content[style*="background-image"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(9,9,42,0.40), rgba(9,9,42,0.58));
  pointer-events: none;
}
/* Text sitting over a photo gets a strong shadow for contrast.
   org-re-reveal emits the image path in data-background, so match *.jpg. */
.reveal section[data-background*=".jpg"] h1,
.reveal section[data-background*=".jpg"] h2,
.reveal section[data-background*=".jpg"] h3,
.reveal section[data-background*=".jpg"] p,
.reveal section[data-background*=".jpg"] li {
  text-shadow: 0 2px 18px rgba(0,0,0,0.85), 0 0 6px rgba(0,0,0,0.6);
  color: #ffffff;
}
.reveal section[data-background*=".jpg"] h1,
.reveal section[data-background*=".jpg"] h2 {
  -webkit-text-fill-color: #ffffff;   /* override the gradient clip on photos */
}
.reveal section[data-background*=".png"] h1,
.reveal section[data-background*=".png"] h2,
.reveal section[data-background*=".png"] h3,
.reveal section[data-background*=".png"] p {
  text-shadow: 0 2px 18px rgba(0,0,0,0.85), 0 0 6px rgba(0,0,0,0.6);
}