/* ==================================================
   EPC Near Me — site header, high-impact enm redesign
   Applied site-wide over the Astra header markup.
   ================================================== */

/* Top bar: slim, near-black green, accent contact */
.ast-above-header {
  background: #02190F !important;
  min-height: 42px !important;
  line-height: 42px !important;
}
.ast-above-header .ast-header-html,
.ast-above-header .ast-builder-html-element,
.ast-above-header .ast-builder-html-element * {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 13.5px !important;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.ast-above-header .ast-builder-button-wrap .menu-link,
.ast-above-header a.menu-link {
  background: transparent !important;
  border: none !important;
  color: #4ade80 !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  padding: 0 !important;
}
.ast-above-header a.menu-link:hover {
  color: #fff !important;
}
.ast-above-header .header-social-item svg,
.ast-above-header .header-social-item path {
  fill: rgba(255, 255, 255, 0.65) !important;
}
.ast-above-header .header-social-item:hover svg,
.ast-above-header .header-social-item:hover path {
  fill: #4ade80 !important;
}

/* Main header: deep green gradient with an accent baseline */
.main-header-bar,
.ast-primary-header-bar {
  background: linear-gradient(180deg, #032015 0%, #043D24 100%) !important;
  border-bottom: none !important;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.ast-primary-header-bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, #25C146 0%, #4ade80 55%, rgba(74, 222, 128, 0) 100%);
}
.ast-primary-header-bar .site-logo-img img,
.main-header-bar .custom-logo {
  transition: transform 0.15s ease;
}
.site-branding a:hover img,
.ast-site-identity a:hover img {
  transform: scale(1.04);
}

/* Nav links: clean pills with accent hover */
.main-header-menu .menu-item > .menu-link,
.ast-builder-menu .main-header-menu .menu-link {
  color: rgba(255, 255, 255, 0.92) !important;
  font-weight: 800 !important;
  font-size: 14.5px !important;
  letter-spacing: 0.6px;
  border-radius: 10px;
  padding: 10px 14px !important;
  transition: background 0.15s ease, color 0.15s ease;
}
.main-header-menu .menu-item > .menu-link:hover,
.main-header-menu .menu-item.focus > .menu-link {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #fff !important;
}
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current_page_item > .menu-link {
  color: #4ade80 !important;
  background: rgba(74, 222, 128, 0.10) !important;
}

/* Last item (CPD Store) as a filled CTA pill */
.main-header-menu > .menu-item:last-child > .menu-link {
  background: #25C146 !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}
.main-header-menu > .menu-item:last-child > .menu-link:hover {
  background: #31D957 !important;
  color: #fff !important;
}

/* Dropdown (EPC Register) panel */
.main-header-menu .sub-menu {
  background: #032015 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35) !important;
}
.main-header-menu .sub-menu .menu-link {
  color: rgba(255, 255, 255, 0.88) !important;
  border-radius: 0;
}
.main-header-menu .sub-menu .menu-link:hover {
  background: rgba(74, 222, 128, 0.12) !important;
  color: #4ade80 !important;
}

/* Mobile trigger keeps brand colours */
.ast-mobile-menu-trigger-fill,
.ast-header-mobile-trigger .ast-button-wrap .mobile-menu-toggle-icon {
  background: transparent !important;
  color: #4ade80 !important;
}

/* Top bar links (phone number): no underline, brand accent */
.ast-above-header a,
.ast-above-header .ast-header-html a,
.ast-above-header .ast-builder-html-element a {
  color: #4ade80 !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  border-bottom: none !important;
}
.ast-above-header a:hover,
.ast-above-header .ast-header-html a:hover {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Constrain header content to the site container (bars stay full width) */
#masthead .ast-builder-grid-row,
.ast-above-header-wrap .ast-builder-grid-row,
.ast-main-header-wrap .ast-builder-grid-row {
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
  box-sizing: border-box;
}

/* Refine: constrain at the container level so sections align with the hero */
#masthead .ast-builder-grid-row,
.ast-above-header-wrap .ast-builder-grid-row,
.ast-main-header-wrap .ast-builder-grid-row {
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#masthead .ast-container {
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
  box-sizing: border-box;
}
#masthead .site-header-section-left { justify-content: flex-start !important; }
#masthead .ast-grid-right-section { justify-content: flex-end !important; }

/* Distribute header sections to the container edges */
#masthead .ast-builder-grid-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100%;
}
#masthead .ast-builder-grid-row > .site-header-section {
  flex: 0 0 auto !important;
}

/* Mobile menu: dark panel so links stay readable */
.ast-mobile-popup-drawer .ast-mobile-popup-inner,
.ast-mobile-popup-content,
.ast-mobile-header-content,
.ast-header-break-point .main-header-bar-navigation,
.ast-header-break-point .main-header-menu {
  background: #032015 !important;
}
.ast-mobile-popup-drawer .menu-link,
.ast-mobile-popup-drawer .menu-item > .menu-link,
.ast-mobile-header-content .menu-link,
.ast-header-break-point .main-header-menu .menu-link {
  color: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}
.ast-mobile-popup-drawer .menu-link:hover,
.ast-mobile-popup-drawer .current-menu-item > .menu-link {
  color: #4ade80 !important;
  background: rgba(74, 222, 128, 0.10) !important;
}
.ast-mobile-popup-drawer .sub-menu {
  background: #02190F !important;
}
.ast-mobile-popup-drawer .ast-menu-toggle,
.ast-mobile-popup-drawer .menu-toggle-close,
.ast-mobile-popup-drawer .ast-mobile-popup-header .menu-toggle-close {
  color: #fff !important;
}
.ast-mobile-popup-drawer .ast-menu-toggle svg,
.ast-mobile-popup-drawer .menu-toggle-close svg {
  fill: #fff !important;
}

/* Current-page nav state: accent text only, no background pill
   (also clears the false-positive highlight on About) */
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current_page_item > .menu-link,
.main-header-menu .current-menu-ancestor > .menu-link,
.main-header-menu .current_page_parent > .menu-link {
  background: transparent !important;
  color: #4ade80 !important;
}

/* CPD Store CTA: toned-down green */
.main-header-menu > .menu-item:last-child > .menu-link {
  background: #157A33 !important;
  color: #fff !important;
}
.main-header-menu > .menu-item:last-child > .menu-link:hover {
  background: #25C146 !important;
}

/* Uniform nav: all links white (no green current state), CPD Store like the rest */
.main-header-menu .menu-item > .menu-link,
.main-header-menu .current-menu-item > .menu-link,
.main-header-menu .current_page_item > .menu-link,
.main-header-menu .current-menu-ancestor > .menu-link,
.main-header-menu .current_page_parent > .menu-link {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.92) !important;
}
.main-header-menu > .menu-item:last-child > .menu-link {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.92) !important;
  box-shadow: none !important;
}
.main-header-menu .menu-item > .menu-link:hover,
.main-header-menu > .menu-item:last-child > .menu-link:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #fff !important;
}

