/* Last update: 18.8.26 Expanded menu — loaded via inc/enqueue.php with a media="(min-width: Npx)" attribute using the f28_menu_breakpoint filter (default: 1024px). Kept separate because media queries cannot use CSS variables. PHP provides the breakpoint through the media attribute. This file only resets the overlay menu into a standard layout. Child themes handle sizing, colors, alignment and active states. Add `menu-overlay` to to keep the burger menu at all widths. ── SPECIFICITY RULE ────────────────────────────────────────── Every rule below MIRRORS the selector of the style.css rule it undoes — same weight, no more, no less. Load order then does the rest: this file comes after style.css so it wins over the parent, and before the child themes so they win over it. Both mistakes have been made and cost a broken menu each: • Too high — `nav.main-menu ul.menu > li > a` (0,2,4) beat a child writing `nav.main-menu ul li a` (0,1,4). Child sizing ignored. • Too low — `nav.main-menu :where(ul.menu) > li` (0,1,2) lost to the parent's own `nav.main-menu ul.menu > li { opacity: 0 }` (0,2,3). The whole menu stayed invisible. So :where() wraps the body guard only. Never the compounds. ⚠️ Child base-rule trap: a child styling `div.menu-wrap` outside a media query weighs (0,1,1) — same as the rule here, loaded later, so it wins at desktop width too. That skin belongs to the burger overlay. The child must restate what it wants in its own desktop block: only the child knows which of its rules are mobile-only. */ :where(body:not(.menu-overlay)) .menu-toggle { display: none; } /* undoes: div.menu-wrap (0,1,1) */ :where(body:not(.menu-overlay)) div.menu-wrap { position: static; inset: auto; width: auto; height: auto; min-height: 0; padding: 0; background-color: transparent; overflow: visible; transform: none; visibility: visible; transition: none; z-index: auto; } /* undoes: nav.main-menu (0,1,1) — centred and capped for the overlay, it has to shrink to its content inside a header */ :where(body:not(.menu-overlay)) nav.main-menu { width: auto; max-width: none; margin: 0; padding: 0; } /* horizontal row — no parent rule to undo, matched to what a child would naturally write: nav.main-menu ul.menu (0,2,2) */ :where(body:not(.menu-overlay)) nav.main-menu ul.menu { display: flex; flex-flow: row wrap; align-items: center; } /* undoes: nav.main-menu ul.menu > li (0,2,3) — the staggered reveal keeps the items at opacity 0 until the panel opens. Without this the desktop menu is there but invisible. */ :where(body:not(.menu-overlay)) nav.main-menu ul.menu > li { margin-bottom: 0; opacity: 1; transform: none; transition: none; } /* undoes: nav.main-menu ul li a (0,1,4) — the overlay sets links in --fs-title-xxl, which gives giant links in a row. A sober default, not a design decision: a child overrides both lines. */ :where(body:not(.menu-overlay)) nav.main-menu ul li a { font-size: var(--fs-md); font-weight: var(--fw-medium); } /* undoes: .menu-social (0,1,0) — same reveal state as the items */ :where(body:not(.menu-overlay)) .menu-social { opacity: 1; transform: none; transition: none; }