/* ============================================================
   studio.feist — supplemental theme styles
   Global tokens & block presets live in theme.json. This file
   carries chrome the block system can't express on its own:
   header / footer layout, nav underline, button skins, the
   asymmetric work archive grid and single-work case styling.
   ============================================================ */

:root {
	--sf-pad-x: clamp(24px, 7vw, 120px);
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

em,
.italic {
	font-style: italic;
	font-weight: 300;
}

/* Drop the default link underline site-wide; underlines are opt-in per block
   (e.g. the contact-form consent link, the case-study TOC) where they apply
   text-decoration explicitly. */
a {
	text-decoration: none;
}

::selection {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--bg-primary);
}

/* ---------- Header ---------- */
/* Sticky must live on the template-part wrapper: the inner group's parent is
   exactly its own height, so sticky there has no room to stick. The wrapper
   sits directly in .wp-site-blocks (full page height), like the prototype's
   body > .site-header. Offset by the admin bar when it's present. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 50;
}

/* The header chrome itself (logo / nav / CTA / mobile overlay) now lives in the
   studio-feist/site-header block's own stylesheet, so there is no core
   Navigation block left to override here. */

/* ---------- Eyebrow helper (also a block, but used in raw markup too) ---------- */
.eyebrow {
	display: inline-block;
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
}

.eyebrow em {
	font-style: italic;
}

/* ---------- Buttons ---------- */
.wp-block-button .wp-block-button__link {
	border-radius: 999px;
	padding: 16px 28px;
	font-size: 14px;
	letter-spacing: 0.04em;
	font-weight: 400;
	transition: background 200ms ease, color 200ms ease;
}

.wp-block-button .wp-block-button__link em {
	font-style: italic;
}

/* Trailing arrow on every pill button, injected via CSS (no markup needed) */
.wp-block-button__link::after,
.btn::after,
.wsf-form .wsf-button::after {
	content: "→";
	display: inline-block;
	transition: transform 200ms ease;
}

/* Block buttons aren't flex, so space the arrow with a margin. */
.wp-block-button__link::after {
	margin-left: 12px;
	margin-left: 12px;
	transition: transform 200ms ease;
}

.wp-block-button__link:hover::after,
.btn:hover::after,
.wsf-form .wsf-button:hover::after {
	transform: translateX(4px);
}

/* Inline arrow spans (e.g. text links) animate the same way on hover */
.arrow {
	display: inline-block;
	transition: transform 200ms ease;
}

.link-arrow:hover .arrow,
a:hover > .arrow {
	transform: translateX(4px);
}

/* Default = dark ink pill. */
.wp-block-button:not(.is-style-outline):not(.is-style-accent) .wp-block-button__link {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bg-primary);
}

.wp-block-button:not(.is-style-outline):not(.is-style-accent) .wp-block-button__link:hover {
	background: var(--wp--preset--color--accent);
}

.is-style-accent .wp-block-button__link {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--bg-primary);
}

.is-style-accent .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
}

.is-style-outline .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--ink);
	background: transparent;
	color: var(--wp--preset--color--ink);
}

.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--bg-primary);
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
	font-size: 14px;
	letter-spacing: 0.04em;
}

.link-arrow:hover {
	color: var(--wp--preset--color--accent);
}

/* ---------- Footer ---------- */
.site-footer {
	border-top: 1px solid var(--wp--preset--color--line);
	margin-top: 80px;
}

.footer-grid {
	gap: 48px;
	padding-top: 80px;
	padding-bottom: 80px;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
}

.footer-grid h4 {
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	font-weight: 500;
	margin-bottom: 20px;
}

.footer-grid .footer-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.footer-grid .wp-block-site-title {
	font-size: 20px;
}

.footer-bottom {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: 24px;
	padding-bottom: 24px;
	font-size: 12px;
	color: var(--wp--preset--color--ink-muted);
	letter-spacing: 0.04em;
}

.footer-bottom p {
	margin: 0;
}

@media (max-width: 860px) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* ---------- Page hero (work archive, pages) ---------- */
.page-hero__title em {
	font-style: italic;
}

