/*
 * Block styles.
 *
 * Loaded only on pages that use one of these blocks, because block.json
 * declares it as the block's own style — WordPress handles the conditional
 * enqueue. Everything here uses theme.json tokens so the blocks inherit the
 * design system rather than restating it.
 */

/* --------------------------------------------------------- service grid */

.nyd-card-list,
.nyd-gallery__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.nyd-service-grid__heading,
.nyd-gallery__heading,
.nyd-faq__heading {
	margin-block-end: var(--wp--preset--spacing--30);
}

.nyd-service-grid--cols-1 .nyd-card-list,
.nyd-gallery--cols-1 .nyd-gallery__list { grid-template-columns: 1fr; }

@media (min-width: 40rem) {
	.nyd-service-grid--cols-2 .nyd-card-list,
	.nyd-service-grid--cols-3 .nyd-card-list,
	.nyd-service-grid--cols-4 .nyd-card-list,
	.nyd-gallery--cols-2 .nyd-gallery__list,
	.nyd-gallery--cols-3 .nyd-gallery__list,
	.nyd-gallery--cols-4 .nyd-gallery__list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 60rem) {
	.nyd-service-grid--cols-3 .nyd-card-list,
	.nyd-gallery--cols-3 .nyd-gallery__list { grid-template-columns: repeat(3, 1fr); }
	.nyd-service-grid--cols-4 .nyd-card-list,
	.nyd-gallery--cols-4 .nyd-gallery__list { grid-template-columns: repeat(4, 1fr); }
}

/* ================================================================= tiles == */
/*
 * Not cards. The photograph IS the tile: it fills the whole area and the
 * caption sits on it, over a gradient that only darkens the bottom third.
 * There is no panel, no border radius and no circular arrow button -- those
 * three together were what made the previous design read as a copy of the
 * reference site rather than its own thing.
 *
 * The numbers come from a CSS counter, so nothing in PHP has to know the
 * order and the sequence stays correct if a service is added or removed.
 */
.nyd-card-list { counter-reset: nyd-tile; }

.nyd-card {
	position: relative;
	counter-increment: nyd-tile;
	background: var(--wp--preset--color--surface-2);
	border-radius: 16px;
	min-block-size: 20rem;
	display: flex;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(19, 26, 23, 0.05), 0 8px 24px rgba(19, 26, 23, 0.08);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.nyd-card:hover {
	box-shadow: 0 2px 4px rgba(19, 26, 23, 0.06), 0 16px 40px rgba(19, 26, 23, 0.13);
	transform: translateY(-3px);
}

.nyd-card__media,
.nyd-card__media--empty {
	position: absolute;
	inset: 0;
	aspect-ratio: auto;
	overflow: hidden;
}

/* Awaiting a photograph: a flat bone panel. Ink text sits on this at
   14:1, where over the scrim it was closer to 2:1 and unreadable. */
.nyd-card__media--empty {
	background: var(--wp--preset--color--surface-2);
}

.nyd-card__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s cubic-bezier(0.2, 0, 0.1, 1);
}

.nyd-card:hover .nyd-card__img { transform: scale(1.03); }

/* Only the bottom third is darkened, so the room stays visible. A flat
   overlay would mute every photograph on the page. */
.nyd-card__media:not(.nyd-card__media--empty)::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(12, 14, 16, 0.88) 0%,
		rgba(12, 14, 16, 0.55) 26%,
		rgba(12, 14, 16, 0.08) 55%,
		rgba(12, 14, 16, 0) 100%
	);
}

.nyd-card__link {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	inline-size: 100%;
	padding: var(--wp--preset--spacing--30);
	text-decoration: none;
	color: #FFFFFF;
}

.nyd-card__link:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: -6px;
}

/* The section number, set in the mono face against a hairline rule. */
.nyd-card__link::before {
	content: counter(nyd-tile, decimal-leading-zero);
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--30);
	inset-inline-start: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.85);
}

