/* Mobile bottom nav — YMCA Midsize 2026 (Menu A, phone only) Editable template part (parts/mobile-nav.html) referenced from footer.html. Hidden by default; shown as a fixed app-style bar only at <=500px, where the header drops Register/Login/search (see header.css). */ /* !important: the group renders is-layout-flex, and core's generated .wp-container-…-is-layout-flex { display:flex } otherwise wins over this base hide above the breakpoint. */ .bmg-mobile-nav { display: none !important; } @media (max-width: 500px) { .bmg-mobile-nav { display: flex !important; position: fixed; inset: auto 0 0 0; z-index: 1000; justify-content: space-around; align-items: center; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--primary-dk); border-top: 3px solid var(--primary-lt); /* thin light-blue rule on top (comp) — #30 */ box-shadow: 0 -2px 12px #00000022; } .bmg-mobile-nav__item { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; } .bmg-mobile-nav__item .ymca-icon { color: var(--white); } .bmg-mobile-nav__label { margin: 0; font-size: 13px; font-weight: 700; text-transform: uppercase; line-height: 1; letter-spacing: -0.01em; } .bmg-mobile-nav__label a { color: var(--white); text-decoration: none; } /* stretched link — the whole item is tappable via the label's href */ .bmg-mobile-nav__item .bmg-mobile-nav__label a::after { content: ""; position: absolute; inset: 0; } /* keep the fixed bar from covering the footer's bottom content: reserve the room INSIDE the blue footer (24px own padding + ~70px bar) instead of as .wp-site-blocks padding, which showed as a white strip under the footer. !important: the pattern sets padding-bottom inline. */ .bmg-footer { padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px)) !important; } } /* Block editor canvas only: the bar is display:none above 500px on the front end, which would leave the Site Editor canvas empty when a client opens "Mobile Nav" to edit it. Show it statically (not fixed) here so the three items are visible and selectable. The canvas carries .editor-styles-wrapper; the front end does not, so this is inert on the live site. */ .editor-styles-wrapper .bmg-mobile-nav { display: flex !important; position: static; justify-content: space-around; gap: 8px; padding: 14px 12px; background: var(--primary-dk); border-top: 3px solid var(--primary-lt); } .editor-styles-wrapper .bmg-mobile-nav__item { display: flex; flex-direction: column; align-items: center; gap: 4px; } .editor-styles-wrapper .bmg-mobile-nav__label { margin: 0; font-weight: 700; text-transform: uppercase; }