/* ---------- Header ----------
 * Mirrors the live Webflow header (.section-2.new_header): 91px bar, cyan
 * rail at 16 + 90px, links right-aligned 64px before a ruled Login cell.
 * At 991px and below it collapses to a centered logo and an 84px menu cell;
 * at 767px and below the logo becomes the 54px icon and the rail drops.
 */

.site-header-part.is-overlay {
	position: absolute;
	top: var(--wp-admin--admin-bar--height, 0px);
	left: 0;
	right: 0;
	z-index: 50;
}

.site-header {
	--ramen-line: var(--wp--preset--color--accent-2);
	--ramen-menu-icon: url(../images/menu-button.png);
	position: relative;
	z-index: 50;
	container-type: inline-size;
	box-sizing: border-box;
	height: 91px;
	/* Live's bar is 1455px wide, centered in the space right of a 16px gutter. */
	padding-left: var(--ramen-gutter);
	padding-right: max(0px, calc(var(--ramen-frame-inset) - 15.5px));
	border-bottom: 1px solid var(--ramen-line);
	background-color: rgba(4, 35, 56, 0.1);
	-webkit-backdrop-filter: blur(30px);
	backdrop-filter: blur(30px);
	color: var(--wp--preset--color--base);
	margin: 0;
}

.site-header.is-light {
	--ramen-line: var(--wp--preset--color--contrast);
	--ramen-menu-icon: url(../images/menu-button-navy.png);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* The bar overhangs the header's bottom border by a hair, as on live. */
.site-header__bar {
	box-sizing: border-box;
	margin-left: var(--wp--custom--rail);
	border-left: 1px solid var(--ramen-line);
	min-height: 91.6px;
	padding-left: 64px;
	align-items: stretch !important;
	gap: 24px;
}

.site-header__logo,
.site-header__logo-mobile {
	align-self: center;
	margin: 0;
	flex-shrink: 0;
}

.site-header__logo a,
.site-header__logo-mobile a,
.site-header__logo img,
.site-header__logo-mobile img {
	display: block;
}

.site-header__logo-mobile {
	display: none;
}

.site-header__bar > .site-header__nav {
	align-self: stretch;
	flex: 1 1 auto;
	justify-content: flex-end;
}

.site-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open),
.site-header__nav .wp-block-navigation__responsive-close,
.site-header__nav .wp-block-navigation__responsive-dialog,
.site-header__nav .wp-block-navigation__responsive-container-content,
.site-header__nav .wp-block-navigation__container {
	align-self: stretch;
	height: 100%;
}

.site-header__nav .wp-block-navigation__container {
	gap: 2px;
	align-items: center;
}

.site-header__nav .wp-block-navigation-item__content {
	padding: 9px 15px;
	line-height: 1.1;
	color: inherit;
	text-decoration: none;
	transition: color 0.35s;
}

.site-header__nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent-2);
}

.site-header.is-light .site-header__nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent);
}

.site-header__nav .wp-block-navigation-item.is-mobile-only {
	display: none;
}

/*
 * Login sits in its own ruled cell at the far right. Live sizes it by flex
 * shrink (174px basis against a 100%-wide sibling), which lands at 143-153px
 * depending on width; the min() of tangent lines tracks that curve to <0.2px.
 */
.site-header__nav .wp-block-navigation-item.is-login {
	position: relative;
	box-sizing: border-box;
	align-self: stretch;
	flex-shrink: 0;
	margin-left: 64px;
	border-left: 1px solid var(--ramen-line);
	width: min(calc(113.86px + 3.0102cqw), calc(123.02px + 2.1619cqw), calc(131.03px + 1.5358cqw));
	justify-content: center;
}

.site-header__nav .is-login::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	background-image: linear-gradient(270deg, rgba(108, 126, 238, 0), rgba(108, 126, 238, 0.4));
	transition: opacity 0.35s;
}

.site-header__nav .is-login:hover::before {
	opacity: 1;
}

