/* ── Astra Header Reskin ──
   Restyles the default Astra header to match the Skylake Medical design system.
   Does NOT replace the header — just overrides colors, fonts, and layout. */

/* Main header wrapper — sticky with blur */
.ast-primary-header-bar,
.site-header,
#masthead {
    background: rgba(250, 250, 247, .88) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(25, 22, 84, .08) !important;
    box-shadow: none !important;
}

/* Site title / logo */
.site-branding .site-title,
.site-branding .site-title a,
.ast-site-identity .site-title a {
    font-family: var(--font-humanist) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: var(--indigo-800) !important;
    letter-spacing: -.01em;
    text-decoration: none !important;
}

/* Navigation links */
.main-header-menu a,
.ast-header-break-point .main-header-menu a,
.main-navigation a,
.ast-nav-menu a,
.ast-header-sections-navigation a {
    font-family: var(--font-humanist) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--ink-700) !important;
    text-decoration: none !important;
}
.main-header-menu a:hover,
.main-navigation a:hover,
.ast-nav-menu a:hover {
    color: var(--indigo-800) !important;
}
.main-header-menu .current-menu-item > a,
.ast-nav-menu .current-menu-item > a {
    color: var(--cyan-600) !important;
}

/* Submenu (standard dropdowns — excludes mega-menu internals) */
.main-header-menu .sub-menu,
.ast-nav-menu .sub-menu {
    background: rgba(250, 250, 247, .97) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(25, 22, 84, .08) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-md) !important;
}
/* Reset inner sub-menus inside mega-menu — prevent card-per-column look */
.main-header-menu .mega-menu .sub-menu .sub-menu,
.main-header-menu .astra-megamenu-li .astra-megamenu .sub-menu {
    background: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.main-header-menu .sub-menu a,
.ast-nav-menu .sub-menu a {
    font-size: 13px !important;
    color: var(--ink-700) !important;
}
.main-header-menu .sub-menu a:hover,
.ast-nav-menu .sub-menu a:hover {
    color: var(--indigo-800) !important;
    background: rgba(25, 22, 84, .04) !important;
}

/* Header CTA button — style the inner .ast-custom-button only.
   The wrapping <a> must be transparent to avoid double-background artifacts. */
.ast-header-button-1 a,
.ast-header-button-2 a {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}
.ast-header-button-1 .ast-custom-button,
.ast-header-button-2 .ast-custom-button {
    font-family: var(--font-humanist) !important;
    background: var(--cyan-500) !important;
    color: #fff !important;
    border-radius: var(--r-pill) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    border: none !important;
    text-transform: none !important;
    transition: background .15s, transform .15s !important;
}
.ast-header-button-1 .ast-custom-button:hover,
.ast-header-button-2 .ast-custom-button:hover {
    background: var(--cyan-600) !important;
    transform: translateY(-1px);
    color: #fff !important;
}

/* Phone number in header */
.ast-header-html-1,
.ast-header-html-2 {
    font-family: var(--font-humanist) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--indigo-800) !important;
}

/* Mobile menu toggle */
.ast-mobile-menu-trigger-minimal,
.menu-toggle {
    color: var(--indigo-800) !important;
    border: 1px solid rgba(25, 22, 84, .15) !important;
    border-radius: 8px !important;
}

/* Mobile menu */
.ast-mobile-popup-drawer .ast-mobile-popup-inner,
.ast-mobile-header-content {
    background: rgba(250, 250, 247, .97) !important;
}
.ast-mobile-popup-drawer a,
.ast-mobile-header-content a {
    font-family: var(--font-humanist) !important;
    color: var(--ink-700) !important;
    font-size: 16px !important;
}
.ast-mobile-popup-drawer a:hover,
.ast-mobile-header-content a:hover {
    color: var(--indigo-800) !important;
}

/* Above header bar (if exists — phone, address) */
.ast-above-header,
.ast-above-header-bar {
    background: var(--indigo-800) !important;
    color: rgba(255,255,255,.8) !important;
    font-family: var(--font-humanist) !important;
    font-size: 13px !important;
}
.ast-above-header a {
    color: rgba(255,255,255,.8) !important;
}
.ast-above-header a:hover {
    color: #fff !important;
}

/* Below header bar (if exists) */
.ast-below-header,
.ast-below-header-bar {
    display: none !important;
}

/* Container max-width */
.ast-primary-header-bar .site-header-primary-section-left,
.ast-primary-header-bar .ast-builder-grid-row {
    max-width: var(--landing-maxw);
    margin: 0 auto;
}

/* ── Mega-Dropdown (Services) ──
   Overrides Astra Pro's built-in mega-menu styles for .mega-menu item.
   Astra Pro adds .astra-megamenu-li, .astra-megamenu, .astra-mega-menu-width-full
   classes and uses high-specificity selectors — we match or exceed them. */

/* Dropdown arrow on mega-menu — inline next to text, not below it */
.ast-desktop .main-header-menu .mega-menu > .menu-link {
    display: inline-flex !important;
    align-items: center !important;
}
.ast-desktop .main-header-menu .mega-menu > .menu-link .ast-header-navigation-arrow {
    position: static !important;
    display: inline-flex !important;
    align-items: center;
    margin-left: 4px;
    transform: none !important;
}
.ast-desktop .main-header-menu .mega-menu > .menu-link .ast-header-navigation-arrow .ast-arrow-svg {
    width: 10px;
    height: 6px;
}

