/* ==========================================================================
   Mother & Baby - Redesigned Premium Healthcare Navigation & Header Styles
   ========================================================================== */

:root {
    --color-primary-dark: #2C5E3B; /* Deep Sage/Forest Green for trust and health */
    --color-primary: #3d7a4f;      /* Mid tone Sage Green */
    --color-accent: #CBB26A;       /* Warm Ayurvedic Gold */
    --color-bg-light: #F7F9F6;     /* Pure, clean background tint */
    --color-text-dark: #2D3748;    /* Dark Charcoal for high readability */
    --color-text-muted: #5A6A85;   /* Secondary text slate */
    --color-white: #FFFFFF;
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --border-radius-pill: 50px;
    --border-radius-sm: 8px;
    --shadow-subtle: 0 4px 20px rgba(0, 0, 0, 0.04);
    --shadow-scrolled: 0 8px 30px rgba(0, 0, 0, 0.08);
}

/* --- Clean Top Info Bar --- */
.site-top-panel {
    background-color: var(--color-bg-light) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    line-height: 40px !important;
    font-size: 13px !important;
    font-weight: 500;
    transition: var(--transition-smooth);
}

.site-top-panel .tel-wrap address {
    line-height: 40px !important;
    color: var(--color-text-muted) !important;
}

.site-top-panel .tel-wrap address a {
    color: var(--color-text-muted) !important;
    transition: var(--transition-smooth);
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.site-top-panel .tel-wrap address a i {
    color: var(--color-primary);
    margin-right: 6px;
    font-size: 14px;
}

.site-top-panel .tel-wrap address a:hover {
    color: var(--color-primary-dark) !important;
}

.site-top-panel .tel-wrap address span {
    color: #CBD5E0;
    margin: 0 12px;
}

/* Remove all languages/currencies wrappers from display */
.site-top-panel .lang-wrap {
    display: none !important;
}

/* --- Header Redesign & Sticky Behavior --- */
.sticky-header {
    background-color: var(--color-white) !important;
    box-shadow: var(--shadow-subtle);
    border-bottom: 1px solid rgba(0, 0, 0, 0.02);
    transition: var(--transition-smooth);
}

/* When the header becomes sticky or scrolls down */
.sticky-header.small-height, 
.sticky-wrapper.is-sticky .sticky-header {
    box-shadow: var(--shadow-scrolled) !important;
    background-color: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px);
}

