/* Header template part: logo | mega menu | actions, with the menu panels.
   Two states: in flow (white bar, charcoal text, 80px tall = 48px bar + 32px bottom padding, the
   first card starts right under it; Figma 310:29039) and overlay (on a photo hero, white text).
   Below 1100px it is a 64px sticky bar (custom.header.heightMobile).
   The hero block's "Header position" setting chooses per page: over the photo adds the
   `has-overlay-header` body class. Heights are theme.json custom.header tokens, which the hero
   reads to give up the header's space. Phones always use the in-flow bar.
   On the front end it stays with the page (assets/js/header.js; "On scroll" below): over a photo
   hero it is fixed, turning into the white bar once the content reaches it; after the hero (or,
   without one, once scrolled past) it tucks away on the way down and returns on the way up. */

.fyo-header {
	position: relative;
	z-index: 30;
	padding: 0 var(--wp--custom--layout--card-padding) var(--wp--preset--spacing--60);
	color: var(--wp--custom--color--text--default);
}

/* Not positioned: the menu panels are absolute to .fyo-header so they span the whole card. */
.fyo-header__bar {
	position: static;
	min-height: 48px;
}

.fyo-header__actions {
	gap: var(--wp--preset--spacing--40);
}

/* No extra stage gap between the header and the first card: the header's bottom padding is the gap. */
.wp-site-blocks > header.wp-block-template-part + main {
	margin-block-start: 0;
}

/* ---- Search: icon in an outlined circle; the field expands beside it (core behaviour). ---- */

