/* ============================================================
   HEADER & NAVIGATION
   ============================================================ */

/* Fixed transparent header on top of hero */
.site-header,
#masthead {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  background: rgba(10, 46, 54, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid rgba(78, 205, 196, 0.2) !important;
  box-shadow: none !important;
  transition: background 0.4s ease,
              border-color 0.4s ease,
              box-shadow 0.4s ease !important;
}

/* Scrolled state — fades to solid */
.mf-scrolled.site-header,
.mf-scrolled#masthead,
#masthead.mf-scrolled {
  background: rgba(10, 46, 54, 0.98) !important;
  border-bottom: 3px solid var(--color-secondary) !important;
  box-shadow: 0 2px 20px rgba(10, 46, 54, 0.4) !important;
}

/* Site title */
.site-title a,
.ast-site-name-wrap a {
  font-family: var(--font-accent) !important;
  color: var(--color-white) !important;
  font-size: 1.4rem !important;
  font-weight: 700 !important;
}

/* Tagline */
.ast-site-tagline,
.site-description {
  font-family: var(--font-accent);
  color: var(--color-seafoam) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Logo */
.ast-site-logo-img,
.custom-logo {
  max-height: 60px !important;
  width: auto !important;
}

/* Primary nav links */
.main-navigation a,
.ast-main-navigation a,
#site-navigation a {
  font-family: var(--font-accent) !important;
  color: var(--color-mist) !important;
  font-weight: 600 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.03em !important;
  text-transform: uppercase;
  padding: 8px 10px !important;
  transition: color 0.25s, background 0.25s;
  border-radius: var(--radius-sm);
}

/* Nav hover & active */
.main-navigation a:hover,
.ast-main-navigation a:hover,
.main-navigation .current-menu-item > a,
.ast-main-navigation .current-menu-item > a {
  color: var(--color-accent) !important;
  background: rgba(78, 205, 196, 0.1) !important;
}

/* Dropdown menus */
.main-navigation .sub-menu,
.ast-main-navigation .sub-menu {
  background: var(--color-ocean-mid) !important;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-deep);
  padding: 8px 0;
}

.main-navigation .sub-menu a,
.ast-main-navigation .sub-menu a {
  color: var(--color-mist) !important;
  padding: 10px 20px !important;
}

.main-navigation .sub-menu a:hover,
.ast-main-navigation .sub-menu a:hover {
  background: var(--color-primary) !important;
  color: var(--color-white) !important;
}

/* Mobile hamburger */
button.menu-toggle.main-header-menu-toggle.ast-mobile-menu-trigger-minimal,
button.menu-toggle.main-header-menu-toggle.ast-mobile-menu-trigger-minimal span,
button.menu-toggle.main-header-menu-toggle.ast-mobile-menu-trigger-minimal svg,
button.menu-toggle.main-header-menu-toggle.ast-mobile-menu-trigger-minimal path {
  color: var(--color-white) !important;
  fill: var(--color-white) !important;
}

/* Mobile menu dropdown */
@media (max-width: 768px) {
  .main-navigation .menu,
  .ast-main-navigation .menu {
    background: rgba(10, 46, 54, 0.98) !important;
    border-top: 2px solid var(--color-primary);
    padding: 12px 0;
  }

  .main-navigation a,
  .ast-main-navigation a {
    padding: 12px 20px !important;
    border-radius: 0 !important;
  }
}

/* ============================================================
   HEADER — full width background, constrained inner content
   ============================================================ */
.ast-header-wrap,
.ast-main-header-wrap,
.main-header-bar,
.ast-primary-header-bar,
.ast-primary-header-bar.ast-container,
.site-primary-header-wrap,
#masthead .ast-container,
.ast-builder-grid-row-container.ast-container {
  max-width: 1152px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: transparent !important;
}

/* Prevent white page background showing behind fixed header */
html, body {
  background-color: var(--color-white-wave) !important;
}

/* ============================================================
   REMOVE WHITE LINE UNDER HEADER
   ============================================================ */
.site-header,
#masthead,
.main-header-bar,
.ast-primary-header-bar {
  border-bottom: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.main-header-bar::after,
.ast-primary-header-bar::after,
#masthead::after {
  display: none !important;
  content: none !important;
}

