/* =====================================================
   FIX 1: SP Page Builder "Edit Page" button — push below
   the 140px header so it does not overlap the nav bar.
   ===================================================== */
#sp-page-builder .sp-pagebuilder-page-edit {
    top: 150px !important;
}

/* =====================================================
   FIX 2: Joomla admin "Edit Module" pencil icon inside
   .jn-user-menu sits in normal flow and pushes the
   JBDirectory content below the header. Pull it out of
   flow so it has zero effect on layout height.
   ===================================================== */
.jn-user-menu .sp-module {
    position: relative;
}

.jn-user-menu .btn.btn-link.jmodedit {
    position: absolute !important;
    top: -10px;
    left: -10px;
    z-index: 10002;
}

/* =====================================================
   FIX 3: Browser default 16px bottom margin on ul.user-menu
   inflates .jbd-mod-user beyond the 70px .jn-user-menu
   container, pushing Dashboard + Add Listing below the
   header. Zero it out.
   ===================================================== */
.jn-user-menu .jbd-user-menu .user-menu {
    margin-bottom: 0;
}

/* =====================================================
   FIX 4: Pin jn-user-menu to the far-right INSIDE the gray
   header bar, inline with the main nav.

   .sp-megamenu-wrapper is already display:flex; align-items:center;
   height:100% from the template. jn-user-menu is the first child
   in the DOM. margin-left:auto pushes it to the right edge of the
   flex row without needing order hacks. flex-shrink:0 prevents it
   from being squeezed when the nav items are wide.
   ===================================================== */
.sp-megamenu-wrapper .jn-user-menu {
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    align-self: stretch;
}

/* Ensure the inner module wrapper doesn't introduce extra height */
.sp-megamenu-wrapper .jn-user-menu .sp-module,
.sp-megamenu-wrapper .jn-user-menu .sp-module-content {
    display: flex;
    align-items: center;
    height: 100%;
}

/* On mobile (<992px) stack normally — don't interfere with offcanvas */
@media (max-width: 991.98px) {
    .sp-megamenu-wrapper .jn-user-menu {
        margin-left: 0;
        align-self: auto;
    }
}

/* =====================================================
   JBDirectory — 16:9 image containers for signage
   Covers both layout types used on search/listing pages:
   - list view:  .item-image-cover  (list-style-1/2/3)
   - grid view:  .jitem-img-wrap    (list-grid-1/2/3)
   Loaded last — wins over all JBD stylesheets.
   ===================================================== */

/* LIST VIEW — item-image-cover */
#search-results .item-image-cover,
.jbd-container .result-item .item-image-cover,
.list-style-1 .item-image-cover,
.list-style-2 .item-image-cover,
.list-style-3 .item-image-cover {
    aspect-ratio: 16 / 9 !important;
    min-height: unset !important;
    height: auto !important;
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    display: block !important;
}

#search-results .item-image-cover img,
.jbd-container .result-item .item-image-cover img,
.list-style-1 .item-image-cover img,
.list-style-2 .item-image-cover img,
.list-style-3 .item-image-cover img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

#search-results .item-image-cover a,
.jbd-container .result-item .item-image-cover a,
.list-style-1 .item-image-cover a,
.list-style-2 .item-image-cover a,
.list-style-3 .item-image-cover a {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
}

/* GRID VIEW — jitem-img-wrap */
.jbd-grid-container .jitem-card .jitem-img-wrap,
.jbd-container .jitem-card .jitem-img-wrap {
    aspect-ratio: 16 / 9 !important;
    min-height: unset !important;
    height: auto !important;
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    display: block !important;
}

.jbd-grid-container .jitem-card .jitem-img-wrap > img,
.jbd-container .jitem-card .jitem-img-wrap > img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    margin: 0 !important;
}

.jbd-grid-container .jitem-card .jitem-img-wrap > a,
.jbd-container .jitem-card .jitem-img-wrap > a {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2;
}

.jbd-grid-container .jitem-card .jitem-img-wrap .card-hoverable,
.jbd-container .jitem-card .jitem-img-wrap .card-hoverable {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}


/* =====================================================
   HEADER NAV FIX: Login/Create Account on two lines
   + Prevents SPONSORS dropdown arrow overlap with Login
   Applied: Enterprise-level header layout correction
   ===================================================== */

/* Make the nav wrapper flex-column so user menu row is
   above the main nav row — gives nav items full width */
