/* Toverlandfinance block theme — supplementary styles
   Most styling is driven by theme.json. This file handles:
   - block style hooks (outline button, eyebrow paragraph, tvf-card group)
   - hover/transition states
   - mobile navigation overlay tuning
   - news card lift on hover
   - prose refinements for post-content
*/

/* === Buttons ===
   Why the !important: WordPress emits its colour preset classes
   (.has-plum-background-color / .has-cream-color) *with* !important. Any
   hover rule written without it silently loses the cascade — which is why
   the primary button appeared to have no hover state at all, and why the
   outline button's label vanished on hover (the fill won, the text colour
   did not). Both states below therefore match WP's own weight. */

.wp-block-button .wp-block-button__link {
	transition:
		background-color 180ms ease,
		color 180ms ease,
		border-color 180ms ease,
		box-shadow 180ms ease,
		transform 180ms ease;
}

/* --- Primary (solid navy) --- */
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--plum-deep) !important;
	color: var(--wp--preset--color--cream) !important;
	transform: translateY(-1px);
	box-shadow: 0 10px 22px -14px rgba(9, 47, 135, 0.55);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
	transform: translateY(0);
	box-shadow: none;
}

/* Teal variant keeps its own hover tint. */
.wp-block-button .wp-block-button__link.has-gold-background-color:hover,
.wp-block-button .wp-block-button__link.has-gold-background-color:focus-visible {
	background-color: var(--wp--preset--color--gold-soft) !important;
	color: var(--wp--preset--color--ink) !important;
}

/* Buttons sitting on the dark CTA / footer: invert instead of going darker. */
.has-ink-background-color .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.is-style-tvf-card-dark .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--gold) !important;
	color: var(--wp--preset--color--ink) !important;
}

/* --- Secondary (outline) --- */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent !important;
	color: var(--wp--preset--color--plum) !important;
	border: 1px solid var(--wp--preset--color--plum);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	/* fills navy — and the label now actually turns cream with it */
	background-color: var(--wp--preset--color--plum) !important;
	color: var(--wp--preset--color--cream) !important;
	border-color: var(--wp--preset--color--plum) !important;
	transform: translateY(-1px);
	box-shadow: 0 10px 22px -14px rgba(9, 47, 135, 0.45);
}
.wp-block-button.is-style-outline .wp-block-button__link:active {
	transform: translateY(0);
	box-shadow: none;
}
/* Outline on a dark background inverts to cream. */
.has-ink-background-color .wp-block-button.is-style-outline .wp-block-button__link,
.is-style-tvf-card-dark .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--cream) !important;
	border-color: rgba(244, 247, 251, 0.55);
}
.has-ink-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover,
.is-style-tvf-card-dark .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--cream) !important;
	color: var(--wp--preset--color--plum) !important;
	border-color: var(--wp--preset--color--cream) !important;
}

/* Keyboard focus ring — teal, consistent with the form fields. */
.wp-block-button .wp-block-button__link:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 3px rgba(36, 195, 185, 0.45);
}

.is-style-tvf-eyebrow {
	font-size: 0.75rem !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: var(--wp--preset--color--slate);
	margin-bottom: 0.75rem;
}

.is-style-tvf-card {
	background: var(--wp--preset--color--cream-2);
	border: 0.5px solid var(--wp--preset--color--linen);
	border-radius: 8px;
	padding: 1.5rem;
}
.is-style-tvf-card-dark {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--gold);
	border-radius: 14px;
	padding: 2rem;
}

/* ==========================================================================
   HERO BACKGROUND IMAGE
   The image URL comes from the --tvf-hero-image custom property, set inline
   by functions.php (Customizer → Toverlandfinance → Hero-afbeelding, or
   assets/img/hero.jpg, or the bundled SVG fallback).

   Applied to the homepage hero only, plus any block that opts in with the
   extra class `tvf-hero--image`. Inner-page heroes stay flat cream unless
   you add that class in the editor (Advanced → Additional CSS class(es)).

   A cream scrim runs left-to-right so the navy italic headline keeps its
   editorial contrast while the photo breathes on the right-hand side.
   ========================================================================== */
