/*
Theme Name: Eventward
Theme URI: https://eventward.omniswp.com
Author: OmnisWP
Author URI: https://omniswp.com
Description: The Eventward product and demo site, in the OmnisWP style. Every brand decision lives in theme.json and every section is an editable pattern.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eventward-site
Tags: full-site-editing, block-patterns, blog, business, one-column, accessibility-ready, custom-colors, custom-logo, wide-blocks
*/

/* -------------------------------------------------------------------------
   This file holds only mechanism CSS - behaviour that block supports cannot
   express (sticky header, the hero grid-paper texture, the FAQ +/- marker,
   Gravity Forms integration). Every colour, size and space below resolves to
   a theme.json preset variable, so re-skinning a fork means editing
   theme.json and nothing else.
   ---------------------------------------------------------------------- */

/* --- Accessibility ------------------------------------------------------ */

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 12px 22px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-weight: 600;
	text-decoration: none;
}

.skip-link:focus {
	left: 8px;
	top: 8px;
}

:where(a, button, input, textarea, select, summary, .wp-block-navigation-item__content):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

/* Dark bands need the brighter logo orange for a visible focus ring. */
.has-contrast-background-color :where(a, button, input, textarea, summary):focus-visible {
	outline-color: var(--wp--preset--color--brand);
}

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

html {
	scroll-behavior: smooth;

	/* Lets the hero rings bleed past their column without producing a
	   horizontal scrollbar. `clip` rather than `hidden` on purpose: `hidden`
	   makes this a scroll container and silently kills position: sticky on
	   the header. */
	overflow-x: clip;
}

/* Sticky header must not cover the target of an in-page anchor link. */
:target {
	scroll-margin-top: 96px;
}

/* --- Section stacking ---------------------------------------------------
   WordPress applies --wp--style--block-gap as margin-block-start between
   siblings at two levels, and both show the page background as a stripe
   between coloured bands, breaking the design's colour blocking:

     1. .wp-site-blocks - between header, main and footer.
     2. post-content    - between the stacked page sections.

   The shell (1) is always flush: vertical rhythm comes from each section's
   own padding, never from a gap between them. Inside the content (2) the gap
   is collapsed only where two full-width sections meet, so ordinary blocks
   the client inserts between sections still get their normal spacing.
   ---------------------------------------------------------------------- */

.wp-site-blocks > * + * {
	margin-block-start: 0;
}

.wp-block-post-content > .alignfull + .alignfull,
.block-editor-block-list__layout > .alignfull + .alignfull {
	margin-block-start: 0;
}

/* --- Header -------------------------------------------------------------
   The whole header template part is the sticky element. It has to be: a
   sticky element only sticks within its parent, and an inner group's parent
   is the <header> wrapper itself, which is exactly as tall as its content, so
   a sticky class placed on anything inside the part never engages.

   An announcement bar at the top of the part should scroll away while the
   bar below it stays pinned. That is done with a negative `top` equal to the
   announcement's fixed height: the header sticks once the announcement has
   scrolled out of view. The selector targets the wrapper rather than a class
   on the template-part reference, so templates supplied by plugins (which
   reference the part without our class) get the same behaviour.
   ---------------------------------------------------------------------- */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 40;
}

.wp-site-blocks > header.wp-block-template-part:has(.evs-announce) {
	top: calc(-1 * var(--wp--custom--announce-height));
}

.evs-announce {
	display: flex;
	align-items: center;
	justify-content: center;
	height: var(--wp--custom--announce-height);
	overflow: hidden;
}

.evs-announce p {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.evs-announce a {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.evs-bar {
	background: color-mix(in srgb, var(--wp--preset--color--base) 90%, transparent);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

@supports (backdrop-filter: blur(6px)) {
	.evs-bar {
		backdrop-filter: saturate(180%) blur(14px);
	}

	/* backdrop-filter makes the bar a containing block for any
	   position: fixed descendant. Core's mobile menu overlay is
	   `position: fixed; inset: 0`, so with the blur applied it gets confined
	   to the bar instead of covering the viewport: the first link shows and
	   the rest paint underneath the page content, invisible and unclickable.
	   Drop the blur while the menu is open. */
	.evs-bar:has(.wp-block-navigation__responsive-container.is-menu-open) {
		backdrop-filter: none;
	}
}

.evs-logo img {
	height: auto;
	max-height: 38px;
	width: auto;
}

/* Nav links sit in ink, not link-rust, until hovered. */
.evs-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
	text-decoration: none;
}

.evs-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* The phone number reads as a mono utility, not a nav item. */
.evs-phone a,
.evs-phone .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--ink-muted);
	letter-spacing: 0.02em;
}

/* --- Navigation submenu -------------------------------------------------
   Core's default submenu is a rounded white box with its own borders. Square
   it off and put it in the theme's hairline language so the dropdown looks
   like part of the site rather than part of WordPress.
   ---------------------------------------------------------------------- */

