/*
Theme Name: SF SPCA Demo
Template: twentytwentyfive
Description: Demo skin for the Dogathon sponsor embed, loosely styled after sfspca.org.
Version: 0.2.0
*/
@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;500;600&family=Montserrat:wght@400;500;600;700&display=swap");

:root {
	--sf-bg: #efece7;
	--sf-text: #333f4c;
	--sf-red: #bf2e48;
	--sf-red-dark: #a3263d;
	--sf-navy: #1a517b;
	--sf-teal: #37c7d1;
	--sf-line: #d9d6cf;
	--sf-serif: "Crimson Pro", Georgia, "Times New Roman", serif;
	--sf-sans: Montserrat, "Helvetica Neue", Arial, sans-serif;
}

body {
	background: var(--sf-bg);
	color: var(--sf-text);
	font-family: var(--sf-sans);
	font-size: 1.0625rem;
	line-height: 1.6;
}

h1, h2, h3, h4, .wp-block-post-title {
	font-family: var(--sf-serif);
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.15;
	color: #3a3a38;
}

h1 { font-size: 2.6rem; }
h2 { font-size: 2.2rem; }

a:where(:not(.wp-element-button):not(.pet-button):not(.dogathon-sponsor-cta)) {
	color: var(--sf-navy);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Header: white bar like the reference, page title hidden because each demo page carries its own heading. */
.wp-site-blocks > header {
	background: #fff;
	box-shadow: 0 1px 0 var(--sf-line);
}

.wp-site-blocks > header .wp-block-site-title a {
	color: var(--sf-red);
	font-family: var(--sf-sans);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
}

.wp-site-blocks > header .wp-block-navigation a {
	font-family: var(--sf-sans);
	font-size: 0.95rem;
	color: var(--sf-text);
	text-decoration: none;
}

.page .wp-block-post-title {
	display: none;
}

.wp-site-blocks > footer {
	border-top: 1px solid #c9c5bc;
}

/* Buttons: square, uppercase, tracked. */
.wp-element-button,
.wp-block-button__link,
.pet-button,
.dogathon-sponsor-button,
.dogathon-sponsor-cta {
	display: inline-block;
	border: 2px solid var(--sf-red);
	border-radius: 0;
	background: var(--sf-red);
	color: #fff;
	padding: 0.7rem 1.5rem;
	font-family: var(--sf-sans);
	font-weight: 600;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 120ms ease, color 120ms ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover,
.pet-button:hover,
.dogathon-sponsor-button:hover,
.dogathon-sponsor-cta:hover {
	background: var(--sf-red-dark);
	border-color: var(--sf-red-dark);
	color: #fff;
	text-decoration: none;
}

.pet-button-navy {
	background: var(--sf-navy);
	border-color: var(--sf-navy);
}

.pet-button-navy:hover {
	background: #143f61;
	border-color: #143f61;
}

/* Animal pages. */
.pet-back {
	margin-top: 1rem;
	font-size: 0.95rem;
}

.pet-gallery.wp-block-gallery {
	gap: 1rem;
	margin: 2rem 0 3rem;
}

.pet-gallery.wp-block-gallery .wp-block-image img {
	border-radius: 0;
	aspect-ratio: 1;
	object-fit: cover;
}

.pet-columns.wp-block-columns {
	gap: 3rem;
}

.pet-columns h1 {
	margin-top: 0;
}

.pet-facts p {
	margin: 0 0 0.5rem;
}

.pet-facts strong {
	font-weight: 700;
}

.pet-actions {
	margin: 1.5rem 0 2rem;
}

.pet-lead {
	margin: 0 0 0.75rem;
	color: var(--sf-navy);
	font-weight: 700;
}

.pet-columns .dogathon-sponsor-cta {
	margin-bottom: 2rem;
	background: transparent;
	border-color: var(--sf-navy);
	color: var(--sf-navy);
}

.pet-columns .dogathon-sponsor-cta:hover {
	background: var(--sf-navy);
	border-color: var(--sf-navy);
	color: #fff;
}

/* Sponsor page. */
.sponsor-intro {
	padding: 2rem 0 1rem;
}

.sponsor-intro p {
	max-width: 44rem;
	margin-left: auto;
	margin-right: auto;
}

.sponsor-band {
	margin-top: 3rem;
	padding: 3.5rem 1rem;
	background: var(--sf-red);
	color: #fff;
}

.sponsor-band h2,
.sponsor-band p {
	color: #fff;
}

.sponsor-band p {
	max-width: 36rem;
	margin-left: auto;
	margin-right: auto;
}

.sponsor-band a {
	color: #fff;
}

/* Dogathon sponsor card, laid out like the reference tier cards. */
.sponsor-card-wrap .dogathon-sponsor-root {
	--dogathon-accent: var(--sf-red);
	--dogathon-radius: 0px;
	--dogathon-line: var(--sf-line);
	max-width: none;
}

.dogathon-sponsor-photo {
	width: 17rem;
	max-width: 100%;
	aspect-ratio: 1;
	margin: 0 auto;
	border-radius: 50%;
}

.dogathon-sponsor-name {
	margin-top: 1.5rem;
	text-align: center;
}

.dogathon-sponsor-details,
.dogathon-sponsor-price,
.dogathon-sponsor-status,
.dogathon-sponsor-intro {
	text-align: center;
}

.dogathon-sponsor-root > .dogathon-sponsor-price,
.dogathon-sponsor-root > .dogathon-sponsor-tier-description {
	display: none;
}

.dogathon-sponsor-tiers {
	grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
	gap: 1rem;
	margin-top: 1rem;
}

.dogathon-sponsor-tiers > legend {
	text-align: center;
	font-family: var(--sf-serif);
	font-size: 1.6rem;
	font-weight: 500;
	margin-bottom: 0.5rem;
}

.dogathon-sponsor-tier {
	padding: 1.5rem 1rem 1.6rem;
	background: #fff;
	border-radius: 0;
	box-shadow: 0 1px 4px rgb(0 0 0 / 10%);
	text-align: center;
}

.dogathon-sponsor-tier::before {
	display: none;
}

.dogathon-sponsor-tier:hover {
	background: #fff;
	box-shadow: 0 2px 10px rgb(0 0 0 / 16%);
}

.dogathon-sponsor-tier:has(.dogathon-sponsor-tier-input:checked) {
	background: #fff;
	box-shadow: inset 0 0 0 2px var(--sf-red), 0 2px 10px rgb(0 0 0 / 12%);
}

.dogathon-sponsor-tier-copy {
	gap: 0.6rem;
}

.dogathon-sponsor-tier-copy > strong {
	color: var(--sf-navy);
	font-size: 1.7rem;
	font-weight: 600;
}

.dogathon-sponsor-tier .dogathon-sponsor-tier-description {
	font-size: 0.8rem;
	line-height: 1.5;
	opacity: 1;
}

.dogathon-sponsor-form {
	gap: 1.25rem;
	margin-top: 2rem;
}

.dogathon-sponsor-form .dogathon-sponsor-field {
	max-width: 28rem;
	width: 100%;
	justify-self: center;
}

.dogathon-sponsor-label {
	font-size: 0.9rem;
	font-weight: 700;
}

.dogathon-sponsor-input {
	background: #fff;
	border: 1px solid #b9b5ac;
	border-radius: 0;
}

.dogathon-sponsor-input:focus {
	border-color: var(--sf-navy);
	box-shadow: 0 0 0 3px rgb(26 81 123 / 20%);
}

.dogathon-sponsor-form .dogathon-sponsor-button {
	justify-self: center;
	padding: 0.85rem 2rem;
	border-radius: 999px;
}

/* Collapse the parent template's title band, which stays in the DOM after hiding the title. */
.page .wp-site-blocks > main {
	margin-top: 0 !important;
}

.page .wp-site-blocks > main > .wp-block-group:first-child {
	padding-top: var(--wp--preset--spacing--40) !important;
	padding-bottom: 0 !important;
}

strong {
	font-weight: 700;
}

/* Home page roster: circular portraits with the name underneath. */
.roster-intro p {
	text-align: center;
	font-size: 1.1rem;
}

.pet-roster {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 3rem 2.5rem;
	max-width: 62rem;
	margin: 2.5rem auto 4rem;
	padding: 0;
	list-style: none;
}

.pet-roster-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	text-decoration: none;
	color: var(--sf-text);
}

.pet-roster-item img {
	width: 100%;
	max-width: 17rem;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.pet-roster-item span {
	font-family: var(--sf-sans);
	font-weight: 700;
	font-size: 1.2rem;
}

.pet-roster-item:hover span {
	color: var(--sf-red);
}

@media (max-width: 640px) {
	.pet-roster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem 1.5rem;
	}
}

/* Sponsor value proposition. */
.sponsor-perks { margin-bottom: 2.5rem; }
.sponsor-perks h2 { text-align: center; }
.sponsor-perk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 1.5rem; }
.sponsor-perk { background: #fff; border: 1px solid var(--sf-line); padding: 1.75rem; }
.sponsor-perk h3 { font-family: var(--sf-serif); font-size: 1.35rem; color: var(--sf-navy); margin: 0 0 0.6rem; }
.sponsor-perk p { margin: 0; font-size: 0.95rem; line-height: 1.6; }
@media (max-width: 720px) { .sponsor-perk-grid { grid-template-columns: 1fr; } }