/*
 * Chennai Menopause Society - Custom Header Overrides
 * Restructures the Elementor/Boostify header layout:
 *   - CMS Logo on the left
 *   - Navigation menu in the center
 *   - 2025-27 Logo on the right
 *   - Old logos and theme text hidden
 * v1.0.5 - Fixed widescreen gap, mobile layout, footer purple colour
 */

/* =============================================
   1. HIDE OLD LOGOS & THEME TEXT
   ============================================= */

/* Hide the IMS logo (Indian Menopause Society old logo) */
.elementor-5669 .elementor-element.elementor-element-942da91 {
    display: none !important;
}

/* Hide the healthycare logo */
.elementor-5669 .elementor-element.elementor-element-02ec5fe {
    display: none !important;
}

/* Hide "IMS Theme 2021" text */
.elementor-5669 .elementor-element.elementor-element-ced9d23 {
    display: none !important;
}

/* Hide the old site logo (Newlogo.jpeg) */
.elementor-5669 .elementor-element.elementor-element-3f8391f {
    display: none !important;
}

/* Hide "CMS Theme 2023" text */
.elementor-5669 .elementor-element.elementor-element-b09e165 {
    display: none !important;
}

/* Hide the spacers */
.elementor-5669 .elementor-element.elementor-element-94b77f1 {
    display: none !important;
}
.elementor-5669 .elementor-element.elementor-element-ecb8591 {
    display: none !important;
}

/* Hide the inner section with IMS + healthycare logos */
.elementor-5669 .elementor-element.elementor-element-3d58756 {
    display: none !important;
}

/* Hide the inner section with IMS Theme text */
.elementor-5669 .elementor-element.elementor-element-39c3ab5 {
    display: none !important;
}

/* Hide YouTube and Email icon section */
.elementor-5669 .elementor-element.elementor-element-17ee466 {
    display: none !important;
}


/* =============================================
   2. HEADER BACKGROUND - PURPLE THEME
   ============================================= */

/* Override Elementor's green background with purple to match 2025-27 logo */
.elementor-5669 .elementor-element.elementor-element-7de55b2:not(.elementor-motion-effects-element-type-background),
.elementor-5669 .elementor-element.elementor-element-7de55b2 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: #4A1068 !important;
    background: linear-gradient(135deg, #3D0C5C 0%, #5B1880 50%, #4A1068 100%) !important;
}

/* Sub-menu: purple tones instead of green */
.elementor-5669 .elementor-element.elementor-element-ec32d64 .boostify-nav-default .menu-item-has-children .sub-menu,
.elementor-5669 .elementor-element.elementor-element-ec32d64 .boostify-menu .menu-item-has-children .sub-menu-default {
    background-color: #5E1D82 !important;
}

/* Sub-menu text: white */
.elementor-5669 .elementor-element.elementor-element-ec32d64 .boostify-nav-default .menu-item-has-children .sub-menu a,
.elementor-5669 .elementor-element.elementor-element-ec32d64 .boostify-menu .menu-item-has-children .sub-menu-default a {
    color: #fff !important;
}

/* Sub-menu hover: light purple highlight */
.elementor-5669 .elementor-element.elementor-element-ec32d64 .boostify-nav-default li .sub-menu > li:hover > a,
.elementor-5669 .elementor-element.elementor-element-ec32d64 .boostify-menu li .sub-menu-default > li:hover > a {
    color: #E8B4F8 !important;
}

/* Sub-menu border top: pink/magenta accent */
.elementor-5669 .elementor-element.elementor-element-ec32d64 .boostify-nav-default .sub-menu,
.elementor-5669 .elementor-element.elementor-element-ec32d64 .boostify-menu .sub-menu-default {
    border-top: 3px solid #C850C0 !important;
}

/* Main menu hover: light lavender instead of pink */
.elementor-5669 .elementor-element.elementor-element-ec32d64 .boostify-menu > li:hover > a {
    color: #E8B4F8 !important;
}

/* Active menu item */
.elementor-5669 .elementor-element.elementor-element-ec32d64 .boostify-menu li.current-menu-item a {
    color: #F5D0FE !important;
}

/* Hover background on menu items */
.elementor-5669 .elementor-element.elementor-element-ec32d64 .boostify--hover-background .boostify-menu > li:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Sub-menu hover background */
.elementor-5669 .elementor-element.elementor-element-ec32d64 .boostify--hover-background .boostify-menu .sub-menu-default > li:hover,
.elementor-5669 .elementor-element.elementor-element-ec32d64 .boostify--hover-background.boostify-nav-default .sub-menu > li:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Mobile sidebar menu colors */
.elementor-5669 .elementor-element.elementor-element-ec32d64 .boostify-menu-sidebar .boostify-dropdown-menu a {
    color: #4A1068 !important;
}
.elementor-5669 .elementor-element.elementor-element-ec32d64 .boostify-menu-sidebar .boostify-dropdown-menu li:hover > a {
    color: #C850C0 !important;
}


/* =============================================
   3. HEADER CONTAINER LAYOUT - ALL SCREENS
   ============================================= */

/* Force the section to be full-width */
.elementor-5669 .elementor-element.elementor-element-7de55b2 {
    width: 100% !important;
}

/* Group all three columns tightly in the center */
.elementor-5669 .elementor-element.elementor-element-7de55b2 > .elementor-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 4px 10px !important;
    gap: 0 !important;
    box-sizing: border-box !important;
}


/* =============================================
   3. LEFT COLUMN - CMS Logo
   ============================================= */

