/* bespoke fonts */
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/EBGaramond-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/EBGaramond-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/EBGaramond-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/EBGaramond-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: "QTHelvet Black";
  src: url("../fonts/QTHelvet-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
}

.reveal {
    font-family: "EB Garamond", serif;
}

.reveal p {
    font-family: "EB Garamond", serif;
}


.reveal h1,
.reveal h3,
.reveal h5 {
  font-family: "QTHelvet Black", sans-serif;
  letter-spacing: 0.02em;
}

.reveal h2,
.reveal h4
 {
    font-family: "EB Garamond", serif;
    font-style: italic;
    text-transform: none;
    font-weight: 400;

}

/* headings */

.reveal h3,
.reveal h4,
.reveal h5 {
}



.main-content {
    max-height: 400px;  /* Adjust height as needed */
    padding: 10px;
}


/* title slide */
#sec-title-slide .title-box {
    background: rgba(255, 255, 255, 0.3);
    padding: 40px;
    border-radius: 8px;
    /* box-shadow: 2px 4px 20px rgba(0,0,0,0.7); */
    margin: 0 auto;
    display: block;
}

#sec-title-slide .title-box hr {
    border: none;
    height: 2px;
    background-color: #ff4081;
    margin: 20px auto;
    width: 80%;
}

#sec-title-slide h2 {
    color: #363636;
    font-size: 1.8em;
}

/* header and footer simplemenu */

.menubar > ul a {
    opacity: 0.65 !important;
}

.menubar > ul li a.active, .menubar > ul li.active a {
    opacity: 1 !important;
    text-decoration: underline !important;
}

.menubar {
    position: fixed;
    font-family: "QTHelvet Black", sans-serif;
    left: 20px;
    font-size: 0.8em !important;
    opacity: 1;
    z-index: 30;
}

:root {
  --frame: 15px;
}

/* Top bar positioning */
.menubar {
    top: var(--frame);
    left: var(--frame);
    right: var(--frame);
    width: auto !important;
}

/* Bottom bar positioning */

.reveal .slides ~ .menubar {
    bottom: var(--frame);
    left: var(--frame);
    right: var(--frame);
    width: auto;
}

/* blockquote */
.reveal section blockquote {
    border: 1px solid #ccc;
    background-color: rgba(255, 180, 200, 0.85);/* ff408150 is invalid, use rgba */
    height: auto;
    padding: 20px; /* add padding so text isn’t squished */
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.2);
    border-radius: 8px; /* optional, nicer look */
    font-style: normal;
}

/* ================================
   Reveal.js photo grid
   ================================ */

/* container grid */
.photo-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
  gap: 20px; /* space between cards */
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
}

/* single centered image */
/* .img-fit { */
/*   display: flex; */
/*   justify-content: center; */
/*   align-items: center; */
/*   height: 80vh; */
/* } */
/* .img-fit img { */
/*   max-height: 100%; */
/*   max-width: 100%; */
/*   object-fit: contain; */
/* } */

.reveal section img {
  max-height: 90%;
  max-width: 90%;
  object-fit: contain;
  display: block;
  margin: auto;
}

/* images scale to fit their container */
.photo-card img {
    border: 3px solid #ff4081 ;
    object-fit: contain; /* keeps aspect ratio */
    width: 100%;       /* image fills card width */
    height: 100%;      /* maintain aspect ratio */
    max-height: 40vh; /* max 40% of viewport height */
    max-width: 20vh; /* max 40% of viewport height */

    border-radius: 8px;
    box-shadow: 2px 4px 15px rgba(0,0,0,0.3);
    display: block;
    margin: 0 auto;
}

/* captions */
.photo-card p {
  margin-top: 10px;
  font-size: 1em;
  color: #333;
}



/* flexbox layouts [clean these up!] */
.flex3070 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex3070left {
  flex: 0 0 30%; /* Fixed at 30% width */
}

.flex3070left img {
    max-width: 100%; /* Constrain image to its container width */
    max-height: 100%; /* Constrain image to its container height */
    object-fit: contain; /* Ensure the image keeps its aspect ratio */
}

.flex3070right {
    flex: 0 0 70%; /* Fixed at 70% width */
}

.flex3070right p {
    font-size: clamp(1rem, 2vw, 2rem); /* Min 1rem, responsive up to 2rem */
    word-wrap: break-word; /* Ensure long words break and fit within the container */
    overflow-wrap: break-word; /* Additional wrapping support for older browsers */
}


.white-text-slide {
    color: white !important;
}

.white-text-slide h1, .white-text-slide h2 {
    color: white !important; /* Explicit for titles */
}

.white-text-slide p {
    color: white !important; /* Explicit for paragraphs */
}

.textbox {
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  padding: 10px;
  font-size: 14px;
  text-align: left;
  width: 200px;
  height: auto;
  position: absolute; /* Position can be adjusted */
  top: 200px; /* Adjust positioning here */
  right: 0px; /* Adjust positioning here */
  z-index: 1000; /* Ensures it's above other elements */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Optional: Adds a shadow effect */
}
    
/* ================================
   Reveal.js two-column slide helpers
   ================================ */

/* Generic horizontal stack (image + text) */
.r-hstack {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2em;                /* space between columns */
  flex-wrap: nowrap;       /* prevent wrapping unless small screen */
}

/* Left and right column helpers */
.r-left30 { flex: 0 0 30%; padding-right: 1em; }
.r-left40 { flex: 0 0 40%; padding-right: 1em; }
.r-left50 { flex: 0 0 50%; padding-right: 1em; }
.r-right60 { flex: 1; }
.r-right70 { flex: 1; }

/* Images inside columns */
.r-hstack img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 65vh;        /* cap vertical size so slides fit on screen */
  object-fit: contain;
  margin: 0 auto;
  border-radius: 0.5rem;   /* optional: soften edges */
}

/* Ensure slide text doesn’t overflow */
.reveal section {
  max-height: 90vh;
  overflow: hidden;
}

/* Optional: slightly smaller text on two-column slides for readability */
.r-hstack p,
.r-hstack li {
  font-size: 0.9em;
  line-height: 1.4;
}

/* Optional aesthetic touches */
.r-hstack h3, .r-hstack h2 {
  margin-top: 0;
}