/**
 * #.# Header
 *
 * Site header: logo left, primary nav centre, portal button + language switcher right.
 * Off-canvas mobile menu styles preserved below.
 */

/* =============================
   # Header variables
============================= */

:root {
	--header-height: 70px;
	--breadcrumbs-height: 51px;
	--header-accent: var(--nec-blue, #1414A0);  /* NEC Blue — top border stripe   */
	--header-navy:   var(--nec-blue, #1414A0);  /* NEC Blue — Customer Portal btn */
}

/* =============================
   # Site Header
============================= */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--header-height);
	z-index: 150;
	background: #fff;
	border-top: 3px solid var(--header-accent);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Horizontal max-width/padding now comes from the site-wide .container
   class (assets/css/core/base.css), applied alongside this class in the
   markup — see template-parts/header/site-header.php. */
.site-header__inner {
	display: flex;
	align-items: center;
	gap: 24px;
	height: 100%;
}

/* =============================
   # Logo
============================= */

.site-header__logo {
	flex-shrink: 0;
}

.site-header__logo a {
	display: flex;
	align-items: center;
	text-decoration: none;
	line-height: 1;
}

.site-header__logo-img {
	max-height: 44px;
	width: auto;
	display: block;
}

/* =============================
   # Primary Navigation
============================= */

.site-header__nav {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

.site-header__nav-list {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 32px;
}

.site-header__nav-list > li {
	display: inline-block;
	position: relative;
}

/* Mega menu — any top-level item with children (built via ordinary
   nested menu items in Appearance > Menus) renders one of these instead
   of a plain link. See template-parts/header/primary-nav.php. */
.site-header__nav-list > li.mega-menu-item {
	/* Static, not relative — lets .mega-menu position itself against
	   .site-header (fixed, full viewport width) instead of this <li>.
	   Selector deliberately matches/beats the specificity of
	   ".site-header__nav-list > li { position: relative; }" above — a
	   plain ".mega-menu-item { position: static; }" rule loses to that
	   rule's specificity and silently does nothing, which would trap
	   the mega panel inside this narrow <li>. */
	position: static;
}

.site-header__nav-list > li > a,
.site-header__nav-list > li > button {
	display: inline-block;
	color: var(--black, #0C1526);
	text-decoration: none;
	font-size: 16px;
	font-weight: 400;
	white-space: nowrap;
	letter-spacing: 0.01em;
	/* min-width is set inline by assets/js/main.js (setNavLabelMinWidth) —
	   measured once at the bold width, so switching weight below on
	   hover/focus never needs to grow the box and shift neighbours. */
}

/* .mega-menu-trigger is a <button>, not an <a> — strip UA button chrome
   so it matches the plain-link nav items either side of it. */
.site-header__nav-list > li > button {
	background: none;
	border: none;
	padding: 0;
	margin: 0;
	font-family: inherit;
	cursor: pointer;
}

.site-header__nav-list > li > a:hover,
.site-header__nav-list > li > a:focus,
.site-header__nav-list > li > button:hover,
.site-header__nav-list > li > button:focus {
	color: #000;
	font-weight: 400;
	text-decoration: none;
}

.mega-menu {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	overflow: hidden;
	background: #F1F2F3;
	border-top: 1px solid var(--nec-grey20, #ebeced);
	box-shadow: 0 24px 40px rgba(0, 0, 0, 0.18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease, height 0.3s ease;
	z-index: 145; /* above .site-breadcrumbs (140) — the flyout sits directly under the header, same spot as the breadcrumbs bar, and must cover it when open */
	min-height: 315px;
}

/* Opens on click (aria-expanded, toggled in assets/js/main.js), not hover. */
.mega-menu-trigger[aria-expanded="true"] + .mega-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.mega-menu__inner {
	display: flex;
	align-items: flex-start;
	gap: 48px;
	padding: 48px 0;
}

.mega-menu__columns {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 48px;
	flex: 1 1 auto;
	min-width: 0;
}

/* No level-2 item has children of its own — nothing to preview, so drop
   the (now absent) right-hand column's track. */
.mega-menu__columns--single {
	grid-template-columns: 240px;
}

/* Level 2 — direct children of the top-level trigger */
.mega-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 240px;
}

.mega-menu__list li {
	margin-bottom: 18px;
}

.mega-menu__list li a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-family: var(--nec-font);
	font-weight: 400;
	font-size: 16px;
	color: var(--nec-grey);
	transition: color 0.2s ease;
}

.mega-menu__list li a:hover,
.mega-menu__list li a.is-active {
	color: var(--nec-orange);
}

.mega-menu__list li a i {
	font-size: 11px;
	color: var(--nec-orange);
}

/* Level 3 — preview column, swapped on hover/focus of a level-2 link
   with a data-group (see assets/js/main.js). Only one .is-active panel
   is visible at a time; items with no children of their own clear it. */
.mega-menu__level3-wrap {
	position: relative;
	border-left: 1px solid var(--nec-grey, #384249);
	padding-left: 48px;
}

.mega-menu__level3 {
	display: none;
	gap: 32px;
	opacity: 0;
}

.mega-menu__level3.is-active {
	display: flex;
	align-items: flex-start;
	opacity: 1;
	transition: opacity 0.5s ease;
}

/* Fade in when a panel becomes active. Progressive enhancement —
   @starting-style is what lets the transition run on the
   display:none → flex swap; unsupported browsers just show it instantly. */
@starting-style {
	.mega-menu__level3.is-active {
		opacity: 0;
	}
}

/* Outgoing panel — added by assets/js/main.js when a different level-2
   item is hovered/focused, so it can fade out instead of disappearing
   instantly. Positioned absolute (overlapping the incoming panel) so it
   doesn't push layout while both are briefly visible mid-crossfade. */
/*.mega-menu__level3.is-leaving {
	display: flex;
	align-items: flex-start;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}*/

/* Fixed 6-per-column split — see template-parts/header/primary-nav.php
   (array_chunk), not CSS auto-balancing. */
.mega-menu__level3-col {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mega-menu__level3 li {
	margin-bottom: 14px;
}

.mega-menu__level3 li a {
	font-family: var(--nec-font);
	font-weight: 400;
	font-size: 15px;
	color: var(--nec-grey, #384249);
	transition: color 0.2s ease;
}

.mega-menu__level3 li a:hover {
	color: var(--nec-orange);
}

/* Search menu item — add the "menu-search-icon" CSS class to this menu item
   in Appearance > Menus (Screen Options > CSS Classes) to target it here
   without relying on its auto-generated menu-item-### ID. The "Search" link
   text is kept in the DOM for screen readers (font-size: 0 hides it visually
   without removing it from the accessibility tree) and replaced visually
   with the search icon. Hovering or focusing the icon opens a search field
   to the right — see .site-header__search-form below. */
.site-header__nav-list > li.menu-search-icon > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	font-size: 0;
	background-image: url(../../../img/search-icon.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	position: relative;
	z-index: 201; /* stay above .site-header__search-form (200) once it expands over it */
}

/* Search field — CSS-only reveal (:hover / :focus-within), no JS. Sits
   absolutely positioned off the icon so expanding it doesn't shift the
   centred nav list (.site-header__nav-list has justify-content: center). */
.site-header__nav-list > li.menu-search-icon {
	position: relative;
}

.site-header__search-form {
	display: flex;
	align-items: center;
	position: absolute;
	top: 50%;
	left: -10px;
	transform: translateY(-50%);
	width: 0;
	overflow: hidden;
	background: #fff;
	border: 1px solid transparent;
	border-radius: 4px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	opacity: 0;
	pointer-events: none;
	transition: width 0.25s ease, opacity 0.2s ease, border-color 0.25s ease;
	z-index: 200;
}

.site-header__nav-list > li.menu-search-icon:hover .site-header__search-form,
.site-header__nav-list > li.menu-search-icon:focus-within .site-header__search-form {
	width: 240px;
	opacity: 1;
	pointer-events: auto;
	border-color: #e0e4e8;
}

.site-header__search-input {
	flex: 1;
	min-width: 0;
	border: none;
	outline: none;
	background: transparent;
	padding: 8px 0 8px 34px;
	font-family: inherit;
	font-size: 14px;
	color: var(--black, #0C1526);
}

.site-header__search-submit {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--nec-grey, #384249);
	transition: color 0.2s ease;
}

.site-header__search-submit:hover,
.site-header__search-submit:focus-visible {
	color: var(--nec-orange);
}

/* =============================
   # Header Actions
============================= */

.site-header__actions {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Customer Portals dropdown */
.portal-switcher {
	position: relative;
}

.portal-switcher__toggle {
	/* Reset native macOS button chrome (Chrome/Safari on Mac render a taller,
	   OS-styled control here without this — Windows/Linux browsers don't need
	   it, since their default <button> UA styles are already plain). */
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	outline: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background-color: var(--header-navy);
	color: #fff;
	padding: 9px 18px;
	border: none;
	border-radius: 4px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	line-height: 100%;
	transition: background-color 0.2s ease;
}

.portal-switcher__toggle:hover,
.portal-switcher__toggle[aria-expanded="true"] {
	background-color: #002060;
}

.portal-switcher__chevron {
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.portal-switcher__toggle[aria-expanded="true"] .portal-switcher__chevron {
	transform: rotate(180deg);
}

.portal-switcher__dropdown {
	display: none;
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	min-width: 200px;
	background: #fff;
	border: 1px solid #e0e4e8;
	border-radius: 6px;
	list-style: none;
	margin: 0;
	padding: 4px 0;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	z-index: 200;
}

.portal-switcher__dropdown.is-open {
	display: block;
}

.portal-switcher__dropdown li a {
	display: block;
	padding: 10px 16px;
	color: var(--black, #0C1526);
	text-decoration: none;
	font-size: 14px;
	transition: background-color 0.15s ease;
}

.portal-switcher__dropdown li a:hover {
	background-color: #f0f4f8;
	color: var(--header-navy);
}

/* =============================
   # Language Switcher
============================= */

.lang-switcher {
	position: relative;
}

.lang-switcher__toggle {
	/* Same native macOS button reset as .portal-switcher__toggle above. */
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	outline: none;
	display: flex;
	align-items: center;
	gap: 5px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px 8px;
	border-radius: 4px;
	color: var(--black, #0C1526);
	line-height: 1;
	transition: background-color 0.2s ease;
}

.lang-switcher__toggle:hover,
.lang-switcher__toggle[aria-expanded="true"] {
	background-color: #f0f4f8;
}

.lang-switcher__flag {
	font-size: 20px;
	line-height: 1;
	display: block;
}

.lang-switcher__chevron {
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.lang-switcher__toggle[aria-expanded="true"] .lang-switcher__chevron {
	transform: rotate(180deg);
}

.lang-switcher__dropdown {
	display: none;
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	min-width: 180px;
	background: #fff;
	border: 1px solid #e0e4e8;
	border-radius: 6px;
	list-style: none;
	margin: 0;
	padding: 4px 0;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	z-index: 200;
}

.lang-switcher__dropdown.is-open {
	display: block;
}

.lang-switcher__dropdown li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	color: var(--black, #0C1526);
	text-decoration: none;
	font-size: 14px;
	transition: background-color 0.15s ease;
}

.lang-switcher__dropdown li a:hover {
	background-color: #f0f4f8;
	color: var(--header-navy);
}

.lang-switcher__item-flag {
	font-size: 18px;
	line-height: 1;
}

/* =============================
   # Mobile Search Icon
============================= */

.site-header__mobile-search {
	display: none;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
}

.site-header__mobile-search img {
	display: block;
	width: 18px;
	height: 18px;
}

/* =============================
   # Hamburger (mobile)
============================= */

.hamburger {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px;
	color: var(--black, #0C1526);
}

.hamburger-lines {
	display: flex;
	flex-direction: column;
	gap: 5px;
	width: 24px;
}

.top-bun,
.meat,
.bottom-bun {
	display: block;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

body.active .top-bun  { transform: translateY(7px) rotate(45deg); }
body.active .meat     { opacity: 0; }
body.active .bottom-bun { transform: translateY(-7px) rotate(-45deg); }

/* =============================
   # Breadcrumbs bar — sticky under the header, hidden on the front page
============================= */

.site-breadcrumbs {
	position: fixed;
	top: var(--header-height);
	left: 0;
	width: 100%;
	z-index: 140;
	background: #eceded;
	padding:10px 0px
}

.site-breadcrumbs__trail,
.site-breadcrumbs__trail span {
	margin: 0;
	font-family: var(--nec-font);
	font-weight: 400;
	font-style: normal;
	font-size: 14px;
	line-height: 25px;
	letter-spacing: 0;
	color: var(--nec-grey, #384249);
}

.site-breadcrumbs__trail a {
	font-weight: 300;
	color: var(--nec-grey, #384249);
	text-decoration: none;
}

.site-breadcrumbs__trail a:hover,
.site-breadcrumbs__trail a:focus-visible {
	text-decoration: underline;
}

/* Hide it behind the open off-canvas mobile menu (z-index 100) — otherwise
   it would float on top of the nav's first ~51px, since both sit at the
   same top offset. */
body.active .site-breadcrumbs {
	display: none;
}

/* =============================
   # Spacer (replaces old .hidden-height)
============================= */

.hidden-height {
	height: var(--header-height);
}

/* Reserve extra space below the fixed header for the breadcrumbs bar on
   every page except the front page (see inc/frontend.php for the class). */
body.has-breadcrumbs .hidden-height {
	height: calc(var(--header-height) + var(--breadcrumbs-height) - 6px);
}

/* =============================
   # Off-Canvas Menu
============================= */

.off-canvas {
	position: fixed;
	top: -100svh;
	height: 100svh;
	width: 100vw;
	z-index: -1;
	background-color: var(--nec-white, #fff);
	overflow-y: auto;
	opacity: 0;
	transition: top 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

.off-canvas.active {
	top: var(--header-height);
	opacity: 1;
	z-index: 100;
}

/* ===========================
   # Mobile accordion nav
=========================== */

.mobile-accordion__sublist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mobile-accordion__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border-bottom: 1px solid var(--nec-grey20, #ebeced);
}

.mobile-accordion__item--lvl1 > .mobile-accordion__row {
	padding: 18px 4px;
}

.mobile-accordion__link {
	flex: 1;
	color: var(--nec-grey);
	text-decoration: none;
	font-family: var(--nec-font);
	transition: color 0.2s ease;
}

.mobile-accordion__item--lvl1 > .mobile-accordion__row .mobile-accordion__link {
	font-size: 17px;
	font-weight: 500;
}

.mobile-accordion__toggle {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--nec-grey);
}

.mobile-accordion__chevron {
	transition: transform 0.25s ease, color 0.2s ease;
}

.mobile-accordion__toggle[aria-expanded="true"] {
	color: var(--nec-orange);
}

.mobile-accordion__toggle[aria-expanded="true"] .mobile-accordion__chevron {
	transform: rotate(180deg);
}

/* Level 2 — indented under its lvl1 parent */
.mobile-accordion__sublist--lvl2 {
	display: none;
	padding-left: 20px;
}

.mobile-accordion__item--lvl2 > .mobile-accordion__row {
	padding: 16px 4px;
}

.mobile-accordion__item--lvl2 > .mobile-accordion__row .mobile-accordion__link {
	font-size: 15px;
	font-weight: 400;
}

/* Level 3 — further indented, smaller, tightly packed, no per-item border
   (only the shared border on .mobile-accordion__row of the last item). */
.mobile-accordion__sublist--lvl3 {
	display: none;
	padding-left: 20px;
}

.mobile-accordion__item--lvl3 > .mobile-accordion__row {
	padding: 10px 4px;
	border-bottom: none;
}

.mobile-accordion__item--lvl3:last-child > .mobile-accordion__row {
	border-bottom: 1px solid var(--nec-grey20, #ebeced);
}

.mobile-accordion__item--lvl3 > .mobile-accordion__row .mobile-accordion__link {
	font-size: 13px;
	color: var(--dark-grey, #8e8e8e);
}

/* =============================
   # Responsive
============================= */

/* =============================
   # Sticky sector-aware "Contact us" tab
   Fixed to the right edge, vertically centred. Links to the sector
   contact page for /sectors/{sector}/... URLs, else the global /contact/.
   See inc/helpers.php rh_get_sector_contact_url().
============================= */

.sticky-contact {
	position: fixed;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	z-index: 130; /* below the header (150) / mega-menu, above page content */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 12px;
	background: var(--nec-blue, #1414A0);
	color: var(--nec-white, #fff);
	text-decoration: none;
	border-radius: 6px 0 0 6px;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
	transition: background-color 0.2s ease, padding-right 0.2s ease;
}

.sticky-contact:hover,
.sticky-contact:focus-visible {
	background: #10107e; /* darker NEC Blue — no token for this shade */
	color: var(--nec-white, #fff);
	padding-right: 16px;
}

.sticky-contact:focus-visible {
	outline: 2px solid var(--nec-white, #fff);
	outline-offset: -4px;
}

.sticky-contact__label {
  writing-mode: vertical-lr;
  transform: rotate(0deg);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-family: var(--nec-font);
	font-weight: 600;
	font-size: 13px;
	line-height: 1;
}

@media (max-width: 991px) {
	.site-header__nav,
	.portal-switcher,
	.lang-switcher {
		display: none;
	}

	/* Vertical tab crowds small viewports — the mobile menu covers contact links. */
	.sticky-contact {
		display: none;
	}

	/* .site-header__nav (flex: 1) is what pushes .site-header__actions to
	   the right at desktop widths — hidden above, so push it right here instead. */
	.site-header__actions {
		margin-left: auto;
	}

	.site-header__mobile-search {
		display: flex;
	}

	.hamburger {
		display: flex;
	}
}