/* ---------- Work archive: asymmetric masonry grid ----------
   The Query Loop renders <li class="wp-block-post"> wrappers, so the tile
   placement targets those — spans and image ratios from the prototype. */
.work-archive__query .archive {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: clamp(40px, 5vw, 72px) clamp(20px, 2.4vw, 32px);
	margin-top: clamp(40px, 6vw, 80px);
	list-style: none;
	padding: 0;
}

.work-archive__query .archive > .wp-block-post {
	margin-block-start: 0;
	margin-top: 0;
}

.work-archive__query .archive > .wp-block-post:nth-child(9n + 1) {
	grid-column: 1 / span 6;
}
.work-archive__query .archive > .wp-block-post:nth-child(9n + 2) {
	grid-column: 8 / span 4;
	margin-top: clamp(80px, 10vw, 140px);
}
.work-archive__query .archive > .wp-block-post:nth-child(9n + 3) {
	grid-column: 2 / span 5;
}
.work-archive__query .archive > .wp-block-post:nth-child(9n + 4) {
	grid-column: 8 / span 5;
	margin-top: clamp(60px, 7vw, 100px);
}
.work-archive__query .archive > .wp-block-post:nth-child(9n + 5) {
	grid-column: 1 / span 4;
	margin-top: clamp(40px, 5vw, 80px);
}
.work-archive__query .archive > .wp-block-post:nth-child(9n + 6) {
	grid-column: 6 / span 7;
}
.work-archive__query .archive > .wp-block-post:nth-child(9n + 7) {
	grid-column: 1 / span 7;
	margin-top: clamp(40px, 5vw, 80px);
}
.work-archive__query .archive > .wp-block-post:nth-child(9n + 8) {
	grid-column: 9 / span 4;
	margin-top: clamp(60px, 8vw, 120px);
}
.work-archive__query .archive > .wp-block-post:nth-child(9n + 9) {
	grid-column: 3 / span 5;
	margin-top: clamp(40px, 5vw, 80px);
}

.work-archive__query .project-card__media {
	overflow: hidden;
	aspect-ratio: 4/5;
}

/* Per-tile image ratios (prototype: 4/3, 3/4, 4/5, 4/5, 3/4, 3/4, 4/3, 3/4, 4/3). */
.work-archive__query .archive > .wp-block-post:nth-child(9n + 1) .project-card__media,
.work-archive__query .archive > .wp-block-post:nth-child(9n + 7) .project-card__media,
.work-archive__query .archive > .wp-block-post:nth-child(9n + 9) .project-card__media {
	aspect-ratio: 4/3;
}
.work-archive__query .archive > .wp-block-post:nth-child(9n + 2) .project-card__media,
.work-archive__query .archive > .wp-block-post:nth-child(9n + 5) .project-card__media,
.work-archive__query .archive > .wp-block-post:nth-child(9n + 6) .project-card__media,
.work-archive__query .archive > .wp-block-post:nth-child(9n + 8) .project-card__media {
	aspect-ratio: 3/4;
}

.work-archive__query .project-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

.work-archive__query .project-card:hover .project-card__media img {
	transform: scale(1.04);
}

.work-archive__query .project-card__meta {
	padding-top: 16px;
}

.work-archive__query .project-card__client a,
.work-archive__query .project-card__client {
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
}

.work-archive__query .project-card__title {
	font-size: 18px;
	font-weight: 400;
	margin: 4px 0 0;
}

.work-archive__query .project-card__title em {
	font-style: italic;
}

.work-archive__query .project-card__year {
	font-size: 12px;
	color: var(--wp--preset--color--ink-muted);
	letter-spacing: 0.06em;
}

@media (max-width: 860px) {
	.work-archive__query .archive {
		grid-template-columns: 1fr;
	}
	.work-archive__query .archive > .wp-block-post {
		grid-column: 1 / -1 !important;
		margin-top: 0 !important;
	}
}

/* ---------- Single work / case (ported from the prototype) ---------- */
.case-hero {
	color: #fff;
}

