/* MuslimAncestry Theme - Minimalist Single Unit Header */

:root {
    --muslimancestry-purple-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --muslimancestry-purple-solid: #764ba2;
    --muslimancestry-text-white: #ffffff;
    --muslimancestry-text-muted: #e5e7ff;
    --header-text-dark: #333333;

    /* Override global GLRelief variables to force color change */
    --glrcf-middle-bg: var(--muslimancestry-purple-gradient);
    --glrcf-header-bg: var(--muslimancestry-purple-gradient);
    --glrcf-header-border: rgba(255, 255, 255, 0.1);
}

/* 1. HEADER OVERRIDES - Single Unit (Middle Panel Only) */

/* Show the Top Bar (Row 1) on muslimancestry site (to keep search bar visible) */
body.muslimancestry-site header#mainHeader .header-row1,
body.muslimancestry-site header#mainHeader .row:first-child {
    display: flex !important;
}

/* Make the main header container transparent and remove its "unit" look */
/* Increase height to accommodate the new sub-navigation row */
body.muslimancestry-site header#mainHeader,
body.muslimancestry-site #mainHeader {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    top: 5px !important;
    height: 90px !important;
    /* Compact height for MuslimAncestry */
    min-height: 90px !important;
    max-height: 90px !important;
}

@media (max-width: 980px) {
    body.muslimancestry-site header#mainHeader,
    body.muslimancestry-site #mainHeader {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body.muslimancestry-site #headerMiddlePanel {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        padding-bottom: 8px !important;
    }

    /* Stack: top bar → search → navigator */
    body.muslimancestry-site #headerMiddlePanel > .header-top-bar {
        order: 1 !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-height: 24px !important;
        overflow: visible !important;
    }

    body.muslimancestry-site #headerMiddlePanel .header-top-bar {
        position: relative !important;
    }

    body.muslimancestry-site #headerMiddlePanel .header-top-bar .top-bar-brand-mobile {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        color: #5b21b6 !important;
        text-align: center !important;
        text-transform: uppercase !important;
        letter-spacing: 0.05em !important;
        z-index: 3 !important;
        pointer-events: none !important;
        max-width: none !important;
        white-space: nowrap !important;
        line-height: 1.2 !important;
    }

    /* Mobile top row: icons only, no text labels */
    body.muslimancestry-site .header-top-bar > .top-bar-left,
    body.muslimancestry-site .header-top-bar > .top-bar-right {
        gap: 4px !important;
    }

    body.muslimancestry-site .header-top-bar > .top-bar-left > a,
    body.muslimancestry-site .header-top-bar > .top-bar-right > a,
    body.muslimancestry-site .header-top-bar .top-bar-left > .top-bar-dropdown-wrap > a,
    body.muslimancestry-site .header-top-bar .top-bar-right > .top-bar-dropdown-wrap > a,
    body.muslimancestry-site .header-top-bar .top-bar-right span a {
        padding: 0 3px !important;
        margin: 0 !important;
        font-size: 0 !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    body.muslimancestry-site .header-top-bar > .top-bar-left > a i,
    body.muslimancestry-site .header-top-bar > .top-bar-right > a i,
    body.muslimancestry-site .header-top-bar .top-bar-left > .top-bar-dropdown-wrap > a > i,
    body.muslimancestry-site .header-top-bar .top-bar-right > .top-bar-dropdown-wrap > a > i,
    body.muslimancestry-site .header-top-bar .top-bar-right span a i {
        font-size: 12px !important;
        margin: 0 !important;
        opacity: 1 !important;
    }

    body.muslimancestry-site .header-top-bar .header-icon-btn {
        width: 22px !important;
        height: 22px !important;
        padding: 0 !important;
        border-radius: 6px !important;
    }

    body.muslimancestry-site .header-top-bar .header-icon-btn i {
        font-size: 12px !important;
    }

    body.muslimancestry-site .header-top-bar .cell.right {
        gap: 4px !important;
    }

    body.muslimancestry-site .header-top-bar span.sep,
    body.muslimancestry-site .header-top-bar .top-bar-dropdown-wrap > a i.fa-caret-down {
        display: none !important;
    }

    body.muslimancestry-site .header-top-bar .top-bar-dropdown a {
        font-size: 12px !important;
        display: block !important;
    }

    body.muslimancestry-site .header-top-bar .top-bar-dropdown a i {
        font-size: 12px !important;
        margin-right: 6px !important;
    }

    body.muslimancestry-site #headerMiddlePanel > .header-row1,
    body.muslimancestry-site #headerMiddlePanel > .mobile-header-row1 {
        order: 2 !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        position: relative !important;
        transform: translateY(-15px) !important;
    }

    body.muslimancestry-site #headerMiddlePanel > .logo-wrapper {
        order: 3 !important;
        display: flex !important;
        position: absolute !important;
        left: 10px !important;
        bottom: 4px !important;
        transform: translateY(15px) !important;
        z-index: 10001 !important;
        margin: 0 !important;
    }

    body.muslimancestry-site #headerMiddlePanel > #headerSecondRow,
    body.muslimancestry-site #headerMiddlePanel > .header-second-row {
        order: 4 !important;
        flex: 0 0 auto !important;
        align-self: stretch !important;
        width: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: translateY(-20px) !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body.muslimancestry-site #headerMiddlePanel .hamburger-search-wrapper {
        padding-left: 23px !important;
        padding-right: 8px !important;
        width: 100% !important;
    }

    body.muslimancestry-site #headerMiddlePanel .search-filter-container,
    body.muslimancestry-site #headerMiddlePanel #searchWrapper,
    body.muslimancestry-site #headerMiddlePanel .search-box {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body.muslimancestry-site #mainHeader .muslimancestry-nav {
        display: flex !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        justify-content: center !important;
        align-content: flex-start !important;
        gap: 1px !important;
        row-gap: 1px !important;
        column-gap: 1px !important;
    }

    body.muslimancestry-site #mainHeader .muslimancestry-nav-dropdown-wrap {
        overflow: visible !important;
    }

    body.muslimancestry-site #mainHeader .muslimancestry-nav-btn {
        flex: 0 0 auto !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 1px !important;
        min-width: 0 !important;
        max-width: none !important;
        font-size: 0 !important;
        line-height: 1.1 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        white-space: normal !important;
        text-align: center !important;
        padding: 1px 2px !important;
    }

    body.muslimancestry-site #mainHeader .muslimancestry-nav-btn > i {
        display: block !important;
        font-size: 11px !important;
        margin: 0 !important;
        line-height: 1 !important;
        visibility: visible !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
    }

    body.muslimancestry-site #mainHeader .muslimancestry-nav-btn .muslimancestry-nav-label {
        display: block !important;
        font-size: 8px !important;
        font-weight: 600 !important;
        line-height: 1.15 !important;
        color: #1a1a1a !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        max-width: 56px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        visibility: visible !important;
    }
}

