/* =========================================================
   CWH Navigation + Header Styling — CLEANED
   Purpose: header, logo, search, desktop menu, dropdowns, and mobile menu only.
   Keep all page/layout/card styling out of this file.
   ========================================================= */

:root {
  --cwh-navy: #063b5c;
  --cwh-navy-dark: #042f49;
  --cwh-light-blue: #a8cfdb;
  --cwh-soft-blue: #dceef3;
  --cwh-orange: #f49a45;
  --cwh-cream: #f2eadc;
  --cwh-green: #6f8f3f;
  --cwh-text: #17384d;
  --cwh-muted: #536b78;
  --cwh-border: #b8d5df;
  --cwh-white: #ffffff;
  --cwh-max-width: 1120px;
}

/* =========================================================
   Universal Header + Main Navigation
   Applies to Canvas pages and Views/library pages.
   ========================================================= */

/* Header shell */
header[role="banner"] {
  background: var(--cwh-navy, #063b5c) !important;
  border-bottom: 0 !important;
  color: #ffffff !important;
}

header[role="banner"] > .stwl-container {
  max-width: var(--cwh-max-width, 1180px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0.75rem 1.25rem !important;
  gap: 1rem !important;
}

header[role="banner"] a[rel="home"] img {
  max-height: 58px !important;
  width: auto !important;
  display: block !important;
}

/* Hide starter-template header links and Services toggle button */
header[role="banner"] nav[aria-label="Header links"],
header[role="banner"] button[aria-controls="services-menu"] {
  display: none !important;
}

/* Fallback for absolute localhost starter-template links */
header[role="banner"] a[href$="/about"],
header[role="banner"] a[href$="/whats-on"],
header[role="banner"] a[href$="/services"] {
  display: none !important;
}

/* Header search styling */
header[role="banner"] form[role="search"] {
  margin-left: auto !important;
}

header[role="banner"] form[role="search"] input[type="search"] {
  min-width: 190px !important;
  height: 38px !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  border-radius: 999px 0 0 999px !important;
  background: #ffffff !important;
  color: var(--cwh-text, #17384d) !important;
  font-size: 0.95rem !important;
}

header[role="banner"] form[role="search"] button {
  height: 38px !important;
  width: 42px !important;
  background: var(--cwh-orange, #f49a45) !important;
  color: var(--cwh-navy, #063b5c) !important;
  border: 1px solid var(--cwh-orange, #f49a45) !important;
  border-radius: 0 999px 999px 0 !important;
}

/* Main navigation base */
#block-consistent-mainnavigation h2 {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}

#block-consistent-mainnavigation ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#block-consistent-mainnavigation a {
  display: block !important;
  text-decoration: none !important;
}

/* Desktop menu bar */
@media (min-width: 801px) {
  #services-menu {
    display: block !important;
    background: var(--cwh-navy-dark, #042f49) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.14) !important;
  }

  #services-menu > .stwl-container {
    max-width: var(--cwh-max-width, 1180px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 1.25rem !important;
  }

  #services-menu #block-consistent-mainnavigation > ul {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 1.1rem !important;
  }

  #services-menu #block-consistent-mainnavigation > ul > li {
    position: relative !important;
  }

  /* Hide accidental duplicate top-level Project Library menu item.
     It should only live under Our Work. */
  #services-menu #block-consistent-mainnavigation > ul > li:has(> a[data-drupal-link-system-path="projects"]) {
    display: none !important;
  }

  #services-menu #block-consistent-mainnavigation > ul > li > a {
    color: #ffffff !important;
    padding: 0.9rem 0 !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    line-height: 1 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
  }

  #services-menu #block-consistent-mainnavigation > ul > li > a:hover,
  #services-menu #block-consistent-mainnavigation > ul > li > a:focus,
  #services-menu #block-consistent-mainnavigation > ul > li > a.is-active,
  #services-menu #block-consistent-mainnavigation > ul > li > a[aria-current="page"] {
    color: var(--cwh-orange, #f49a45) !important;
    text-decoration: none !important;
  }

  /* Donate button */
  #services-menu #block-consistent-mainnavigation > ul > li > a[href$="/donate"] {
    background: var(--cwh-orange, #f49a45) !important;
    color: var(--cwh-navy, #063b5c) !important;
    border-radius: 999px !important;
    padding: 0.45rem 1rem !important;
    margin-left: 0.2rem !important;
  }

  #services-menu #block-consistent-mainnavigation > ul > li > a[href$="/donate"]:hover,
  #services-menu #block-consistent-mainnavigation > ul > li > a[href$="/donate"]:focus {
    background: #ffffff !important;
    color: var(--cwh-navy, #063b5c) !important;
  }

  /* Dropdowns */
  #services-menu #block-consistent-mainnavigation > ul > li > ul {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 260px !important;
    background: #ffffff !important;
    border: 1px solid var(--cwh-border, #b8d5df) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16) !important;
    padding: 0.65rem 0 !important;
    z-index: 1000 !important;
  }

  #services-menu #block-consistent-mainnavigation > ul > li:hover > ul,
  #services-menu #block-consistent-mainnavigation > ul > li:focus-within > ul {
    display: block !important;
  }

  #services-menu #block-consistent-mainnavigation > ul > li > ul > li > a {
    color: var(--cwh-navy, #063b5c) !important;
    padding: 0.65rem 1rem !important;
    white-space: nowrap !important;
    font-weight: 600 !important;
    text-transform: none !important;
    font-size: 0.95rem !important;
  }

  #services-menu #block-consistent-mainnavigation > ul > li > ul > li > a:hover,
  #services-menu #block-consistent-mainnavigation > ul > li > ul > li > a:focus,
  #services-menu #block-consistent-mainnavigation > ul > li > ul > li > a.is-active,
  #services-menu #block-consistent-mainnavigation > ul > li > ul > li > a[aria-current="page"] {
    background: var(--cwh-soft-blue, #dceef3) !important;
    color: var(--cwh-navy, #063b5c) !important;
  }
}

/* Mobile menu */
@media (max-width: 800px) {
  header[role="banner"] .stwl-desktop-nav {
    display: none !important;
  }

  header[role="banner"] .stwl-mobile-trigger {
    display: inline-flex !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 8px !important;
  }

  #mobile-menu {
    background: var(--cwh-navy-dark, #042f49) !important;
    color: #ffffff !important;
  }

  /* Hide starter-template mobile links while keeping the real Drupal menu block */
  #mobile-menu > .stwl-container > nav[aria-label="Main navigation"] {
    display: none !important;
  }

  #mobile-menu .pt-2,
  #mobile-menu #block-consistent-mainnavigation {
    display: block !important;
  }

  #mobile-menu #block-consistent-mainnavigation > ul {
    display: block !important;
  }

  #mobile-menu #block-consistent-mainnavigation a {
    color: #ffffff !important;
    padding: 0.75rem 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
    font-weight: 700 !important;
  }

  #mobile-menu #block-consistent-mainnavigation ul ul {
    padding-left: 1rem !important;
  }

  #mobile-menu #block-consistent-mainnavigation ul ul a {
    font-weight: 500 !important;
    font-size: 0.92rem !important;
    opacity: 0.95 !important;
  }
}