.home .tvf-hero,
.tvf-hero--image {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: min(76vh, 640px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.home .tvf-hero::before,
.tvf-hero--image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: var(--tvf-hero-image, none);
	background-size: cover;
	background-position: 68% center;
	background-repeat: no-repeat;
	/* Very light cool wash so photos of any temperature sit in the palette. */
	filter: saturate(0.92);
}

/* Scrim: solid cream under the text column, fading out over the artwork. */
.home .tvf-hero::after,
.tvf-hero--image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(
			100deg,
			var(--wp--preset--color--cream) 0%,
			var(--wp--preset--color--cream) 30%,
			rgba(244, 247, 251, 0.88) 46%,
			rgba(244, 247, 251, 0.45) 64%,
			rgba(244, 247, 251, 0.08) 84%,
			rgba(244, 247, 251, 0) 100%
		);
}

.home .tvf-hero > *,
.tvf-hero--image > * {
	position: relative;
	z-index: 2;
	width: 100%;
}

/* Opt-out helper if a page should keep the flat cream hero. */
.tvf-hero--plain::before,
.tvf-hero--plain::after { display: none !important; }

/* Compact hero variant (contact page) keeps a shorter frame. */
.tvf-hero--compact { min-height: 0; }

@media (max-width: 900px) {
	/* On narrow screens the columns stack, so the scrim flips to vertical:
	   image reads at the bottom, copy stays on near-solid cream at the top. */
	.home .tvf-hero,
	.tvf-hero--image {
		min-height: 0;
	}
	.home .tvf-hero::before,
	.tvf-hero--image::before {
		background-position: 62% 30%;
	}
	.home .tvf-hero::after,
	.tvf-hero--image::after {
		background:
			linear-gradient(
				180deg,
				var(--wp--preset--color--cream) 0%,
				rgba(244, 247, 251, 0.94) 46%,
				rgba(244, 247, 251, 0.72) 70%,
				rgba(244, 247, 251, 0.30) 100%
			);
	}
}

/* === Sticky header — universal fix ===
   The previous attempt failed because .tvf-header was nested inside a
   <header class="wp-block-template-part"> wrapper. Sticky elements stay
   stuck only within their containing block. The wrapper was only as tall as
   its content, so sticky had nowhere to actually stick.

   Fix: collapse the template-part wrapper out of the layout tree with
   display: contents. .tvf-header then becomes a direct child of
   .wp-site-blocks (full page height), giving sticky real room to work.
   The same rule works whether the inner element is named .tvf-header
   (old structure) or .tvf-sticky-header (new structure). */
.wp-site-blocks > header.wp-block-template-part {
	display: contents;
}

.tvf-header,
.tvf-sticky-header {
	position: sticky !important;
	top: 0;
	z-index: 50;
	background-color: var(--wp--preset--color--cream);
	transition: background-color 240ms ease, box-shadow 240ms ease;
	/* These reset the containing-block trap.
	   Any of transform/filter/backdrop-filter/perspective on the header
	   would make the fixed-positioned mobile overlay descendant get
	   contained by the header instead of the viewport. */
	transform: none !important;
	filter: none !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	perspective: none !important;
	will-change: auto !important;
}
.tvf-header.is-scrolled,
.tvf-sticky-header.is-scrolled {
	/* High-opacity solid background instead of backdrop-filter blur,
	   to avoid creating a containing block. */
	background-color: rgba(244, 247, 251, 0.97);
	box-shadow: 0 8px 24px -16px rgba(9, 47, 135, 0.22);
}

/* === Header row layout — works for old OR new markup === */
.tvf-header__inner {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 1rem;
	justify-content: space-between;
	flex-wrap: nowrap;
}
.tvf-header__inner > * { flex: 0 0 auto; min-width: 0; }
.tvf-header__inner .wp-block-navigation { flex: 1; }

/* === Topbar === */
.tvf-topbar p { margin: 0; }

/* === Navigation block — desktop styling === */
.wp-block-navigation .wp-block-navigation-item__content {
	padding-block: 6px;
	border-bottom: 1px solid transparent;
	transition: border-color 200ms ease;
}
.wp-block-navigation .wp-block-navigation-item:hover .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	border-bottom-color: var(--wp--preset--color--gold);
}
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item__content {
	border-bottom: 0;
}
.wp-block-navigation__submenu-container {
	border: 0.5px solid var(--wp--preset--color--linen) !important;
	border-radius: 8px;
	box-shadow: 0 18px 40px -20px rgba(9, 47, 135, 0.25);
	padding-block: 8px !important;
	min-width: 220px;
	background: var(--wp--preset--color--paper) !important;
}
.wp-block-navigation__submenu-icon { transition: transform 240ms ease; }
.wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-icon,
.wp-block-navigation-item.has-child[aria-expanded="true"] > .wp-block-navigation__submenu-icon {
	transform: rotate(180deg);
}

