/* Sitewide styles — currently just the on-brand "no photo yet" placeholder
   treatment for dog cards, used on the homepage teaser and the dogs archive.
   Always painted as the base layer; a real featured image (once set) simply
   covers it via object-fit, so no empty-detection logic is needed. */

.kds-photo-frame {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 4px;
	background: linear-gradient( 135deg, var( --wp--preset--color--canvas-panel ), var( --wp--preset--color--canvas-deep ) );
	margin: 0;
}

.kds-photo-frame::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 180'%3E%3Cpath d='M100 172C40 130 8 96 8 58 8 30 28 10 54 10c18 0 34 10 46 28 12-18 28-28 46-28 26 0 46 20 46 48 0 38-32 72-92 114Z' fill='none' stroke='%2349c3c9' stroke-width='9'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: center;
	background-size: 38%;
	opacity: 0.45;
}

.kds-photo-frame::after {
	content: "Photo Coming Soon";
	position: absolute;
	bottom: 12px;
	left: 50%;
	transform: translateX( -50% );
	font-family: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
	font-weight: 600;
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --wp--preset--color--teal );
	opacity: 0.75;
	pointer-events: none;
}

.kds-photo-frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kds-photo-frame:has( img )::before,
.kds-photo-frame:has( img )::after {
	display: none;
}

.kds-dog-status-badge {
	position: absolute;
	/* Bottom right, matching the mini tiles. Requested 2026-08-22: badges sat
	   top-right on big cards and bottom-right on small ones, so the eye had to
	   hunt for the same information in two places. One position, always. */
	bottom: 10px;
	right: 10px;
	top: auto;
	z-index: 1;
	padding: 0.3em 0.85em;
	border-radius: 999px;
	/* Lowercase Karla, not the uppercase condensed label face. These read as
	   things a person would say — "almost home", "needs a foster" — and label
	   styling would file them as data. */
	font-family: "Karla", ui-sans-serif, system-ui, sans-serif;
	font-weight: 600;
	font-size: 0.76rem;
	letter-spacing: 0.02em;
	text-transform: none;
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.35 );
	/* Colour comes from the modifier below, not from here. A status badge
	   is a MARKER, not an action: it must not wear coral (commitment) or
	   gold (money), or it reads as a button and invites a click that goes
	   nowhere. Reported 2026-08-22 as "white on coral and hard to read" —
	   which it was, 3.08:1 at 11.5px. */
}

/* Teal already means "still relevant to you" everywhere else on this site,
   which is exactly what Pending is — the /pending/ page tells visitors to
   enquire anyway, because adoptions fall through. 8.95:1. */
.kds-dog-status-badge--pending {
	background: var( --wp--preset--color--canvas-deep );
	color: var( --wp--preset--color--teal );
	border: 1px solid rgba( 73, 195, 201, 0.35 );
}

/* The one deliberate exception to the no-gold rule stated above.
 *
 * That rule exists because a status badge "reads as a button and invites a
 * click that goes nowhere". An urgent ask is the case where the premise
 * doesn't hold: it IS an action, the click goes somewhere real, and half of
 * what it asks for is literally money — which is what gold already means
 * everywhere else on this site. Breaking the rule here is the rule working,
 * not the rule failing.
 *
 * Only ever appears on an Available dog (kds_dog_urgent_flags gates it) and
 * clears itself the moment that stops being true. Lowercase, because it is
 * a sentence a person would say, not a data label. 9.22:1 on canvas-deep.
 */
.kds-dog-status-badge--urgent {
	background: var( --wp--preset--color--canvas-deep );
	color: var( --wp--preset--color--gold );
	border: 1px solid rgba( 240, 166, 60, 0.45 );
	text-transform: none;
	letter-spacing: 0.02em;
	font-family: "Karla", ui-sans-serif, system-ui, sans-serif;
	font-size: 0.76rem;
}

/* Quieter than Pending on purpose: this dog is no longer available, so the
   badge is information rather than an invitation. 5.97:1. */
.kds-dog-status-badge--adopted {
	background: var( --wp--preset--color--canvas-panel );
	color: var( --wp--preset--color--mute );
	border: 1px solid var( --wp--preset--color--canvas-edge );
}

/* Dog profile — rendered by the kds_dog_profile shortcode (functions.php),
   used on the single-Dog template. */

.kds-dog-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2.5rem;
	padding: 1.5rem 0;
	border-top: 1px solid var( --wp--preset--color--canvas-edge );
	border-bottom: 1px solid var( --wp--preset--color--canvas-edge );
	margin: 1.5rem 0;
}

.kds-dog-stat {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.kds-dog-stat__label {
	font-family: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --wp--preset--color--teal );
}

.kds-dog-stat__value {
	font-size: 1.15rem;
	font-weight: 600;
	color: var( --wp--preset--color--cream );
}

/* "Needs an experienced home" — a CAUTION about commitment, so it wears
 * coral. It previously used blush, the palette's grief note, which tinted a
 * living dog with the memorial colour; and cream on blush measures 1.31:1,
 * so the words were very nearly invisible. Coral on canvas-deep is 6.15.
 *
 * Coral is deliberately scarce — the foster CTA and this. Both are the same
 * thing: an ask that changes someone's life. */
.kds-dog-flag {
	display: inline-block;
	background: var( --wp--preset--color--canvas-deep );
	color: var( --wp--preset--color--coral );
	border: 1px solid rgba( 242, 104, 60, 0.45 );
	font-weight: 600;
	padding: 0.6rem 1.1rem;
	border-radius: 4px;
	margin-bottom: 1.5rem;
}

.kds-dog-eulogy {
	background: var( --wp--preset--color--canvas );
	border-left: 3px solid var( --wp--preset--color--teal );
	border-radius: 4px;
	padding: 1.5rem 1.75rem;
	margin-bottom: 2rem;
	font-size: 1.1rem;
	line-height: 1.7;
}

.kds-dog-eulogy-heading {
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-style: italic;
	font-weight: 600;
	font-size: 1.4rem;
	color: var( --wp--preset--color--teal );
	margin: 0 0 0.75rem;
}

.kds-dog-eulogy p {
	margin: 0 0 1.2rem;
}

.kds-dog-eulogy p:last-child {
	margin-bottom: 0;
}

.kds-dog-bio {
	font-size: 1.1rem;
	line-height: 1.7;
}

.kds-dog-bio p {
	margin: 0 0 1.2rem;
}

.kds-dog-traits {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 200px, 1fr ) );
	gap: 0.75rem 1.5rem;
}

.kds-dog-trait {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.98rem;
}

.kds-dog-trait::before {
	content: "";
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
}

.kds-dog-trait.is-yes::before {
	background: var( --wp--preset--color--teal );
}

.kds-dog-trait.is-no::before {
	background: var( --wp--preset--color--canvas-edge );
}

.kds-dog-trait.is-unknown::before {
	background: transparent;
	border: 1.5px solid var( --wp--preset--color--canvas-edge );
}

.kds-dog-medical {
	margin-top: 2rem;
	padding: 1.25rem 1.5rem;
	background: var( --wp--preset--color--canvas );
	border-left: 3px solid var( --wp--preset--color--teal );
	border-radius: 4px;
}

/* h2, not h3 — "Medical Notes" is a peer of "More Photos" and "Ready to meet X?",
   both of which are h2. The tag is named here deliberately, so if the heading
   level ever changes again this selector must change with it. */
.kds-dog-medical h2 {
	font-family: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 0.5rem;
	color: var( --wp--preset--color--teal );
}

.kds-footer-copyright {
	font-size: 0.8rem;
	color: var( --wp--preset--color--mute );
	max-width: 640px;
}

.kds-dog-cta-heading--memory {
	font-style: italic;
}

.kds-dog-cta-heading {
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-weight: 500;
	font-size: 1.5rem;
	color: var( --wp--preset--color--white );
	text-align: center;
	margin: 0 0 1.5rem;
}

/*
 * Real intake photos aren't shot to a uniform aspect ratio or framing — a
 * fixed 16:9 box with object-fit:cover was cropping heads, tails, and
 * whole dogs out of frame on anything that wasn't already widescreen.
 * min-height keeps the "Photo Coming Soon" placeholder looking intentional
 * with no photo set; max-height keeps an extreme portrait shot from
 * dominating the page. object-fit:contain on the actual <img> (below)
 * means the full photo always shows, letterboxed into the existing
 * placeholder gradient rather than cropped.
 */
.kds-dog-hero-photo {
	position: relative;
	aspect-ratio: auto;
	min-height: 320px;
	max-height: 640px;
	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.kds-dog-hero-photo img {
	position: static;
	max-width: 100%;
	max-height: 640px;
	object-fit: contain;
}

.kds-dog-gallery-heading {
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-weight: 600;
	font-style: italic;
	font-size: 1.6rem;
	margin: 2.5rem 0 0.5rem;
}

.kds-dog-gallery {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 160px, 1fr ) );
	gap: 1rem;
	margin-top: 1.5rem;
}

.kds-dog-gallery__item img {
	width: 100%;
	height: 100%;
}

/* Gallery items are real <button>s now (for free keyboard access on the
   zoom trigger) — strip default button chrome without touching the
   position/aspect-ratio rules .kds-photo-frame already sets on them. */
button.kds-dog-gallery__item {
	border: 0;
	background: none;
	padding: 0;
	margin: 0;
	font: inherit;
	cursor: zoom-in;
	display: block;
	text-align: inherit;
}

/* Gallery items always have a real photo (the shortcode skips any without
   one), so ::after is otherwise unused here — reuse it as a hover/focus
   affordance instead of adding extra markup just for an icon.
   Explicit transform:none is required — .kds-photo-frame::after (the
   "Photo Coming Soon" placeholder label) sets translateX(-50%) on the same
   pseudo-element, and CSS cascades per-property, not per-rule, so that
   transform leaked through and shifted this overlay half off the tile. */
.kds-dog-gallery__item:hover::after,
.kds-dog-gallery__item:focus-visible::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: none;
	display: block;
	background: rgba( 28, 28, 30, 0.28 );
}

.kds-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	background: rgba( 28, 28, 30, 0.92 );
}

.kds-lightbox[hidden] {
	display: none;
}