.site-header__nav .is-login > .wp-block-navigation-item__content {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.site-header__nav .is-login > .wp-block-navigation-item__content:hover,
.site-header.is-light .site-header__nav .is-login > .wp-block-navigation-item__content:hover {
	color: inherit;
}

/* Menu toggles use live's 39px icon image instead of core's SVG. */
.site-header .site-header__nav .wp-block-navigation__responsive-container-open,
.site-header .site-header__nav .wp-block-navigation__responsive-container-close {
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	color: inherit;
}

.site-header__nav .wp-block-navigation__responsive-container-open svg,
.site-header__nav .wp-block-navigation__responsive-container-close svg {
	display: none;
}

.site-header__nav .wp-block-navigation__responsive-container-open::after,
.site-header__nav .wp-block-navigation__responsive-container-close::after {
	content: "";
	width: 39px;
	height: 39px;
	background: var(--ramen-menu-icon) center / contain no-repeat;
}

/* Live tightens the dark header's 40px inset to 7px between 992 and 1135px. */
@media (min-width: 992px) and (max-width: 1135px) {
	.site-header.is-dark .site-header__bar {
		padding-left: 31px;
		min-height: 91px;
	}

	.site-header.is-dark .site-header__nav .wp-block-navigation-item.is-login {
		margin-left: 31px;
		width: min(calc(119.03px + 2.6791cqw), calc(123.62px + 2.2371cqw));
	}
}

@media (max-width: 991px) {
	.site-header {
		padding-right: 0;
	}

	.site-header__bar {
		margin-left: 0;
		padding-left: 0;
		gap: 0;
		min-height: 91px;
	}

	/* 100% basis vs the 84px menu cell: flex shrink sizes both as live does. */
	.site-header__logo {
		flex: 0 1 100%;
		display: flex;
		justify-content: center;
	}

	/* Static so the open menu positions against the whole header. */
	.site-header__bar > .site-header__nav {
		position: static;
		flex: 0 1 84px;
		box-sizing: border-box;
		border-left: 1px solid var(--ramen-line);
	}

	.site-header .site-header__nav .wp-block-navigation__responsive-container-open {
		display: flex;
		width: 100%;
		height: 100%;
	}

	.site-header .site-header__nav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	/*
	 * Open menu: a plain drop panel 85px below the top of the header, like
	 * live's Webflow dropdown. The dialog repeats the bar's flex geometry so
	 * the close toggle sits exactly over the open toggle.
	 */
	.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
		position: absolute;
		inset: 0 0 auto 0;
		height: auto;
		padding: 0;
		overflow: visible;
		background: transparent;
		color: inherit;
		animation: none;
		pointer-events: none;
	}

	.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-close,
	.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-dialog {
		position: static;
		max-width: none;
		margin: 0;
		height: auto;
	}

	.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-dialog {
		display: flex;
		height: 91px;
		padding-left: calc(var(--ramen-gutter) + 1px);
	}

	.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-dialog::before {
		content: "";
		flex: 0 1 100%;
	}

	.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-close {
		position: static;
		display: flex;
		flex: 0 1 84px;
		box-sizing: border-box;
		border-left: 1px solid transparent;
		pointer-events: auto;
	}

	.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content {
		position: absolute;
		top: 85px;
		left: 0;
		right: 0;
		height: auto;
		padding: 0;
		display: block;
		background-color: #ddd;
		pointer-events: auto;
	}

	.site-header .site-header__nav .is-menu-open .wp-block-navigation__container {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		height: auto;
	}

	.site-header .site-header__nav .is-menu-open .wp-block-navigation-item {
		display: block;
		width: auto;
		margin: 0;
		border: 0;
	}

	.site-header .site-header__nav .is-menu-open .is-login::before {
		display: none;
	}

	.site-header .site-header__nav .is-menu-open .wp-block-navigation-item__content {
		display: block;
		height: auto;
		padding: 10px 20px;
		font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
		font-size: 14px;
		line-height: 20px;
		font-weight: 400;
		letter-spacing: normal;
		text-align: left;
		color: #222;
	}

	.site-header .site-header__nav .is-menu-open .current-menu-item > .wp-block-navigation-item__content {
		color: #0082f3;
	}

	/* Live's open menu has no hover colour; keep the light header's link hover out of it. */
	.site-header .site-header__nav .is-menu-open .wp-block-navigation-item__content:hover,
	.site-header .site-header__nav .is-menu-open .is-login > .wp-block-navigation-item__content:hover {
		color: #222;
	}

	.site-header .site-header__nav .is-menu-open .current-menu-item > .wp-block-navigation-item__content:hover {
		color: #0082f3;
	}
}

