/**
 * SD Auto Zeeland — front-end CSS.
 *
 * Only rules theme.json cannot express belong here. Colours, spacing and
 * typography come from the generated custom properties, never hard-coded
 * values, so retuning the palette stays a theme.json edit.
 */

/* -------------------------------------------------------------------------
 * Screen reader text
 * Core only ships this class to block themes, and the skip link in header.php
 * depends on it.
 * ---------------------------------------------------------------------- */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	clip-path: none;
	display: block;
	height: auto;
	left: 5px;
	margin: 0;
	top: 5px;
	width: auto;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

/* -------------------------------------------------------------------------
 * Buttons
 * theme.json styles .wp-element-button, but only declares colour, radius,
 * padding and type — a plain anchor still needs to be laid out as a button.
 * ---------------------------------------------------------------------- */

a.wp-element-button {
	display: inline-block;
	text-align: center;
}

input.wp-element-button,
button.wp-element-button {
	border: 0;
	cursor: pointer;
}

/* Core's is-style-outline, for the two places the markup is no longer a
   Button block. The extra specificity keeps it ahead of theme.json's
   generated button rule regardless of stylesheet order. */
a.wp-element-button.sd-button--outline {
	background-color: transparent;
	border: 2px solid currentColor;
	color: var(--wp--preset--color--primary);
	padding: calc(0.8rem - 2px) calc(1.5rem - 2px);
}

a.wp-element-button.sd-button--outline:hover {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* -------------------------------------------------------------------------
 * Focus visibility
 * theme.json has no :focus-visible support, and the default UA ring is not
 * reliably visible against the primary colour.
 * ---------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
	border-radius: 2px;
}

.site-footer :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--accent);
}

.skip-link:focus {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	padding: 0.75rem 1.25rem;
	z-index: 100000;
}

/* -------------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	transition: box-shadow 0.2s ease;
	background-color: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-block: var(--wp--preset--spacing--20);
}

.site-header.is-scrolled {
	box-shadow: var(--wp--preset--shadow--sm);
}

.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

.site-header__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
}

.site-branding {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

/* Groups the menu and the CTAs so the bar keeps a clean two-part split:
   branding left, everything else right. */
.site-header__end {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--30);
}

.site-header__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--10);
}

/* theme.json's full button padding is too tall for a sticky bar. */
.site-header__actions a.wp-element-button {
	padding: 0.55rem 1rem;
	white-space: nowrap;
}

/* The outline variant absorbs its own 2px border so both buttons match. */
.site-header__actions a.wp-element-button.sd-button--outline {
	padding: calc(0.55rem - 2px) calc(1rem - 2px);
}

.site-branding .custom-logo-link {
	display: flex;
	line-height: 0;
}

.site-branding .custom-logo {
	width: auto;
	height: 40px;
	max-width: 100%;
}

/* Ported from theme.json's styles.blocks.core/site-title, which no longer
   matches now that the title is plain markup rather than a block. */
.site-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.site-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.site-title a:hover {
	color: var(--wp--preset--color--primary);
}

/* -------------------------------------------------------------------------
 * Navigation
 * Ported from theme.json's styles.blocks.core/navigation. The overlay below
 * reproduces what the Navigation block's "mobile" overlayMenu did.
 * ---------------------------------------------------------------------- */

.site-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.site-nav__list a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.site-nav__list a:hover,
.site-nav__list .current-menu-item > a,
.site-nav__list .current-menu-ancestor > a {
	color: var(--wp--preset--color--primary);
}

.site-nav__list > li {
	position: relative;
}

.site-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	right: 0;
	display: none;
	gap: var(--wp--preset--spacing--10);
	min-width: 12rem;
	margin: 0;
	padding: var(--wp--preset--spacing--20);
	list-style: none;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	box-shadow: var(--wp--preset--shadow--md);
}

.site-nav__list > li:hover > .sub-menu,
.site-nav__list > li:focus-within > .sub-menu {
	display: grid;
}

.site-nav__toggle {
	display: none;
}