.kds-lightbox__img {
	max-width: 100%;
	max-height: 100%;
	border-radius: 4px;
	box-shadow: 0 10px 40px rgba( 0, 0, 0, 0.5 );
}

.kds-lightbox__close {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: rgba( 255, 255, 255, 0.15 );
	color: var( --wp--preset--color--white );
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
}

.kds-lightbox__close:hover {
	background: rgba( 255, 255, 255, 0.28 );
}

/*
 * Sticky header — stays pinned while scrolling instead of disappearing off
 * the top. Targets header.wp-block-group directly (confirmed via live
 * markup, only one such element on the page) rather than a custom
 * className — a className added to the header block via the REST API
 * didn't actually render, even though the same edit mechanism worked fine
 * for the header's inner nav content; this sidesteps whatever that was
 * rather than chase it further. Needs a real z-index (above the hero/
 * content stacking context) and relies on the header's own paper
 * background already being opaque, so content scrolling underneath
 * doesn't show through.
 */
header.wp-block-group {
	position: sticky;
	top: 0;
	z-index: 50;
}

.kds-dog-search {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.6rem;
	max-width: 640px;
	margin: 0 auto 2.5rem;
}

.kds-dog-search input[type="text"] {
	flex: 1 1 180px;
	padding: 0.6rem 0.9rem;
	border: 1px solid var( --wp--preset--color--canvas-edge );
	border-radius: 999px;
	font-family: "Karla", ui-sans-serif, system-ui, sans-serif;
	font-size: 0.95rem;
	background: var( --wp--preset--color--canvas-panel );
	color: var( --wp--preset--color--cream );
}

/* The input's own placeholder text had no rule at all, so it fell back to
   the browser default grey — roughly 2.5:1 on the Canvas panel. Mute is
   6.92:1 on canvas and reads as deliberate rather than broken. */
.kds-dog-search input[type="text"]::placeholder {
	color: var( --wp--preset--color--mute );
	opacity: 1;
}

.kds-dog-search select {
	padding: 0.6rem 0.9rem;
	border: 1px solid var( --wp--preset--color--canvas-edge );
	border-radius: 999px;
	font-family: "Karla", ui-sans-serif, system-ui, sans-serif;
	font-size: 0.95rem;
	background: var( --wp--preset--color--canvas-panel );
	color: var( --wp--preset--color--cream );
}

.kds-dog-search select:focus {
	outline: 2px solid var( --wp--preset--color--teal );
	outline-offset: 1px;
}

.kds-dog-search input[type="text"]:focus {
	outline: 2px solid var( --wp--preset--color--teal );
	outline-offset: 1px;
}

/* Utility control, not an appeal — teal keeps coral rare. */
.kds-dog-search button {
	padding: 0.6rem 1.3rem;
	border: none;
	border-radius: 999px;
	background: var( --wp--preset--color--teal );
	color: #10333a;
	font-family: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.9rem;
	cursor: pointer;
}

.kds-dog-search button:hover {
	background: var( --wp--preset--color--canvas-deep );
}

.kds-dog-search__clear {
	font-size: 0.85rem;
	color: var( --wp--preset--color--mute );
	white-space: nowrap;
}

.kds-events-list {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 280px, 1fr ) );
	gap: 1.5rem;
	max-width: 1200px;
	margin: 0 auto 3rem;
	padding: 0 1.5rem;
}

.kds-events-none {
	text-align: center;
	color: var( --wp--preset--color--mute );
	margin: 0 0 3rem;
}

.kds-event-card {
	display: block;
	background: var( --wp--preset--color--canvas-panel );
	border-radius: 5px;
	padding: 1.5rem;
	border-top: 4px solid;
	/* Hairline on the remaining three sides only -- border-top is the coloured
	category accent and must stay. The hairline defines the card's edge, the
	shadow lifts it; neither has to work hard on its own. */
	border-right: 1px solid var( --wp--preset--color--canvas-edge );
	border-bottom: 1px solid var( --wp--preset--color--canvas-edge );
	border-left: 1px solid var( --wp--preset--color--canvas-edge );
	box-shadow: 0 2px 4px rgba( 0, 0, 0, 0.30 ), 0 12px 24px -8px rgba( 0, 0, 0, 0.55 );
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	color: inherit;
	text-decoration: none;
}

.kds-event-card:hover,
.kds-event-card:focus {
	color: inherit;
	text-decoration: none;
}

.kds-event-card:hover {
	transform: translateY( -4px );
	box-shadow: 0 4px 8px rgba( 0, 0, 0, 0.35 ), 0 20px 32px -8px rgba( 0, 0, 0, 0.65 );
}

.kds-event-card--inperson {
	border-top-color: var( --wp--preset--color--teal );
}

.kds-event-card--online {
	border-top-color: var( --wp--preset--color--teal );
}

.kds-event-card__type {
	font-family: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.kds-event-card--inperson .kds-event-card__type {
	color: var( --wp--preset--color--teal );
}

.kds-event-card--online .kds-event-card__type {
	color: var( --wp--preset--color--teal );
}

.kds-event-card__name {
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-size: 1.25rem;
	margin: 0.3rem 0 0.5rem;
}

.kds-event-card__when {
	font-weight: 600;
	margin: 0 0 0.3rem;
}

.kds-event-card__venue {
	color: var( --wp--preset--color--mute );
	margin: 0 0 0.5rem;
}

.kds-event-card__desc {
	font-size: 0.95rem;
	margin: 0 0 0.5rem;
	overflow-wrap: anywhere;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.kds-event-card__more {
	display: inline-block;
	font-family: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var( --wp--preset--color--teal );
}

.kds-event-card--inperson .kds-event-card__more {
	color: var( --wp--preset--color--teal );
}

.kds-event-card__flyer {
	display: block;
	max-width: 100%;
	max-height: 320px;
	object-fit: contain;
	background: var( --wp--preset--color--canvas-panel );
	border-radius: 5px;
	margin: 0 auto 1rem;
}

.kds-event-card__gallery {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 0.4rem;
	margin: 0 0 1rem;
}

.kds-event-card__gallery-photo {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 5px;
}

.kds-event-card__reflection {
	font-size: 0.9rem;
	font-style: italic;
	color: var( --wp--preset--color--mute );
	margin: 0.5rem 0 0;
}

.kds-event-countdown {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	margin: 0 0 0.75rem;
	padding: 0.4rem 0.7rem;
	border-radius: 4px;
	background: var( --wp--preset--color--canvas-panel );
}

.kds-event-countdown__label {
	font-family: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
	font-weight: 600;
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --wp--preset--color--mute );
}

.kds-event-countdown__value {
	font-family: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	font-size: 1rem;
}

.kds-event-card--inperson .kds-event-countdown__value {
	color: var( --wp--preset--color--teal );
}

.kds-event-card--online .kds-event-countdown__value {
	color: var( --wp--preset--color--teal );
}

.kds-event-countdown__value--live {
	animation: kds-countdown-pulse 1.2s ease-in-out infinite;
}

@keyframes kds-countdown-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.55; }
}

.kds-event-single {
	background: var( --wp--preset--color--canvas-panel );
	border-radius: 5px;
	border-top: 4px solid;
	border-right: 1px solid var( --wp--preset--color--canvas-edge );
	border-bottom: 1px solid var( --wp--preset--color--canvas-edge );
	border-left: 1px solid var( --wp--preset--color--canvas-edge );
	padding: 2rem;
	box-shadow: 0 2px 4px rgba( 0, 0, 0, 0.30 ), 0 12px 24px -8px rgba( 0, 0, 0, 0.55 );
}

.kds-event-single--online,
.kds-event-single.kds-event-card--online {
	border-top-color: var( --wp--preset--color--teal );
}

.kds-event-single.kds-event-card--inperson {
	border-top-color: var( --wp--preset--color--teal );
}

.kds-event-single__flyer {
	display: block;
	max-width: 100%;
	margin: 0 auto;
	background: var( --wp--preset--color--canvas-panel );
	border-radius: 5px;
}

.kds-event-single__flyer--contain {
	object-fit: contain;
}

.kds-event-single__flyer--cover {
	object-fit: cover;
}

.kds-event-single__flyer-trigger {
	display: block;
	width: 100%;
	border: 0;
	background: none;
	padding: 0;
	margin: 1rem 0 1.5rem;
	cursor: zoom-in;
}

.kds-gallery-photo-trigger {
	border: 0;
	background: none;
	padding: 0;
	margin: 0;
	display: block;
	width: 100%;
	cursor: zoom-in;
	text-align: inherit;
	font: inherit;
}

.kds-event-single__when,
.kds-event-single__venue,
.kds-event-single__address,
.kds-event-single__partner,
.kds-event-single__link,
.kds-event-single__desc,
.kds-event-single__cost,
.kds-event-single__rsvp,
.kds-event-single__donated,
.kds-event-single__reflection {
	max-width: 800px;
	overflow-wrap: anywhere;
}

.kds-event-single__when {
	font-weight: 600;
	font-size: 1.1rem;
	margin: 0 0 0.3rem;
}

.kds-event-single__venue,
.kds-event-single__address,
.kds-event-single__partner {
	color: var( --wp--preset--color--mute );
	margin: 0 0 0.3rem;
}

.kds-event-single__link {
	margin: 0 0 1rem;
}

.kds-event-single__donated {
	font-weight: 600;
	margin: 0 0 1rem;
}

.kds-event-single__redemption {
	max-width: 800px;
	background: var( --wp--preset--color--canvas );
	border-left: 3px solid var( --wp--preset--color--teal );
	border-radius: 4px;
	padding: 1.25rem 1.5rem;
	margin: 1.5rem 0;
	overflow-wrap: anywhere;
}

.kds-event-single__redemption p {
	margin: 0.5rem 0 0;
}

.kds-event-single__redemption p:first-of-type {
	margin-top: 0.75rem;
}

.kds-event-single__desc {
	font-size: 1.05rem;
	line-height: 1.6;
	margin: 1.5rem 0;
}

.kds-event-single__cost,
.kds-event-single__rsvp {
	margin: 0 0 0.5rem;
}

.kds-event-single__gallery {
	margin: 2rem 0;
}

