/*
 * Awareness That Heals — theme.css
 *
 * Class-targeted styles that theme.json doesn't cover. The palette,
 * typography, and per-block defaults live in theme.json; this file
 * is for component-level rules (cards, pills, button variants) and
 * the radius scale (theme.json's `custom.radius` exposes them as
 * --wp--custom--radius--*).
 *
 * See BRANDING.md for the canonical token map.
 */

/* =========================================================
 * Radius scale — surfaced as --ath-radius-* aliases for terser
 * authoring. Values come from theme.json settings.custom.radius.
 * ========================================================= */
:root {
	--ath-radius-sm:   var(--wp--custom--radius--sm);
	--ath-radius-md:   var(--wp--custom--radius--md);
	--ath-radius-lg:   var(--wp--custom--radius--lg);
	--ath-radius-pill: var(--wp--custom--radius--pill);
}

/* =========================================================
 * Buttons — four brand variants per the guide.
 * ========================================================= */

/* All button variants share base shape: 6px radius, Jost 500,
 * tracked. Padding tuned to match the brand mockups. */
.wp-block-button .wp-block-button__link {
	border-radius: var(--ath-radius-sm);
	font-family: var(--wp--preset--font-family--body-sans);
	font-weight: 500;
	letter-spacing: 0.08em;
	font-size: 0.875rem;
	padding: 0.625rem 1.375rem;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}

/* Default / Primary — Deep Teal background, pale text.
 * Applied when no color preset is set on the button. */
.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) {
	background: var(--wp--preset--color--deep-teal);
	color: var(--wp--preset--color--teal-pale);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):focus-visible {
	background: var(--wp--preset--color--teal-mid);
	color: #fff;
}

/* Accent (CTA) — Sage. Applied when the button has the sage
 * background preset; hover lightens to sage-light. */
.wp-block-button .wp-block-button__link.has-sage-background-color:hover,
.wp-block-button .wp-block-button__link.has-sage-background-color:focus-visible {
	background: var(--wp--preset--color--sage-light);
}

/* Outlined / Secondary — transparent bg, deep teal text + border. */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border: 1.5px solid var(--wp--preset--color--deep-teal);
	color: var(--wp--preset--color--deep-teal);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--deep-teal);
	color: var(--wp--preset--color--teal-pale);
}

/* =========================================================
 * Archive cards
 * ========================================================= */

.ath-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
	margin-block-end: var(--wp--preset--spacing--3);
}

/* The figure carries the aspect-ratio (set via the post-featured-image
 * block's aspectRatio attr — 4:3 across all archives). The <img>
 * fills the figure and crops via object-fit:cover so source images
 * of varying ratios all present the same shape. */
.ath-card__image {
	border-radius: var(--ath-radius-md);
	overflow: hidden;
	display: block;
}

.ath-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: opacity 150ms ease;
}

.ath-card__image:hover img,
.ath-card__image:focus-visible img {
	opacity: 0.85;
}

.ath-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--1);
}

/* Episode badge — eyebrow style per brand guide:
 * Jost, ~11px, uppercase, tracked, teal-muted. */
.ath-card__episode {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--body-sans);
	font-size: 0.6875rem;
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--teal-muted) !important;
}

/* Card title — Cormorant Garamond, smaller than single-post titles. */
.ath-card .wp-block-post-title,
.ath-card__title {
	font-family: var(--wp--preset--font-family--heading-serif);
	font-size: 1.25rem !important;
	font-weight: 400;
	line-height: 1.3;
	margin: 0 !important;
}

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

.ath-card .wp-block-post-title a:hover,
.ath-card .wp-block-post-title a:focus-visible {
	color: var(--wp--preset--color--teal-mid);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ath-card .wp-block-post-excerpt {
	color: var(--wp--preset--color--teal-muted);
	font-size: 0.9375rem;
	font-weight: 300;
	line-height: 1.6;
}

.ath-card .wp-block-post-excerpt__more-link {
	color: var(--wp--preset--color--sage);
	font-weight: 500;
}

/* Downloads list variant — single-column rows, no thumbnail. */
.ath-card--download {
	margin-block-end: 0;
}
.ath-card--download .wp-block-post-title {
	font-size: 1.125rem !important;
}

/* =========================================================
 * Taxonomy pills (.ath-pills on core/post-terms)
 * ========================================================= */

.ath-pills.wp-block-post-terms {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	font-family: var(--wp--preset--font-family--body-sans);
	font-size: 0.75rem;
	font-weight: 400;
	letter-spacing: 0.04em;
	line-height: 1;
}

.ath-pills.wp-block-post-terms a {
	background: var(--wp--preset--color--teal-pale);
	color: var(--wp--preset--color--deep-teal);
	padding: 0.3125rem 0.75rem;
	border-radius: var(--ath-radius-pill);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 150ms ease, color 150ms ease;
}

.ath-pills.wp-block-post-terms a:hover,
.ath-pills.wp-block-post-terms a:focus-visible {
	background: var(--wp--preset--color--deep-teal);
	color: var(--wp--preset--color--teal-pale);
}

.ath-pills.wp-block-post-terms:empty {
	display: none;
}

/* =========================================================
 * Archive header
 * ========================================================= */

.ath-archive__title {
	margin-block-end: var(--wp--preset--spacing--1);
}