.case-hero .case-hero__title {
	color: #fff;
	font-size: clamp(48px, 7.5vw, 108px);
	line-height: 0.96;
	letter-spacing: -0.015em;
	max-width: 1100px;
}

.case-hero .case-hero__title em {
	font-style: italic;
}

.case-hero__breadcrumb {
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 32px;
}

.case-hero__breadcrumb .sep {
	opacity: 0.5;
}

.case-hero__breadcrumb a:hover {
	color: #fff;
}

/* Client · year line — normalize the work-meta spans to the hero treatment. */
.case-hero__client {
	margin-bottom: 24px;
}

.case-hero__client p,
.case-hero__client .wp-block-studio-feist-work-meta {
	display: inline;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.8);
	margin: 0;
}

/* Core shrinks the inner container to content width when a custom content
   position is set (with a doubled-class specificity hack); restore full
   width so the scroll indicator can anchor to the cover's right edge. */
.wp-block-cover.case-hero.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container {
	width: 100%;
}

/* Align the hero content to the global 1200px gutter line (the cover's
   inner container is not a constrained layout, so alignwide is inert). */
.case-hero .wp-block-cover__inner-container > .wp-block-group {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

/* "case" scroll indicator, bottom right. */
.case-hero__scroll {
	position: absolute;
	right: clamp(24px, 7vw, 120px);
	bottom: 60px;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}

.case-hero__scroll::before {
	content: "";
	width: 32px;
	height: 1px;
	background: rgba(255, 255, 255, 0.7);
}

/* Longform body: 19px / 1.65 like the prototype. */
.case-longform .wp-block-post-content > p {
	font-size: 19px;
	line-height: 1.65;
	margin-bottom: 1.4em;
}

.case-longform .wp-block-post-content > p:last-child {
	margin-bottom: 0;
}

.is-style-lead,
.case-longform .wp-block-post-content > p.is-style-lead {
	font-size: 26px;
	line-height: 1.4;
	margin-bottom: 1.4em;
	color: var(--wp--preset--color--ink);
}

.is-style-lead em {
	font-style: italic;
}

/* Longform top rhythm: the lead carries the big gap below the team row. */
.case-longform .wp-block-post-content > .is-style-lead {
	margin-top: clamp(80px, 10vw, 140px);
}

/* "— the brief" side label: left column on wide screens, hidden below 1100px
   like the prototype. */
.case-side-label {
	display: none;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	margin: 0;
}

@media (min-width: 1100px) {
	.case-longform {
		position: relative;
	}

	/* Absolute with no `top`: keeps its static y (right after the team row),
	   so the margin mirrors the lead's gap and lands it beside the lead. */
	.case-longform .case-side-label {
		display: block;
		position: absolute;
		left: clamp(24px, 7vw, 120px);
		margin-top: calc(clamp(80px, 10vw, 140px) + 8px);
	}
}

/* Pull quote cite. */
.pullquote cite {
	display: block;
	margin-top: 32px;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	font-style: normal;
	text-align: center;
}

.pullquote cite em {
	font-style: italic;
}

/* Numbered strecke group headings: "01 — set & light." */
.strecke-heading {
	font-size: 22px;
	font-weight: 400;
	color: var(--wp--preset--color--ink-muted);
	letter-spacing: 0.02em;
	margin: clamp(40px, 6vw, 80px) 0 24px;
}

.strecke-heading em {
	font-style: italic;
	color: var(--wp--preset--color--ink);
}

/* Studio team row (in the case body, below the meta strip). */
.studio-team .studio-team__row {
	padding-top: 32px;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.studio-team__list {
	font-size: 16px;
	color: var(--wp--preset--color--ink);
	margin: 0;
}

.studio-team__list span {
	white-space: nowrap;
	margin-right: 24px;
}

.studio-team__list em {
	font-style: italic;
	color: var(--wp--preset--color--ink-muted);
}

/* Case prev/next nav: bordered band, big titles. */
.case-nav__inner {
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-top: 40px;
	padding-bottom: 40px;
}

.case-nav__link {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px 0;
	font-size: clamp(28px, 4vw, 48px);
	font-weight: 300;
	line-height: 1.1;
	transition: color 240ms ease;
}

.case-nav__link:hover {
	color: var(--wp--preset--color--accent);
}

.case-nav__link.next {
	text-align: right;
	align-items: flex-end;
}

.case-nav__link .wp-block-post-navigation-link__label {
	display: block;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	font-weight: 500;
}

.case-nav__link a {
	text-decoration: none;
}

@media (max-width: 660px) {
	.case-nav__link.next {
		text-align: left;
		align-items: flex-start;
	}
}

/* ---------- Contact form ---------- */
.contact-form {
	display: grid;
	gap: 28px;
	margin-top: 48px;
}

.contact-form .form-row {
	display: grid;
	gap: 28px;
}

.contact-form .form-row.two {
	grid-template-columns: 1fr 1fr;
}

.contact-form .field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.contact-form .field label {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
}

.contact-form .field label .opt {
	color: var(--wp--preset--color--line);
	margin-left: 6px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
	font-family: inherit;
	font-size: 16px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 12px 0;
	color: var(--wp--preset--color--ink);
	border-radius: 0;
	transition: border-color 200ms ease;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
	outline: 0;
	border-bottom-color: var(--wp--preset--color--ink);
}

.contact-form textarea {
	resize: vertical;
	min-height: 120px;
}

.contact-form .checkbox {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 14px;
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.5;
}

.contact-form .checkbox input {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border: 1px solid var(--wp--preset--color--ink);
	margin-top: 2px;
	flex-shrink: 0;
	cursor: pointer;
	position: relative;
}

.contact-form .checkbox input:checked::after {
	content: "";
	position: absolute;
	inset: 3px;
	background: var(--wp--preset--color--ink);
}

.contact-form .checkbox a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.contact-form .form-actions {
	display: flex;
	gap: 16px;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 16px;
}

.contact-form .btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 28px;
	border-radius: 999px;
	font-size: 14px;
	letter-spacing: 0.04em;
	transition: background 200ms ease, color 200ms ease;
}

.contact-form .btn em {
	font-style: italic;
}

.contact-form .btn--accent {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--bg-primary);
}

