/* ===================================================================
   umerf.com — theme front-end styles
   Design tokens (color/type/spacing) live in theme.json.
   This file only covers what block supports can't express:
   sticky header blur, status badges, photo captions, hover motion,
   and a couple of grid layouts theme.json/block supports can't reach.
   =================================================================== */

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

/* ---------- Global mobile gutter ----------
   theme.json sets useRootPaddingAwareAlignments + a base 20px root padding,
   which WordPress core applies to .wp-site-blocks (and any element with the
   .has-global-padding class) while automatically negative-margining direct
   alignfull children back to full bleed. That gives every template — header,
   main, footer, and every page built from them — a consistent edge gutter
   with zero per-template patches, and full-width section backgrounds stay
   edge-to-edge untouched.
   - Below 400px (e.g. 320/375/390): the 20px theme.json base value applies.
   - 400px and up, while still mobile/narrow (< 782px, WP's own mobile/tablet
     boundary): bump to 24px, per the "normal mobile widths" requirement.
   - 782px and up (tablet/desktop, matches the breakpoint the rest of this
     stylesheet already treats as "no longer mobile"): reset to 0 so the
     already-approved desktop container widths/spacing are completely
     unaffected. */
:root {
	--wp--style--root--padding-left: 20px;
	--wp--style--root--padding-right: 20px;
}
@media (min-width: 400px) {
	:root {
		--wp--style--root--padding-left: 24px;
		--wp--style--root--padding-right: 24px;
	}
}
@media (min-width: 782px) {
	:root {
		--wp--style--root--padding-left: 0px;
		--wp--style--root--padding-right: 0px;
	}
}

/* Belt-and-braces: prevent any accidental horizontal scroll from an
   oversized child (long URL, wide table, etc.) regardless of source. */
html, body {
	max-width: 100%;
	overflow-x: hidden;
}
/* Long unbroken strings (email addresses, URLs used as link text, long
   project/photo titles) must wrap inside their container instead of forcing
   the viewport wider. */
p, h1, h2, h3, h4, h5, h6, a, li, .wpcf7-form-control {
	overflow-wrap: break-word;
	word-break: break-word;
}
img, iframe, video, embed, object {
	max-width: 100%;
	height: auto;
}

/* Note: .u-site-header and .u-site-footer are both constrained-layout Group
   blocks, so WordPress's useRootPaddingAwareAlignments already gives them
   the "has-global-padding" class + the gutter automatically. Because they're
   full-width flow blocks, that padding only insets their content (the
   wordmark/nav and copyright/social rows) — it does not shrink their
   edge-to-edge background, since background paints the full padding box
   regardless of padding value. No extra header/footer-specific CSS needed. */

/* ---------- Header ---------- */
.u-site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(180%) blur(8px);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* Vertical header rhythm: ~72-76px tall on desktop (~21px top/bottom padding
   around the wordmark + nav line-box), ~64-68px on mobile. Wordmark and nav
   are vertically centered via the inner group's flex layout (default
   align-items: center). Horizontal spacing/justify-content is untouched. */
.u-site-header__inner {
	padding-top: 21px;
	padding-bottom: 21px;
}
@media (max-width: 600px) {
	.u-site-header__inner {
		padding-top: 19px;
		padding-bottom: 19px;
	}
}

.u-site-header .wp-block-navigation a {
	transition: color 0.15s ease;
}

.u-site-header .wp-block-navigation-item__content {
	color: var(--wp--preset--color--text);
}

.u-site-header .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--blue);
}

.u-site-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--blue);
}

/* ---------- Keep headings/titles navy even when wrapped in a link ---------- */
/* The theme's default link color is blue (for genuine text links); headings
   and post titles should stay navy by default and only pick up blue on the
   explicit hover rules defined per-section below. */
.wp-block-heading a,
.wp-block-post-title a,
.wp-block-site-title a {
	color: inherit;
}

/* ---------- Text link utility (matches mockup's .text-link) ---------- */
.u-text-link {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--blue);
	white-space: nowrap;
	transition: color 0.15s ease;
}
.u-text-link:hover {
	color: var(--wp--preset--color--blue-hover);
}

/* ---------- Placeholder imagery ---------- */
.u-placeholder img {
	border-radius: 6px;
	border: 1px solid var(--wp--preset--color--border);
}

/* ---------- Hero ---------- */
.u-hero {
	animation: umerf-rise 0.6s ease both;
}
@keyframes umerf-rise {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}
.u-hero__intro {
	max-width: 34ch;
}

