/**
 * Shared top bar: primary #0949AF, white navigation text.
 * Use on any page with <header class="site-header">…</header>
 */
header.site-header {
  width: 100% !important;
  box-sizing: border-box !important;
  background: #0949AF !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.14) !important;
  /* Match index.html horizontal padding (overrides older pages’ 20px inline) */
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* ----- Toolbar row: logo | centered nav | Join + menu (same as index) ----- */
header.site-header > .header-bar-inner,
header.site-header > .site-header-inner,
header.site-header > div:first-of-type {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 80px !important;
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  gap: 12px !important;
}

header.site-header > .header-bar-inner > div:first-of-type,
header.site-header > .site-header-inner > div:first-of-type,
header.site-header > div:first-of-type > div:first-of-type {
  flex-shrink: 0 !important;
  min-width: 0 !important;
}

header.site-header > .header-bar-inner > div:first-of-type a,
header.site-header > .site-header-inner > div:first-of-type a,
header.site-header > div:first-of-type > div:first-of-type a {
  display: inline-block !important;
}

header.site-header > .header-bar-inner > div:first-of-type img,
header.site-header > .site-header-inner > div:first-of-type img,
header.site-header > div:first-of-type > div:first-of-type img {
  height: 60px !important;
  width: auto !important;
  max-height: 56px !important;
  max-width: min(148px, 38vw) !important;
  object-fit: contain !important;
}

/* Desktop only: must not apply on small screens or it overrides mobile hide (higher specificity than #nav-links). */
@media (min-width: 769px) {
  header.site-header nav#nav-links {
    display: flex !important;
    align-items: center !important;
    gap: 40px !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
    min-width: 0 !important;
    flex-wrap: nowrap !important;
  }
}

header.site-header .header-bar-end {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

/* Pages without .header-bar-end: pin controls to the right */
header.site-header > div:first-of-type > nav#nav-links + #join-btn,
header.site-header > div:first-of-type > nav#nav-links + #mobile-menu-btn {
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

header.site-header > div:first-of-type > nav#nav-links + #join-btn + #mobile-menu-btn {
  margin-left: 0 !important;
}

@media (max-width: 768px) {
  header.site-header nav#nav-links {
    display: none !important;
  }

  header.site-header #mobile-menu-btn {
    display: flex !important;
  }

  header.site-header .header-bar-inner,
  header.site-header .site-header-inner,
  header.site-header > div:first-of-type {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
}

header.site-header:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18) !important;
}

/* Top-level nav links + dropdown toggles */
header.site-header #nav-links > div > a,
header.site-header #nav-links .dropdown-toggle {
  color: #ffffff !important;
}

header.site-header #nav-links > div > a:hover,
header.site-header #nav-links .dropdown-toggle:hover {
  color: rgba(255, 255, 255, 0.88) !important;
}

header.site-header #nav-links .nav-link.active {
  color: #ffffff !important;
}

header.site-header #nav-links .nav-link.active > span[style*="height: 2px"] {
  background: #ffffff !important;
}

/* Primary / CTA in header bar */
header.site-header #join-btn {
  background: #ffffff !important;
  color: #0949AF !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

header.site-header a#join-btn[href] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

header.site-header #join-btn:hover {
  background: #f1f5ff !important;
  color: #0949AF !important;
}

header.site-header .header-back-btn,
header.site-header .back-btn {
  background: #ffffff !important;
  color: #0949AF !important;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

header.site-header .header-back-btn:hover,
header.site-header .back-btn:hover {
  background: #f1f5ff !important;
  color: #073a8c !important;
}

/* Hamburger */
header.site-header #mobile-menu-btn span {
  background: #ffffff !important;
}

/* index.html animated underlines */
header.site-header #nav-links a::after,
header.site-header #join-btn::after {
  background: rgba(255, 255, 255, 0.95) !important;
}

header.site-header #join-btn:hover {
  box-shadow: 0 5px 18px rgba(9, 73, 175, 0.35) !important;
}

/* ========== Site footer: primary #0949AF, light text (matches header bar) ========== */
footer.site-footer {
  background: linear-gradient(180deg, #0949af 0%, #073a8c 100%) !important;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.12) !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

footer.site-footer h3 {
  color: #ffffff !important;
}

footer.site-footer > div > div:first-child p {
  color: rgba(255, 255, 255, 0.88) !important;
}

footer.site-footer a[href] {
  color: rgba(255, 255, 255, 0.9) !important;
}

footer.site-footer a[href]:hover {
  color: #ffffff !important;
}

footer.site-footer #contact-info,
footer.site-footer #contact-info span {
  color: rgba(255, 255, 255, 0.9) !important;
}

footer.site-footer #contact-info a {
  color: rgba(255, 255, 255, 0.95) !important;
}

footer.site-footer #contact-info i {
  color: #ffffff !important;
}

footer.site-footer #footer-courses-list a {
  color: rgba(255, 255, 255, 0.9) !important;
}

footer.site-footer #footer-courses-list p {
  color: rgba(255, 255, 255, 0.65) !important;
}

footer.site-footer #social-media-links a {
  background: rgba(255, 255, 255, 0.18) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

footer.site-footer #social-media-links a::after {
  display: none !important;
}

footer.site-footer #social-media-links a:hover {
  background: rgba(255, 255, 255, 0.32) !important;
  transform: translateY(-2px);
}

footer.site-footer hr {
  border-top-color: rgba(255, 255, 255, 0.28) !important;
}

footer.site-footer > div > div:last-child > p {
  color: rgba(255, 255, 255, 0.78) !important;
}

footer.site-footer > div > div:last-child span {
  color: rgba(255, 255, 255, 0.4) !important;
}

footer.site-footer #subscribe-email {
  background: rgba(255, 255, 255, 0.97) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
  color: #1f2631 !important;
}

footer.site-footer #subscribe-btn {
  background: #ffffff !important;
  color: #0949af !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18) !important;
}

footer.site-footer #subscribe-btn:hover {
  background: #f1f5ff !important;
  color: #073a8c !important;
}

/* Agency credit in main footer (replaces separate black credits bar) */
footer.site-footer a.footer-credits-voxen {
  color: #ff7900 !important;
  font-weight: 600;
  text-decoration: none;
}

footer.site-footer a.footer-credits-voxen:hover {
  color: #ff9933 !important;
  text-decoration: underline;
}

/* ----- Mobile drawer: hide main header + solid stacking (no blue bar beside menu) ----- */
@media (max-width: 768px) {
  body:has(#drawer.open) {
    overflow: hidden;
  }

  body:has(#drawer.open) header.site-header {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body:has(#drawer.open) #drawer-overlay.show {
    z-index: 5000 !important;
  }

  body:has(#drawer.open) #drawer {
    z-index: 5010 !important;
  }
}