.contact-form .btn--accent:hover {
	background: var(--wp--preset--color--ink);
}

.contact-form .form-state {
	font-size: 13px;
	color: var(--wp--preset--color--ink-muted);
}

.contact-form .form-state.success {
	color: var(--wp--preset--color--accent);
}

.contact-form .form-state.error {
	color: #a13b3b;
}

@media (max-width: 660px) {
	.contact-form .form-row.two {
		grid-template-columns: 1fr;
	}
}

/* ---------- Info list (contact side column) ---------- */
.info-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.info-list li {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: 24px;
	align-items: baseline;
	padding: 16px 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.info-list .label {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
}

.info-list em {
	font-style: italic;
}

/* ---------- Imprint body ---------- */
.imprint-body {
	max-width: 720px;
}

.imprint-meta {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 24px;
	padding: 16px 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-size: 16px;
}

.imprint-meta .label {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
}

.imprint-meta em {
	font-style: italic;
}

@media (max-width: 660px) {
	.imprint-meta {
		grid-template-columns: 1fr;
		gap: 6px;
	}
}

/* ---------- Editorial image crops ----------
   External-URL images don't get core's aspectRatio crop (that needs an
   attachment), so constrain them here to match the prototype's tidy ratios. */
.sf-cover img,
.single-work .wp-block-columns .wp-block-image img,
#team .wp-block-columns .wp-block-image img {
	width: 100%;
	object-fit: cover;
}

.sf-cover img,
#team .wp-block-columns .wp-block-image img {
	aspect-ratio: 4 / 5;
}

.case-longform .wp-block-image.alignfull img,
.case-longform .wp-block-image.alignwide img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
	width: 100%;
}

.single-work .wp-block-columns .wp-block-image img {
	aspect-ratio: 4 / 5;
}