/* Wrapper DIV: Astra Pro wraps mega-menu in .astra-full-megamenu-wrapper.
   This extends full-width and gets dark bg from --ast-global-color-0 (#191654).
   Override to transparent so only the inner panel has our styled background. */
.ast-desktop .astra-megamenu-li.mega-menu .astra-full-megamenu-wrapper,
.ast-desktop .astra-megamenu-li.mega-menu:hover .astra-full-megamenu-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.ast-desktop .submenu-with-border .astra-megamenu-li.mega-menu .astra-full-megamenu-wrapper {
    border: none !important;
}

/* Container: override Astra Pro's flex layout to grid, restyle panel */
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li.mega-menu .astra-megamenu,
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li.mega-menu:hover .astra-megamenu {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 24px 28px !important;
    background: rgba(250, 250, 247, .97) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(25, 22, 84, .08) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-md) !important;
    width: min(1280px, calc(100vw - 40px)) !important;
}

/* Remove borders from submenu-with-border on mega-menu */
.ast-desktop .submenu-with-border .astra-megamenu-li.mega-menu .astra-megamenu {
    border-width: 0 !important;
}
.ast-desktop .submenu-with-border .astra-megamenu-li.mega-menu .astra-megamenu .menu-link {
    border: none !important;
}

/* Remove border-right between columns (Astra Pro sets it on non-last items) */
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li.mega-menu .astra-megamenu > .menu-item {
    border-right: none !important;
    border-bottom: none !important;
    border-left: none !important;
}

/* Override Astra Pro's shadow on mega-menu wrapper */
.ast-desktop .main-header-menu.ast-menu-shadow .astra-megamenu-li.mega-menu .astra-megamenu {
    box-shadow: var(--shadow-md) !important;
}
.ast-desktop .main-header-menu.ast-menu-shadow .astra-megamenu-li.mega-menu .astra-megamenu .sub-menu {
    box-shadow: none !important;
}

/* Category headers (2nd-level: Primary Care, Podiatry, etc.) */
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li.mega-menu .astra-megamenu > .menu-item,
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li.mega-menu:hover .astra-megamenu > .menu-item {
    padding: 0 !important;
    margin: 0 !important;
    flex: none !important;
    width: auto !important;
}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li.mega-menu .astra-megamenu > .menu-item > .menu-link {
    font-family: var(--font-humanist) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--indigo-800) !important;
    padding: 0 0 8px 0 !important;
    background: none !important;
    border: none !important;
}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li.mega-menu .astra-megamenu > .menu-item > .menu-link:hover {
    color: var(--cyan-600) !important;
    background: none !important;
}

/* 3rd-level sub-menus: inline block list under each category */
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li.mega-menu .astra-megamenu .sub-menu {
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    display: block !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-width: 0 !important;
}

/* 3rd-level items (Regenerative Medicine, Bunions, etc.) */
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li.mega-menu .astra-megamenu .sub-menu .menu-item {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li.mega-menu .astra-megamenu .sub-menu .menu-link {
    font-family: var(--font-humanist) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--ink-500) !important;
    padding: 4px 0 !important;
    text-transform: none;
    letter-spacing: normal;
    background: none !important;
    border: none !important;
}
.ast-desktop .ast-mega-menu-enabled .astra-megamenu-li.mega-menu .astra-megamenu .sub-menu .menu-link:hover {
    color: var(--indigo-800) !important;
    background: none !important;
}

/* ── Mobile: Mega-menu accordion ──
   On mobile, Astra's breakpoint class handles accordion.
   Override grid back to vertical with styled indentation. */

@media (max-width: 768px) {
    .main-header-menu .mega-menu > .sub-menu,
    .main-header-menu .mega-menu > .astra-megamenu {
        display: block !important;
        width: 100% !important;
        position: static !important;
        transform: none !important;
        left: auto !important;
        padding: 0 !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        grid-template-columns: none !important;
    }

    /* Category headers on mobile — indented, bold, uppercase */
    .main-header-menu .mega-menu > .sub-menu > .menu-item > .menu-link,
    .main-header-menu .mega-menu > .astra-megamenu > .menu-item > .menu-link {
        padding-left: 16px !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--indigo-800) !important;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* 3rd-level items on mobile — deeper indentation */
    .main-header-menu .mega-menu > .sub-menu .sub-menu .menu-link,
    .main-header-menu .mega-menu > .astra-megamenu .sub-menu .menu-link {
        padding-left: 32px !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        text-transform: none;
        letter-spacing: normal;
        color: var(--ink-700) !important;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Restore sub-menu toggle visibility for mega-menu on mobile */
    .main-header-menu .mega-menu > .sub-menu .sub-menu,
    .main-header-menu .mega-menu > .astra-megamenu .sub-menu {
        display: none !important;
    }
    .main-header-menu .mega-menu > .sub-menu .ast-submenu-expanded > .sub-menu,
    .main-header-menu .mega-menu > .astra-megamenu .ast-submenu-expanded > .sub-menu {
        display: block !important;
    }
}