/* ---------- Eyebrow label ---------- */
.u-eyebrow {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--blue);
}

/* ---------- Post meta / category ---------- */
.u-post-category {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--blue);
}
.u-post-meta {
	font-size: 0.875rem;
	color: var(--wp--preset--color--text-secondary);
}

/* ---------- Latest Writing ---------- */
.u-featured-post a,
.u-supporting-post a {
	transition: transform 0.2s ease;
	display: block;
}
.u-featured-post a:hover,
.u-supporting-post a:hover {
	transform: translateY(-2px);
}
.u-featured-post .wp-block-post-title,
.u-supporting-post .wp-block-post-title {
	transition: color 0.15s ease;
}
.u-featured-post a:hover .wp-block-post-title,
.u-supporting-post a:hover .wp-block-post-title {
	color: var(--wp--preset--color--blue);
}
.u-supporting-post-group > .wp-block-group + .wp-block-group {
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: var(--wp--preset--spacing--30);
}
.u-supporting-post figure {
	width: 112px;
	height: 112px;
	flex-shrink: 0;
	margin: 0;
}
.u-supporting-post figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- Project cards ---------- */
.u-project-card {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	overflow: hidden;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.u-project-card:hover {
	border-color: var(--wp--preset--color--blue);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(11, 31, 58, 0.06);
}
.u-project-card figure {
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.u-project-card figure img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.u-status-badge {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
	white-space: nowrap;
	background: var(--wp--preset--color--blue-soft);
	color: var(--wp--preset--color--blue-hover);
}
.u-project-tags {
	font-size: 0.875rem;
	color: var(--wp--preset--color--text-secondary);
}

/* ---------- Projects archive / single ---------- */
.u-project-grid {
	grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 782px) {
	.u-project-grid {
		grid-template-columns: 1fr !important;
	}
}
.u-project-sidebar {
	position: sticky;
	top: var(--wp--preset--spacing--40);
}
.u-lessons-panel blockquote,
.u-lessons-panel p {
	margin-bottom: 0;
}
.u-project-link {
	width: 100%;
}
.u-project-link .wp-block-button__link {
	width: 100%;
	text-align: center;
}
@media (max-width: 600px) {
	.u-project-sidebar {
		position: static;
	}
}

/* ---------- Photography grid ---------- */
.u-photo-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-areas: "large large large" "s1 s2 s3";
	gap: var(--wp--preset--spacing--20);
}
.u-photo-grid > *:nth-child(1) { grid-area: large; aspect-ratio: 16 / 9; }
.u-photo-grid > *:nth-child(2) { grid-area: s1; aspect-ratio: 4 / 5; }
.u-photo-grid > *:nth-child(3) { grid-area: s2; aspect-ratio: 4 / 5; }
.u-photo-grid > *:nth-child(4) { grid-area: s3; aspect-ratio: 4 / 5; }
.u-photo-grid figure {
	position: relative;
	margin: 0;
	height: 100%;
	border-radius: 6px;
	overflow: hidden;
}
.u-photo-grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.u-photo-grid figure a {
	display: block;
	height: 100%;
}
.u-photo-grid > li {
	position: relative;
	min-height: 0;
	overflow: hidden;
}
.u-photo-grid > li:hover img {
	transform: scale(1.045);
}
.u-photo-caption {
	position: absolute;
	left: var(--wp--preset--spacing--20);
	bottom: var(--wp--preset--spacing--20);
	margin: 0;
	font-size: 0.875rem;
	font-weight: 500;
	color: #fff;
	background: rgba(11, 31, 58, 0.72);
	padding: 0.3rem 0.65rem;
	border-radius: 4px;
	transition: background-color 0.2s ease;
}
.u-photo-caption a {
	color: inherit;
}
.u-photo-grid > li:hover .u-photo-caption {
	background: rgba(37, 99, 235, 0.85);
}

/* ---------- Photography archive / taxonomy grid ----------
   Uses only aspect-ratio + auto-fill columns (no fixed container height, no
   percentage-height chains) so the curated grid can never overflow or overlap
   surrounding sections regardless of how many photos exist. */
.u-photo-archive-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: var(--wp--preset--spacing--20);
}
.u-photo-archive-grid > li {
	position: relative;
	overflow: hidden;
	border-radius: 6px;
}
.u-photo-archive-grid figure {
	position: relative;
	margin: 0;
	aspect-ratio: 4 / 5;
	border-radius: 6px;
	overflow: hidden;
}
.u-photo-archive-grid figure a {
	display: block;
	width: 100%;
	height: 100%;
}
.u-photo-archive-grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.u-photo-archive-grid > li:hover img {
	transform: scale(1.045);
}
.u-photo-archive-grid .u-photo-caption {
	right: var(--wp--preset--spacing--20);
	left: var(--wp--preset--spacing--20);
}