@media (max-width: 781px) {
	.site-header__bar {
		gap: var(--wp--preset--spacing--20);
	}

	/* Keep the burger at the outer edge, past the CTAs. */
	.site-nav {
		order: 2;
	}

	.site-header__actions {
		order: 1;
	}

	.site-nav__toggle {
		display: grid;
		place-items: center;
		position: relative;
		width: 2.75rem;
		height: 2.75rem;
		padding: 0;
		background: none;
		color: var(--wp--preset--color--contrast);
		border: 1px solid var(--wp--preset--color--border);
		border-radius: 6px;
		cursor: pointer;
	}

	.site-nav__burger {
		display: block;
		position: relative;
		width: 1.125rem;
		height: 2px;
		background-color: currentColor;
	}

	.site-nav__burger::before,
	.site-nav__burger::after {
		content: "";
		position: absolute;
		left: 0;
		width: 100%;
		height: 2px;
		background-color: currentColor;
	}

	.site-nav__burger::before {
		top: -6px;
	}

	.site-nav__burger::after {
		top: 6px;
	}

	.site-nav__list {
		position: fixed;
		inset: 0;
		z-index: 30;
		display: none;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: flex-start;
		justify-content: flex-start;
		gap: var(--wp--preset--spacing--30);
		padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30);
		overflow-y: auto;
		background-color: var(--wp--preset--color--base);
		font-size: var(--wp--preset--font-size--large);
	}

	.site-nav.is-open .site-nav__list {
		display: flex;
	}

	.site-nav.is-open .site-nav__toggle {
		position: fixed;
		top: var(--wp--preset--spacing--20);
		right: var(--wp--preset--spacing--30);
		z-index: 31;
	}

	.site-nav__list .sub-menu {
		position: static;
		display: grid;
		padding: var(--wp--preset--spacing--20) 0 0 var(--wp--preset--spacing--20);
		border: 0;
		box-shadow: none;
	}
}

/* -------------------------------------------------------------------------
 * Footer
 * The footer inverts the palette, so the link colours theme.json sets
 * globally have to be overridden here. :not(.wp-element-button) keeps
 * buttons on their own styling.
 * ---------------------------------------------------------------------- */

.site-footer {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	padding-top: var(--wp--preset--spacing--60);
	padding-bottom: var(--wp--preset--spacing--50);
}

.site-footer a:not(.wp-element-button) {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.site-footer a:not(.wp-element-button):hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

.site-footer__content {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

.site-footer__columns {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

/* 2fr / 1.5fr / 1.5fr reproduces the 40% first column the Columns block had. */
@media (min-width: 48em) {
	.site-footer__columns {
		grid-template-columns: 2fr 1.5fr 1.5fr;
	}
}

.site-footer__column > * {
	margin: 0;
}

.site-footer__column > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

.site-footer__logo {
	line-height: 0;
}

.site-footer__logo .custom-logo-link {
	display: inline-flex;
}

/* Sized by height, not width: a logo can be a square badge or a wide
   wordmark, and only height keeps both legible. */
.site-footer__logo .custom-logo,
.site-footer__logo-img {
	display: block;
	width: auto;
	height: 32px;
	max-width: 100%;
}

.site-footer__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.site-footer__rule {
	border: 0;
	border-top: 1px solid currentColor;
	margin: 0;
	opacity: 0.2;
}

.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--20);
}

.site-footer__bottom p {
	margin: 0;
}

.site-footer__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
}

/* -------------------------------------------------------------------------
 * Company contact details
 * Company::contact_lines_html() emits the address, phone and email as three
 * groups so they can breathe. The address keeps its lines tight together.
 * ---------------------------------------------------------------------- */

.sd-contact__group {
	display: block;
}

.sd-contact__group + .sd-contact__group {
	margin-block-start: var(--wp--preset--spacing--10);
}

/* -------------------------------------------------------------------------
 * Main and entries
 * The templates hand vertical rhythm to CSS, because the block editor's
 * blockGap only governs blocks inside the_content().
 * ---------------------------------------------------------------------- */

.sd-main {
	margin-block-start: var(--wp--preset--spacing--60);
	margin-block-end: var(--wp--preset--spacing--70);
}

.sd-main--flush {
	margin-block: 0;
}

.sd-main__inner > * + *,
.sd-entry > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.sd-entry--flush > * + * {
	margin-block-start: 0;
}

.sd-archive__header > *,
.sd-entry__header > *,
.sd-entry__footer > * {
	margin: 0;
}

