/*
 * Header and footer: the parts Elementor's atomic styles cannot express.
 *
 * The templates (Theme Builder header 31, footer 32) are built from atomic elements. Their
 * layout, sizes and type live in Elementor global classes (shs-header, shs-footer, shs-cta,
 * shs-social and their parts) using the kit variables (brand-*, font-*, type-*,
 * shs-content-width). This file styles what sits inside those elements: the classic Nav Menu
 * widget (there is no atomic menu yet), its dropdown and mobile panel, the hamburger, links
 * inside text, and the colour states of the inline SVG artwork.
 *
 * Lengths are mockup pixels times --u (defined in base.css); see AGENTS.md, design fidelity
 * contract. Breakpoints follow Elementor: tablet 1024px and below, mobile below 768px.
 */

.elementor-location-header,
.elementor-location-footer {
	--shs-edge: max(32px, calc((100% - 1360 * var(--u)) / 2));
	/* Photoshop sets this type about 3% of an em tighter than browsers do by default. */
	--shs-tracking: -0.032em;
}

/* ---------------------------------------------------------------- header navigation */

/*
 * The Nav Menu is a classic widget, and Elementor only outputs global-class CSS for atomic
 * elements, so its position in the header bar lives here: 41px after the logo, first row
 * of labels on the mockup's baseline.
 */
.elementor-location-header .shs-header > .shs-header__nav {
	flex: 0 0 auto;
	margin: calc(54.5 * var(--u)) 0 0 calc(41 * var(--u));
}

/* Two rows of five columns, filled column by column. */
.elementor-location-header .shs-header .elementor-nav-menu--main > .elementor-nav-menu {
	display: grid;
	grid-auto-flow: column;
	/* Minimums put each column exactly where the mockup has it; longer labels still fit. */
	grid-template-columns:
		minmax(calc(112 * var(--u)), max-content)
		minmax(calc(158 * var(--u)), max-content)
		minmax(calc(108 * var(--u)), max-content)
		minmax(calc(176 * var(--u)), max-content)
		max-content;
	grid-template-rows: repeat(2, calc(45.5 * var(--u)));
	column-gap: calc(40 * var(--u));
	margin: 0;
	padding: 0;
}

/* Elementor's clearfix pseudo-elements would become an extra grid column. */
.elementor-location-header .shs-header .elementor-nav-menu--main > .elementor-nav-menu::before,
.elementor-location-header .shs-header .elementor-nav-menu--main > .elementor-nav-menu::after,
.elementor-location-footer .shs-footer .elementor-nav-menu--main > .elementor-nav-menu::before,
.elementor-location-footer .shs-footer .elementor-nav-menu--main > .elementor-nav-menu::after {
	display: none;
}

.elementor-location-header .shs-header .elementor-nav-menu--main > .elementor-nav-menu > li {
	position: relative;
	display: block;
}

.elementor-location-header .shs-header .elementor-nav-menu a.elementor-item {
	display: block;
	padding: 0;
	color: var(--brand-white);
	font-family: var(--font-display);
	font-size: var(--type-ui);
	font-weight: 400;
	line-height: calc(45.5 * var(--u));
	letter-spacing: var(--shs-tracking);
	text-transform: uppercase;
	white-space: nowrap;
}

.elementor-location-header .shs-header .elementor-nav-menu a.elementor-item:hover,
.elementor-location-header .shs-header .elementor-nav-menu a.elementor-item:focus-visible,
.elementor-location-header .shs-header .elementor-nav-menu a.elementor-item.highlighted,
.elementor-location-header .shs-header .elementor-nav-menu a.elementor-item.elementor-item-active,
.elementor-location-header .shs-header .elementor-nav-menu .current-menu-ancestor > a.elementor-item,
.elementor-location-header .shs-header .elementor-nav-menu--main .menu-item-has-children:hover > a.elementor-item,
.elementor-location-header .shs-header .elementor-nav-menu--main .menu-item-has-children:focus-within > a.elementor-item {
	color: var(--brand-white);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: calc(3 * var(--u));
}

.elementor-location-header .shs-header .elementor-nav-menu--main .sub-arrow {
	display: none;
}

/*
 * Dropdown: black panel hanging over the red rule, white rule on the left (starting 6px
 * below the panel's top) and along the bottom, items in sentence case at 70% white.
 */
.elementor-location-header .shs-header .elementor-nav-menu--main .sub-menu {
	top: calc(40 * var(--u)) !important;
	left: calc(-13 * var(--u)) !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: calc(7.9 * var(--u)) calc(21 * var(--u)) calc(5.1 * var(--u)) calc(23 * var(--u));
	background: var(--brand-black);
	border: 0;
	border-bottom: calc(3 * var(--u)) solid var(--brand-white);
	box-shadow: none;
}

.elementor-location-header .shs-header .elementor-nav-menu--main .sub-menu::before {
	content: "";
	position: absolute;
	top: calc(6 * var(--u));
	bottom: calc(-3 * var(--u));
	left: 0;
	width: calc(3 * var(--u));
	background: var(--brand-white);
}