/* ---------- Photography unified gallery ----------
   CSS multi-column masonry so each photo keeps its natural aspect ratio
   (no forced square crop). Columns + width:100%/height:auto on the <img>,
   combined with WordPress's own width/height attributes on the rendered
   image, let the browser reserve space up front and avoid layout shift.
   break-inside:avoid keeps each photo intact within a column. */
.u-photo-gallery {
	column-count: 1;
	column-gap: var(--wp--preset--spacing--20);
	list-style: none;
	padding: 0;
	margin: 0;
}
@media (min-width: 480px) {
	.u-photo-gallery {
		column-count: 2;
	}
}
@media (min-width: 1024px) {
	.u-photo-gallery {
		column-count: 3;
	}
}
@media (min-width: 1280px) {
	.u-photo-gallery {
		column-count: 4;
	}
}
.u-photo-gallery > li {
	position: relative;
	break-inside: avoid;
	margin: 0 0 var(--wp--preset--spacing--20);
	overflow: hidden;
	border-radius: 6px;
}
.u-photo-gallery figure {
	position: relative;
	margin: 0;
	line-height: 0;
}
.u-photo-gallery figure a {
	display: block;
}
.u-photo-gallery img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
	transition: transform 0.4s ease;
}
.u-photo-gallery > li:hover img {
	transform: scale(1.03);
}
.u-photo-gallery .u-photo-caption {
	right: var(--wp--preset--spacing--20);
	left: var(--wp--preset--spacing--20);
	opacity: 0;
	transition: opacity 0.2s ease, background-color 0.2s ease;
}
.u-photo-gallery > li:hover .u-photo-caption,
.u-photo-gallery > li:focus-within .u-photo-caption {
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.u-photo-gallery img,
	.u-photo-gallery .u-photo-caption {
		transition: none;
	}
}

/* ---------- Single photo ---------- */
.u-photo-full figure {
	margin: 0;
	border-radius: 6px;
	overflow: hidden;
}
.u-photo-full img {
	width: 100%;
	height: auto;
	display: block;
}

@media (min-width: 1024px) {
	.u-photo-grid {
		grid-template-columns: 1.4fr 1fr;
		grid-template-rows: repeat(3, minmax(0, 1fr));
		grid-template-areas: "large s1" "large s2" "large s3";
		height: 640px;
	}
	.u-photo-grid > *:nth-child(1),
	.u-photo-grid > *:nth-child(2),
	.u-photo-grid > *:nth-child(3),
	.u-photo-grid > *:nth-child(4) {
		aspect-ratio: auto;
	}
}

/* ---------- Buttons ---------- */
.wp-block-button__link {
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline):not(.is-style-fill) .wp-block-button__link:hover {
	transform: translateY(-2px);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	box-shadow: 0 6px 14px rgba(37, 99, 235, 0.18);
}

/* ---------- Footer ---------- */
.u-site-footer {
	background: var(--wp--preset--color--navy);
	color: rgba(255, 255, 255, 0.9);
}
.u-site-footer a { color: inherit; transition: color 0.15s ease; }
.u-site-footer a:hover { color: #fff; }
.u-site-footer .wp-block-navigation a { color: inherit; }
.u-site-footer .wp-block-navigation-item__content { color: rgba(255, 255, 255, 0.9); }
.u-site-footer .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.u-site-footer .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	color: #fff;
}
.u-site-footer .wp-block-social-link { color: #fff !important; }
.u-site-footer .wp-block-social-link:hover { color: rgba(255, 255, 255, 0.75) !important; }
/* Copyright no longer carries a forced-white block color (see footer.html);
   it inherits the base .u-site-footer light-slate color above, which is a
   plain `color` (not `opacity`) so it can't be washed out by stacking with
   anything else — AA-readable against navy on its own. */

/* ---------- Blog / archive / search row list ---------- */
.u-post-list {
	list-style: none;
}
.u-post-list > li + li {
	border-top: 1px solid var(--wp--preset--color--border);
}
.u-post-row {
	align-items: flex-start;
	gap: var(--wp--preset--spacing--40);
	padding-top: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--40);
}
.u-post-row figure {
	width: 240px;
	height: 160px;
	flex-shrink: 0;
	margin: 0;
	overflow: hidden;
	border-radius: 6px;
}
.u-post-row figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.u-post-row .wp-block-post-title {
	transition: color 0.15s ease;
}
.u-post-row a:hover .wp-block-post-title,
.u-post-row .wp-block-post-title a:hover {
	color: var(--wp--preset--color--blue);
}
.u-post-meta-row {
	align-items: center;
	gap: 0.4rem;
}
.u-post-meta-row > *:nth-child(2)::before {
	content: "\00b7";
	margin-right: 0.4rem;
	color: var(--wp--preset--color--text-secondary);
}
@media (max-width: 640px) {
	.u-post-row {
		flex-direction: column;
	}
	.u-post-row figure {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}
}