.evs-header .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	box-shadow: var(--wp--custom--shadow--card);
	min-width: 260px;
	padding: var(--wp--preset--spacing--20) 0;
}

.evs-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
	padding: 0.5rem var(--wp--preset--spacing--50);
	text-decoration: none;
	width: 100%;
}

.evs-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

/* The parent item's chevron should not drift from its label. */
.evs-header .wp-block-navigation-submenu__toggle {
	padding-right: 0;
}

/* --- Hero grid-paper texture -------------------------------------------- */

.evs-gridpaper {
	background-image:
		linear-gradient(var(--wp--preset--color--line) 1px, transparent 1px),
		linear-gradient(90deg, var(--wp--preset--color--line) 1px, transparent 1px);
	background-size: 64px 64px;
	background-position: center top;
}

/* --- Hero mark animation ------------------------------------------------
   The lifebuoy rebuilt as geometry rather than an image: four sonar rings
   pulsing outward, a slowly rotating dashed orbit, and the ring itself drawn
   from four clipped quadrants. It is decorative, so it is aria-hidden and it
   stops entirely under prefers-reduced-motion (handled globally above).
   ---------------------------------------------------------------------- */

@keyframes evs-sonar {
	0%   { transform: scale(0.34); opacity: 0; }
	12%  { opacity: 0.85; }
	100% { transform: scale(1.6); opacity: 0; }
}

@keyframes evs-spin {
	to { transform: rotate(360deg); }
}

.evs-heromark {
	--evs-sonar: 400px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(320px, 46vh, 420px);

	/* Deliberately NOT clipped. The rings expand to 1.6x, which is wider than
	   the column they sit in, and the whole point is that they carry past its
	   edge. Page-level containment is handled once on <html> below. */
	overflow: visible;
}

.evs-heromark__sonar {
	position: absolute;
	width: var(--evs-sonar);
	height: var(--evs-sonar);
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 50%;
	opacity: 0;
	animation: evs-sonar 5.2s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.evs-heromark__sonar:nth-child(2) { animation-delay: 1.3s; }
.evs-heromark__sonar:nth-child(3) { animation-delay: 2.6s; }
.evs-heromark__sonar:nth-child(4) { animation-delay: 3.9s; }

.evs-heromark__core {
	position: relative;
	width: 196px;
	height: 196px;
}

.evs-heromark__orbit {
	position: absolute;
	inset: -34px;
	border: 1px dashed var(--wp--custom--hairline--orbit);
	border-radius: 50%;
	animation: evs-spin 24s linear infinite;
}

.evs-heromark__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	overflow: hidden;
}

/* Each quadrant is a full ring clipped to a wedge, which is what gives the
   buoy its four painted segments without four separate arc paths. */
.evs-heromark__seg {
	position: absolute;
	inset: 0;
	border: 13px solid var(--wp--preset--color--primary);
	border-radius: 50%;
	clip-path: polygon(50% 50%, 100% 13%, 100% 87%);
}

.evs-heromark__seg:nth-child(1) { transform: rotate(45deg); }
.evs-heromark__seg:nth-child(2) { transform: rotate(135deg); }
.evs-heromark__seg:nth-child(3) { transform: rotate(225deg); }
.evs-heromark__seg:nth-child(4) { transform: rotate(315deg); }

.evs-heromark__hub {
	position: absolute;
	inset: 44px;
	background-color: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--contrast);
	border-radius: 50%;
}

@media (max-width: 600px) {
	.evs-heromark { --evs-sonar: 300px; }
	.evs-heromark__core { width: 150px; height: 150px; }
	.evs-heromark__hub { inset: 34px; }
	.evs-heromark__seg { border-width: 10px; }
}

/* --- Hairline card grids ------------------------------------------------
   The grid container carries the hairline colour and a 1px gap, so the gaps
   themselves draw the rules. Children just need their own background.
   ---------------------------------------------------------------------- */

.evs-hairline-grid {
	border: 1px solid var(--wp--preset--color--line);
	padding: 0;
}

.evs-hairline-grid.has-ink-line-background-color {
	border-color: var(--wp--preset--color--ink-line);
}

/* Cards lift slightly on hover where the design calls for it.
   !important is required throughout the hover states below: WordPress emits
   its preset utilities (.has-*-color, .has-*-background-color) with
   !important, so any hover override of a preset-coloured element loses
   without it. */
.evs-card {
	transition: background-color 120ms ease;
}

.evs-card:hover {
	background-color: var(--wp--custom--hover--card) !important;
}

/* --- Registered block styles -------------------------------------------- */

/* core/list - "Spec list" */
.wp-block-list.is-style-spec {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.45;
	color: var(--wp--preset--color--ink-muted);
}

.has-contrast-background-color .wp-block-list.is-style-spec {
	color: var(--wp--preset--color--on-dark);
}