.sd-archive__header > * + *,
.sd-entry__header > * + *,
.sd-entry__footer > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

.sd-error-404 > * {
	margin: 0;
}

.sd-error-404 > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.sd-error-404__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.015em;
}

/* Ported from the core/heading "eyebrow" block style. register_block_style()
   only prints its CSS when the block itself renders, which no longer happens
   for the headings the templates write by hand. */
.sd-eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.sd-rule {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--border);
	margin: 0;
}

.sd-featured-image {
	margin: 0;
}

.sd-featured-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 10px;
}

/* Matches the contentSize override the full-width page template used. */
.sd-content--wide.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: var(--wp--style--global--wide-size);
}

.sd-post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.sd-post-meta__terms a {
	color: inherit;
}

.sd-post-nav .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
}

.sd-post-nav a {
	text-decoration: none;
}

.sd-post-nav__label {
	display: block;
}

.sd-post-nav a:hover .sd-post-nav__title {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * Hero
 * The trust list reuses the registered "checklist" list style, which tints
 * its tick with the primary colour — all but invisible on the hero's dark
 * gradient, hence the accent override.
 * ---------------------------------------------------------------------- */

.sd-hero-usps.is-style-checklist {
	display: grid;
	gap: var(--wp--preset--spacing--10) var(--wp--preset--spacing--30);
	margin-bottom: 0;
}

@media (min-width: 40em) {
	.sd-hero-usps.is-style-checklist {
		grid-auto-flow: column;
		grid-auto-columns: max-content;
	}
}

.wp-block-list.sd-hero-usps.is-style-checklist li::before {
	border-color: var(--wp--preset--color--accent);
}

/* -------------------------------------------------------------------------
 * Sell your car
 * Sits on the page ground between two white bands; the form card is what
 * anchors it visually.
 * ---------------------------------------------------------------------- */

.sd-sell {
	padding-block: var(--wp--preset--spacing--70);
}

.sd-sell__grid {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

@media (min-width: 56em) {
	.sd-sell__grid {
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--60);
	}
}

/*
 * The intro sets its rhythm per step rather than with one blanket sibling
 * margin: the eyebrow sits close under its title, and the gaps below the
 * title and above the checklist are each tuned separately. The reset means
 * anything without its own rule gets no margin at all.
 */
.sd-sell__intro > * {
	margin: 0;
}

/* spacing--10 is the smallest step on theme.json's scale. */
.sd-sell__intro .sd-eyebrow + .sd-sell__title {
	margin-block-start: var(--wp--preset--spacing--10);
}

.sd-sell__intro .sd-sell__title + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* Beats .sd-checklist's own margin reset on specificity. */
.sd-sell__intro .sd-checklist {
	margin-block-start: var(--wp--preset--spacing--30);
}

.sd-sell__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.015em;
}

.sd-sell__form {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: var(--wp--preset--spacing--40);
	box-shadow: var(--wp--preset--shadow--md);
}

/* Ported from the core/list "checklist" block style, for the lists templates
   write by hand — register_block_style() only emits its CSS when the block
   itself renders. */
.sd-checklist {
	display: grid;
	gap: var(--wp--preset--spacing--10);
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.sd-checklist li {
	position: relative;
	padding-left: 1.75em;
}

.sd-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 0.75em;
	height: 0.42em;
	border-left: 2px solid var(--wp--preset--color--primary);
	border-bottom: 2px solid var(--wp--preset--color--primary);
	transform: rotate(-45deg);
}

/* -------------------------------------------------------------------------
 * Form controls
 *
 * Inputs, textareas and buttons are content-box by default, so width:100%
 * plus horizontal padding and a border makes them wider than their wrapper.
 * select is the one control that escapes this, because UA stylesheets already
 * give it border-box — which is exactly why it was the only field lining up.
 *
 * Scoped to the theme's form contexts rather than applied globally, so no
 * existing layout shifts underneath it.
 * ---------------------------------------------------------------------- */