.elementor-location-header .shs-header .elementor-nav-menu--main .sub-menu li {
	display: block;
}

.elementor-location-header .shs-header .elementor-nav-menu--main .sub-menu a.elementor-sub-item {
	display: block;
	padding: 0;
	background: none;
	border: 0;
	color: rgb(255 255 255 / 70%);
	font-family: var(--font-display);
	font-size: var(--type-ui);
	font-weight: 400;
	line-height: calc(36.5 * var(--u));
	letter-spacing: -0.01em;
	text-transform: none;
	white-space: nowrap;
}

.elementor-location-header .shs-header .elementor-nav-menu--main .sub-menu a.elementor-sub-item:hover,
.elementor-location-header .shs-header .elementor-nav-menu--main .sub-menu a.elementor-sub-item:focus-visible,
.elementor-location-header .shs-header .elementor-nav-menu--main .sub-menu a.elementor-sub-item.elementor-item-active {
	background: none;
	color: var(--brand-white);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: calc(3 * var(--u));
}

/* Hamburger, drawn in CSS: three thin white bars that fold into a cross. */
.elementor-location-header .shs-header .elementor-menu-toggle {
	position: relative;
	width: 32px;
	height: 24px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	cursor: pointer;
}

.elementor-location-header .shs-header .elementor-menu-toggle svg {
	display: none;
}

.elementor-location-header .shs-header .elementor-menu-toggle::before,
.elementor-location-header .shs-header .elementor-menu-toggle::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--brand-white);
	transition: transform 0.2s ease, top 0.2s ease, box-shadow 0.2s ease;
}

.elementor-location-header .shs-header .elementor-menu-toggle::before {
	top: 3px;
	box-shadow: 0 8px 0 var(--brand-white);
}

.elementor-location-header .shs-header .elementor-menu-toggle::after {
	top: 19px;
}

.elementor-location-header .shs-header .elementor-menu-toggle.elementor-active::before {
	top: 11px;
	box-shadow: none;
	transform: rotate(45deg);
}

.elementor-location-header .shs-header .elementor-menu-toggle.elementor-active::after {
	top: 11px;
	transform: rotate(-45deg);
}

.elementor-location-header .shs-header .elementor-menu-toggle:focus-visible {
	outline: 2px solid var(--brand-white);
	outline-offset: 6px;
}

/* ---------------------------------------------------------------- SVG artwork states */

/* Inline SVGs fill their atomic element (Elementor sizes it through the global classes). */
.shs-header__logo svg,
.shs-footer__logo svg,
.shs-cta svg,
.shs-social__link svg {
	display: block;
}

/*
 * CTAs. Resting: white shape, black lettering. Hover: dark shape, white lettering and a
 * white outline. The outline is a filled ring inside the shape (2px at desktop size), so
 * the silhouette never changes and there is no clipped stroke to fringe the edge.
 */
.shs-cta__shape {
	fill: var(--brand-white);
	transition: fill 0.15s ease;
}

.shs-cta__ring {
	fill: var(--brand-white);
}

.shs-cta__glyph {
	fill: var(--brand-ink);
	transition: fill 0.15s ease;
}

.shs-cta:hover .shs-cta__shape,
.shs-cta:focus-visible .shs-cta__shape {
	fill: var(--brand-ink);
}

.shs-cta:hover .shs-cta__glyph,
.shs-cta:focus-visible .shs-cta__glyph {
	fill: var(--brand-white);
}

/* Social icons. Resting: red outline and glyph. Hover: solid red disc, white glyph. */
.shs-social__disc {
	fill: transparent;
	transition: fill 0.15s ease;
}

.shs-social__ring {
	fill: var(--brand-red);
}

.shs-social__glyph {
	fill: var(--brand-red);
	transition: fill 0.15s ease;
}

.shs-social__link:hover .shs-social__disc,
.shs-social__link:focus-visible .shs-social__disc {
	fill: var(--brand-red);
}

.shs-social__link:hover .shs-social__glyph,
.shs-social__link:focus-visible .shs-social__glyph {
	fill: var(--brand-white);
}

.shs-cta:focus-visible,
.shs-header__logo:focus-visible,
.shs-footer__logo:focus-visible,
.shs-social__link:focus-visible {
	outline: 2px solid var(--brand-white);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------- footer text and menu */

/* The footer's Light type is set a little looser than the header's Regular. */
.elementor-location-footer {
	--shs-tracking: -0.012em;
}

.shs-footer__text a {
	color: inherit;
	text-decoration: none;
}

.shs-footer__text a:hover,
.shs-footer__text a:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: calc(3 * var(--u));
}

/* Keyboard focus: the outline every other control on the black header and footer shows. */
.shs-footer__text a:focus-visible {
	outline: 2px solid var(--brand-white);
	outline-offset: 3px;
}

.shs-footer__legal strong {
	font-weight: 600;
}

/* The mockup sets a double space between the two legal links. */
.shs-footer__legal a + a {
	margin-left: calc(5 * var(--u));
}

