/* 1. Global Variables */
:root {
  --frame-outline-color: #083ddb;   /* ## slides: frame + banner */
  --sub-frame-color: #0b8a5c;       /* ## {.sub} slides: frame only, no banner */
  --link-color: #3c53ea;
  --font-size-root: 40px;
}

/* 2. Base Theme Overrides */
.reveal {
  font-size: var(--font-size-root);
}
.reveal a {
  color: var(--link-color);
}

/* Quarto's built-in theme shrinks .smaller to 0.7em; bump it up to 0.9em. */
.reveal .slides section.smaller,
.reveal.smaller .slides section {
  font-size: 0.9em !important;
}

/* Redo Quarto's heading compensation (hardcoded calc(_em/0.7)) for the 0.9em scale. */
.reveal .slides section.smaller h1,
.reveal.smaller .slides h1 {
  font-size: calc(2.5em / 0.9) !important;
}
.reveal .slides section.smaller h2,
.reveal.smaller .slides h2 {
  font-size: calc(1.6em / 0.9) !important;
}
.reveal .slides section.smaller h3,
.reveal.smaller .slides h3 {
  font-size: calc(1.3em / 0.9) !important;
}

/* .tiny: body text at 0.7em; headings compensated to keep their normal size. */
.reveal .slides section.tiny {
  font-size: 0.7em !important;
}
.reveal .slides section.tiny h1 {
  font-size: calc(2.5em / 0.7) !important;
}
.reveal .slides section.tiny h2 {
  font-size: calc(1.6em / 0.7) !important;
}
.reveal .slides section.tiny h3 {
  font-size: calc(1.3em / 0.7) !important;
}

/* 3. Custom Rules */

/* Deck title slide subtitle */
.reveal .subtitle {
  font-size: calc(var(--r-heading1-size) * 0.8) !important;
  color: darkblue !important;
}

/* Blue headers */
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
  color: #074bdd !important;
}
.reveal h1 {
  color: #032eee !important;
}

/* Inline code in headings takes the heading colour (legible on the blue banner) */
.reveal h1 code,
.reveal h2 code,
.reveal h3 code,
.reveal h4 code,
.reveal h5 code,
.reveal h6 code {
  color: inherit !important;
  background-color: transparent !important;
}

/* Center standalone slide images and fill the available width. */
.reveal .slides section > p > img,
.reveal .slides section > img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: auto;
}

/* 4. Menu and Button Placement */
.reveal .slide-menu-button {
  top: 30px !important;
  bottom: auto !important;
  left: 10px !important;
  margin: 0 !important;
}

.custom-slide-button {
  position: fixed;
  z-index: 2147483647;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
}
.custom-slide-button:hover {
  transform: scale(1.1);
  color: rgba(0, 0, 0, 0.8);
}

#custom-refresh-btn {
  position: fixed;
  top: 30px;
  right: 10px;
  z-index: 2147483647;
}

@media (max-width: 800px) {
  #custom-chalkboard-btn svg,
  #custom-notes-btn svg,
  #custom-refresh-btn svg {
    width: 18px !important;
    height: 18px !important;
  }
}

/* 5. Beamer-Style Frames
   Framed slides: every slide except the deck title slide, level-1 (#)
   section breaks, and the wrapper <section> that holds a vertical stack.
   Note: Quarto's reveal writer does NOT turn a heading one level below
   slide-level (###) into its own nested <section> the way raw Pandoc does
   — it stays a plain in-slide <h3>. To get a genuine, separately-framed
   "third level" slide, write it as a normal ## slide tagged with an extra
   .sub class: `## Heading {.sub}`. Plain ## slides (level2, including
   empty section breaks) get the blue frame with a banner; ## {.sub}
   slides get a green frame with a plain underlined heading, no banner. */

/* Fix framed slides to the full slide height so the frame does not vary */
.reveal .slides section:not(#title-slide):not(.quarto-title-block):not(.level1):not(:has(section)) {
  height: 100%;
  box-sizing: border-box;
}

/* 5a. Frame (painted OUTSIDE via ::before) — default colour for ## slides */
.reveal .slides section:not(#title-slide):not(.quarto-title-block):not(.level1):not(:has(section))::before {
  content: "";
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  border: 4px solid var(--frame-outline-color) !important;
  border-radius: 15px !important;
  background-color: rgba(8, 61, 219, 0.05) !important;
  z-index: -1;
  pointer-events: none;
}

/* 5b. ## {.sub} slides: second frame colour */
.reveal .slides section.sub::before {
  border-color: var(--sub-frame-color) !important;
  background-color: rgba(11, 138, 92, 0.05) !important;
}

/* 5c. Banner title box on plain ## slides (not .sub) */
.reveal .slides section.level2:not(#title-slide):not(.quarto-title-block):not(.sub) > h2 {
  background-color: var(--frame-outline-color) !important;
  color: #ffffff !important;
  margin: -30px -30px 30px -30px !important;
  width: calc(100% + 60px) !important;
  padding: 15px 30px !important;
  border-radius: 10px 10px 0 0 !important;
  text-align: left !important;
  box-sizing: border-box !important;
  position: relative;
  z-index: 1;
}

/* 5c'. Empty ## slides (section breaks): frame kept, banner moved to the
   vertical middle as a full-width band with centred text */
.reveal .slides section.level2:not(#title-slide):not(.quarto-title-block):not(.sub):has(> h2:only-child) > h2 {
  position: absolute !important;
  top: 50% !important;
  left: -30px !important;
  width: calc(100% + 60px) !important;
  transform: translateY(-50%);
  margin: 0 !important;
  padding: 25px 30px !important;
  border-radius: 0 !important;
  text-align: center !important;
}

/* Toggle-off state for the same slides */
body.hide-debug .reveal .slides section.level2:not(#title-slide):not(.quarto-title-block):not(.sub):has(> h2:only-child) > h2 {
  left: 0 !important;
  width: 100% !important;
  background-color: transparent !important;
  color: var(--frame-outline-color) !important;
  padding: 0 !important;
}

/* 5d. ## {.sub} slides: no banner; heading in the frame colour with an underline */
.reveal .slides section.sub > h2 {
  background: none !important;
  color: var(--sub-frame-color) !important;
  font-size: var(--r-heading2-size) !important;
  text-align: left !important;
  margin: 0 0 0.6em 0 !important;
  padding: 0 0 0.1em 0 !important;
  width: auto !important;
  border-radius: 0 !important;
  border-bottom: 3px solid var(--sub-frame-color);
  position: static;
}

/* 5e. Level-1 (#) section breaks stay centered and unframed */
.reveal .slides section.level1 > h1 {
  text-align: center !important;
}

/* 5f. Toggle frames OFF via the menu */
body.hide-debug .reveal .slides section:not(#title-slide):not(.quarto-title-block):not(.level1):not(:has(section))::before {
  display: none !important;
}
body.hide-debug .reveal .slides section.level2:not(#title-slide):not(.quarto-title-block):not(.sub) > h2 {
  background-color: transparent !important;
  color: var(--frame-outline-color) !important;
  margin: 0 0 30px 0 !important;
  padding: 0 !important;
  width: 100% !important;
}
body.hide-debug .reveal .slides section.sub > h2 {
  border-bottom: none;
}