/** * header-nav-mobile.css - Mobile Drawer Accordion Variant * * Owns the inline-accordion treatment of the primary nav * inside .primary-nav.is-open at small viewports (<768px). * * Inside the open mobile drawer, submenus expand inline * rather than float, and triggers stretch to fill the row * with a tall tap target. The desktop floating treatment is * preserved at >=768px via an explicit media-query guard * at the bottom of this file -- if the .is-open class * lingers across a viewport resize (defensive), desktop * geometry still wins. * * The hamburger toggle button itself and the .primary-nav * drawer surface live in nav-toggle.css. The desktop * dropdown styling lives in header-nav-desktop.css. * * @package LibrandiOutdoorPower * @since 0.1.0 * @updated 0.1.2 - Added mobile-open suppression for the * desktop frosted-glass pill treatment on * both .nav-list__trigger and * .primary-nav .nav-list > li > a so the * open drawer reads as a clean vertical * list rather than a stack of frosted * pills. backdrop-filter is explicitly * reset to none so it cannot leak into the * drawer paint pass. */ /* ========================================================== Mobile / Accordion variant (<768px) Inside .primary-nav.is-open (the open mobile drawer), the submenus inline-expand rather than float. Triggers retain the same caret rotation but the panel sits in normal flow so the user can scroll the whole menu naturally. Scoped tightly to .primary-nav.is-open so the desktop floating behavior is preserved at >=768px (where the JS never adds .is-open in the first place because the desktop media query unhides .primary-nav unconditionally). ========================================================== */ .primary-nav.is-open .nav-list { flex-direction: column; align-items: stretch; gap: var(--space-1); } /* Stretch trigger to fill the row and keep tap target tall. */ .primary-nav.is-open .nav-list__trigger { width: 100%; justify-content: space-between; padding: var(--space-3) var(--space-2); font-size: var(--text-xl); /* In the mobile accordion, suppress the desktop full-border affordance -- the inline submenu directly below the trigger already provides "this is open" feedback, so the border is redundant noise on a small screen. */ border-color: transparent; background-color: transparent; /* Drop the desktop frosted-glass treatment too; the open drawer surface is solid white, so the blur would just cost paint cycles for no visual gain. */ -webkit-backdrop-filter: none; backdrop-filter: none; } /* Plain anchors get the same desktop-pill suppression at mobile widths so the open drawer reads as a clean list of links rather than a vertical stack of frosted pills. */ .primary-nav.is-open .nav-list > li > a { border-color: transparent; background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } /* Inline submenu: no absolute positioning, no shadow. */ .primary-nav.is-open .nav-item--has-children .nav-submenu { position: static; opacity: 1; visibility: visible; transform: none; transition: max-height var(--duration-slow) var(--ease); /* Collapsed state by default. JS toggles .is-open which opens via max-height. Using max-height (not display) keeps the transition smooth. */ max-height: 0; overflow: hidden; padding-block: 0; margin-block-start: 0; background: transparent; border: none; border-radius: 0; box-shadow: none; min-width: 0; } .primary-nav.is-open .nav-item--has-children.is-open .nav-submenu { /* Generous ceiling -- well above any submenu's natural height. Avoids needing JS to compute exact height. */ max-height: 480px; padding-block: var(--space-2); margin-block-end: var(--space-2); } .primary-nav.is-open .nav-submenu a { /* Larger tap target inside the mobile drawer. */ padding: var(--space-3) var(--space-6); font-size: var(--text-base); } .primary-nav.is-open .nav-submenu__cta { /* Mobile CTA: bigger touch target, full width. */ margin-inline: var(--space-3); justify-content: center; } /* ========================================================== Desktop guard (>=768px) At desktop widths, .primary-nav.is-open should never apply mobile accordion treatment. The nav-toggle.css media query already overrides display/position back to desktop layout, but we explicitly re-assert the floating submenu defaults here so mobile-only rules above cannot leak into desktop if .is-open lingers across a viewport resize. ========================================================== */ @media (min-width: 768px) { .primary-nav.is-open .nav-list { flex-direction: row; align-items: center; gap: var(--space-4); } .primary-nav.is-open .nav-list__trigger { width: auto; justify-content: flex-start; padding: var(--space-2) var(--space-3); font-size: var(--text-lg); } .primary-nav.is-open .nav-item--has-children .nav-submenu { position: absolute; max-height: none; overflow: visible; background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); min-width: 220px; padding: var(--space-2); margin-block: 0; /* Re-apply hidden default; hover/focus-within unhides. */ opacity: 0; visibility: hidden; transform: translateY(4px); } .primary-nav.is-open .nav-item--has-children:hover .nav-submenu, .primary-nav.is-open .nav-item--has-children:focus-within .nav-submenu, .primary-nav.is-open .nav-item--has-children.is-open .nav-submenu { opacity: 1; visibility: visible; transform: translateY(0); } .primary-nav.is-open .nav-submenu a { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); } .primary-nav.is-open .nav-submenu__cta { margin-inline: 0; } }