/**
 * Card #1406 — center the site logo within the shared site-wide nav header
 * on mobile widths.
 *
 * The header (logo image widget + Jeg Kit nav-menu widget, in a shared
 * column pair) is duplicated per-page in Elementor rather than being a
 * single global template instance, so widget element IDs differ from page
 * to page. Target by widget type instead of ID so this applies uniformly:
 * the logo column is whichever column sits alongside the nav-menu column
 * inside the same row.
 *
 * Only the logo's own alignment changes — the nav-menu widget (hamburger
 * icon + its menu) is untouched, so it keeps opening the same site nav it
 * already opens today.
 */
@media (max-width: 767px) {
    .elementor-container:has(.elementor-widget-jkit_nav_menu) > .elementor-column:has(.elementor-widget-image) {
        text-align: center;
    }
    .elementor-container:has(.elementor-widget-jkit_nav_menu) > .elementor-column:has(.elementor-widget-image) .elementor-widget-image,
    .elementor-container:has(.elementor-widget-jkit_nav_menu) > .elementor-column:has(.elementor-widget-image) .elementor-widget-container,
    .elementor-container:has(.elementor-widget-jkit_nav_menu) > .elementor-column:has(.elementor-widget-image) img {
        margin-left: auto !important;
        margin-right: auto !important;
        float: none !important;
    }
    .elementor-container:has(.elementor-widget-jkit_nav_menu) > .elementor-column:has(.elementor-widget-image) img {
        display: block;
    }

    /*
     * Card #1408 — Member Dashboard theme-picker icon, relocated into this
     * shared nav bar by relocateDashboardThemeButtonIntoNav() in
     * gymmaster-frontend.js. Mirrors the same left-icon/centered-logo/
     * right-icon (hamburger) pattern already used on the Reserve a Cage
     * modal's header bar.
     *
     * The icon (.gm-dash-theme-wrap, with id #gmDashThemeBtn/#gmDashThemePanel
     * inside it) only ever exists in this page's DOM when the Member
     * Dashboard shortcode itself renders, so these rules are a no-op on
     * every other page even though this stylesheet loads sitewide — there
     * is nothing for the selector to match elsewhere.
     *
     * Card #1415: position:absolute (relative to this nav row) scrolled
     * away with the page instead of staying put, and John's live reopen
     * required it pinned to the screen at all times. position:fixed with
     * viewport-relative top/left makes it independent of both the nav
     * row's position and page scroll; the DOM relocation into the nav row
     * above still happens (harmless, and keeps the click handlers wired to
     * the same node) but no longer determines where the icon renders.
     */
    .elementor-container:has(.elementor-widget-jkit_nav_menu) {
        position: relative;
    }
    .elementor-container:has(.elementor-widget-jkit_nav_menu) > .gm-dash-theme-wrap {
        position: fixed;
        left: 12px;
        top: 12px;
        z-index: 50;
    }
    /* Re-anchor the dropdown panel to the icon's left edge instead of its
       default center — centered under a top-left icon would clip off the
       left edge of the viewport on narrow phones. */
    .elementor-container:has(.elementor-widget-jkit_nav_menu) > .gm-dash-theme-wrap .gm-dash-theme-panel {
        left: 0;
        transform: none;
    }

    /* Card #1415 (re-fix): the theme-picker badge above is a 36x36px fixed
       box at left:12/top:12 (x: 12-48px). Card #1406's centered logo lives
       in an 18%-wide column starting right after the header section's 20px
       padding — at 375-390px viewports that centers the (60%-wide) logo
       image at roughly x: 32-68px, squarely on top of the badge. Confirmed
       via post-306.css: the sibling nav-menu column is 82% wide with
       justify-content:flex-end, so the hamburger renders far to the right
       and there's ample empty space between the logo column's right edge
       and the hamburger for the logo to shift into without overlapping it.
       Scoped to dashboard pages via :has(.gymmaster-dashboard) so Card
       #1406's centered logo on every other mobile page is untouched. */
    body:has(.gymmaster-dashboard) .elementor-container:has(.elementor-widget-jkit_nav_menu) > .elementor-column:has(.elementor-widget-image) img {
        margin-left: 56px !important;
        margin-right: 0 !important;
    }
}