/* Strecke trio: lead image 4/3, the two macros 4/5 (prototype). */
.single-work .strecke-trio .wp-block-column:first-child .wp-block-image img {
	aspect-ratio: 4 / 3;
}

/* Columns inside the strecke aren't 16/9 even when wide. */
.case-longform .wp-block-columns .wp-block-image.alignwide img {
	aspect-ratio: 4 / 5;
}

/* ---------- Motion: scroll reveal + global animation rules ---------- */
html {
	scroll-behavior: smooth;
}

.reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 800ms ease, transform 800ms ease;
}

.reveal.in {
	opacity: 1;
	transform: none;
}

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

	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.marquee .marquee__track,
	.wp-block-studio-feist-marquee .marquee__track {
		animation: none;
	}

	.wp-block-button .wp-block-button__link,
	.link-arrow,
	.project-card__media img,
	.work-archive__query .project-card__media img {
		transition: none;
	}
}

/* ---------- Archive page-hero meta row ---------- */
.page-hero__meta {
	margin-top: clamp(40px, 5vw, 64px);
	padding-top: 32px;
	border-top: 1px solid var(--wp--preset--color--line);
}

.page-hero__meta .page-hero__lead {
	max-width: 460px;
	margin: 0;
}

.page-hero__count {
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	margin: 0;
}

.page-hero__count strong {
	color: var(--wp--preset--color--ink);
	font-weight: 400;
	font-size: 24px;
	letter-spacing: 0;
	margin-right: 8px;
}

.page-hero__count .page-hero__count-more {
	font-size: 14px;
	letter-spacing: 0.04em;
	margin-left: 12px;
}

/* ---------- Archive card tags row ---------- */
.work-archive__query .project-card__tags {
	margin-top: 8px;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
}

.work-archive__query .project-card__tags a {
	color: inherit;
	text-decoration: none;
}

/* ---------- Contact: response strip green dot ---------- */
.response-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #5da66a;
	margin-right: 8px;
	vertical-align: middle;
	animation: sf-pulse-green 2.4s infinite;
}