/* core/group - "Numbered step" */
.wp-block-group.is-style-step {
	border-top: 2px solid var(--wp--preset--color--contrast);
	padding-top: 22px;
}

/* --- Comparison table ---------------------------------------------------
   core/table with the registered "Comparison table" block style. Using a real
   table keeps it semantic and lets the client edit it like a spreadsheet.
   ---------------------------------------------------------------------- */

.wp-block-table.is-style-compare {
	margin: 0;
}

.wp-block-table.is-style-compare table {
	border-collapse: collapse;
	width: 100%;
	border-top: 1px solid var(--wp--preset--color--contrast);
}

.wp-block-table.is-style-compare thead {
	/* Core draws a 3px rule under the head. The design puts the single dark
	   rule on TOP of the whole block instead, with hairlines between rows. */
	border-bottom: 0;
}

.wp-block-table.is-style-compare :where(th, td) {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	text-align: left;
	vertical-align: baseline;
}

.wp-block-table.is-style-compare thead th {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 400;
	letter-spacing: var(--wp--custom--letter-spacing--mono);
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	padding: 20px 0;
}

.wp-block-table.is-style-compare thead th:last-child {
	color: var(--wp--preset--color--primary);
}

.wp-block-table.is-style-compare tbody td {
	padding: 22px 0;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--ink-muted);
}

.wp-block-table.is-style-compare tbody td:first-child {
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
	width: 210px;
}

.wp-block-table.is-style-compare tbody td:last-child {
	color: var(--wp--preset--color--contrast);
}

.wp-block-table.is-style-compare :where(th, td) + :where(th, td) {
	padding-left: clamp(14px, 2vw, 32px);
}

@media (max-width: 600px) {
	.wp-block-table.is-style-compare tbody td:first-child {
		width: auto;
	}
	.wp-block-table.is-style-compare :where(th, td) {
		font-size: var(--wp--preset--font-size--small);
	}
}

/* --- FAQ (core/details) ------------------------------------------------- */

.evs-faq .wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 24px 0;
}

.evs-faq .wp-block-details summary {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	list-style: none;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--card-title);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.evs-faq .wp-block-details summary::-webkit-details-marker,
.evs-faq .wp-block-details summary::marker {
	display: none;
	content: "";
}

.evs-faq .wp-block-details summary::after {
	content: "+";
	font-family: var(--wp--preset--font-family--mono);
	font-size: 20px;
	line-height: 1;
	color: var(--wp--preset--color--primary);
	flex: none;
}

.evs-faq .wp-block-details[open] summary::after {
	content: "\2212"; /* minus */
}

.evs-faq .wp-block-details > *:not(summary) {
	margin-top: 14px;
	max-width: 70ch;
	color: var(--wp--preset--color--ink-soft);
	line-height: var(--wp--custom--line-height--relaxed);
}

/* --- Card links ---------------------------------------------------------
   A linked card title alone is not an obvious affordance, so cards that lead
   somewhere also carry a mono link. The whole card lightens on hover.
   ---------------------------------------------------------------------- */

.evs-card h3 a {
	color: inherit;
	text-decoration: none;
}

.evs-card:hover h3 a {
	color: var(--wp--preset--color--primary);
}

