/* =========================================================
   MAMAHOOD — HEADER / FOOTER
   ========================================================= */
/*
 * Mechanical migration from the approved current Additional CSS.
 * No visual changes intended.
 */

/* =========================================================
   MAMAHOOD FOOTER
   Final responsive footer system

   Existing Kadence structure:
   - Widget 1 = Mamahood logo + tagline
   - Footer Navigation = Explore links
   - Footer Social = Follow Us links
   - Copyright = lower footer row
   ========================================================= */


/* ---------------------------------------------------------
   SHARED FOOTER FOUNDATIONS
   --------------------------------------------------------- */

#colophon .site-middle-footer-wrap .site-footer-row-container-inner {
    min-height: 0 !important;
}

#colophon .site-middle-footer-inner-wrap {
    box-sizing: border-box !important;
    align-items: start !important;
}

#colophon .site-middle-footer-inner-wrap > .site-footer-section {
    min-width: 0 !important;
    align-items: flex-start !important;
}

#colophon .footer-navigation-wrap,
#colophon [data-section="kadence_customizer_footer_social"] {
    width: 100% !important;
    max-width: 100% !important;
}

/* Kadence renders Footer Navigation as a flex row.
   Force the generated Explore heading to sit ABOVE the menu,
   not beside it. */
#colophon .footer-navigation-wrap {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
}

#colophon .footer-navigation {
    width: 100% !important;
    max-width: 100% !important;
}


/* ---------------------------------------------------------
   EXPLORE HEADING
   Kadence Footer Navigation has no title field, so this one
   small presentation label is added with CSS.
   --------------------------------------------------------- */

#colophon .footer-navigation-wrap::before {
    content: "Explore";
    display: block !important;
    width: 100% !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;

    color: #F23883 !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.035em !important;
    text-transform: uppercase !important;
}


/* ---------------------------------------------------------
   EXPLORE NAVIGATION — VERTICAL
   --------------------------------------------------------- */

#colophon .footer-navigation .footer-menu-container,
#colophon .footer-navigation .footer-menu-container > ul,
#colophon .footer-navigation .menu {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

#colophon .footer-navigation .footer-menu-container > ul,
#colophon .footer-navigation .menu {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 8px !important;
}

#colophon .footer-navigation .menu > li {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

#colophon .footer-navigation .menu > li > a {
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.45 !important;
    text-decoration: none !important;
}


/* ---------------------------------------------------------
   FOLLOW US HEADING
   The title itself is entered in Kadence as "Follow Us".
   These selectors cover Kadence's title output safely.
   --------------------------------------------------------- */

#colophon [data-section="kadence_customizer_footer_social"] .footer-social-title,
#colophon [data-section="kadence_customizer_footer_social"] .widget-title,
#colophon [data-section="kadence_customizer_footer_social"] > h2,
#colophon [data-section="kadence_customizer_footer_social"] h2:first-child,
#colophon .footer-social-wrap .footer-social-title {
    display: block !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;

    color: #F23883 !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.035em !important;
    text-transform: uppercase !important;
}


/* ---------------------------------------------------------
   SOCIAL LINKS — VERTICAL, LABELLED
   --------------------------------------------------------- */

#colophon .footer-social-inner-wrap {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#colophon .footer-social-inner-wrap .footer-social-item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;

    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    color: #FFFFFF !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
}

#colophon .footer-social-inner-wrap .footer-social-item:hover,
#colophon .footer-social-inner-wrap .footer-social-item:focus {
    color: #F23883 !important;
    background: transparent !important;
    text-decoration: none !important;
}

#colophon .footer-social-inner-wrap .footer-social-item .social-label {
    color: inherit !important;
    font-family: "DM Sans", sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    white-space: normal !important;
}

/* Keep built-in and custom SVG icons visually identical. */
#colophon .footer-social-inner-wrap .footer-social-item .kadence-svg-icon,
#colophon .footer-social-inner-wrap .footer-social-item > svg,
#colophon .footer-social-inner-wrap .footer-social-item .social-icon-custom-svg,
#colophon .footer-social-inner-wrap .footer-social-item .social-icon-custom-svg svg {
    flex: 0 0 17px !important;
    width: 17px !important;
    height: 17px !important;
    max-width: 17px !important;
    max-height: 17px !important;
}

