/*
 * Finance ("Reports & Financials") visual refinement pass, 2026-09-02,
 * Ryan-directed. Every rule here is scoped to `.hcfb-finance-year` or
 * `.hcfb-finance-year`'s own descendants -- a class that exists ONLY on
 * this page's five fiscal-year sections (inc/finance-sections.php) -- so
 * nothing here can affect any other consumer of the shared
 * `.hcfb-editorial-grid*` component (Give's Ways to Give/Gift at Work,
 * Volunteer's Ways to Serve, Find Food's option cards, etc.). Enqueued
 * only alongside hcfb_is_finance_template() (functions.php), same
 * conditional-single-page convention as assets/css/give-experience.css.
 */

/* ------------------------------------------------------------------ */
/* 1. Tighter vertical rhythm between fiscal-year sections              */
/* ------------------------------------------------------------------ */

/*
 * Reduces ONLY the gap between two consecutive year sections (roughly
 * -17.5%: 2 x 4rem section padding down to ~6.6rem) -- deliberately keyed
 * on the adjacent-sibling combinator, not a blanket padding override, so
 * the hero-to-2025 gap and the 2021-to-CTA gap keep the same spacing as
 * every other prominent page's hero/CTA rhythm. Years remain clearly
 * separated by their own heading, intro date range, and background/border
 * treatment -- this only tightens the whitespace between them.
 */
/*
 * Specificity note: prominent-sections.css's own
 * `body.hcfb-public-shell.hcfb-prominent-experience #hcfb-primary-content
 * .wp-block-post-content > *` rule zeroes every section's
 * `margin-block-start` (1 id, 3 classes) to kill Gutenberg's default
 * blockGap seam -- a plain `.hcfb-finance-year + .hcfb-finance-year`
 * (0 id, 2 classes) would lose to it regardless of load order. Matching
 * that same qualified shape here (1 id, 4 classes) wins on its own
 * merits, same technique this file's own header comment already
 * describes elsewhere in this codebase for an equivalent override.
 */
body.hcfb-public-shell.hcfb-prominent-experience #hcfb-primary-content .hcfb-finance-year + .hcfb-finance-year {
	margin-top: calc(var(--wp--preset--spacing--hcfb-xl, 4rem) * -0.35);
}

/* ------------------------------------------------------------------ */
/* 2. Whole-card clickable documents (stretched-link pattern)           */
/* ------------------------------------------------------------------ */

/*
 * Exactly one real interactive element per card (the existing, unchanged
 * .hcfb-editorial-grid__card-link, with its own already-descriptive
 * accessible name) -- no button/link is added inside another. Its
 * ::after is stretched to cover the whole card via `position: relative`
 * on the card + `inset: 0` here, so a click anywhere on the card
 * (icon, heading, body copy, or the visible link text itself) activates
 * that one link. Standard, widely-used technique (e.g. Bootstrap's own
 * `.stretched-link`) for "whole card clickable, no nested interactive
 * elements."
 */
.hcfb-finance-year .hcfb-editorial-grid__card {
	position: relative;
}

.hcfb-finance-year .hcfb-editorial-grid__card-link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	cursor: pointer;
}

/*
 * Hover feedback across the whole card: a faint tint on the stretched
 * ::after (fires whenever the pointer is anywhere in the card, since
 * ::after's hit area covers it) plus a subtle border/lift on the card
 * itself. The border/lift line uses :has() as a progressive enhancement
 * only -- browsers without :has() support simply keep the tint-only
 * feedback below, never a broken or missing hover state.
 */
.hcfb-finance-year .hcfb-editorial-grid__card-link:hover::after {
	/* rgba of the brand navy token (#262760), not a new color -- kept as a
	   plain rgba() rather than a relative-color-syntax derivation so this
	   hover tint renders identically in every supported browser. */
	background: rgba(38, 39, 96, 0.04);
}

@supports selector(:has(*)) {
	.hcfb-finance-year .hcfb-editorial-grid__card:has(.hcfb-editorial-grid__card-link:hover) {
		border-color: var(--wp--preset--color--hcfb-navy);
		box-shadow: 0 6px 18px rgba(27, 37, 89, 0.1);
	}
}

/*
 * Focus state: the shared prominent-sections.css rule already outlines
 * `.hcfb-editorial-grid__card-link:focus-visible` directly (a ring around
 * just the small visible link text) -- on this page that ring is
 * suppressed in favor of one clear ring around the WHOLE card instead,
 * drawn on the same stretched ::after used for the click target, using
 * the identical color/width/offset every other focus-visible ring on
 * this site already uses (prominent-sections.css's own "Focus visibility"
 * block) -- not a new focus treatment.
 */
.hcfb-finance-year .hcfb-editorial-grid__card-link:focus-visible {
	outline: none;
}

.hcfb-finance-year .hcfb-editorial-grid__card-link:focus-visible::after {
	outline: 3px solid var(--wp--preset--color--hcfb-focus, #262760);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.hcfb-finance-year .hcfb-editorial-grid__card,
	.hcfb-finance-year .hcfb-editorial-grid__card-link::after {
		transition: none;
	}
}