/* ========================================================================== naw.org mobile nav — sub-menu flyout (drill-down) panels Adapted from the MDM header's inline copy, which Corlew wrote. Same approach: build on the GenerateBlocks Pro Navigation block rather than replace it, and only apply while GB has the menu in mobile mode (.gb-menu-container--mobile), so desktop is untouched. Scoped by .gb-has-flyout, which the JS adds. Two deliberate differences from the MDM copy: * it lives in the theme rather than inline in the Element. Elements are database content and have to be re-created by hand on live; theme files deploy. The MDM copy is left exactly as it is -- this is only enqueued outside /mdm/, so the two never meet. * the panel background is white rather than MDM's --light-blue. ========================================================================== */ .gb-has-flyout .gb-menu-container--mobile { --flyout-bg: var(--wp--preset--color--white, #ffffff); --flyout-color: var(--wp--preset--color--midnight, #1D2C44); --flyout-speed: .25s; } /* Lock the scroll area behind an open panel */ .gb-has-flyout .gb-menu-container--mobile.gb-flyout-open, .gb-has-flyout .gb-menu-container--mobile .gb-sub-menu.gb-flyout-open { overflow: hidden; } /* Let panels position against the overlay, not the
  • */ .gb-has-flyout .gb-menu-container--mobile .menu-item-has-children { position: static; } /* Parent row: point the chevron right to signal "opens a panel" */ .gb-has-flyout .gb-menu-container--mobile .menu-item-has-children > a .gb-submenu-toggle-icon { transform: rotate(-90deg); transition: none; } /* The panel itself */ .gb-has-flyout .gb-menu-container--mobile .gb-menu--base .gb-sub-menu { display: block !important; /* keep it rendered so it can animate */ position: absolute; inset: 0; width: 100%; margin: 0; padding: var(--gb-menu-toggle-offset, 85px) 0 60px; overflow-y: auto; background-color: var(--flyout-bg); box-shadow: none; z-index: 100; /* below the cloned close (X) button (z-index 101) */ opacity: 1; visibility: hidden; transform: translateX(100%); transition: transform var(--flyout-speed) ease, visibility 0s linear var(--flyout-speed); } .gb-has-flyout .gb-menu-container--mobile .gb-menu--base .gb-sub-menu--open > .gb-sub-menu { visibility: visible; transform: translateX(0); transition: transform var(--flyout-speed) ease, visibility 0s; } /* Don't let the parent row's hover/focus colours bleed through while its panel is open */ .gb-has-flyout .gb-menu-container--mobile .gb-sub-menu--open, .gb-has-flyout .gb-menu-container--mobile .gb-sub-menu--open:is(:hover, :focus-within) { background-color: transparent; } /* Back header ("‹ Topics") */ .gb-has-flyout .gb-flyout-back { list-style: none; margin: 0 0 .5em; padding: 0; border: 0 !important; } .gb-has-flyout .gb-flyout-back:is(:hover, :focus-within) { background: transparent !important; } .gb-has-flyout .gb-flyout-back__btn { display: flex; align-items: center; gap: 14px; width: 100%; margin: 0; padding: 1em 20px; border: 0; background: transparent; color: var(--flyout-color); font: inherit; font-size: 18px; font-weight: 700; line-height: 1.2; text-align: left; cursor: pointer; } .gb-has-flyout .gb-flyout-back__btn:hover, .gb-has-flyout .gb-flyout-back__btn:focus { background: transparent; color: var(--flyout-color); } .gb-has-flyout .gb-flyout-back__btn:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; } .gb-has-flyout .gb-flyout-back__btn svg { width: 12px; height: 12px; flex-shrink: 0; } /* Child links inside a panel – matches the mockup: no dividers, lighter weight */ .gb-has-flyout .gb-menu-container--mobile .gb-sub-menu > .menu-item:not(.gb-flyout-back) { padding: .75em 0; border-bottom: 0; font-weight: 400; } .gb-has-flyout .gb-menu-container--mobile .gb-sub-menu > .menu-item:not(.gb-flyout-back) > .gb-menu-link { padding-left: 32px; padding-right: 20px; } /* Optional "All Topics" overview link (see overviewLink in the JS) */ .gb-has-flyout .gb-flyout-overview > .gb-menu-link { font-weight: 700; } @media (prefers-reduced-motion: reduce) { .gb-has-flyout .gb-menu-container--mobile .gb-menu--base .gb-sub-menu, .gb-has-flyout .gb-menu-container--mobile .gb-menu--base .gb-sub-menu--open > .gb-sub-menu { transition: none; } } /* -------------------------------------------------------------------------- Search box at the top of the overlay. Plain markup rather than a GenerateBlocks block: it is a real
    that posts to WordPress search, and GB has no form block that does that. Styled here so the Element carries no presentation of its own. -------------------------------------------------------------------------- */ .naw-mobile-search { display: flex; align-items: stretch; margin: 0 20px 8px; border: 1px solid #C7CBD1; background: var(--wp--preset--color--white, #fff); } .naw-mobile-search input[type="search"] { flex: 1 1 auto; min-width: 0; margin: 0; padding: 14px 16px; border: 0; background: transparent; color: var(--wp--preset--color--midnight, #1D2C44); font-size: 16px; /* 16px or iOS zooms the page on focus */ line-height: 1.2; appearance: none; } .naw-mobile-search input[type="search"]::placeholder { color: #767676; opacity: 1; } .naw-mobile-search input[type="search"]:focus { outline: 0; } .naw-mobile-search:focus-within { outline: 2px solid var(--wp--preset--color--blue, #1B4F90); outline-offset: -1px; } .naw-mobile-search button { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0 16px; border: 0; background: transparent; color: var(--wp--preset--color--midnight, #1D2C44); cursor: pointer; } /* -------------------------------------------------------------------------- Third level renders inline, not as another panel. The design drills exactly one level: tapping a section slides its panel in, and inside that panel each group is a heading with its links listed beneath. GB nests those as a further