.kds-event-single__reflection {
	font-size: 1rem;
	font-style: italic;
	color: var( --wp--preset--color--mute );
	border-left: 3px solid var( --wp--preset--color--canvas-edge );
	padding-left: 1rem;
	margin: 1.5rem 0;
}

.kds-upload-preview {
	display: block;
	max-width: 240px;
	max-height: 240px;
	object-fit: contain;
	background: var( --wp--preset--color--canvas-panel );
	border-radius: 5px;
	margin-top: 0.6rem;
}

/* Sitewide title centering, 2026-08-07 — targets h1 specifically since
   .wp-block-post-title is also used at level 3 for individual card titles
   inside listing grids (dogs archive, homepage teaser, events), which
   should stay left-aligned within their cards. Only real full-page h1
   titles (single dog/event pages, generic pages, single posts) get
   centered. */
h1.wp-block-post-title {
	text-align: center;
}

/* Landing-style pages (Get Involved, the application forms) skip the auto
   h1 entirely -- the nav label already told the visitor why they're here,
   so the page opens straight into its own teal eyebrow line instead. See
   the kds-hide-page-title body_class filter in functions.php. */
.kds-hide-page-title h1.wp-block-post-title {
	display: none;
}

/* Reusable "pop off the page" card treatment, matching .kds-event-card —
   applied via a custom className on plain wp:group blocks (e.g. the Get
   Involved page's Foster/Volunteer CTA cards) so any card-like content
   block can share the same shadow/lift look without needing its own
   custom shortcode. */
.kds-pop-card {
	border-top: 4px solid var( --wp--preset--color--teal );
	border-right: 1px solid var( --wp--preset--color--canvas-edge );
	border-bottom: 1px solid var( --wp--preset--color--canvas-edge );
	border-left: 1px solid var( --wp--preset--color--canvas-edge );
	box-shadow: 0 2px 4px rgba( 0, 0, 0, 0.30 ), 0 12px 24px -8px rgba( 0, 0, 0, 0.55 );
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kds-pop-card:hover {
	transform: translateY( -4px );
	box-shadow: 0 4px 8px rgba( 0, 0, 0, 0.35 ), 0 20px 32px -8px rgba( 0, 0, 0, 0.65 );
}

/* Dog cards on the /dogs/ archive. These are plain Query Loop output with no
   class of their own, so they are targeted by the post-type body class the
   loop already emits — .type-dogs appears 18 times on /dogs/ and zero times
   on /blog/, checked rather than assumed.

   Unlike the cards above these carry no coloured top accent, so they take the
   hairline on all four sides. The hairline defines the edge (a shadow alone
   leaves the TOP edge undefined, since shadows only fall below and to the
   sides); the shadow does the lifting. Same values as every other card on the
   site, so the whole thing speaks one visual language. */
.wp-block-post.type-dogs > .wp-block-group {
	/* A visible edge at rest, not only on hover — a card that only
	   defines itself when you touch it reads as unfinished. Teal at 25%
	   is present without shouting; hover takes it to full. */
	border: 1px solid rgba( 73, 195, 201, 0.25 );
	border-radius: 4px;
	overflow: hidden;
	box-shadow: 0 2px 4px rgba( 0, 0, 0, 0.30 ), 0 12px 24px -8px rgba( 0, 0, 0, 0.55 );
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-post.type-dogs > .wp-block-group:hover {
	border-color: var( --wp--preset--color--teal );
	transform: translateY( -4px );
	box-shadow: 0 4px 8px rgba( 0, 0, 0, 0.35 ), 0 20px 32px -8px rgba( 0, 0, 0, 0.65 );
}

/* "Before you leave" caution modal — currently gates the Support & Shop
   link on Ways to Give. A caution-tape band signals "pay attention" without
   going full virus-popup red-alert; everything below it stays in the
   site's normal card language. */
.kds-caution {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: rgba( 28, 28, 30, 0.72 );
}

.kds-caution[hidden] {
	display: none;
}

.kds-caution__box {
	position: relative;
	background: var( --wp--preset--color--canvas-panel );
	border-radius: 8px;
	max-width: 440px;
	width: 100%;
	overflow: hidden;
	box-shadow: 0 20px 50px rgba( 0, 0, 0, 0.35 );
}

.kds-caution__close {
	position: absolute;
	top: 50%;
	right: 0.55rem;
	transform: translateY( -50% );
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: none;
	background: var( --wp--preset--color--canvas-panel );
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.35 );
	color: var( --wp--preset--color--cream );
	font-size: 1.3rem;
	line-height: 1;
	padding: 0;
	cursor: pointer;
	z-index: 1;
}

.kds-caution__close:hover {
	background: var( --wp--preset--color--canvas-panel );
}

.kds-caution__tape {
	position: relative;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: repeating-linear-gradient(
		-45deg,
		#1c1c1e,
		#1c1c1e 14px,
		#c9982f 14px,
		#c9982f 28px
	);
}

.kds-caution__tape-label {
	font-family: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
	font-weight: 800;
	font-size: 1.05rem;
	letter-spacing: 0.22em;
	color: #1c1c1e;
	background: #c9982f;
	padding: 0.15rem 0.85rem;
	border-radius: 2px;
}

.kds-caution__body {
	padding: 1.75rem 1.75rem 1.5rem;
}

.kds-caution__eyebrow {
	font-family: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #a3730f;
	margin: 0 0 1.1rem;
}

.kds-caution__text {
	font-size: 0.95rem;
	line-height: 1.55;
	color: var( --wp--preset--color--mute );
	margin: 0 0 1.5rem;
}

.kds-caution__text a {
	color: var( --wp--preset--color--teal );
	font-weight: 700;
	text-decoration: underline;
}

.kds-caution__text a:hover {
	color: var( --wp--preset--color--teal );
}

.kds-caution__actions {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.kds-caution__go-back {
	font-family: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var( --wp--preset--color--white );
	background: var( --wp--preset--color--canvas-panel );
	border: none;
	border-radius: 2px;
	padding: 0.85rem 1.5rem;
	cursor: pointer;
	text-align: center;
}

.kds-caution__go-back:hover {
	background: var( --wp--preset--color--canvas-deep );
}

.kds-caution__continue {
	text-align: center;
	font-size: 0.85rem;
	color: var( --wp--preset--color--mute );
	text-decoration: underline;
}

.kds-caution__continue:hover {
	color: var( --wp--preset--color--cream );
}

/* Footer social row — icons recolored to the site palette rather than
   each platform's own brand colors, so they read as part of the site,
   not a row of borrowed logos. */
.kds-social-row {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin: 0 0 1.75rem;
}

.kds-social-row a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.08 );
	color: var( --wp--preset--color--cream );
	transition: background 0.15s ease, color 0.15s ease;
}

.kds-social-row a svg {
	width: 19px;
	height: 19px;
}

.kds-social-row a:hover {
	background: var( --wp--preset--color--teal );
	color: var( --wp--preset--color--cream );
}

/* ---------------------------------------------------------------------
   Dog card body — rendered by [kds_dog_card_meta], not by block bindings,
   because a binding prints whatever the field holds INCLUDING nothing.
   Most dogs here are part-filled, so the card has to look deliberate at
   three facts as well as at eight: every element is omitted when empty
   rather than rendering a blank row.
   --------------------------------------------------------------------- */

.kds-card__meta {
	margin: 0.15rem 0 0;
	font-size: 0.85rem;
	line-height: 1.45;
	color: var( --wp--preset--color--mute );
}

.kds-card__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin-top: 0.7rem;
}

.kds-chip {
	font-family: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
	font-weight: 600;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.2em 0.5em;
	border-radius: 3px;
	white-space: nowrap;
	line-height: 1.5;
}