.evs-cardlink a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.evs-card:hover .evs-cardlink a {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* --- Link index ---------------------------------------------------------
   The industries hub is a long list of links. A hairline-ruled grid reads as
   an index rather than as navigation, and stays scannable at 40+ entries.
   ---------------------------------------------------------------------- */

.evs-index__item {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 14px 0;
}

.evs-index__item a {
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
	text-decoration: none;
}

.evs-index__item a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* --- Measure ------------------------------------------------------------
   The design constrains individual headings and paragraphs by character
   count rather than by column. Block supports have no max-width control, so
   these are exposed as utility classes - pick one in the block's Advanced >
   Additional CSS class field.
   ---------------------------------------------------------------------- */

:where(h1, h2, h3, h4) {
	text-wrap: balance;
}

:where(p) {
	text-wrap: pretty;
}

/* Slightly recede a label against a saturated band. */
.evs-dim {
	opacity: 0.72;
}

/* A text link that reads as a call to action without being a button. */
.evs-underline a {
	border-bottom: 2px solid var(--wp--preset--color--primary);
	padding-bottom: 4px;
	text-decoration: none;
}

.evs-underline a:hover {
	border-bottom-color: var(--wp--preset--color--primary-deep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.evs-measure-13 { max-width: 13ch; }
.evs-measure-16 { max-width: 16ch; }
.evs-measure-18 { max-width: 18ch; }
.evs-measure-20 { max-width: 20ch; }
.evs-measure-22 { max-width: 22ch; }
.evs-measure-46 { max-width: 46ch; }
.evs-measure-52 { max-width: 52ch; }
.evs-measure-58 { max-width: 58ch; }
.evs-measure-60 { max-width: 60ch; }
.evs-measure-70 { max-width: 70ch; }

/* --- Media -------------------------------------------------------------- */

/* Portraits fill their column but must not dictate the section's height. The
   design has them stretch to the copy, not the other way round. Both are shot
   with the head about a tenth of the way down, so the crop is biased upward
   to keep the face in frame at every viewport. */
.evs-hero-media {
	height: 100%;
}

/* Qualified with .wp-block-image: core's own `.wp-block-image img` rule ties
   a bare `.evs-hero-media img` on specificity and wins on source order, so the
   height silently falls back to the image's natural ratio. */
.wp-block-image.evs-hero-media img {
	height: clamp(340px, 58vh, 620px);
	object-position: 50% 28%;
}

.wp-block-image.evs-about-media img {
	height: clamp(380px, 62vh, 660px);
	object-position: 50% 16%;
}

.evs-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Buttons ------------------------------------------------------------
   Core's is-style-outline sets its own padding (0.667em) at a specificity
   that beats theme.json, so an outline button renders ~10px shorter than a
   filled one sitting next to it. Restore the theme.json rhythm on both, then
   add the design's hover states - the filled ones deepen, the outline ones
   fill in.
   ---------------------------------------------------------------------- */

.wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link {
	padding-top: 1rem;
	padding-bottom: 1rem;
	padding-left: 1.75rem;
	padding-right: 1.75rem;
}

.wp-block-button__link {
	transition:
		background-color 120ms ease,
		border-color 120ms ease,
		color 120ms ease;
}

/* Outline buttons fill with ink on hover.
   The text colour needs !important: WordPress emits its preset colour
   utilities (.has-contrast-color) with !important, so a plain declaration
   here loses and the label stays ink-on-ink - invisible. */
.wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base) !important;
}

/* The header CTA is already ink, so it fills rust instead. */
.evs-header .wp-block-button__link:hover,
.evs-header .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--primary) !important;
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base) !important;
}

/* On the rust band: the ink button deepens to true black, and the outline
   one veils rather than filling - an ink fill would fight the band. */
#audit .wp-block-button__link.has-contrast-background-color:hover,
#audit .wp-block-button__link.has-contrast-background-color:focus-visible {
	background-color: var(--wp--custom--hover--ink-deep) !important;
	border-color: var(--wp--custom--hover--ink-deep);
}

#audit .wp-block-button.is-style-outline > .wp-block-button__link:hover,
#audit .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
	background-color: var(--wp--custom--hover--veil) !important;
	border-color: var(--wp--preset--color--shell);
	color: var(--wp--preset--color--shell) !important;
}

/* --- Gravity Forms -----------------------------------------------------
   GF 2.9 renders with the "Orbital" theme, which is driven by a documented
   CSS custom-property palette rather than by flat classes. Remapping those
   variables onto the theme.json presets is the upgrade-safe way to restyle
   it - GF can change its markup without breaking this. The explicit rules
   underneath only cover typography and the few things the palette does not
   reach.
   ---------------------------------------------------------------------- */