#colophon .footer-social-inner-wrap .footer-social-item .social-icon-custom-svg {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 0 !important;
}


/* ---------------------------------------------------------
   DESKTOP
   Brand | Explore | Follow Us
   --------------------------------------------------------- */

@media (min-width: 1024px) {

    #colophon .site-middle-footer-inner-wrap.site-footer-row.site-footer-row-columns-3 {
        display: grid !important;
        grid-template-columns: minmax(300px, 1.35fr) minmax(185px, 0.75fr) minmax(260px, 1fr) !important;
        column-gap: 54px !important;
        row-gap: 0 !important;
        align-items: start !important;

        padding-top: 42px !important;
        padding-bottom: 42px !important;
    }

    #colophon .site-footer-middle-section-1,
    #colophon .site-footer-middle-section-2,
    #colophon .site-footer-middle-section-3 {
        width: 100% !important;
        max-width: none !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }

    #colophon .site-footer-middle-section-1 .footer-widget-area,
    #colophon .site-footer-middle-section-2 .footer-widget-area,
    #colophon .site-footer-middle-section-3 .footer-widget-area {
        width: 100% !important;
        text-align: left !important;
    }

}


/* ---------------------------------------------------------
   TABLET
   Brand full width, Explore + Follow Us beneath
   --------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1023px) {

    #colophon .site-middle-footer-inner-wrap.site-footer-row.site-footer-row-columns-3 {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 46px !important;
        row-gap: 26px !important;
        align-items: start !important;

        padding-top: 34px !important;
        padding-bottom: 34px !important;
    }

    #colophon .site-footer-middle-section-1 {
        grid-column: 1 / -1 !important;
    }

    #colophon .site-footer-middle-section-1,
    #colophon .site-footer-middle-section-2,
    #colophon .site-footer-middle-section-3 {
        width: 100% !important;
        max-width: none !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }

    #colophon .site-footer-middle-section-1 .footer-widget-area,
    #colophon .site-footer-middle-section-2 .footer-widget-area,
    #colophon .site-footer-middle-section-3 .footer-widget-area {
        width: 100% !important;
        text-align: left !important;
    }

}


/* ---------------------------------------------------------
   MOBILE
   Brand → Explore → Follow Us
   --------------------------------------------------------- */

@media (max-width: 767px) {

    #colophon .site-middle-footer-inner-wrap.site-footer-row.site-footer-row-columns-3 {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        column-gap: 0 !important;
        row-gap: 26px !important;
        align-items: start !important;

        padding-top: 32px !important;
        padding-bottom: 30px !important;
    }

    #colophon .site-footer-middle-section-1,
    #colophon .site-footer-middle-section-2,
    #colophon .site-footer-middle-section-3 {
        width: 100% !important;
        max-width: none !important;
        grid-column: 1 !important;
        justify-content: center !important;
        text-align: center !important;
    }

    #colophon .site-footer-middle-section-1 .footer-widget-area,
    #colophon .site-footer-middle-section-2 .footer-widget-area,
    #colophon .site-footer-middle-section-3 .footer-widget-area {
        width: 100% !important;
        text-align: center !important;
    }

    #colophon .footer-navigation-wrap {
        align-items: center !important;
        justify-content: flex-start !important;
    }

    #colophon .footer-navigation-wrap::before,
    #colophon [data-section="kadence_customizer_footer_social"] .footer-social-title,
    #colophon [data-section="kadence_customizer_footer_social"] .widget-title,
    #colophon [data-section="kadence_customizer_footer_social"] > h2,
    #colophon [data-section="kadence_customizer_footer_social"] h2:first-child,
    #colophon .footer-social-wrap .footer-social-title {
        text-align: center !important;
    }

    #colophon .footer-navigation,
    #colophon .footer-navigation .footer-menu-container {
        width: 100% !important;
    }

    #colophon .footer-navigation .footer-menu-container > ul,
    #colophon .footer-navigation .menu,
    #colophon .footer-social-inner-wrap {
        align-items: center !important;
        justify-content: center !important;
    }

    #colophon .footer-navigation .menu > li,
    #colophon .footer-navigation .menu > li > a,
    #colophon .footer-social-inner-wrap .footer-social-item {
        text-align: center !important;
    }

}