/* teal on a lifted panel — reads as "confirmed good" */
.kds-chip--yes   { background: #3d1f57; color: var( --wp--preset--color--teal ); }
/* states what IS true ("Not with cats"), never a crossed-out positive */
.kds-chip--no    { background: #4a1f38; color: #ff9f8a; }
/* unknown is genuinely useful to a rescue — kept, but quiet */
.kds-chip--maybe { background: #33184a; color: var( --wp--preset--color--mute ); }
/* things that DISQUALIFY a home lead, so they get the loud colour */
/* matches .kds-dog-flag — a caution, not a price. Was gold, which is the
   money colour and made "needs experienced home" read like a surcharge. */
.kds-chip--flag  { background: var( --wp--preset--color--coral ); color: var( --wp--preset--color--charcoal ); }

.kds-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	margin-top: 0.9rem;
	padding-top: 0.75rem;
	border-top: 1px solid var( --wp--preset--color--canvas-edge );
}

.kds-card__fee {
	font-family: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.05rem;
	color: var( --wp--preset--color--gold );
	font-variant-numeric: tabular-nums;
}

/* empty span keeps the CTA right-aligned when there is no fee to show */
.kds-card__fee--none { min-width: 1px; }

.kds-card__cta {
	font-family: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.45em 0.85em;
	border-radius: 3px;
	background: transparent;
	color: var( --wp--preset--color--teal );
	border: 1px solid var( --wp--preset--color--teal );
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.kds-card__cta:hover,
.kds-card__cta:focus-visible {
	background: var( --wp--preset--color--teal );
	color: #10333a;
}

/* =====================================================================
   LARGE-SCREEN TIER

   Measured 2026-08-21: nothing about this layout changed between a
   1440px laptop and a 3840px display — root 16px, body 18.4px, content
   1200px at every width. On a 4K panel the page occupied 31% of the
   screen at laptop dimensions, which reads as "everything is tiny".

   theme.json already declares a `large: 1599px` breakpoint token, but
   nothing had ever consumed it.

   Two levers, deliberately:

   1. ROOT FONT SIZE. Almost everything here is sized in rem — type,
      padding, gaps, chip sizing — so raising the root scales the whole
      system proportionally rather than requiring a rule per component.
      WordPress's fluid clamp() values are rem-based too, so they come
      along.

   2. CONTAINER WIDTH. Type alone is not enough; a 1200px column on a
      3840px screen still looks marooned. The constrained-layout max
      width lifts with the tier.

   Steps are conservative — 9%, 19%, 31% — because overshooting makes a
   4K screen feel like a kiosk. Nothing changes below 1600px, so laptops
   and tablets are untouched.
   ===================================================================== */

@media ( min-width: 1600px ) {
	:root { font-size: 17.5px; }

	.wp-block-group.is-layout-constrained > :where( :not( .alignleft ):not( .alignright ):not( .alignfull ) ) {
		max-width: 1400px;
	}
}

@media ( min-width: 2200px ) {
	:root { font-size: 19px; }

	.wp-block-group.is-layout-constrained > :where( :not( .alignleft ):not( .alignright ):not( .alignfull ) ) {
		max-width: 1680px;
	}
}

@media ( min-width: 3000px ) {
	:root { font-size: 21px; }

	.wp-block-group.is-layout-constrained > :where( :not( .alignleft ):not( .alignright ):not( .alignfull ) ) {
		max-width: 2000px;
	}

	/* No column-count override here, deliberately. The instinct was to go
	   four-across at 4K to keep cards small enough that photos are never
	   upscaled — but measurement killed it: at 3840px a card is 647px and
	   the source images are 1439-2000px natural. Nothing is upscaled at
	   any width, so a fourth column would solve a problem that does not
	   exist, and would make the dogs smaller for no reason. */
}

/* ---------------------------------------------------------------------
   Donate page: centre the third-party payment widgets to match our own
   buttons.

   Our nine wp:buttons wrappers were given justifyContent:center in the
   block markup. PayPal cannot be treated the same way — it is a raw
   <form> inside a wp:html block, and that is precisely the block kses
   stripped on 2026-08-18, taking the donate page down for about a day.
   It gets centred from CSS and its markup is never touched.

   Attribute selector on the action URL rather than a class, because the
   form carries no class of its own and PayPal owns that markup.
   --------------------------------------------------------------------- */
/* No .wp-block-html ancestor: the wp:html block emits its content RAW,
   with no wrapper element, so an ancestor selector can never match. The
   form itself is the only hook we get. */
form[action*="paypal.com"] {
	text-align: center;
}

/* The Zelle QR is a payment target people point a phone at, so it should
   grow with the large-screen tier like everything else — it was pinned at
   180px from a 390px phone all the way to 4K. Overrides the block's inline
   width, which is why !important is here and not a habit. */
@media ( min-width: 1600px ) {
	.wp-block-image img[src*="zelle"] { width: 220px !important; }
}

@media ( min-width: 2200px ) {
	.wp-block-image img[src*="zelle"] { width: 260px !important; }
}

/* ---------------------------------------------------------------------
   Footer legal block — the visible half of nonprofit verification.

   Google for Nonprofits rejected verification because nothing on the site
   could be matched against the IRS filing. A verifier, human or
   automated, is looking for the registered name, address and EIN in
   readable form — so this is deliberately plain and quiet rather than
   decorative. It should read as a statement of record, not marketing.
   --------------------------------------------------------------------- */

.kds-legal {
	/* 0, not 1.75rem. That margin dated from when this block sat under the
	   footer logo in its own column. Under the "Reach Us" heading it stacked
	   on the column's own 0.5rem gap and pushed the first line 31px down while
	   "Meet the Pack" sat 9px below its heading. */
	margin-top: 0.5rem;
}

.kds-legal__primary {
	font-size: 0.95rem;
	color: var( --wp--preset--color--cream );
	margin: 0 0 0.9rem;
}

.kds-legal__address {
	font-style: normal;          /* <address> italicises by default */
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var( --wp--preset--color--mute );
}

/* the filed name, set apart because it is the string a verifier matches */
.kds-legal__legalname {
	font-family: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	letter-spacing: 0.08em;
	font-size: 1rem;
	color: var( --wp--preset--color--cream );
}

.kds-legal__dba {
	font-size: 0.82rem;
	color: var( --wp--preset--color--mute );
	margin-bottom: 0.35rem;
}

.kds-legal__address a { color: var( --wp--preset--color--teal ); text-decoration: none; }
.kds-legal__address a:hover { text-decoration: underline; }

.kds-legal__ein {
	margin: 0.9rem 0 0;
	font-size: 0.85rem;
	color: var( --wp--preset--color--mute );
}

.kds-legal__ein strong {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	color: var( --wp--preset--color--cream );
	font-variant-numeric: tabular-nums;
}

.kds-legal__ein a { color: var( --wp--preset--color--teal ); }

/* =====================================================================
   THE TIERED /dogs/ PAGE

   User's diagnosis of why this failed the last time it was tried, 2026-08-21:
   the tiers "ran one after another" and needed "separation by starting a
   new line". A horizontal rule alone is not enough — a reader scrolling
   past it reads more cards and assumes they are the same kind of thing.

   So each tier gets THREE distinguishing signals, not one:
     1. its own ground        (canvas -> deep -> deeper)
     2. its own card size     (full -> mini -> mini, quieter)
     3. its own accent        (coral -> gold -> orchid)

   Visual weight descends down the page: loud and actionable at the top,
   quieter as it moves into the past. By the time you reach In Memory the
   page has gone almost silent, which is the correct tone for it.
   ===================================================================== */

/* ---- the separator itself ---- */

.kds-tsep {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 3.25rem 0 1.75rem;
}

.kds-tsep__label {
	font-family: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	white-space: nowrap;
}

.kds-tsep__line {
	flex: 1;
	height: 1px;
	background: linear-gradient( 90deg,
		transparent,
		var( --wp--preset--color--canvas-edge ) 10%,
		var( --wp--preset--color--canvas-edge ) 90%,
		transparent );
}

.kds-tsep__count {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.78rem;
	color: var( --wp--preset--color--mute );
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Tier headings use the TEXT scale, not the wayfinding scale.
 *
 * They were coral / gold / blush, which spent two signal colours on page
 * furniture — gold in particular made "home at last", the happiest section
 * on the site, read as financial. Adopted is not a transaction.
 *
 * Now they descend in weight instead: bright where a visitor can act,
 * quieter as the page moves into the past. Blush stays on the memorial
 * because there loss is the actual subject, not decoration.
 *
 * 12.56 / 6.92 / 9.60 on canvas — all clear AA comfortably.
 */
.kds-tsep--now .kds-tsep__label { color: var( --wp--preset--color--cream ); }
.kds-tsep--done .kds-tsep__label { color: var( --wp--preset--color--mute ); }
.kds-tsep--mem .kds-tsep__label { color: var( --wp--preset--color--blush ); }

/* ---- the heart lockup as the tier heading ----
 *
 * Grid rather than flex so the rule can drop onto its own row underneath.
 * On a 390px phone the lockup plus a count like "50 huskies, 12 shown"
 * cannot share a line with a rule between them and still leave the rule
 * visible, so the rule spans both columns below.
 *
 * The SVG is sized by HEIGHT and never by width. Because the heart is always
 * 200 units of a 184-tall viewBox, fixing the height keeps every heart on the
 * page identical while the word's length varies freely.
 */
.kds-tsep--lockup {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: end;
	gap: 0.5rem 1rem;
	padding: 3.25rem 0 1.5rem;
}

.kds-lockup {
	display: block;
	height: 62px;
	width: auto;
	overflow: visible;
}

.kds-tsep--lockup .kds-tsep__count {
	text-align: right;
	padding-bottom: 0.4rem;
}

.kds-tsep--lockup .kds-tsep__line {
	grid-column: 1 / -1;
	flex: none;
}

/* A slow double-thump, roughly half resting pace so it reads as alive rather
 * than anxious. The memorial lockup has no .kds-beat wrapper at all, so it is
 * still — that stillness is the point and must not be animated back in. */
.kds-beat { transform-origin: 50% 55%; }

@media ( prefers-reduced-motion: no-preference ) {
	.kds-beat { animation: kds-beat 2.6s ease-in-out infinite; }

	@keyframes kds-beat {
		0%, 72%, 100% { transform: scale( 1 ); }
		76%           { transform: scale( 1.07 ); }
		82%           { transform: scale( 1 ); }
		88%           { transform: scale( 1.045 ); }
	}
}

@media ( max-width: 600px ) {
	.kds-lockup { height: 48px; }
	.kds-tsep--lockup { padding-top: 2.5rem; }
}

/* ---- tier grounds — alignfull so the change reads edge to edge ---- */

.kds-tier--done { background: var( --wp--preset--color--canvas-deep ); }
.kds-tier--mem { background: #120520; }

/* ---- tiers 2 and 3: deliberately smaller than tier 1 ---- */

.kds-tier-strip {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 158px, 1fr ) );
	gap: 0.9rem;
}

.kds-mini {
	display: block;
	text-decoration: none;
	background: var( --wp--preset--color--canvas-panel );
	border: 1px solid var( --wp--preset--color--canvas-edge );
	border-radius: 4px;
	overflow: hidden;
	transition: transform 0.22s ease, border-color 0.22s ease;
}

.kds-mini:hover,
.kds-mini:focus-visible {
	transform: translateY( -3px );
	border-color: var( --wp--preset--color--gold );
}

.kds-mini__img {
	display: block;
	aspect-ratio: 1 / 1;
	background-size: cover;
	background-position: center;
	position: relative;
	/* slightly desaturated: these dogs are evidence, not the main event */
	filter: saturate( 0.92 );
}

.kds-mini__img[data-noimg] {
	background: linear-gradient( 135deg,
		var( --wp--preset--color--canvas-panel ),
		var( --wp--preset--color--canvas-deep ) );
}

.kds-mini__badge {
	position: absolute;
	right: 7px;
	bottom: 7px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.58rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	padding: 0.2em 0.45em;
	border-radius: 2px;
	background: var( --wp--preset--color--gold );
	color: var( --wp--preset--color--charcoal );
}

.kds-mini__b { display: block; padding: 0.55rem 0.6rem 0.7rem; }

.kds-mini__n {
	display: block;
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-weight: 700;
	font-size: 0.95rem;
	color: var( --wp--preset--color--cream );
	line-height: 1.2;
}

.kds-mini__d {
	display: block;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.6rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --wp--preset--color--mute );
	margin-top: 0.2rem;
}

.kds-mini--memory .kds-mini__img { filter: saturate( 0.55 ) brightness( 0.9 ); }
.kds-mini--memory .kds-mini__d { color: var( --wp--preset--color--blush ); }

/* ---- memorial ending: "home forever" / "at rest" ----
 *
 * Lowercase and in the body face on purpose. These two are the only strings
 * on the page written the way a person would say them out loud, and setting
 * them in the uppercase mono label style used everywhere else would file
 * them as data. They are not data.
 *
 * Gold for the kept promise, so it echoes the adopted tier the dog came
 * from; blush for the one who never got there. Both measured on the mini
 * card's panel, not assumed.
 */
.kds-mini__p {
	display: block;
	font-size: 0.72rem;
	letter-spacing: 0.02em;
	line-height: 1.3;
	margin-top: 0.15rem;
}

.kds-mini__p--home { color: var( --wp--preset--color--gold ); }
.kds-mini__p--rest { color: var( --wp--preset--color--blush ); }

/* ---- "see all N" ---- */

.kds-tier-more {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var( --wp--preset--color--canvas-edge );
}

.kds-tier-more p {
	margin: 0;
	max-width: 54ch;
	font-size: 0.95rem;
	color: var( --wp--preset--color--mute );
}

.kds-tier-more__cta {
	font-family: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.55em 1.1em;
	border-radius: 3px;
	white-space: nowrap;
	background: transparent;
	color: var( --wp--preset--color--gold );
	border: 1px solid var( --wp--preset--color--gold );
	transition: background-color 0.2s ease, color 0.2s ease;
}

.kds-tier-more__cta:hover,
.kds-tier-more__cta:focus-visible {
	background: var( --wp--preset--color--gold );
	color: var( --wp--preset--color--charcoal );
}

/* ---- capacity panel — the part no other rescue will print ---- */

.kds-capacity {
	background: var( --wp--preset--color--canvas-deep );
	border: 1px solid var( --wp--preset--color--canvas-edge );
	border-radius: 5px;
	padding: 1.6rem;
}

.kds-capacity__k {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.68rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var( --wp--preset--color--gold );
	margin: 0 0 0.7rem;
}

.kds-capacity h3 {
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-weight: 400;
	font-size: 1.35rem;
	line-height: 1.22;
	margin: 0 0 0.8rem;
	color: var( --wp--preset--color--white );
	text-wrap: balance;
}

.kds-capacity p {
	font-size: 0.92rem;
	color: var( --wp--preset--color--mute );
	margin: 0 0 1rem;
}

.kds-capacity__nums {
	display: flex;
	flex-wrap: wrap;
	gap: 1.4rem;
	margin: 0 0 1.1rem;
	padding: 1.05rem 0;
	border-top: 1px solid var( --wp--preset--color--canvas-edge );
	border-bottom: 1px solid var( --wp--preset--color--canvas-edge );
}

.kds-capacity__n {
	display: block;
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-size: 2rem;
	line-height: 1;
	color: var( --wp--preset--color--gold );
	font-variant-numeric: tabular-nums;
}

.kds-capacity__l {
	display: block;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.6rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --wp--preset--color--mute );
	margin-top: 0.4rem;
	line-height: 1.5;
}

/* coral, because fostering is the COMMITMENT ask, not the money ask */
.kds-capacity__cta {
	display: inline-block;
	font-family: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.7em 1.35em;
	border-radius: 3px;
	background: var( --wp--preset--color--coral );
	color: var( --wp--preset--color--charcoal );
	transition: background-color 0.2s ease;
}

.kds-capacity__cta:hover,
.kds-capacity__cta:focus-visible {
	background: var( --wp--preset--color--coral-hi );
	color: var( --wp--preset--color--charcoal );
}

/* ---- in-memory empty state ---- */

.kds-memory-empty {
	max-width: 62ch;
	border: 1px dashed rgba( 225, 182, 213, 0.28 );
	border-radius: 5px;
	padding: 1.6rem;
	background: rgba( 225, 182, 213, 0.04 );
}

.kds-memory-empty__k {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.66rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --wp--preset--color--blush );
	margin: 0 0 0.7rem;
}

