/**
 * Trustee Sites — token-driven front stylesheet.
 *
 * Every value here resolves through the --tz-* custom properties that the
 * trustee-sites-connector plugin prints in wp_head (Customizer values,
 * falling back to the active style variation's preset defaults). The
 * theme works fully without the connector via the var() fallbacks below.
 *
 * @package Trustee_Sites
 */

/* Container ---------------------------------------------------------- */

.tz-container,
.site-content > .wp-block-group,
.site-content > * {
	max-width: var(--tz-container, 1180px);
}

/* Typography --------------------------------------------------------- */

body {
	font-family: var(--tz-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
	font-size: var(--tz-base-size, 18px);
	color: var(--tz-text, #1a202c);
	background-color: var(--tz-surface, #ffffff);
}

h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-heading {
	font-family: var(--tz-font-heading, Georgia, 'Times New Roman', serif);
	line-height: 1.2;
}

a {
	color: var(--tz-primary, #1a365d);
}

/* Buttons --------------------------------------------------------------
 * The Customizer's button style/radius map to body classes
 * (tz-buttons-outline, tz-buttons-radius-pill, …) plus --tz-radius-button.
 */

.wp-block-button__link,
.tz-button,
a.tz-button {
	display: inline-block;
	padding: 0.75em 1.75em;
	font-weight: 600;
	font-family: var(--tz-font-body, inherit);
	font-size: 1em;
	text-decoration: none;
	border-radius: var(--tz-radius-button, 6px);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.wp-block-button__link,
.tz-button,
a.tz-button {
	background-color: var(--tz-primary, #1a365d);
	color: var(--tz-on-primary, #ffffff);
	border: 2px solid var(--tz-primary, #1a365d);
}

.wp-block-button__link:hover,
.tz-button:hover,
a.tz-button:hover {
	background-color: var(--tz-secondary, #2f855a);
	border-color: var(--tz-secondary, #2f855a);
	color: var(--tz-on-primary, #ffffff);
}

/* Outline button variant (Customizer: Buttons → Style → Outline). */
.tz-buttons-outline .wp-block-button__link,
.tz-buttons-outline .tz-button,
.tz-buttons-outline a.tz-button {
	background-color: transparent;
	color: var(--tz-primary, #1a365d);
}

.tz-buttons-outline .wp-block-button__link:hover,
.tz-buttons-outline .tz-button:hover,
.tz-buttons-outline a.tz-button:hover {
	background-color: var(--tz-primary, #1a365d);
	color: var(--tz-on-primary, #ffffff);
}

/* Button radius presets. */
.tz-buttons-radius-0 { --tz-radius-button: 0; }
.tz-buttons-radius-pill { --tz-radius-button: 9999px; }

/* Cards ----------------------------------------------------------------
 * Appeal cards rendered by the trustee blocks, and any group tagged
 * .tz-card. Card vs. flat comes from the Customizer layout setting
 * (body class tz-card-style-flat).
 */

.tz-card,
.tz-appeals-grid .tz-appeal-card {
	background: var(--tz-surface, #ffffff);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: var(--tz-radius-card, 12px);
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
}

.tz-card-style-flat .tz-card,
.tz-card-style-flat .tz-appeals-grid .tz-appeal-card {
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
}

.tz-appeal-card .tz-appeal-card-body {
	padding: 1.5rem;
}

.tz-appeal-card h3 {
	margin-top: 0;
	margin-bottom: 0.5rem;
	font-size: 1.25rem;
}

.tz-appeal-card p {
	color: var(--tz-text-muted, #5a6472);
}

/* Appeal grid (trustee/appeals-grid block). */
.tz-appeals-grid {
	display: grid;
	grid-template-columns: repeat(var(--tz-grid-cols, 3), minmax(0, 1fr));
	gap: 1.5rem;
}

@media (max-width: 781px) {
	.tz-appeals-grid {
		grid-template-columns: 1fr;
	}
}

/* Progress bars (trustee/progress-bar block, appeal cards). */
.tz-progress {
	height: 10px;
	background: var(--tz-surface-alt, #f6f7f9);
	border-radius: 9999px;
	overflow: hidden;
}

.tz-progress .tz-progress-bar {
	height: 100%;
	width: 0;
	max-width: 100%;
	background: var(--tz-primary, #1a365d);
	border-radius: inherit;
	transition: width 0.6s ease;
}

.tz-progress-meta {
	display: flex;
	justify-content: space-between;
	margin-top: 0.5rem;
	font-size: 0.875rem;
	color: var(--tz-text-muted, #5a6472);
}

/* Events list (trustee/events-list block). */
.tz-events-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.tz-events-list li {
	padding: 1rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.tz-events-list .tz-event-date {
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--tz-secondary, #2f855a);
}

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

.tz-sticky-header .tz-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--tz-surface, #ffffff);
}

.tz-site-header {
	padding-top: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.tz-header-centered .tz-site-header {
	text-align: center;
}

.tz-header-stacked .tz-site-header nav {
	justify-content: center;
}

/* Hero / sections ------------------------------------------------------ */

.tz-hero {
	padding-top: 4rem;
	padding-bottom: 4rem;
}

.tz-hero .wp-block-heading {
	font-size: clamp(2rem, 5vw, 3.5rem);
}

.tz-surface-alt {
	background: var(--tz-surface-alt, #f6f7f9);
}

/* Footer. */
.tz-site-footer {
	padding-top: 3rem;
	padding-bottom: 3rem;
	font-size: 0.875rem;
	color: var(--tz-text-muted, #5a6472);
}