/* ==========================================================================
   Cape/Astra + Angular/Bootstrap Integration Overrides
   Keep this file small and targeted. Loaded AFTER Astra CSS.
   ========================================================================== */

/* 1) Hide Astra mobile header markup (SPA does not run Astra's JS) */
.ast-mobile-header-wrap,
.ast-mobile-header-content {
    display: none !important;
}

/* 2) Keep header above SPA content */
.site-header {
    position: relative;
    z-index: 1000;
}

/* 3) Predictable sizing inside SPA */
.app-content,
.app-content * {
    box-sizing: border-box;
}

    /* 4) Prevent Astra container rules from fighting Bootstrap grid inside SPA */
    .app-content .container {
        max-width: none;
    }

    /* 5) If you use Bootstrap dropdowns inside SPA, keep them above content */
    .app-content .dropdown-menu {
        z-index: 2000;
    }

/* ==========================================================================
   Header: Colors (force black like capeareawarmingcenter.org)
   ========================================================================== */
#masthead .main-header-menu > li > a,
#masthead .main-header-menu > li > a.menu-link {
    color: #000 !important;
}

    #masthead .main-header-menu > li:hover > a,
    #masthead .main-header-menu > li:hover > a.menu-link,
    #masthead .main-header-menu > li > a:focus,
    #masthead .main-header-menu > li > a:active {
        color: #000 !important;
    }

/* Dropdown arrow color matches text */
#masthead .dropdown-menu-toggle,
#masthead .dropdown-menu-toggle svg {
    color: #000 !important;
    fill: currentColor !important;
}

/* Footer social icon/link color */
#colophon .ast-builder-social-element,
#colophon .ast-builder-social-element svg,
#colophon .ast-builder-social-element path,
#colophon a[aria-label="Facebook"] {
    color: #000 !important;
    fill: currentColor !important;
}

/* ==========================================================================
   Header: Dropdown styling (Astra-like)
   ========================================================================== */

/* Parent items that have children need a positioning context */
#masthead .main-header-menu,
#masthead .main-header-menu > li.menu-item-has-children {
    position: relative;
}

    /* Dropdown panel */
    #masthead .main-header-menu > li.menu-item-has-children > ul.sub-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 240px;
        z-index: 99999;
        list-style: none;
        margin: 0;
        padding: 10px 0;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.12);
        border-radius: 4px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        float: none !important; /* avoid Bootstrap influence */
    }

    /* Show on hover (desktop) */
    #masthead .main-header-menu > li.menu-item-has-children:hover > ul.sub-menu {
        display: block;
    }

    /* Submenu items/links */
    #masthead .main-header-menu > li.menu-item-has-children > ul.sub-menu > li {
        margin: 0;
        padding: 0;
    }

        #masthead .main-header-menu > li.menu-item-has-children > ul.sub-menu > li > a,
        #masthead .main-header-menu > li.menu-item-has-children > ul.sub-menu > li > a.menu-link {
            display: block;
            padding: 10px 16px;
            line-height: 1.25;
            text-decoration: none;
            white-space: nowrap;
            color: #000 !important;
            background: transparent;
        }

            #masthead .main-header-menu > li.menu-item-has-children > ul.sub-menu > li > a:hover,
            #masthead .main-header-menu > li.menu-item-has-children > ul.sub-menu > li > a:focus {
                background: rgba(0, 0, 0, 0.06);
                color: #000 !important;
            }

/* ==========================================================================
   Header: Alignment (title + menu baseline, menu right-aligned to container)
   ========================================================================== */

/* Vertically center the header row */
#masthead .ast-builder-grid-row,
#masthead .ast-builder-grid-row-has-sides {
    align-items: center !important;
}

/* Make the left/right header areas flex-centered */
#masthead .site-header-primary-section-left,
#masthead .site-header-primary-section-right {
    display: flex;
    align-items: center;
}

/* Push nav all the way to the right edge of the ast-container */
#masthead .site-header-primary-section-right {
    margin-left: auto;
    justify-content: flex-end;
}

/* Ensure nav aligns to the right and centers vertically */
#masthead .ast-main-header-bar-alignment,
#masthead nav.site-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}

/* Keep menu items centered vertically */
#masthead ul.main-header-menu {
    display: flex;
    align-items: center;
    margin: 0;
}

/* Tighten title box to match menu baseline */
#masthead .ast-site-title-wrap,
#masthead .site-title,
#masthead .site-title a {
    display: inline-flex;
    align-items: center;
    line-height: 1 !important;
}


/* Astra color override for Bootstrap success button */
.btn.btn-success {
    background-color: #971816 !important;
    border-color: #971816 !important;
    color: #ffffff !important;
}

    .btn.btn-success:hover,
    .btn.btn-success:focus,
    .btn.btn-success:active {
        background-color: #99582A !important;
        border-color: #99582A !important;
        color: #ffffff !important;
    }