.fyo-header__search .wp-block-search__inside-wrapper {
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.fyo-header__search .wp-block-search__button {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: var(--wp--custom--border--width--thin) solid var(--wp--custom--color--border--default);
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.fyo-header__search .wp-block-search__button svg {
	display: none;
}

.fyo-header__search .wp-block-search__button::before {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("../../icons/search.svg") no-repeat center / contain;
	mask: url("../../icons/search.svg") no-repeat center / contain;
}

/* Caret beside each item (beats .fyo-icon's 1em sizing). */
.fyo-header .fyo-mega-menu__caret {
	width: 10px;
	height: 10px;
}

.fyo-header__search .wp-block-search__input {
	height: 40px;
	padding: 0 var(--wp--preset--spacing--40);
	border: var(--wp--custom--border--width--hairline) solid var(--wp--custom--color--border--subtle);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--white);
	color: var(--wp--custom--color--text--default);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
}

/* ---- Sign up ---- */

.fyo-header__signup .wp-block-button__link {
	padding-block: var(--wp--preset--spacing--20);
	white-space: nowrap; /* a 40px pill (Figma 310:29039): never two lines, so the bar keeps its height */
}

.is-sign-up-flow .fyo-header__cta,
.is-sign-up-flow .fyo-overlay__cta {
	display: none;
}

.fyo-header .fyo-header__mobile-nav {
	display: none;
}

/* ---- Desktop ---- */

@media (min-width: 1100px) {
	.fyo-header .wp-block-group.fyo-header__bar {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: var(--wp--preset--spacing--60);
	}

	.fyo-header__logo {
		justify-self: start;
	}

	.fyo-header__actions {
		justify-self: end;
	}

	/* In flow: the header takes over the stage's top gutter (padding in, margin out, so the logo
	   and the first card stay put). The white card that appears while a panel is open then has the
	   same 32px above the logo as it does on a photo hero. */
	.wp-site-blocks .fyo-header {
		margin-top: calc(-1 * var(--wp--custom--layout--gutter));
		padding-top: var(--wp--custom--layout--gutter);
	}

	/* Overlay state: the header sits on the photo hero, inside the card's top edge.
	   Front end: the lead hero adds has-overlay-header to <body> (inc/template-functions.php),
	   whether it sits in the template or in post content. Editor canvas: there is no body class,
	   so the same condition is read from the DOM (a hero set to "Over the photo" first in <main>,
	   or first in post content when that is first). */
		/* Front end: fixed over the hero, in line with the stage (centred past its max width). It
	   rises by the gutter as the page starts to move (--fyo-header-lift, from header.js or a
	   pinned hero's matte), to sit at the top of the screen. */
	body.has-overlay-header .wp-site-blocks > header.wp-block-template-part {
		position: fixed;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wp--custom--layout--gutter) - min(var(--fyo-header-lift, 0px), var(--wp--custom--layout--gutter)));
		left: max(var(--wp--custom--layout--gutter), calc((100% - var(--wp--custom--layout--max-stage)) / 2 + var(--wp--custom--layout--gutter)));
		right: max(var(--wp--custom--layout--gutter), calc((100% - var(--wp--custom--layout--max-stage)) / 2 + var(--wp--custom--layout--gutter)));
		z-index: 30;
	}

	body.editor-styles-wrapper:has(.wp-site-blocks > main > .fyo-hero.has-overlay-header:first-child, .wp-site-blocks > main > .wp-block-post-content:first-child > .fyo-hero.has-overlay-header:first-child) .wp-site-blocks > header.wp-block-template-part {
		position: absolute;
		top: var(--wp--custom--layout--gutter);
		left: var(--wp--custom--layout--gutter);
		right: var(--wp--custom--layout--gutter);
		z-index: 30;
	}

	/* In flow: sticky (front end only), white from the start. */
	body:not(.has-overlay-header):not(.editor-styles-wrapper) .wp-site-blocks > header.wp-block-template-part {
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0px);
		z-index: 30;
	}

	:is(body.has-overlay-header, body.editor-styles-wrapper:has(.wp-site-blocks > main > .fyo-hero.has-overlay-header:first-child, .wp-site-blocks > main > .wp-block-post-content:first-child > .fyo-hero.has-overlay-header:first-child)) .wp-site-blocks .fyo-header {
		margin-top: 0;
		padding-top: var(--wp--preset--spacing--60);
	}

	/* Rounded like the hero card it sits in; square once it is the solid bar at the top of the screen. */
	:is(body.has-overlay-header, body.editor-styles-wrapper:has(.wp-site-blocks > main > .fyo-hero.has-overlay-header:first-child, .wp-site-blocks > main > .wp-block-post-content:first-child > .fyo-hero.has-overlay-header:first-child)) .wp-site-blocks > header:not(.is-solid) .fyo-header {
		border-radius: var(--wp--custom--radius--x-large) var(--wp--custom--radius--x-large) 0 0;
	}

:is(body.has-overlay-header, body.editor-styles-wrapper:has(.wp-site-blocks > main > .fyo-hero.has-overlay-header:first-child, .wp-site-blocks > main > .wp-block-post-content:first-child > .fyo-hero.has-overlay-header:first-child)) .wp-site-blocks > header:not(.is-solid) .fyo-header:not(.is-menu-open) {
		color: var(--wp--custom--color--text--inverse);
	}

:is(body.has-overlay-header, body.editor-styles-wrapper:has(.wp-site-blocks > main > .fyo-hero.has-overlay-header:first-child, .wp-site-blocks > main > .wp-block-post-content:first-child > .fyo-hero.has-overlay-header:first-child)) .wp-site-blocks > header:not(.is-solid) .fyo-header:not(.is-menu-open) .fyo-header__search .wp-block-search__button {
		border-color: var(--wp--custom--color--border--inverse);
	}

:is(body.has-overlay-header, body.editor-styles-wrapper:has(.wp-site-blocks > main > .fyo-hero.has-overlay-header:first-child, .wp-site-blocks > main > .wp-block-post-content:first-child > .fyo-hero.has-overlay-header:first-child)) .wp-site-blocks > header:not(.is-solid) .fyo-header:not(.is-menu-open) .fyo-logo__color {
		display: none;
	}