@keyframes sf-pulse-green {
	0% {
		box-shadow: 0 0 0 0 rgba(93, 166, 106, 0.6);
	}
	70% {
		box-shadow: 0 0 0 8px rgba(93, 166, 106, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(93, 166, 106, 0);
	}
}

/* ---------- Contact grid: stack at 960px like the prototype ---------- */
@media (max-width: 960px) {
	.sf-contact-grid {
		flex-wrap: wrap !important;
	}

	.sf-contact-grid > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ---------- Imprint TOC chips ---------- */
.imprint-toc {
	list-style: none;
	padding: 0;
	margin: 24px 0 0;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.imprint-toc li a {
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 8px 14px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	color: var(--wp--preset--color--ink-muted);
	text-decoration: none;
	transition: all 200ms ease;
}

.imprint-toc li a:hover {
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}

@media (prefers-reduced-motion: reduce) {
	.response-dot {
		animation: none;
	}
}

/* ---------- WS Form (contact) ---------- */
/* Maps WS Form's markup onto the contact-form design from the prototype. */
.wsf-form {
	margin: 48px 0 0;
	padding: 0;
}

/* Reset WS Form's default tile/grid chrome */
.wsf-form .wsf-section,
.wsf-form .wsf-field-wrapper {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

/* Sections + fields use a 28px-gutter grid (matches .contact-form gap) */
.wsf-form .wsf-sections,
.wsf-form .wsf-fields {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 28px;
}

/* Span helpers from WS Form's column classes */
.wsf-form [class*="wsf-extra-small-12"] {
	grid-column: span 12;
}

.wsf-form [class*="wsf-extra-small-6"] {
	grid-column: span 6;
}

/* Field wrapper = .field (label stacked above control) */
.wsf-form .wsf-field-wrapper {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Submit row */
.wsf-form .wsf-field-wrapper[data-type="submit"] {
	margin-top: 16px;
	display: flex;
}

/* Labels */
.wsf-form .wsf-label {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-muted);
	margin: 0;
	font-weight: 500;
}

.wsf-form .wsf-required-wrapper .wsf-text-danger {
	color: var(--wp--preset--color--line);
	font-weight: 500;
}

/* Text inputs, selects, textareas — underline-only style */
.wsf-form .wsf-field:where(
	[type="text"],
	[type="email"],
	[type="tel"],
	[type="url"],
	[type="number"],
	select,
	textarea
) {
	width: 100%;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 12px 0;
	color: var(--wp--preset--color--ink);
	border-radius: 0;
	box-shadow: none;
	transition: border-color 200ms ease;
}

.wsf-form .wsf-field:where(
	[type="text"],
	[type="email"],
	[type="tel"],
	[type="url"],
	[type="number"],
	select,
	textarea
):focus {
	outline: 0;
	border-bottom-color: var(--wp--preset--color--ink);
	box-shadow: none;
}

.wsf-form .wsf-field::placeholder {
	color: var(--wp--preset--color--ink-muted);
	opacity: 0.7;
}

.wsf-form textarea.wsf-field {
	resize: vertical;
	min-height: 120px;
}

/* Select — custom caret (matches prototype's gradient arrow) */
.wsf-form .wsf-field-wrapper[data-type="select"] {
	position: relative;
}

.wsf-form select.wsf-field {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 28px;
	cursor: pointer;
}

.wsf-form .wsf-select-arrow {
	position: absolute;
	right: 0;
	bottom: 25px;
	width: 12px;
	height: 6px;
	pointer-events: none;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--wp--preset--color--ink) 50%),
		linear-gradient(135deg, var(--wp--preset--color--ink) 50%, transparent 50%);
	background-position: calc(100% - 6px) 0, 100% 0;
	background-size: 6px 6px;
	background-repeat: no-repeat;
}

/* Checkbox (GDPR consent) */
.wsf-form .wsf-field-wrapper[data-type="checkbox"] [data-row-checkbox] {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.wsf-form .wsf-field-wrapper[data-type="checkbox"] .wsf-label {
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.5;
	font-weight: inherit;
}

.wsf-form .wsf-field-wrapper[data-type="checkbox"] input[type="checkbox"].wsf-field {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 0;
	margin: 2px 0 0;
	flex-shrink: 0;
	cursor: pointer;
	position: relative;
	background: transparent;
}

.wsf-form .wsf-field-wrapper[data-type="checkbox"] input[type="checkbox"].wsf-field:checked::after {
	content: "";
	position: absolute;
	inset: 3px;
	background: var(--wp--preset--color--ink);
}

.wsf-form .wsf-field-wrapper[data-type="checkbox"] a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wsf-form .wsf-field-wrapper[data-type="checkbox"] em {
	font-style: italic;
}

/* Submit button — accent pill (auto width, not full-width) */
.wsf-form .wsf-button {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	width: auto;
	align-self: flex-start;
	padding: 18px 34px;
	border-radius: 999px;
	border: 0;
	font-family: inherit;
	font-size: 15px;
	letter-spacing: 0.04em;
	cursor: pointer;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--bg-primary);
	transition: background 200ms ease, color 200ms ease;
}

.wsf-form .wsf-button:hover {
	background: var(--wp--preset--color--ink);
}

.wsf-form .wsf-button em {
	font-style: italic;
}

/* Validation messages — hidden until WS Form flags the field invalid */
.wsf-form .wsf-invalid-feedback {
	display: none;
	font-size: 13px;
	color: #a13b3b;
	margin-top: 6px;
}

.wsf-form .wsf-invalid-feedback[aria-hidden="false"],
.wsf-form .wsf-field-wrapper.wsf-error .wsf-invalid-feedback,
.wsf-form .wsf-field-wrapper.wsf-invalid .wsf-invalid-feedback {
	display: block;
}

.wsf-form .wsf-field.wsf-error,
.wsf-form .wsf-field[aria-invalid="true"] {
	border-bottom-color: #a13b3b;
}

@media (max-width: 660px) {
	.wsf-form [class*="wsf-extra-small-6"] {
		grid-column: span 12;
	}
}