/* Inner Navigation Overrides */
.main-nav {
    height: 90px !important;
    transition: var(--transition-smooth);
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.main-nav.small-height {
    height: 75px !important;
}

.main-nav .full-wrapper {
    width: 100%;
    height: 100%;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

/* --- Logo Styling --- */
.nav-logo-wrap {
    padding: 0 !important;
    margin-right: 35px !important;
    display: flex;
    align-items: center;
    flex: 0 0 auto !important;
    height: 100% !important;
}

.nav-logo-wrap .logo {
    height: 100% !important;
    max-width: none !important;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 2px 0 !important;
}

.nav-logo-wrap .logo img {
    height: 100% !important;
    max-height: 86px !important;
    width: auto !important;
    object-fit: contain;
    transition: var(--transition-smooth);
}

.main-nav.small-height .nav-logo-wrap .logo {
    height: 100% !important;
    max-width: none !important;
}

.main-nav.small-height .nav-logo-wrap .logo img {
    height: 100% !important;
    max-height: 71px !important;
}

/* Hide the old absolute-positioned sticky logo container */
.nav-logo-wrap-sticky {
    display: none !important;
}

/* --- Menu Links Styling --- */
.inner-nav.desktop-nav {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    margin: 0;
    flex: 1 !important;
}

.inner-nav.desktop-nav > ul {
    display: flex !important;
    align-items: center;
    list-style: none;
    margin: 0 !important;
    padding: 0 !important;
}

.inner-nav.desktop-nav > ul > li {
    padding: 0 !important;
    position: relative;
}

/* Remove old divider items from view */
.inner-nav.desktop-nav > ul > li.sep {
    display: none !important;
}

/* Menu items typography and hover effects */
.inner-nav.desktop-nav > ul > li > a {
    font-family: 'Work Sans', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--color-text-dark) !important;
    padding: 0 16px !important;
    height: 90px !important;
    line-height: 90px !important;
    position: relative;
    transition: var(--transition-smooth);
    text-transform: capitalize;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.main-nav.small-height .inner-nav.desktop-nav > ul > li > a {
    height: 75px !important;
    line-height: 75px !important;
}

/* Accessible focus and active states */
.inner-nav.desktop-nav > ul > li > a:focus-visible {
    outline: 2px solid var(--color-primary) !important;
    outline-offset: -4px;
    border-radius: var(--border-radius-sm);
}

.inner-nav.desktop-nav > ul > li > a:hover,
.inner-nav.desktop-nav > ul > li > a.active {
    color: var(--color-primary) !important;
}

/* Underline indicator for active item */
.inner-nav.desktop-nav > ul > li > a::after {
    content: '';
    position: absolute;
    bottom: 25px;
    left: 16px;
    right: 16px;
    height: 2px;
    background-color: var(--color-primary);
    transform: scaleX(0);
    transition: var(--transition-smooth);
    transform-origin: right;
}

.main-nav.small-height .inner-nav.desktop-nav > ul > li > a::after {
    bottom: 18px;
}

.inner-nav.desktop-nav > ul > li > a.active::after,
.inner-nav.desktop-nav > ul > li > a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Hide old template line decoration */
.menu-rect {
    display: none !important;
}

/* --- Dropdown / Submenu Styling --- */
.inner-nav .submenu {
    position: absolute;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(10px);
    background-color: var(--color-white) !important;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
    border-radius: var(--border-radius-sm) !important;
    padding: 12px 0 !important;
    min-width: 200px !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    z-index: 1000;
}

/* Dropdown arrow indicators */
.inner-nav .nav-submenu i {
    font-size: 10px;
    transition: var(--transition-smooth);
    color: var(--color-text-muted);
}

.inner-nav .nav-submenu:hover i {
    color: var(--color-primary);
    transform: translateY(1px);
}

/* Dropdown hover action */
.inner-nav.desktop-nav > ul > li:hover .submenu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.inner-nav .submenu li {
    display: block !important;
    padding: 0 !important;
    text-align: left;
}

.inner-nav .submenu li a {
    font-family: 'Work Sans', sans-serif !important;
    display: block !important;
    padding: 10px 20px !important;
    height: auto !important;
    line-height: 1.4 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--color-text-dark) !important;
    transition: var(--transition-smooth);
}

.inner-nav .submenu li a:hover {
    background-color: var(--color-bg-light) !important;
    color: var(--color-primary) !important;
    padding-left: 24px !important;
}

/* --- Header CTA Button --- */
.header-cta-wrap {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    margin-left: 20px;
}

.header-cta-btn {
    font-family: 'Work Sans', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    height: 46px !important;
    line-height: 42px !important; /* Vertically centers the text inside the 46px height (subtracting 4px for borders) */
    padding: 0 28px !important;
    border-radius: var(--border-radius-pill) !important;
    text-decoration: none !important;
    transition: var(--transition-smooth) !important;
    border: 2px solid transparent !important;
    box-shadow: 0 4px 14px rgba(61, 122, 79, 0.2);
    display: inline-block !important;
    white-space: nowrap !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.header-cta-wrap {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 1024px) {
    .desktop-only {
        display: none !important;
    }
}

.header-cta-btn:hover {
    background-color: var(--color-primary-dark) !important;
    box-shadow: 0 6px 20px rgba(44, 94, 59, 0.3);
    transform: translateY(-1px);
    color: var(--color-white) !important;
}

.header-cta-btn:active {
    transform: translateY(0);
}

.header-cta-btn:focus-visible {
    outline: 3px solid var(--color-accent) !important;
    outline-offset: 2px;
}

/* --- Responsive & Mobile Navigation --- */

/* Mobile menu toggle */
.mobile-nav {
    display: none;
    font-size: 24px;
    color: var(--color-primary);
    cursor: pointer;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
    border-radius: var(--border-radius-sm);
    margin-left: 15px;
    position: relative !important;
    z-index: 1005 !important;
}

.mobile-nav:hover {
    background-color: var(--color-bg-light);
    color: var(--color-primary-dark);
}

@media (max-width: 1024px) {
    .nav-logo-wrap {
        margin-right: 0 !important;
    }

    .mobile-nav {
        display: flex !important;
    }
    
    .header-cta-wrap {
        margin-left: auto;
    }
    
    .inner-nav.desktop-nav {
        display: block !important; 
        position: fixed !important;
        top: 0 !important;
        right: -350px !important;
        left: auto !important;
        width: 300px !important;
        max-width: 80% !important;
        height: 100vh !important;
        background-color: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(10px) !important;
        box-shadow: -5px 0 30px rgba(0, 0, 0, 0.1) !important;
        padding: 80px 0 20px 0 !important;
        overflow-y: auto !important;
        z-index: 1001 !important;
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        border: none !important;
        transform: none !important;
    }
    
    /* Mobile slide in state */
    .main-nav.mobile-on .desktop-nav.js-opened {
        right: 0 !important;
    }
    
    .main-nav.mobile-on .desktop-nav > ul {
        display: block !important;
    }
    
    .main-nav.mobile-on .desktop-nav > ul > li {
        display: block !important;
    }
    
    .main-nav.mobile-on .desktop-nav > ul > li > a {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        height: 50px !important;
        line-height: 50px !important;
        padding: 0 24px !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.02);
    }
    
    .main-nav.mobile-on .desktop-nav > ul > li > a::after {
        display: none !important;
    }
    
    /* Dropdown alignment on mobile */
    .main-nav.mobile-on .submenu {
        position: static !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        background-color: var(--color-bg-light) !important;
        padding: 5px 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: none; /* expanded via JS subclass */
    }
    
    .main-nav.mobile-on li.js-opened > .submenu {
        display: block !important;
    }
    
    .main-nav.mobile-on .submenu li a {
        padding: 10px 40px !important;
    }
}

@media (max-width: 480px) {
    .header-cta-btn {
        padding: 8px 16px !important;
        font-size: 12px !important;
    }
    
    .nav-logo-wrap .logo {
        height: 100% !important;
        max-width: none !important;
    }
    
    .nav-logo-wrap .logo img {
        height: 100% !important;
        max-height: 65px !important;
        width: auto !important;
    }
}