/* 1. Global Variables (Replacing SCSS Defaults) */
:root {
  --frame-outline-color: #083ddb; /* Pure Bright Gold */
  --link-color: #3c53ea;
  --font-size-root: 40px;
}

/* 2. Base Theme Overrides (What SCSS used to do automatically) */
.reveal {
  font-size: var(--font-size-root);
}
.reveal a {
  color: var(--link-color);
}

/* 3. Your Custom Rules */

/* Brute-force blue headers */
.reveal h2, 
.reveal h3, 
.reveal h4, 
.reveal h5, 
.reveal h6 {
  color: #074bdd !important;
}

.reveal h1 {
  color: #032eee !important;
}

/* Center the text horizontally on section-break slides */
.reveal .slide.level2 h2,
.reveal .slide.level1 h1 {
  text-align: center;
}

/* Center standalone slide images and fill the available width by default.
   Scoped to images that are direct children of a slide (not inside a
   .columns/.column layout), so deliberately custom-sized images inside
   column layouts are left untouched. */
.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 */

/* Move the Menu to the top-left */
.reveal .slide-menu-button {
  top: 30px !important;
  bottom: auto !important;
  left: 10px !important;
  margin: 0 !important;
}

/* Reusable class for all custom slide buttons (chalkboard, notes, refresh) */
.custom-slide-button {
  position: fixed;
  z-index: 2147483647; /* High z-index to stay on top */
  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;
}

/* Mobile sizing for custom buttons, matching the menu breakpoint */
@media (max-width: 800px) {
  #custom-chalkboard-btn svg,
  #custom-notes-btn svg,
  #custom-refresh-btn svg {
    width: 18px !important;
    height: 18px !important;
  }
}

/* 1. The Main Slide Frame (Painted OUTSIDE using ::before, without breaking Reveal's position) */
.reveal .slides section:not(#title-slide):not(.title-slide):not(.level1):not(:has(section))::before {
  content: "";
  position: absolute;
  /* Pushes the visual border 30px outward in every direction into the screen gap */
  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; /* Ensures this background stays strictly behind your text/images */
  pointer-events: none; /* Prevents the background from blocking mouse clicks */
}

/* 2. The Beamer Title Box (Stretches to cover the expanded top area) */
.reveal .slides section:not(#title-slide):not(.title-slide):not(.level1) > h2 {
  background-color: var(--frame-outline-color) !important; 
  color: #ffffff !important; 
  
  /* Reaches out exactly 30px to snap flush against the expanded border walls */
  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; /* Keeps the title box stacked above the light blue background */
}

/* Ensure section-break slides keep their normal centering */
.reveal .slide.level2 h2 {
  text-align: center !important;
}

/* 3. The Toggle to turn frames completely OFF via your menu */
body.hide-debug .reveal .slides section:not(#title-slide):not(.title-slide):not(.level1):not(:has(section))::before {
  display: none !important; /* Instantly turns off the pseudo-element frame */
}
body.hide-debug .reveal .slides section:not(#title-slide):not(.title-slide):not(.level1) > h2 {
  background-color: transparent !important; 
  color: var(--frame-outline-color) !important; 
  margin: 0 0 30px 0 !important;
  padding: 0 !important;
  width: 100% !important;
}