/*
 * SCASP -- the rules theme.json has no vocabulary for.
 *
 * Everything here exists because a global style could not express it, not
 * because it was quicker to write CSS. If you find yourself adding to this
 * file, check Styles -> Blocks in the Site Editor first.
 *
 * 0. Font-size presets, pinned
 * 1. Link underline offset
 * 2. Navigation: current item and hover underline
 * 3. Button outline variation
 * 4. Eyebrow labels (the short rule before the label)
 * 5. Post Terms category pill
 * 6. News card hover
 * 7. Hero
 * 8. Conference bar date tile
 * 9. Numbered squares on the benefit cards
 * 10. Board headshots
 * 11. Grid breakpoints
 */

/* ---------------------------------------------------------------------------
 * 0. Font-size presets, pinned
 *
 * Blueprint defines its own font-size presets under the same slugs this theme
 * uses. When WordPress merges the parent and child theme.json, the parent's
 * values can win -- which rendered the hero H1 at roughly 150px instead of
 * 52px, because both the `h1` element rule and the `has-huge-font-size` class
 * resolve through the same custom property.
 *
 * Pinning the properties here settles it for both paths at once. The doubled
 * `:root:root` is deliberate: it out-specifies the plain `:root` rule that
 * global styles emits, so these win regardless of which stylesheet loads
 * first. These values are the same ones declared in theme.json -- if you
 * change a size there, change it here too.
 * ------------------------------------------------------------------------ */

:root:root {
	--wp--preset--font-size--xx-small: 12px;
	--wp--preset--font-size--x-small: 13px;
	--wp--preset--font-size--small: 15px;
	--wp--preset--font-size--medium: 17px;
	--wp--preset--font-size--large: 19px;
	--wp--preset--font-size--x-large: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
	--wp--preset--font-size--xx-large: clamp(1.75rem, 1.5rem + 1.25vw, 2.375rem);
	--wp--preset--font-size--huge: clamp(2.125rem, 1.55rem + 2.9vw, 3.25rem);
}

/* ---------------------------------------------------------------------------
 * 1. Link underline offset
 * theme.json sets the colour and the underline; the offset has no control.
 * ------------------------------------------------------------------------ */

a:where(:not(.wp-element-button)) {
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

a:where(:not(.wp-element-button)):hover {
	text-decoration-thickness: 2px;
}

/* ---------------------------------------------------------------------------
 * 2. Navigation
 * The design marks the current page with a 2px Pacific Cyan rule under the
 * item, and shows the same rule on hover. The Navigation block emits
 * .current-menu-item; nothing in Styles -> Blocks reaches it.
 * ------------------------------------------------------------------------ */

.wp-block-navigation .wp-block-navigation-item__content {
	padding-bottom: 3px;
	border-bottom: 2px solid transparent;
	text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus-visible,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content {
	border-bottom-color: var( --wp--preset--color--accent-5 );
	text-decoration: none;
}

/* The mobile overlay is a separate colour context -- inside it the underline
 * would read as an error, so drop it. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	padding-bottom: 0;
	border-bottom: 0;
}

/* ---------------------------------------------------------------------------
 * 3. Button outline variation
 * Core's is-style-outline hard-codes a 2px currentColor border. The design
 * wants 1.5px Carolina Blue with no fill (guide step 6).
 * ------------------------------------------------------------------------ */

.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1.5px solid var( --wp--preset--color--accent-3 );
	background-color: transparent;
	padding: 14px 26px;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus {
	background-color: var( --wp--preset--color--accent-4 );
	border-color: var( --wp--preset--color--accent-3 );
}

/* An outline button on a light background needs a darker border to stay
 * legible -- Carolina Blue on white fails contrast (see the pre-launch
 * checklist). Add this class to any outline button on Mist or white. */
.wp-block-button.is-style-outline.scasp-on-light > .wp-block-button__link {
	border-color: var( --wp--preset--color--accent-2 );
	color: var( --wp--preset--color--accent-1 );
}

.wp-block-button.is-style-outline.scasp-on-light > .wp-block-button__link:hover,
.wp-block-button.is-style-outline.scasp-on-light > .wp-block-button__link:focus {
	background-color: var( --wp--preset--color--accent-1 );
	color: var( --wp--preset--color--base );
}

/* ---------------------------------------------------------------------------
 * 4. Eyebrow labels
 * A short rule, then an uppercase label. Written as a ::before so the label
 * stays an ordinary Paragraph the board can click and edit.
 * ------------------------------------------------------------------------ */

.scasp-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-weight: 700;
	line-height: 1.2;
}

.scasp-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 38px;
	height: 3px;
	background-color: var( --wp--preset--color--accent-5 );
}

