/* Admin Toolbar Override to Fix Overflow Issues */
/* Attempt to beat the specific selector from Gin/Admin Toolbar */
:is(#extra-specificity-hack, [data-drupal-admin-styles]) .admin-toolbar__content {
    overflow-y: visible !important;
    overflow-x: visible !important;
    overflow: visible !important;
    display: flex !important;
    /* Ensure flex behavior is kept */
}

/* Ensure submenus are visible */
.toolbar-menu__sub {
    display: block !important;
    /* or whatever is needed */
}

/* 
 * OVERRIDE CORE DRUPAL NAVIGATION MODULE 
 * File: core/modules/navigation/css/components/admin-toolbar.css
 * Issue: Sets overflow-y: auto on larger screens, hiding pop-out menus
 */
:root:has(.admin-toolbar) .admin-toolbar__content,
.admin-toolbar__content {
    overflow-y: visible !important;
    overflow-x: visible !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
}

/* ============================================================
   STICKY NAV FIX — USING position: fixed
   
   position: sticky does NOT work when ANY ancestor between
   the sticky element and the viewport has overflow other than
   'visible'. Bootstrap, Tailwind, and Drupal core all add
   overflow-x: hidden to html, body, or wrapper divs.
   
   position: fixed ignores all ancestor overflow entirely.
   We compensate for the removed flow space with body padding.
   ============================================================ */

/* Use overflow-x: clip instead of hidden on html/body.
   'clip' prevents horizontal overflow just like 'hidden',
   but does NOT create a new scroll container, which means
   sticky positioning still works for descendants.
   This is the modern replacement for overflow-x: hidden. */
html,
body {
    overflow-x: clip !important;
}

/* The nav itself — fixed to viewport top */
.ibew-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 500 !important;
    width: 100% !important;
}

/* CiviCRM notification: civicrm.css sets z-index:999999 and top:45px.
   Drop it below ibew-nav (z-index:500) AND push it down past the nav bar
   so it cannot intercept clicks on the hamburger toggle. */
#crm-notification-container {
    z-index: 499 !important;
    top: calc(var(--ibew-nav-height, 91px) + 10px) !important;
}

body.admin-toolbar-expanded #crm-notification-container {
    z-index: 499 !important;
    top: calc(var(--ibew-nav-height, 91px) + 56px + 10px) !important;
}

/* On CiviCRM pages the hamburger IS the site nav (no desktop links configured).
   The theme SCSS hides .nav-mobile__toggle and .nav-mobile at ≥1200px;
   override that for civicrm pages so it works at every viewport size.
   body.page-civicrm is added explicitly by ibew_theme_preprocess_html. */
body.page-civicrm .nav-mobile__toggle {
    display: inline-flex !important;
}

body.page-civicrm #nav-mobile.nav-mobile--open {
    display: block !important;
}

/* Push the page content down so it doesn't hide behind the fixed nav.
   The nav is roughly 70-80px tall. We use a CSS variable so JS can
   set the exact height, with 75px as a safe default. */
body {
    padding-top: var(--ibew-nav-height, 75px) !important;
}

/* When the Drupal admin toolbar is present, the fixed nav
   needs to account for the toolbar's own height. */
body.admin-toolbar-expanded .ibew-nav {
    top: 56px !important;
    /* Height of Drupal admin toolbar */
}

body.admin-toolbar-expanded {
    padding-top: calc(var(--ibew-nav-height, 75px) + 56px) !important;
}

/* Ancestors: ensure they don't break anything */
.layout-container,
.ibew-page {
    overflow-x: clip !important;
    overflow-y: visible !important;
    height: auto !important;
}

/* ============================================================
   CIVICRM Z-INDEX FIXES
   The theme mobile nav sits at z-index 9999–10002 (splash overlay,
   hamburger toggle, close button). Five CiviCRM UI elements are at
   9999 or below and therefore render behind the nav or the hamburger.
   Bump them all to 10050: above the nav stack but below jQuery UI
   dialogs (fixed at 10200 by dialog_fix.js).
   ============================================================ */

/* 1. Select2 dropdowns — contact/tag/group pickers on all edit forms.
   Must exceed the jQuery UI dialog z-index (10200) so the drop renders
   above the dialog when opened from inside a modal. */
.select2-drop,
.select2-drop-active {
    z-index: 10210 !important;
}

/* 2. jQuery UI date pickers — event/contribution/activity/membership dates */
.crm-container .ui-datepicker,
.ui-datepicker {
    z-index: 10050 !important;
}

/* 3. btn-slide action panel dropdowns — Settings/Edit menus on list pages
   (Profiles, Groups, Events, Custom Fields, etc.) */
.crm-container ul.panel {
    z-index: 10050 !important;
}

/* 4. Contact summary hover tooltips — hover popup on contact name links */
.crm-container .crm-tooltip-wrapper {
    z-index: 10050 !important;
}

/* 5. Recently Viewed contacts panel — dropdown from CiviCRM menubar clock icon */
#crm-recently-viewed .crm-recentview-wrapper {
    z-index: 10050 !important;
}

/* ============================================================
   MOBILE HERO LOGO CENTERING
   ============================================================ */
@media (max-width: 768px) {

    /* The hero content wrapper must center its children */
    .ibew-hero-content-wrapper,
    .ibew-hero-content-wrapper .container,
    .ibew-region--hero-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* Center the logo field and all its Drupal wrappers */
    .ibew-region--hero-content .field--name-field-hero-logo,
    .ibew-region--hero-content .hero-logo-wrapper,
    .ibew-region--hero-content .hero-logo-container,
    .ibew-region--hero-content .field--name-field-hero-logo .field__item {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* The logo image itself */
    .ibew-region--hero-content .hero-logo-wrapper img,
    .ibew-region--hero-content .hero-logo-container img,
    .ibew-region--hero-content .field--name-field-hero-logo img {
        display: block !important;
        margin: 0 auto !important;
        max-width: 200px !important;
        max-height: 120px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }

    /* Also center all Drupal blocks inside hero content */
    .ibew-region--hero-content .block {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }
}