/* Restyles Kadence's own header markup to match the site's established
   sign-language palette -- this doesn't touch Kadence's header behaviour
   (mobile menu, sticky/transparent options, etc.), just its colours and
   type, so switching Kadence header options later still works normally.

   Loaded site-wide (every page), unlike the map/single-post stylesheets
   which are scoped to specific templates -- the header appears
   everywhere, so this has to as well. */

:root {
  --waws-asphalt: #1C1E22;
  --waws-asphalt-soft: #33363D;
  --waws-motorway-blue: #00539E;
  --waws-chevron-amber: #F2A900;
  --waws-sign-white: #FFFFFF;
}

.site-header,
#masthead {
  background: var(--waws-asphalt) !important;
  border-bottom: 3px solid var(--waws-motorway-blue);
}

.site-title,
.site-title a {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--waws-sign-white) !important;
}

.site-description {
  color: #9AA0A6 !important;
  font-size: 13px;
}

.main-navigation a,
.kadence-navigation a,
#site-navigation a {
  color: var(--waws-sign-white) !important;
  font-weight: 600;
}

.main-navigation a:hover,
.kadence-navigation a:hover,
#site-navigation a:hover,
.main-navigation .current-menu-item > a,
.kadence-navigation .current-menu-item > a {
  color: var(--waws-chevron-amber) !important;
}

/* mobile menu toggle icon, if Kadence's default markup is in play */
.menu-toggle-open,
.menu-toggle-close,
button.menu-toggle {
  color: var(--waws-sign-white) !important;
}

/* The mobile menu almost certainly opens as a separate drawer/panel, not
   just the desktop nav bar reflowing -- and that panel likely has its
   own (probably light/white) background by default. Forcing nav links
   to white text without also covering this would make them invisible
   there, not just unstyled. Several plausible Kadence container class
   names are covered here since the exact one isn't confirmed without
   live inspection -- harmless if some don't match, important if one does. */
.mobile-menu-container,
#mobile-menu-container,
.slideout-navigation,
.slideout-menu,
.popup-mobile-menu,
.mobile-nav-wrap,
.fl-mobile-nav {
  background: var(--waws-asphalt) !important;
}