/* ============================================================
   HEADER GRID ROW — space logo and nav to opposite edges
   ============================================================ */
.ast-builder-grid-row.ast-builder-grid-row-has-sides {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}

.site-header-primary-section-left {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.site-header-primary-section-right {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex: 1 !important;
  margin-left: auto !important;
}

/* ============================================================
   MOBILE MENU — BACKGROUND & TEXT COLOR FIX
   ============================================================ */
#ast-hf-mobile-menu ul.main-header-menu.ast-nav-menu {
  background: rgba(10, 46, 54, 0.98) !important;
  border-top: 2px solid var(--color-accent) !important;
  padding: 8px 0 !important;
}

#ast-hf-mobile-menu ul.main-header-menu.ast-nav-menu li {
  background: transparent !important;
  border-bottom: 1px solid rgba(78, 205, 196, 0.15) !important;
}

html body #ast-hf-mobile-menu ul.main-header-menu.ast-nav-menu li a.menu-link,
html body #ast-hf-mobile-menu ul.main-header-menu li a,
html body #ast-hf-mobile-menu a {
  /*color: var(--color-mist) !important;*/
  text-decoration: none !important;
  font-family: var(--font-accent) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 14px 20px !important;
  display: block !important;
}

/*html body #ast-hf-mobile-menu ul.main-header-menu.ast-nav-menu li a.menu-link:hover,*/
/*html body #ast-hf-mobile-menu a:hover {*/
/*  color: var(--color-accent) !important;*/
/*  background: rgba(78, 205, 196, 0.1) !important;*/
/*  text-decoration: none !important;*/
/*}*/

/*html body #ast-hf-mobile-menu ul.main-header-menu.ast-nav-menu li.current-menu-item a,*/
/*html body #ast-hf-mobile-menu ul.main-header-menu.ast-nav-menu li.current-menu-item a.menu-link {*/
/*  color: var(--color-accent) !important;*/
/*}*/

/* ============================================================
   MOBILE MENU — FORCE DARK BACKGROUND
   ============================================================ */
.ast-header-break-point #ast-hf-mobile-menu,
.ast-header-break-point #ast-hf-mobile-menu ul,
.ast-header-break-point #ast-hf-mobile-menu ul.main-header-menu,
.ast-header-break-point .main-header-menu.ast-nav-menu,
.ast-header-break-point .ast-nav-menu,
.ast-mobile-header-wrap #ast-hf-mobile-menu ul {
  background: rgba(10, 46, 54, 0.98) !important;
  background-color: rgba(10, 46, 54, 0.98) !important;
}

/*.ast-header-break-point #ast-hf-mobile-menu ul li,*/
/*.ast-header-break-point #ast-hf-mobile-menu ul li a {*/
/*  background: transparent !important;*/
/*  background-color: transparent !important;*/
/*  color: var(--color-ocean-deep) !important;*/
/*}*/

/*.ast-header-break-point #ast-hf-mobile-menu ul li a.menu-link {*/
/*  color: var(--color-ocean-deep) !important;*/
/*  font-weight: 700 !important;*/
/*}*/
.ast-header-break-point #ast-hf-mobile-menu ul li,
.ast-header-break-point #ast-hf-mobile-menu ul li a {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--color-mist) !important;
}

.ast-header-break-point #ast-hf-mobile-menu ul li a.menu-link {
  color: var(--color-mist) !important;
  font-weight: 700 !important;
}

/* ============================================================
   MOBILE & TABLET — HEADER PADDING FIX
   ============================================================ */