/* ==========================================================================
   MOBILE MENU — right-hand drawer

   Structure emitted by core/navigation when the overlay is open:

     .wp-block-navigation__responsive-container.is-menu-open   ← backdrop
       └ .wp-block-navigation__responsive-close                ← the panel
           └ .wp-block-navigation__responsive-dialog
               ├ button.wp-block-navigation__responsive-container-close
               └ .wp-block-navigation__responsive-container-content
                   └ ul.wp-block-navigation__container

   So the *outer* element becomes a dimmed full-screen backdrop and the
   `__responsive-close` wrapper becomes the actual sliding panel. That gives
   a real drawer with padding, a dimmed page behind it, and a tap-outside
   target — instead of an edge-to-edge sheet glued to the right edge.
   ========================================================================== */

/* --- Hamburger trigger --- */
.wp-block-navigation__responsive-container-open {
	padding: 8px !important;
	border-radius: 6px;
	transition: background 160ms ease;
}
.wp-block-navigation__responsive-container-open:hover {
	background: rgba(9, 47, 135, 0.06);
}
.wp-block-navigation__responsive-container-open svg {
	fill: var(--wp--preset--color--plum) !important;
	width: 26px;
	height: 26px;
}

/* --- Backdrop --- */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: rgba(6, 30, 87, 0.42) !important;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	padding: 0 !important;
	display: flex !important;
	flex-direction: row !important;
	justify-content: flex-end !important;
	align-items: stretch !important;
	animation: tvf-fade-in 200ms ease both;
}

/* --- Panel --- */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	width: min(86vw, 380px) !important;
	max-width: none !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background: var(--wp--preset--color--paper);
	border-left: 1px solid var(--wp--preset--color--linen);
	box-shadow: -24px 0 60px -30px rgba(6, 30, 87, 0.55);
	overflow-y: auto;
	overscroll-behavior: contain;
	animation: tvf-drawer-in 280ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	height: 100%;
	padding: 1.25rem 1.5rem 2.5rem;
	/* clear the fixed header + the notch on iOS */
	padding-top: calc(1.25rem + env(safe-area-inset-top, 0px));
	padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px));
}

/* --- Close button --- */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: relative !important;
	top: auto !important;
	right: auto !important;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 0.75rem auto;
	width: 40px;
	height: 40px;
	padding: 0 !important;
	border-radius: 50%;
	background: var(--wp--preset--color--cream);
	transition: background 160ms ease;
}
.wp-block-navigation__responsive-container-close:hover {
	background: rgba(9, 47, 135, 0.10);
}
.wp-block-navigation__responsive-container-close svg {
	fill: var(--wp--preset--color--plum) !important;
	width: 22px;
	height: 22px;
}

/* --- Menu list --- */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
	align-items: stretch !important;
	/* Core ships `padding-top: calc(2rem + 24px)` here to clear its
	   absolutely-positioned close button. Ours is in the flow with its own
	   margin, so that 56px is dead space — hence the big gap at the top. */
	padding-top: 0 !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%;
	gap: 0 !important;
	align-items: stretch !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	font-size: 1.0625rem;
	line-height: 1.3;
	padding: 15px 0;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	border-bottom: 1px solid var(--wp--preset--color--linen);
	border-top: 0;
	text-decoration: none;
	transition: color 160ms ease, padding-left 200ms ease;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--plum);
	padding-left: 6px;
}
.wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--plum);
	box-shadow: inset 3px 0 0 0 var(--wp--preset--color--gold);
	padding-left: 12px;
}

/* Submenus: indented, lighter, no heavy dividers */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	border: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	padding: 0 0 6px 0 !important;
	min-width: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 0.9375rem;
	font-weight: 400;
	color: var(--wp--preset--color--slate);
	padding: 10px 0 10px 1rem;
	border-bottom: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
	padding: 8px;
	margin-left: auto;
}

@keyframes tvf-drawer-in {
	from { transform: translateX(100%); }
	to   { transform: translateX(0); }
}
@keyframes tvf-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* === Responsive breakpoint — force overlay at 960px ===
   WordPress's Navigation block hardcodes 599.98px as its breakpoint.
   For the long Dutch menu items ("Obligatiestructuur" etc.) we need 960px.
   These rules need higher specificity than WP's defaults, hence the
   .wp-block-navigation prefix and !important. */