:is(body.has-overlay-header, body.editor-styles-wrapper:has(.wp-site-blocks > main > .fyo-hero.has-overlay-header:first-child, .wp-site-blocks > main > .wp-block-post-content:first-child > .fyo-hero.has-overlay-header:first-child)) .wp-site-blocks > header:not(.is-solid) .fyo-header:not(.is-menu-open) .fyo-logo__inverse {
		display: block;
	}

	/* While a panel is open the header turns solid so the panel reads as attached to it,
	   one drop shadow wraps header and panel together, and the items that are not open
	   dim to 30% (Figma 89:4214). */
	.fyo-header.is-menu-open {
		background: var(--wp--custom--color--surface--base);
		color: var(--wp--custom--color--text--default);
		filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.15)) drop-shadow(0 4px 20px rgba(0, 0, 0, 0.15));
	}

	/* Page scrim behind the open menu; clicking it closes the menu (outside-click handler). */
	body.has-mega-menu-open::after {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 25;
		background: var(--wp--custom--color--scrim);
		animation: fyo-scrim-in var(--wp--custom--duration--base) var(--wp--custom--easing--standard);
	}

	@keyframes fyo-scrim-in {
		from { opacity: 0; }
		to { opacity: 1; }
	}

	.fyo-header.is-menu-open .fyo-mega-menu__item:not(.is-open) > .fyo-mega-menu__trigger,
	.fyo-header.is-menu-open .fyo-mega-menu__item:not(.is-open) > .fyo-mega-menu__link {
		opacity: 0.3;
	}

	.fyo-header.is-menu-open .fyo-mega-menu__item:not(.is-open) > :is(.fyo-mega-menu__trigger, .fyo-mega-menu__link):hover,
	.fyo-header.is-menu-open .fyo-mega-menu__item:not(.is-open) > :is(.fyo-mega-menu__trigger, .fyo-mega-menu__link):focus-visible {
		opacity: 1;
	}
}

/* ---- On scroll (assets/js/header.js) ----
   .is-solid: the white bar, full width across the gutters. While a menu is open it gives way, so the
   page scrim shows either side of the header; the open panel's top border is the rule under it.
   .is-hidden: tucked away above the screen. */

