/*
Theme Name: Sierpe Fishing
Theme URI: https://sierpe-fishing.com
Author: Sierpe Fishing
Description: Block theme for Sierpe Fishing — sport fishing charters in Sierpe de Osa, Osa Peninsula, Costa Rica. Editorial, mobile-first, built on core blocks so the whole site stays editable from the Site Editor.
Version: 1.1.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sierpe-fishing
Tags: block-theme, full-site-editing, one-column, custom-colors, custom-logo, custom-menu, editor-style, featured-images, block-patterns
*/

/* ---------------------------------------------------------------------------
 * Only what block markup and theme.json cannot express on their own:
 * focus states, motion preferences, sticky/blur header, and the reusable
 * block style variations registered in functions.php.
 * Everything else (colour, type, spacing) lives in theme.json.
 * ------------------------------------------------------------------------ */

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/*
	 * `clip`, not `hidden`: overflow-x:hidden on an ancestor silently disables
	 * position:sticky on the header. Both stop the sideways scroll.
	 */
	overflow-x: clip;
}

*:focus-visible {
	outline: 2px solid var(--wp--preset--color--pacific-blue);
	outline-offset: 3px;
}

/* --- Sticky header with translucent blur ---------------------------------- */

/*
 * The sticky has to sit on the template-part wrapper, not the group inside it.
 * A sticky element only travels within its parent's box, and that wrapper is
 * exactly as tall as the header — so sticking the inner group does nothing.
 */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 60;
}

.site-header {
	background: rgba(250, 250, 247, 0.95);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: var(--wp--custom--hairline--light);
	transition: background-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition), border-color var(--wp--custom--transition);
}

/*
 * Once the page has moved, the header stops floating over the hero and starts
 * sitting on top of the content: fully opaque, with a soft edge underneath so
 * it separates from photography without a hard rule. `is-scrolled` is set in
 * assets/js/motion.js; without the script the header simply stays translucent.
 */
.site-header.is-scrolled {
	background: rgba(250, 250, 247, 0.98);
	border-bottom-color: rgba(6, 59, 92, 0.16);
	box-shadow: 0 8px 26px -18px rgba(6, 59, 92, 0.55);
}

.site-header .wp-block-navigation-item__content {
	padding-block: 4px;
	color: var(--wp--preset--color--deep-ocean);
}

.site-header .wp-block-navigation-item.is-current > .wp-block-navigation-item__content,
.site-header .current-menu-item > .wp-block-navigation-item__content {
	font-weight: 700;
}

/*
 * The underline sweeps in from the left instead of appearing at once. Desktop
 * only: in the mobile drawer the links are full width and a travelling bar
 * across the whole row reads as a glitch rather than a hover.
 */
@media (min-width: 1025px) {
	.site-header .wp-block-navigation-item__content {
		position: relative;
	}

	.site-header .wp-block-navigation-item__content::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		bottom: 0;
		height: 2px;
		background: var(--wp--preset--color--osa-green);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 0.28s ease;
	}

	.site-header .wp-block-navigation-item__content:hover::after,
	.site-header .wp-block-navigation-item__content:focus-visible::after,
	.site-header .wp-block-navigation-item.is-current > .wp-block-navigation-item__content::after,
	.site-header .current-menu-item > .wp-block-navigation-item__content::after {
		transform: scaleX(1);
	}
}

/* --- Hero: slow ambient zoom on the fallback still ------------------------- */

.hero-zoom img,
.hero-zoom .wp-block-cover__image-background {
	animation: sierpe-hero-zoom 30s ease-in-out infinite alternate;
}

@keyframes sierpe-hero-zoom {
	from { transform: scale(1.03); }
	to   { transform: scale(1.12); }
}

/* --- Hero: the copy rises into place on load ------------------------------- */

/*
 * `cover-column` is the class every page hero carries, and only the heroes —
 * the closing CTA cover is a plain cover, so it reveals on scroll like any
 * other section instead of animating on load.
 *
 * `backwards` holds the first frame during the delay, so nothing flickers into
 * view before its turn. The cascade is deliberately short: the background photo
 * is the page's largest paint and is never hidden, but a long hold on the
 * headline would still push back the moment the page reads as ready.
 */
@media (prefers-reduced-motion: no-preference) {
	.cover-column > .wp-block-cover__inner-container > * {
		animation: sierpe-rise 0.55s cubic-bezier(0.2, 0, 0, 1) backwards;
	}

	.cover-column > .wp-block-cover__inner-container > :nth-child(1) { animation-delay: 0.06s; }
	.cover-column > .wp-block-cover__inner-container > :nth-child(2) { animation-delay: 0.14s; }
	.cover-column > .wp-block-cover__inner-container > :nth-child(3) { animation-delay: 0.22s; }
	.cover-column > .wp-block-cover__inner-container > :nth-child(4) { animation-delay: 0.3s; }
	.cover-column > .wp-block-cover__inner-container > :nth-child(n+5) { animation-delay: 0.38s; }
}

@keyframes sierpe-rise {
	from {
		opacity: 0;
		translate: 0 18px;
	}
}

/* --- Block style: Eyebrow (small caps label above a heading) --------------- */

.is-style-eyebrow {
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: var(--wp--custom--eyebrow--letter-spacing);
	text-transform: uppercase;
	line-height: 1.3;
}

/* --- Block styles: outline buttons ---------------------------------------- */

.wp-block-button.is-style-outline-dark .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--deep-ocean);
	border: var(--wp--custom--hairline--light-strong);
	transition: background-color var(--wp--custom--transition), color var(--wp--custom--transition), border-color var(--wp--custom--transition);
}