.evs-form .gform_wrapper.gform-theme,
.evs-form .gform_wrapper.gform-theme--orbital {
	/* Accent - buttons, active states. */
	--gf-color-primary: var(--wp--preset--color--primary);
	--gf-color-primary-rgb: 184, 65, 14;
	--gf-color-primary-contrast: var(--wp--preset--color--shell);
	--gf-color-primary-contrast-rgb: 255, 246, 241;
	--gf-color-primary-darker: var(--wp--preset--color--primary-deep);
	--gf-color-primary-lighter: var(--wp--preset--color--brand);

	/* Inside controls - input wells. */
	--gf-color-in-ctrl: var(--wp--preset--color--ink-raised);
	--gf-color-in-ctrl-rgb: 27, 25, 23;
	--gf-color-in-ctrl-contrast: var(--wp--preset--color--base);
	--gf-color-in-ctrl-contrast-rgb: 247, 245, 242;
	--gf-color-in-ctrl-darker: var(--wp--preset--color--contrast);
	--gf-color-in-ctrl-lighter: var(--wp--preset--color--ink-raised);
	--gf-color-in-ctrl-light: var(--wp--preset--color--ink-line);
	--gf-color-in-ctrl-light-darker: var(--wp--preset--color--ink-line);
	--gf-color-in-ctrl-light-lighter: var(--wp--preset--color--ink-line);
	--gf-color-in-ctrl-dark: var(--wp--preset--color--on-dark-mute);
	--gf-color-in-ctrl-dark-darker: var(--wp--preset--color--on-dark);
	--gf-color-in-ctrl-dark-lighter: var(--wp--preset--color--on-dark-mute);
	--gf-color-in-ctrl-primary: var(--wp--preset--color--brand);
	--gf-color-in-ctrl-primary-contrast: var(--wp--preset--color--shell);
	--gf-color-in-ctrl-primary-darker: var(--wp--preset--color--primary-deep);

	/* Outside controls - labels, descriptions, rules. */
	--gf-color-out-ctrl: var(--wp--preset--color--contrast);
	--gf-color-out-ctrl-contrast: var(--wp--preset--color--base);
	--gf-color-out-ctrl-dark: var(--wp--preset--color--on-dark-mute);
	--gf-color-out-ctrl-dark-darker: var(--wp--preset--color--base);
	--gf-color-out-ctrl-dark-lighter: var(--wp--preset--color--on-dark-mute);
	--gf-color-out-ctrl-light: var(--wp--preset--color--ink-line);
	--gf-color-out-ctrl-light-darker: var(--wp--preset--color--ink-line);
	--gf-color-out-ctrl-light-lighter: var(--wp--preset--color--ink-line);

	/* Validation reads in the logo orange, which clears AA on the dark band. */
	--gf-color-danger: var(--wp--preset--color--brand);
	--gf-color-danger-contrast: var(--wp--preset--color--contrast);
	--gf-color-danger-darker: var(--wp--preset--color--primary-deep);
	--gf-color-danger-lighter: var(--wp--preset--color--brand);

	/* Button controls read from their own --gf-ctrl-btn-* family. */
	--gf-ctrl-btn-bg-color-primary: var(--wp--preset--color--primary);
	--gf-ctrl-btn-bg-color-hover-primary: var(--wp--preset--color--brand);
	--gf-ctrl-btn-bg-color-focus-primary: var(--wp--preset--color--brand);
	--gf-ctrl-btn-color-primary: var(--wp--preset--color--shell);
	--gf-ctrl-btn-border-color-primary: var(--wp--preset--color--primary);
	--gf-ctrl-btn-border-color-hover-primary: var(--wp--preset--color--brand);

	/* Square corners, matching every other control in the design. */
	--gf-ctrl-radius: 0;
	--gf-ctrl-btn-radius: 0;
	--gf-ctrl-checkbox-radius: 0;
	--gf-field-gap-y: 1.125rem;
	--gf-field-gap-x: 1.125rem;
	--gf-form-gap-y: 1.125rem;
}

/* Labels take the mono eyebrow treatment used everywhere else. */
.evs-form .gform_wrapper .gfield_label,
.evs-form .gform_wrapper .gform-field-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 400;
	letter-spacing: var(--wp--custom--letter-spacing--mono);
	text-transform: uppercase;
	color: var(--wp--preset--color--on-dark-mute);
	margin-bottom: 0.5rem;
}

.evs-form .gform_wrapper .gfield_required {
	color: var(--wp--preset--color--brand);
	font-family: var(--wp--preset--font-family--mono);
	letter-spacing: 0;
}

.evs-form .gform_wrapper.gform-theme--orbital :where(input, textarea, select) {
	background-color: var(--wp--preset--color--ink-raised);
	border: 1px solid var(--wp--preset--color--ink-line);
	border-radius: 0;
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	padding: 0.875rem;
}

.evs-form .gform_wrapper.gform-theme--orbital :where(input, textarea)::placeholder {
	color: var(--wp--preset--color--on-dark-mute);
	opacity: 1;
}

.evs-form .gform_wrapper.gform-theme--orbital :where(input, textarea, select):focus {
	border-color: var(--wp--preset--color--brand);
	outline: 2px solid var(--wp--preset--color--brand);
	outline-offset: 1px;
	box-shadow: none;
}

.evs-form .gform_wrapper.gform-theme--orbital textarea {
	min-height: 7.5rem;
	resize: vertical;
}

.evs-form .gform_wrapper.gform-theme--orbital .gform_footer :where(input, button).gform_button,
.evs-form .gform_wrapper.gform-theme--orbital input[type="submit"].gform_button,
.evs-form .gform_wrapper.gform-theme--orbital button.gform_button {
	--gf-local-bg-color: var(--wp--preset--color--primary);
	--gf-local-color: var(--wp--preset--color--shell);
	--gf-local-border-color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--primary);
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 0;
	color: var(--wp--preset--color--shell);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	padding: 1.0625rem 1.75rem;
	width: 100%;
	transition: background-color 120ms ease, border-color 120ms ease;
}

.evs-form .gform_wrapper.gform-theme--orbital .gform_footer :where(input, button).gform_button:hover,
.evs-form .gform_wrapper.gform-theme--orbital input[type="submit"].gform_button:hover,
.evs-form .gform_wrapper.gform-theme--orbital button.gform_button:hover,
.evs-form .gform_wrapper.gform-theme--orbital input[type="submit"].gform_button:focus,
.evs-form .gform_wrapper.gform-theme--orbital button.gform_button:focus {
	--gf-local-bg-color: var(--wp--preset--color--brand);
	--gf-local-border-color: var(--wp--preset--color--brand);
	background-color: var(--wp--preset--color--brand);
	border-color: var(--wp--preset--color--brand);
}

