/* Nexia Core 1.1.41 */ /*========================================================== NEXIA FRAMEWORK NAVIGATION Version: 3.6 IMPORTANT: WordPress Navigation owns: - responsive navigation - mobile overlay - submenu open/close - click/touch behavior - focus management Nexia provides: - header navigation layout refinements - desktop dropdown styling - Nexia mobile close-button styling WORDPRESS COMPATIBILITY: - Uses documented Navigation Block classes. - Does not replace WordPress submenu state/behavior. - Desktop dropdown styling is scoped to the header. - Mobile overlay behavior remains owned by WordPress. ==========================================================*/ /*========================================================== BASE NAVIGATION ==========================================================*/ .wp-block-navigation{ background:transparent; } .wp-block-navigation a, .wp-block-navigation-item__content{ text-decoration:none; transition: color var(--nx-transition-fast), opacity var(--nx-transition-fast), background-color var(--nx-transition-fast), padding-left var(--nx-transition-fast); } /* Theme-specific dropdown colours are provided by variables.css. * Light mode = white panel / dark text. * Dark mode = dark panel / light text. */ /*========================================================== DESKTOP HEADER NAVIGATION WordPress owns submenu visibility/state. Nexia only controls visual presentation and positioning. Scoped to the header so another Navigation block elsewhere on the site is not unintentionally restyled. ==========================================================*/ /*========================================================== DESKTOP / NON-OVERLAY DROPDOWN WordPress uses its small breakpoint (600px) to switch the Navigation Block into its responsive overlay. We style only the direct desktop navigation container, so the responsive overlay remains entirely owned by WordPress. This keeps the Nexia dropdown appearance consistent on compact desktop/tablet widths as well as large screens. ==========================================================*/ /* The dropdown is styled whenever Core is NOT showing the mobile overlay. */ header.wp-block-template-part .wp-block-navigation :is( > .wp-block-navigation__container, .wp-block-navigation__responsive-container:not(.is-menu-open) ) .wp-block-navigation__submenu-container{ min-width:260px !important; padding:8px !important; border-radius:12px !important; border:1px solid var(--nx-dropdown-border) !important; border-top:2px solid var(--nx-primary) !important; background:var(--nx-dropdown-bg) !important; color:var(--nx-dropdown-text) !important; box-shadow:var(--nx-dropdown-shadow) !important; overflow:hidden !important; isolation:isolate; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } /*========================================================== DESKTOP TOP-LEVEL SUBMENU ALIGNMENT WordPress Core anchors a top-level submenu to the left edge of its parent navigation item (left:-1px). Nexia centers the dropdown beneath the parent menu item. This applies only to top-level desktop submenus. Nested flyout submenus and the responsive/mobile overlay remain under WordPress Core positioning. ==========================================================*/ header.wp-block-template-part .wp-block-navigation :is( > .wp-block-navigation__container, .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container ) > .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container{ left:50% !important; right:auto !important; transform:translateX(-50%) !important; } header.wp-block-template-part .wp-block-navigation :is( > .wp-block-navigation__container, .wp-block-navigation__responsive-container:not(.is-menu-open) ) .wp-block-navigation__submenu-container .wp-block-navigation-item{ width:100%; } header.wp-block-template-part .wp-block-navigation :is( > .wp-block-navigation__container, .wp-block-navigation__responsive-container:not(.is-menu-open) ) .wp-block-navigation__submenu-container .wp-block-navigation-item__content{ display:flex; align-items:center; width:100%; padding:11px 14px !important; border-radius:7px !important; color:var(--nx-dropdown-text) !important; background:transparent !important; font-weight:var(--nx-weight-medium); transition: color var(--nx-transition-fast), background-color var(--nx-transition-fast), padding-left var(--nx-transition-fast); } header.wp-block-template-part .wp-block-navigation :is( > .wp-block-navigation__container, .wp-block-navigation__responsive-container:not(.is-menu-open) ) .wp-block-navigation__submenu-container .wp-block-navigation-item__label{ color:inherit !important; } header.wp-block-template-part .wp-block-navigation :is( > .wp-block-navigation__container, .wp-block-navigation__responsive-container:not(.is-menu-open) ) .wp-block-navigation__submenu-container .wp-block-navigation-item:not(:last-child) > .wp-block-navigation-item__content{ border-bottom:1px solid var(--nx-dropdown-divider); } header.wp-block-template-part .wp-block-navigation :is( > .wp-block-navigation__container, .wp-block-navigation__responsive-container:not(.is-menu-open) ) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover, header.wp-block-template-part .wp-block-navigation :is( > .wp-block-navigation__container, .wp-block-navigation__responsive-container:not(.is-menu-open) ) .wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content{ background:var(--nx-dropdown-hover) !important; color:var(--nx-primary) !important; padding-left:18px !important; } header.wp-block-template-part .wp-block-navigation :is( > .wp-block-navigation__container, .wp-block-navigation__responsive-container:not(.is-menu-open) ) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover .wp-block-navigation-item__label, header.wp-block-template-part .wp-block-navigation :is( > .wp-block-navigation__container, .wp-block-navigation__responsive-container:not(.is-menu-open) ) .wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content .wp-block-navigation-item__label{ color:var(--nx-primary) !important; } header.wp-block-template-part .wp-block-navigation :is( > .wp-block-navigation__container, .wp-block-navigation__responsive-container:not(.is-menu-open) ) .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content, header.wp-block-template-part .wp-block-navigation :is( > .wp-block-navigation__container, .wp-block-navigation__responsive-container:not(.is-menu-open) ) .wp-block-navigation__submenu-container .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content{ color:var(--nx-primary) !important; } header.wp-block-template-part .wp-block-navigation .wp-block-navigation-submenu:hover > .wp-block-navigation-submenu__toggle, header.wp-block-template-part .wp-block-navigation .wp-block-navigation-submenu:focus-within > .wp-block-navigation-submenu__toggle{ color:var(--nx-primary) !important; } header.wp-block-template-part .wp-block-navigation :is( > .wp-block-navigation__container, .wp-block-navigation__responsive-container:not(.is-menu-open) ) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible{ outline:2px solid var(--nx-primary); outline-offset:-2px; } /*========================================================== MOBILE / OVERLAY DROPDOWN VISUALS WordPress continues to own the overlay geometry, positioning, open/close state and focus behavior. Nexia only applies the same dropdown visual language used by the desktop menu. IMPORTANT: no position, transform, display, height or overflow state is changed here. ==========================================================*/ header.wp-block-template-part .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{ padding:8px !important; border:1px solid var(--nx-dropdown-border) !important; border-top:2px solid var(--nx-primary) !important; border-radius:12px !important; background:var(--nx-dropdown-bg) !important; color:var(--nx-dropdown-text) !important; box-shadow:var(--nx-dropdown-shadow) !important; overflow:hidden; isolation:isolate; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); } header.wp-block-template-part .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item{ width:100%; } header.wp-block-template-part .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content{ display:flex; align-items:center; width:100%; padding:11px 14px !important; border-radius:7px !important; color:var(--nx-dropdown-text) !important; background:transparent !important; font-weight:var(--nx-weight-medium); transition: color var(--nx-transition-fast), background-color var(--nx-transition-fast), padding-left var(--nx-transition-fast), text-shadow var(--nx-transition-fast); } header.wp-block-template-part .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__label{ color:inherit !important; } header.wp-block-template-part .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item:not(:last-child) > .wp-block-navigation-item__content{ border-bottom:1px solid var(--nx-dropdown-divider); } header.wp-block-template-part .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover, header.wp-block-template-part .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content{ background:var(--nx-dropdown-hover) !important; color:var(--nx-primary) !important; padding-left:18px !important; text-shadow:0 0 8px var(--nx-primary-glow); } header.wp-block-template-part .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible{ outline:2px solid var(--nx-primary); outline-offset:-2px; } /*========================================================== RESPONSIVE NAVIGATION WordPress controls: - display - visibility - opacity - position - transform - height - overflow - mobile overlay behavior Nexia intentionally does not override those states. ==========================================================*/ .wp-block-navigation__responsive-container{ z-index:999999; } /*========================================================== RESPONSIVE TOGGLE BUTTONS ==========================================================*/ .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close{ cursor:pointer; } /*========================================================== NEXIA NAVIGATION OVERLAY CLOSE BUTTON WordPress 7.x This styling remains independent of desktop dropdown styling. ==========================================================*/ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{ position:absolute !important; top:24px !important; right:24px !important; bottom:auto !important; left:auto !important; width:44px !important; height:44px !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:0 !important; margin:0 !important; background:var(--nx-primary) !important; color:#000 !important; border:0 !important; border-radius:var(--nx-radius-sm) !important; z-index:1001 !important; } /*========================================================== REDUCED MOTION ==========================================================*/ @media (prefers-reduced-motion:reduce){ .wp-block-navigation a, .wp-block-navigation-item__content, header.wp-block-template-part .wp-block-navigation__submenu-container{ transition:none !important; } }