.wp-block-button.is-style-outline-dark .wp-block-button__link:hover,
.wp-block-button.is-style-outline-dark .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--deep-ocean);
	border-color: var(--wp--preset--color--deep-ocean);
	color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-outline-light .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--white);
	border: var(--wp--custom--hairline--dark-strong);
	transition: border-color var(--wp--custom--transition), background-color var(--wp--custom--transition);
}

.wp-block-button.is-style-outline-light .wp-block-button__link:hover,
.wp-block-button.is-style-outline-light .wp-block-button__link:focus {
	border-color: var(--wp--preset--color--osa-green);
	background-color: transparent;
	color: var(--wp--preset--color--white);
}

/* --- Block style: arrow link (text CTA with a hairline underline) ---------- */

.wp-block-button.is-style-arrow-link .wp-block-button__link {
	background-color: transparent;
	color: currentColor;
	padding: 4px 0;
	border: 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
	opacity: 0.85;
	transition: border-color var(--wp--custom--transition), opacity var(--wp--custom--transition);
}

.wp-block-button.is-style-arrow-link .wp-block-button__link:hover,
.wp-block-button.is-style-arrow-link .wp-block-button__link:focus {
	border-bottom-color: var(--wp--preset--color--osa-green);
	opacity: 1;
}

/* --- Primary button: a light sweeps across it on hover --------------------- */

/*
 * Only the solid green button. The outline and link styles have no fill for a
 * highlight to travel over, so the sweep is excluded from them by name rather
 * than by an attribute match that would also catch styles added later.
 *
 * The gradient sits above the label, not behind it: a negative z-index would
 * put it under the button's own background and it would never be seen.
 */
.wp-block-button:not(.is-style-outline-dark, .is-style-outline-light, .is-style-arrow-link, .is-style-plain-link) > .wp-block-button__link {
	position: relative;
	overflow: hidden;
}

.wp-block-button:not(.is-style-outline-dark, .is-style-outline-light, .is-style-arrow-link, .is-style-plain-link) > .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.26) 50%, transparent 62%);
	translate: -120% 0;
}

.wp-block-button:not(.is-style-outline-dark, .is-style-outline-light, .is-style-arrow-link, .is-style-plain-link) > .wp-block-button__link:hover::after,
.wp-block-button:not(.is-style-outline-dark, .is-style-outline-light, .is-style-arrow-link, .is-style-plain-link) > .wp-block-button__link:focus-visible::after {
	translate: 120% 0;
	transition: translate 0.75s ease;
}

/* --- Block style: card (editorial card with hairline + lift on hover) ------ */

.is-style-card {
	background-color: var(--wp--preset--color--white);
	border: var(--wp--custom--hairline--light);
	transition: border-color var(--wp--custom--transition), transform var(--wp--custom--transition);
}

.is-style-card:hover,
.is-style-card:focus-within {
	border-color: var(--wp--preset--color--osa-green);
	transform: translateY(-4px);
}

.is-style-card-light {
	border: var(--wp--custom--hairline--dark-strong);
	transition: border-color var(--wp--custom--transition), transform var(--wp--custom--transition);
}

.is-style-card-light:hover,
.is-style-card-light:focus-within {
	border-color: var(--wp--preset--color--osa-green);
	transform: translateY(-4px);
}

/* --- Block style: hairline top rule (meta bars, editorial tables) ---------- */

.is-style-hairline-top {
	border-top: var(--wp--custom--hairline--light-strong);
}

.is-style-hairline-top-light {
	border-top: var(--wp--custom--hairline--dark-strong);
}

/* --- Sidebar that follows the reader on charter pages --------------------- */

/*
 * The sticky goes on the card, not the column. A column is a flex item stretched
 * to the height of the tallest one, so it has no room to travel — the element
 * inside it does.
 */
@media (min-width: 782px) {
	.sticky-sidebar > * {
		position: sticky;
		top: 96px;
	}
}

/* --- Species chips --------------------------------------------------------- */

.is-style-species-chips,
.species-chips ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.is-style-species-chips li,
.species-chips li {
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--jungle-green);
	font-size: 13px;
	padding: 7px 11px;
}

/* --- Respect reduced motion ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --- Logo sizing ----------------------------------------------------------- */

.site-header .wp-block-site-logo img {
	height: clamp(56px, 7vw, 78px);
	width: auto;
}

/* --- Top bar --------------------------------------------------------------- */

.site-topbar {
	font-size: var(--wp--preset--font-size--tiny);
}

/*
 * Social icons: 26px touch targets, 14px apart. These need an explicit gap
 * because the theme's blockGap is 0, which would otherwise leave them touching.
 */
.site-topbar .wp-block-social-links {
	gap: 14px;
}

.site-topbar .wp-social-link {
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.site-topbar .wp-social-link a {
	width: 100%;
	height: 100%;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.topbar-location::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--osa-green);
	margin-inline-end: 7px;
	vertical-align: middle;
}

/* --- Block style: plain link (a button that reads as text) ----------------- */

.wp-block-button.is-style-plain-link .wp-block-button__link {
	background-color: transparent;
	color: currentColor;
	padding: 0;
	border: 0;
	border-radius: 0;
	font-size: inherit;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	transition: color var(--wp--custom--transition);
}

.wp-block-button.is-style-plain-link .wp-block-button__link:hover,
.wp-block-button.is-style-plain-link .wp-block-button__link:focus {
	color: var(--wp--preset--color--osa-green);
}

/* --- Navigation: the design switches to the drawer at 1024px, core at 600px - */

@media (max-width: 1024px) {
	.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;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
	}

	/*
	 * The header nav is justified right, and core carries that into the drawer
	 * as `align-items: flex-end` on the overlay's content column — the rows then
	 * shrink to the width of the longest label instead of filling the screen.
	 * Redefining core's own layout variables flips the whole drawer to a
	 * left-aligned list in one place, rather than overriding each rule.
	 */
	.site-header .wp-block-navigation__responsive-container.is-menu-open {
		--navigation-layout-justify: flex-start;
		--navigation-layout-justification-setting: flex-start;
	}

	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		width: 100%;
		align-items: stretch;
		/* The header's 24px blockGap doubles every row height in a vertical list. */
		gap: 0;
	}

	/* The CTA moves into the drawer, so the top bar keeps only logo and toggle. */
	.site-header .header-cta {
		display: none;
	}
}

