/* ---------- Hero ---------- */
/* The page title lives in the YAML (browser tab) and the hero h1; hide Quarto's own title block. */
#title-block-header { display: none; }

:root {
  /* Put the real image at images/hero.jpg (or change this path). */
  --hero-image: url("images/hero.jpg");
}

#hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100vh;
  min-height: 100svh;
  color: #fff;
  /* layers, top to bottom: dark scrim, image, gradient shown while the image is missing */
  background-image:
    linear-gradient(rgba(20, 10, 8, 0.35), rgba(20, 10, 8, 0.6)),
    var(--hero-image),
    linear-gradient(135deg, var(--bs-primary), var(--bs-secondary));
  background-size: cover;
  background-position: center;
}

#hero .hero-content { padding: 2rem 1.5rem; max-width: 60rem; }

#hero h1, #hero h2, #hero h3 {
  color: #f8f1e3;
  text-shadow: 0 2px 12px #bf8948;
  margin: 0;
  border: 0;
}
#hero h1 { font-size: clamp(2.5rem, 8vw, 5.5rem); line-height: 1.1; }
#hero h2 { font-size: clamp(2rem, 3.5vw, 2.25rem); margin-top: 1rem; font-weight: 400; }
#hero h3 { font-size: clamp(1.25rem, 3.5vw, 2.25rem); margin-top: 0.5rem; font-weight: 400; }
#hero p { color: #f8f1e3; font-size: clamp(1rem, 3.5vw, 1.5rem); margin-top: 2rem; font-weight: 400; }
#hero .anchorjs-link { display: none; }

#hero .hero-scroll {
  display: inline-block;
  margin-top: 3rem;
  font-size: 3rem;
  line-height: 1;
  color: #fff;
  text-decoration: none;
  animation: hero-bob 2.2s ease-in-out infinite;
}
@keyframes hero-bob { 50% { transform: translateY(.5rem); } }
@media (prefers-reduced-motion: reduce) { #hero .hero-scroll { animation: none; } }

/* Quarto's small "contents" toggle is redundant: wide screens always show the
   sidebar and small screens use the navbar menu. */
#quarto-sidebarnav-toggle { display: none; }

/* ---------- Navbar over the hero ---------- */
#quarto-header .navbar {
  transition: background-color .3s ease, transform .3s ease;
}
body:not(.past-hero) #quarto-header .navbar {
  background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)) !important;
  border-bottom: 0;
  box-shadow: none;
}
#quarto-header .navbar .nav-link,
#quarto-header .navbar .navbar-toggler { color: #fff; }

/* ---------- Wide screens: navbar on the hero, sidebar contents afterwards ---------- */
@media (min-width: 992px) {
  #quarto-header { transition: transform .3s ease; }
  body.past-hero #quarto-header { transform: translateY(-100%); }

  #quarto-sidebar { transition: opacity .3s ease; }
  body:not(.past-hero) #quarto-sidebar {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}