/**
 * Overlay header for the Hero Video page template.
 *
 * Positions the site header over full-bleed hero content (video or slideshow covers).
 * Responsive sizing is handled here because the default header is a pattern
 * reference and does not expose per-breakpoint controls in the editor.
 */

.sanc-hero-shell {
  position: relative;

  /* Tune logo sizing here. Fluid by default; override per breakpoint below. */
  --sanc-header-padding-block: var(--wp--preset--spacing--30, 1.5rem);
  --sanc-header-padding-inline: var(--wp--preset--spacing--50, 2rem);
  --sanc-header-title-size: clamp(1.25rem, 2.5vw, 1.75rem);
  --sanc-header-logo-width: clamp(72px, 16vw, 160px);
  --sanc-header-nav-size: clamp(0.875rem, 1.5vw, 1rem);
}

.sanc-site-header--overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  background: transparent;
  pointer-events: none;
}

.sanc-site-header--overlay .sanc-header-overlay,
.sanc-site-header--overlay .sanc-header-overlay.alignfull {
  width: 100%;
  max-width: none;
}

.sanc-site-header--overlay .wp-block-group,
.sanc-site-header--overlay .wp-block-navigation {
  pointer-events: auto;
}

/*
 * Header row layout. Targets custom classes and WordPress layout classes so
 * this works on the frontend even when Site Editor DB copies drop custom names.
 */
.sanc-site-header--overlay .sanc-header-overlay__bar,
.sanc-site-header--overlay .sanc-header-overlay > .alignwide,
.sanc-site-header--overlay .alignwide.is-layout-flex {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}

.sanc-site-header--overlay .sanc-header-overlay__bar > :last-child,
.sanc-site-header--overlay .sanc-header-overlay > .alignwide > :last-child,
.sanc-site-header--overlay .alignwide.is-layout-flex > :last-child {
  margin-inline-start: auto !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
}

.sanc-site-header--overlay .sanc-header-overlay__nav,
.sanc-site-header--overlay .wp-block-navigation.sanc-header-overlay__navigation,
.sanc-site-header--overlay .alignwide.is-layout-flex > .wp-block-navigation {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  margin-inline-start: auto !important;
  --navigation-layout-justify: flex-end;
}

.sanc-site-header--overlay .wp-block-navigation__container {
  justify-content: flex-end !important;
}

.sanc-header-overlay__bar {
  padding-top: var(--sanc-header-padding-block) !important;
  padding-bottom: var(--sanc-header-padding-block) !important;
  padding-left: var(--sanc-header-padding-inline);
  padding-right: var(--sanc-header-padding-inline);
}

.sanc-header-overlay__nav {
  flex-shrink: 0;
  margin-inline-start: auto;
}

.sanc-header-overlay__title {
  font-size: var(--sanc-header-title-size);
  line-height: 1.2;
}

/*
 * Logo sizing for Site Logo or Image blocks with class sanc-header-overlay__logo.
 * Selectors intentionally avoid .sanc-header-overlay__bar — that class is often
 * missing from Site Editor customizations saved to the database.
 */
figure.wp-block-image.sanc-header-overlay__logo,
.sanc-site-header--overlay figure.sanc-header-overlay__logo,
.sanc-site-header--overlay .sanc-header-overlay__logo,
.sanc-hero-shell figure.sanc-header-overlay__logo,
.sanc-hero-shell .sanc-header-overlay__logo {
  flex-shrink: 0;
  width: var(--sanc-header-logo-width, clamp(72px, 12vw, 120px));
  max-width: var(--sanc-header-logo-width, clamp(72px, 12vw, 120px));
  margin: 0;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

figure.wp-block-image.sanc-header-overlay__logo a,
.sanc-site-header--overlay .sanc-header-overlay__logo a,
.sanc-hero-shell .sanc-header-overlay__logo a {
  display: block;
  width: 100%;
  line-height: 0;
}

figure.wp-block-image.sanc-header-overlay__logo img,
.sanc-site-header--overlay .sanc-header-overlay__logo img,
.sanc-hero-shell .sanc-header-overlay__logo img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  display: block;
}

.sanc-header-overlay__navigation .wp-block-navigation-item__content {
  font-size: var(--sanc-header-nav-size);
}

/* Light header text over dark video backgrounds. */
.sanc-hero-shell .wp-block-site-title a,
.sanc-hero-shell .wp-block-navigation-item__content,
.sanc-hero-shell .wp-block-navigation__responsive-container-open {
  color: #fff;
}

.sanc-hero-shell .wp-block-navigation__responsive-container-open svg {
  fill: #fff;
}

.sanc-hero-shell .wp-block-site-title a:hover,
.sanc-hero-shell .wp-block-navigation-item__content:hover {
  color: rgba(255, 255, 255, 0.85);
}

/* Tablet */
@media (max-width: 782px) {
  .sanc-hero-shell {
    --sanc-header-padding-block: var(--wp--preset--spacing--20, 1rem);
    --sanc-header-padding-inline: var(--wp--preset--spacing--40, 1.5rem);
    --sanc-header-title-size: clamp(1.125rem, 4vw, 1.375rem);
    --sanc-header-nav-size: 0.9375rem;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .sanc-hero-shell {
    --sanc-header-padding-block: var(--wp--preset--spacing--10, 0.75rem);
    --sanc-header-padding-inline: var(--wp--preset--spacing--30, 1rem);
    --sanc-header-title-size: 1.125rem;
  }
}