/* ---------- Pagination ---------- */
.wp-block-query-pagination {
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}
.wp-block-query-pagination-numbers {
	display: flex;
	align-items: center;
	gap: 0.35rem;
}
.wp-block-query-pagination-numbers a,
.wp-block-query-pagination-numbers .page-numbers.current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 0.4rem;
	border-radius: 6px;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--preset--color--text-secondary);
	transition: background-color 0.15s ease, color 0.15s ease;
}
.wp-block-query-pagination-numbers a:hover {
	background: var(--wp--preset--color--blue-soft);
	color: var(--wp--preset--color--blue);
}
.wp-block-query-pagination-numbers .page-numbers.current {
	background: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--white);
}
.wp-block-query-pagination-previous-arrow,
.wp-block-query-pagination-next-arrow {
	margin: 0 0.25rem;
}

/* ---------- Single post/project/photo prose typography ---------- */
.wp-block-post-content > * + * {
	margin-top: var(--wp--preset--spacing--30);
}
.wp-block-post-content h2 {
	font-size: clamp(1.5rem, 1.25rem + 0.75vw, 1.875rem);
	margin-top: var(--wp--preset--spacing--50);
}
.wp-block-post-content h3 {
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
	margin-top: var(--wp--preset--spacing--40);
}
.wp-block-post-content p,
.wp-block-post-content li {
	font-size: 1.0625rem;
	line-height: 1.7;
}
.wp-block-post-content ul,
.wp-block-post-content ol {
	padding-left: 1.25rem;
}
.wp-block-post-content blockquote {
	margin: var(--wp--preset--spacing--40) 0;
	padding-left: var(--wp--preset--spacing--30);
	border-left: 3px solid var(--wp--preset--color--blue);
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.1875rem;
	font-style: italic;
	color: var(--wp--preset--color--navy);
}
.wp-block-post-content blockquote p {
	margin: 0;
}
.wp-block-post-content code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.875em;
	background: var(--wp--preset--color--blue-soft);
	padding: 0.15em 0.4em;
	border-radius: 4px;
}
.wp-block-post-content pre {
	background: var(--wp--preset--color--navy);
	color: #fff;
	padding: var(--wp--preset--spacing--30);
	border-radius: 6px;
	overflow-x: auto;
}
.wp-block-post-content pre code {
	background: none;
	padding: 0;
	color: inherit;
}
.wp-block-post-content figure {
	margin: var(--wp--preset--spacing--40) 0;
}
.wp-block-post-content img {
	border-radius: 6px;
}
.wp-block-post-content figcaption {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--text-secondary);
	text-align: center;
	margin-top: 0.5rem;
}
.wp-block-post-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}
.wp-block-post-content table th,
.wp-block-post-content table td {
	border: 1px solid var(--wp--preset--color--border);
	padding: 0.6rem 0.8rem;
	text-align: left;
}
.wp-block-post-content table th {
	background: var(--wp--preset--color--bg-off);
	font-weight: 600;
}