.evs-form .gform_wrapper.gform-theme--orbital .gform_footer {
	display: block;
	padding: 0;
	margin: 0.25rem 0 0;
}

/* Orbital nests the submit inside a shrink-to-fit wrapper, so the wrapper has
   to be stretched before width:100% on the button means anything. */
.evs-form .gform_wrapper.gform-theme--orbital .gform_footer > * {
	display: block;
	width: 100%;
	max-width: none;
}

.evs-form .gform_wrapper.gform-theme--orbital .gform_footer :where(input, button).gform_button {
	width: 100%;
	max-width: none;
	justify-content: center;
	text-align: center;
}

.evs-form .gform_wrapper .gform_validation_errors {
	background: var(--wp--preset--color--ink-raised);
	border: 1px solid var(--wp--preset--color--brand);
	border-radius: 0;
	box-shadow: none;
}

.evs-form .gform_wrapper .gform_validation_errors > h2,
.evs-form .gform_wrapper .validation_message {
	color: var(--wp--preset--color--brand);
	font-size: var(--wp--preset--font-size--small);
}

.evs-form .gform_confirmation_message {
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: var(--wp--custom--line-height--body);
	border-left: 3px solid var(--wp--preset--color--brand);
	padding-left: var(--wp--preset--spacing--50);
}

/* Core's constrained layout gives EVERY child narrower than the content width
   `margin-left: auto !important; margin-right: auto !important`, which centres
   it. A measure class exists precisely to make an element narrower than its
   container, so the two combine to centre every constrained paragraph and
   heading that carries one, while the eyebrow and buttons beside it stay left.

   On the homepage this never showed, because those elements sit inside
   core/column, which is flow layout. The interior page sections put them
   directly inside a constrained group, so it appeared everywhere at once.

   The same auto margins bite a second way in any constrained group that has
   been turned into a flex column: in flexbox an auto cross-axis margin stops
   the item stretching and centres it at its content width instead, so the
   category card headings sat centred above left-aligned body copy.

   Core's rule is `.is-layout-constrained > :where(...)`, which is one class
   plus !important. These selectors tie it on specificity and win on source
   order, because the theme stylesheet is enqueued after the inline global
   styles.

   This must NOT be pointed at every constrained child. On a full-bleed
   section those same auto margins are what centre the 1280px content column,
   so zeroing them there drags the element out to the section edge instead.
   The section emitters solve that structurally, with an inner flow-layout
   group that takes the auto margins and becomes the column. What is left
   below are the containers that are already narrower than the content width,
   where the margins centre but position nothing. */
.evs-cat__body > *,
.evs-ctaband__copy > *,
.evs-emergency-band__copy > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
}


/* --- Interior service pages ---------------------------------------------
   Everything below serves the pages built by build/make-pages.php. The
   emitters in inc/service-blocks.php name these classes; keep the two in
   step.
   ---------------------------------------------------------------------- */

/* The interior hero reuses the homepage hero's photo and scrim mechanism via
   .evs-hero, so it only needs its own stacking context for the copy. */
.evs-page-hero__body {
	position: relative;
	z-index: 1;
}

/* Breadcrumb. The separators are the literal " / " in the text, so there is
   nothing to style but the emphasis on the current page. */
.evs-crumbs strong {
	color: var(--wp--preset--color--base);
	font-weight: 700;
}

.evs-crumbs a {
	color: inherit;
}

.evs-crumbs a:hover {
	color: var(--wp--preset--color--base);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* A chip on its own line has to shrink to its label rather than fill the
   column, which a block-level paragraph would do. */
.evs-chip--solo {
	display: inline-block;
	width: fit-content;
}

/* --- Hero "at a glance" panel -------------------------------------------
   An outlined box beside the headline carrying the two or three numbers a
   visitor wants before reading anything. Only some service pages use it,
   which is deliberate: four pages built from one skeleton need something to
   tell them apart.
   ---------------------------------------------------------------------- */

.evs-glance {
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--wp--custom--radius--panel);
	align-self: center;

	/* Same stacking context the hero copy gets. Without it the panel sits
	   under the scrim that ::after paints over the photo, and every value in
	   it renders washed out even though the colours are correct. */
	position: relative;
	z-index: 1;
}

/* The hero copy and the panel become a pair only when a panel is present.
   `:has()` keeps that decision in CSS rather than needing two hero emitters. */
.evs-page-hero .wp-block-group:has(> .evs-glance) {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--90);
	align-items: center;
}

@media (max-width: 781px) {
	.evs-page-hero .wp-block-group:has(> .evs-glance) {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--80);
	}
}

/* --- Rule grid ----------------------------------------------------------
   Cards under a coloured rule with no box, so a page can carry two list
   sections without them reading as the same component twice. The rule and
   padding are block attributes; nothing needed here but the measure reset,
   which the shared rule above already covers.
   ---------------------------------------------------------------------- */

/* --- Note panel and related cards --------------------------------------- */

