/* Find Your Ohio — global styles theme.json cannot express.
   Tokens come from theme.json custom properties; add a token before adding a raw value. */

/* ---------- Viewport ---------- */

/* The visible height under the WordPress admin bar. Core sets --wp-admin--admin-bar--height on
   the root only while the bar shows (32px, 46px on phones), so logged-out visitors get the full
   viewport. Use these instead of raw vh units: --fyo-viewport follows the browser's moving toolbars
   (dvh), --fyo-viewport-small is the height with them showing (svh). */
:root {
	--fyo-viewport: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	--fyo-viewport-small: var(--fyo-viewport);
}

@supports (height: 100dvh) {
	:root {
		--fyo-viewport: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
		--fyo-viewport-small: calc(100svh - var(--wp-admin--admin-bar--height, 0px));
	}
}

/* ---------- Stage ---------- */

/* The page is a centred stage with a gutter around every card (32px desktop, 0 on phones).
   Root padding (theme.json) is the card's inner padding, applied by core to constrained containers. */
.wp-site-blocks {
	position: relative;
	box-sizing: border-box; /* the max width includes the gutters, like the 1728 design frames */
	max-width: var(--wp--custom--layout--max-stage);
	margin-inline: auto;
	padding: var(--wp--custom--layout--gutter);
}

@media (max-width: 782px) {
	html:root {
		--wp--custom--layout--gutter: var(--wp--custom--layout--gutter-mobile);
		--wp--custom--layout--card-padding: var(--wp--custom--layout--card-padding-mobile);
		--wp--style--root--padding-left: var(--wp--custom--layout--card-padding-mobile);
		--wp--style--root--padding-right: var(--wp--custom--layout--card-padding-mobile);
	}
}

/* Cards stack with the gutter between them. */
.wp-site-blocks > * + *,
.wp-site-blocks main > * + * {
	margin-block-start: var(--wp--custom--layout--gutter);
}

/* ---------- Text rendering ---------- */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ---------- Focus ---------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--teal);
	outline-offset: 2px;
}

/* ---------- Section styles (core/group, core/cover) ---------- */

.is-style-card,
.is-style-card-photo {
	position: relative;
	border-radius: var(--wp--custom--radius--x-large);
	overflow: clip;
}

@media (max-width: 782px) {
	.is-style-card,
	.is-style-card-photo {
		border-radius: 0;
	}
}

/* ---------- Ohio section (the "Ohio section" panel on Group and Cover, inc/section.php) ----------
   One treatment, two faces. Desktop: the state outline as a watermark, sized and placed per block
   (Figma 124:10035: a 1442px-wide shape 34px past the right edge and 137px above a 1728px section).
   Phones: the Ohio-outline notches along both edges (Figma 149:3147 / 149:3166; a notched section
   always has both, and the sections either side stay straight), drawn inside this section's box in
   the neighbouring section's colour, so nothing overlaps a neighbour. The same ::before is the
   watermark on desktop and the top notch on phones. */
.fyo-section {
	position: relative;
	isolation: isolate;
}

/* The shape's fill (--fyo-wm-fill: the shade at the opacity) and fade (--fyo-wm-fade: a mask
   layer over the shape, solid by default), set here so a block that draws the watermark itself
   (the stacked cards' backdrop) reads the same. */
