/* Header, mobile menu panel and footer. Values measured on the live site (see docs/header-footer-test.md). */

/* ---- Header: fixed over the page, transparent, turns navy once scrolled ---- */
.site-header {
	position: fixed;
	top: var(--wp-admin--admin-bar--height, 0px);
	right: 0;
	left: 0;
	z-index: 998;
	margin: 0;
	transition: background-color 0.4s ease;
}
.site-header.is-scrolled { background: var(--base); }
.site-header__inner {
	box-sizing: border-box;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 0;
	width: 100%;
	max-width: calc(136.6rem + 2 * var(--gutter));
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.site-header .site-header__logo { flex: 0 1 18rem; min-width: 0; margin: 0; align-self: flex-start; }
.site-header .site-header__logo a, .site-header .site-header__logo img { display: block; width: 100%; height: auto; }
.site-header--landing .site-header__logo { flex-basis: 18rem; }
@media (max-width: 991px) { .site-header .site-header__logo { flex: 0 0 100px; width: 100px; } }

/* The bar is shorter once scrolled, and the logo tile hangs below it */
/* the logo overhangs the bar by 30px, so the bar is that much shorter than the logo */
.site-header.is-scrolled .site-header__logo { margin-bottom: -30px; }

/* Menu */
.site-header .site-header__nav {
	flex: 0 1 100%;
	min-width: 0;
	justify-content: flex-end;
	padding: var(--space-xs) 0;
	font-weight: 600;
	text-transform: uppercase;
	--toggle-gap: 0.5em;
}
.site-header .wp-block-navigation__container { gap: 0; align-items: center; }
.site-header .site-header__nav .wp-block-navigation-item { margin-left: 1.5em; color: var(--white); }
.site-header .site-header__nav .wp-block-navigation-item__content { color: var(--white); text-decoration: none; transition: all 0.3s ease; }
.site-header .wp-block-navigation__container.site-header__nav > .wp-block-navigation-item:hover > .wp-block-navigation-item__content { color: rgb(255 255 255 / 80%); }
.site-header .wp-block-navigation-submenu__toggle { gap: 0; padding: 0 calc(1.5rem + var(--toggle-gap)) 0 0 !important; font: inherit; text-transform: inherit; }
.site-header .wp-block-navigation-item .wp-block-navigation__submenu-icon { display: flex; align-items: center; width: 1.5rem; height: 0.5625rem; margin: 0 0 0 -1.5rem !important; }
.site-header .wp-block-navigation__submenu-icon svg { display: none; }
.site-header .wp-block-navigation__submenu-icon::before {
	content: "";
	width: 100%;
	height: 100%;
	background: var(--white);
	-webkit-mask: var(--icon-chevron-down) center / 100% 100% no-repeat;
	mask: var(--icon-chevron-down) center / 100% 100% no-repeat;
}
.site-header .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-icon::before { transform: rotate(180deg); }
/* Dropdown */
.site-header .site-header__nav .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
	top: calc(100% + 1em);
	right: auto !important;
	left: 0 !important;
	width: max-content;
	min-width: 0 !important;
	min-width: auto;
	padding: 0;
	border: 0;
	background: var(--white);
	text-transform: none;
	font-weight: 600;
}
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item { margin: 0; padding-inline: 1em; border: 1px solid #ccc; border-radius: var(--radius); }
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item .wp-block-navigation-item__content { padding: var(--space-xs) !important; color: var(--base); white-space: nowrap; }
.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content { color: var(--primary); }
/* Careers: the red button */
.site-header .site-header__nav .btn-red {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	min-height: 60px;
	padding: var(--btn-padding-block) var(--btn-padding-inline);
	border: var(--btn-border-width) var(--btn-border-style) var(--primary);
	background: var(--primary);
	transition: all 0.3s ease;
}
.site-header .site-header__nav .btn-red .wp-block-navigation-item__content { padding: 0; line-height: 1; }
.site-header .site-header__nav .btn-red:hover { background: transparent; border-color: var(--white); }
.site-header .site-header__nav .btn-red:hover > .wp-block-navigation-item__content { color: var(--white); }

/* ---- Below 992px the menu lives in a panel opened by the hamburger (core switches at 600px, so 600 to 991 is restated) ---- */
.site-header .wp-block-navigation__responsive-container-open {
	position: relative;
	width: 40px;
	height: 40px;
	padding: 0;
	color: var(--white);
}
.site-header .wp-block-navigation__responsive-container-open svg { display: none; }
.site-header .wp-block-navigation__responsive-container-open::before,
.site-header .wp-block-navigation__responsive-container-open::after,
.nav-close::before, .nav-close::after {
	content: "";
	position: absolute;
	top: 50%;
	height: 3px;
	border-radius: 50vw;
	background: currentColor;
}
.site-header .wp-block-navigation__responsive-container-open::before { right: 0; left: 0; transform: translateY(-5px); }
.site-header .wp-block-navigation__responsive-container-open::after { right: 0; left: 10px; transform: translateY(5px); }
@media (max-width: 991px) and (min-width: 600px) {
	.site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	.site-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
}
@media (min-width: 992px) {
	.site-header .wp-block-navigation__responsive-container-open { display: none; }
}
/* The open menu: the page is dimmed, the white panel takes 85% of the width, the close button sits where the hamburger was */
.site-header .wp-block-navigation__responsive-container.is-menu-open { background: rgb(0 0 0 / 50%); color: var(--black); padding: 0; }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding: 0; margin: 0; max-width: none; width: 100%; height: 100%; }
.site-header .wp-block-navigation__responsive-container.is-menu-open > .wp-block-navigation__responsive-close { position: absolute; inset: 0; }
.site-header .wp-block-navigation__overlay-container { position: absolute; inset: 0; }
.nav-panel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 85%;
	overflow-y: auto;
	background: var(--white);
	text-transform: none;
	font-weight: 600;
}
.nav-panel > * { margin: 0; }
.nav-panel__logo { padding: 0 var(--gutter); }
.nav-panel__logo-img { width: 100px; margin: 0; }
.nav-panel__logo-img a { display: block; } /* inline, it left a line's descender gap under the logo */
.nav-panel__logo-img img { display: block; width: 100%; height: auto; }
.nav-panel__list { flex: 1 1 auto; padding: 1.25rem var(--gutter); }
.nav-panel__list .wp-block-navigation__container { display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
.nav-panel__list .wp-block-navigation-item { display: block; width: 100%; margin: 0; border-bottom: 1px solid rgb(0 0 0 / 10%); }
.nav-panel__list .wp-block-navigation-item__content { display: flex; padding: 0.7rem 0.5rem; color: var(--primary); line-height: 1.3; text-decoration: none; }
.nav-panel__footer { padding: 1.25rem; border-top: 0; }
.nav-panel__phone { display: flex; align-items: center; gap: calc(var(--space-xs) / 2); margin: 0; font-size: 1.6rem; font-weight: 600; }
.nav-panel__phone::before {
	content: "";
	width: 1.5rem;
	height: 1.5rem;
	background: var(--primary);
	-webkit-mask: var(--icon-phone) center / contain no-repeat;
	mask: var(--icon-phone) center / contain no-repeat;
}
.nav-panel__phone a { color: var(--primary); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.25em; text-decoration-thickness: 1px; transition: all 0.3s ease; }
.nav-panel__phone a:hover { text-decoration-color: var(--primary); }
.nav-close {
	position: absolute;
	top: 32px;
	right: var(--gutter);
	z-index: 2;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--white);
	cursor: pointer;
	font-size: 0;
}
.nav-close svg { display: none; }
.nav-close::before, .nav-close::after { right: 0; left: 0; }
.nav-close::before { transform: rotate(45deg); }
.nav-close::after { transform: rotate(-45deg); }
/* The panel logo uses the header gutter at every width, so it lands exactly on the header logo when the menu opens */
/* The panel is rendered inside the header's Navigation block, so the desktop menu rules above (white text, a left margin
   on every item) reach it too and outrank the panel's own. Restated here at a higher specificity. */
