/* ==========================================================
   UNIFIED 3-COLUMN HEADER ALIGNMENT (LEFT AD, MIDDLE CONTENT, RIGHT AD)
   Ensures both side ads and middle content all start at the exact same level
   about 8px (5-10px) below the fixed header across all pages throughout Deen-ul-Islam.
   ========================================================== */

:root {
    --iad-header-height: 85px;
    --iad-header-gap: 8px;
    --iad-content-start: calc(var(--iad-header-height) + var(--iad-header-gap));
}

html, body {
    margin: 0 !important;
}

/* 1. Body padding sets the top boundary for the entire layout */
html body,
html body.nikahfinder-site,
html body.muslimancestry-site {
    padding-top: var(--iad-content-start) !important;
}

/* 2. Main layout grid wrapper starts immediately with no extra top inset */
.main-layout-wrapper {
    display: grid !important;
    grid-template-columns: 220px minmax(0, 1fr) 220px !important;
    gap: 20px !important;
    align-items: start !important; /* CRITICAL: Aligns all 3 columns to the exact same top edge */
    margin: 0 auto !important;
    padding-top: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 20px !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* 3. Both sidebars and content area start at top 0 within the grid */
.sidebar-left,
.sidebar-right,
.content-area,
.main-layout-wrapper > .sidebar-left,
.main-layout-wrapper > .sidebar-right,
.main-layout-wrapper > .content-area {
    margin-top: 0 !important;
    padding-top: 0 !important;
    top: 0 !important;
    position: relative !important;
    align-self: start !important;
    box-sizing: border-box !important;
}

/* 4. Sticky sidebar contents start at top 0 when un-scrolled, stick at header + gap when scrolled */
.sidebar-left .sidebar-content,
.sidebar-right .sidebar-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: sticky !important;
    top: var(--iad-content-start) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
}

/* 5. First ad items on both sides start at margin 0 */
.sidebar-left .am-ad-stack,
.sidebar-right .am-ad-stack,
.sidebar-left .sidebar-content > *:first-child,
.sidebar-right .sidebar-content > *:first-child,
.sidebar-left .am-ad-item:first-child,
.sidebar-right .am-ad-item:first-child,
.sidebar-left .ad-banner:first-child,
.sidebar-right .ad-banner:first-child,
.sidebar-left .dynamic-ad-block:first-child,
.sidebar-right .dynamic-ad-block:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 6. Content area top element starts at top 0 with no extra top margin */
.content-area > *:first-child {
    margin-top: 0 !important;
}

.content-area .page-breadcrumbs,
.content-area .pt-page,
.content-area .pref-wrap,
.content-area .mat-page-header-wrap,
.content-area .global-category-bar,
.content-area .breadcrumb-nav {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 7. Accessibility skip link should not push layout content */
.skip-to-main {
    position: absolute !important;
    top: -100px !important;
    left: 0 !important;
    z-index: 10000 !important;
}
.skip-to-main:focus {
    top: 0 !important;
}

/* Defensive dropdown rules to prevent un-hovered menus spilling into content */
.learning-nav-item .islamic-learning-dropdown,
.islamic-learning-dropdown {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 999999 !important;
}
.learning-nav-item:hover .islamic-learning-dropdown,
.learning-nav-item.islamic-learning-open .islamic-learning-dropdown {
    display: block !important;
}

/* --- Header Auto-Enclosing & Navigator Positioning Fix --- */
#mainHeader,
#ufoHeaderContent,
#headerMiddlePanel,
.header-container {
    height: auto !important;
    min-height: 80px !important;
    max-height: none !important;
    overflow: visible !important;
}

#headerMiddlePanel {
    padding-bottom: 6px !important;
}

#navigator-container {
    height: auto !important;
    overflow: visible !important;
    padding: 2px 0 4px 0 !important;
    margin-bottom: 2px !important;
}

/* --- MuslimAncestry and NikahFinder Hover & Dropdown Styles --- */
.muslimancestry-nav-item,
.nikahfinder-nav-item {
    position: relative !important;
}

.islamic-muslimancestry-dropdown,
.islamic-nikahfinder-dropdown {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 220px !important;
    max-height: min(70vh, 420px) !important;
    overflow-y: auto !important;
    background: #fff !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
    border-radius: 8px !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12) !important;
    padding: 6px 0 !important;
    z-index: 999999 !important;
}

/* Invisible hover bridge to eliminate hover flicker */
.islamic-muslimancestry-dropdown::before,
.islamic-nikahfinder-dropdown::before {
    content: "" !important;
    position: absolute !important;
    top: -20px !important;
    left: 0 !important;
    right: 0 !important;
    height: 20px !important;
    background: transparent !important;
}

/* Active hover selectors for CSS */
.muslimancestry-nav-item:hover .islamic-muslimancestry-dropdown,
.muslimancestry-nav-item.islamic-muslimancestry-open .islamic-muslimancestry-dropdown,
.nikahfinder-nav-item:hover .islamic-nikahfinder-dropdown,
.nikahfinder-nav-item.islamic-nikahfinder-open .islamic-nikahfinder-dropdown {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.islamic-muslimancestry-dropdown a,
.islamic-nikahfinder-dropdown a {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    color: #0f172a !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.islamic-muslimancestry-dropdown a:hover {
    background: #f1f5f9 !important;
    color: #0ea5e9 !important;
}

.islamic-nikahfinder-dropdown a:hover {
    background: #fdf2f8 !important;
    color: #e11d48 !important;
}

.islamic-muslimancestry-dropdown i,
.islamic-nikahfinder-dropdown i {
    width: 16px !important;
    text-align: center !important;
}