.evs-note-panel {
	border-radius: var(--wp--custom--radius--panel);
}

/* --- Before and after --------------------------------------------------- */

.wp-block-image.evs-ba-media img {
	height: clamp(240px, 34vh, 340px);
	object-fit: cover;
	border-radius: var(--wp--custom--radius--card);
}

/* --- Trust bar ---------------------------------------------------------- */

.evs-trustbar {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* --- What we offer ------------------------------------------------------ */

/* The intro column tracks the reader down the card stack. Sticky needs a top
   offset clear of the sticky header, and it must not apply once the columns
   have stacked or it pins the intro over the cards. */
@media (min-width: 782px) {
	.evs-sticky-col {
		position: sticky;
		top: 120px;
		align-self: start;
	}
}

.evs-offer {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--panel);
}

/* The card that leads to its own page is outlined in navy and lifts, so it
   reads as a destination rather than another description. */
.evs-offer--link {
	border-color: var(--wp--preset--color--primary);
	transition: transform 200ms ease;
}

.evs-offer--link:hover {
	transform: translateY(-3px);
}

.evs-offer__note {
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* --- Who turns up ------------------------------------------------------- */

.wp-block-image.evs-team-media img {
	height: clamp(340px, 56vh, 520px);
	object-fit: cover;
	border-radius: var(--wp--custom--radius--panel);
}

.evs-pullquote {
	border-radius: var(--wp--custom--radius--card);
}

/* --- Recent work gallery ------------------------------------------------
   A feature tile beside two stacked, then a row of three. Grid rather than
   columns because the feature tile spans two rows, which a column layout
   cannot express.
   ---------------------------------------------------------------------- */

.evs-gallery {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	grid-template-rows: 230px 230px;
	gap: var(--wp--preset--spacing--50);
}

.evs-gallery > .evs-gallery__item:first-child {
	grid-row: span 2;
}

.evs-gallery--row {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-rows: 200px;
}

.evs-gallery--row > .evs-gallery__item:first-child {
	grid-row: auto;
}

.evs-gallery__item {
	margin: 0;
	height: 100%;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--card);
}

.wp-block-image.evs-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--card);
}

@media (max-width: 781px) {
	.evs-gallery,
	.evs-gallery--row {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
	}

	.evs-gallery > .evs-gallery__item:first-child {
		grid-row: auto;
	}

	.evs-gallery__item {
		height: 220px;
	}
}

/* --- Service category cards --------------------------------------------- */

.evs-cat {
	border-radius: var(--wp--custom--radius--panel);
	overflow: hidden;
}

.evs-cat__media {
	margin: 0;
}

.evs-cat__media img {
	display: block;
	width: 100%;
	height: 230px;
	object-fit: cover;
	border-radius: 0;
}

/* The body grows so every card's read-more line sits on the same baseline
   however long the description runs. */
.evs-cat__body {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.evs-cat .evs-cardlink {
	margin-top: auto;
}

/* The chips naming what a category covers. */
.evs-tag {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	padding: 8px 15px;
}

/* --- Urgent work band --------------------------------------------------- */

.evs-emergency-band {
	border-radius: var(--wp--custom--radius--panel);
}

/* The copy has to be allowed to share the row, or it takes the full width of
   the flex line and pushes the phone button onto its own row underneath. The
   design has them side by side, with the button vertically centred against the
   heading. The basis is the point below which they should stack. */
.evs-emergency-band__copy {
	flex: 1 1 30rem;
}

/* --- How we work steps -------------------------------------------------- */

.evs-step {
	border-top-style: solid;
}

/* --- Closing call to action --------------------------------------------- */

.evs-ctaband__copy {
	flex: 1 1 420px;
}

/* The two buttons stack rather than sitting side by side, which is what the
   design does and what keeps them the same width. */
.evs-btn-stack {
	flex-direction: column;
	align-items: stretch;
}

.evs-btn-stack .wp-block-button__link {
	display: block;
	text-align: center;
}

@media (max-width: 781px) {
	.evs-ctaband {
		padding: var(--wp--preset--spacing--80) !important;
	}
}

/* --- Print -------------------------------------------------------------- */

@media print {
	.evs-header,
	.evs-form,
	.wp-block-navigation {
		display: none !important;
	}
}


/* =========================================================================
   OmnisWP skin
   The omniswp.com look (rounded, softly shadowed cards, a blue glow on the
   navy band, framed product shots) layered over the starter mechanism.
   Every value is a theme.json preset or custom token.
   ======================================================================= */

/* --- Hero: a blue glow over the grid paper ------------------------------ */

.evs-gridpaper {
	background-image:
		radial-gradient(ellipse 55% 60% at 78% 0%, color-mix(in srgb, var(--wp--preset--color--primary) 13%, transparent), transparent 70%),
		linear-gradient(color-mix(in srgb, var(--wp--preset--color--line) 70%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--wp--preset--color--line) 70%, transparent) 1px, transparent 1px);
	background-size: auto, 56px 56px, 56px 56px;
}