@media (max-width: 960px) {
	/* Hide the inline nav container (the one shown above 600px by WP default) */
	.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open):not(.has-modal-open) {
		display: none !important;
	}
	/* Show the hamburger */
	.wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}
	/* When the user opens the menu, force it into the drawer overlay mode.
	   Layout details (backdrop + sliding panel) live in the mobile menu
	   section above; here we only guarantee it is pinned to the viewport. */
	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open,
	.wp-block-navigation .wp-block-navigation__responsive-container.has-modal-open {
		position: fixed !important;
		inset: 0 !important;
		z-index: 100000 !important;
		padding: 0 !important;
		overflow: hidden !important;
	}

	/* Layout reorder for mobile: Logo | Inschrijven | Hamburger.
	   Works whether the markup is the old structure
	   (.tvf-header > .is-layout-flex > children) or the new
	   (.tvf-header__inner > children). */
	.tvf-header .is-layout-flex > .wp-block-site-logo,
	.tvf-header__inner > .wp-block-site-logo,
	.tvf-sticky-header .is-layout-flex > .wp-block-site-logo {
		order: 1;
	}
	.tvf-header .is-layout-flex > .wp-block-buttons,
	.tvf-header__inner > .wp-block-buttons,
	.tvf-sticky-header .is-layout-flex > .wp-block-buttons {
		order: 2;
		margin-left: auto;
		margin-right: 0.5rem;
	}
	.tvf-header .is-layout-flex > .wp-block-navigation,
	.tvf-header__inner > .wp-block-navigation,
	.tvf-sticky-header .is-layout-flex > .wp-block-navigation {
		order: 3;
		flex: 0 0 auto;
		margin-left: 0;
	}
}

@media (min-width: 961px) {
	/* Desktop: hide hamburger, force inline nav visible */
	.wp-block-navigation .wp-block-navigation__responsive-container-open {
		display: none !important;
	}
	.wp-block-navigation .wp-block-navigation__responsive-container {
		display: block !important;
		position: relative !important;
		width: 100% !important;
		z-index: auto !important;
		background-color: transparent !important;
		padding: 0 !important;
		overflow: visible !important;
	}
}

/* Body scroll lock when overlay menu is open */
body.has-modal-open,
body.is-menu-open { overflow: hidden; }

/* === News card lift === */
.tvf-news-card,
.wp-block-query .wp-block-post-template > li {
	transition: transform 220ms ease, box-shadow 220ms ease;
}
.tvf-news-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px -16px rgba(9, 47, 135, 0.25);
}

/* === Feature list (Obligatie attributes) === */
.tvf-feature-list { list-style: none; padding: 0; }
.tvf-feature-list li {
	display: flex;
	justify-content: space-between;
	padding: 14px 0;
	border-bottom: 0.5px solid var(--wp--preset--color--linen);
	font-size: 0.8125rem;
}
.tvf-feature-list li strong {
	color: var(--wp--preset--color--slate);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 500;
}

/* === Prose (post-content) === */
.entry-content h2, .entry-content h3 {
	margin-top: 2rem;
	margin-bottom: 0.75rem;
}
.entry-content p {
	line-height: 1.7;
}
.entry-content a {
	font-weight: 500;
}

/* === Wordmark === */
.tvf-wordmark { display: inline-flex; text-decoration: none; }
.tvf-wordmark svg { display: block; }

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

/* === Mobile breakpoints === */
@media (max-width: 960px) {
	.tvf-topbar p:nth-child(2) { display: none; }
}
@media (max-width: 720px) {
	.tvf-topbar p:nth-child(1) { display: none; }
	.tvf-feature-list li { flex-direction: column; gap: 4px; }
	.tvf-header__inner { gap: 0.5rem; }
	.tvf-header__inner .tvf-header__cta .wp-block-button__link {
		padding: 6px 12px !important;
		font-size: 0.75rem !important;
	}
}


/* ==========================================================================
   Timeline (used on the /toverland/ park history page)
   ========================================================================== */
.tvf-timeline { position: relative; }
.tvf-timeline__entry { position: relative; padding-left: 0; }
.tvf-timeline__entry .wp-block-column:last-child {
	position: relative;
	padding-left: 0;
}
/* Connecting rule + dot — drawn on the content column's left edge */
.tvf-timeline__entry .wp-block-column:last-child::before {
	content: "";
	position: absolute;
	left: -1rem;
	top: 0;
	bottom: -2rem;
	width: 1px;
	background: var(--wp--preset--color--linen);
}
.tvf-timeline__entry .wp-block-column:last-child::after {
	content: "";
	position: absolute;
	left: -1.32rem;
	top: 0.65rem;
	width: 9px;
	height: 9px;
	background: var(--wp--preset--color--gold);
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--cream);
	box-shadow: 0 0 0 1px var(--wp--preset--color--gold);
}
.tvf-timeline__entry--last .wp-block-column:last-child::before { display: none; }
.tvf-timeline__entry--last .wp-block-column:last-child::after {
	background: var(--wp--preset--color--plum);
	box-shadow: 0 0 0 1px var(--wp--preset--color--plum);
}

