/* SLED Adopta: things theme.json cannot express. */

/* Visible focus: 3 px primary ring, 2 px offset. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--primary);
	outline-offset: var(--wp--custom--focus--offset);
}

/* Skip link and screen-reader text stay usable when focused. */
.skip-link:focus,
.screen-reader-text:focus {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	padding: 0.75rem 1rem;
	z-index: 100000;
}

/* Comfortable reading and large tap targets (the height itself is in theme.json: styles.elements.button). */
body {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	cursor: pointer;
}

.wp-block-navigation a,
.wp-block-navigation .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
}

/* Tap targets: every link, button and control that people press is at least the --tap token tall (and wide, where it is a lone icon or number). */
.wp-block-navigation a,
.wp-block-navigation .wp-block-navigation-item__content,
input:where([type="text"], [type="email"], [type="tel"], [type="url"], [type="number"], [type="search"]),
select,
textarea,
.sled-header__brand a,
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.sled-footer a,
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers,
.sled-pagination a,
.sled-pagination .page-numbers,
.sled-back-link a,
.sled-hero__toggle,
.sled-home-section__link a,
.wp-block-details > summary,
.sled-adoptado__name a {
	min-height: var(--wp--custom--tap);
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close,
.sled-footer__social a,
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers,
.sled-pagination a,
.sled-pagination .page-numbers {
	min-width: var(--wp--custom--tap);
}

/* Form fields: big, bordered, never colour-only. */
input:where([type="text"], [type="email"], [type="tel"], [type="url"], [type="number"], [type="search"]),
select,
textarea {
	font: inherit;
	padding: 0.5rem 0.75rem;
	border: var(--wp--custom--border--control) solid var(--wp--preset--color--muted);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	max-width: 100%;
}

/*
 * Card ("Tarjeta" block style on Group, styles/blocks/group-card.json): colours, border and radius live there.
 * CSS clips the photo to the rounded corners and styles the blocks inside a card. Those inner styles are here
 * and not in the style's JSON because core prints a JSON block style's inner rules once per card (about 1.25 kB
 * each); here they are printed once. :root :where() keeps core's low specificity, so the cascade is unchanged.
 */
.is-style-card {
	overflow: hidden;
}

:root :where(.is-style-card .wp-block-post-featured-image) {
	margin-top: 0;
	margin-bottom: 0;
}

:root :where(.is-style-card .wp-block-post-featured-image img, .is-style-card .wp-block-post-featured-image .block-editor-media-placeholder, .is-style-card .wp-block-post-featured-image .wp-block-post-featured-image__overlay) {
	border-radius: 0;
}

:root :where(.is-style-card .wp-block-post-title) {
	line-height: 1.25;
	margin-top: 0;
	margin-bottom: 0;
}

:root :where(.is-style-card .wp-block-post-title a:where(:not(.wp-element-button))) {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

:root :where(.is-style-card .wp-block-post-title a:where(:not(.wp-element-button)):hover) {
	text-decoration: underline;
}

:root :where(.is-style-card .wp-block-post-excerpt) {
	color: var(--wp--preset--color--muted);
	margin-top: 0;
	margin-bottom: 0;
}

img {
	height: auto;
	max-width: 100%;
}

/* Respect people who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}

/* Link hover: thicker underline (theme.json has no property for it). */
a:hover {
	text-decoration-thickness: var(--wp--custom--underline--hover);
	text-underline-offset: var(--wp--custom--underline--offset);
}

/* Bound fields that came back empty leave no gaps (content areas only). */
main .wp-block-paragraph:empty,
main p:empty,
.entry-content p:empty {
	display: none;
}

/* Header: sticky only where there is room, never changes height. */
header.wp-block-template-part {
	background: var(--wp--preset--color--base);
	border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--surface);
	z-index: var(--wp--custom--z--sticky);
}

/* Anchors and the skip link land below the sticky header. */
@media (min-width: 900px) {
	html {
		scroll-padding-top: 7rem;
	}
}

@media (min-width: 900px) {
	header.wp-block-template-part {
		position: sticky;
		top: 0;
	}

	.admin-bar header.wp-block-template-part {
		top: var(--wp-admin--admin-bar--height, 32px);
	}
}

.sled-header__bar,
.sled-header__brand,
.sled-header__actions {
	min-width: 0;
}

/* A logo keeps its set width (wordmarks are unreadable when squeezed); a long site title wraps instead. */
.sled-header__brand .wp-block-site-logo {
	flex-shrink: 0;
	max-width: 50vw;
}

.sled-header__brand .wp-block-site-title {
	margin: 0;
	line-height: 1.1;
	font-size: var(--wp--preset--font-size--medium);
}

@media (min-width: 600px) {
	.sled-header__brand .wp-block-site-title {
		font-size: var(--wp--preset--font-size--large);
	}
}

.sled-header__brand a {
	display: inline-flex;
	align-items: center;
}

.sled-header__cta {
	margin: 0;
}

/* Phones: brand and menu share the first row, the button gets its own full-width row. No hidden link, no overflow. */
@media (max-width: 479px) {
	.sled-header__bar {
		flex-wrap: wrap;
		row-gap: 0.5rem;
	}

	.sled-header .sled-header__bar > .sled-header__actions {
		display: contents;
	}

	.sled-header__brand {
		flex: 1 1 0;
	}

	.sled-header .wp-block-navigation {
		flex: 0 0 auto;
		order: 2;
	}

	.sled-header__brand {
		order: 1;
	}

	.sled-header__cta {
		flex: 1 1 100%;
		order: 3;
	}

	.sled-header__cta .wp-block-button,
	.sled-header__cta .wp-block-button__link {
		width: 100%;
	}
}

/* Mobile menu button: big, bordered, and labelled with the (translated) aria-label. */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	padding: 0.5rem 0.75rem;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	white-space: nowrap;
}

