/*-----------------------------------------------------------------
  WB Quarto reveal.js theme
  Reproduces the WB Beamer Metropolis aesthetic for web-native
  policy-advocacy decks: WB Blue accents, sans-serif, left-aligned
  headings, structured tables, section-break slides.

  Use:
    format:
      revealjs:
        theme: [default, wb_reveal_theme.scss]
        logo: wb_logo.jpg
        footer: "Author — Date"
        slide-level: 2
-----------------------------------------------------------------*/

/*-- scss:defaults --*/

// World Bank palette
$WBBlue:        #003087;
$WBLightBlue:   #00A8E0;
$WBGray:        #666666;
$WBLightGray:   #f4f4f6;

// Reveal/Quarto variables
$body-bg:                          #ffffff;
$body-color:                       $WBGray;
$link-color:                       $WBBlue;
$link-color-hover:                 $WBLightBlue;
$selection-bg:                     lighten($WBBlue, 50%);

$presentation-heading-color:       $WBBlue;
$presentation-heading-font-weight: 700;
$presentation-heading-text-shadow: none;
$presentation-heading-letter-spacing: 0;
$presentation-heading-text-transform: none;

$presentation-font:                "Helvetica Neue", Helvetica, Arial, sans-serif;
$presentation-heading-font:        "Helvetica Neue", Helvetica, Arial, sans-serif;
$presentation-font-size-root:      28px;
$presentation-line-height:         1.35;

/*-- scss:rules --*/

.reveal {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: $WBGray;
}

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

// Headings: left-aligned, WB Blue, no caps
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4 {
  color: $WBBlue;
  font-weight: 700;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 0;
  margin-bottom: 0.4em;
  line-height: 1.2;
}

.reveal h1 { font-size: 2.0em; }
.reveal h2 {
  font-size: 1.4em;
  border-bottom: 3px solid $WBBlue;
  padding-bottom: 0.2em;
  margin-bottom: 0.5em;
}
.reveal h3 { font-size: 1.1em; }

// Section divider slides: WB Blue background, white text
// (Markdown: a single `# Section Title` produces a section slide)
.reveal section.has-light-background.section-title,
.reveal section.section-title {
  background: $WBBlue;
}

.reveal .slide.level1 {
  background: $WBBlue;
  color: white;
}

.reveal .slide.level1 h1 {
  color: white;
  font-size: 2.4em;
  border-bottom: none;
  margin-top: 1.2em;
}

// Title slide — centred, no author/date, larger subtitle
// Quarto uses #title-slide and class .quarto-title-block; the older
// .title-slide selector is kept as a fallback.
.reveal #title-slide,
.reveal .title-slide,
.reveal section.title-slide,
.reveal .quarto-title-block {
  background: $WBBlue;
  text-align: center !important;
}

.reveal #title-slide h1.title,
.reveal #title-slide .subtitle,
.reveal #title-slide p,
.reveal .quarto-title-block h1.title,
.reveal .quarto-title-block .subtitle,
.reveal .quarto-title-block p {
  color: white;
  border-bottom: none;
  text-align: center !important;
}

.reveal #title-slide h1.title,
.reveal .quarto-title-block h1.title {
  font-size: 2.4em;
  margin-bottom: 0.5em;
  margin-top: 1.5em;
}

.reveal #title-slide .subtitle,
.reveal .quarto-title-block .subtitle {
  font-size: 1.5em;
  font-style: italic;
  margin-bottom: 1.5em;
  opacity: 0.92;
  line-height: 1.3;
}

// Hide author/date from the title slide entirely
.reveal #title-slide .quarto-title-authors,
.reveal #title-slide .quarto-title-author,
.reveal #title-slide .quarto-title-author-name,
.reveal #title-slide .quarto-title-author-email,
.reveal #title-slide .quarto-title-author-orcid,
.reveal #title-slide .quarto-title-affiliation,
.reveal #title-slide .author,
.reveal #title-slide .date,
.reveal #title-slide .quarto-title-meta,
.reveal .quarto-title-block .quarto-title-authors,
.reveal .quarto-title-block .author,
.reveal .quarto-title-block .date,
.reveal .quarto-title-block .quarto-title-meta {
  display: none !important;
}