.fyo-section--watermark {
	--fyo-wm-fill: rgba(var(--fyo-wm-rgb, 0, 0, 0), var(--fyo-wm-opacity, 0.1)); /* black, or white with the Lighter shade */
	--fyo-wm-fade: linear-gradient(#000, #000);

	overflow: clip;
}

/* Red (maroon sections, Figma 149:2095 / 191:9047). */
.fyo-section--wm-red {
	--fyo-wm-fill: rgba(218, 41, 28, var(--fyo-wm-opacity, 0.1));
}

/* Light teal (teal sections, Figma 149:2661). */
.fyo-section--wm-light-teal {
	--fyo-wm-fill: rgba(101, 200, 202, var(--fyo-wm-opacity, 0.1));
}

/* Fades, from the mockups' gradients over the shape's height. Toward the top (Figma 191:9047,
   149:2095): solid up to 86% of the way down, gone by 46%. Toward the bottom (Figma 107:8183):
   solid to 16%, gone by 87%. */
.fyo-section--wm-fade-top {
	--fyo-wm-fade: linear-gradient(transparent 45.9%, #000 86.3%);
}

.fyo-section--wm-fade-bottom {
	--fyo-wm-fade: linear-gradient(#000 15.6%, transparent 86.8%);
}

.fyo-section--watermark::before {
	content: "";
	position: absolute;
	top: 0;
	right: calc(-1 * var(--fyo-wm-x, 1.98%)); /* how far the shape's right edge sits past the section's */
	z-index: -1;
	width: var(--fyo-wm-size, 83.5%);
	aspect-ratio: 750 / 872; /* ohio-shape-mask.svg */
	margin-top: var(--fyo-wm-y, -7.93%); /* a percentage margin resolves against the width, so the placement scales with the section */
	background: var(--fyo-wm-fill);
	-webkit-mask: url("../images/ohio-shape-mask.svg") no-repeat 0 0 / 100% 100%;
	mask: url("../images/ohio-shape-mask.svg") no-repeat 0 0 / 100% 100%;
	pointer-events: none;
}

/* Desktop only: the fade as a second mask layer, kept where both show (on phones this ::before
   is the top notch, with masks of its own). */
@media (min-width: 783px) {
	.fyo-section--watermark::before {
		-webkit-mask: url("../images/ohio-shape-mask.svg") no-repeat 0 0 / 100% 100%, var(--fyo-wm-fade);
		mask: url("../images/ohio-shape-mask.svg") no-repeat 0 0 / 100% 100%, var(--fyo-wm-fade);
		-webkit-mask-composite: source-in;
		mask-composite: intersect;
	}
}

@media (max-width: 782px) {
	.fyo-section--watermark::before {
		display: none;
	}

	/* The notch bands: full width, their height from the SVGs' aspect, the neighbour's colour masked
	   to the part of the band on the neighbour's side of the outline (the SVG draws this section's
	   side, so the two layers are composited to its complement). */
	.fyo-section--notch-top::before,
	.fyo-section--notch-bottom::after {
		content: "";
		position: absolute;
		left: 0;
		z-index: -1; /* above this section's background, below its content */
		display: block;
		width: 100%;
		margin: 0;
		/* The outline layer runs 1px past the band's inner edge: the band's height is fractional, and
		   a partly covered last row would leave a hairline of the neighbour's colour. */
		-webkit-mask-size: 100% calc(100% + 1px), 100% 100%;
		mask-size: 100% calc(100% + 1px), 100% 100%;
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-composite: xor;
		mask-composite: exclude;
		pointer-events: none;
	}

	.fyo-section--notch-top::before {
		top: 0;
		aspect-ratio: 402 / 84;
		background: var(--fyo-notch-top);
		-webkit-mask-image: url("../images/ohio-notch-top.svg"), linear-gradient(#000, #000);
		mask-image: url("../images/ohio-notch-top.svg"), linear-gradient(#000, #000);
	}

	.fyo-section--notch-bottom::after {
		bottom: 0;
		aspect-ratio: 402 / 196.044;
		background: var(--fyo-notch-bottom);
		-webkit-mask-image: url("../images/ohio-notch-bottom.svg"), linear-gradient(#000, #000);
		mask-image: url("../images/ohio-notch-bottom.svg"), linear-gradient(#000, #000);
		-webkit-mask-position: 0 100%, 0 0;
		mask-position: 0 100%, 0 0;
	}

	/* Space: from each edge to the content, set per section in px on a 402px phone (inc/section.php
	   notch_spacing(); 112 and 136 by default, the bands being 84 and 196 tall) and scaled with the
	   section's width (vw: sections are full width on phones, and cqi would measure the content box
	   inside the side padding), so content can run into a band where the outline leaves room. The first/last
	   child's margin makes up the difference from the section's own padding (passed in as
	   --fyo-pad-*), so the value is the space on phones whatever the desktop padding. */
	.fyo-section--notch-top,
	.fyo-section--notch-bottom {
		container-type: inline-size;
	}

	/* !important: core's layout styles for the parent set these margins with doubled-class selectors
	   that print after this sheet. */
	.fyo-section--notch-top > :first-child {
		margin-block-start: calc(var(--fyo-notch-space-top, 112) * 100vw / 402 - var(--fyo-pad-top, 0px)) !important;
	}

	.fyo-section--notch-bottom > :last-child {
		margin-block-end: calc(var(--fyo-notch-space-bottom, 136) * 100vw / 402 - var(--fyo-pad-bottom, 0px)) !important;
	}

	/* A notched edge meets its neighbour flush: no gap between the two sections and no rounded
	   corners on that edge (the sections' own radius is an inline style, hence the override). */
	.fyo-section--notch-top,
	.fyo-section--notch-bottom + * {
		margin-block-start: 0 !important;
	}

	.fyo-section--notch-top,
	.fyo-section--notch-bottom + * {
		border-start-start-radius: 0 !important;
		border-start-end-radius: 0 !important;
	}

	.fyo-section--notch-bottom,
	:has(+ .fyo-section--notch-top) {
		border-end-start-radius: 0 !important;
		border-end-end-radius: 0 !important;
	}

	/* Overlap: the neighbour slides under a band (a negative margin on this section, in px on a
	   402px phone; the section is full width on phones, hence vw). The band already paints the
	   neighbour's colour in its cut-outs, so the layers go: the neighbour's background, this
	   section, then the neighbour's blocks. The neighbour must not be a stacking context of its own
	   (the Ohio section's isolation is dropped here; its watermark is desktop only), or its
	   background would rise with its blocks. Zero-specificity position and z-index, so a block that
	   places its own children (a cover's background layers) keeps them where they are. */
	.fyo-section.fyo-section--overlap-bottom {
		z-index: 3;
		margin-block-end: calc(var(--fyo-notch-overlap-bottom, 0) * -100vw / 402) !important;
	}

	.fyo-section.fyo-section--overlap-top {
		z-index: 3;
		margin-block-start: calc(var(--fyo-notch-overlap-top, 0) * -100vw / 402) !important;
	}

	.fyo-section--overlap-bottom + *,
	:has(+ .fyo-section--overlap-top) {
		isolation: auto !important;
	}

	:where(.fyo-section--overlap-bottom + *, :has(+ .fyo-section--overlap-top)) > :where(*) {
		position: relative;
		z-index: 4;
	}

	:is(.fyo-section--overlap-bottom + *, :has(+ .fyo-section--overlap-top)) > .wp-block-cover__inner-container {
		z-index: 4;
	}
}

/* ---------- Containers on phones ----------
   Sections at the top level of a page run edge to edge below 782px (the mobile frames have no
   gutter), so their rounded corners go: a radius only belongs to a box that sits inside something.
   Nested containers (cards, panels) keep theirs. The radius is an inline style, hence !important. */
@media (max-width: 782px) {
	main > .wp-block-group,
	main > .wp-block-cover,
	.wp-block-post-content > .wp-block-group,
	.wp-block-post-content > .wp-block-cover {
		border-radius: 0 !important;
	}
}

/* ---------- Check list (core/list style "Check list") ----------
   A teal Sharp Solid circle-check before each item (Figma 256:15698), 24px between items. */
.wp-block-list.is-style-checks {
	--fyo-check-color: var(--wp--preset--color--teal);
	display: grid;
	gap: var(--wp--preset--spacing--50);
	margin-inline: 0;
	padding: 0;
	list-style: none;
}

.wp-block-list.is-style-checks > li {
	position: relative;
	margin: 0;
	padding-inline-start: calc(16px + var(--wp--preset--spacing--20));
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: 1.3;
	text-wrap: balance;
}

.wp-block-list.is-style-checks > li::before {
	content: "";
	position: absolute;
	top: calc((1.3em - 16px) / 2);
	left: 0;
	width: 16px;
	height: 16px;
	background: var(--fyo-check-color);
	-webkit-mask: url("../icons/circle-check.svg") no-repeat center / contain;
	mask: url("../icons/circle-check.svg") no-repeat center / contain;
}

/* ---------- Chevron list (core/list style "Chevron list") ----------
   A Sharp Solid circle-chevron before each item, 16px between items (Figma 149:2670): teal, or
   lighter teal on the dark section colours. */
.wp-block-list.is-style-chevrons {
	--fyo-chevron-color: var(--wp--preset--color--teal);
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin-inline: 0;
	padding: 0;
	list-style: none;
}

:where(.has-teal-background-color, .has-maroon-background-color, .has-charcoal-background-color, .has-burgundy-background-color, .has-navy-background-color, .has-blue-background-color, .has-red-background-color) .wp-block-list.is-style-chevrons {
	--fyo-chevron-color: var(--wp--preset--color--lighter-teal);
}

.wp-block-list.is-style-chevrons > li {
	position: relative;
	margin: 0;
	padding-inline-start: calc(16px + var(--wp--preset--spacing--30));
	line-height: var(--wp--custom--line-height--normal);
	text-wrap: balance;
}

@media (max-width: 782px) {
	.wp-block-list.is-style-chevrons {
		gap: var(--wp--preset--spacing--30); /* 12px on phones (Figma 136:3716) */
	}
}

.wp-block-list.is-style-chevrons > li::before {
	content: "";
	position: absolute;
	top: calc((1.5em - 16px) / 2);
	left: 0;
	width: 16px;
	height: 16px;
	background: var(--fyo-chevron-color);
	-webkit-mask: url("../icons/circle-chevron-right.svg") no-repeat center / contain;
	mask: url("../icons/circle-chevron-right.svg") no-repeat center / contain;
}

/* ---------- Card footer (core/group style "Card footer") ----------
   A dashed light-teal rule, then a figure on the left and a link on the right (Figma 354:7323).
   Bold text in a paragraph is the figure ("**76** state parks"); a ghost button is the link. */
.wp-block-group.is-style-card-footer {
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--40);
	border-top: var(--wp--custom--border--width--thin) dashed var(--wp--preset--color--light-teal);
}

.wp-block-group.is-style-card-footer > p {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	min-width: 0;
	margin: 0;
	font-size: 1rem;
	line-height: 1.1;
	text-wrap: balance;
}

.wp-block-group.is-style-card-footer > p strong {
	flex: none;
	font-size: 2rem;
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: 1;
	white-space: nowrap;
}

.wp-block-group.is-style-card-footer .wp-block-buttons {
	flex: none;
	margin: 0;
}

/* The link: teal SemiBold with an up-right arrow (an outbound "Learn more"). */
.wp-block-group.is-style-card-footer .wp-block-button.is-style-ghost .wp-block-button__link {
	gap: var(--wp--preset--spacing--20);
	padding: 0;
	color: var(--wp--preset--color--teal);
	font-size: 1rem;
	font-weight: var(--wp--custom--font-weight--semibold);
	letter-spacing: -0.02em;
	line-height: 1.3;
}

.wp-block-group.is-style-card-footer .wp-block-button.is-style-ghost .wp-block-button__link::after {
	width: 16px;
	height: 16px;
	-webkit-mask-image: url("../icons/arrow-up-right.svg");
	mask-image: url("../icons/arrow-up-right.svg");
}

.wp-block-group.is-style-card-footer .wp-block-button.is-style-ghost .wp-block-button__link:hover::after {
	transform: translate(2px, -2px);
}

@media (max-width: 782px) {
	.wp-block-group.is-style-card-footer > p,
	.wp-block-group.is-style-card-footer .wp-block-button.is-style-ghost .wp-block-button__link {
		font-size: 0.875rem;
	}
}

/* ---------- Buttons ---------- */

.wp-block-button .wp-block-button__link {
	transition: background-color var(--wp--custom--duration--base) var(--wp--custom--easing--standard),
		color var(--wp--custom--duration--base) var(--wp--custom--easing--standard);
}

/* Ghost: text and an arrow, no fill. Used beside a filled button in heroes. */
.wp-block-button.is-style-ghost .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding-inline: 0;
	background: transparent;
	color: currentColor;
}

.wp-block-button.is-style-ghost .wp-block-button__link::after {
	content: "";
	flex: none;
	width: 1.1em;
	height: 1.1em;
	background: currentColor;
	-webkit-mask: url("../icons/arrow-right.svg") no-repeat center / contain;
	mask: url("../icons/arrow-right.svg") no-repeat center / contain;
	transition: transform var(--wp--custom--duration--base) var(--wp--custom--easing--standard);
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover::after {
	transform: translateX(4px);
}

/* Inverse: white pill with red text, for red and maroon surfaces. */
.wp-block-button.is-style-inverse .wp-block-button__link {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--red);
}

.wp-block-button.is-style-inverse .wp-block-button__link:hover {
	background: var(--wp--preset--color--maroon);
	color: var(--wp--preset--color--white);
}

/* ---------- Text styles ---------- */

.is-style-eyebrow {
	color: var(--wp--custom--color--text--eyebrow);
	font-size: var(--wp--preset--font-size--large);
	font-weight: var(--wp--custom--font-weight--bold);
	line-height: var(--wp--custom--line-height--heading);
	letter-spacing: var(--wp--custom--letter-spacing--default);
}

.is-style-muted {
	color: var(--wp--custom--color--text--muted);
}

/* ---------- Icons ---------- */

:where(.fyo-icon) {
	/* Zero specificity so a block's own icon size (e.g. .fyo-tabs__tab .fyo-tabs__icon) wins. */
	display: inline-block;
	width: 1em;
	height: 1em;
	fill: currentColor;
	vertical-align: -0.125em;
}

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}