/* -----------------------------------------------------------
   NEMS Connect Brand Stylesheet
   ----------------------------------------------------------- */

/* -----------------------------------------------------------
   GLOBAL COLOR VARIABLES — your full brand palette
----------------------------------------------------------- */
:root {
  --navy-blue:  #0E3562;   /* primary */
  --teal:       #167F96;   /* secondary */
  --black:      #000000;
  --charcoal:   #7B7B7B;
  --blue-gray:  #D6E0E8;   /* lighter accent */
  --white:      #FAFAFA;

  --primary:    var(--navy-blue);
  --secondary:  var(--teal);
  --accent1:    var(--blue-gray);
  --accent2:    var(--charcoal);
  --accent3:    var(--black);
  --accent4:    var(--white);

  /* ---------- header palette ---------- */
  --header-bg:  var(--accent1);    /* lighter accent background */
  --header-fg:  var(--primary);    /* text/icons/links on header */
}

/* ---------- Header & nav: apply new palette ---------- */
header,
.site-header,
.hover,
.navbar,
.topbar {
  background-color: var(--header-bg) !important;
  color: var(--header-fg) !important;
}

/* Brand link (logo/title) in header */
header a,
.site-header a,
.hover a,
.navbar a {
  color: var(--header-fg) !important;
  text-decoration: none;
}

header a:hover,
.site-header a:hover,
.hover a:hover,
.navbar a:hover {
  color: var(--secondary) !important; /* teal hover for contrast */
}

/* Optional: thin separator under header */
header.hover {
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}

.hero,
.banner {
  background-color: var(--blue-gray) !important;
}

/* ============================
   Brand header final overrides
   ============================ */

/* Your palette (already defined earlier) */
:root {
  --navy-blue:  #0E3562;   /* primary */
  --teal:       #167F96;   /* secondary */
  --black:      #000000;
  --charcoal:   #7B7B7B;
  --blue-gray:  #D6E0E8;   /* lighter accent */
  --white:      #FAFAFA;

  --primary:    var(--navy-blue);
  --secondary:  var(--teal);
  --accent1:    var(--blue-gray);
  --accent2:    var(--charcoal);
  --accent3:    var(--black);
  --accent4:    var(--white);

  --header-bg:  var(--accent1);  /* lighter accent */
  --header-fg:  var(--primary);  /* navy text/icons */
}

/* Target the exact element the theme uses (it sets <header class="hover">) */
header.hover {
  background-color: var(--header-bg) !important;
  color: var(--header-fg) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}

/* Header links (title/brand + menu links) */
header.hover a {
  color: var(--header-fg) !important;
  text-decoration: none;
}

header.hover a:hover {
  color: var(--secondary) !important; /* teal hover */
}

/* Menu icons are inline SVG; color them explicitly */
header.hover svg,
header.hover svg * {
  fill: var(--header-fg) !important;
  stroke: var(--header-fg) !important;
}

/* If the theme applies a gradient or overlay via ::before, override it */
header.hover::before {
  background: none !important;
}

/* ============================
   Final header override (wins)
   ============================ */
:root {
  /* palette (already defined above) — repeated here is harmless */
  --navy-blue:  #0E3562;
  --teal:       #167F96;
  --blue-gray:  #D6E0E8;
  --white:      #FAFAFA;

  --primary:    var(--navy-blue);
  --secondary:  var(--teal);
  --header-bg:  var(--blue-gray); /* lighter accent background */
  --header-fg:  var(--primary);   /* navy text/icons */
}

/* If the theme styles exactly <header class="hover">, match it exactly */
header.hover {
  /* override any gradient/image/background declaration from the theme */
  background: var(--header-bg) !important;     /* replaces background-image too */
  background-image: none !important;           /* belt & suspenders */
  color: var(--header-fg) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}

/* Links in the header: unvisited, visited, hover, focus */
header.hover a,
header.hover a:visited {
  color: var(--header-fg) !important;
  text-decoration: none;
}
header.hover a:hover,
header.hover a:focus {
  color: var(--secondary) !important; /* teal hover */
}

/* SVG icons (Font Awesome inline SVG) */
header.hover svg,
header.hover svg * {
  fill: var(--header-fg) !important;
  stroke: var(--header-fg) !important;
}

/* If the theme uses an overlay via ::before or ::after, neutralize it */
header.hover::before,
header.hover::after {
  background: none !important;
  background-image: none !important;
}