@media (max-width: 921px) {
  .ast-primary-header-bar,
  .main-header-bar,
  .site-primary-header-wrap {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  .ast-builder-grid-row {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
}

/* ============================================================
   DESKTOP TABLET — HEADER LEFT PADDING FIX
   ============================================================ */
@media (min-width: 922px) and (max-width: 1200px) {
  .ast-primary-header-bar,
  .main-header-bar,
  .site-primary-header-wrap {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
}

/* ============================================================
   SMALL MOBILE — STACKED HEADER LAYOUT
   ============================================================ */
@media (max-width: 393px) {
  .ast-builder-grid-row.ast-builder-grid-row-has-sides {
    flex-direction: column !important;
    align-items: center !important;
  }

  .site-header-primary-section-left {
    order: 2 !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .site-header-primary-section-right {
    order: 1 !important;
    justify-content: center !important;
    width: 100% !important;
  }

  .ast-primary-header-bar,
  .main-header-bar,
  .site-primary-header-wrap {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* ============================================================
   OFF-CANVAS MENU — STYLING
   ============================================================ */
.ast-off-canvas-menu,
.ast-off-canvas-menu .ast-nav-menu,
#ast-off-canvas-menu,
#ast-off-canvas-menu ul,
#ast-off-canvas-menu ul.main-header-menu {
  background: rgba(10, 46, 54, 0.98) !important;
  background-color: rgba(10, 46, 54, 0.98) !important;
}

#ast-off-canvas-menu ul li,
#ast-off-canvas-menu ul li a {
  background: transparent !important;
  color: var(--color-mist) !important;
  border-bottom: 1px solid rgba(78, 205, 196, 0.15) !important;
}

#ast-off-canvas-menu ul li a {
  font-family: var(--font-accent) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 14px 20px !important;
  display: block !important;
}

#ast-off-canvas-menu ul li a:hover,
#ast-off-canvas-menu ul li.current-menu-item a {
  color: var(--color-accent) !important;
  background: rgba(78, 205, 196, 0.1) !important;
}

/* ============================================================
   MOBILE MENU CONTENT AREA — BACKGROUND FIX
   ============================================================ */
.ast-mobile-header-content {
  background: rgba(10, 46, 54, 0.98) !important;
  background-color: rgba(10, 46, 54, 0.98) !important;
}

.ast-mobile-header-content .ast-builder-menu-mobile,
.ast-mobile-header-content .main-header-bar-navigation,
.ast-mobile-header-content #ast-hf-mobile-menu,
.ast-mobile-header-content ul.main-header-menu {
  background: rgba(10, 46, 54, 0.98) !important;
  background-color: rgba(10, 46, 54, 0.98) !important;
}

.ast-mobile-header-content ul.main-header-menu li {
  background: transparent !important;
  border-bottom: 1px solid rgba(78, 205, 196, 0.15) !important;
}

.ast-mobile-header-content ul.main-header-menu li a {
  color: var(--color-mist) !important;
  font-family: var(--font-accent) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 14px 20px !important;
  display: block !important;
}

/*.ast-mobile-header-content ul.main-header-menu li a:hover,*/
/*.ast-mobile-header-content ul.main-header-menu li.current-menu-item a {*/
/*  color: var(--color-accent) !important;*/
/*  background: rgba(78, 205, 196, 0.1) !important;*/
/*}*/

/* Show Astra mobile/off-canvas menu from 545px up to the mobile breakpoint */
@media (min-width: 545px) and (max-width: 921px) {
  .ast-header-break-point .ast-builder-menu-mobile .main-navigation {
    display: block !important;
  }
}

/* Typography + block background for mobile/off-canvas menu items */
html body #ast-hf-mobile-menu.main-header-menu.ast-nav-menu li a.menu-link,
html body #ast-hf-mobile-menu.main-header-menu li a,
html body #ast-hf-mobile-menu li a {
  /*color: var(--color-mist) !important;*/
  text-decoration: none !important;
  font-family: var(--font-accent) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 14px 20px !important;
  display: block !important;
  /*background-color: var(--color-deep-teal, #0B7A75) !important;*/
  /*background-color: transparent !important;*/
}

@media (max-width: 921px) {
  .ast-header-break-point .ast-mobile-header-wrap .ast-mobile-header-content {
    background-image: linear-gradient(160deg, #02423f 0%, #0B7A75 35%, #012224 100%) !important;
    background-color: #012224 !important; /* fallback dark teal */
  }
}

/* Active / current page item in mobile menu */
/*html body #ast-hf-mobile-menu li.current-menu-item > a.menu-link,*/
/*html body #ast-hf-mobile-menu li.current_page_item > a.menu-link,*/
/*html body #ast-hf-mobile-menu li.current-menu-ancestor > a.menu-link,*/
/*html body #ast-hf-mobile-menu li.current_page_ancestor > a.menu-link {*/
/*  background-color: rgba(0, 0, 0, 0.35) !important;*/
/*  color: #ffffff !important;*/
/*  border-left: 4px solid #FDD35C !important; */
  /* tweak color if you like */
/*}*/

/* Off-canvas active state — match desktop nav exactly */
/*html body #ast-hf-mobile-menu li.current-menu-item > a.menu-link,*/
/*html body #ast-hf-mobile-menu li.current_page_item > a.menu-link,*/
/*html body #ast-hf-mobile-menu li.current-menu-ancestor > a.menu-link,*/
/*html body #ast-hf-mobile-menu li.current_page_ancestor > a.menu-link,*/
/*html body #ast-hf-mobile-menu li > a.menu-link:hover {*/
/*  color: var(--color-accent) !important;*/
/*  background: rgba(78, 205, 196, 0.1) !important;*/
/*  border-left: 0 !important;*/
/*  border-radius: 0 !important;*/
/*}*/

/* Mobile/off-canvas container background */
@media (max-width: 921px) {
  .ast-header-break-point .ast-mobile-header-content,
  .ast-header-break-point .ast-mobile-header-content .ast-builder-menu-mobile,
  .ast-header-break-point .ast-mobile-header-content .main-header-bar-navigation,
  .ast-header-break-point .ast-mobile-header-content #ast-hf-mobile-menu,
  .ast-header-break-point .ast-mobile-header-content ul.main-header-menu {
    background: rgba(10, 46, 54, 0.98) !important;
    background-color: rgba(10, 46, 54, 0.98) !important;
  }
}

/* Generic mobile menu items (non-active) */
html body #ast-hf-mobile-menu.main-header-menu.ast-nav-menu li:not(.current-menu-item):not(.current_page_item):not(.current-menu-ancestor):not(.current_page_ancestor) > a.menu-link,
html body #ast-hf-mobile-menu.main-header-menu li:not(.current-menu-item):not(.current_page_item):not(.current-menu-ancestor):not(.current_page_ancestor) > a.menu-link,
html body #ast-hf-mobile-menu li:not(.current-menu-item):not(.current_page_item):not(.current-menu-ancestor):not(.current_page_ancestor) > a.menu-link {
  color: var(--color-mist) !important;
  text-decoration: none !important;
  font-family: var(--font-accent) !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 14px 20px !important;
  display: block !important;
}

@media (max-width: 921px) {
  html body .ast-mobile-header-wrap .ast-mobile-header-content {
    background: rgba(10, 46, 54, 0.98) !important;   /* dark teal */
    background-color: rgba(10, 46, 54, 0.98) !important;
  }

  html body .ast-mobile-header-wrap .ast-mobile-header-content .main-header-menu,
  html body .ast-mobile-header-wrap .ast-mobile-header-content #ast-hf-mobile-menu {
    background: transparent !important;  /* let the panel color show through */
  }
}

