/**
 * PrEPLocator Custom CSS
 *
 * CSS Ownership Model:
 * - Design tokens and colors: theme.json (authoritative)
 * - Component structure and layout: Kadence block settings
 * - Visual effects ONLY go here: animations, transitions, box-shadows,
 *   gradient overlays, hover states, and effects that cannot be expressed
 *   through theme.json or Kadence block settings.
 *
 * DO NOT add structural layout, font sizes, or colors here.
 * Those belong in theme.json and will be overwritten when Figma designs arrive.
 *
 * @package PrEPLocator
 */

/* =========================================================
   VISUAL EFFECTS (safe to add here)
   ========================================================= */

/* Example: Button hover transition — add effects below */

/* =========================================================
   ACCESSIBILITY: Skip to Content Link
   Visually hidden until keyboard focus — slides into view on :focus.
   Target: href="#main-content" (matches Kadence main content wrapper).
   WCAG 2.1 Success Criterion 2.4.1 (Bypass Blocks).
   ========================================================= */

.skip-to-content {
	position: absolute;
	top: -100%;
	left: 0;
	z-index: 9999;
	padding: 0.75rem 1.5rem;
	background: var(--wp--preset--color--primary, #0066cc);
	color: #fff;
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	transition: top 0.2s ease;
	border-radius: 0 0 4px 0;
}

.skip-to-content:focus {
	top: 0;
	outline: 3px solid #fff;
	outline-offset: 2px;
}

/* =========================================================
   FOCUS STYLES: Ensure visible focus ring on all interactive elements.
   Supplemental to browser defaults — adds a consistent branded outline.
   ========================================================= */

:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #0066cc);
	outline-offset: 2px;
}