/**
 * City Wide landing rebrand — shared tokens and utilities.
 * Colors come from parent theme.json presets (var(--wp--preset--color--*)).
 * New landing blocks can @layer or use these classes for consistency.
 */

:root {
	/* Matches site template content width — use for every landing block inner wrapper. */
	--cw-landing-max-width: 1160px;

	/* Spacing rhythm for landing sections (used by new blocks). */
	--cw-landing-section-pad-y: clamp(2rem, 5vw, 3rem);
	--cw-landing-section-pad-x: clamp(1rem, 4vw, 5.5rem);
	--cw-radius-card: 1.5rem;
	--cw-radius-pill: 2.5rem;
	--cw-radius-button: 1.25rem;
	--cw-stat-gap: 1rem;
}

/**
 * Standard inner container for landing blocks (full-bleed section + centered content).
 * Add this class to the block’s main inner wrapper, or use max-width: var(--cw-landing-max-width) in block CSS.
 */
.cw-landing-container {
	width: 100%;
	max-width: var(--cw-landing-max-width);
	margin-inline: auto;
	box-sizing: border-box;
}

/**
 * Gutenberg applies a default flow spacing:
 *   :root :where(.is-layout-flow) > * { margin-block-start: 24px; }
 * We don't want that added top margin on our landing sections (each section already controls its own spacing).
 * This overrides it ONLY for direct children whose class starts with "cw-landing-".
 */
.is-layout-flow > [class^="cw-landing-"] {
	margin-block-start: 0;
}

/* Eyebrow / pill — gold accent on dark backgrounds */
.cw-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.25rem 0.75rem;
	border-radius: var(--cw-radius-pill);
	border: 1px solid var(--wp--preset--color--gold, #e5b423);
	background-color: transparent;
	color: var(--wp--preset--color--gold, #e5b423);
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.cw-eyebrow {
	color: var(--wp--preset--color--gold, #e5b423);
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	margin: 0 0 0.5rem;
}

/* Primary CTA — brand red */
.cw-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 0.875rem;
	border-radius: var(--cw-radius-button);
	background-color: var(--wp--preset--color--red, #d7282f);
	color: var(--wp--preset--color--white, #fff);
	font-size: 0.875rem;
	font-weight: 700;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.cw-btn-primary:hover,
.cw-btn-primary:focus-visible {
	background-color: var(--wp--preset--color--red-deep, #c1080f);
	color: var(--wp--preset--color--white, #fff);
	text-decoration: none;
}

.cw-btn-primary:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold, #e5b423);
	outline-offset: 2px;
}