/* =========================================================================
 * WEBSUP-409 — Interim Navbar Refresh
 * Custom-coded header. Desktop bar + click-open megamenus + mobile drawer.
 * Colors and type pulled from the Figma "Crete United Navbar Refresh" file.
 * ===================================================================== */

:root {
	--cu-naval: #051c2c;      /* nav text default + megamenu panel bg */
	--cu-cardinal: #c2273d;   /* active link + CONTACT pill */
	--cu-white: #ffffff;
	--cu-bar-h: 111px;        /* desktop bar height */
	--cu-bar-h-mobile: 80px;
	--cu-energy: #c2ed63;
	--cu-mep: #c2273d;
	--cu-industries: #498ec0;
	--cu-leadership: #498ec0; /* WEBSUP-409: nova blue was too dark on navy; Giuli changed to sky blue */
	--cu-safety: #f5a830;
}

/* ------------------------------------------------------------------ header */
.cu-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--cu-white);
	box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.1);
	transition: box-shadow 0.25s ease;
}
/* No drop shadow while the mobile menu is open (per design). */
.cu-header.is-menu-open {
	box-shadow: none;
}

/* No focus ring or text-selection highlight from pointer interaction.
   Keyboard focus (:focus-visible) still shows a ring for accessibility. */
.cu-header :focus:not(:focus-visible) {
	outline: none;
}
.cu-header button,
.cu-header a {
	-webkit-tap-highlight-color: transparent;
}
/* The theme paints a pink background on button:focus — kill it on every nav
   control (the CONTACT pill keeps its own red via .cu-cta below). */
.cu-header .cu-nav__link,
.cu-header .cu-nav__link:hover,
.cu-header .cu-nav__link:focus,
.cu-header .cu-nav__link:active,
.cu-header .cu-mm__main,
.cu-header .cu-mm__main:focus,
.cu-header .cu-mm__main:active,
.cu-header .cu-burger,
.cu-header .cu-burger:focus,
.cu-header .cu-mobile__link,
.cu-header .cu-mobile__link:focus {
	background: none !important;
}
.cu-header ::selection {
	background-color: transparent !important;
}
.cu-header ::-moz-selection {
	background-color: transparent !important;
}

.cu-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	height: var(--cu-bar-h);
	padding: 0 50px;
	position: relative;
	z-index: 1002;
	background: var(--cu-white);
}

.cu-bar__logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	line-height: 0;
}
.cu-bar__logo-img {
	display: block;
	width: auto;
	height: 51px;
}
.cu-bar__logo-text {
	font-family: "Stratos", sans-serif;
	font-weight: 700;
	font-size: 22px;
	color: var(--cu-naval);
	text-transform: uppercase;
}

/* ------------------------------------------------------------- desktop nav */
.cu-nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: flex-end;
}
.cu-nav__list {
	display: flex;
	align-items: center;
	gap: 35px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cu-nav__item {
	display: flex;
	align-items: center;
}

.cu-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 0;
	font-family: "Stratos", sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--cu-naval);
	background: none;
	border: 0;
	cursor: pointer;
	text-decoration: none;
	transition: color 0.2s ease;
	-webkit-user-select: none;
	user-select: none;
}
/* underline used for hover + active/current states */
.cu-nav__link .cu-nav__label::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background: var(--cu-cardinal);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.2s ease;
}
.cu-nav__item:hover > .cu-nav__link,
.cu-nav__link:focus-visible,
.cu-nav__item.is-open > .cu-nav__link,
.cu-nav__item.is-current > .cu-nav__link {
	color: var(--cu-cardinal);
}
.cu-nav__item:hover > .cu-nav__link .cu-nav__label::after,
.cu-nav__item.is-open > .cu-nav__link .cu-nav__label::after,
.cu-nav__item.is-current > .cu-nav__link .cu-nav__label::after {
	transform: scaleX(1);
}

/* + / x toggle icon */
.cu-nav__plus {
	position: relative;
	display: inline-block;
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	transition: transform 0.3s ease;
}
.cu-nav__plus::before,
.cu-nav__plus::after {
	content: "";
	position: absolute;
	background: currentColor;
	border-radius: 2px;
}
.cu-nav__plus::before { /* horizontal bar */
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	transform: translateY(-50%);
}
.cu-nav__plus::after { /* vertical bar */
	left: 50%;
	top: 0;
	width: 2px;
	height: 100%;
	transform: translateX(-50%);
}
.cu-nav__item.is-open .cu-nav__plus,
.cu-mobile__item.is-open .cu-nav__plus {
	transform: rotate(135deg);
}