/* Logo flush to the container's left edge */
#masthead .site-branding,
#masthead .ast-site-identity,
#masthead .site-header-section-left {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Mobile: let the header wrap and shrink (desktop-only containment above) */
@media (max-width: 921px) {
  #masthead .ast-builder-grid-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    max-width: 100% !important;
  }
  #masthead .ast-builder-grid-row > .site-header-section {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  #masthead .ast-container {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Hard viewport caps on mobile: nothing may exceed the screen */
@media (max-width: 921px) {
  .hfeed.site,
  body,
  #masthead,
  #masthead .ast-above-header-wrap,
  #masthead .ast-main-header-wrap {
    max-width: 100vw !important;
    overflow-x: clip !important;
  }
  #masthead .ast-builder-grid-row {
    max-width: 100vw !important;
  }
  #masthead .ast-builder-grid-row > .site-header-section {
    flex: 1 1 100% !important;
    justify-content: center !important;
  }
  .ast-above-header .ast-builder-html-element,
  .ast-above-header .ast-header-html {
    text-align: center !important;
  }
}

/* Align header container exactly with the page content gutter */
@media (min-width: 922px) {
  #masthead .ast-container {
    max-width: 1120px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* Mobile header: logo top-left, menu trigger right (classic layout) */
@media (max-width: 921px) {
  #masthead .ast-builder-grid-row {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  #masthead .ast-builder-grid-row > .site-header-section {
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }
  #masthead .site-header-primary-section-left,
  #masthead .site-header-above-section-left {
    justify-content: flex-start !important;
  }
  #masthead .site-header-primary-section-right,
  #masthead .site-header-above-section-right {
    justify-content: flex-end !important;
  }
  #masthead .site-branding img,
  #masthead .custom-logo {
    max-width: 120px !important;
    height: auto !important;
  }
  .ast-above-header .ast-builder-html-element,
  .ast-above-header .ast-header-html {
    text-align: left !important;
  }
}