/* ---------- Single post/project/photo prev-next navigation ---------- */
.u-post-nav {
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: var(--wp--preset--spacing--40);
}
.u-post-nav .wp-block-post-navigation-link.wp-block-post-navigation-link__next {
	text-align: right;
	margin-left: auto;
}
@media (max-width: 640px) {
	.u-post-nav {
		flex-direction: column;
	}
	.u-post-nav .wp-block-post-navigation-link.wp-block-post-navigation-link__next {
		text-align: left;
		margin-left: 0;
	}
}
.u-post-nav .wp-block-post-navigation-link a {
	font-weight: 600;
	color: var(--wp--preset--color--blue);
	transition: color 0.15s ease;
}
.u-post-nav .wp-block-post-navigation-link a:hover {
	color: var(--wp--preset--color--blue-hover);
}
.u-post-nav .wp-block-post-navigation-link__content-next,
.u-post-nav .wp-block-post-navigation-link__content-previous {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--text-secondary);
	margin-bottom: 0.2rem;
}

/* ---------- Interest tag pills (About page) ---------- */
.u-tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.u-tag {
	display: inline-block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--wp--preset--color--blue-hover);
	background: var(--wp--preset--color--blue-soft);
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	white-space: nowrap;
}

/* ---------- Cursor glow (desktop, fine-pointer only) ---------- */
.cursor-glow {
	position: fixed;
	top: 0;
	left: 0;
	width: 620px;
	height: 620px;
	margin-left: -310px;
	margin-top: -310px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(37, 99, 235, 0.16) 0%, rgba(37, 99, 235, 0.07) 40%, rgba(37, 99, 235, 0) 72%);
	filter: blur(30px);
	pointer-events: none;
	z-index: 3;
	opacity: 0;
	transition: opacity 0.5s ease;
	will-change: transform;
}
.cursor-glow.is-active { opacity: 1; }

/* ---------- Contact form (Contact Form 7) ---------- */
.u-contact-form-panel .wpcf7-form {
	margin-top: var(--wp--preset--spacing--30);
}
.u-contact-form-panel .wpcf7-form p {
	margin-bottom: var(--wp--preset--spacing--30);
}
.u-contact-form-panel .wpcf7-form label {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--text);
	margin-bottom: 0.4rem;
}
.u-contact-form-panel .wpcf7-form-control-wrap {
	display: block;
}
.u-contact-form-panel input.wpcf7-form-control,
.u-contact-form-panel textarea.wpcf7-form-control {
	display: block;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	color: var(--wp--preset--color--text);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	padding: 0.65rem 0.85rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.u-contact-form-panel textarea.wpcf7-form-control {
	min-height: 9rem;
	resize: vertical;
}
.u-contact-form-panel .wpcf7-form-control:focus-visible,
.u-contact-form-panel .wpcf7-form-control:focus {
	outline: none;
	border-color: var(--wp--preset--color--blue);
	box-shadow: 0 0 0 3px var(--wp--preset--color--blue-soft);
}
.u-contact-form-panel .wpcf7-not-valid {
	border-color: #C0362C;
}
.u-contact-form-panel .wpcf7-not-valid-tip {
	display: block;
	font-size: 0.8125rem;
	color: #C0362C;
	margin-top: 0.35rem;
}
.u-contact-form-panel .wpcf7-response-output {
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0.85rem 1rem;
	border-radius: 6px;
	font-size: 0.9375rem;
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--text);
}
.u-contact-form-panel .wpcf7-form.sent .wpcf7-response-output {
	border-color: #1E7B45;
	background: #EAF6EF;
	color: #14532D;
}
.u-contact-form-panel .wpcf7-form.invalid .wpcf7-response-output,
.u-contact-form-panel .wpcf7-form.unaccepted .wpcf7-response-output,
.u-contact-form-panel .wpcf7-form.failed .wpcf7-response-output,
.u-contact-form-panel .wpcf7-form.spam .wpcf7-response-output {
	border-color: #C0362C;
	background: #FBEAE9;
	color: #7A241D;
}
.u-contact-form-panel .wpcf7-form .wpcf7-spinner {
	margin-left: 0.6rem;
}
.u-contact-form-panel input[type="submit"].wpcf7-form-control {
	width: auto;
	display: inline-flex;
	align-items: center;
	font-weight: 600;
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--blue);
	border: none;
	border-radius: 6px;
	padding: 0.75rem 1.5rem;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.u-contact-form-panel input[type="submit"].wpcf7-form-control:hover {
	background: var(--wp--preset--color--blue-hover);
}
.u-contact-form-panel input[type="submit"].wpcf7-form-control:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--wp--preset--color--blue-soft);
}
@media (max-width: 480px) {
	.u-contact-form-panel input[type="submit"].wpcf7-form-control {
		width: 100%;
		justify-content: center;
	}
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
	.cursor-glow { display: none !important; }
}