/* CONTACT pill */
.cu-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 35px;
	border-radius: 10px;
	background: var(--cu-cardinal);
	border: 2px solid var(--cu-cardinal);
	color: #ffffff !important; /* keep white over the theme's global link color */
	font-family: "Stratos", sans-serif !important;
	font-weight: 700 !important; /* theme overrides button/link weight without this */
	font-size: 17px;
	letter-spacing: 0.0125em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
/* hover: white fill, red stroke, red text (per Figma) */
.cu-cta:hover,
.cu-cta:focus-visible {
	background: #ffffff;
	border-color: var(--cu-cardinal);
	color: var(--cu-cardinal) !important;
}

/* Elementor's kit CSS styles <button> with its own font family/weight, which
   made the button-based items (About Us, Service Solutions, Energy, MEP) render
   in a different font than the <a> items. Force our type on every nav control
   so they all match — Stratos, 400, uniform size/spacing. */
.cu-header .cu-nav__link {
	font-family: "Stratos", sans-serif !important;
	font-weight: 700 !important;
	font-size: 17px !important;
	line-height: 1.4 !important;
	letter-spacing: 0 !important;
}
.cu-header .cu-mm__main {
	font-family: "Stratos", sans-serif !important;
	font-weight: 400 !important;
	font-size: 24px !important;
	line-height: 1.4 !important;
	letter-spacing: 0 !important;
}
/* Mobile main items — same button-font override + force the text color so the
   accordion labels can't turn white/invisible on open (Giuli mobile #1, #2). */
.cu-header .cu-mobile__link {
	font-family: "Stratos", sans-serif !important;
	font-weight: 700 !important;
	font-size: 20px !important;
	line-height: 1.4 !important;
	letter-spacing: 0 !important;
	color: var(--cu-naval) !important;
}
.cu-header .cu-mobile__item.is-open > .cu-mobile__link,
.cu-header .cu-mobile__item.is-current > .cu-mobile__link {
	color: var(--cu-cardinal) !important;
}

/* ------------------------------------------------------------- megamenu */
.cu-mm {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 1001;
	background: var(--cu-naval);
	color: var(--cu-white);
	box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.1);
	opacity: 0;
	visibility: hidden;
	/* delay hiding until the fade-out finishes so switching panels cross-fades */
	transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}
.cu-mm.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.28s ease, visibility 0s;
}
.cu-mm__inner {
	position: relative;
	display: flex;
	gap: 100px;
	padding: 50px;
	overflow: hidden;
}
/* panel heights mirror the Figma frames: Services (with tier-2) = 395,
   About (direct links only) = 193 */
.cu-mm--tall .cu-mm__inner { min-height: 395px; }
.cu-mm--short .cu-mm__inner { min-height: 193px; }
.cu-mm--tall { --cu-motif-top: 110px; }
.cu-mm--short { --cu-motif-top: 30px; }