.wp-block-navigation__responsive-container-open::after,
.wp-block-navigation__responsive-container-close::after {
	content: attr(aria-label);
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	border: var(--wp--custom--border--control) solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--control);
	color: var(--wp--preset--color--primary);
}

.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg {
	width: 32px;
	height: 32px;
}

.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* The close button sits in a row like the open button, and the first item starts below it (no overlap). */
.wp-block-navigation .wp-block-navigation__responsive-container-close {
	display: inline-flex;
}

.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 5rem;
}

/* Open menu on a phone: items start at the left, where people read from, whatever the header's alignment. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	align-items: flex-start;
	text-align: start;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--large);
}

/* Footer: roomy, links at least 48 px tall. */
.sled-footer__grid {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}

.sled-footer__grid > * {
	margin: 0;
}

.sled-footer a {
	display: inline-flex;
	align-items: center;
}

.sled-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sled-footer__social:empty,
.sled-footer__social:not(:has(li)) {
	display: none;
}

/* No contact details configured: no heading either. */
.sled-footer__contact:not(:has(li, p:not(:empty))) {
	display: none;
}

.sled-footer .sled-footer__social.wp-block-social-links .wp-social-link {
	color: var(--wp--preset--color--primary);
}

/* "More articles" disappears when there are no other posts. */
.sled-mas-articulos:not(:has(.wp-block-post-template li)) {
	display: none;
}

.sled-footer__social a {
	justify-content: center;
}

.sled-footer__credit {
	margin-top: var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--muted);
}

/* Cards in query grids: the photo fills the card (title and excerpt styles are in the card block above). */
.is-style-card .wp-block-post-featured-image img {
	width: 100%;
}

.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.wp-block-search__inside-wrapper {
	gap: 0.5rem;
}

/* ------------------------------------------------------------------ */
/* Animals (templates archive-animal and single-animal, SLED Adopciones) */

/* Listing grid: 1 column on phones, 2 from 600 px, 3 from 900 px, 4 from 1200 px. */
.wp-block-post-template.sled-animal-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--50);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wp-block-post-template.sled-animal-grid > li {
	margin: 0;
	min-width: 0;
}

@media (min-width: 600px) {
	.wp-block-post-template.sled-animal-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.wp-block-post-template.sled-animal-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.wp-block-post-template.sled-animal-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.sled-animal-count {
	margin-block: 0 var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--muted);
}

.sled-animal-filters {
	margin-block: var(--wp--preset--spacing--50);
}

/* Card: the whole card is clickable through the name link (one link per card). */
.sled-animal-card {
	position: relative;
	height: 100%;
}

.sled-animal-card__media {
	position: relative;
	aspect-ratio: 1;
	background: var(--wp--preset--color--surface);
}

.sled-animal-card__media > * {
	margin: 0;
}

.sled-animal-card .wp-block-post-featured-image {
	margin: 0;
	height: 100%;
}

.sled-animal-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The status badge sits on the photo. The block's own element is positioned, so the editor (which wraps it) matches the site. */
.sled-animal-card__media > .wp-block-sled-adopciones-estado {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	margin: 0;
}

.sled-animal-card__media > .wp-block-sled-adopciones-estado .sled-adop-estado--compact {
	margin: 0;
}

.sled-animal-card .sled-adop-estado--compact .sled-adop-badge {
	box-shadow: var(--wp--custom--shadow--soft);
}