.wp-site-blocks > header.wp-block-template-part {
	transition: transform 350ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.wp-site-blocks > header.wp-block-template-part.is-hidden {
	transform: translateY(calc(-100% - 2px));
}

@media (min-width: 1100px) {
	.wp-site-blocks > header.wp-block-template-part::before {
		content: "";
		position: absolute;
		inset: 0 calc(-1 * var(--wp--custom--layout--gutter));
		background: var(--wp--custom--color--surface--base);
		opacity: 0;
		pointer-events: none;
		transition: opacity 300ms var(--wp--custom--easing--standard);
	}

	.wp-site-blocks > header.wp-block-template-part.is-solid:not(:has(.fyo-header.is-menu-open))::before,
	body:not(.has-overlay-header):not(.editor-styles-wrapper) .wp-site-blocks > header.wp-block-template-part:not(:has(.fyo-header.is-menu-open))::before {
		opacity: 1;
	}

	.fyo-header {
		transition: color 300ms var(--wp--custom--easing--standard);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-site-blocks > header.wp-block-template-part,
	.wp-site-blocks > header.wp-block-template-part::before,
	.fyo-header {
		transition: none;
	}
}

/* ---- Mobile bar (below the desktop breakpoint) ---- */

@media (max-width: 1099px) {
	.wp-site-blocks > header.wp-block-template-part {
		position: sticky;
		top: 0;
		z-index: 30;
	}

	.fyo-header {
		padding: 0 20px;
		background: var(--wp--custom--color--surface--base);
	}

	.fyo-header .wp-block-group.fyo-header__bar {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: var(--wp--preset--spacing--40);
		min-height: var(--wp--custom--header--height-mobile); /* 16px padding + 32px logo (Figma 310:30018) */
	}

	/* The actions group dissolves into the bar's grid (beats core's .is-layout-flex rule). */
	.fyo-header .wp-block-group.fyo-header__actions {
		display: contents;
	}

	.fyo-header__search {
		order: -1;
		justify-self: start;
	}

	.fyo-header__logo {
		order: 0;
		justify-self: center;
	}

	.fyo-header .fyo-header__mobile-nav {
		order: 1;
		display: block;
		justify-self: end;
	}

	.fyo-header .fyo-header__cta {
		display: none;
	}

	.fyo-header .fyo-logo__color,
	.fyo-header .fyo-logo__inverse {
		display: none;
	}

	.fyo-header .fyo-logo__compact {
		display: block;
		height: 32px;
	}

	.fyo-header__search .wp-block-search__button {
		width: 32px;
		height: 32px;
		border: 0;
	}

	.fyo-header__search .wp-block-search__inside-wrapper,
	.fyo-header__search .wp-block-search__input {
		height: 32px;
		min-height: 0;
	}

	.fyo-header__search .wp-block-search__button::before {
		width: 24px;
		height: 24px;
	}

	/* Logged in: keep the sticky bar below the admin bar. */
	body.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: var(--wp-admin--admin-bar--height, 46px);
	}

	.fyo-header__mobile-nav .wp-block-navigation__responsive-container-open {
		display: grid;
		place-items: center;
		width: 32px;
		height: 32px;
		padding: 0;
		color: inherit;
	}

	.fyo-header__mobile-nav .wp-block-navigation__responsive-container-open svg {
		display: none;
	}

	.fyo-header__mobile-nav .wp-block-navigation__responsive-container-open::before {
		content: "";
		width: 24px;
		height: 24px;
		background: currentColor;
		-webkit-mask: url("../../icons/bars.svg") no-repeat center / contain;
		mask: url("../../icons/bars.svg") no-repeat center / contain;
	}
}

/* ================= Menu panels (shared chrome) ================= */

.fyo-panel {
	margin: 0;
}

.fyo-panel :is(h2, h3) a,
.fyo-panel .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
}

.fyo-panel h3 {
	color: var(--wp--custom--color--text--default);
	line-height: var(--wp--custom--line-height--heading);
}

/* Panel title: red, with an angle after it, linking to the landing page. */
.fyo-panel__title {
	line-height: var(--wp--custom--line-height--snug);
}

.fyo-panel__title a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.fyo-panel__title a::after {
	content: "";
	width: 0.75em;
	height: 0.75em;
	background: currentColor;
	-webkit-mask: url("../../icons/angle-right.svg") no-repeat center / contain;
	mask: url("../../icons/angle-right.svg") no-repeat center / contain;
}

/* Rows (Why Ohio): thumbnail + title + line; the whole row is the link. */
.fyo-panel__row {
	position: relative;
	border: var(--wp--custom--border--width--thin) solid transparent;
	border-radius: var(--wp--custom--radius--x-large);
	transition: border-color var(--wp--custom--duration--base) var(--wp--custom--easing--standard);
}

.fyo-panel__row:hover,
.fyo-panel__row:focus-within {
	border-color: var(--wp--custom--color--border--subtle);
}

.fyo-panel__row h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.fyo-panel__thumb {
	flex: none;
	margin: 0;
}

.fyo-panel__thumb img {
	display: block;
}

/* Feature cards: photo with a scrim rising from the bottom. */
.fyo-panel__feature {
	overflow: hidden;
	padding: var(--wp--preset--spacing--50);
}

.fyo-panel__feature .wp-block-cover__background {
	background: linear-gradient(0deg, var(--wp--custom--color--scrim) 0%, rgba(16, 24, 32, 0) 50%) !important;
	opacity: 1 !important;
	mix-blend-mode: multiply;
}

.fyo-panel__feature--employers .wp-block-cover__background {
	background: var(--wp--preset--color--red) !important;
	opacity: 0.7 !important;
	mix-blend-mode: normal;
}

.fyo-panel__feature .wp-block-cover__inner-container {
	width: 100%;
}