// Strong text in WB Blue
.reveal strong {
  color: $WBBlue;
  font-weight: 700;
}

// Italic for asides — softer grey
.reveal em {
  color: lighten($WBGray, 5%);
  font-style: italic;
}

// Lists: tight, slightly indented
.reveal ul,
.reveal ol {
  display: block;
  margin-left: 0;
  padding-left: 1.2em;
}

.reveal li {
  margin-bottom: 0.25em;
  line-height: 1.4;
}

.reveal ul > li::marker {
  color: $WBBlue;
}

.reveal ol > li::marker {
  color: $WBBlue;
  font-weight: 700;
}

// Tables — WB Blue header, centred horizontally on the slide
.reveal table {
  border-collapse: collapse;
  margin: 0.5em auto;
  font-size: 0.85em;
}

.reveal table th {
  background-color: $WBBlue;
  color: white;
  padding: 0.4em 0.8em;
  border: none;
  text-align: left;
}

.reveal table td {
  padding: 0.3em 0.8em;
  border-bottom: 1px solid lighten($WBGray, 35%);
}

.reveal table tr:last-child td {
  border-bottom: 2px solid $WBBlue;
  font-weight: 700;
}

// Slide opt-in: vertical rule between column 4 and column 5
// Use ## Slide title {.vline-after-4}
.reveal .vline-after-4 table th:nth-child(4),
.reveal .vline-after-4 table td:nth-child(4) {
  border-right: 2px solid $WBBlue;
}

// Code blocks
.reveal pre {
  background-color: $WBLightGray;
  border-left: 4px solid $WBBlue;
  padding: 0.5em 0.8em;
  font-size: 0.7em;
  box-shadow: none;
}

.reveal pre code {
  background: transparent;
  color: $WBGray;
  padding: 0;
}

// Inline code
.reveal :not(pre) > code {
  background-color: $WBLightGray;
  color: $WBBlue;
  padding: 0.1em 0.3em;
  border-radius: 3px;
  font-size: 0.85em;
}

// Slide number
.reveal .slide-number,
.reveal .slide-number a {
  background: transparent;
  color: $WBGray;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 0.6em;
  right: 12px;
  bottom: 8px;
}

// Progress bar in WB Blue
.reveal .progress {
  color: $WBBlue;
  height: 4px;
}

.reveal .progress span {
  background: $WBBlue;
}

// Footer — small WB Gray, bottom-left
.reveal .footer {
  color: $WBGray;
  font-size: 0.5em;
  font-style: normal;
  bottom: 8px;
  left: 12px;
}

// Logo — fixed bottom-right, small
.reveal .slide-logo {
  position: absolute;
  bottom: 8px;
  right: 60px;
  height: 24px;
  max-height: 24px;
  z-index: 10;
}

// Images: centered, with reasonable max height
.reveal img {
  display: block;
  margin: 0.4em auto;
  max-height: 65vh;
  border: none;
  box-shadow: none;
}

// Figure captions
.reveal .figure-caption,
.reveal figcaption {
  color: lighten($WBGray, 10%);
  font-size: 0.7em;
  font-style: italic;
  text-align: center;
  margin-top: 0.4em;
}

// Centered slide variant — usable with `## Title {.center}`
.reveal section.center,
.reveal .slide.center {
  text-align: center;
}

.reveal section.center h2,
.reveal .slide.center h2 {
  text-align: center;
  border-bottom: none;
}

// Two-column layout with `:::: {.columns}`
.reveal .columns {
  display: flex;
  gap: 1.2em;
}

.reveal .column {
  flex: 1;
}

// Block quotes
.reveal blockquote {
  border-left: 4px solid $WBBlue;
  background: $WBLightGray;
  padding: 0.5em 0.8em;
  margin: 0.5em 0;
  font-style: italic;
  color: $WBGray;
}