.kds-memory-empty h3 {
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-weight: 400;
	font-size: 1.3rem;
	margin: 0 0 0.7rem;
	color: var( --wp--preset--color--cream );
	text-wrap: balance;
}

.kds-memory-empty p {
	font-size: 0.95rem;
	color: var( --wp--preset--color--mute );
	margin: 0;
}

/* ---- the dogs row: cards beside the capacity panel ---- */

.kds-dogrow {
	display: grid;
	grid-template-columns: 1.55fr 1fr;
	gap: 1.75rem;
	align-items: start;
}

@media ( max-width: 900px ) {
	.kds-dogrow { grid-template-columns: 1fr; }
	.kds-tsep { padding-top: 2.5rem; }
}

/* ---------------------------------------------------------------------------
 * Age filter tabs — replaced the name/gender/colour search 2026-08-22, at the
 * user's request, following azhuskyrescue's pattern.
 *
 * Each tab is a real link with its own URL, so a filtered view is shareable,
 * bookmarkable and back-button-able, and it works without JavaScript.
 *
 * Teal is the only colour here, and it obeys the site's rule: every tab you
 * can click is teal, and the one you cannot (an empty group) is not.
 * ------------------------------------------------------------------------- */
.kds-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin: 0 auto 1rem;
	padding: 0 1rem;
}

