/*
 * chrome-2026/header.css
 * DEFERRED site-header CSS — self-contained, no Bootstrap / jQuery / shared theme CSS.
 * Everything not needed for first paint: dropdown submenus (hover + .opened accordion),
 * search-form reveal, sticky states (is_bg / is_fixed / is_fixed_white), the mobile
 * body.opened-menu drawer, hover effects and the logo_dark swap.
 * Replicates: css/general.css (538-786) and css/media.css (40-98, 323-330, 331-573).
 * Loaded after header-critical.css; scoped to .header / body classes.
 */

/* ===== home-page sticky background layer — general.css:543-569 ===== */
.home-page .header::after {
	content: ' ';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
	background-repeat: no-repeat;
	background-position: top center;
	background-size: 100% auto;
	z-index: -1;
}
/* scrolled past 1px: dark backdrop fades in — general.css:557-561 */
.home-page .header.is_bg::after {
	background-color: #0f0111;
	opacity: 1;
}
/* scrolled past hero: solid white bar — general.css:562-569 */
.home-page .header.is_fixed_white::after {
	background-image: none;
	background-color: #fff;
}
.home-page .header.is_fixed_white {
	background-color: #fff;
	box-shadow: 0 2px 5px 0 rgb(142 142 142 / 50%);
}

/* ===== inner-page sticky — general.css:570-587 ===== */
.inner-page .header.is_fixed {
	position: fixed;
	top: 0;
	background-color: #fff;
	z-index: 999;
	box-shadow: 0 2px 5px 0 rgb(142 142 142 / 50%);
	margin-top: 0;
}
/* dark backing strip before the header is stuck — general.css:578-584.
   z-index:-1 keeps it BEHIND the header content: it's an absolutely-positioned
   pseudo-element, so without this it paints over the static .header-action
   (search + CTA) and hides them until scroll (the logo/nav are position:relative
   so they already paint above it). */
.inner-page .header:not(.is_fixed)::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100px;
	background-color: #0f0111;
	z-index: -1;
}
.inner-page.case-studies-single-page .header::before {
	background: transparent;
}

/* ===== home-2026: transparent header over the dark hero; solid white only when
   stuck. Kills the #0f0111 backing — the inner-page ::before strip (preview) and
   the .home-page is_bg ::after backdrop (after the front-page swap) — for the
   home-2026 template, regardless of front-page status. The hero is var(--c-dark)
   so the white logo/nav stay visible until the header turns white on scroll. */
body.page-template-template-home-2026 .header:not(.is_fixed)::before {
	/* (0,3,2) — beats the .inner-page .header:not(.is_fixed)::before strip (0,3,1)
	   on specificity, so no !important needed. */
	background-color: transparent;
}
body.page-template-template-home-2026 .header.is_bg::after {
	background-color: transparent;
	opacity: 0;
}

/* ===== logo swap on solid states — general.css:615-617 + JS toggles inline display ===== */
.home-page .header.is_fixed_white .logo_header .logo_white,
.inner-page .header.is_fixed .logo_header .logo_white {
	display: none;
}
.home-page .header.is_fixed_white .logo_header .logo_dark,
.inner-page .header.is_fixed .logo_header .logo_dark {
	display: block;
}

/* ===== nav-link underline + hover + active — general.css:626-661 ===== */
.header .navbar-nav .nav-link::after {
	content: '';
	position: absolute;
	left: .8em;
	right: .8em;
	bottom: 8px;
	height: 2px;
	background-color: #1690d3;
	opacity: 0;
	transform: translateY(0);
	transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, color 0.2s ease-in-out;
}
.header .navbar-nav .nav-link:hover {
	text-decoration: none;
}
.header .navbar-nav .nav-item.current_page_item .nav-link::after,
.header .navbar-nav .nav-item.current-menu-parent .nav-link::after,
.header .navbar-nav .nav-item.case_studies_parent .nav-link::after {
	opacity: 1;
	bottom: 20px;
}
.header .navbar-nav .nav-link:not(.current-link):hover::after {
	opacity: 1;
	transform: translateY(-10px);
}
.header .navbar-nav .nav-item.current_page_item .nav-link,
.header .navbar-nav .nav-item.current-menu-parent .nav-link,
.header .navbar-nav .nav-item.case_studies_parent .nav-link {
	color: #1690D3;
}
/* link colour flips to dark on the solid states — general.css:699-703 */
.home-page .header.is_fixed_white .navbar-nav .nav-link,
.inner-page .header.is_fixed .navbar-nav .nav-link,
.inner-page .header.is_fixed .navbar-nav .nav-item.dropdown .dropdown-menu li a.dropdown-item {
	color: #000;
}