:is(.sd-form, .sd-comments) :where(input, select, textarea, button) {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * Contact Form 7
 * The plugin ships almost no styling. Hung on .sd-form rather than a section
 * class, so the sell-your-car card and the appointment dialog share one set
 * of rules; any other form on the site keeps whatever it already has.
 * ---------------------------------------------------------------------- */

.sd-form .wpcf7-form p {
	margin: 0 0 var(--wp--preset--spacing--20);
}

.sd-form .wpcf7-form p:last-child {
	margin-bottom: 0;
}

.sd-form label {
	display: grid;
	gap: 0.35rem;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

/* A stray <br> inside a label would become an empty grid row. */
.sd-form label br {
	display: none;
}

.sd-form :where(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea) {
	width: 100%;
	padding: 0.6rem 0.75rem;
	font: inherit;
	font-weight: 400;
	color: inherit;
	background-color: var(--wp--preset--color--surface);
	/* 3:1 boundary, as WCAG 1.4.11 asks for a control that identifies itself. */
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--muted) 70%, var(--wp--preset--color--surface));
	border-radius: 6px;
}

.sd-form textarea {
	min-height: 7rem;
	resize: vertical;
}

.sd-form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.sd-form .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-weight: 400;
}

/* The submit carries wp-element-button from the shortcode, so theme.json
   styles it; it only needs to fill the card. */
.sd-form input[type="submit"] {
	width: 100%;
}

.sd-form .wpcf7-not-valid-tip {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}

/* The "velden met * zijn verplicht" line the appointment form carries. */
.sd-form .subtext {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

/* -------------------------------------------------------------------------
 * Appointment dialog
 * SweetAlert2, themed to match the site. Scoped to the theme's own class so
 * an unrelated Swal call is left alone, the same way notices.css scopes its
 * popup. overflow is left to Swal so a long form still scrolls on a short
 * viewport.
 * ---------------------------------------------------------------------- */

.swal2-popup.sd-appointment-popup {
	padding: var(--wp--preset--spacing--40);
	border-radius: 10px;
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
}

.swal2-popup.sd-appointment-popup .swal2-title {
	padding: 0 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--contrast);
}

/*
 * Swal centres its content; a form reads left-aligned.
 *
 * It already sets overflow:auto here but never constrains the height, so a
 * tall form grows the popup past the viewport and Swal's container ends up
 * scrolling the whole dialog. Capping this element makes the form itself the
 * scroller, with the title staying put above it. overscroll-behavior stops
 * the scroll chaining to the page once the form hits its end.
 */
.swal2-popup.sd-appointment-popup .swal2-html-container {
	margin: 0;
	max-height: 65vh;
	max-height: 65dvh;
	overflow-y: auto;
	overscroll-behavior: contain;
	text-align: left;
	color: inherit;
}

/* -------------------------------------------------------------------------
 * Contact Form 7 response messages
 *
 * Unscoped on purpose: CF7's stock treatment is a 2px admin-blue box, which
 * looks wrong on every form the site has, not only the one on the front page.
 *
 * CF7 draws the status with `border-color` alone, at the same specificity an
 * obvious override here would have — so instead of escalating selectors, the
 * border is dropped and the frame drawn with box-shadow, which CF7 never
 * touches. Its per-status border-colour then lands on a zero-width border and
 * is simply invisible, no matter which stylesheet a cache plugin emits last.
 *
 * `display` is deliberately left alone so CF7 keeps hiding the box while the
 * form is in its init, resetting and submitting states.
 * ---------------------------------------------------------------------- */

.wpcf7 form.wpcf7-form .wpcf7-response-output {
	--sd-status: var(--wp--preset--color--muted);

	margin: var(--wp--preset--spacing--30) 0 0;
	padding: var(--wp--preset--spacing--20);
	border: 0;
	border-radius: 6px;
	box-shadow:
		inset 3px 0 0 0 var(--sd-status),
		inset 0 0 0 1px color-mix(in srgb, var(--sd-status) 40%, var(--wp--preset--color--surface));
	background-color: color-mix(in srgb, var(--sd-status) 7%, var(--wp--preset--color--surface));
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.5;
}

/*
 * Success and failure are the only two hues with no theme.json token, and they
 * should not have one — they are not palette choices and have no business in
 * the editor's colour picker. Both are desaturated to sit with the navy and
 * gold rather than shouting like CF7's stock #46b450 / #dc3232.
 *
 * Colour only reinforces the outcome. CF7 states it in words as well, so
 * nothing here depends on hue alone.
 */
