/* ==========================================================================
   CDC Build child theme
   Only what Elementor does not build: the site header (header.php). Project
   pages have their own project.css. Everything else is
   Elementor global classes and variables. Colours, fonts and sizes use those
   variables (printed on :root by the kit), with the design's values as
   fallbacks for any page that loads without the kit.
   ========================================================================== */

:root {
	--header-h: 96px;
	--header-h-stuck: 68px; /* the bar once condensed on scroll, 1000px and up */
}
@media (max-width: 1059px) {
	:root { --header-h: 78px; }
}

/* Fixed, not sticky, so the condensing bar never shifts the page. The body
   padding holds its space; # links stop below it. */
html {
	scroll-padding-top: calc(var(--header-h) + 1px);
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}
@media (min-width: 1000px) {
	html:has(.site-head.is-top, .site-head.is-stuck) {
		scroll-padding-top: calc(var(--header-h-stuck) + 1px);
	}
}

body {
	padding-top: calc(var(--header-h) + 1px);
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

.site-main-wrap:focus { outline: 0; }

/* --- Header --------------------------------------------------------------- */
.site-head {
	position: fixed; z-index: 90;
	top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0;
	background: #fff;
	border-bottom: 1px solid var(--line, #e4e8ea);
	transition: box-shadow .3s ease;
}
.site-head.is-stuck { box-shadow: 0 8px 30px rgba(14, 20, 24, .06); }

.site-head__inner {
	display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
	max-width: var(--wrap, 1320px); min-height: var(--header-h);
	margin-inline: auto; padding-inline: var(--gutter, clamp(1.25rem, 4vw, 4rem));
	transition: min-height .3s ease;
}

/* Logo, deliberately larger than the old site's */
.site-head__brand { display: block; flex: 0 0 auto; line-height: 0; }
.site-head__brand img { display: block; width: clamp(180px, 22vw, 250px); height: auto; transition: width .3s ease; }

@media (min-width: 1000px) {
	.site-head.is-stuck .site-head__inner { min-height: var(--header-h-stuck); }
	.site-head.is-stuck .site-head__brand img { width: clamp(150px, 16vw, 190px); }
}

/* Menu */
.site-nav { display: flex; align-items: center; }
.site-nav__list {
	display: flex; align-items: center; gap: clamp(1.375rem, 2.4vw, 2.25rem);
	margin: 0; padding: 0; list-style: none;
}
.site-nav__list > li { position: relative; }
.site-nav__list > li > a {
	position: relative; display: inline-flex; align-items: center; gap: .45rem;
	padding-block: .4rem;
	font-family: var(--font-head, "Montserrat"), "Helvetica Neue", Arial, sans-serif;
	font-size: .8125rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
	color: var(--ink, #0e1418); text-decoration: none;
	transition: color .3s ease;
}
.site-nav__list > li > a::after {
	content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
	height: 2px; background: var(--accent, #00dbf4); transition: right .25s ease;
}
.site-nav__list > li > a:hover::after,
.site-nav__list > li > a[aria-current="page"]::after { right: 0; }

.site-nav__chev { transition: transform .25s ease; }
.site-nav__list > li:hover .site-nav__chev,
.site-nav__list > li:focus-within .site-nav__chev { transform: rotate(180deg); }

/* Services dropdown */
.site-nav .sub-menu {
	position: absolute; top: calc(100% + 1.1rem); left: -1.5rem; z-index: 2;
	min-width: 350px; margin: 0; padding: .75rem; list-style: none;
	background: #fff; border: 1px solid var(--line, #e4e8ea);
	box-shadow: 0 24px 60px rgba(14, 20, 24, .14);
	opacity: 0; visibility: hidden; transform: translateY(-8px);
	transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
/* Bridges the gap under the link, so the pointer can cross into the menu */
.site-nav .sub-menu::before {
	content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 1.2rem;
}
.site-nav__list > li:hover > .sub-menu,
.site-nav__list > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }

.site-nav .sub-menu a {
	display: block; padding: .8rem 1rem;
	font-family: var(--font-body, "PT Sans"), "Helvetica Neue", Arial, sans-serif;
	font-size: .9375rem; line-height: 1.4;
	color: var(--ink, #0e1418); text-decoration: none;
	border-left: 2px solid transparent;
	transition: background-color .16s ease, border-color .16s ease;
}
.site-nav .sub-menu a:hover { background: var(--stone, #f1f3f4); border-left-color: var(--accent, #00dbf4); }

/* "Let's talk": a menu item with the CSS class nav-cta, as a pill */
.site-nav__list > li.nav-cta { display: none; }
@media (min-width: 1060px) {
	.site-nav__list > li.nav-cta { display: block; margin-inline-start: calc(clamp(1.5rem, 3vw, 3rem) - clamp(1.375rem, 2.4vw, 2.25rem)); }
}
.site-nav__list > li.nav-cta > a {
	gap: .65rem; padding: .8125rem 1.5rem;
	font-size: .75rem; font-weight: 700; letter-spacing: .11em; line-height: 1.72;
	background: var(--accent, #00dbf4); border: 1px solid var(--accent, #00dbf4); border-radius: 999px;
	color: var(--ink, #0e1418);
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.site-nav__list > li.nav-cta > a::after { display: none; }
/* Ink rather than the white hover used on dark bands, which would vanish on this white bar */
.site-nav__list > li.nav-cta > a:hover { background: var(--ink, #0e1418); border-color: var(--ink, #0e1418); color: #fff; }

/* Burger */
.nav-burger {
	display: none; align-items: center; gap: .6rem;
	padding: .5rem 0; background: none; border: 0; cursor: pointer;
	font-family: var(--font-head, "Montserrat"), "Helvetica Neue", Arial, sans-serif;
	font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--ink, #0e1418);
}
.nav-burger:hover, .nav-burger:focus { background: none; color: var(--ink, #0e1418); }
.nav-burger__bars { display: grid; gap: 5px; width: 24px; }
.nav-burger__bars span { display: block; height: 2px; background: var(--ink, #0e1418); transition: transform .22s ease, opacity .22s ease; }
.nav-burger[aria-expanded="true"] .nav-burger__bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .nav-burger__bars span:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] .nav-burger__bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

:is(.site-head, .cdc-project) :focus-visible { outline: 3px solid var(--accent, #00dbf4); outline-offset: 3px; }

@media (max-width: 1059px) {
	.nav-burger { display: inline-flex; }
	.site-nav {
		position: fixed; z-index: 80;
		inset: calc(var(--header-h) + 1px + var(--wp-admin--admin-bar--height, 0px)) 0 0;
		display: block; padding: 2rem var(--gutter, clamp(1.25rem, 4vw, 4rem)) 3rem;
		background: #fff; overflow-y: auto;
		transform: translateX(100%); visibility: hidden;
		transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility .3s;
	}
	.site-nav.is-open { transform: none; visibility: visible; }
	.site-nav__list { display: block; }
	.site-nav__list > li { border-bottom: 1px solid var(--line, #e4e8ea); }
	.site-nav__list > li > a { display: flex; width: 100%; padding: 1.15rem 0; font-size: 1rem; }
	.site-nav__list > li > a::after, .site-nav__chev { display: none; }
	/* the services list sits open under its heading */
	.site-nav .sub-menu {
		position: static; min-width: 0; padding: 0 0 1rem;
		border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none;
	}
	.site-nav .sub-menu::before { display: none; }
	.site-nav .sub-menu a { padding: .65rem 0 .65rem 1rem; border-left-color: var(--line, #e4e8ea); }
}

@media (prefers-reduced-motion: reduce) {
	.site-head__inner, .site-head__brand img, .site-nav, .site-nav .sub-menu { transition: none; }
}