/*
 * VIC custom CSS — only things theme.json can't express.
 * Keep this file small. Anything that fits in theme.json belongs there.
 */

/* ---------------------------------------------------------------------------
 * Skip link — invisible until focused, then jumps above all content.
 * ------------------------------------------------------------------------- */
.skip-link {
	position: absolute;
	left: -10000px;
	top: 0.5rem;
	z-index: 10000;
	padding: 0.875rem 1.25rem;
	background: var(--wp--preset--color--inverted);
	color: var(--wp--preset--color--inverted-foreground);
	font-weight: 700;
	font-size: 1.125rem;
	text-decoration: none;
	border-radius: 0 0 0.25rem 0.25rem;
}
.skip-link:focus {
	left: 0.5rem;
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Visible focus rings for everything keyboard-focusable.
 * Default WP focus ring is too thin for older eyes.
 * ------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---------------------------------------------------------------------------
 * Tap-target floor — every linked thing in nav/buttons gets ≥ 48px height.
 * ------------------------------------------------------------------------- */
.wp-block-navigation .wp-block-navigation-item__content,
.wp-block-button__link,
.wp-block-search button {
	min-height: 48px;
	display: inline-flex;
	align-items: center;
}

/* ---------------------------------------------------------------------------
 * Reduced motion — the theme has no motion of its own, but plugins or
 * user-added blocks (e.g. a Cover with parallax) might. Belt and braces.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	.wp-block-cover.has-parallax {
		background-attachment: scroll !important;
	}
}

/* ---------------------------------------------------------------------------
 * Comfortable line length even for full-bleed paragraphs the editor places
 * outside our 720px content width.
 * ------------------------------------------------------------------------- */
.entry-content > p,
.entry-content > ul,
.entry-content > ol {
	max-width: 65ch;
}
.entry-content > .alignwide,
.entry-content > .alignfull,
.entry-content > .alignwide > *,
.entry-content > .alignfull > * {
	max-width: none;
}

/* ---------------------------------------------------------------------------
 * Image migration default: imported images will overflow on small screens
 * unless we let them shrink.
 * ------------------------------------------------------------------------- */
.wp-block-image img,
.entry-content img {
	max-width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------------
 * Site header chrome — centers logo + nav + CTA on a band of cream.
 * Uses theme.json colors so the palette stays the source of truth.
 * ------------------------------------------------------------------------- */
.site-header-band {
	border-bottom: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--background);
}

/* Footer — quieter background, more padding so dense info doesn't crowd. */
.site-footer-band {
	background: var(--wp--preset--color--inverted);
	color: var(--wp--preset--color--inverted-foreground);
}
.site-footer-band a {
	color: var(--wp--preset--color--inverted-foreground);
	text-decoration: underline;
}
.site-footer-band a:hover,
.site-footer-band a:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------------------
 * "Card" pattern used in services & centers grids — high-contrast border
 * around a generous block of text. Avoids relying on shadow alone.
 * ------------------------------------------------------------------------- */
.vic-card {
	border: 2px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--background-alt);
	padding: 1.5rem;
	border-radius: 0.5rem;
}
.vic-card:hover,
.vic-card:focus-within {
	border-color: var(--wp--preset--color--primary);
}

/* ---------------------------------------------------------------------------
 * Footer recognition row — iOS-style frosted glass cards over the navy band.
 * Uniform card size so awards with very different aspect ratios still line up
 * neatly; the image inside scales to fit. Wraps gracefully at narrow widths.
 * ------------------------------------------------------------------------- */
.vic-badges-heading {
	letter-spacing: 0.01em;
}
.vic-badges {
	list-style: none;
	padding: 0;
	margin: 0 0 2.5rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.75rem;
}
.vic-badges > li {
	margin: 0;
	padding: 0;
	display: flex;
}
.vic-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 140px;
	height: 140px;
	padding: 0.75rem;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 1.125rem;
	backdrop-filter: blur(20px) saturate(140%);
	-webkit-backdrop-filter: blur(20px) saturate(140%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.16),
		0 8px 22px rgba(0, 0, 0, 0.22);
	transition:
		background-color 140ms ease,
		border-color 140ms ease,
		transform 140ms ease,
		box-shadow 140ms ease;
}
.vic-badge img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}
a.vic-badge {
	text-decoration: none;
}
a.vic-badge:hover,
a.vic-badge:focus-visible {
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.40);
	transform: translateY(-2px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.18),
		0 12px 28px rgba(0, 0, 0, 0.28);
}
a.vic-badge:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
	.vic-badge { transition: none; }
	a.vic-badge:hover,
	a.vic-badge:focus-visible { transform: none; }
}

/* ---------------------------------------------------------------------------
 * Print — keep it useful. Hide nav, expand content, retain link URLs.
 * ------------------------------------------------------------------------- */
@media print {
	.skip-link,
	.site-header-band nav,
	.wp-block-search,
	.site-footer-band .wp-block-button,
	.vic-badges,
	.vic-badges-heading {
		display: none !important;
	}
	a::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		word-break: break-all;
	}
}