.fyo-panel__feature .wp-block-heading {
	line-height: var(--wp--custom--line-height--heading);
}

/* Small pill and icon-only round button used in feature cards. */
.fyo-button--small .wp-block-button__link {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
}

.fyo-button--icon .wp-block-button__link {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
}

.fyo-button--icon .wp-block-button__link::after {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("../../icons/arrow-right-solid.svg") no-repeat center / contain;
	mask: url("../../icons/arrow-right-solid.svg") no-repeat center / contain;
}

/* Region list (Live in Ohio): two columns, arrow on hover. */
.fyo-panel__list .wp-block-post-template {
	gap: 0 var(--wp--preset--spacing--60);
}

.fyo-panel__list-item {
	margin: 0;
	padding-block: var(--wp--preset--spacing--30);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--snug);
	letter-spacing: var(--wp--custom--letter-spacing--tight);
}

.fyo-panel__list-item a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	color: var(--wp--custom--color--text--default);
}

.fyo-panel__list-item a::after {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background: var(--wp--preset--color--red);
	opacity: 0;
	-webkit-mask: url("../../icons/arrow-right.svg") no-repeat center / contain;
	mask: url("../../icons/arrow-right.svg") no-repeat center / contain;
	transition: opacity var(--wp--custom--duration--base) var(--wp--custom--easing--standard);
}

.fyo-panel__list-item a:hover::after,
.fyo-panel__list-item a:focus-visible::after {
	opacity: 1;
}

/* "All regions" / "All industries": teal with an arrow. */
.fyo-panel__more a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--teal);
	font-weight: var(--wp--custom--font-weight--semibold);
	text-decoration: none;
}

.fyo-panel__more a::after {
	content: "";
	width: 1em;
	height: 1em;
	background: currentColor;
	-webkit-mask: url("../../icons/arrow-right.svg") no-repeat center / contain;
	mask: url("../../icons/arrow-right.svg") no-repeat center / contain;
}

.fyo-panel__more a:hover {
	text-decoration: underline;
}

/* Industry tiles (Work in Ohio): icon + title + line, 3 columns. */
.fyo-panel__tiles .wp-block-post-template {
	gap: var(--wp--preset--spacing--50);
}

.fyo-panel__tile {
	position: relative;
	border-radius: var(--wp--custom--radius--medium);
}

.fyo-panel__tile-title {
	margin: 0;
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--snug);
	letter-spacing: var(--wp--custom--letter-spacing--tight);
}

.fyo-panel__tile-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.fyo-panel__tile:hover .fyo-panel__tile-title a,
.fyo-panel__tile:focus-within .fyo-panel__tile-title a {
	text-decoration: underline;
}

/* How we help links: title + line; locked item carries a lock. */
.fyo-panel__link {
	position: relative;
}

.fyo-panel__link h3 {
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--snug);
}

.fyo-panel__link h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.fyo-panel__link--locked h3 a::before {
	content: "";
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	margin-inline-end: var(--wp--preset--spacing--20);
	vertical-align: -0.1em;
	background: currentColor;
	-webkit-mask: url("../../icons/lock.svg") no-repeat center / contain;
	mask: url("../../icons/lock.svg") no-repeat center / contain;
}

/* Feature card footer: the text shrinks and wraps, the button keeps its size on the same row
   (Figma 89:4287 and 271:19919). */
.fyo-panel__feature .wp-block-cover__inner-container > .wp-block-group {
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--40);
}

.fyo-panel__feature .wp-block-cover__inner-container > .wp-block-group > .wp-block-group {
	flex: 1 1 auto;
	min-width: 0;
}

.fyo-panel__feature .wp-block-cover__inner-container > .wp-block-group > .wp-block-buttons {
	flex: none;
}

.fyo-panel__feature .wp-block-button__link {
	white-space: nowrap;
}

.fyo-panel__feature .wp-block-heading,
.fyo-panel__feature p {
	overflow-wrap: normal;
	word-break: normal;
}