.nyd-card__title {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.05;
	margin: 0 0 0.35rem;
	color: #FFFFFF;
}

.nyd-card__excerpt {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.82);
	max-inline-size: 30ch;
}

/* A rule that draws itself across the tile on hover, instead of an arrow. */
.nyd-card__go {
	display: block;
	margin-block-start: var(--wp--preset--spacing--20);
	block-size: 1px;
	inline-size: 2.5rem;
	background: rgba(255, 255, 255, 0.9);
	transition: inline-size 0.35s cubic-bezier(0.2, 0, 0.1, 1);
}

.nyd-card__go > svg { display: none; }

.nyd-card:hover .nyd-card__go,
.nyd-card__link:focus-visible .nyd-card__go { inline-size: 5.5rem; }

/* No photograph yet: a plain bone panel with ink text rather than white on
   nothing, which would be invisible. */
.nyd-card:has(.nyd-card__media--empty) .nyd-card__link { color: var(--wp--preset--color--ink); }
.nyd-card:has(.nyd-card__media--empty) .nyd-card__title { color: var(--wp--preset--color--ink); }
.nyd-card:has(.nyd-card__media--empty) .nyd-card__excerpt { color: var(--wp--preset--color--ink-2); }
.nyd-card:has(.nyd-card__media--empty) .nyd-card__link::before { color: var(--wp--preset--color--ink-3); }
.nyd-card:has(.nyd-card__media--empty) .nyd-card__go { background: var(--wp--preset--color--ink); }

/* Priority chip is an editor-only affordance -- visitors never see it. */
.nyd-card__chip {
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--30);
	inset-inline-end: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	padding: 0.1rem 0.4rem;
	background: rgba(255, 255, 255, 0.9);
	color: var(--wp--preset--color--ink);
}

@media (prefers-reduced-motion: reduce) {
	.nyd-card__img,
	.nyd-card__go { transition: none; }
	.nyd-card:hover .nyd-card__img { transform: none; }
}

/* ================================================================== hero == */
/*
 * Full-bleed photographic hero. Breaks out of the theme's constrained layout
 * with a viewport-width technique rather than 100vw, because 100vw includes
 * the scrollbar and produces a horizontal scroll on Windows.
 */
.nyd-hero {
	position: relative;
	margin-block-end: var(--wp--preset--spacing--50);
	display: grid;
	isolation: isolate;
	background: var(--wp--preset--color--surface-2);
}

/*
 * The section carries .alignfull, so WordPress's own root-padding rule does
 * the breaking out. The only thing left to undo is the top margin the block
 * gap would otherwise put between the header and the hero.
 */
.nyd-hero.alignfull { margin-block-start: 0; }

.nyd-hero__media,
.nyd-hero__inner { grid-area: 1 / 1; }

/*
 * Absolutely positioned so the photograph can never drive the hero's height.
 * While it was a grid item, a portrait image sized the row to its own natural
 * aspect: a 1366x2048 nursery photo produced a hero 2026px tall, pushing the
 * heading and the call to action completely off the screen. object-fit:cover
 * only crops within a box that already has a height, and min-block-size sets
 * a floor, not a ceiling.
 *
 * Now the text block alone decides how tall the hero is, and the image covers
 * whatever that turns out to be — so any aspect ratio is safe.
 */
.nyd-hero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.nyd-hero__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

/*
 * The scrim. Text over a photograph is only legible if the photograph is
 * darkened underneath it, and the darkening has to be strongest where the
 * text is. A flat overlay would either wash out the image or fail the
 * contrast check on the bright parts of it.
 */
/*
 * The hero text block is CENTRED (a 46rem box at ~24%–76% of the viewport),
 * so the scrim must hold its darkness through 78% of the width, not fade at
 * 42% the way the first version did. That fade measured 2.0–2.55:1 behind
 * the glyphs on bright photographs (AA large text needs 3:1, body 4.5:1);
 * 0.62 opacity over the brightest pixel in the library computes to ≥4.5:1
 * for white text. Verified by sampling rendered pixels, not by the token
 * suite — a photograph is not a token.
 */