.sled-animal-card__title {
	margin: 0;
	line-height: 1.25;
}

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

.sled-animal-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--wp--custom--radius--card);
}

.sled-animal-card:hover .sled-animal-card__title a {
	text-decoration: underline;
	text-decoration-thickness: var(--wp--custom--underline--hover);
	text-underline-offset: var(--wp--custom--underline--offset);
}

/* Keyboard focus on the name outlines the whole card. */
.sled-animal-card:has(.sled-animal-card__title a:focus-visible) {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--primary);
	outline-offset: var(--wp--custom--focus--offset);
}

.sled-animal-card__title a:focus-visible {
	outline: none;
}

/* Browsers without :has(): ring drawn inside the card (its rounded edge clips anything outside). */
@supports not selector(:has(*)) {
	.sled-animal-card__title a:focus-visible::after {
		outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--primary);
		outline-offset: calc(-1 * var(--wp--custom--focus--width));
	}
}

/* Facts line "2 años · Grande · Zapopan" (a wrapping Row, gap set in the pattern): dots only between facts that have text. */
.sled-animal-card__facts {
	row-gap: 0;
	color: var(--wp--preset--color--muted);
	line-height: 1.4;
}

.sled-animal-card__facts > * {
	margin: 0;
}

.sled-animal-card__facts > p:empty {
	display: none;
}

.sled-animal-card__facts > p:not(:empty) ~ p:not(:empty)::before {
	content: "·";
	content: "·" / "";
	margin-inline-end: 0.5rem;
	font-weight: 700;
}

/* Pagination: big, well-spaced targets. */
.sled-pagination {
	gap: 0.5rem;
	font-weight: 700;
}

.sled-pagination a,
.sled-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 0.75rem;
	border-radius: var(--wp--custom--radius--control);
}

.sled-pagination a {
	border: var(--wp--custom--border--control) solid var(--wp--preset--color--primary);
	text-decoration: none;
}

.sled-pagination .page-numbers.current {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.sled-pagination .page-numbers.dots {
	border: 0;
}

/* Animal page. */
.sled-back-link {
	margin-block: 0 var(--wp--preset--spacing--40);
}

.sled-back-link a {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-weight: 700;
}

.sled-animal-hero {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}

.sled-animal-hero > * {
	margin: 0;
	min-width: 0;
}

@media (min-width: 900px) {
	.sled-animal-hero {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}
}

.sled-animal-summary .wp-block-post-title {
	margin: 0;
}

/* A report's title carries the neighborhood ("Se busca · Perro · Col. Americana…"): smaller than an animal's name. */
.sled-report-summary .wp-block-post-title {
	font-size: var(--wp--preset--font-size--x-large);
	overflow-wrap: anywhere;
}

.sled-report-share {
	margin: 0;
}

.sled-facts {
	display: grid;
	gap: 0;
	border-top: var(--wp--custom--border--hairline) solid var(--wp--preset--color--surface);
}

.sled-fact {
	display: grid;
	grid-template-columns: minmax(min(7rem, 100%), 2fr) minmax(0, 5fr);
	gap: 0.25rem 1rem;
	margin: 0;
	padding-block: 0.625rem;
	border-bottom: var(--wp--custom--border--hairline) solid var(--wp--preset--color--surface);
}

.sled-fact > * {
	margin: 0;
}

.sled-fact__label {
	font-weight: 700;
	color: var(--wp--preset--color--muted);
}

.sled-animal-health h2,
.sled-animal-story h2 {
	margin-block-end: 0.75rem;
}

/*
 * Phones and tablets (tall enough): the "Solicitar adopción" button sits in a bar pinned to
 * the bottom (the plugin adds the bar only for available animals and marks the page with
 * body.sled-adop-has-sticky-cta). The page gets matching bottom room so the bar never covers
 * text or the footer, and focused or anchored elements scroll clear of it.
 */
@media (max-width: 899px) and (min-height: 500px) {
	.sled-adop-estado--sticky .sled-adop-estado__bar {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: var(--wp--custom--z--bar);
		padding: 0.75rem var(--wp--preset--spacing--50) calc(0.75rem + env(safe-area-inset-bottom, 0px));
		background: var(--wp--preset--color--base);
		border-top: var(--wp--custom--border--hairline) solid var(--wp--preset--color--surface);
		box-shadow: var(--wp--custom--shadow--bar);
	}

	.sled-adop-estado--sticky .sled-adop-estado__bar .sled-adop-cta {
		width: 100%;
		min-height: calc(var(--wp--custom--tap) + 0.25rem);
		font-size: var(--wp--preset--font-size--medium);
	}

	body.sled-adop-has-sticky-cta .wp-site-blocks {
		padding-bottom: calc(var(--wp--custom--bar--height) + env(safe-area-inset-bottom, 0px));
	}

	html:has(.sled-adop-estado--sticky) {
		scroll-padding-bottom: calc(var(--wp--custom--bar--height) + 0.5rem);
	}
}

/* ------------------------------------------------------------------ */
/* Front page and content patterns */

/* Animals without a photo: a paw on sand instead of an empty square. */
.sled-animal-card__media,
.sled-adoptado__media {
	background: var(--wp--preset--color--surface) url("../img/animal-placeholder.svg") center / cover no-repeat;
}

/* Hero: a cover with a 40 % ink overlay; 70vh on wide screens, 60vh on phones and tablets. */
.sled-hero.wp-block-cover {
	overflow: hidden;
}

@media (max-width: 899px) {
	.sled-hero.wp-block-cover {
		min-height: 60vh !important;
		min-height: 60svh !important;
	}
}

/* The hero and the rehome band already carry the "give up for adoption" call: no duplicate in the header on the home page. */
@media (max-width: 899px) {
	body.home .sled-header__cta {
		display: none;
	}

	/*
	 * On phones the full-width "Rehome a pet" button would compete with the page's own main button: on a form
	 * (SLED Adopciones), and on the animal pages, where people come to adopt ("Solicitar adopción" is right there
	 * and the two words look alike). The menu still has the link.
	 */
	body:has(.sled-adop-form) .sled-header__cta,
	body.post-type-archive-animal .sled-header__cta,
	body.tax-adop_especie .sled-header__cta,
	body.single-animal .sled-header__cta {
		display: none;
	}
}

.sled-hero h1 {
	margin-block: 0;
	text-wrap: balance;
	hyphens: auto;
	overflow-wrap: anywhere;
}

/* A cover's content never grows wider than the screen (e.g. with text zoomed to 200 %): long words wrap instead of being cut off. */
.wp-block-cover__inner-container {
	min-width: 0;
}

.sled-hero p {
	max-width: 34rem;
}

.sled-hero__buttons {
	gap: 0.75rem;
}

.sled-hero .sled-hero__secondary .wp-block-button__link {
	background: transparent;
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--base);
}