/* ===== dropdown submenu panel (desktop) — general.css:662-707 ===== */
.header .navbar-nav .nav-item.dropdown .dropdown-menu {
	position: absolute;
	top: 82px;
	right: 0;
	padding: 1rem 0;
	margin: 0;
	list-style: none;
	background-color: #050314;
	box-shadow: 0 -2px 0 0 #1690D3, 0 4px 30px 0 rgb(22 145 211 / 50%) !important;
	border: 0;
	border-radius: 0;
	z-index: -2;
	opacity: 0;
	min-width: 300px;
	display: none;
	transition: opacity .5s ease-in-out;
}
.inner-page .header.is_fixed .navbar-nav .nav-item.dropdown .dropdown-menu {
	background-color: #fff;
}
.header .navbar-nav .nav-item.dropdown .dropdown-menu li {
	list-style: none;
}
.header .navbar-nav .nav-item.dropdown .dropdown-menu li a.dropdown-item {
	display: block;
	padding: 0.35em 1.2em 0.85em; /* a touch more vertical room than the theme's 0/.6em */
	font-size: 16px;
	line-height: 24px; /* prod inherits this from body line-height:1.5; lean has no body rule */
	color: #fff;
	background: transparent;
	text-decoration: none;
	transition: all .05s ease-in-out;
}
.header .navbar-nav .nav-item.dropdown .dropdown-menu li a.dropdown-item:hover,
.header .navbar-nav .nav-item.dropdown .dropdown-menu li.current-menu-item a.dropdown-item {
	color: #1690d3;
}
/* arrow caret hidden by default — general.css:679-691 */
.header .navbar-nav .nav-item.dropdown .dropdown-menu-arrow {
	content: '';
	position: absolute;
	top: 82px;
	left: 50%;
	display: none;
	opacity: 0;
	border-right: 10px solid transparent;
	border-left: 10px solid transparent;
	border-bottom: 10px solid #1690D3;
	transform: translateX(-50%) translateY(-100%);
	transition: opacity .5s ease-in-out;
}
/* search icon recolours when the inner bar is stuck — general.css:781-786 */
.header.is_fixed .header-search-btn .search-open svg path {
	fill: #15172E;
}
.header.is_fixed .header-search-btn .search-close svg path {
	stroke: #15172E;
}

/* ===== search form reveal — general.css:748-780 (JS toggles display) ===== */
.header .header-search-form {
	position: absolute;
	top: 100%;
	right: 0;
	/* fixed 449px, anchored right to the position:relative .header-action. width:100%
	   would resolve against the narrow action cluster and shrink the panel; this
	   matches the legacy header's panel size. The mobile rule below resets width. */
	width: 449px;
	max-width: 449px;
	padding: 35px 32px;
	background: #FFFFFF;
	box-shadow: 30px 40px 100px 20px rgba(0, 0, 0, 0.0666044);
	border-radius: 0 0 6px 6px;
}
.header .header-search-form form {
	display: flex;
	align-items: flex-end;
	border-bottom: 1px solid #7C8CAC;
}
.header .header-search-form input {
	width: 100%;
	padding: 0 0 10px;
	/* font-family is set in header-critical.css (inlined) so the placeholder is
	   on-brand Montserrat from first paint — kept out of this deferred sheet so
	   it can't override the critical rule on load. */
	font-size: 16px;
	line-height: 20px;
	color: #15172E;
	border: unset;
}
.header .header-search-form input::placeholder {
	color: #7C8CAC;
}
.header .header-search-form button {
	margin-bottom: 11px;
	padding: 0;
	background: transparent;
	border: unset;
	cursor: pointer;
}

/* CTA pill hover — general.css:152-164 */
.header .navbar-button:hover,
.header .navbar-button:focus {
	background-color: #1d78ab;
	border-color: #1d78ab;
	color: #fff;
	text-decoration: none;
	box-shadow: none;
}