.nyd-hero.has-image .nyd-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		rgba(10, 12, 14, 0.82) 0%,
		rgba(10, 12, 14, 0.68) 30%,
		rgba(10, 12, 14, 0.62) 78%,
		rgba(10, 12, 14, 0.15) 100%
	);
}

.nyd-hero__inner {
	position: relative;
	z-index: 1;
	align-self: center;
	inline-size: min(100% - 2 * var(--wp--preset--spacing--30), 76rem);
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--50);
	max-inline-size: 46rem;
}

.nyd-hero--short .nyd-hero__inner { padding-block: var(--wp--preset--spacing--40); }

/*
 * Sized so the primary call to action stays above the fold on a laptop. The
 * first version was 78vh, which looked impressive in a screenshot and pushed
 * "Get an estimate" off the bottom of a 768px-tall screen — a hero that hides
 * the thing it exists to make you click.
 */
.nyd-hero--tall { min-block-size: min(62vh, 30rem); }
.nyd-hero--short { min-block-size: min(40vh, 20rem); }

/*
 * Split variant: copy on the left, the booking widget as a card on the
 * right — the service-page banner. The widget preselects the current
 * service in its own render, so the card arrives pre-filled.
 */
.nyd-hero--split .nyd-hero__inner {
	max-inline-size: none;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: var(--wp--preset--spacing--50);
	align-items: center;
}

.nyd-hero--split .nyd-hero__copy { max-inline-size: 46rem; }

/* The widget heading and intro render above its white panel, i.e. on the
   photograph — light treatment, same as the homepage hero card. */
.nyd-hero__card .nyd-book__heading {
	color: #FFFFFF;
	font-size: var(--wp--preset--font-size--x-large);
	margin-block: 0 0.4rem;
}

.nyd-hero__card .nyd-book__intro {
	color: #C9D3CC;
	font-size: var(--wp--preset--font-size--small);
	margin-block-end: var(--wp--preset--spacing--20);
	max-inline-size: none;
}

@media (max-width: 64rem) {
	.nyd-hero--split .nyd-hero__inner { grid-template-columns: minmax(0, 1fr); }
}

.nyd-hero__eyebrow {
	display: inline-block;
	margin: 0 0 var(--wp--preset--spacing--20);
	padding: 0 0 0.55rem;
	border-block-end: 1px solid rgba(255, 255, 255, 0.45);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #FFFFFF;
}

/*
 * The heading face, not the body face. This said `--body` from when the theme
 * had one family doing both jobs, so the page's only h1 kept rendering in the
 * sans while every other heading moved to the serif — the most visible element
 * on the site silently opting out of the type system.
 *
 * Weight 400 and no negative tracking: Marcellus ships a single weight, so 700
 * produced a synthetic bold, and display serifs do not want the tight tracking
 * a grotesque does.
 */
.nyd-hero__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--display);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: 0;
	color: #FFFFFF;
	text-wrap: pretty;
}

.nyd-hero__text {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.9);
	max-inline-size: 34rem;
}

.nyd-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-block-start: var(--wp--preset--spacing--30);
}

/* No photograph yet: fall back to the sand band and ink text, so a page
   without a featured image still looks deliberate rather than broken. */
.nyd-hero:not(.has-image) .nyd-hero__eyebrow {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink-3);
	backdrop-filter: none;
}

.nyd-hero:not(.has-image) .nyd-hero__title { color: var(--wp--preset--color--ink); }
.nyd-hero:not(.has-image) .nyd-hero__text  { color: var(--wp--preset--color--ink-2); }
.nyd-hero:not(.has-image) { min-block-size: 0; }
.nyd-hero:not(.has-image) .nyd-hero__inner { padding-block: var(--wp--preset--spacing--50); }

/* ------------------------------------------------------------------ buttons */
.nyd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1.05rem 2.3rem;
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 500;
	font-size: 0.8125rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.nyd-btn--solid {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
}