/* The drawer CTA is a drawer-only affordance; above 1024px the header one shows. */
@media (min-width: 1025px) {
	.site-header .drawer-cta {
		display: none;
	}
}

/*
 * The narrow end of the desktop range is tight: logo, nine links and the CTA
 * want about 990px, and a 1025px viewport leaves 985px of content column. Pull
 * the gaps in until there is room — otherwise the row that the 1024px drawer
 * breakpoint exists to protect wraps anyway, a few pixels above it.
 */
@media (min-width: 1025px) and (max-width: 1240px) {
	.site-header .wp-block-navigation__responsive-container-content,
	.site-header .wp-block-navigation__container,
	.site-header .wp-block-group.is-layout-flex {
		gap: 16px;
	}
}

/*
 * `backdrop-filter` makes .site-header the containing block for every
 * fixed-position descendant, so core's overlay menu resolved its `inset: 0`
 * against the header's own 82px-tall box: the drawer opened as a cut-off strip
 * with the links clipped out of sight. Drop the blur while the menu is open —
 * the overlay covers the page anyway, so there is nothing left to blur.
 */
.site-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close {
	min-width: 48px;
	min-height: 48px;
	border: var(--wp--custom--hairline--light-strong);
	justify-content: center;
	align-items: center;
}

/*
 * Core gives the open toggle `display: flex` but leaves the close button a
 * plain inline-block <button>, so the centring above never took on it and the X
 * sat on the text baseline, up and left of its box.
 *
 * This has to name the close button alone. Adding `display: flex` to the shared
 * rule above matches core's own `.wp-block-navigation__responsive-container-open
 * :not(.always-shown) { display: none }` at (0,2,0) and wins on source order —
 * which puts a hamburger next to the full desktop nav and wraps it to a second
 * row.
 */
.site-header .wp-block-navigation__responsive-container-close {
	display: flex;
}

/* --- The drawer itself ----------------------------------------------------- */

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid rgba(6, 59, 92, 0.08);
}

/*
 * The link, not the list item, carries the padding: the whole 56px row becomes
 * the tap target instead of just the words in it.
 */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	box-sizing: border-box; /* or the padding stacks on top of the 56px row. */
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 56px;
	padding-block: 8px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.01em;
	touch-action: manipulation;
}

/* Where you are now, marked the same way the desktop underline marks it. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.is-current > .wp-block-navigation-item__content,
.site-header .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	font-weight: 700;
	padding-inline-start: 14px;
	box-shadow: inset 3px 0 0 var(--wp--preset--color--osa-green);
}

/* The one primary action in the drawer, set apart from the list above it. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .drawer-cta {
	width: 100%;
	margin-top: 28px;
}

/*
 * Rows fade up in sequence rather than all at once — 30ms apart, which reads as
 * the drawer settling instead of as an animation. `backwards` holds the opening
 * frame through the delay so nothing flashes at full opacity first.
 */
@media (prefers-reduced-motion: no-preference) {
	.site-header .is-menu-open .wp-block-navigation-item,
	.site-header .is-menu-open .drawer-cta {
		animation: sierpe-drawer-row 0.28s cubic-bezier(0.2, 0, 0, 1) backwards;
	}

	.site-header .is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: 0.03s; }
	.site-header .is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 0.06s; }
	.site-header .is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 0.09s; }
	.site-header .is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 0.12s; }
	.site-header .is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 0.15s; }
	.site-header .is-menu-open .wp-block-navigation-item:nth-child(6) { animation-delay: 0.18s; }
	.site-header .is-menu-open .wp-block-navigation-item:nth-child(7) { animation-delay: 0.21s; }
	.site-header .is-menu-open .wp-block-navigation-item:nth-child(8) { animation-delay: 0.24s; }
	.site-header .is-menu-open .wp-block-navigation-item:nth-child(9) { animation-delay: 0.27s; }
	.site-header .is-menu-open .drawer-cta { animation-delay: 0.3s; }
}

@keyframes sierpe-drawer-row {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
}

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

/*
 * The block's width:auto loses to the column width, stretching the logo. The
 * bottom margin is explicit because the theme's blockGap is 0.
 */
.footer-logo {
	margin: 0 0 26px;
}

.footer-logo img {
	width: auto;
	height: 82px;
	max-width: 100%;
	object-fit: contain;
	display: block;
}

.footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
}

.footer-links li + li {
	margin-top: 10px;
}

.footer-links a {
	color: rgba(255, 255, 255, 0.72);
	transition: color var(--wp--custom--transition);
}

.footer-links a:hover,
.footer-links a:focus {
	color: var(--wp--preset--color--osa-green);
}

/* Core ships a 32px gap, which pushes the fourth icon onto its own row. */
.footer-social {
	gap: 12px;
}

.footer-social .wp-social-link {
	width: 46px;
	height: 46px;
	box-sizing: border-box;
	border: var(--wp--custom--hairline--dark-strong);
	background: transparent;
	padding: 0;
	transition: border-color var(--wp--custom--transition);
}

