/*
Theme Name: Life Ring
Theme URI: https://lifering.co.nz
Author: Life Ring Web Services
Author URI: https://lifering.co.nz
Description: A native WordPress block theme for Life Ring Web Services. Every brand decision (colour, type, spacing) lives in theme.json, so the theme can be copied and re-skinned for a client build by editing that one file. Sections are registered patterns, so pages stay editable from the block editor without touching code.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.9.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lifering
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 ------------------------------------------------------------- */

.lr-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: color-mix(in srgb, var(--wp--preset--color--base) 94%, transparent);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

@supports (backdrop-filter: blur(6px)) {
	.lr-header {
		backdrop-filter: blur(6px);
	}
}

.lr-logo img {
	height: auto;
	max-height: 44px;
	width: auto;
}

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

.lr-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. */
.lr-phone a,
.lr-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.
   ---------------------------------------------------------------------- */

.lr-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: 0 12px 28px rgba(18, 17, 16, 0.07);
	min-width: 260px;
	padding: var(--wp--preset--spacing--20) 0;
}

.lr-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%;
}

.lr-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. */
.lr-header .wp-block-navigation-submenu__toggle {
	padding-right: 0;
}

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

.lr-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 lr-sonar {
	0%   { transform: scale(0.34); opacity: 0; }
	12%  { opacity: 0.85; }
	100% { transform: scale(1.6); opacity: 0; }
}

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

.lr-heromark {
	--lr-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;
}

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

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

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

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

.lr-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. */
.lr-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%);
}

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

.lr-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) {
	.lr-heromark { --lr-sonar: 300px; }
	.lr-heromark__core { width: 150px; height: 150px; }
	.lr-heromark__hub { inset: 34px; }
	.lr-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.
   ---------------------------------------------------------------------- */

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

.lr-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. */
.lr-card {
	transition: background-color 120ms ease;
}

.lr-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 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) {
		font-size: var(--wp--preset--font-size--small);
	}
}

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

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

.lr-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;
}

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

.lr-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;
}

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

.lr-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.
   ---------------------------------------------------------------------- */

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

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

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

.lr-card:hover .lr-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.
   ---------------------------------------------------------------------- */

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

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

.lr-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. */
.lr-dim {
	opacity: 0.72;
}

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

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

.lr-measure-13 { max-width: 13ch; }
.lr-measure-16 { max-width: 16ch; }
.lr-measure-18 { max-width: 18ch; }
.lr-measure-20 { max-width: 20ch; }
.lr-measure-22 { max-width: 22ch; }
.lr-measure-46 { max-width: 46ch; }
.lr-measure-52 { max-width: 52ch; }
.lr-measure-58 { max-width: 58ch; }
.lr-measure-60 { max-width: 60ch; }
.lr-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. */
.lr-hero-media {
	height: 100%;
}

/* Qualified with .wp-block-image: core's own `.wp-block-image img` rule ties
   a bare `.lr-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.lr-hero-media img {
	height: clamp(340px, 58vh, 620px);
	object-position: 50% 28%;
}

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

.lr-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. */
.lr-header .wp-block-button__link:hover,
.lr-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.
   ---------------------------------------------------------------------- */

.lr-form .gform_wrapper.gform-theme,
.lr-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. */
.lr-form .gform_wrapper .gfield_label,
.lr-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;
}

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

.lr-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;
}

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

.lr-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;
}

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

.lr-form .gform_wrapper.gform-theme--orbital .gform_footer :where(input, button).gform_button,
.lr-form .gform_wrapper.gform-theme--orbital input[type="submit"].gform_button,
.lr-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;
}

.lr-form .gform_wrapper.gform-theme--orbital .gform_footer :where(input, button).gform_button:hover,
.lr-form .gform_wrapper.gform-theme--orbital input[type="submit"].gform_button:hover,
.lr-form .gform_wrapper.gform-theme--orbital button.gform_button:hover,
.lr-form .gform_wrapper.gform-theme--orbital input[type="submit"].gform_button:focus,
.lr-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);
}

.lr-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. */
.lr-form .gform_wrapper.gform-theme--orbital .gform_footer > * {
	display: block;
	width: 100%;
	max-width: none;
}

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

.lr-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;
}

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

.lr-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);
}

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

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