.site-header .site-header__nav .nav-panel .wp-block-navigation-item { margin: 0; color: var(--black); }
.site-header .site-header__nav .nav-panel .wp-block-navigation-item__content { color: var(--primary); font-weight: 400; line-height: 1.2; }
/* Core puts the className on the list as well as its wrapper, so the wrapper's padding was applied twice. */
.site-header .nav-panel ul.nav-panel__list { padding: 0; }
/* The close button takes the hamburger's place, so the hamburger is hidden while the menu is open (core marks <html>). */
html.has-modal-open .site-header .wp-block-navigation__responsive-container-open { visibility: hidden; }

/* ---- Footer ---- */
.site-footer { margin: 0; }
.footer { box-sizing: border-box; padding: var(--section-space-m) var(--gutter); border-top: 1px solid var(--neutral-ultra-light); }
.footer .footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	align-items: stretch;
	gap: var(--space-xxl);
	width: 100%;
	max-width: 136.6rem;
	margin: 0 auto;
}
.footer .footer__content-wrapper { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-m); }
.footer .footer__content-wrapper > *, .footer .footer__nav-column > * { margin: 0; }
.footer .footer__logo { width: 10rem; max-width: 100%; }
.footer .footer__logo a, .footer .footer__logo img { display: block; width: 100%; height: auto; }
.footer .footer__heading { color: var(--black); font-size: var(--h3); }
.footer .footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: var(--space-l); }
.footer .footer__nav-column { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-m); }
.footer .footer__services .wp-block-post-template,
.footer .footer__company .wp-block-navigation__container { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-m); margin: 0; padding: 0; list-style: none; }
.footer .footer__nav-link, .footer .footer__nav-link a, .footer .footer__company .wp-block-navigation-item__content { color: var(--primary); font-size: var(--text-m); font-family: var(--wp--preset--font-family--open-sans); font-weight: 400; line-height: var(--text-line-height); text-decoration: none; text-transform: none; }
.footer .footer__nav-link { margin: 0; }
.footer .footer__nav-link a:hover, .footer .footer__company .wp-block-navigation-item__content:hover { color: var(--primary-hover); text-decoration: underline; }
@media (max-width: 991px) { .footer .footer__inner { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .footer .footer__logo { max-width: 7.5rem; } }
@media (max-width: 478px) { .footer .footer__nav { grid-template-columns: minmax(0, 1fr); } }
.subfooter { box-sizing: border-box; padding: var(--space-m) var(--gutter); color: var(--black); }
.subfooter .subfooter__inner { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: var(--space-s); width: 100%; max-width: 136.6rem; margin: 0 auto; }
.subfooter .subfooter__inner > * { margin: 0; }
.subfooter a { color: var(--black); text-decoration: underline; text-underline-offset: 5px; }
.subfooter a:hover { color: var(--primary); }

/* Content starts below the fixed header on pages that have no hero (the hero's own top padding clears it everywhere else) */
/* Tapping the menu button sends focus to the panel logo; no focus ring for that unless the visitor is using a keyboard (header.js) */
.is-pointer-input .nav-panel .nav-panel__logo-img a:focus-visible { outline: none; }