/* The anchor is only as tall as the icon, so it has to fill the button. */
.footer-social .wp-social-link a {
	width: 100%;
	height: 100%;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.footer-social .wp-social-link:hover,
.footer-social .wp-social-link:focus-within {
	border-color: var(--wp--preset--color--osa-green);
}

.footer-social .wp-social-link svg {
	width: 19px;
	height: 19px;
}

/* --- Eyebrow with a leading rule (hero + section labels) ------------------- */

.eyebrow-rule::before {
	content: "";
	display: inline-block;
	width: 34px;
	height: 1px;
	background: currentColor;
	opacity: 0.55;
	margin-inline-end: 12px;
	vertical-align: middle;
}

/* --- Editorial season table ------------------------------------------------ */

.season-row {
	padding-block: 20px;
}

.season-row:last-child {
	border-bottom: var(--wp--custom--hairline--light-strong);
}

/* --- Video cards ----------------------------------------------------------- */

.video-card .wp-block-cover__image-background {
	opacity: 0.85;
}

/*
 * Play badge in the top corner, title at the foot. The inner container is
 * bottom-aligned and shrink-wrapped by default, so it is stretched to the full
 * card height and its two children pushed to opposite ends.
 */
.video-card > .wp-block-cover__inner-container {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
}

/* The constrained layout centres these with auto margins marked !important. */
.video-card > .wp-block-cover__inner-container > * {
	margin-inline: 0 !important;
}

.video-card .play-badge {
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, 0.75);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	line-height: 1;
}

/* ---------------------------------------------------------------------------
 * Google reviews.
 *
 * Stars, the Google mark and the avatar circle are drawn here rather than
 * written into the markup. A glyph is text the client can delete by accident
 * and an inline SVG inside a paragraph is content the block editor cannot
 * round-trip — the same thing that emptied the play badge. Every block stays a
 * plain, valid paragraph whose text is also what a screen reader announces.
 * ------------------------------------------------------------------------ */

/* --- Stars ---------------------------------------------------------------- */

/*
 * A mask rather than a background image, so one rule serves both the sand bar
 * and the deep blue band and each only has to override a colour.
 */