.nyd-btn--solid:hover,
.nyd-btn--solid:focus-visible {
	background: var(--wp--preset--color--accent-ink);
	color: var(--wp--preset--color--surface);
}

.nyd-btn--ghost {
	background: transparent;
	color: #FFFFFF;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.nyd-btn--ghost:hover,
.nyd-btn--ghost:focus-visible {
	background: #FFFFFF;
	color: var(--wp--preset--color--ink);
}

.nyd-hero:not(.has-image) .nyd-btn--ghost {
	background: transparent;
	color: var(--wp--preset--color--ink);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink);
}

@media (prefers-reduced-motion: reduce) {
	.nyd-btn { transition: none; }
}

/* =============================================================== booking == */
/*
 * The estimate form. It had no styles at all, so it rendered as raw browser
 * controls — a 19px-tall select and a visible honeypot labelled "Leave this
 * empty". It now sits in the homepage hero, so it is the first thing a
 * visitor sees.
 */

/*
 * THE HONEYPOT. Stays in the DOM, invisible to people. display:none is avoided
 * deliberately: some bots skip hidden inputs, and skipping it is how they pass.
 */
.nyd-book__hp {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.nyd-book__form {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 18px;
	padding: var(--wp--preset--spacing--40);
}

.nyd-book__step { margin: 0; padding: 0; border: 0; }

.nyd-book__step > legend {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	padding: 0;
	margin-block-end: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400;
	line-height: 1.2;
}

/*
 * view.js focuses the legend on every step change for screen-reader
 * orientation, including the first render. Chrome counts that as
 * :focus-visible and paints a ring, so the ring is suppressed rather than the
 * focus. The legend carries tabindex="-1"; nobody reaches it by keyboard.
 */
.nyd-book__step > legend:focus,
.nyd-book__step > legend:focus-visible { outline: none; }

.nyd-book__num {
	flex: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--accent);
}

.nyd-book__label {
	display: block;
	margin-block: var(--wp--preset--spacing--20) 0.4rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}

.nyd-book__input,
.nyd-book__select {
	inline-size: 100%;
	padding: 0.75rem 0.9rem;
	font: inherit;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 10px;
}

/* appearance:none plus a drawn chevron — the OS select matches nothing else. */
.nyd-book__select {
	appearance: none;
	padding-inline-end: 2.5rem;
	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% - 1.15rem) 55%, calc(100% - 0.8rem) 55%;
	background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
	background-repeat: no-repeat;
}

.nyd-book__input:focus-visible,
.nyd-book__select:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--accent);
}

textarea.nyd-book__input { resize: vertical; min-block-size: 5rem; line-height: 1.6; }

.nyd-book__options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block-start: var(--wp--preset--spacing--20);
}

.nyd-book__options--stack { flex-direction: column; gap: 0.4rem; }

.nyd-book__option {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	padding: 0.6rem 0.9rem;
	background: var(--wp--preset--color--ground);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 10px;
	cursor: pointer;
	line-height: 1.4;
	font-size: var(--wp--preset--font-size--small);
}

.nyd-book__option:hover { border-color: var(--wp--preset--color--ink-3); }

.nyd-book__option:has(:checked) {
	border-color: var(--wp--preset--color--accent);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent);
}

.nyd-book__option input { flex: none; margin-block-start: 0.15rem; accent-color: var(--wp--preset--color--accent); }

.nyd-book__estimate {
	padding: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--ground);
	border-radius: 12px;
	margin-block: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

.nyd-book__estimate-note { margin: 0; color: var(--wp--preset--color--ink-3); font-size: var(--wp--preset--font-size--small); }

.nyd-book__estimate-figure {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.nyd-book__contact-intro { margin-block: var(--wp--preset--spacing--30) 0; font-weight: 600; }

.nyd-book__nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin-block-start: var(--wp--preset--spacing--30);
	padding-block-start: var(--wp--preset--spacing--30);
	border-block-start: 1px solid var(--wp--preset--color--rule);
}