@media (max-width: 720px) {
	.tvf-timeline__entry .wp-block-column:last-child::before,
	.tvf-timeline__entry .wp-block-column:last-child::after { display: none; }
}

/* ==========================================================================
   Spec table (used on Participeren page)
   ========================================================================== */
.tvf-spec-table table { width: 100%; border-collapse: collapse; }
.tvf-spec-table th,
.tvf-spec-table td {
	text-align: left;
	padding: 14px 1.5rem;
	border-bottom: 0.5px solid var(--wp--preset--color--linen);
	font-size: 0.875rem;
}
.tvf-spec-table tr:last-child th,
.tvf-spec-table tr:last-child td { border-bottom: 0; }
.tvf-spec-table th {
	width: 38%;
	font-weight: 400;
	font-size: 0.75rem;
	color: var(--wp--preset--color--slate);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.tvf-spec-table td {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-feature-settings: "tnum";
}
.tvf-spec-table tr:nth-child(odd) th,
.tvf-spec-table tr:nth-child(odd) td { background: var(--wp--preset--color--cream-2); }

/* ==========================================================================
   FAQ details/summary (used on Contact page)
   ========================================================================== */
.tvf-details {
	border-bottom: 0.5px solid var(--wp--preset--color--linen);
	padding: 0.75rem 0;
}
.tvf-details:last-of-type { border-bottom: 0; }
.tvf-details summary {
	cursor: pointer;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	list-style: none;
	padding-right: 1.5rem;
	position: relative;
}
.tvf-details summary::-webkit-details-marker { display: none; }
.tvf-details summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: -2px;
	color: var(--wp--preset--color--gold);
	font-size: 1.25rem;
	line-height: 1;
	transition: transform 200ms ease;
}
.tvf-details[open] summary::after { content: "−"; }
.tvf-details p {
	margin: 0.5rem 0 0;
	color: var(--wp--preset--color--slate);
	line-height: 1.6;
}

/* ==========================================================================
   FORM STYLING — works for Contact Form 7, Gravity Forms, WPForms,
   and core Gutenberg form blocks. One ruleset to rule them all.
   ========================================================================== */

/* Common selectors across CF7 / Gravity / WPForms / native */
.wpcf7-form,
.gform_wrapper form,
.wpforms-form,
.wp-block-form,
form[class*="form"] {
	font-family: var(--wp--preset--font-family--sans);
	max-width: 100%;
}

/* Labels */
.wpcf7-form label,
.gform_wrapper .gfield label,
.wpforms-field-label,
.wp-block-form label,
form[class*="form"] label {
	display: block;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--slate);
	margin-bottom: 6px;
	text-transform: uppercase;
}

/* Required asterisk */
.wpcf7-form .required,
.gform_required_legend,
.wpcf7-not-valid-tip { color: var(--wp--preset--color--loss); }

/* Inputs, textareas, selects */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea,
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper select,
.gform_wrapper textarea,
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form input[type="tel"],
.wpforms-form input[type="number"],
.wpforms-form select,
.wpforms-form textarea,
.wp-block-form input[type="text"],
.wp-block-form input[type="email"],
.wp-block-form textarea,
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form input[type="number"],
form input[type="url"],
form input[type="date"],
form select,
form textarea {
	width: 100%;
	padding: 11px 14px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--preset--color--linen-2, #C5D0DC);
	border-radius: 4px;
	transition: border-color 160ms ease, box-shadow 160ms ease;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* Select chevron — re-add it after removing the native appearance */
.wpcf7-form select,
.gform_wrapper select,
.wpforms-form select,
form select {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235A6679' stroke-width='1.6'%3E%3Cpath d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 14px;
	padding-right: 36px;
}

/* Textarea */
.wpcf7-form textarea,
.gform_wrapper textarea,
.wpforms-form textarea,
.wp-block-form textarea,
form textarea {
	min-height: 120px;
	line-height: 1.5;
	resize: vertical;
}

/* Focus state — navy border + teal glow */
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus,
.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus,
.wpforms-form input:focus,
.wpforms-form select:focus,
.wpforms-form textarea:focus,
.wp-block-form input:focus,
.wp-block-form textarea:focus,
form input:focus,
form select:focus,
form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--plum);
	box-shadow: 0 0 0 3px rgba(36, 195, 185, 0.25);
}