.rating-line::before,
.review-quote::before {
	content: "";
	display: block;
	width: 88px;
	height: 16px;
	flex: none;
	background-color: var(--sierpe-star, #B8770A);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M9 0.9l2.35 4.76 5.25 0.77-3.8 3.7 0.9 5.23L9 12.9l-4.7 2.47 0.9-5.23-3.8-3.7 5.25-0.77z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16'%3E%3Cpath d='M9 0.9l2.35 4.76 5.25 0.77-3.8 3.7 0.9 5.23L9 12.9l-4.7 2.47 0.9-5.23-3.8-3.7 5.25-0.77z'/%3E%3C/svg%3E");
	-webkit-mask-size: 17.6px 16px;
	mask-size: 17.6px 16px;
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
}

/* Four stars: the same row, one star short. */
.stars-4 .review-quote::before {
	width: 70px;
}

/* --- The Google mark ------------------------------------------------------ */

/*
 * Google's own four-colour G, unmodified, used only to say that these reviews
 * come from Google — which is the whole reason a visitor believes them.
 */
.review-source::before,
.review-card::after,
.reviews-bar .rating-line::after {
	content: "";
	display: block;
	flex: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* --- The rating line: [G] [stars] text ------------------------------------ */

.rating-line {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--wp--custom--text--secondary);
}

.reviews-bar .rating-line::after {
	width: 16px;
	height: 16px;
	order: -1;   /* the mark leads the line */
}

.reviews-bar .rating-line {
	color: var(--wp--preset--color--charcoal);
}

/* --- The summary card ----------------------------------------------------- */

.review-summary {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.review-source {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--wp--custom--text--tertiary);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.review-source::before {
	width: 16px;
	height: 16px;
}

.rating-score {
	font-size: clamp(44px, 5vw, 58px);
	color: var(--wp--preset--color--deep-ocean);
}

/* --- A review card -------------------------------------------------------- */

.review-card {
	position: relative;
	display: flex;
	flex-direction: column;
}

/* The mark sits in the corner the eye reaches last, not competing with the name. */
.review-card::after {
	position: absolute;
	top: 24px;
	right: 22px;
	width: 17px;
	height: 17px;
}

.review-avatar {
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 50%;
	background: var(--wp--preset--color--deep-ocean);
	color: var(--wp--preset--color--white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
}

.review-byline {
	color: var(--wp--preset--color--charcoal);
	line-height: 1.35;
}

.review-quote {
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1 0 auto;
}

/* --- The band ------------------------------------------------------------- */

/*
 * A white band, one shade brighter than the off-white the rest of the page
 * uses, so the section reads as its own thing without another colour. The
 * summary card carries the brand blue instead, which keeps the row from being
 * four white boxes in a row and gives the score somewhere to sit.
 */
.reviews-section .review-card {
	border: var(--wp--custom--hairline--light-strong);
}

.review-summary {
	color: var(--wp--preset--color--white);
}

.review-summary .rating-score {
	color: var(--wp--preset--color--white);
}

.review-summary .review-source {
	color: rgba(255, 255, 255, 0.66);
}

.review-summary .rating-line {
	color: rgba(255, 255, 255, 0.8);
}

/* Against the blue the amber can brighten; on white it has to hold its own. */
.review-summary {
	--sierpe-star: #F2B23E;
}

.reviews-section {
	--sierpe-star: #DE9A0B;
}

/* Reads as a bar under the trust strip, not as another section. */
.reviews-bar {
	border-bottom: var(--wp--custom--hairline--light);
}

/* --- Trust bar: separators between the cells, not before the first one ----- */

/* Separators between cells only, with the text clear of the rule. */
.trust-bar > * {
	padding-left: 22px;
}

.trust-bar > *:first-child {
	border-left: 0;
	padding-left: 0;
}

/* --- Location watermark ---------------------------------------------------- */

.location-section {
	position: relative;
	overflow: hidden;
}

.location-watermark {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	height: min(120%, 620px);
	/* The silhouette is 1000x894; let the width follow that, not the attributes. */
	width: auto;
	pointer-events: none;
	z-index: 0;
	overflow: visible;
}

/* The country stays a watermark; the marker is what the eye should find. */
.location-watermark .cr-outline {
	opacity: 0.09;
}

.location-watermark .cr-dot {
	opacity: 0.6;
}

/*
 * Radar pulse on Sierpe. transform-box/origin are required: an SVG transform
 * otherwise scales from the canvas origin, not the circle's own centre, and the
 * ring flies off toward the corner.
 */
.location-watermark .cr-ping {
	opacity: 0.5;
	transform-box: fill-box;
	transform-origin: center;
	animation: sierpe-ping 2.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes sierpe-ping {
	0% {
		transform: scale(0.4);
		opacity: 0.55;
	}

	70% {
		transform: scale(1.7);
		opacity: 0;
	}

	100% {
		transform: scale(1.7);
		opacity: 0;
	}
}

/*
 * Lift the content above the watermark — but never the watermark itself, or it
 * drops back into the flow and pushes the whole section down by its height.
 */
.location-section > *:not(.location-watermark) {
	position: relative;
	z-index: 1;
}

/* --- Highlight box (charter body) ------------------------------------------ */

.is-style-highlight {
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--jungle-green);
	padding: 16px 18px;
}

/* --- Packing list: green mid-dot bullets ----------------------------------- */

.bring-list {
	list-style: none;
	margin-inline-start: 0;
	padding-inline-start: 0;
}

.bring-list li {
	position: relative;
	padding-inline-start: 18px;
	margin-bottom: 10px;
}

.bring-list li::before {
	content: "·";
	position: absolute;
	inset-inline-start: 0;
	color: var(--wp--preset--color--osa-green);
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * Two corrections to core defaults that the full-bleed layout depends on.
 * ------------------------------------------------------------------------ */

/*
 * Top-level template parts must sit flush. Core applies the root blockGap
 * between them, which opens a 32px band between the header and a full-bleed
 * hero. Sections carry their own vertical padding instead.
 */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/*
 * A Cover with a custom content position gets `width: auto` on its inner
 * container from core, so as a flex item it shrink-wraps and hugs the viewport
 * edge instead of holding the 1240px column. Core wins on specificity there,
 * but it never sets flex-grow — letting the item grow fills the row and lets
 * the constrained layout inside centre the content again.
 */
.wp-block-cover.has-custom-content-position > .wp-block-cover__inner-container {
	flex-grow: 1;
}

/*
 * Full-bleed heroes: the photo runs edge to edge while the text sits on the
 * same 1240px column as every other section.
 *
 * !important is required here too — for a Cover with a custom content position
 * core sets `width: auto; margin: 0` on the inner container at a specificity
 * a theme cannot reach. Declaring the container to *be* the column is clearer
 * than reproducing the column with padding arithmetic.
 */
.cover-column {
	padding-inline: var(--wp--preset--spacing--30);
}

.cover-column > .wp-block-cover__inner-container {
	width: 100% !important;
	max-width: var(--wp--style--global--content-size) !important;
	margin-inline: auto !important;
}

/* --- Block styles: measure caps (the design holds these line lengths) ------ */

.is-style-measure-title {
	max-width: 19em;
}

.is-style-measure-text {
	max-width: 31em;
}

/*
 * A constrained layout centres anything narrower than the content width. These
 * caps are about line length, not alignment, so anchor them to the text start
 * unless the block is deliberately centred.
 *
 * !important is required, not sloppiness: core's constrained layout emits
 * `margin-left: auto !important` on every non-aligned child, and a normal
 * declaration cannot override it at any specificity.
 */
.is-style-measure-title:not(.has-text-align-center):not(.has-text-align-right),
.is-style-measure-text:not(.has-text-align-center):not(.has-text-align-right) {
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

/* --- Links inside headings keep the heading's colour ---------------------- */

/* core/post-title renders without the wp-block-heading class, so name it too. */
.wp-block-heading a,
.wp-block-post-title a {
	color: inherit;
}

.wp-block-heading a:hover,
.wp-block-heading a:focus,
.wp-block-post-title a:hover,
.wp-block-post-title a:focus {
	color: var(--wp--preset--color--osa-green);
}

/* Breadcrumbs and card titles sitting on a dark photo or panel. */
.on-dark-links a {
	color: inherit;
}

.on-dark-links a:hover,
.on-dark-links a:focus {
	color: var(--wp--preset--color--osa-green);
}

/* ---------------------------------------------------------------------------
 * Section seams.
 *
 * Each section pays a full clamp(58px, 8vw, 108px) top and bottom, so where two
 * sections meet the gap doubles to 216px at desktop. That reads as breathing
 * room when the background colour changes, and as a hole when it doesn't —
 * About teaser into Recent catches, for instance, is one continuous off-white
 * run. On a shared ground, only the first section's bottom padding applies.
 *
 * !important because the section padding is an inline style on the block, which
 * a class rule cannot outrank.
 * ------------------------------------------------------------------------ */

.wp-block-post-content > .has-off-white-background-color + .has-off-white-background-color,
.wp-block-post-content > .has-sand-background-color + .has-sand-background-color,
.wp-block-post-content > .has-deep-ocean-background-color + .has-deep-ocean-background-color,
.wp-block-post-content > .has-jungle-green-background-color + .has-jungle-green-background-color {
	padding-top: 0 !important;
}

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

.footer-credit a {
	color: rgba(255, 255, 255, 0.85);
	transition: color var(--wp--custom--transition);
}

.footer-credit a:hover,
.footer-credit a:focus {
	color: var(--wp--preset--color--osa-green);
}

/* ---------------------------------------------------------------------------
 * Card image zoom on hover.
 * ------------------------------------------------------------------------ */

.is-style-card .wp-block-image,
.is-style-card .wp-block-post-featured-image {
	overflow: hidden;
}

.is-style-card .wp-block-image img,
.is-style-card .wp-block-post-featured-image img {
	transition: transform 0.6s ease;
}

.is-style-card:hover .wp-block-image img,
.is-style-card:focus-within .wp-block-image img,
.is-style-card:hover .wp-block-post-featured-image img,
.is-style-card:focus-within .wp-block-post-featured-image img {
	transform: scale(1.06);
}

/* ---------------------------------------------------------------------------
 * Blocks rise into view as they are scrolled to.
 *
 * This replaced a scroll-driven `animation-timeline: view()` version. That one
 * needed no script, but it only ran in Chromium and recent Safari, it could
 * only fade whole sections, and a section that fades as one block moves an
 * entire row of cards at once. assets/js/motion.js walks past the layout
 * wrappers to the cards, rows and headings themselves, so a grid cascades.
 *
 * `data-reveal` is only ever set by that script, and only on blocks that are
 * already below the fold. So with JavaScript off, on a browser without
 * IntersectionObserver, or for a reader who asked for reduced motion, the
 * selectors below match nothing and the page is simply visible — none of the
 * usual ways a reveal script leaves a page blank apply here.
 *
 * `translate` rather than `transform`: the card styles above animate transform
 * on hover, and the two properties compose instead of overwriting each other.
 * ------------------------------------------------------------------------ */

[data-reveal] {
	opacity: 0;
	translate: 0 26px;
}

[data-reveal].is-revealed {
	opacity: 1;
	translate: none;
	transition:
		opacity 0.7s cubic-bezier(0.2, 0, 0, 1) var(--reveal-delay, 0ms),
		translate 0.7s cubic-bezier(0.2, 0, 0, 1) var(--reveal-delay, 0ms);
}

/* A printed page has no scrolling, so nothing would ever reveal itself. */
@media print {
	[data-reveal] {
		opacity: 1 !important;
		translate: none !important;
	}
}

/* ---------------------------------------------------------------------------
 * Blog prose and post cards.
 *
 * blockGap is 0 site-wide, which the home patterns handle by setting their own
 * margins inline. Migrated post content has none, so body copy would run
 * together — the rhythm is restored here.
 *
 * Scope it to `.single-post`, never `.single`: WordPress puts `single` on every
 * singular view, so `.single` also caught the charter and gallery CPTs, whose
 * content is composed full-bleed sections. There the 1.2em opened a strip of
 * page background between the hero and the spec bar on all four tour pages.
 * ------------------------------------------------------------------------ */

.single-post .wp-block-post-content > * {
	margin-block: 0 1.2em;
}

/*
 * No featured image on 17 of the reports. The scrim is translucent, so without
 * a photo behind it the hero would wash out to the page background — the cover
 * carries deep ocean underneath as the fallback.
 */
.report-hero {
	background-color: var(--wp--preset--color--deep-ocean);
}

.single-post .wp-block-post-content > .wp-block-gallery {
	margin-block: 1.6em;
}

.single-post .wp-block-post-content > :last-child {
	margin-block-end: 0;
}

.single-post .wp-block-post-content > h2,
.single-post .wp-block-post-content > h3 {
	margin-block-start: 1.6em;
}

/* Post cards share a row height so their feet line up, with or without a photo. */
.wp-block-post-template.is-layout-grid > li {
	display: flex;
}

.wp-block-post-template.is-layout-grid > li > .is-style-card {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* ---------------------------------------------------------------------------
 * Fishing reports — list.
 *
 * The newest report leads the page at full width; the rest sit in the grid.
 * Doing this with :first-child rather than a second query keeps one loop, so
 * pagination and the "newest first" order stay correct on every page.
 * ------------------------------------------------------------------------ */

.report-card .wp-block-post-title {
	font-size: 21px;
	line-height: 1.2;
	text-wrap: balance;
}

.report-card .wp-block-post-date {
	font-variant-numeric: tabular-nums;
}

.report-card__more {
	transition: color var(--wp--custom--transition);
}

.report-card:hover .report-card__more,
.report-card:focus-within .report-card__more {
	color: var(--wp--preset--color--osa-green);
}

.report-list .wp-block-post-template > li:first-child {
	grid-column: 1 / -1;
}

@media (min-width: 782px) {
	/* Only pair the columns when there is actually a photo to pair with. */
	.report-list .wp-block-post-template > li:first-child > .report-card:has(.wp-block-post-featured-image) {
		display: grid;
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
		padding-bottom: 0;
	}

	.report-list .wp-block-post-template > li:first-child .wp-block-post-featured-image,
	.report-list .wp-block-post-template > li:first-child .wp-block-post-featured-image img {
		height: 100%;
		object-fit: cover;
	}

	/*
	 * Scoped to the paired layout on purpose: align-self would otherwise centre
	 * the text horizontally in the column-flex card when there is no photo.
	 */
	.report-list .wp-block-post-template > li:first-child > .report-card:has(.wp-block-post-featured-image) .report-card__body {
		align-self: center;
		padding: clamp(26px, 3vw, 44px);
	}

	.report-list .wp-block-post-template > li:first-child .wp-block-post-title {
		font-size: clamp(24px, 3vw, 32px);
	}

	.report-list .wp-block-post-template > li:first-child .wp-block-post-excerpt {
		font-size: var(--wp--preset--font-size--large);
	}
}

/* ---------------------------------------------------------------------------
 * Fishing reports — single.
 * ------------------------------------------------------------------------ */

/* The header is sticky, so anchored headings must clear it when jumped to. */
:target,
.report-body h2,
.report-body h3 {
	scroll-margin-top: 120px;
}

.report-body h2,
.report-body h3 {
	text-wrap: balance;
}

.report-body .wp-block-post-date,
.report-nav {
	font-variant-numeric: tabular-nums;
}

.report-nav a {
	color: var(--wp--preset--color--deep-ocean);
	font-weight: 600;
	transition: color var(--wp--custom--transition);
}

.report-nav a:hover,
.report-nav a:focus-visible {
	color: var(--wp--preset--color--osa-green);
}

.report-nav .post-navigation-link-previous,
.report-nav .post-navigation-link-next {
	max-width: 46%;
}

/* Long report titles must not blow out the two-column nav. */
.report-nav a {
	display: inline-block;
	overflow-wrap: break-word;
}

/*
 * A lead report without a photo would otherwise be a wide, thin card. Give it
 * the presence the position implies: sand ground and a larger headline.
 */
@media (min-width: 782px) {
	.report-list .wp-block-post-template > li:first-child > .report-card:not(:has(.wp-block-post-featured-image)) {
		background-color: var(--wp--preset--color--sand);
		border-color: rgba(35, 77, 60, 0.2);
		padding: clamp(30px, 4vw, 52px);
	}

	.report-list .wp-block-post-template > li:first-child > .report-card:not(:has(.wp-block-post-featured-image)) .report-card__body {
		padding: 0;
		max-width: 62ch;
	}
}

/* Post navigation: label above, report title below, each side clamped. */
.report-nav .post-navigation-link-next {
	text-align: right;
}

.report-nav .wp-block-post-navigation-link {
	min-width: 0;
}

.report-nav .post-navigation-link__label {
	display: block;
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--custom--text--tertiary);
	margin-bottom: 4px;
}

/* ---------------------------------------------------------------------------
 * Report galleries.
 *
 * Photos are the point of a fishing report, so a Gallery inside the post reads
 * as its own section: full column width, tight grid, hairline above it.
 * ------------------------------------------------------------------------ */

/* ---------------------------------------------------------------------------
 * Photo grids — masonry.
 *
 * Core's gallery is flex: every figure carries `flex-grow: 1`, so a row that is
 * not full stretches its items to fill it. A nine-photo `columns-4` gallery — the
 * inshore and offshore charters — ended in one photo blown up to the whole
 * content width.
 *
 * These galleries are a wall of catch photos in every shape the crew's phones
 * produce, so they run as masonry: each photo keeps its own proportions and the
 * columns pack around them. CSS multi-column, not `grid-template-rows: masonry`,
 * which is still behind a flag outside Safari. The trade-off is column-major
 * reading order, which is what every masonry wall does anyway.
 *
 * `.single` is the right scope here, unlike for the prose rhythm above: it is
 * exactly the three singular views that show a photo wall — reports, charters
 * and the gallery CPT — while leaving the home page's deliberately narrow
 * eight-across strip of recent catches alone.
 * ------------------------------------------------------------------------ */

.single .wp-block-post-content .wp-block-gallery {
	display: block;
	column-width: 190px;
	column-gap: 8px;
	margin-block: var(--wp--preset--spacing--50);
}

/*
 * The `:not(#individual-image)` is core's own specificity device, repeated here
 * because core sizes each figure with `width: calc(25% - gap)` at (1,4,1) and
 * crops it to the row height. This selector is (1,5,1), so the column wins.
 */
.single .wp-block-post-content .wp-block-gallery.has-nested-images > figure.wp-block-image:not(#individual-image) {
	display: block;
	width: auto;
	max-width: none;
	flex-basis: auto;
	margin: 0 0 8px;
	/* A photo must never be split across two columns. */
	break-inside: avoid;
}

/*
 * Undo core's `is-cropped` sizing — `height: 100%` inside a flex figure — which
 * is the whole thing masonry exists to avoid. (1,5,2) to clear core's (1,4,2).
 * The migrated reports still carry `is-cropped`; the generated galleries no
 * longer do.
 *
 * Deliberately no `aspect-ratio` here. The ratio the browser derives from the
 * img's own width/height attributes is what reserves each tile's space before
 * the photo loads — override it and unloaded images have no intrinsic size, so
 * the columns balance around 1500px placeholders and reflow as each one lands.
 */
.single .wp-block-post-content .wp-block-gallery.has-nested-images > figure.wp-block-image:not(#individual-image) img {
	display: block;
	width: 100%;
	height: auto;
}

/* Single images in the prose keep their own proportions. */
.report-body .wp-block-post-content > .wp-block-image img {
	width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------------
 * Pagination.
 *
 * Core ships it as bare inline links with no hit area or current-page emphasis.
 * Rebuilt in the site's button language: hairline outlines, 2px radius, no
 * shadows, 44px targets. A three-column grid keeps the numbers centred whether
 * or not both prev and next exist (page 1 has no "Newer reports").
 * ------------------------------------------------------------------------ */

/*
 * nav.… beats core's layout class, which sets display:flex at equal weight.
 * The spacing lives here rather than in the block attributes: query-pagination
 * is server-rendered and rebuilds its wrapper, dropping them.
 */
nav.wp-block-query-pagination {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 14px;
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-start: 26px;
}

nav.wp-block-query-pagination > .wp-block-query-pagination-previous {
	grid-column: 1;
	justify-self: start;
	margin-inline-end: 0;
}

nav.wp-block-query-pagination > .wp-block-query-pagination-numbers {
	grid-column: 2;
	justify-self: center;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

nav.wp-block-query-pagination > .wp-block-query-pagination-next {
	grid-column: 3;
	justify-self: end;
	margin-inline-start: 0;
}

/* --- Page numbers ---------------------------------------------------------- */

.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 10px;
	box-sizing: border-box;
	border: var(--wp--custom--hairline--light-strong);
	border-radius: 2px;
	color: var(--wp--preset--color--deep-ocean);
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	transition: border-color var(--wp--custom--transition), background-color var(--wp--custom--transition), color var(--wp--custom--transition);
}

.wp-block-query-pagination a.page-numbers:hover,
.wp-block-query-pagination a.page-numbers:focus-visible {
	border-color: var(--wp--preset--color--osa-green);
	color: var(--wp--preset--color--deep-ocean);
}

.wp-block-query-pagination .page-numbers.current {
	background-color: var(--wp--preset--color--deep-ocean);
	border-color: var(--wp--preset--color--deep-ocean);
	color: var(--wp--preset--color--white);
}

/* The ellipsis is a separator, not a target. */
.wp-block-query-pagination .page-numbers.dots {
	min-width: 0;
	padding: 0 2px;
	border: 0;
	color: var(--wp--custom--text--tertiary);
}

/* --- Previous / next ------------------------------------------------------- */

.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border: var(--wp--custom--hairline--light-strong);
	border-radius: 2px;
	color: var(--wp--preset--color--deep-ocean);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: border-color var(--wp--custom--transition), background-color var(--wp--custom--transition), color var(--wp--custom--transition);
}

.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-previous:focus-visible,
.wp-block-query-pagination-next:focus-visible {
	background-color: var(--wp--preset--color--deep-ocean);
	border-color: var(--wp--preset--color--deep-ocean);
	color: var(--wp--preset--color--white);
}

/* Stack on narrow screens: numbers first, then the two controls side by side. */
@media (max-width: 700px) {
	nav.wp-block-query-pagination {
		grid-template-columns: 1fr 1fr;
		row-gap: 18px;
	}

	nav.wp-block-query-pagination > .wp-block-query-pagination-numbers {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	nav.wp-block-query-pagination > .wp-block-query-pagination-previous {
		grid-column: 1;
		grid-row: 2;
	}

	nav.wp-block-query-pagination > .wp-block-query-pagination-next {
		grid-column: 2;
		grid-row: 2;
	}
}

/* --- Contact Form 7 --------------------------------------------------------
 *
 * CF7 prints its own markup, so this is the one place where the form's look
 * lives. The class names starting with `sf-` come from the form template in
 * tools/seed-contact-form.php; the `wpcf7-` ones are the plugin's.
 * -------------------------------------------------------------------------- */

.sierpe-form .wpcf7-form > p {
	margin: 0 0 20px;
}

/* Two fields per row on desktop, one on mobile. */
.sierpe-form .sf-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.sierpe-form .sf-form-grid > .sf-field {
	margin: 0;
}

@media (max-width: 600px) {
	.sierpe-form .sf-form-grid {
		grid-template-columns: 1fr;
	}
}

.sierpe-form .sf-field label,
.sierpe-form .sf-quiz-note {
	display: block;
	margin-bottom: 7px;
	color: var(--wp--preset--color--deep-ocean);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: var(--wp--custom--eyebrow--letter-spacing);
	text-transform: uppercase;
}

.sierpe-form .sf-required {
	color: var(--wp--preset--color--osa-green);
}

.sierpe-form input[type="text"],
.sierpe-form input[type="email"],
.sierpe-form input[type="tel"],
.sierpe-form input[type="date"],
.sierpe-form input[type="number"],
.sierpe-form select,
.sierpe-form textarea {
	box-sizing: border-box; /* CF7 controls default to content-box and overflow the grid cell. */
	width: 100%;
	max-width: 100%;
	padding: 13px 14px;
	border: var(--wp--custom--hairline--light-strong);
	border-radius: 2px;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--charcoal);
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px; /* Under 16px iOS zooms the page on focus. */
	line-height: 1.5;
	transition: border-color var(--wp--custom--transition);
}

.sierpe-form textarea {
	resize: vertical;
}

.sierpe-form input:focus,
.sierpe-form select:focus,
.sierpe-form textarea:focus {
	border-color: var(--wp--preset--color--pacific-blue);
}

.sierpe-form .wpcf7-form-control-wrap {
	display: block;
}

/* The quiz prints its own <label> around question and input. */
.sierpe-form .sf-quiz label {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	text-transform: none;
	letter-spacing: normal;
}

.sierpe-form .wpcf7-quiz-label {
	flex: 0 0 auto;
	color: var(--wp--custom--text--secondary);
	font-size: 15px;
	font-weight: 500;
}

.sierpe-form .sf-quiz input[type="text"] {
	max-width: 140px;
}

.sierpe-form .sf-submit {
	margin-top: 28px;
}

.sierpe-form .wpcf7-submit {
	padding: 17px 30px;
	border: 0;
	border-radius: 2px;
	background-color: var(--wp--preset--color--osa-green);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--body);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--wp--custom--transition);
}

.sierpe-form .wpcf7-submit:hover,
.sierpe-form .wpcf7-submit:focus-visible {
	background-color: var(--wp--preset--color--osa-green-dark);
}

/* --- Validation and response feedback ------------------------------------- */

.sierpe-form .wpcf7-not-valid {
	border-color: #C0392B;
}

.sierpe-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	color: #C0392B;
	font-size: 13.5px;
	font-weight: 500;
}

.sierpe-form .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 14px 16px;
	border: 1px solid rgba(6, 59, 92, 0.22);
	border-left-width: 3px;
	border-radius: 2px;
	background-color: var(--wp--preset--color--white);
	font-size: 15px;
	line-height: 1.5;
}

.sierpe-form form.sent .wpcf7-response-output {
	border-left-color: var(--wp--preset--color--osa-green);
}

.sierpe-form form.invalid .wpcf7-response-output,
.sierpe-form form.unaccepted .wpcf7-response-output,
.sierpe-form form.failed .wpcf7-response-output,
.sierpe-form form.spam .wpcf7-response-output {
	border-left-color: #C0392B;
}

.sierpe-form .wpcf7-spinner {
	margin: 0 0 0 14px;
}