/* Statehouse card: shorter rule, Indigo Dye instead of Pacific Cyan. */
.scasp-eyebrow.scasp-eyebrow--tight {
	letter-spacing: 0.14em;
	gap: 10px;
}

.scasp-eyebrow.scasp-eyebrow--tight::before {
	width: 26px;
	background-color: var( --wp--preset--color--accent-1 );
}

/* A label with no rule at all (members-only card, footer column headings). */
.scasp-label {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 800;
	line-height: 1.2;
}

/* ---------------------------------------------------------------------------
 * 5. Post Terms category pill
 * theme.json styles the block's text but cannot pad an inline <a>, which is
 * what the Columbia Blue tag actually is.
 * ------------------------------------------------------------------------ */

.wp-block-post-terms a,
.wp-block-post-terms .wp-block-post-terms__separator + a {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding: 0 9px;
	border-radius: 4px;
	background-color: var( --wp--preset--color--accent-6 );
	color: var( --wp--preset--color--accent-1 );
	text-decoration: none;
}

.wp-block-post-terms a:hover,
.wp-block-post-terms a:focus {
	background-color: var( --wp--preset--color--accent-3 );
	color: var( --wp--preset--color--accent-1 );
	text-decoration: none;
}

/* A post in two categories would otherwise render "Advocacy, Events" with a
 * stray comma between two pills. */
.wp-block-post-terms .wp-block-post-terms__separator {
	visibility: hidden;
	width: 4px;
	display: inline-block;
}

/* ---------------------------------------------------------------------------
 * 6. News card hover
 * Group blocks have no hover state in Styles.
 * ------------------------------------------------------------------------ */

.scasp-news-card {
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.scasp-news-card:hover,
.scasp-news-card:focus-within {
	border-color: var( --wp--preset--color--accent-3 );
	box-shadow: var( --wp--preset--shadow--card );
}

/* The featured image is the card's top edge -- square it off against the
 * card's own 4px radius. */
.scasp-news-card .wp-block-post-featured-image img {
	border-radius: 0;
	display: block;
	width: 100%;
}

/* ---------------------------------------------------------------------------
 * 7. Hero
 * ------------------------------------------------------------------------ */

/* Keeps the lede from running the full width of the text column. */
.scasp-hero__lede {
	max-width: 560px;
}

/* Columbia Blue behind the hero photo, so the slot is legible in the editor
 * before a real image is dropped in, and if the image ever 404s. */
.scasp-hero__media {
	background-color: var( --wp--preset--color--accent-6 );
	border-radius: 0;
}

/* Below the Columns block's stacking breakpoint the photo no longer needs to
 * hold a 480px column open. */
@media ( max-width: 781px ) {
	.scasp-hero__media {
		min-height: 280px !important;
	}
}

/* ---------------------------------------------------------------------------
 * 8. Conference bar date tile
 * A fixed-width tile; Group has no width control.
 * ------------------------------------------------------------------------ */

.scasp-date-tile {
	flex: 0 0 82px;
	width: 82px;
	text-align: center;
}

.scasp-date-tile p {
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * 9. Numbered squares on the benefit cards
 * A 34px square holding one digit. Paragraph has no width control.
 * ------------------------------------------------------------------------ */

.scasp-numeral {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 4px;
	background-color: var( --wp--preset--color--accent-6 );
	color: var( --wp--preset--color--accent-1 );
	font-size: 15px;
	font-weight: 800;
	line-height: 1;
}

/* ---------------------------------------------------------------------------
 * 10. Board headshots
 * A Cover block standing in for a headshot: 124px circle, centred in its grid
 * cell. Replace the Cover's media with the real photo and set the overlay
 * opacity to 0 -- the 50% radius and the sizing stay.
 * ------------------------------------------------------------------------ */

.scasp-avatar {
	width: 124px;
	max-width: 100%;
	margin-inline: auto;
	overflow: hidden;
}

/* ---------------------------------------------------------------------------
 * 11. Grid breakpoints
 * The Grid layout's column count is fixed, which is right at desktop and wrong
 * on a phone. Guide step 15 flags five headshots as too tight below ~900px.
 * ------------------------------------------------------------------------ */

@media ( max-width: 1100px ) {
	.scasp-board.is-layout-grid {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 700px ) {
	.scasp-board.is-layout-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 600px ) {
	.scasp-benefits.is-layout-grid {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/* The news Query Loop uses the same Grid layout; two columns is too tight on a
 * phone. The Post Template block emits its own container class, so target the
 * layout class directly. */
@media ( max-width: 600px ) {
	.wp-block-post-template.is-layout-grid {
		grid-template-columns: minmax( 0, 1fr );
	}
}