/* Off-canvas active state — match desktop nav exactly */
html body #ast-hf-mobile-menu li.current-menu-item > a.menu-link,
html body #ast-hf-mobile-menu li.current_page_item > a.menu-link,
html body #ast-hf-mobile-menu li.current-menu-ancestor > a.menu-link,
html body #ast-hf-mobile-menu li.current_page_ancestor > a.menu-link,
html body #ast-hf-mobile-menu li > a.menu-link:hover {
  color: var(--color-accent) !important;
  background: rgba(78, 205, 196, 0.1) !important;
  border-left: 0 !important;     /* ensure no vertical bar appears at any width */
  border-radius: 0 !important;  /* ensure no rounded bar/edge differences */
}

/* Mobile / off-canvas menu background + non-active items */
@media (max-width: 921px) {
  /* Dark panel */
  .ast-header-break-point #ast-hf-mobile-menu {
    background: rgba(10, 46, 54, 0.98) !important;
  }

  /* Per-item separators */
  .ast-header-break-point #ast-hf-mobile-menu li {
    border-bottom: 1px solid rgba(78, 205, 196, 0.15) !important;
  }

  /* Non-active item background + text */
  .ast-header-break-point #ast-hf-mobile-menu li:not(.current-menu-item):not(.current_page_item):not(.current-menu-ancestor):not(.current_page_ancestor) > a.menu-link {
    background-color: transparent !important;   /* sit on dark panel */
    color: var(--color-mist) !important;
  }
}

@media (max-width: 921px) {
  .ast-header-break-point #ast-hf-mobile-menu li > a.menu-link {
    border-radius: 0 !important;
  }
}