/**
 * ProSoft CoS P1 #4 — Header logo washout fix (sitewide Astra HFB)
 * Dark Modern Operator–aligned header bar + stronger logo lockup.
 * Does NOT restyle body.mo-live (MO Home/Pricing/About use their own .mo-header).
 * Soft claims held; prices/phone untouched; majesticaesthetic.com untouched.
 */

:root {
  --ps-header-bg: #0b0f14;
  --ps-header-bg-scrolled: rgba(11, 15, 20, 0.96);
  --ps-header-border: rgba(232, 236, 241, 0.12);
  --ps-header-ink: #e8ecf1;
  --ps-header-ink-muted: rgba(232, 236, 241, 0.78);
  --ps-header-accent: #2f6bff;
  --ps-logo-max-h: 52px;
  --ps-logo-max-h-mobile: 44px;
}

/* -------------------------------------------------------------------------- */
/* 1) Dark brand header bar — Astra HFB (exclude MO live pages)               */
/* -------------------------------------------------------------------------- */
body:not(.mo-live) #masthead,
body:not(.mo-live) #masthead .ast-primary-header-bar,
body:not(.mo-live) #masthead .main-header-bar,
body:not(.mo-live) #masthead .ast-builder-grid-row-container-inner,
body:not(.mo-live) #masthead .site-header-focus-item,
body:not(.mo-live) #masthead .ast-mobile-header-wrap,
body:not(.mo-live) #masthead .ast-mobile-header-wrap .ast-primary-header-bar,
body:not(.mo-live) .ast-above-header-bar,
body:not(.mo-live) .ast-below-header-bar {
  background-color: var(--ps-header-bg) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--ps-header-border) !important;
  box-shadow: none !important;
}

/* Kill transparent-header wash on light pages / over dark heroes */
body:not(.mo-live).ast-theme-transparent-header #masthead,
body:not(.mo-live).ast-inherit-site-logo-transparent #masthead,
body:not(.mo-live).ast-theme-transparent-header #masthead .ast-primary-header-bar,
body:not(.mo-live).ast-inherit-site-logo-transparent #masthead .ast-primary-header-bar {
  background-color: var(--ps-header-bg) !important;
  background-image: none !important;
  opacity: 1 !important;
}

body:not(.mo-live) #masthead {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative;
  z-index: 100;
  min-height: 72px;
}

/* Subtle accent hairline under bar for brand weight */
body:not(.mo-live) #masthead::after {
  content: "";
  display: block;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--ps-header-accent) 0%, rgba(47, 107, 255, 0.15) 42%, transparent 78%);
  pointer-events: none;
}

/* -------------------------------------------------------------------------- */
/* 2) Stronger logo lockup — size + contrast (overrides Additional CSS 40px)  */
/* -------------------------------------------------------------------------- */
body:not(.mo-live) #masthead .custom-logo-link,
body:not(.mo-live) #masthead .ast-site-identity,
body:not(.mo-live) #masthead .site-branding {
  display: flex !important;
  align-items: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

body:not(.mo-live) #masthead .custom-logo-link img.custom-logo,
body:not(.mo-live) #masthead .custom-logo-link img,
body:not(.mo-live) #masthead img.custom-logo,
body:not(.mo-live).ast-header-break-point #masthead .custom-logo-link img.custom-logo {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-height: var(--ps-logo-max-h) !important;
  height: auto !important;
  width: auto !important;
  max-width: 220px !important;
  filter: none !important;
}

/* -------------------------------------------------------------------------- */
/* 3) Nav / toggle — light ink on dark bar                                    */
/* -------------------------------------------------------------------------- */
body:not(.mo-live) #masthead .main-header-menu > .menu-item > .menu-link,
body:not(.mo-live) #masthead .ast-builder-menu .menu-link,
body:not(.mo-live) #masthead .ast-header-account-wrap,
body:not(.mo-live) #masthead .ast-builder-html-element,
body:not(.mo-live) #masthead .site-header .ast-button-wrap .ast-custom-button {
  color: var(--ps-header-ink) !important;
}

body:not(.mo-live) #masthead .main-header-menu > .menu-item > .menu-link:hover,
body:not(.mo-live) #masthead .main-header-menu > .menu-item > .menu-link:focus,
body:not(.mo-live) #masthead .main-header-menu > .menu-item.current-menu-item > .menu-link,
body:not(.mo-live) #masthead .ast-builder-menu .menu-link:hover {
  color: #ffffff !important;
}

body:not(.mo-live) #masthead .ast-header-navigation-arrow,
body:not(.mo-live) #masthead .dropdown-menu-toggle {
  color: var(--ps-header-ink-muted) !important;
}

/* Mobile menu toggle (hamburger) */
body:not(.mo-live) #masthead .menu-toggle .menu-toggle-icon .ast-mobile-svg,
body:not(.mo-live) #masthead .ast-button-wrap .menu-toggle .ast-mobile-svg,
body:not(.mo-live) #masthead .ast-mobile-menu-trigger-minimal .ast-mobile-svg,
body:not(.mo-live) #masthead button.menu-toggle {
  color: var(--ps-header-ink) !important;
  fill: var(--ps-header-ink) !important;
}

body:not(.mo-live) #masthead .ast-mobile-svg path,
body:not(.mo-live) #masthead .ast-icon-bar {
  fill: var(--ps-header-ink) !important;
  background-color: var(--ps-header-ink) !important;
  stroke: var(--ps-header-ink) !important;
}

/* Mobile flyout panel keeps readable contrast */
body:not(.mo-live) #masthead .ast-mobile-header-wrap .ast-builder-menu-mobile .main-header-menu,
body:not(.mo-live) .ast-header-break-point #masthead .main-header-menu .menu-item .menu-link {
  color: var(--ps-header-ink) !important;
}

body:not(.mo-live).ast-header-break-point #masthead .main-header-bar-navigation {
  background-color: var(--ps-header-bg) !important;
}

body:not(.mo-live).ast-header-break-point #masthead .custom-logo-link img.custom-logo {
  max-height: var(--ps-logo-max-h-mobile) !important;
}

/* Submenu panels */
body:not(.mo-live) #masthead .main-header-menu .sub-menu,
body:not(.mo-live) #masthead .main-header-menu .sub-menu .menu-link {
  background-color: #121821 !important;
  color: var(--ps-header-ink) !important;
  border-color: var(--ps-header-border) !important;
}

/* -------------------------------------------------------------------------- */
/* 4) MO live — slightly stronger logo lockup only (header already dark)      */
/* -------------------------------------------------------------------------- */
body.mo-live .mo-logo img {
  height: 48px !important;
  width: auto !important;
  max-height: 48px !important;
  display: block;
}