.elementor-5669 .elementor-element.elementor-element-1b8a244 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.elementor-5669 .elementor-element.elementor-element-1b8a244 > .elementor-widget-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* CMS Logo image */
.elementor-5669 .elementor-element.elementor-element-1b8a244 > .elementor-widget-wrap::before {
    content: '';
    display: block;
    width: 90px;
    height: 90px;
    background-image: url('/wp-content/uploads/2026/05/CMS-Logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}


/* =============================================
   4. MIDDLE COLUMN - Navigation Menu
   ============================================= */

.elementor-5669 .elementor-element.elementor-element-eea8f31 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
}

.elementor-5669 .elementor-element.elementor-element-eea8f31 > .elementor-widget-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

/* Menu items - compact */
.elementor-5669 .elementor-element.elementor-element-ec32d64 .boostify-menu > li > a {
    padding: 10px 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* Menu alignment */
.elementor-5669 .elementor-element.elementor-element-ec32d64 .boostify-menu {
    justify-content: center !important;
}


/* =============================================
   5. RIGHT COLUMN - 2025-27 Logo
   ============================================= */

.elementor-5669 .elementor-element.elementor-element-e534042 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.elementor-5669 .elementor-element.elementor-element-e534042 > .elementor-widget-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 2025-27 Logo image */
.elementor-5669 .elementor-element.elementor-element-e534042 > .elementor-widget-wrap::before {
    content: '';
    display: block;
    width: 90px;
    height: 90px;
    background-image: url('/wp-content/uploads/2026/05/2025-27-Logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}


/* =============================================
   6. DESKTOP - COLUMN WIDTHS (>= 768px)
   ============================================= */

@media (min-width: 768px) {
    /* Logo columns: fixed size, no stretching */
    .elementor-5669 .elementor-element.elementor-element-1b8a244 {
        width: 110px !important;
        min-width: 110px !important;
        max-width: 110px !important;
        flex: 0 0 110px !important;
    }

    /* Menu column: shrinks to fit its content — sits tight between the logos */
    .elementor-5669 .elementor-element.elementor-element-eea8f31 {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        overflow: visible !important;
    }

    .elementor-5669 .elementor-element.elementor-element-e534042 {
        width: 110px !important;
        min-width: 110px !important;
        max-width: 110px !important;
        flex: 0 0 110px !important;
    }
}


/* =============================================
   7. TABLET (768px - 1024px)
   ============================================= */

@media (min-width: 768px) and (max-width: 1024px) {
    .elementor-5669 .elementor-element.elementor-element-ec32d64 .boostify-menu > li > a {
        padding: 8px 8px !important;
        font-size: 12px !important;
    }

    .elementor-5669 .elementor-element.elementor-element-1b8a244 > .elementor-widget-wrap::before,
    .elementor-5669 .elementor-element.elementor-element-e534042 > .elementor-widget-wrap::before {
        width: 70px;
        height: 70px;
    }
}


/* =============================================
   8. MOBILE (<= 767px) - ALL IN ONE LINE
   ============================================= */

@media (max-width: 767px) {
    /* Force single row - no wrapping */
    .elementor-5669 .elementor-element.elementor-element-7de55b2 > .elementor-container {
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 6px 10px !important;
        gap: 0 !important;
    }

    /* Left logo column - small, fixed width */
    .elementor-5669 .elementor-element.elementor-element-1b8a244 {
        width: auto !important;
        min-width: 55px !important;
        max-width: 65px !important;
        flex-shrink: 0 !important;
        order: 1 !important;
    }

    /* Middle column - hamburger menu takes center */
    .elementor-5669 .elementor-element.elementor-element-eea8f31 {
        width: auto !important;
        flex: 1 1 auto !important;
        order: 2 !important;
        justify-content: center !important;
    }

    /* Right logo column - small, fixed width */
    .elementor-5669 .elementor-element.elementor-element-e534042 {
        width: auto !important;
        min-width: 55px !important;
        max-width: 65px !important;
        flex-shrink: 0 !important;
        order: 3 !important;
    }

    /* Smaller logos on mobile */
    .elementor-5669 .elementor-element.elementor-element-1b8a244 > .elementor-widget-wrap::before {
        width: 50px;
        height: 50px;
    }

    .elementor-5669 .elementor-element.elementor-element-e534042 > .elementor-widget-wrap::before {
        width: 50px;
        height: 50px;
    }

    /* Hamburger icon positioning */
    .elementor-5669 .elementor-element.elementor-element-ec32d64 .boostify-menu-toggle {
        text-align: center !important;
        display: block !important;
    }

    /* Hide full menu on mobile (only hamburger shown) */
    .elementor-5669 .elementor-element.elementor-element-ec32d64 .boostify-menu {
        display: none !important;
    }

    /* Ensure the nav widget container stays in line */
    .elementor-5669 .elementor-element.elementor-element-eea8f31 > .elementor-widget-wrap {
        justify-content: center !important;
    }

    .elementor-5669 .elementor-element.elementor-element-ec32d64 {
        width: 100% !important;
    }

    .elementor-5669 .elementor-element.elementor-element-ec32d64 .boostify-navigation--widget {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}


/* =============================================
   FOOTER - PURPLE THEME
   ============================================= */

/* Green strip above copyright bar → purple gradient (matches header) */
.elementor-861 .elementor-element.elementor-element-ac144ad:not(.elementor-motion-effects-element-type-background),
.elementor-861 .elementor-element.elementor-element-ac144ad > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: #4A1068 !important;
    background: linear-gradient(135deg, #3D0C5C 0%, #5B1880 50%, #4A1068 100%) !important;
}

/* Copyright bar → deep purple-black instead of near-black */
.elementor-861 .elementor-element.elementor-element-684a59b:not(.elementor-motion-effects-element-type-background),
.elementor-861 .elementor-element.elementor-element-684a59b > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: #1E0530 !important;
}