.wpcf7 form.sent .wpcf7-response-output {
	--sd-status: #2f6b4f;
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
	--sd-status: #9b2c26;
}

/* Validation leans on the accent, pushed toward the ink so the bar is legible:
   the raw gold only manages 2.6:1 on white, this reaches 4.2:1. */
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	--sd-status: color-mix(in srgb, var(--wp--preset--color--accent) 70%, var(--wp--preset--color--contrast));
}

/* -------------------------------------------------------------------------
 * Post cards
 * Ported from the core/group "card" block style for the same reason as the
 * eyebrow above.
 * ---------------------------------------------------------------------- */

.sd-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
	gap: var(--wp--preset--spacing--40);
}

.sd-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	padding: var(--wp--preset--spacing--30);
	box-shadow: var(--wp--preset--shadow--sm);
}

.sd-card > * {
	margin: 0;
}

.sd-card__image {
	display: block;
	line-height: 0;
}

.sd-card__image img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 8px;
}

.sd-card__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.sd-card__title a:hover {
	color: var(--wp--preset--color--primary);
}

/* Keeps the excerpt on the baseline of the tallest card in the row. */
.sd-card__excerpt {
	margin-block-start: auto;
}

/* -------------------------------------------------------------------------
 * Pagination
 * ---------------------------------------------------------------------- */

.sd-pagination {
	font-size: var(--wp--preset--font-size--small);
}

.sd-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
}

.sd-pagination .page-numbers {
	text-decoration: none;
}

.sd-pagination .page-numbers.current {
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

/* -------------------------------------------------------------------------
 * Comments
 * ---------------------------------------------------------------------- */

.sd-comments {
	margin-block-start: var(--wp--preset--spacing--60);
}

.sd-comments > * + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.sd-comments__title {
	margin: 0;
}

.sd-comments__list,
.sd-comments__list .children {
	list-style: none;
	padding-left: 0;
}

.sd-comments__list .children {
	margin-block-start: var(--wp--preset--spacing--30);
	padding-left: var(--wp--preset--spacing--30);
	border-left: 1px solid var(--wp--preset--color--border);
}

.sd-comments__list > li + li {
	margin-block-start: var(--wp--preset--spacing--40);
}

.sd-comments .comment-meta {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
}

.sd-comments .avatar {
	border-radius: 50%;
}

.sd-comments .comment-author {
	font-weight: 600;
}

.sd-comments .comment-metadata,
.sd-comments .comment-metadata a {
	color: var(--wp--preset--color--muted);
}

.sd-comments .comment-content {
	font-size: var(--wp--preset--font-size--small);
}

.sd-comments .comment-form {
	display: grid;
	gap: var(--wp--preset--spacing--20);
}

.sd-comments :where(input[type="text"], input[type="email"], input[type="url"], textarea) {
	width: 100%;
	padding: 0.6rem 0.75rem;
	font: inherit;
	color: inherit;
	background-color: var(--wp--preset--color--surface);
	/*
	 * Form controls need a 3:1 boundary under WCAG 1.4.11, which the light
	 * decorative border colour cannot reach against white. Mixing it toward
	 * the slate keeps the hue but earns the contrast.
	 */
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--muted) 70%, var(--wp--preset--color--surface));
	border-radius: 6px;
}

/* -------------------------------------------------------------------------
 * Blocks
 * ---------------------------------------------------------------------- */

.wp-block-post-featured-image img {
	width: 100%;
	height: auto;
}

/* Cards in a grid should stretch to the row height. */
.wp-block-post-template.is-layout-grid > li > .wp-block-group.is-style-card {
	height: 100%;
}

.wp-block-table :where(td, th) {
	border-color: var(--wp--preset--color--border);
}

/* -------------------------------------------------------------------------
 * Preferences and print
 * ---------------------------------------------------------------------- */

@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;
	}
}

@media print {
	.site-header,
	.site-footer,
	.site-nav__toggle,
	.sd-comments,
	.sd-pagination,
	.sd-post-nav,
	.wp-block-comments,
	.wp-block-query-pagination,
	.wp-block-post-navigation-link {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		word-break: break-all;
	}
}