.sled-hero .sled-hero__secondary .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* The primary ring would vanish on the dark hero: white there. */
.sled-hero :focus-visible,
.sled-hero .wp-block-button__link:focus-visible {
	outline-color: var(--wp--preset--color--base);
}

/* Pause button that hero-video.js adds next to the video. */
.sled-hero__toggle {
	position: absolute;
	right: var(--wp--preset--spacing--40);
	bottom: var(--wp--preset--spacing--40);
	z-index: 2;
	padding: 0.5rem 1rem;
	border: var(--wp--custom--border--control) solid var(--wp--preset--color--base);
	border-radius: var(--wp--custom--radius--control);
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 75%, transparent);
	color: var(--wp--preset--color--base);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

/* Home sections: the heading, then the content, then a link or button. */
.sled-home-section > h2 {
	margin-block: 0 var(--wp--preset--spacing--50);
}

.sled-home-section__more,
.sled-home-section__link {
	margin-block-start: var(--wp--preset--spacing--50);
}

.sled-home-section__link a {
	display: inline-flex;
	align-items: center;
	font-weight: 700;
}

/* Phones see four animals (two screens), then "See all". */
@media (max-width: 599px) {
	.sled-home-animales .sled-animal-grid > li:nth-child(n+5) {
		display: none;
	}
}

/*
 * Numbered steps ("Pasos" block style on List, styles/blocks/list-steps.json): big numbers in circles;
 * one column on phones, side by side on wide screens (2 then 4 columns when there are four or more steps).
 * theme.json cannot draw counters, so the shape lives here. `.sled-steps` is the 0.1 class name, kept as an alias.
 */
:is(.is-style-steps, .sled-steps) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--50);
	margin-inline: 0;
	padding: 0;
	list-style: none;
	counter-reset: sled-step;
}

:is(.is-style-steps, .sled-steps) > li {
	position: relative;
	margin: 0;
	padding-inline-start: 4.25rem;
	min-height: 3.25rem;
	counter-increment: sled-step;
}

:is(.is-style-steps, .sled-steps) > li::before {
	content: counter(sled-step);
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 900;
}

/* The step title; the second selector is the block editor, which wraps the text in an editable element. */
:is(.is-style-steps, .sled-steps) > li > strong,
:is(.is-style-steps, .sled-steps) > li > [contenteditable] > strong:first-child {
	display: block;
	hyphens: auto;
	overflow-wrap: anywhere;
	margin-block-end: 0.25rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	line-height: 1.25;
}