@media (max-width: 1024px) {
    body.muslimancestry-site #mainHeader {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }
}

header#mainHeader::before {
    display: none !important;
    /* Remove any pseudo-element backgrounds */
}

/* The Middle Panel: The "One Single Unit" */
body.muslimancestry-site header#mainHeader .header-container,
body.muslimancestry-site #headerMiddlePanel {
    background: #d8b4fe !important;
    /* Visible Heritage Lavender */
    color: #1a1a1a !important;
    /* Rich Charcoal Black */
    border-radius: 18px !important;
    /* Blends into top */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #c084fc !important;
    /* Slightly darker border */
    height: 90px !important;
    min-height: 90px !important;
    max-height: 90px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* Ensure all text and icons are Black for maximum visibility */
body.muslimancestry-site header#mainHeader .nav-text,
body.muslimancestry-site header#mainHeader .logo-expanded-title,
body.muslimancestry-site header#mainHeader .nav-link,
body.muslimancestry-site header#mainHeader .header-icon-row i,
body.muslimancestry-site header#mainHeader .nav-item a,
body.muslimancestry-site header#mainHeader .nav-item i,
body.muslimancestry-site header#mainHeader a,
body.muslimancestry-site header#mainHeader i,
body.muslimancestry-site header#mainHeader span {
    color: #1a1a1a !important;
    text-shadow: none !important;
}

/* Search box styling - Pure White for contrast */
body.muslimancestry-site header#mainHeader #searchWrapper .search-box {
    background: #ffffff !important;
    border: 1px solid #d1d5db !important;
}

body.muslimancestry-site header#mainHeader #oldSearchInput,
body.muslimancestry-site header#mainHeader #searchCategory {
    background: transparent !important;
    color: #1a1a1a !important;
    border: none !important;
}

/* Logo: Restore original colors on white background */
body.muslimancestry-site header#mainHeader .logo-wrapper img,
body.muslimancestry-site header#mainHeader .logo-container img {
    filter: none !important;
}

/* Search box styling for White theme */
body.muslimancestry-site header#mainHeader #oldSearchInput,
body.muslimancestry-site header#mainHeader #searchCategory {
    background: #f8f9fa !important;
    color: var(--header-text-dark) !important;
    border: 1px solid #e0e0e0 !important;
}

body.muslimancestry-site header#mainHeader #oldSearchInput::placeholder {
    color: #999999 !important;
}

/* Ensure the second row (navigator) is part of this single unit with requested gap */
header#mainHeader .header-second-row {
    background: transparent !important;
    /* margin-top is handled in MuslimAncestry/header.php and foundation/header.php as 7px */
}

/* 2. FOOTER OVERRIDES - Purple for main footer ONLY */

/* Social Media Strip: White */
.layer-social {
    background: #ffffff !important;
    border-top: 1px solid #eeeeee !important;
    border-bottom: 1px solid #eeeeee !important;
}

.layer-social .social-bubble {
    color: #64748b !important;
}

/* Main Footer Container: PURPLE */
#filing-cabinet-footer {
    background: var(--muslimancestry-purple-gradient) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Cabinet Tabs in Footer */
.cabinet-tab {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--muslimancestry-text-white) !important;
    border-radius: 8px 8px 0 0 !important;
}

.cabinet-tab:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

/* Copyright Bar: PURPLE */
.layer-copyright {
    background: var(--muslimancestry-purple-solid) !important;
    color: var(--muslimancestry-text-muted) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.layer-copyright a {
    color: var(--muslimancestry-text-white) !important;
}

/* Link colors in purple footer sections */
#filing-cabinet-footer a,
#filing-cabinet-footer i,
#filing-cabinet-footer h3,
#filing-cabinet-footer h4 {
    color: var(--muslimancestry-text-white) !important;
}

#filing-cabinet-footer .footer-group a {
    color: var(--muslimancestry-text-muted) !important;
}

#filing-cabinet-footer .footer-group a:hover {
    color: var(--muslimancestry-text-white) !important;
}

/* Drawer panels use light background — do not force white text */
body.muslimancestry-site #filing-cabinet-footer .footer-drawer-panel h3,
body.muslimancestry-site #filing-cabinet-footer .footer-drawer-panel h4,
body.muslimancestry-site #filing-cabinet-footer .footer-drawer-panel a,
body.muslimancestry-site #filing-cabinet-footer .footer-drawer-panel i,
body.muslimancestry-site #filing-cabinet-footer .footer-drawer-panel .footer-az-letter {
    color: inherit;
}