@media (max-width: 767px) {
	.site-header {
		padding-left: 0;
	}

	.site-header__bar {
		border-left: 0;
		min-height: 85px;
	}

	.site-header__logo {
		display: none;
	}

	.site-header__logo-mobile {
		display: block;
		flex: 0 1 100%;
		align-self: flex-start;
	}

	.site-header__logo-mobile a {
		width: fit-content;
		margin: 24px 0 0 24px;
	}

	.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-dialog {
		height: 85px;
		padding-left: 0;
	}
}

@media (max-width: 479px) {
	.site-header {
		height: 85px;
	}

	.site-header__bar > .site-header__nav,
	.site-header .site-header__nav .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-close {
		flex-shrink: 0;
	}
}

/* Core locks page scroll for the overlay; live's dropdown does not. */
html.has-modal-open:has(.site-header__nav .is-menu-open) {
	overflow: visible;
}

/* ---------- Footer ---------- */

/* Live (Webflow) footer: 14px text on a 1.5 line box, 90px rail through 991px.
 * Grid: four link cells share the row, the newsletter keeps its 421px minimum.
 * Tablet (768-991) wraps to three cells per row with the newsletter below at
 * two thirds. Mobile (<=767) turns the rail into an 85px bar. */

.site-footer {
	border-top: 1px solid var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.site-footer .ramen-rail {
	padding: 64px 0;
}

.site-footer__symbol {
	margin: 0;
}

.site-footer__main {
	padding: 64px 64px 35px;
}

.site-footer__grid {
	display: flex;
	border: 1px solid var(--wp--preset--color--contrast-2);
	border-radius: 20px;
	margin-bottom: 32px;
	overflow: hidden;
}

.site-footer__grid > * {
	margin: 0 !important;
}

.site-footer__cell {
	flex: 1 1 0;
	min-width: 0;
	min-height: 200px;
	padding: 32px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	border-right: 1px solid var(--wp--preset--color--contrast-2);
}

.site-footer__cell > * {
	margin: 0 !important;
}

.site-footer__newsletter {
	flex: 0 1 auto;
	min-width: 421px;
	border-right: 0;
}

.site-footer__email {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
}

.site-footer__email a {
	text-decoration: none;
	word-break: break-word;
}

/* Live shows the address on one line from 480px up; the break only applies on phones. */
.site-footer__email br {
	display: none;
}

.site-footer__label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	line-height: 1.5;
}

.site-footer .wp-block-social-links {
	gap: 0;
	margin: 0;
}

.site-footer .wp-block-social-links .wp-social-link {
	padding: 0;
}

.site-footer .wp-block-social-links .wp-block-social-link-anchor {
	padding: 0;
}

.site-footer .wp-block-social-links svg {
	width: 32px;
	height: 32px;
}

.site-footer__copyright {
	padding: 16px 32px;
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	color: var(--wp--preset--color--contrast-2);
}

/*
 * Live wraps at 991px, but its one-row footer squeezes the four small cells
 * to ~84px at 1024px. Wrap below the 1440 design width so the email and
 * labels have room.
 */
@media (max-width: 1439px) {
	.site-footer__grid {
		flex-wrap: wrap;
	}

	.site-footer__cell {
		flex: 0 0 33.33%;
		border-bottom: 1px solid var(--wp--preset--color--contrast-2);
	}

	/* Live: the third cell (X) has no right rule; Facebook has no bottom rule. */
	.site-footer__cell:nth-child(3) {
		border-right: 0;
	}

	.site-footer__cell:nth-child(4) {
		border-bottom: 0;
	}

	.site-footer__newsletter {
		flex: 0 0 66.66%;
		min-width: 0;
		border-bottom: 0;
	}
}

@media (max-width: 767px) {
	.site-footer .ramen-rail {
		height: 85px;
		padding: 27px 0;
	}

	.site-footer__symbol {
		margin-left: 16px;
	}

	.site-footer__main {
		padding: 32px 16px 64px;
	}

	.site-footer__copyright {
		padding: 4px 0;
	}
}

@media (max-width: 479px) {
	.site-footer__email br {
		display: inline;
	}

	.site-footer__cell,
	.site-footer__newsletter {
		padding: 16px;
	}

	.site-footer__label {
		font-size: 12px;
	}

	.site-footer__copyright {
		font-size: 13px;
	}

	.site-footer__newsletter input[type="email"],
	.site-footer__newsletter input[type="text"] {
		font-size: 12px;
		line-height: 1.5;
	}
}