@media (min-width: 900px) {
	:is(.is-style-steps, .sled-steps) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	:is(.is-style-steps, .sled-steps):has(> li:nth-child(4)),
	.sled-steps.sled-steps--four {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	:is(.is-style-steps, .sled-steps) > li {
		padding-inline-start: 0;
		padding-block-start: 4.25rem;
	}
}

@media (min-width: 1200px) {
	:is(.is-style-steps, .sled-steps):has(> li:nth-child(4)),
	.sled-steps.sled-steps--four {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/*
 * Checklist ("Checklist" block style on List, styles/blocks/list-checklist.json): a check mark that screen
 * readers skip. `.sled-checklist` is the 0.1 class name, kept as an alias.
 */
:is(.is-style-checklist, .sled-checklist) {
	margin-inline: 0;
	padding: 0;
	list-style: none;
}

:is(.is-style-checklist, .sled-checklist) > li {
	position: relative;
	margin-block: 0.625rem;
	padding-inline-start: 2.5rem;
}

:is(.is-style-checklist, .sled-checklist) > li::before {
	content: "✓";
	content: "✓" / "";
	position: absolute;
	top: 0.05em;
	left: 0;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary-soft);
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	line-height: 1.75rem;
	text-align: center;
}

/* Details blocks (questions): each one a tall line that opens. The bottom rule is in theme.json (core/details). */
.wp-block-details {
	margin-block: 0;
}

.wp-block-details > summary {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-block: 0.75rem;
	font-weight: 700;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
	list-style: none;
	cursor: pointer;
}

.wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.wp-block-details > summary::after {
	content: "+";
	content: "+" / "";
	margin-inline-start: auto;
	color: var(--wp--preset--color--primary);
	font-size: 1.75rem;
	line-height: 1;
}

.wp-block-details[open] > summary::after {
	content: "−";
	content: "−" / "";
}

.wp-block-details > :not(summary) {
	margin-block: 0 1rem;
}

/* "They found a home": a strip you swipe, or scroll with the arrow keys once it has focus. */
.wp-block-post-template.sled-adoptados__strip {
	display: flex;
	gap: var(--wp--preset--spacing--40);
	--sled-focus-room: calc(var(--wp--custom--focus--width) + var(--wp--custom--focus--offset) + 1px);
	margin: 0 calc(-1 * var(--sled-focus-room));
	padding: var(--sled-focus-room) var(--sled-focus-room) 1rem;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--sled-focus-room);
	border-radius: var(--wp--custom--radius--card);
}

.wp-block-post-template.sled-adoptados__strip > li {
	flex: 0 0 min(70%, 15rem);
	margin: 0;
	scroll-snap-align: start;
}

.sled-adoptado__media {
	aspect-ratio: 1;
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
}

.sled-adoptado__media > * {
	margin: 0;
	height: 100%;
}

.sled-adoptado__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sled-adoptado__name {
	margin: 0;
	line-height: 1.25;
}

.sled-adoptado__name a {
	display: inline-flex;
	align-items: center;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.sled-adoptado__name a:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* Block styles that need more than theme.json can say. */

/* "Banda tinta" (dark band): the primary focus ring would vanish on ink, so it turns white there. */
.is-style-band-ink :focus-visible {
	outline-color: var(--wp--preset--color--base);
}

/* ------------------------------------------------------------------ */
/*
 * 0.1 class names, kept working for one version (remove in 0.3). New content uses the block styles instead:
 * .sled-card → Group "Tarjeta" (is-style-card) · .sled-band / .sled-cta → Group "Banda suave"
 * (is-style-band-soft) · .sled-steps → List "Pasos" · .sled-checklist → List "Checklist" ·
 * .sled-faq → any Details block · .sled-animal-empty → Group "Tarjeta".
 * Every value is a theme.json token, so the aliases follow the Site Editor too.
 */
.sled-card,
.sled-animal-empty {
	overflow: hidden;
	background: var(--wp--preset--color--base);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--card);
}

.sled-animal-empty {
	padding: var(--wp--preset--spacing--50);
}

.sled-card .wp-block-post-title {
	margin: 0;
	line-height: 1.25;
}

.sled-card .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.sled-card .wp-block-post-title a:hover {
	text-decoration: underline;
}

.sled-card .wp-block-post-featured-image {
	margin: 0;
}

.sled-card .wp-block-post-featured-image img {
	width: 100%;
	border-radius: 0;
}

.sled-card .wp-block-post-excerpt {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

.sled-band {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--card);
}