.kds-filter {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-family: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.86rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 0.55em 1.1em;
	border-radius: 999px;
	text-decoration: none;
	color: var( --wp--preset--color--teal );
	background: var( --wp--preset--color--canvas-deep );
	border: 1px solid var( --wp--preset--color--canvas-edge );
	transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.kds-filter:hover,
.kds-filter:focus-visible {
	border-color: var( --wp--preset--color--teal );
	outline: none;
}

/* The selected tab inverts — the strongest available signal, and it needs to
   survive being the one thing on the row that isn't an invitation. 8.95:1. */
.kds-filter.is-on {
	background: var( --wp--preset--color--teal );
	border-color: var( --wp--preset--color--teal );
	color: var( --wp--preset--color--canvas-deep );
}

/* Not a link, so not teal — the rule holds. Shown rather than hidden so the
   row stays the same shape between visits and honestly reports an empty
   group instead of quietly pretending it never existed. */
.kds-filter.is-empty {
	color: var( --wp--preset--color--mute );
	opacity: 0.45;
	cursor: default;
}

.kds-filter__n {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.72em;
	letter-spacing: 0;
	opacity: 0.75;
	font-variant-numeric: tabular-nums;
}

@media ( max-width: 600px ) {
	.kds-filters { gap: 0.4rem; }
	.kds-filter { font-size: 0.78rem; padding: 0.5em 0.85em; letter-spacing: 0.1em; }
}

/* ---------------------------------------------------------------------------
 * Header logo on large screens.
 *
 * The site-logo block hard-codes width="56" as an HTML attribute, so the mark
 * stayed 56px at every size while the root font-size climbs 16 -> 17.5 -> 19
 * -> 21px across the large-screen tier. Everything around it grew and the logo
 * did not, so on a 4K display it read as shrinking.
 *
 * Overridden in CSS rather than by editing the block's width, because a single
 * number in the markup cannot respond to viewport at all — and the header
 * lives in a DATABASE template part (row #260), so a markup fix would also
 * have to be made there rather than in parts/header.html.
 *
 * Source image is 545x555, so there is real resolution behind every step here.
 * ------------------------------------------------------------------------- */
.wp-block-site-logo img.custom-logo {
	height: auto;
}

@media ( min-width: 1600px ) {
	.wp-block-site-logo img.custom-logo { width: 68px; }
}

@media ( min-width: 2200px ) {
	.wp-block-site-logo img.custom-logo { width: 82px; }
}

@media ( min-width: 3000px ) {
	.wp-block-site-logo img.custom-logo { width: 100px; }
}

/* ---------------------------------------------------------------------------
 * Tier heading is an <h2> now, not a <span> — reset the browser defaults so
 * nothing moves. Purely structural change; the page must look identical.
 * ------------------------------------------------------------------------- */
h2.kds-tsep__label {
	margin: 0;
	font-family: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.85rem;
	line-height: 1.2;
}

/* ---------------------------------------------------------------------------
 * Links must be distinguishable WITHOUT colour.
 *
 * Every page failed this: /donate/ 17 of 17, /about/ 19 of 19. Teal on the
 * dark ground is legible, but someone who cannot separate teal from cream has
 * no way to tell a link from body text. Underlining is the fix, and
 * text-underline-offset keeps it from cutting through descenders.
 *
 * Scoped to links inside running text only. Navigation items, buttons and the
 * logo are already obvious from position and shape, and underlining them would
 * be noise.
 * ------------------------------------------------------------------------- */
p a:not( .wp-element-button ):not( .kds-card__cta ),
li a:not( .wp-element-button ):not( .wp-block-navigation-item__content ),
.kds-dog-bio a,
.kds-legal a {
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

/* the navigation lives in <li>s too — exclude the whole block */
.wp-block-navigation a,
.wp-block-buttons a,
.kds-social-row a,
.kds-mini,
.kds-filter {
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
 * Staff portal — the login gate, the tool hub, and the post-submission banner.
 * Markup comes from the kds-staff-portal mu-plugin, not this theme, because a
 * login gate must survive a theme change.
 * ------------------------------------------------------------------------- */
.kds-staff-gate {
	max-width: 26rem;
	margin: 3rem auto;
	background: var( --wp--preset--color--canvas );
	border: 1px solid var( --wp--preset--color--canvas-edge );
	border-radius: 8px;
	padding: 2rem 1.9rem;
}

.kds-staff-gate__k {
	font-family: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.76rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var( --wp--preset--color--teal );
	margin: 0 0 0.5rem;
}

.kds-staff-gate h2 { margin: 0 0 0.6rem; font-size: 1.4rem; }
.kds-staff-gate p { color: var( --wp--preset--color--mute ); font-size: 0.92rem; }

.kds-staff-gate input[type="text"],
.kds-staff-gate input[type="password"] {
	width: 100%;
	background: var( --wp--preset--color--canvas-deep );
	border: 1px solid var( --wp--preset--color--canvas-edge );
	border-radius: 4px;
	color: var( --wp--preset--color--cream );
	padding: 0.6em 0.8em;
	font-size: 0.95rem;
}

.kds-staff-gate input:focus {
	border-color: var( --wp--preset--color--teal );
	outline: none;
	box-shadow: 0 0 0 3px rgba( 73, 195, 201, 0.2 );
}

.kds-staff-gate .login-submit input {
	background: var( --wp--preset--color--teal );
	color: var( --wp--preset--color--canvas-deep );
	border: 0;
	border-radius: 999px;
	padding: 0.6em 1.6em;
	font-weight: 700;
	cursor: pointer;
	width: auto;
}

/* Success banner. Deliberately loud — the whole point is that someone knows
   for certain the upload worked before they walk away from the screen. */
.kds-staff-done {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	background: rgba( 143, 214, 148, 0.12 );
	border: 1px solid rgba( 143, 214, 148, 0.4 );
	border-left: 3px solid #8fd694;
	border-radius: 6px;
	padding: 1rem 1.2rem;
	margin: 0 0 1.6rem;
}

.kds-staff-done__tick {
	font-size: 1.5rem;
	color: #8fd694;
	line-height: 1;
}

.kds-staff-done b { color: var( --wp--preset--color--cream ); }

.kds-staff-who {
	font-size: 0.86rem;
	color: var( --wp--preset--color--mute );
	margin: 0 0 1.4rem;
}

/* Four tools, so 2x2 — not auto-fit, which gave three across and left one
   card orphaned on its own row. Collapses to a single column on a phone. */
.kds-staff-grid {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 1rem;
	margin-bottom: 2rem;
	max-width: 46rem;
}

@media ( max-width: 620px ) {
	.kds-staff-grid { grid-template-columns: 1fr; }
}

.kds-staff-card {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	background: var( --wp--preset--color--canvas-panel );
	border: 1px solid var( --wp--preset--color--canvas-edge );
	border-radius: 6px;
	padding: 1.2rem 1.25rem 1.1rem;
	text-decoration: none;
	transition: border-color 0.18s ease, transform 0.18s ease;
}

.kds-staff-card:hover,
.kds-staff-card:focus-visible {
	border-color: var( --wp--preset--color--teal );
	transform: translateY( -2px );
	outline: none;
}

.kds-staff-card__t {
	font-family: "Fraunces", ui-serif, Georgia, serif;
	font-style: italic;
	font-size: 1.2rem;
	color: var( --wp--preset--color--cream );
}

.kds-staff-card__d {
	font-size: 0.84rem;
	color: var( --wp--preset--color--mute );
	line-height: 1.5;
}

.kds-staff-card__go {
	font-family: "Barlow Condensed", ui-sans-serif, system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.74rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var( --wp--preset--color--teal );
	margin-top: 0.5rem;
}

.kds-staff-link { font-size: 0.82rem; }

/* ---------------------------------------------------------------------------
 * Footer columns — one type scale across both.
 *
 * "Get to Know Us" rendered its links at 18.4px in Karla, while "Reach Us"
 * ran three different sizes and a second typeface: Barlow Condensed 16px/700
 * for the legal name, Karla 13.12px for the dba line, Karla 14.4px for the
 * address. Two columns side by side with nothing in common.
 *
 * Everything is Karla at 0.95rem now. The registered legal name keeps weight
 * 700 and letter-spacing because it is the string a verifier scans for and it
 * has to be findable — but it is the same typeface as its neighbours, which is
 * what made it read as pasted in from somewhere else.
 * ------------------------------------------------------------------------- */
footer .wp-block-navigation-item__content,
.kds-legal__address,
.kds-legal__primary,
.kds-legal__dba,
.kds-legal__ein {
	font-family: "Karla", ui-sans-serif, system-ui, sans-serif;
	font-size: 0.95rem;
}

.kds-legal__legalname {
	font-family: "Karla", ui-sans-serif, system-ui, sans-serif;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.kds-legal__dba,
.kds-legal__ein {
	font-weight: 400;
}

/* the EIN itself stays monospaced — it is a reference number and tabular
   figures make it easier to check against a filing */
.kds-legal__ein strong {
	font-size: 0.95rem;
}

/* ---------------------------------------------------------------------------
 * Footer — three columns, 2026-08-23.
 *
 *   MEET THE PACK        REACH US             LOGO
 *   (flush left)         (flush left)         (right)
 *
 * Order matters for the collapse. Source order IS the stacking order on a
 * phone, so the dogs come first, contact second, mark last — rather than
 * dropping a visitor onto an address block before they have seen a single
 * link about the animals.
 *
 * Both text columns justify left. The mark is the only thing that moves.
 * ------------------------------------------------------------------------- */
footer .wp-block-group.kds-footer-cols {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	align-items: start;
	gap: 3rem 4rem;
}

.kds-fcol--pack,
.kds-fcol--reach { text-align: left; }

.kds-fcol--pack .wp-block-navigation.is-vertical { align-items: flex-start; }

.kds-fcol--reach .kds-legal,
.kds-fcol--reach .kds-legal__address { align-items: flex-start; text-align: left; }

.kds-fcol--mark { justify-self: end; }
.kds-fcol--mark .wp-block-site-logo img { width: 128px; height: auto; }

.kds-official {
	font-size: 0.95rem;
	line-height: 1.6;
	color: var( --wp--preset--color--mute );
	margin-top: 1rem;
}

.kds-official strong {
	display: inline-block;
	color: var( --wp--preset--color--cream );
	margin-top: 0.15rem;
}

/* ---- narrow: one column, everything flush left, mark last ---- */
@media ( max-width: 860px ) {
	footer .wp-block-group.kds-footer-cols {
		grid-template-columns: 1fr;
		gap: 2.25rem;
	}
	.kds-fcol--mark { justify-self: start; }
}

/* ---------------------------------------------------------------------------
 * Footer bottom line — "About Us · This is the official website of …" now sits
 * inline with the copyright rather than stacked under the logo, 2026-08-23.
 * ------------------------------------------------------------------------- */
.kds-footer-bottom {
	text-align: center;
	max-width: 52rem;
	margin: 0 auto;
}

.kds-footer-bottom__line {
	font-size: 0.86rem;
	color: var( --wp--preset--color--mute );
	margin: 0 0 0.35rem;
}

.kds-footer-bottom__line strong {
	color: var( --wp--preset--color--cream );
	letter-spacing: 0.05em;
}

.kds-footer-bottom__line a { color: var( --wp--preset--color--teal ); }

.kds-footer-bottom .kds-footer-copyright { margin-top: 0; }

/* the logo is the only thing in the middle column now */
.kds-fcol--mid .wp-block-site-logo img { width: 128px; height: auto; }

/* ---------------------------------------------------------------------------
 * Footer side columns — one type treatment across both, 2026-08-23.
 *
 * "Meet the Pack" was uniform: 0.95rem, weight 400, line-height 1.6. "Reach
 * Us" ran three line-heights (24.94 / 26.6 / 32.2px), a 20.125px IRS link
 * against 16.625px everywhere else, and weight 700 with letter-spacing on the
 * legal name. Side by side that read as two different documents.
 *
 * The legal name keeps its CAPITALS because that is the registered string as
 * filed with the IRS and verifiers do a literal string comparison — but it now
 * shares weight, size and spacing with everything around it.
 * ------------------------------------------------------------------------- */
.kds-fcol--reach .kds-legal,
.kds-fcol--reach .kds-legal span,
.kds-fcol--reach .kds-legal p,
.kds-fcol--reach .kds-legal a,
.kds-fcol--pack .wp-block-navigation-item__content {
	font-family: "Karla", ui-sans-serif, system-ui, sans-serif;
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: normal;
}

.kds-fcol--reach .kds-legal__legalname,
.kds-fcol--reach .kds-legal__irs,
.kds-fcol--reach .kds-legal__ein,
.kds-fcol--reach .kds-legal__ein strong {
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: normal;
}

/* even vertical rhythm — the address is a flex column, the two paragraphs
   below it were relying on default paragraph margins */
.kds-fcol--reach .kds-legal__address { gap: 0; }
.kds-fcol--reach .kds-legal__irs { margin: 0.9rem 0 0; }
.kds-fcol--reach .kds-legal__ein { margin: 0.25rem 0 0; }

/* ===========================================================================
   Gravity Forms — make forms belong to the theme
   ---------------------------------------------------------------------------
   Gravity Forms ships its own colours, chosen for a white page: labels at
   #112337, descriptions at #585e6a, the required asterisk at #c02b0a. Our page
   background is canvas (#2a0f3d), so measured on the live /adopt/ page those
   came out at 1.07:1, 2.61:1 and 2.91:1 — the labels were literally the same
   luminance as what sat behind them. Nothing was broken; nothing had ever told
   Gravity Forms what colour to be. The inputs looked fine only because they
   carry their own white background.

   Treatment: the form becomes a canvas-panel card — the same object as a dog
   card, 4px radius — and every colour comes from the theme palette. Measured
   against the panel (#3a1852):

       labels / legends / choice labels   paper      13.13:1
       field descriptions                 mute        5.97:1
       required asterisk                  coral-hi    5.80:1
       section titles                     teal        6.93:1
       typed text in a field              paper      16.95:1  (on canvas-deep)
       placeholder text                   stone-400   7.69:1
       field border at rest               mute        5.97:1
       submit button                      charcoal on gold 8.28:1

   The border matters as much as the text. WCAG 1.4.11 wants 3:1 for the edge of
   a control, and canvas-edge on the panel is only 1.24:1 — a dark field on a
   dark panel is readable but invisible as a shape, so people cannot tell where
   to click. mute at rest, teal on focus, which also gives the site a real focus
   indicator it did not have.

   Scoped to .gform_wrapper so it covers every form — adopt, foster, volunteer
   and the staff tools — rather than one page.
   ======================================================================== */

.gform_wrapper.gform-theme {
	background: var( --wp--preset--color--canvas-panel );
	border-radius: 4px;
	padding: 1.75rem 1.5rem 2rem;
}

.gform_wrapper.gform-theme .gfield_label,
.gform_wrapper.gform-theme legend.gfield_label,
.gform_wrapper.gform-theme .gform-field-label,
.gform_wrapper.gform-theme .gchoice label,
.gform_wrapper.gform-theme .ginput_complex label {
	color: var( --wp--preset--color--paper );
}

.gform_wrapper.gform-theme .gfield_description,
.gform_wrapper.gform-theme .gform_description,
.gform_wrapper.gform-theme .gfield_consent_description {
	color: var( --wp--preset--color--mute );
}

.gform_wrapper.gform-theme .gfield_required {
	color: var( --wp--preset--color--coral-hi );
}

.gform_wrapper.gform-theme .gsection_title,
.gform_wrapper.gform-theme h2.gsection_title,
.gform_wrapper.gform-theme h3.gsection_title {
	color: var( --wp--preset--color--teal );
}

.gform_wrapper.gform-theme .gsection {
	border-bottom-color: var( --wp--preset--color--canvas-edge );
}

/* Fields. The border is what makes these read as controls at all. */
.gform_wrapper.gform-theme input[type="text"],
.gform_wrapper.gform-theme input[type="email"],
.gform_wrapper.gform-theme input[type="tel"],
.gform_wrapper.gform-theme input[type="url"],
.gform_wrapper.gform-theme input[type="number"],
.gform_wrapper.gform-theme input[type="password"],
.gform_wrapper.gform-theme input[type="date"],
.gform_wrapper.gform-theme textarea,
.gform_wrapper.gform-theme select {
	background: var( --wp--preset--color--canvas-deep );
	color: var( --wp--preset--color--paper );
	border: 1px solid var( --wp--preset--color--mute );
	border-radius: 4px;
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.gform_wrapper.gform-theme input::placeholder,
.gform_wrapper.gform-theme textarea::placeholder {
	color: var( --wp--preset--color--stone-400 );
	opacity: 1;
}

.gform_wrapper.gform-theme input:focus,
.gform_wrapper.gform-theme textarea:focus,
.gform_wrapper.gform-theme select:focus {
	outline: none;
	border-color: var( --wp--preset--color--teal );
	box-shadow: 0 0 0 3px rgba( 73, 195, 201, 0.32 );
}

.gform_wrapper.gform-theme input[type="radio"],
.gform_wrapper.gform-theme input[type="checkbox"] {
	accent-color: var( --wp--preset--color--teal );
}

/* Submit matches the DONATE button rather than Gravity Forms' default blue. */
.gform_wrapper.gform-theme .gform_footer input[type="submit"],
.gform_wrapper.gform-theme .gform_button {
	background: var( --wp--preset--color--gold );
	color: var( --wp--preset--color--charcoal );
	border: 0;
	border-radius: 4px;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 0.75rem 1.75rem;
	cursor: pointer;
}

.gform_wrapper.gform-theme .gform_footer input[type="submit"]:hover,
.gform_wrapper.gform-theme .gform_button:hover {
	background: var( --wp--preset--color--coral-hi );
}

/* Validation stays legible on the dark panel. */
.gform_wrapper.gform-theme .gfield_validation_message,
.gform_wrapper.gform-theme .validation_message {
	background: transparent;
	border: 0;
	color: var( --wp--preset--color--coral-hi );
}

/* Two things Orbital sets with higher specificity than a theme rule can reach:
   the required asterisk / error colour, and the submit button. Both are driven
   by its own custom properties, so set those rather than escalating selectors —
   Orbital's rules read these, which means we always win without !important. */
.gform_wrapper.gform-theme {
	--gf-color-danger: var( --wp--preset--color--coral-hi );
	--gf-color-danger-contrast: var( --wp--preset--color--charcoal );

	/* The button's size is set by Orbital with higher specificity than a
	   theme rule can reach — same as its colour. Its own variables win. */
	--gf-ctrl-btn-font-size: 1rem;
	--gf-ctrl-btn-font-size-md: 1rem;
	--gf-ctrl-btn-padding-x: 1.9rem;
	--gf-ctrl-btn-padding-y: 0.8rem;

	/* Colour means something on this site and the meanings are exclusive:
	   coral = dogs, teal = you are here, gold = money. A form submission is
	   not money, so this button is coral with a teal ring on hover. Gold
	   stays reserved for DONATE. */
	--gf-ctrl-btn-bg-color-primary: var( --wp--preset--color--coral );
	--gf-ctrl-btn-color-primary: var( --wp--preset--color--charcoal );
	--gf-ctrl-btn-border-color-primary: var( --wp--preset--color--coral );

	--gf-ctrl-btn-bg-color-hover-primary: var( --wp--preset--color--teal );
	--gf-ctrl-btn-color-hover-primary: var( --wp--preset--color--charcoal );
	--gf-ctrl-btn-border-color-hover-primary: var( --wp--preset--color--teal );

	--gf-ctrl-btn-bg-color-focus-primary: var( --wp--preset--color--teal );
	--gf-ctrl-btn-color-focus-primary: var( --wp--preset--color--charcoal );
	--gf-ctrl-btn-border-color-focus-primary: var( --wp--preset--color--teal );
}

/* ---------------------------------------------------------------------------
   Let the form scale with the theme.

   The theme steps its root font-size with the viewport — 16px, 17.5px, 19px,
   21px — and everything on the page grows with it. Page copy on /adopt/ runs
   18.4px at 1440 and 24.15px at 3840. Gravity Forms sets its type in px, so it
   sat frozen at 14px labels, 14px inputs and 13px descriptions at every width.
   At 4K the form was rendering at 58% the size of the text around it, which is
   why it read as thin and marooned on a wide screen rather than merely narrow.

   Setting these in rem makes the form track the root like everything else.
   1rem lands at 16px on a laptop and 21px at 4K — which is exactly the 150%
   that looked right when scaled by hand in dev tools, arrived at properly and
   correct at every width in between rather than on one screen.

   Padding is in rem for the same reason: a 21px value in a box padded in px
   looks cramped.
   ------------------------------------------------------------------------ */

.gform_wrapper.gform-theme .gfield_label,
.gform_wrapper.gform-theme legend.gfield_label,
.gform_wrapper.gform-theme .gform-field-label,
.gform_wrapper.gform-theme .gchoice label,
.gform_wrapper.gform-theme .ginput_complex label {
	font-size: 1rem;
	line-height: 1.4;
}

.gform_wrapper.gform-theme .gfield_description,
.gform_wrapper.gform-theme .gform_description,
.gform_wrapper.gform-theme .gfield_consent_description {
	font-size: 0.9rem;
	line-height: 1.5;
}

.gform_wrapper.gform-theme .gfield_required {
	font-size: 1.05rem;
}

.gform_wrapper.gform-theme input[type="text"],
.gform_wrapper.gform-theme input[type="email"],
.gform_wrapper.gform-theme input[type="tel"],
.gform_wrapper.gform-theme input[type="url"],
.gform_wrapper.gform-theme input[type="number"],
.gform_wrapper.gform-theme input[type="password"],
.gform_wrapper.gform-theme input[type="date"],
.gform_wrapper.gform-theme textarea,
.gform_wrapper.gform-theme select {
	font-size: 1rem;
	padding: 0.65rem 0.75rem;
	line-height: 1.4;
}

.gform_wrapper.gform-theme input[type="radio"],
.gform_wrapper.gform-theme input[type="checkbox"] {
	width: 1.05rem;
	height: 1.05rem;
}

.gform_wrapper.gform-theme .gform_footer input[type="submit"],
.gform_wrapper.gform-theme .gform_button {
	font-size: 1rem;
	padding: 0.8rem 1.9rem;
}

.gform_wrapper.gform-theme .gsection_title,
.gform_wrapper.gform-theme h2.gsection_title,
.gform_wrapper.gform-theme h3.gsection_title {
	font-size: 1.6rem;
	line-height: 1.25;
}

/* ---------------------------------------------------------------------------
   Let the form widen on big screens.

   theme.json pins contentSize at 800px, so .gform_wrapper stopped at 800px no
   matter the viewport — 78% of a 4K screen sat empty. Found in dev tools by
   setting .gform_fields { inline-size: 200% }, which works visually but makes
   the field grid overflow its own container and scroll sideways on anything
   narrower. Widening the WRAPPER gets the same result with no overflow, since
   the 12-column grid simply fills whatever it is given.

   Only the form widens. The prose above it stays at its reading measure on
   purpose — long lines of text are harder to read, long rows of form fields
   are not.
   ------------------------------------------------------------------------ */

.gform_wrapper.gform-theme {
	max-width: clamp( 50rem, 62vw, 96rem );
	margin-inline: auto;
}

@media ( max-width: 52rem ) {
	.gform_wrapper.gform-theme {
		max-width: 100%;
	}
}

/* Gravity Forms puts a hard height:38px on <select>. Once the type scales with
   the theme that box is too short — at a 19px root the content needs 53.3px
   (19px text + 12.35px padding top and bottom) inside a 38px box, and
   overflow:clip cuts the text in half. Let the box follow its contents. */
.gform_wrapper.gform-theme select,
.gform_wrapper.gform-theme textarea,
.gform_wrapper.gform-theme input[type="text"],
.gform_wrapper.gform-theme input[type="email"],
.gform_wrapper.gform-theme input[type="tel"],
.gform_wrapper.gform-theme input[type="url"],
.gform_wrapper.gform-theme input[type="number"],
.gform_wrapper.gform-theme input[type="password"],
.gform_wrapper.gform-theme input[type="date"] {
	height: auto;
	min-height: 0;
}

/* ---------------------------------------------------------------------------
   Align the process copy with the form beneath it.

   Once .gform_wrapper was allowed to widen, the prose above it was still pinned
   at the 800px contentSize while the panel ran ~1012px — a narrow centred
   column sitting on top of a much wider one, with no shared edge. It read as
   two different pages stacked.

   The block now takes the same width as the form so the edges line up, but the
   paragraphs keep a reading measure inside it. Long lines of prose are harder
   to read; long rows of form fields are not. Left-aligned so the text starts on
   the same edge as the fields rather than floating in the middle.
   ------------------------------------------------------------------------ */

.kds-adopt-process {
	max-width: clamp( 50rem, 62vw, 96rem );
	margin-inline: auto;
}

.kds-adopt-process > p,
.kds-adopt-process > h2 {
	max-width: 68ch;
	margin-inline: 0;
}

/* Submit, and the Add/Remove row buttons on list fields. Coral because they act
   on dogs and applications, never money. Teal ring on hover and focus — teal is
   the "you are here" colour, so it does the same job here as on a focused
   field. Measured on the canvas-panel: charcoal on coral 5.53:1, coral against
   the panel 4.76:1 so the button reads as a shape, teal ring 6.93:1. */
.gform_wrapper.gform-theme .gform_footer input[type="submit"],
.gform_wrapper.gform-theme .gform_button,
.gform_wrapper.gform-theme .add_list_item,
.gform_wrapper.gform-theme .delete_list_item {
	background: var( --wp--preset--color--coral );
	color: var( --wp--preset--color--charcoal );
	border: 1px solid var( --wp--preset--color--coral );
	border-radius: 4px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.gform_wrapper.gform-theme .gform_footer input[type="submit"]:hover,
.gform_wrapper.gform-theme .gform_button:hover,
.gform_wrapper.gform-theme .add_list_item:hover,
.gform_wrapper.gform-theme .delete_list_item:hover,
.gform_wrapper.gform-theme .gform_footer input[type="submit"]:focus-visible,
.gform_wrapper.gform-theme .gform_button:focus-visible,
.gform_wrapper.gform-theme .add_list_item:focus-visible,
.gform_wrapper.gform-theme .delete_list_item:focus-visible {
	/* The button itself goes teal — a ring alone was too faint to notice.
	   charcoal on teal is 8.05:1 and teal against the panel is 6.93:1.

	   The ring stays, at full strength. Coral and teal are only 1.46:1 apart
	   in brightness, so the swap is almost purely a change of hue and is much
	   weaker for anyone with red-green colour blindness. The ring gives the
	   state a change of shape as well as colour. */
	background: var( --wp--preset--color--teal );
	color: var( --wp--preset--color--charcoal );
	border-color: var( --wp--preset--color--teal );
	box-shadow: 0 0 0 3px rgba( 73, 195, 201, 0.85 );
	outline: none;
}

/* ---------------------------------------------------------------------
   MOBILE NAVIGATION OVERLAY

   Two faults, both WordPress core defaults that nothing was overriding.
   Measured on the droplet at 390px, 2026-08-31.

   1. CONTRAST — the serious one. Core paints the open overlay #ffffff.
      The links inherit the nav's `mute` colour #b79bc9, giving
      2.47:1 against white. That fails WCAG AA (4.5:1) and even the 3:1
      large-text threshold — on the primary navigation, on the device
      most visitors use. The header's own inner background is already
      canvas-deep #1a0828; reusing it puts the SAME link colour at
      7.67:1, which passes AA and passes AAA for large text. No new
      colour is introduced and the menu stops inverting the brand the
      moment someone taps the hamburger.

   2. SUBMENUS OPENED THEMSELVES. Inside the overlay core forces submenu
      containers to display:flex / position:static regardless of state,
      so Events rendered expanded while its own button still reported
      aria-expanded="false" — sighted users saw it open, screen readers
      were told it was closed.

      Core's Interactivity API already keeps that attribute truthful
      (data-wp-bind--aria-expanded="state.isMenuOpen"); nothing was
      listening to it. The toggle button is the IMMEDIATE previous
      sibling of the container, so an adjacent-sibling selector is
      enough and NO new JavaScript is needed.

   Specificity note: core's own rules use
   `.wp-block-navigation__responsive-container.is-menu-open` (0-2-0), so
   these are qualified with `nav.wp-block-navigation` (0-3-1) to win on
   specificity rather than depending on stylesheet load order, which is
   not guaranteed when core inlines its block styles.
   --------------------------------------------------------------------- */

/* NOTE: the overlay background is NOT set here, deliberately. Core's rule is
   `.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container
   .is-menu-open:not(.disable-default-overlay-background) { background-color:#fff }`
   at 0-5-0 specificity, which beat an earlier attempt here at 0-3-1. Rather than
   escalate, the navigation BLOCK now carries backgroundColor "canvas-deep" in
   wp_template_part 260 — that makes `.has-background` present, so core's white
   rule stops matching at all and the overlay inherits the block's colour.
   Use the framework's own switch, not a bigger hammer. */

/* The close (X) button and the submenu chevrons are dark by default,
   which was fine on white and invisible on canvas-deep. */
nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close,
nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-icon {
	color: var( --wp--preset--color--paper );
}

/* Left-align the stack. In a column flex container the horizontal edge is
   controlled by align-items, not justify-content — the nav's desktop
   justifyContent:right was leaving the items hard against the right edge
   with the submenu offset differently, which is the "shifts to the left"
   mismatch. */
nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container,
nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container {
	align-items: flex-start;
}

/* Closed unless the toggle says otherwise. */
nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__submenu-container {
	display: none;
}

nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-submenu__toggle[aria-expanded="true"]
	+ .wp-block-navigation__submenu-container {
	display: flex;
	/* replaces core's flat 32px, and reads as a child level rather than a
	   differently-aligned column */
	padding-left: 1.25rem;
}

/* "Events" sat hard right while every sibling sat left — the misalignment
   that started this. The submenu's parent <li> is itself a flex container in
   COLUMN direction, and it stretches to 252px to hold the child list against
   34-99px for its siblings. In a column container the horizontal edge is
   governed by align-items, not justify-content, and core leaves it at
   flex-end. Measured: the "Events" link sat at x=323 in a box spanning
   118-370, i.e. flush right, while every other label sat at x=118.

   One property fixes it. An earlier attempt here set flex-wrap and
   justify-content instead — both no-ops on the horizontal axis of a column
   container, and they measured as such. */
nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item.has-child {
	align-items: flex-start;
}

/* Teal top accent on each menu item, matching the card treatment exactly:
   `border-top: 4px solid teal` is the same declaration used by .kds-pop-card
   and .kds-event-card, so the menu reads as the same family rather than as a
   lookalike. No new value.

   Items are stretched to the full overlay width first. Left to themselves they
   shrink-wrap to their label, so the accents would step in and out with the
   length of each word — "Home" a stub, "Available Dogs" long — which reads as
   ragged rather than deliberate. Stretching also turns each row into a
   full-width tap target, which matters more on a phone than it does anywhere
   else on the site.

   Child items deliberately get NO bar. The 20px indent already marks them as a
   level down, and repeating the accent there would flatten the hierarchy the
   indent is establishing. */
nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
	ul.wp-block-navigation__container {
	width: 100%;
}

nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open
	ul.wp-block-navigation__container > li.wp-block-navigation-item {
	align-self: stretch;
	/* Every item is itself a column flex container, and core leaves align-items
	   at flex-end. While the items were shrink-wrapped to their label that was
	   invisible; stretching them to full width exposed it and every label
	   snapped to the right edge. Setting it here rather than only on the
	   submenu parent, which is where it was first noticed. */
	align-items: flex-start;
	border-top: 4px solid var( --wp--preset--color--teal );
	padding-top: 0.85rem;
	padding-bottom: 0.85rem;
}

/* ==========================================================================
   Rotating message band — front page
   Slides left on a timer; see assets/js/message-carousel.js. Overflow is
   hidden on the viewport and the track is a flex row of full-width slides,
   so the transform is a simple percentage with no per-slide measurement.
   ========================================================================== */
.kds-carousel {
	position: relative;
	overflow: hidden;
}

.kds-carousel__viewport {
	overflow: hidden;
}

.kds-carousel__track {
	display: flex;
	transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

.kds-carousel__slide {
	flex: 0 0 100%;
	min-width: 100%;
	padding: 0 var(--wp--preset--spacing--50, 1.5rem);
	text-align: center;
	box-sizing: border-box;
}

.kds-carousel__text {
	max-width: 44rem;
	margin: 0 auto;
	color: var(--wp--preset--color--cream, #e8dcc8);
	font-style: italic;
	font-weight: 500;
	line-height: 1.45;
	font-size: clamp(1.25rem, 2.4vw, 2rem);
}

.kds-carousel__sub {
	max-width: 40rem;
	margin: 1rem auto 0;
	color: var(--wp--preset--color--mute, #b79bc9);
	font-size: 1rem;
	line-height: 1.6;
	font-style: normal;
}

.kds-carousel__dots {
	display: flex;
	justify-content: center;
	gap: 0.6rem;
	margin-top: 2rem;
}

.kds-carousel__dot {
	width: 0.6rem;
	height: 0.6rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--stone-600, #6d6e71);
	cursor: pointer;
	transition: background 200ms ease, transform 200ms ease;
}

.kds-carousel__dot:hover,
.kds-carousel__dot:focus-visible {
	background: var(--wp--preset--color--cream, #e8dcc8);
}

.kds-carousel__dot.is-active {
	background: var(--wp--preset--color--teal, #49c3c9);
	transform: scale(1.25);
}

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

/* --- Carousel: call-to-action slides -------------------------------------
   Three tiers per slide: a teal question, the coral action word (the link),
   and a cream detail line. The action word is sized to be readable at a
   glance so the slide never depends on the reader finishing a sentence.
   ------------------------------------------------------------------------ */
.kds-carousel__q {
	margin: 0;
	color: var(--wp--preset--color--teal, #49c3c9);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: lowercase;
}

.kds-carousel__action {
	margin: 0.35rem 0 0;
	line-height: 1.05;
}

.kds-carousel__action a {
	display: inline-block;
	color: var(--wp--preset--color--coral, #f2683c);
	font-size: clamp(2.25rem, 6vw, 4rem);
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 160ms ease, transform 160ms ease;
}

.kds-carousel__action a:hover,
.kds-carousel__action a:focus-visible {
	color: var(--wp--preset--color--coral-hi, #ff7d52);
	transform: translateY(-2px);
}

/* teal marks "where I am" — the state after you commit to the link */
.kds-carousel__action a:active,
.kds-carousel__action a:visited:focus-visible {
	color: var(--wp--preset--color--teal, #49c3c9);
	transform: translateY(0);
}

.kds-carousel__detail {
	margin: 0.5rem 0 0;
	color: var(--wp--preset--color--cream, #e8dcc8);
	font-size: 1.05rem;
	line-height: 1.5;
}

/* Only the words pause the rotation — not the full-bleed band. */
.kds-carousel__hoverzone {
	display: inline-block;
	max-width: 44rem;
}