/* Primary nav dropdown panels (Industries submenu). The chevron on top-level
* items comes from the .cmp-has-sub rule in theme.json; the nav block disables
* core's submenu icon (showSubmenuIcon:false) so the panel opens on
* hover/focus-within via core's CSS. Scoped to the desktop nav — the
* :not(.is-menu-open) guard keeps the mobile overlay's inline submenu list
* unstyled. Specificity intentionally beats core's
* .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container
* default (white panel). */
.cmp-site-header .cmp-primary-nav.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
background: var(--wp--preset--color--theme-02);
color: var(--wp--preset--color--theme-01);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 8px;
padding: 8px 0;
min-width: 224px;
/* Size to the longest label: Services / Facilities children (e.g. "Laser
* Cutting & Fabrication", "Gray Manufacturing Technologies") exceed the
* 224px Figma panel and would wrap onto two lines otherwise. */
width: max-content;
max-width: min(360px, calc(100vw - 32px));
white-space: nowrap;
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}
/* Core right-aligns the panel under a right-justified nav (items-justified-right
* sets right:0), which hangs the 224px panel far left of the parent label.
* Left-align it instead, pulled back 16px so the submenu link text (16px inner
* padding) sits flush with the parent item's text. */
.cmp-site-header .cmp-primary-nav.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .has-child > .wp-block-navigation__submenu-container {
left: -16px;
right: auto;
}
.cmp-site-header .cmp-primary-nav.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
color: var(--wp--preset--color--theme-01);
padding: 10px 16px;
}
.cmp-site-header .cmp-primary-nav.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
color: var(--wp--preset--color--theme-06);
}
/* QA 2026-09-02 DEC-4: the logo ![]()
is inline inside the figure's , so the figure
* grows by the line box's descender gap (11px at 1440, 8px at 430) and the header runs
* 149 / 131 tall instead of Figma's 138 / 123 (33392:8079 / 33490:8007 = 24 + logo + 24). */
.cmp-header-logo a,
.cmp-header-logo img,
.cmp-footer-logo img {
display: block;
}
/* Mobile review 2026-09-11 (M9): the ldt-cookie-consent banner
* (z-index 2147483000) covered the bottom of the open mobile menu. Core's
* open overlay is z-index 100000; sit the banner just under it so the menu
* is fully readable and the banner returns when the menu closes. */
html:has(.wp-block-navigation__responsive-container.is-menu-open) .ldtcc {
display: none;
}
/* Mobile audit 2026-09-15, M8: inside the overlay core paints every submenu
* expanded, so Services (6) + Facilities (11) pushed the last four top-level
* links below the fold. cmp-interactive.js adds a .cmp-sub-toggle button after
* each parent link; submenus stay collapsed until it is pressed. Desktop
* (responsive container not in .is-menu-open) is untouched. */
.cmp-sub-toggle {
display: none;
}
.wp-block-navigation__responsive-container.is-menu-open .cmp-primary-nav .cmp-has-sub {
display: flex;
flex-direction: row !important; /* core's overlay rule stacks items in a column */
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
}
.wp-block-navigation__responsive-container.is-menu-open .cmp-primary-nav .cmp-has-sub > .wp-block-navigation-item__content {
width: auto;
flex: 0 0 auto;
}
.wp-block-navigation__responsive-container.is-menu-open .cmp-primary-nav .cmp-has-sub > .wp-block-navigation-item__content::after {
display: none;
}
.wp-block-navigation__responsive-container.is-menu-open .cmp-sub-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin: -10px 0 -10px 4px;
padding: 0;
border: 0;
background: transparent;
color: inherit;
cursor: pointer;
}
.wp-block-navigation__responsive-container.is-menu-open .cmp-sub-toggle svg {
width: 14px;
height: 14px;
transition: transform 160ms ease;
}
.wp-block-navigation__responsive-container.is-menu-open .cmp-sub-toggle[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.wp-block-navigation__responsive-container.is-menu-open .cmp-primary-nav .cmp-has-sub > .wp-block-navigation__submenu-container {
flex-basis: 100%;
width: 100%;
align-items: flex-start;
/* 2026-09-16: core's horizontal layout class lets the submenu wrap into
* rows ("5-Axis Machining Swiss Machining"); stack one child per line. */
display: flex;
flex-direction: column !important;
flex-wrap: nowrap !important;
}
.wp-block-navigation__responsive-container.is-menu-open .cmp-primary-nav .cmp-has-sub > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
width: 100%;
flex: 0 0 auto;
}
.wp-block-navigation__responsive-container.is-menu-open .cmp-primary-nav .cmp-has-sub:not(.is-sub-open) > .wp-block-navigation__submenu-container {
display: none;
}
/* Tablet + touch: the MENU overlay replaces the desktop bar up to 1024px and on
* any screen that can't hover (markup 2026-10-06 pin 6). Core only swaps at
* 600px, so 600-1024 rendered MENU *and* a desktop bar too wide to fit
* (wrapped, clipped under the header), and touch users could never open the
* hover-only dropdowns: tapping Facilities just navigated to /facilities/.
* The overlay's tap toggles (.cmp-sub-toggle, cmp-interactive.js) cover it.
* .cmp-site-header lifts these above core's equal-specificity 600px rules. */
@media (max-width: 1024px), (hover: none) {
.cmp-site-header .cmp-primary-nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
display: none;
}
.cmp-site-header .cmp-primary-nav .wp-block-navigation__responsive-container-open {
display: flex;
align-items: center;
gap: 13px;
}
.cmp-primary-nav .wp-block-navigation__responsive-container-open svg {
display: none;
}
.cmp-primary-nav .wp-block-navigation__responsive-container-open::after {
content: "";
display: block;
width: 30px;
height: 21px;
background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
background-size: 30px 3px;
background-position: 0 0, 0 9px, 0 18px;
background-repeat: no-repeat;
}
.cmp-primary-nav .wp-block-navigation__responsive-container-open::before {
content: "MENU";
font-weight: 700;
font-size: 1.1875rem;
line-height: 1.2;
letter-spacing: 0.01em;
}
}