.cu-mm__col {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 25px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* tier-2 column, sits to the right of the main items (Figma: 150px gap) */
.cu-mm__col2 {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	min-width: 213px;
}

.cu-mm__item {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 34px;      /* fixed row height so hover can't shift items up/down */
	padding-left: 19px;    /* room for the absolutely-positioned accent line (4px + 15px) */
}
/* vertical accent line: 1px collapsed -> 34px on hover/active. Absolutely
   positioned so growing it never affects layout (no vertical shift). */
.cu-mm__line {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 1px;
	border-radius: 20px;
	background: transparent;
	transition: height 0.25s ease, background 0.25s ease;
}
.cu-mm__item:hover > .cu-mm__line,
.cu-mm__item.is-open > .cu-mm__line,
.cu-mm__item:focus-within > .cu-mm__line {
	height: 34px;
	background: var(--mm-accent, var(--cu-white));
}

.cu-mm__main {
	display: inline-flex;
	align-items: center;
	font-family: "Stratos", sans-serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 1.4;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	color: var(--cu-white);
	background: none;
	border: 0;
	padding: 0;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}
/* "Bold" on hover via text-shadow (faux-bold) rather than font-weight, so the
   glyphs never reposition — no text/dropdown movement on hover (Giuli #5/#6).
   Also avoids the too-thick 700 (Stratos only ships 400/700). */
.cu-mm__item:hover > .cu-mm__main,
.cu-mm__item.is-open > .cu-mm__main,
.cu-mm__item:focus-within > .cu-mm__main {
	text-shadow: 0.4px 0 0 currentColor, -0.4px 0 0 currentColor;
}
/* keep megamenu links white over the theme's global (naval) link color */
.cu-mm a,
.cu-mm a:hover,
.cu-mm a:focus,
.cu-mm .cu-mm__main {
	color: #ffffff !important;
}

/* tier-2 sub-link column (revealed on click for Energy / MEP) */
.cu-mm__sub {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cu-mm__sub[hidden] { display: none !important; }
.cu-mm__sub li { margin: 0; }
.cu-mm__sub a {
	display: inline-block;
	font-family: "Stratos", sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.4;
	letter-spacing: 0.002em;
	color: var(--cu-white);
	text-decoration: none;
	text-underline-offset: 5px;
	text-decoration-thickness: 2px;
}
/* underline takes the section's accent color on hover (Energy=green, MEP=cardinal, …) */
.cu-mm__sub a:hover,
.cu-mm__sub a:focus-visible {
	text-decoration: underline;
	text-decoration-color: var(--mm-accent, var(--cu-white));
}

/* c motif — two nested strokes; inner takes the active/hovered accent */
/* The motif is a flex column that fills the space to the RIGHT of the text
   columns and clips its own overflow — so the "C" can never overlap the
   menu text, at any width. It just shows less of the curve as the viewport
   narrows. margin-right lets it bleed into the panel's right padding. */
/* Absolutely positioned behind the text (z-index 0) and clipped only at the
   panel's own edges — so the full "C" renders without a hard cut. The c-motif
   only shows at 1440px+... 1340px+ where there's clearance from the columns,
   so the curve sits to the right of the text without overlapping it. */
.cu-mm__motif {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}
/* fixed-size motif box anchored to the top-right, matching the Figma
   placement (right overflow ~205px, top offset per panel). */
.cu-mm__motif svg {
	position: absolute;
	top: var(--cu-motif-top, 110px);
	right: -205px;
	width: 702px;
	height: 632px;
}
.cu-mm__motif-outer,
.cu-mm__motif-inner {
	fill: none;
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
}
.cu-mm__motif-outer { stroke: #ffffff; }
.cu-mm__motif-inner {
	stroke: var(--cu-motif-accent, #ffffff);
	transition: stroke 0.25s ease;
}
/* accent driven by hovered item (CSS) or clicked item (JS .acc-* class) */
.cu-mm:has(.mm-energy:hover),     .cu-mm.acc-energy     { --cu-motif-accent: var(--cu-energy); }
.cu-mm:has(.mm-mep:hover),        .cu-mm.acc-mep        { --cu-motif-accent: var(--cu-mep); }
.cu-mm:has(.mm-industries:hover), .cu-mm.acc-industries { --cu-motif-accent: var(--cu-industries); }
.cu-mm:has(.mm-leadership:hover), .cu-mm.acc-leadership { --cu-motif-accent: var(--cu-leadership); }
.cu-mm:has(.mm-safety:hover),     .cu-mm.acc-safety     { --cu-motif-accent: var(--cu-safety); }

/* --------------------------------------------------------------- burger */
.cu-burger {
	display: none;
	flex: 0 0 auto;
	width: 34px;
	height: 26px;
	position: relative;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}
.cu-burger__bar {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--cu-naval);
	border-radius: 2px;
	transition: transform 0.3s ease, opacity 0.3s ease;
}
.cu-burger__bar:nth-child(1) { top: 2px; }
.cu-burger__bar:nth-child(2) { top: 12px; }
.cu-burger__bar:nth-child(3) { top: 22px; }
.cu-burger.is-open .cu-burger__bar:nth-child(1) { transform: translateY(10px) rotate(135deg); }
.cu-burger.is-open .cu-burger__bar:nth-child(2) { opacity: 0; }
.cu-burger.is-open .cu-burger__bar:nth-child(3) { transform: translateY(-10px) rotate(-135deg); }

/* --------------------------------------------------------- mobile drawer */
.cu-mobile {
	position: fixed;
	top: var(--cu-bar-h-mobile);
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	background: var(--cu-white);
	transform: translateX(100%);
	transition: transform 0.3s ease;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 20px 30px 60px;
}
.cu-mobile.is-open { transform: translateX(0); }

.cu-mobile__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.cu-mobile__item { border: 0; }
.cu-mobile__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 12px;
	padding: 14px 0;
	font-family: "Stratos", sans-serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--cu-naval);
	background: none;
	border: 0;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}
/* current page + open dropdown: red + underlined, like desktop (Giuli mobile #4, #5) */
.cu-mobile__item.is-current > .cu-mobile__link span:not(.cu-nav__plus),
.cu-mobile__item.is-open > .cu-mobile__link span:not(.cu-nav__plus) {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
}

.cu-mobile__panel { padding: 4px 0 14px; }
.cu-mobile__group { margin: 0 0 18px; }
.cu-mobile__group-title,
.cu-mobile__sublink {
	position: relative;
	display: block;
	padding-left: 20px;
	font-family: "Stratos", sans-serif !important;
	font-weight: 700 !important; /* the <a> subitems (Leadership/Safety/Industries) get the theme's link weight without this */
	font-size: 16px;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--cu-naval);
	text-decoration: none;
	margin-bottom: 12px;
}
/* accent line beside each subitem: 8px wide x 24px tall, vertically centered
   on the word (Giuli mobile #5) */
