/* ========================================================================== WAM Navigation Styles File: assets/css/nav.css Visual styles (colors, typography) are set in theme.json and Site Editor. This file handles only: sticky header, dark bar shell, dropdown positioning. ========================================================================== */ /* ── Global overflow fix ────────────────────────────────────────────────── PERMANENT RULE — DO NOT CHANGE: overflow-x: hidden on or creates a new scroll container which BREAKS position:sticky on ALL descendants — the sticky nav bar, the sticky media column on single listings, and the sticky filter sidebar on archive pages. overflow-x: clip is the ONLY correct fix here. Unlike hidden, clip does NOT create a new scroll container, so sticky works correctly while still preventing horizontal page scroll. Never replace clip with hidden in this file. ────────────────────────────────────────────────────────────────────── */ body { overflow-x: clip; max-width: 100%; position: relative; } :root { --wam-header-height: 125px; } html { scroll-padding-top: var(--wam-header-height); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } :where(.wp-site-blocks) > * { margin-block-start: 0; margin-block-end: 0; } /* ── Sticky header shell ──────────────────────────────────────────────────── */ .wam-site-header { position: sticky; top: 0; z-index: 1000; width: 100%; } /* ── Logo bar ─────────────────────────────────────────────────────────────── */ .wam-site-header__logo-bar { background: #ffffff; display: flex; justify-content: center; align-items: center; padding: 10px 40px; margin: 0; } .wam-site-header__logo-bar .wp-block-site-logo img { max-height: 60px; width: auto; display: block; } /* ── Nav bar shell — dark background and full width ──────────────────────── */ .wam-site-header__nav-bar { background-color: #1B1C39; width: 100%; max-width: 100%; padding-top: 0 !important; padding-right: 0 !important; /* explicitly overrides var(--wp--preset--spacing--l) */ padding-bottom: 0 !important; padding-left: 0 !important; margin: 0 !important; border-top: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); } /* ── Force nav centering on all page types including CPTs ─────────────────── */ .wam-site-header__nav-bar, .wam-site-header__nav-bar.wp-block-group { display: flex !important; justify-content: center !important; align-items: center !important; } .wam-site-header__nav-bar .wp-block-navigation { width: 100%; max-width: 100%; justify-content: center !important; display: flex !important; } /* ── Remove WP's default inline padding on the nav container ─────────────── */ .wam-site-header__nav-bar .wp-block-navigation__container { gap: 0 !important; padding: 0 !important; margin: 0 !important; } [class*="wp-container-core-navigation"] { padding-inline: 0 !important; } /* ── Dropdown shadow — not available in Site Editor ──────────────────────── */ .wam-site-header__nav-bar .wp-block-navigation__submenu-container { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14); min-width: 260px; } /* ── Active and hover states on top-level items ───────────────────────────── */ .wam-site-header__nav-bar .current-menu-item, .wam-site-header__nav-bar .current-menu-ancestor, .wam-site-header__nav-bar .wp-block-navigation__container > .wp-block-navigation-item:hover { background-color: #313266 !important; } /* ── Submenu item hover/active ────────────────────────────────────────────── */ .wam-site-header__nav-bar .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover, .wam-site-header__nav-bar .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content, .wam-site-header__nav-bar .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content { background-color: #E7F6FF !important; } /* ── Vertical dividers between top-level items ───────────────────────────── */ .wam-site-header__nav-bar .wp-block-navigation__container > .wp-block-navigation-item { border-right: 1px solid rgba(255, 255, 255, 0.15); } .wam-site-header__nav-bar .wp-block-navigation__container > .wp-block-navigation-item:first-child { border-left: 1px solid rgba(255, 255, 255, 0.15); } /* ── Chevron SVG color — overrides inline styles WordPress injects ────────── */ .wam-site-header__nav-bar .wp-block-navigation-submenu__toggle svg, .wam-site-header__nav-bar .wp-block-navigation-submenu__toggle svg * { stroke: #ffffff !important; fill: none !important; } /* Top-level nav item label — consistent padding everywhere */ body .wam-site-header__nav-bar .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { padding: 16px 8px 16px 18px !important; } /* Chevron toggle button — right-side padding creates breathing room */ body .wam-site-header__nav-bar .wp-block-navigation-submenu__toggle { padding: 16px 16px 16px 6px !important; } /* Dropdown submenu items */ body .wam-site-header__nav-bar .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: 16px 20px !important; } /* ── Active submenu page highlight fix ────────────────────────────────────── current-menu-item and current-menu-ancestor should use the same light blue as hover state. Previously only :hover/:active/:visited were targeted. */ .wam-site-header__nav-bar .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content, .wam-site-header__nav-bar .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content, .wam-site-header__nav-bar .wp-block-navigation__submenu-container .wp-block-navigation-item.current-page-ancestor > .wp-block-navigation-item__content { background-color: #E7F6FF !important; color: #1B1C39 !important; } /* ── Desktop: dropdown show/hide ─────────────────────────────────────────── */ @media (min-width: 782px) { .wam-site-header__nav-bar .wp-block-navigation__submenu-container { display: none !important; position: absolute !important; top: 100%; left: 0; z-index: 1001; } .wam-site-header__nav-bar .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container, .wam-site-header__nav-bar .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container { display: block !important; } } /* ── Mobile overlay ───────────────────────────────────────────────────────── */ @media (max-width: 781px) { .wam-site-header__nav-bar .wp-block-navigation__responsive-container.is-menu-open { background-color: #1B1C39 !important; padding: 24px; } .wam-site-header__nav-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { display: none !important; position: static !important; width: 100% !important; box-shadow: none !important; } .wam-site-header__nav-bar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.is-menu-open > .wp-block-navigation__submenu-container { display: block !important; } .wam-site-header__nav-bar .wp-block-navigation__responsive-container-open svg { fill: #ffffff; } } /* ── Footer nav ───────────────────────────────────────────────────────────── */ .wp-block-group .wp-block-navigation.is-vertical .wp-block-navigation-item__content { padding: 4px 0; border: none !important; background: none !important; } .wp-block-group .wp-block-navigation.is-vertical .wp-block-navigation-item__content:hover { color: #FF6E00 !important; background: none !important; } /* Top-level nav link text — white on dark bar */ .wam-site-header__nav-bar .wp-block-navigation-item__content { color: #ffffff !important; padding: 16px 8px 16px 18px; } /* Submenu link text — dark on light dropdown */ .wam-site-header__nav-bar .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: #1B1C39 !important; padding: 16px 20px !important; }