/**
 * Flamingo Marine — Cross-section interaction baseline (P3.19).
 *
 * Two jobs:
 *   1. A universal keyboard-focus ring. Every interactive element that doesn't
 *      already define its own :focus-visible gets a visible 2px accent ring.
 *      We use :focus-visible (NOT :focus) so a mouse click never paints the
 *      ring — only keyboard / programmatic focus does.
 *   2. A global button baseline: hover = subtle lift (-1px) + the per-variant
 *      colour swap (defined in header.css / cycling-product-showcase.css), and
 *      focus-visible = the same ring. Per-section files keep their colour
 *      logic; this file only layers the ring + motion on top so the keyboard
 *      and mouse states are never visually identical.
 *
 * Token note: the focus ring uses --accent-pink (#FF4E77) as the single
 * site-wide ring colour for consistency. The few elements that intentionally
 * ride a different ring (configurator hotspots / perf chevron use --focus blue;
 * the showcase nav uses --surface-deep on its light bg) keep their own rule
 * because their existing :focus-visible has higher specificity than the
 * :where() baseline below — see the :where() note.
 *
 * Loaded globally from functions.php, after all section partials.
 */

/* --- Focus-ring custom properties --------------------------------------- */

:root {
	--flm-focus-ring-color: var(--wp--preset--color--accent-pink);
	--flm-focus-ring-width: 2px;
	--flm-focus-ring-offset: 2px;
}

/* --- Universal :focus-visible baseline ----------------------------------- */
/*
 * :where() keeps specificity at 0,0,0 so ANY section partial's own
 * :focus-visible (specificity >= 0,1,0) wins automatically — no conflicts,
 * no duplication. This is purely a safety net for interactive elements that
 * have no bespoke focus rule (default buttons, inline links, etc.).
 */
:where(a, button, [role="button"], [role="tab"], summary, input, select, textarea, [tabindex]):focus-visible {
	outline: var(--flm-focus-ring-width) solid var(--flm-focus-ring-color);
	outline-offset: var(--flm-focus-ring-offset);
}

/* Suppress the legacy :focus ring for elements that support :focus-visible,
   so a mouse click never leaves a lingering outline. */
:where(a, button, [role="button"], [role="tab"], summary):focus:not(:focus-visible) {
	outline: none;
}

/* --- Global button baseline (all WP button variants) --------------------- */
/*
 * The colour swap on hover/focus already lives per-variant (outlined-white,
 * filled-white, dark showcase CTA). Here we add the shared motion + ring so
 * every button reads the same: lift on hover, ring on keyboard focus.
 */
.wp-block-button__link {
	transition:
		transform 0.15s ease,
		background-color 0.15s ease,
		color 0.15s ease,
		box-shadow 0.15s ease;
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
}

.wp-block-button__link:active {
	transform: translateY(0);
}

/*
 * Buttons get an explicit ring with higher specificity than their per-variant
 * `outline: none` (which lives at .flm-header .is-style-* … :focus-visible,
 * specificity 0,3,0). We match that with three classes via :is() targeting the
 * known variants plus a bare-button fallback. The ring sits OUTSIDE the button
 * (offset) so it reads against any fill colour.
 */
.is-style-outlined-white > .wp-block-button__link:focus-visible,
.is-style-filled-white > .wp-block-button__link:focus-visible,
.flm-header .is-style-outlined-white .wp-block-button__link:focus-visible,
.flm-header .is-style-filled-white .wp-block-button__link:focus-visible,
.flm-rove-showcase .flm-rove-showcase__cta .wp-block-button__link:focus-visible,
.wp-block-button__link:focus-visible {
	outline: var(--flm-focus-ring-width) solid var(--flm-focus-ring-color);
	outline-offset: var(--flm-focus-ring-offset);
}

/* --- Visually-hidden utility (SEO / screen-reader H1s) ------------------- */
/*
 * Hides an element from sighted users while keeping it in the accessibility
 * tree and crawlable by search engines. Use for H1s whose semantic role is
 * needed by crawlers but whose visual role is served by an image/video/wordmark.
 */
.flm-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- Reduced motion ------------------------------------------------------ */
/*
 * Keyboard users who prefer reduced motion still need the focus ring and the
 * colour swap — we only drop the translate/lift. The ring is an outline, not a
 * transform, so it is unaffected.
 */
@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link {
		transition:
			background-color 0.15s ease,
			color 0.15s ease,
			box-shadow 0.15s ease;
	}

	.wp-block-button__link:hover,
	.wp-block-button__link:active {
		transform: none;
	}
}