/**
 * Booknetic for Theme V4 — Accessibility enhancements.
 *
 * Single source of truth for focus styles, skip-link visibility,
 * reduced-motion fallbacks and screen-reader-only utilities across the
 * V4 surface area. Loaded globally by inc/enqueue.php.
 *
 * Uses `:focus-visible` so mouse users don't see outlines on click;
 * keyboard users always do.
 *
 * Tokens (with sensible fallbacks for when V4 token files aren't loaded):
 *   --a11y-ring         outline color
 *   --a11y-ring-offset  offset color (matches surrounding background)
 *   --a11y-ring-width
 */

:root {
	--a11y-ring:         var(--bft-color-primary, #8b5cf6);
	--a11y-ring-offset:  #0b0a0f;
	--a11y-ring-width:   2px;
}

/* ─── Skip link ───────────────────────────────────────────────────── */
/* Visible only when focused via keyboard. Slides down from the top. */
.skip-link {
	position: absolute;
	top: -100px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100000;
	padding: 10px 18px;
	background: var(--a11y-ring);
	color: #fff;
	font-weight: 600;
	border-radius: 0 0 8px 8px;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.30);
	transition: top 180ms ease;
}
.skip-link:focus,
.skip-link:focus-visible {
	top: 0;
	outline: none;
}

/* ─── Global :focus-visible ring ──────────────────────────────────── */
/* Applies to anything focusable that doesn't have a custom style.    */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible {
	outline: var(--a11y-ring-width) solid var(--a11y-ring);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Remove the default browser ring when our :focus-visible kicks in. */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
summary:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) {
	outline: none;
}

/* ─── V4 component-specific focus styles ─────────────────────────── */
/* Pricing page buttons + CTAs + toggles                              */
.bft-pricing-v4 button:focus-visible,
.bft-pricing-v4 a:focus-visible,
.bft-pricing-v4 [data-bft-cycle]:focus-visible {
	outline: 2px solid var(--a11y-ring);
	outline-offset: 3px;
	border-radius: 8px;
}
.bft-pricing-v4__card:focus-within {
	outline: 1px solid rgba(139, 92, 246, 0.30);
	outline-offset: 4px;
}
.bft-pricing-v4__faq-item > summary:focus-visible {
	outline: 2px solid var(--a11y-ring);
	outline-offset: -2px;
	border-radius: 10px;
}

/* Trial banner + checklist                                            */
.bft-trial-banner button:focus-visible,
.bft-trial-banner a:focus-visible,
.bft-trial-banner__step-cta:focus-visible {
	outline: 2px solid var(--a11y-ring);
	outline-offset: 2px;
	border-radius: 7px;
}

/* Billing dashboard                                                   */
.bft-billing-dash button:focus-visible,
.bft-billing-dash a:focus-visible {
	outline: 2px solid var(--a11y-ring);
	outline-offset: 2px;
	border-radius: 8px;
}
.bft-billing-dash__link:focus-visible {
	outline-offset: 3px;
}

/* Modals                                                              */
.bft-modal__close:focus-visible,
.bft-modal__btn:focus-visible,
.bft-modal__reason:focus-within,
.bft-modal__offer:focus-within {
	outline: 2px solid var(--a11y-ring);
	outline-offset: 2px;
	border-radius: 8px;
}
.bft-modal__textarea:focus,
.bft-modal__textarea:focus-visible {
	outline: 2px solid var(--a11y-ring);
	outline-offset: 0;
	border-color: var(--a11y-ring);
}

/* Language switcher                                                   */
.bft-language-switcher summary:focus-visible,
.bft-lang-option:focus-visible {
	outline: 2px solid var(--a11y-ring);
	outline-offset: 2px;
	border-radius: 6px;
}

/* Builder admin                                                       */
.bft-builder button:focus-visible,
.bft-builder a:focus-visible,
.bft-builder [data-bft-builder-tree] li:focus-within {
	outline: 2px solid var(--a11y-ring);
	outline-offset: 2px;
}

/* Cards + interactive shortcodes                                      */
.bft-card:focus-within {
	outline: 1px solid rgba(139, 92, 246, 0.30);
	outline-offset: 3px;
}
.bft-card a:focus-visible,
.bft-card button:focus-visible {
	outline: 2px solid var(--a11y-ring);
	outline-offset: 2px;
	border-radius: 6px;
}

/* Plan-finder quiz                                                    */
.bft-pfq button:focus-visible,
.bft-pfq a:focus-visible {
	outline: 2px solid var(--a11y-ring);
	outline-offset: 3px;
	border-radius: 8px;
}

/* ─── Screen reader only utility (fallback, in case theme CSS misses it) */
.screen-reader-text,
.visually-hidden {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	word-wrap: normal;
}
.screen-reader-text:focus,
.visually-hidden:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	overflow: visible;
	padding: 8px 16px;
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 100000;
	background: var(--a11y-ring);
	color: #fff;
	border-radius: 8px;
}

/* ─── Reduced motion ──────────────────────────────────────────────── */
/* Each component CSS file already respects prefers-reduced-motion, but */
/* this is a global belt-and-suspenders for any element we missed.     */
@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;
	}
}

/* ─── Forced colors mode (Windows High Contrast) ─────────────────── */
@media (forced-colors: active) {
	.bft-pricing-v4__card,
	.bft-billing-dash__card,
	.bft-modal__panel,
	.bft-card {
		border: 1px solid CanvasText;
	}
	button:focus-visible,
	a:focus-visible {
		outline: 2px solid Highlight;
	}
}

/* ─── Mobile: prevent horizontal overflow ────────────────────────── */
/* Belt-and-suspenders rule — combined with each component's own
   mobile breakpoints. Catches edge-case overflows from very wide
   tables / images / preformatted blocks. */
@media (max-width: 480px) {
	html, body {
		overflow-x: hidden;
		max-width: 100vw;
	}
	.bft-pricing-v4__compare-table,
	.bft-billing-dash__invoices {
		/* Allow these specific containers to scroll horizontally
		   instead of clipping their content. */
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}