/* hamburger bars flip to black on the solid states — general.css:723-732 */
.header.is_fixed_white .header_menu_m i,
.header.is_fixed .header_menu_m i {
	border-bottom: 2px solid #000;
}
.header.is_fixed_white .header_menu_m i:before,
.header.is_fixed_white .header_menu_m i:after,
.header.is_fixed .header_menu_m i:before,
.header.is_fixed .header_menu_m i:after {
	background-color: #000;
}

/* ===== desktop (>=961px): hover opens the 2nd-level panel (direct child only,
   so it doesn't also force-open nested submenus); the 3rd-level flies out to
   the RIGHT of its parent <li>. Self-contained — folds in the theme's inline
   `litslink-third-level-menu-fix` so it works without that patch and without
   the earlier right:0 conflict. media.css:323-330 + the inline patch. ===== */
@media (min-width: 961px) {
	.header .navbar-nav .nav-item.dropdown:hover > .dropdown-menu,
	.header .navbar-nav .nav-item.dropdown:hover > .dropdown-menu-arrow {
		display: block;
		opacity: 1;
		z-index: 9;
	}
	/* nested (3rd-level) submenu: position beside its parent item, not at top */
	.header .navbar-nav .dropdown-menu > li.menu-item-has-children {
		position: relative;
	}
	/* selector must out-specify the 2nd-level panel rule (.nav-item.dropdown
	   .dropdown-menu = 0,5,0) which sets right:0 — else right:0 fights left:100%. */
	.header .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-menu {
		top: -0.5rem;
		left: 100%;
		right: auto;
		min-width: 18rem;
	}
	.header .navbar-nav .dropdown-menu > li.menu-item-has-children:hover > .dropdown-menu,
	.header .navbar-nav .dropdown-menu > li.menu-item-has-children:focus-within > .dropdown-menu {
		display: block;
		opacity: 1;
		z-index: 1001;
	}
	/* "has children" caret on the parent item */
	.header .navbar-nav .dropdown-menu > li.menu-item-has-children > a.dropdown-item {
		position: relative;
		padding-right: 1.75rem;
	}
	.header .navbar-nav .dropdown-menu > li.menu-item-has-children > a.dropdown-item::after {
		content: '\203A';
		position: absolute;
		right: 0.75rem;
		top: 50%;
		transform: translateY(-50%);
		font-size: 1.25rem;
		line-height: 1;
		opacity: 0.6;
	}
}

/* ===== desktop tightening — media.css:40-49 (≤1200) + 88-90 ===== */
@media screen and (max-width: 1200px) {
	.header .navbar-nav .nav-link {
		padding-left: .6rem;
		padding-right: .6rem;
		font-size: 12px;
	}
	.header .navbar-button {
		padding: 9px 20px;
		font-size: 14px;
	}
	.header .header-search-btn {
		margin-right: 5px;
	}
}
/* nav-link drops fixed height once it wraps — media.css:183-185 */
@media screen and (max-width: 992px) {
	.header .navbar-nav .nav-link {
		height: initial !important;
	}
}