#sp-menu nav.sp-megamenu-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    width: 100% !important;
}

/* User menu row: no float, stacks above the nav UL */
#sp-menu nav.sp-megamenu-wrapper .jn-user-menu {
    float: none !important;
    margin-left: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    height: auto !important;
    line-height: normal !important;
    min-height: 40px !important;
    width: 100% !important;
    padding-top: 6px !important;
    padding-bottom: 2px !important;
}

/* Break "Login" and "Create an account" onto two lines */
#sp-menu .user-area.signin-area {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: center !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
    text-align: right !important;
}

/* "Login" link — its own row */
#sp-menu .user-area.signin-area > a[href="#jbd-user-login"] {
    display: block !important;
    line-height: 1.5 !important;
}

/* Remove "or" separator — redundant with stacked layout */
#sp-menu .user-area.signin-area .allow-registration > span:first-child {
    display: none !important;
}

/* "Create an account" — its own row */
#sp-menu .user-area.signin-area .allow-registration {
    display: block !important;
}

/* Hide decorative user icon to reduce width */
#sp-menu .user-area.signin-area > i.fa-user {
    display: none !important;
}

/* Main nav UL: flex-row taking full width, all items on one line */
#sp-menu nav.sp-megamenu-wrapper ul.sp-megamenu-parent {
    float: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
}

/* Menu items: inline-flex for clean alignment */
#sp-menu ul.sp-megamenu-parent > li {
    display: flex !important;
    align-items: center !important;
}

/* FIX: Dropdown arrow — use inline-flex gap instead of float:right
   Prevents SPONSORS caret from spilling outside its li element */
#sp-menu ul.sp-megamenu-parent > li.sp-has-child > a,
#sp-menu ul.sp-megamenu-parent > li.sp-has-child > span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

body.ltr #sp-menu .sp-megamenu-parent > li.sp-has-child > a::after,
body.ltr #sp-menu .sp-megamenu-parent > li.sp-has-child > span::after {
    float: none !important;
    margin-left: 0 !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

/* ================================================
   FIX: Desktop header alignment - clean single row
   - Hide hamburger toggler on desktop
   - Logo vertically centred
   - Nav links left of Login/Create account
   - Login / Create an account stacked layout PRESERVED
   ================================================ */
@media (min-width: 992px) {

    /* Hide hamburger - it was pushing the logo down */
    #sp-logo #offcanvas-toggler {
        display: none !important;
    }

    /* Logo column: vertically centre the logo image */
    #sp-logo .sp-column {
        display: flex !important;
        align-items: center !important;
        height: 100% !important;
    }

    /* Nav wrapper: single ROW - logo, nav links, then user menu */
    #sp-menu nav.sp-megamenu-wrapper {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        height: 100% !important;
        gap: 20px !important;
    }

    /* Nav UL (AFFILIATES / FUNDRAISING etc) - order 1, fill available space */
    #sp-menu nav.sp-megamenu-wrapper ul.sp-megamenu-parent {
        order: 1 !important;
        flex: 1 1 auto !important;
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;
        /* Reverted to flex-end per request: main nav packs to the RIGHT,
           next to the Login/Create-account user menu (this is the original
           pre-shift position). Shared across all MightySites slaves via this
           fleet-wide custom.css. */
        justify-content: flex-end !important;
    }

    /* User menu (Login / Create an account) - order 2, fixed width on far right */
    #sp-menu nav.sp-megamenu-wrapper .jn-user-menu {
        order: 2 !important;
        float: none !important;
        margin-left: 0 !important;
        width: auto !important;
        flex-shrink: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        align-self: center !important;
    }
}

/* FLEET-BLACK-HEADER-START
   Restores the solid black top header across ALL slaves.
   custom.css loads LAST in the j-network cascade, so this overrides
   presets/default.css (#sp-header{background:#8a8282}) and template.css
   (#sp-header:not(.header-sticky){background:rgba(0,0,0,0)}).
   This is the consistent, fleet-wide header color. Per-site styling
   (logo, menu content, etc.) remains independently editable per slave. */
#sp-header,
#sp-header.header-sticky,
#sp-header:not(.header-sticky),
.home-page #sp-header:not(.header-sticky),
.transparent-jc-menu #sp-header:not(.header-sticky) {
    background: #000000 !important;
}
/* FLEET-BLACK-HEADER-END */