.nyd-book__progress {
	margin: 0 0 0 auto;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-3);
}

.nyd-book__form button {
	padding: 0.85rem 1.6rem;
	font: inherit;
	font-weight: 600;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--surface);
	cursor: pointer;
}

.nyd-book__form button:hover,
.nyd-book__form button:focus-visible { background: var(--wp--preset--color--accent-ink); }

.nyd-book__back {
	background: transparent;
	color: var(--wp--preset--color--ink);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--rule);
}

.nyd-book__back:hover { background: var(--wp--preset--color--ground); color: var(--wp--preset--color--ink); }

/*
 * :not([hidden]) is load-bearing. view.js hides this row with the hidden
 * ATTRIBUTE until the final step, and an author `display` beats the user
 * agent's [hidden]{display:none} regardless of specificity — without the
 * guard, "Send request" sits under step 1 from page load.
 */
.nyd-book__actions:not([hidden]) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

/* ------------------------------------------------------------------- FAQ == */
/*
 * The accordion rows as Warm Magazine cards: white plates on the page ground,
 * a serif question, and a drawn plus in a terracotta ring that turns into a
 * cross when the row is open. <details>/<summary> still does all the work —
 * no JS, keyboard for free; this is only the dress.
 */
.nyd-faq__item {
	background: var(--wp--preset--color--surface, #fff);
	border-radius: 14px;
	box-shadow: 0 1px 2px rgba(19, 26, 23, 0.05), 0 6px 18px rgba(19, 26, 23, 0.06);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.nyd-faq__item + .nyd-faq__item { margin-block-start: 0.75rem; }

.nyd-faq__item:hover { box-shadow: 0 2px 4px rgba(19, 26, 23, 0.06), 0 14px 34px rgba(19, 26, 23, 0.11); transform: translateY(-2px); }

.nyd-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	padding: 1.15rem 1.4rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.35;
	color: var(--wp--preset--color--ink);
}

.nyd-faq__q::-webkit-details-marker { display: none; }

/* The plus. Two strokes drawn with gradients so no SVG file is needed. */
.nyd-faq__q::after {
	content: "";
	flex: none;
	inline-size: 1.9rem;
	block-size: 1.9rem;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: 999px;
	background:
		linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) center / 0.85rem 1.5px no-repeat,
		linear-gradient(var(--wp--preset--color--accent), var(--wp--preset--color--accent)) center / 1.5px 0.85rem no-repeat;
	transition: transform 0.25s ease, background-color 0.25s ease;
}

.nyd-faq__item[open] > .nyd-faq__q::after { transform: rotate(45deg); }

.nyd-faq__item[open] > .nyd-faq__q { color: var(--wp--preset--color--accent-ink); }

.nyd-faq__q:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.nyd-faq__a {
	padding: 0 1.4rem 1.3rem;
	color: var(--wp--preset--color--ink-2);
	border-block-start: 1px solid var(--wp--preset--color--rule);
	padding-block-start: 1.05rem;
	margin-inline: 1.4rem;
	padding-inline: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.65;
	max-inline-size: 60ch;
}

.nyd-faq__a > :first-child { margin-block-start: 0; }
.nyd-faq__a > :last-child { margin-block-end: 0; }

@media (prefers-reduced-motion: reduce) {
	.nyd-faq__q::after, .nyd-faq__item { transition: none; }
}

/* ------------------------------------------------------- editor affordances */

.nyd-faq-editor__row {
	border: 1px solid var(--wp--preset--color--rule, #ddd);
	border-radius: 3px;
	padding: 0.75rem;
	margin-block-end: 0.75rem;
}

.nyd-faq-editor__actions {
	display: flex;
	gap: 0.25rem;
}

.nyd-ba-editor__pick {
	border: 1px solid var(--wp--preset--color--rule, #ddd);
	border-radius: 3px;
	padding: 0.75rem;
	margin-block-end: 0.75rem;
}

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