/* ===== mobile drawer (≤960px) — media.css:331-573 ===== */
@media screen and (max-width: 960px) {
	body.opened-menu {
		overflow: hidden;
	}
	body.opened-menu .header {
		background-color: transparent !important;
	}
	body.opened-menu .header .logo_header {
		z-index: 99;
	}
	.inner-page .header:not(.is_fixed)::before {
		height: 60px;
	}

	/* the slide-down panel — media.css:367-386 */
	.header .navbar-header {
		background: #000 url('../../../images/background_menu.jpeg') center no-repeat;
		background-size: cover;
		transition: min-height 0.15s ease-out;
	}
	body.opened-menu .header .navbar-header {
		padding: 60px 0 0;
		min-height: 100vh !important;
		transition: min-height 0.25s ease-in;
	}
	.header .navbar-header .navbar-collapse {
		display: block !important;
		overflow-y: auto;
	}
	.header .navbar-collapse .navbar-nav {
		display: flex;
		flex-direction: column !important;
		height: initial !important;
		padding: 0 32px !important;
	}
	.header .navbar-collapse .navbar-button {
		margin-top: 30px;
		margin-bottom: 100px;
	}

	/* stacked nav-items — media.css:319-321,346-348,403-410 */
	.header .navbar-nav .nav-item {
		display: flex;
	}
	.header .navbar-nav .nav-item.dropdown {
		flex-direction: column;
		width: 90%;
	}
	.header .navbar .navbar-nav .nav-link {
		display: inline-block !important;
		color: #fff !important;
		font-size: 19px;
		text-transform: uppercase;
		padding: 20px 10px;
		white-space: break-spaces;
	}
	.header .navbar-nav .nav-link::after {
		bottom: -5px;
	}
	.header .btn {
		font-size: 19px;
		padding: 8px 20px;
	}

	/* accordion sub-menu collapsed; JS toggles .opened on the arrow — media.css:411-449 */
	.header .navbar-nav .nav-item.dropdown .dropdown-menu li a.dropdown-item {
		color: #fff !important;
		padding: 10px;
		white-space: break-spaces;
	}
	/* 2nd-level only (direct child) — so the collapse doesn't also clamp the
	   nested 3rd-level (that's why Real Estate's children never showed). */
	.header .navbar-nav .nav-item.dropdown > .dropdown-menu {
		position: relative;
		top: unset;
		min-width: 100%;
		padding: 0 !important;
		z-index: 1;
		opacity: 1;
		background: transparent !important;
		box-shadow: 0 -2px 0 0 #21cad0, 0 4px 30px 0 rgb(33 202 208 / 40%);
		/* Slide-toggle (replaces jQuery slideToggle): COLLAPSED by default. Uses
		   max-height, NOT the grid-rows:0fr trick — that trick only collapses a
		   SINGLE child, but this <ul> has many <li>, which created implicit
		   auto-height rows → the menu stayed expanded + overlapped.
		   .6s = half the speed of the prior .3s (matches prod's slower reveal). */
		display: block;
		max-height: 0;
		overflow: hidden;
		transition: max-height .6s ease;
	}
	/* nested 3rd-level: inline + static, shown when its 2nd-level parent is open
	   (the inline patch sets display:block/static; this lifts our max-height clamp). */
	.header .navbar-nav .nav-item.dropdown .dropdown-menu .dropdown-menu {
		max-height: none;
		overflow: visible;
		padding-left: 1rem !important;
	}
	/* JS adds .is-open in tandem with the arrow's .opened */
	.header .navbar-nav .nav-item.dropdown > .dropdown-menu.is-open {
		max-height: 1200px;
	}
	/* the tappable caret — media.css:419-437 */
	.header .navbar-nav .nav-item.dropdown .dropdown-menu-arrow {
		display: block;
		position: absolute;
		top: 20px;
		left: unset;
		right: 0;
		opacity: 1;
		cursor: pointer;
		border-right: 10px solid transparent;
		border-left: 10px solid transparent;
		border-top: 10px solid #21CAD0;
		border-bottom: 0;
		transform: translateY(75%) translateX(100%);
		transition: all .5s ease;
	}
	.header .navbar-nav .nav-item.dropdown .dropdown-menu-arrow.opened {
		transform: rotate(180deg) translateY(-75%) translateX(-100%);
		transform-origin: center;
	}

	/* hamburger → X when the drawer is open — media.css:492-509 */
	body.opened-menu .header .header_menu_m i {
		border-color: transparent !important;
	}
	body.opened-menu .header .header_menu_m i:before,
	body.opened-menu .header .header_menu_m i:after {
		width: 100%;
		background-color: #fff !important;
	}
	body.opened-menu .header .header_menu_m i:after {
		transform: rotate(-45deg);
		top: 9px;
	}
	body.opened-menu .header .header_menu_m i:before {
		transform: rotate(45deg);
	}

	/* drawer forces the white logo regardless of sticky state — media.css:510-515 */
	body.opened-menu .header .logo_header .logo_dark {
		display: none !important;
	}
	body.opened-menu .header .logo_header .logo_white {
		display: block !important;
	}

	/* search circle hidden; form shown inline in the drawer — media.css:544-556 */
	.header .header-search-btn {
		display: none !important;
	}
	.header .header-search-form {
		display: block !important;
		position: relative;
		width: 100%;
		max-width: 300px;
		padding: 15px 20px;
		border-radius: 6px;
	}
	.header .header-action {
		flex-direction: column;
	}
}