/* --- Cards: separate rounded tiles instead of a hairline grid ------------ */

.evs-hairline-grid:not(.has-ink-line-background-color) {
	background-color: transparent !important;
	border: 0;
	gap: var(--wp--preset--spacing--50) !important;
}

.evs-hairline-grid:not(.has-ink-line-background-color) > .wp-block-group {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--custom--shadow--card);
}

.evs-hairline-grid.has-ink-line-background-color {
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
}

/* "Free" and the other card eyebrows read as a small tag. */
.evs-hairline-grid:not(.has-ink-line-background-color) > .wp-block-group > p.has-eyebrow-font-size:first-child {
	align-self: flex-start;
	margin-right: auto !important;
	padding: 4px 8px;
	border-radius: 5px;
	background: var(--wp--preset--color--ok-bg);
	color: var(--wp--preset--color--ok) !important;
}

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

.wp-block-button:not(.is-style-outline) .wp-block-button__link.wp-element-button {
	box-shadow: var(--wp--custom--shadow--button);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-radius: var(--wp--custom--radius--button);
}

/* --- Comparison table: a rounded panel, our column tinted ----------------- */

.wp-block-table.is-style-compare {
	overflow-x: auto;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--base);
}

.wp-block-table.is-style-compare table {
	border-top: 0;
	min-width: 640px;
}

.wp-block-table.is-style-compare thead th {
	padding: 14px 18px;
	background: var(--wp--preset--color--surface);
}

.wp-block-table.is-style-compare tbody td {
	padding: 16px 18px;
	font-size: var(--wp--preset--font-size--small);
}

.wp-block-table.is-style-compare :where(th, td) + :where(th, td) {
	padding-left: 18px;
}

.wp-block-table.is-style-compare :where(th, td):last-child {
	background: var(--wp--preset--color--tint);
	font-weight: 600;
}

.wp-block-table.is-style-compare tbody tr:last-child td {
	border-bottom: 0;
}

/* --- App window: frames a live block as a product shot -------------------- */

.wp-block-group.is-style-app-window {
	position: relative;
	padding: calc(var(--wp--preset--spacing--60) + 14px) var(--wp--preset--spacing--60) var(--wp--preset--spacing--60);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--panel);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--custom--shadow--card-lg);
}

/* The three window dots, drawn as one element with two shadows. */
.wp-block-group.is-style-app-window::before {
	content: "";
	position: absolute;
	top: 16px;
	left: 18px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--wp--preset--color--line);
	box-shadow: 16px 0 0 var(--wp--preset--color--line), 32px 0 0 var(--wp--preset--color--line);
}

.wp-block-group.is-style-app-window .ew-calendar {
	margin: 0;
}

/* --- Navy call-to-action band with a glow --------------------------------- */

.evs-glow {
	position: relative;
	overflow: hidden;
}

.evs-glow::before {
	content: "";
	position: absolute;
	top: -40%;
	left: 50%;
	width: 70%;
	height: 90%;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, var(--wp--custom--shadow--glow), transparent 68%);
	pointer-events: none;
}

.evs-glow > * {
	position: relative;
	z-index: 1;
}

/* --- Code panel (shortcode reference) ------------------------------------- */

.wp-block-code.evs-codepanel {
	margin: 0;
	padding: var(--wp--preset--spacing--60);
	border: 0;
	border-radius: var(--wp--custom--radius--card);
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--on-dark-strong);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.9;
	box-shadow: var(--wp--custom--shadow--card-lg);
	white-space: pre-wrap;
}

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

.evs-by {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	color: var(--wp--preset--color--on-dark-mute);
	letter-spacing: 0;
}

.wp-block-list.evs-footlinks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.evs-footer a {
	text-decoration: none;
}

/* --- Eventward, in this site's colours -------------------------------------
   The plugin inherits the theme by design. These few rules pick up the
   OmnisWP blue for the active view, today and the primary actions.
   ---------------------------------------------------------------------- */

.ew-calendar,
.ew-details {
	--ew-radius: var(--wp--custom--radius--field);
}

.ew-calendar .ew-views a[aria-current] {
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--primary);
}

.ew-calendar .ew-month .is-today .ew-day-num,
.ew-calendar .ew-week-day.is-today .ew-week-num {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--shell);
}

.ew-calendar .ew-filter-submit,
.ew-details .ew-atc > summary.ew-button {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--shell);
}

.ew-calendar .ew-filter-submit:hover,
.ew-details .ew-atc > summary.ew-button:hover {
	background: var(--wp--preset--color--primary-deep);
}

.ew-calendar .ew-day-events .is-featured a {
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--primary-deep);
}

.ew-calendar .ew-badge {
	background: var(--wp--preset--color--base);
}

.ew-calendar .ew-item.is-featured .ew-badge {
	border-color: var(--wp--preset--color--primary);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}