/* Invalid state */
.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid,
.wpcf7-form select.wpcf7-not-valid,
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select,
.wpforms-error,
input:invalid:not(:placeholder-shown) {
	border-color: var(--wp--preset--color--loss);
}

/* Validation messages */
.wpcf7-not-valid-tip,
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message,
.wpforms-error,
.wpforms-error-container {
	color: var(--wp--preset--color--loss);
	font-size: 0.8125rem;
	margin-top: 4px;
	font-style: italic;
}

/* Checkboxes & radios */
.wpcf7-list-item label,
.gform_wrapper .gfield_checkbox label,
.gform_wrapper .gfield_radio label,
.wpforms-field-checkbox label,
.wpforms-field-radio label {
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.875rem;
	color: var(--wp--preset--color--ink);
	font-weight: 400;
}
.wpcf7-form input[type="checkbox"],
.wpcf7-form input[type="radio"],
.gform_wrapper input[type="checkbox"],
.gform_wrapper input[type="radio"],
.wpforms-form input[type="checkbox"],
.wpforms-form input[type="radio"],
form input[type="checkbox"],
form input[type="radio"] {
	width: 18px;
	height: 18px;
	margin-right: 8px;
	accent-color: var(--wp--preset--color--plum);
	vertical-align: middle;
}

/* Submit buttons — match the theme's primary navy button */
.wpcf7-form input[type="submit"],
.wpcf7-submit,
.gform_wrapper input[type="submit"],
.gform_button,
.wpforms-submit,
.wp-block-form button[type="submit"],
form button[type="submit"],
form input[type="submit"] {
	background: var(--wp--preset--color--plum);
	color: var(--wp--preset--color--cream);
	border: 0;
	padding: 13px 28px;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	border-radius: 4px;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background 180ms ease, transform 120ms ease;
}
.wpcf7-form input[type="submit"]:hover,
.wpcf7-submit:hover,
.gform_wrapper input[type="submit"]:hover,
.gform_button:hover,
.wpforms-submit:hover,
.wp-block-form button[type="submit"]:hover,
form button[type="submit"]:hover,
form input[type="submit"]:hover {
	background: var(--wp--preset--color--plum-deep);
}
.wpcf7-form input[type="submit"]:focus-visible,
form button[type="submit"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(36, 195, 185, 0.4);
}

/* CF7 spacing between fields */
.wpcf7-form p { margin: 0 0 1.25rem; }

/* Gravity Forms layout */
.gform_wrapper .gform_fields {
	display: grid;
	gap: 1.25rem;
}
.gform_wrapper .gfield { padding: 0 !important; }

/* CF7 response message */
.wpcf7-response-output {
	border: 0 !important;
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
	border-left: 3px solid var(--wp--preset--color--plum);
	padding: 12px 16px !important;
	font-size: 0.875rem;
	margin: 1.5rem 0 0 !important;
	border-radius: 0 4px 4px 0;
}
.wpcf7-mail-sent-ok ~ .wpcf7-response-output,
.wpcf7form .wpcf7-mail-sent-ok {
	border-left-color: var(--wp--preset--color--gain) !important;
	background: #E6F4ED;
}
.wpcf7-mail-sent-ng ~ .wpcf7-response-output {
	border-left-color: var(--wp--preset--color--loss) !important;
	background: #FBE9E9;
}

/* Two-column form rows */
.tvf-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}
@media (max-width: 720px) {
	.tvf-form-row { grid-template-columns: 1fr; }
}

/* Native HTML fieldset/legend (for plain forms) */
.tvf-contact fieldset {
	border: 0;
	padding: 0;
	margin: 0 0 1.5rem;
	border-bottom: 0.5px solid var(--wp--preset--color--linen);
	padding-bottom: 1.25rem;
}
.tvf-contact fieldset:last-of-type { border-bottom: 0; }
.tvf-contact legend {
	padding: 0 0 0.75rem;
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--slate);
	text-transform: uppercase;
}

/* Helper text under inputs */
.wpcf7-form .tvf-fine,
.gform_description,
.wpforms-field-description {
	font-size: 0.75rem;
	color: var(--wp--preset--color--slate);
	font-style: italic;
	margin-top: 4px;
}