/* Footer menu (classic widget, so positioned here rather than by a global class). */
.elementor-location-footer .shs-footer > .shs-footer__menu {
	grid-area: menu;
	margin: calc(16.3 * var(--u)) 0 0;
}

/* Three columns of three, filled column by column. */
.elementor-location-footer .shs-footer .elementor-nav-menu--main > .elementor-nav-menu {
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: calc(268 * var(--u)) calc(230 * var(--u)) auto;
	grid-template-rows: repeat(3, calc(31 * var(--u)));
	margin: 0;
	padding: 0;
}

.elementor-location-footer .shs-footer .elementor-nav-menu--main > .elementor-nav-menu > li {
	display: block;
}

.elementor-location-footer .shs-footer .elementor-nav-menu a.elementor-item {
	display: inline-block;
	padding: 0;
	color: var(--brand-white);
	font-family: var(--font-display);
	font-size: var(--type-ui);
	font-weight: 300;
	line-height: calc(31 * var(--u));
	letter-spacing: var(--shs-tracking);
	white-space: nowrap;
}

.elementor-location-footer .shs-footer .elementor-nav-menu a.elementor-item:hover,
.elementor-location-footer .shs-footer .elementor-nav-menu a.elementor-item:focus-visible,
.elementor-location-footer .shs-footer .elementor-nav-menu a.elementor-item.elementor-item-active {
	color: var(--brand-white);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: calc(3 * var(--u));
}

/* ---------------------------------------------------------------- tablet and mobile */

@media (max-width: 1024px) {
	/* After the CTAs; its panel opens under the red rule, full width, so the widget must not be its anchor. */
	.elementor-location-header .shs-header > .shs-header__nav {
		position: static;
		order: 3;
		margin: 0 0 0 28px;
	}

	.elementor-location-header .shs-header .elementor-nav-menu--dropdown.elementor-nav-menu__container {
		position: absolute;
		top: calc(100% + 3 * var(--u)) !important;
		left: 0 !important;
		right: 0;
		width: 100% !important;
		margin: 0;
		background: var(--brand-black);
		border-bottom: calc(3 * var(--u)) solid var(--brand-red);
	}

	.elementor-location-header .shs-header .elementor-nav-menu--dropdown > .elementor-nav-menu {
		padding: 12px var(--shs-edge) 28px;
	}

	.elementor-location-header .shs-header .elementor-nav-menu--dropdown a.elementor-item,
	.elementor-location-header .shs-header .elementor-nav-menu--dropdown a.elementor-sub-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0;
		background: none;
		border: 0;
		color: var(--brand-white);
		font-family: var(--font-display);
		font-size: 20px;
		font-weight: 400;
		line-height: 48px;
		text-transform: uppercase;
	}

	.elementor-location-header .shs-header .elementor-nav-menu--dropdown a.elementor-item:hover,
	.elementor-location-header .shs-header .elementor-nav-menu--dropdown a.elementor-item:focus-visible,
	.elementor-location-header .shs-header .elementor-nav-menu--dropdown a.elementor-item.highlighted {
		background: none;
		color: var(--brand-white);
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 4px;
	}

	.elementor-location-header .shs-header .elementor-nav-menu--dropdown .sub-arrow {
		display: flex;
		padding: 0 0 0 16px;
	}

	.elementor-location-header .shs-header .elementor-nav-menu--dropdown .sub-arrow svg {
		width: 12px;
		height: 12px;
		fill: var(--brand-white);
		transition: transform 0.2s ease;
	}

	.elementor-location-header .shs-header .elementor-nav-menu--dropdown .highlighted .sub-arrow svg {
		transform: rotate(180deg);
	}

	/* Sub-items echo the desktop dropdown: white rule on the left, sentence case at 70%. */
	.elementor-location-header .shs-header .elementor-nav-menu--dropdown .sub-menu {
		margin: 0 0 12px;
		padding: 0 0 0 20px;
		background: none;
		border: 0;
		border-left: 2px solid var(--brand-white);
	}

	.elementor-location-header .shs-header .elementor-nav-menu--dropdown .sub-menu a.elementor-sub-item {
		color: rgb(255 255 255 / 70%);
		font-size: 18px;
		font-weight: 400;
		line-height: 40px;
		text-transform: none;
	}

	.elementor-location-header .shs-header .elementor-nav-menu--dropdown .sub-menu a.elementor-sub-item:hover,
	.elementor-location-header .shs-header .elementor-nav-menu--dropdown .sub-menu a.elementor-sub-item:focus-visible {
		background: none;
		color: var(--brand-white);
		text-decoration: underline;
		text-underline-offset: 4px;
	}
}

@media (max-width: 767px) {
	.elementor-location-header,
	.elementor-location-footer {
		--shs-edge: 16px;
	}

	.elementor-location-header .shs-header > .shs-header__nav {
		margin-left: 16px;
	}

	.elementor-location-header .shs-header .elementor-menu-toggle {
		width: 28px;
	}

	.elementor-location-footer .shs-footer .elementor-nav-menu--main > .elementor-nav-menu {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: none;
		column-gap: 16px;
	}
}