:root{
  --front-header-h: 88px; /* adjust */
}

/* Sticky header container */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;

  background-color: transparent;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.site-header.is-scrolled{
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* Pull the hero up behind the header */
.hero-cover{
  margin-top: calc(-1 * var(--front-header-h));
  padding-top: var(--front-header-h);
}

/* Target header text elements (avoid * so you don't affect Cover text) */
.site-header :is(a, p, span, li, h1, h2, h3, h4, h5, h6){
  color: #ffffff;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.site-header.is-scrolled :is(a, p, span, li, h1, h2, h3, h4, h5, h6){
  color: #111111;
}/*111111*/

/* Text shadow only when not scrolled (header only) */
.site-header:not(.is-scrolled) :is(a, p, span, li, h1, h2, h3, h4, h5, h6){
  text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}

.site-header.is-scrolled :is(a, p, span, li, h1, h2, h3, h4, h5, h6){
  text-shadow: none;
}

/* SVG icons follow text color */
.site-header svg{
  fill: currentColor;
  transition: fill 0.3s ease;
}

/* Image blocks in header: drop shadow when not scrolled */
.site-header:not(.is-scrolled) .wp-block-image img{
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.55));
  transition: filter 0.3s ease;
}

/* When scrolled: darken header images (logo) */
.site-header.is-scrolled .wp-block-image img{
  filter: brightness(0) saturate(100%);
}

/*fix "shadow-text" class breaking when applied to text on hero-cover class objects*/
.shadow-text,
.shadow-text *{
  text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}


/* ===== Dropdown (submenu) styling to match transparent vs scrolled header ===== */

/* Common submenu container targets (theme-dependent) */
.site-header .wp-block-navigation__submenu-container,
.site-header .wp-block-navigation .sub-menu,
.site-header .wp-block-page-list .sub-menu{
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,0.18);
}

/* BEFORE scroll: dark dropdown panel so white text is readable */
.site-header:not(.is-scrolled) .wp-block-navigation__submenu-container,
.site-header:not(.is-scrolled) .wp-block-navigation .sub-menu,
.site-header:not(.is-scrolled) .wp-block-page-list .sub-menu{
  background: rgba(15, 18, 22, 0.92) !important;
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* BEFORE scroll: submenu link colors (explicit) */
.site-header:not(.is-scrolled) .wp-block-navigation__submenu-container a,
.site-header:not(.is-scrolled) .wp-block-navigation .sub-menu a,
.site-header:not(.is-scrolled) .wp-block-page-list .sub-menu a{
  color: #ffffff;
  text-shadow: none; /* optional: cleaner inside dropdown */
}

/* BEFORE scroll: hover/focus */
.site-header:not(.is-scrolled) .wp-block-navigation__submenu-container a:hover,
.site-header:not(.is-scrolled) .wp-block-navigation__submenu-container a:focus,
.site-header:not(.is-scrolled) .wp-block-navigation .sub-menu a:hover,
.site-header:not(.is-scrolled) .wp-block-navigation .sub-menu a:focus{
  background: rgba(255,255,255,0.10) !important;
}

/* AFTER scroll: light dropdown panel to match white header */
.site-header.is-scrolled .wp-block-navigation__submenu-container,
.site-header.is-scrolled .wp-block-navigation .sub-menu,
.site-header.is-scrolled .wp-block-page-list .sub-menu{
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* AFTER scroll: submenu links dark */
.site-header.is-scrolled .wp-block-navigation__submenu-container a,
.site-header.is-scrolled .wp-block-navigation .sub-menu a,
.site-header.is-scrolled .wp-block-page-list .sub-menu a{
  color: #111111;
}

/* AFTER scroll: hover/focus */
.site-header.is-scrolled .wp-block-navigation__submenu-container a:hover,
.site-header.is-scrolled .wp-block-navigation__submenu-container a:focus,
.site-header.is-scrolled .wp-block-navigation .sub-menu a:hover,
.site-header.is-scrolled .wp-block-navigation .sub-menu a:focus{
  background: rgba(0,0,0,0.05) !important;
}



/* ===== One header paragraph with inverted background ===== */
/*phone number background*/
/* Top of page (header transparent) */
.site-header .invert-header-bg{
  background-color: #FFFFFF4A;
  padding: 0.25em 0.5em;        /* adjust to taste */
  border-radius: 4px;          /* optional */
  transition: background-color 0.3s ease;
}

/* After scroll (header solid white) */
.site-header.is-scrolled .invert-header-bg{
  background-color: #FFF7509E;
}

/* Treat mobile-menu-open the same as scrolled for invert-header-bg */
body:has(#mobile-menu.is-open) .site-header .invert-header-bg{
  background-color: #FFF7509E;
}


/*mobile menu*/
/* ===== FORCE header to "scrolled" look when mobile menu is open ===== */
body:has(#mobile-menu.is-open) .site-header{
  background-color: rgba(255, 255, 255, 1);
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* Force header text dark while menu is open */
body:has(#mobile-menu.is-open) .site-header :is(a, p, span, li, h1, h2, h3, h4, h5, h6){
  color: #111111;
  text-shadow: none;
}

/* Force header logo/image styling to match scrolled state while menu open */
body:has(#mobile-menu.is-open) .site-header .wp-block-image img{
  filter: brightness(0) saturate(100%);
}

/* SVG icons follow currentColor already, but keep it explicit */
body:has(#mobile-menu.is-open) .site-header svg{
  fill: currentColor;
}