.cu-mobile__group-title::before,
.cu-mobile__sublink::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 24px;
	border-radius: 20px;
	background: var(--mm-accent, transparent);
}
.cu-mobile__group.mm-energy      { --mm-accent: var(--cu-energy); }
.cu-mobile__group.mm-mep         { --mm-accent: var(--cu-mep); }
.cu-mobile__sublink.mm-industries{ --mm-accent: var(--cu-industries); }
.cu-mobile__sublink.mm-leadership{ --mm-accent: var(--cu-leadership); }
.cu-mobile__sublink.mm-safety    { --mm-accent: var(--cu-safety); }
.cu-mobile__group ul {
	margin: 0;
	padding: 0 0 0 16px;
	list-style: none;
}
.cu-mobile__group ul li { margin: 0 0 10px; }
.cu-mobile__group ul a {
	font-family: "Stratos", sans-serif;
	font-weight: 400;
	font-size: 16px;
	color: var(--cu-naval);
	text-decoration: none;
}
.cu-mobile__item--cta {
	margin-top: 18px;
	margin-bottom: 30px; /* breathing room from the bottom of the screen (Giuli mobile #7) */
}
.cu-mobile__item--cta .cu-cta {
	width: 100%;
	font-size: 20px; /* match the mobile main items (Giuli mobile #1a) */
}
/* larger +/x icons on mobile (Giuli mobile #6) */
.cu-mobile__link .cu-nav__plus {
	width: 16px;
	height: 16px;
}
.cu-mobile__link .cu-nav__plus::before,
.cu-mobile__link .cu-nav__plus::after {
	border-radius: 2px;
}
.cu-mobile__link .cu-nav__plus::before { height: 2.5px; }
.cu-mobile__link .cu-nav__plus::after { width: 2.5px; }

/* ------------------------------------------------------------ breakpoints */
/* Switch to the mobile drawer below 1280px. With 6 items + CTA at 18px the
   desktop bar needs ~1274px; below this it wrapped / cut off CONTACT. */
@media (max-width: 1279px) {
	.cu-bar {
		height: var(--cu-bar-h-mobile);
		padding: 0 30px;
	}
	.cu-bar__logo-img { height: 40px; }
	.cu-nav { display: none; }
	.cu-burger { display: block; }
	.cu-mm { display: none !important; } /* megamenus are desktop-only */
}

@media (min-width: 1280px) {
	.cu-mobile { display: none; }
}

/* c-motif design shows only at 1340px+ (Giuli/Christina). Below that the
   megamenu shows without it. (Below 1280px it's the mobile drawer anyway.) */
@media (max-width: 1339px) {
	.cu-mm__motif { display: none; }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.cu-header, .cu-nav__plus, .cu-mm, .cu-mm__line, .cu-mm__main,
	.cu-burger__bar, .cu-mobile, .cu-mm__motif-inner,
	.cu-nav__link, .cu-nav__label::after {
		transition: none !important;
		animation: none !important;
	}
}