/* =========================================================
   MAMAHOOD FOOTER — FINAL POLISH v3
   - Desktop brand aligns with Explore / Follow Us headings
   - Mobile brand is fully centred
   - Mobile adds clearer separation before Follow Us
   ========================================================= */

/* ---------------------------------------------------------
   DESKTOP — lift brand block so the logo begins on the same
   visual line as the Explore and Follow Us headings.
   --------------------------------------------------------- */
@media (min-width: 1024px) {

    #colophon .site-footer-middle-section-1 .footer-widget-area {
        transform: translateY(-28px) !important;
    }

}


/* ---------------------------------------------------------
   MOBILE — centre the complete branding area and give
   Follow Us a little more breathing room below Explore.
   --------------------------------------------------------- */
@media (max-width: 767px) {

    #colophon .site-footer-middle-section-1,
    #colophon .site-footer-middle-section-1 .footer-widget-area,
    #colophon .site-footer-middle-section-1 .widget,
    #colophon .site-footer-middle-section-1 .widget_block,
    #colophon .site-footer-middle-section-1 figure,
    #colophon .site-footer-middle-section-1 .wp-block-image,
    #colophon .site-footer-middle-section-1 p {
        text-align: center !important;
    }

    #colophon .site-footer-middle-section-1 img {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    #colophon .site-footer-middle-section-1 .custom-logo-link,
    #colophon .site-footer-middle-section-1 .wp-block-image a,
    #colophon .site-footer-middle-section-1 figure a {
        display: inline-block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Separate Explore and Follow Us so they read as two sections. */
    #colophon .site-footer-middle-section-3 {
        margin-top: 14px !important;
    }

}


/* =========================================================
   MAMAHOOD MOBILE NAVIGATION DRAWER
   Brand polish — navy drawer replaces Kadence's default black.
   Scoped to Kadence's #mobile-drawer so desktop navigation and
   other popup drawers are not affected.
   ========================================================= */

/* Drawer panel */
#mobile-drawer .drawer-inner {
    background: #073570 !important;
    color: #FFFFFF !important;
}

/* Dim the page behind the drawer without using a heavy black veil. */
#mobile-drawer .drawer-overlay {
    background: rgba(7, 53, 112, 0.28) !important;
}

/* Close control */
#mobile-drawer .menu-toggle-close,
#mobile-drawer .menu-toggle-close:hover,
#mobile-drawer .menu-toggle-close:focus {
    color: #FFFFFF !important;
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}

#mobile-drawer .menu-toggle-close .toggle-close-bar {
    background: #FFFFFF !important;
}

/* Main mobile navigation links */
#mobile-drawer #mobile-site-navigation .menu > li,
#mobile-drawer #mobile-site-navigation .menu > li > a {
    border-color: rgba(255, 255, 255, 0.14) !important;
}

#mobile-drawer #mobile-site-navigation .menu > li > a,
#mobile-drawer .mobile-navigation .menu > li > a {
    color: #FFFFFF !important;
}

/* Current / active destination uses the Mamahood raspberry. */
#mobile-drawer #mobile-site-navigation .menu > li.current-menu-item > a,
#mobile-drawer #mobile-site-navigation .menu > li.current_page_item > a,
#mobile-drawer #mobile-site-navigation .menu > li.current-menu-ancestor > a,
#mobile-drawer .mobile-navigation .menu > li.current-menu-item > a,
#mobile-drawer .mobile-navigation .menu > li.current_page_item > a,
#mobile-drawer .mobile-navigation .menu > li.current-menu-ancestor > a {
    color: #F23883 !important;
}

/* Hover / keyboard focus */
#mobile-drawer #mobile-site-navigation .menu > li > a:hover,
#mobile-drawer #mobile-site-navigation .menu > li > a:focus,
#mobile-drawer .mobile-navigation .menu > li > a:hover,
#mobile-drawer .mobile-navigation .menu > li > a:focus {
    color: #F23883 !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

/* Submenu links, if any are added later. */
#mobile-drawer .drawer-navigation .sub-menu {
    background: rgba(255, 255, 255, 0.035) !important;
}

#mobile-drawer .drawer-navigation .sub-menu a {
    color: rgba(255, 255, 255, 0.90) !important;
}

#mobile-drawer .drawer-navigation .sub-menu a:hover,
#mobile-drawer .drawer-navigation .sub-menu a:focus {
    color: #F23883 !important;
}