/* ==========================================================================
   Hero component
   Fullwidth hero with optional slideshow background.
   Holds a .content block for the overlay (logo/eyebrow + h1 + optional cta).
   ========================================================================== */

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--wp--preset--color--off-white);
  --btn-color: var(--wp--preset--color--off-white);
  --focus-ring-color: var(--wp--preset--color--white);
  background-size: cover;
  background-position: center top;
}

/* Background-image position variants (follow background-position x y order). */
.hero.center-top {
  background-position: center top;
}

.hero.center-center {
  background-position: center center;
}

/* --- Content (sits above slides + tint) --- */

.hero .content {
  max-width: var(--mw-text-md);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero .content svg {
  display: block;
  height: 3em;
  width: auto;
}

.hero .content h1 {
  text-transform: uppercase;
  font-family: var(--h1-font-family);
  font-weight: var(--h1-font-weight);
  font-style: var(--h1-font-style);
  letter-spacing: var(--h1-letter-spacing);
  line-height: var(--h1-line-height);
}

/* Gaps between siblings, as margin on the trailing child */
.hero .content svg + h1 {
  margin-top: var(--s-4);
}
.hero .content p + h1 {
  margin-top: var(--s-16);
}
.hero .content h1 + :is(a, button, .btn) {
  margin-top: var(--s-48);
}

/* --- Slides layer (background) --- */

.hero > .images {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero .image {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  background-size: cover;
  background-position: center;
}

.hero .image.is-active {
  opacity: 1;
}

/* --- Tint overlay (applies to all hero variants) --- */

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--wp--preset--color--warm-brown);
  opacity: 0.4;
  z-index: 1;
  pointer-events: none;
}

/* --- Short hero for sub-pages (70vh instead of 100vh) --- */

.hero.short {
  height: 70vh;
  background-color: var(--wp--preset--color--warm-brown);
}

/* --- Logo-only hero for utility pages ----------------------------------- */

.hero.logo {
  height: 70vh;
  background-color: var(--wp--preset--color--warm-brown);
}

.hero.logo .content svg {
  height: 6em;
  color: var(--wp--preset--color--off-white);
}

.hero.logo .content h1:empty {
  display: none;
}