/**
 * Accessibility fixes — WCAG 2.1 AA
 *
 * Additive only. Loaded after the child stylesheet so it can override
 * the parent theme and vendor libraries without editing them.
 *
 * RTL note: this site runs dir="rtl". Every horizontal offset here uses
 * logical properties (inset-inline-*, margin-inline-*, padding-inline-*)
 * so it mirrors correctly and stays correct if an LTR page is ever added.
 *
 * @package whole-child
 */


/* ==========================================================================
   1. Visible keyboard focus
   ========================================================================== */

/**
 * WCAG 2.4.7 Focus Visible.
 *
 * :focus-visible only paints for keyboard/AT users, so mouse users keep the
 * existing look. The colour is a dark ring plus a light outer shadow so the
 * indicator survives on both the white product grid and the dark header.
 */

:root {
	--pb-a11y-focus-color: #1a1a1a;
	--pb-a11y-focus-halo: #ffffff;
	--pb-a11y-focus-width: 2px;
	--pb-a11y-focus-offset: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
details:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[role="checkbox"]:focus-visible,
[role="radio"]:focus-visible,
[contenteditable="true"]:focus-visible {
	outline: var(--pb-a11y-focus-width) solid var(--pb-a11y-focus-color);
	outline-offset: var(--pb-a11y-focus-offset);
	box-shadow: 0 0 0 4px var(--pb-a11y-focus-halo);
	border-radius: 2px;
}

/**
 * Fallback for browsers without :focus-visible support.
 * :focus paints the ring; the @supports block below strips it back off
 * anywhere :focus-visible is understood, so modern browsers never double up.
 */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:not([tabindex="-1"]):focus {
	outline: var(--pb-a11y-focus-width) solid var(--pb-a11y-focus-color);
	outline-offset: var(--pb-a11y-focus-offset);
}

@supports selector(:focus-visible) {
	a:focus:not(:focus-visible),
	button:focus:not(:focus-visible),
	input:focus:not(:focus-visible),
	select:focus:not(:focus-visible),
	textarea:focus:not(:focus-visible),
	[tabindex]:not([tabindex="-1"]):focus:not(:focus-visible) {
		outline: none;
		box-shadow: none;
	}
}

/* Focus inside the dark header needs the inverse ring to stay visible. */
#cshero-header-inner a:focus-visible,
#cshero-header-inner button:focus-visible,
#cshero-header-inner [tabindex]:not([tabindex="-1"]):focus-visible,
#cshero-menu-mobile a:focus-visible,
#cshero-menu-mobile [tabindex]:not([tabindex="-1"]):focus-visible {
	outline-color: #ffffff;
	box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.85);
}


/* ==========================================================================
   2. Overrides for existing outline:none / outline:0
   ========================================================================== */

/**
 * Every rule below reverses an outline suppression that already ships in the
 * parent theme or a bundled vendor library. Nothing is edited in place —
 * these simply win on cascade order and specificity.
 *
 * Sources found in the codebase:
 *   whole/assets/css/slick.css:35,81,147,156,268,274
 *   whole/assets/css/magnific-popup.css:2,20        (uses !important)
 *   whole/assets/css/bootstrap.min.css:1,2
 *   whole/assets/css/static.css:188,212
 *   whole/inc/demo-data/whole/static.css:3624,6311
 *   whole-child/assets/css/slim.min.css:5
 */

/* -- slick carousel -- */
.slick-slider:focus-visible,
.slick-list:focus-visible,
.slick-track:focus-visible,
.slick-slide:focus-visible,
.slick-slide a:focus-visible,
.slick-arrow:focus-visible,
.slick-prev:focus-visible,
.slick-next:focus-visible,
.slick-dots li button:focus-visible {
	outline: var(--pb-a11y-focus-width) solid var(--pb-a11y-focus-color);
	outline-offset: var(--pb-a11y-focus-offset);
}

/* -- magnific popup (declared with !important upstream, so we match it) -- */
.mfp-wrap a:focus-visible,
.mfp-wrap button:focus-visible,
.mfp-wrap [tabindex]:not([tabindex="-1"]):focus-visible,
button.mfp-close:focus-visible,
button.mfp-arrow:focus-visible {
	outline: var(--pb-a11y-focus-width) solid #ffffff !important;
	outline-offset: var(--pb-a11y-focus-offset) !important;
	box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.85) !important;
}

/* -- bootstrap -- */
a:focus-visible,
a:active:focus-visible,
a:hover:focus-visible,
.btn:focus-visible,
.btn:active:focus-visible,
.btn.active:focus-visible,
.form-control:focus-visible,
.dropdown-menu > li > a:focus-visible {
	outline: var(--pb-a11y-focus-width) solid var(--pb-a11y-focus-color);
	outline-offset: var(--pb-a11y-focus-offset);
}

/* -- Slim image cropper (child) -- */
.slim:focus-visible,
.slim input:focus-visible,
.slim button:focus-visible,
.slim-btn:focus-visible,
.slim-btn-upload:focus-visible,
.slim .slim-btn-group button:focus-visible {
	outline: var(--pb-a11y-focus-width) solid var(--pb-a11y-focus-color) !important;
	outline-offset: var(--pb-a11y-focus-offset) !important;
}

/* -- theme static.css / demo-data -- */
#cms-theme a:focus-visible,
#cms-theme button:focus-visible,
#cms-theme input:focus-visible,
#cms-theme select:focus-visible,
#cms-theme textarea:focus-visible {
	outline: var(--pb-a11y-focus-width) solid var(--pb-a11y-focus-color);
	outline-offset: var(--pb-a11y-focus-offset);
}


/* ==========================================================================
   3. Skip to content link
   ========================================================================== */

/**
 * WCAG 2.4.1 Bypass Blocks.
 * Injected by pb_a11y_render_skip_link(). Target is #cms-content
 * (whole/header.php:32).
 *
 * Off-screen via translate rather than a directional offset, so RTL and LTR
 * behave identically.
 */

.skip-link {
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	z-index: 100000;
	display: block;
	padding: 14px 24px;
	min-height: 44px;
	background: #ffffff;
	color: #1a1a1a;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: underline;
	border: 2px solid #1a1a1a;
	border-radius: 0 0 4px 4px;
	transform: translateY(-200%);
}

.skip-link:focus,
.skip-link:focus-visible {
	transform: translateY(0);
	outline: var(--pb-a11y-focus-width) solid var(--pb-a11y-focus-color);
	outline-offset: var(--pb-a11y-focus-offset);
	color: #1a1a1a;
	text-decoration: underline;
}

@media (prefers-reduced-motion: no-preference) {
	.skip-link {
		transition: transform 0.15s ease-out;
	}
}

/**
 * The skip target is a plain <div> with no tabindex, so give it a focus ring
 * when it receives programmatic focus — confirms to the user the jump landed.
 */
#cms-content:focus {
	outline: none;
}

#cms-content:focus-visible {
	outline: var(--pb-a11y-focus-width) dashed var(--pb-a11y-focus-color);
	outline-offset: 4px;
}


/* ==========================================================================
   4. Screen-reader-only utility
   ========================================================================== */

/**
 * Visually hidden but exposed to assistive tech. Matches the WordPress core
 * .screen-reader-text implementation so the two can be used interchangeably.
 */

.sr-only,
.pb-a11y-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Becomes visible when focused — for skip links and in-page shortcuts. */
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
	position: static !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	overflow: visible !important;
	clip: auto !important;
	clip-path: none !important;
	white-space: normal !important;
}


/* ==========================================================================
   5. Minimum touch target — 44x44px
   ========================================================================== */

/**
 * WCAG 2.5.5 Target Size (AAA) / 2.5.8 (AA, 24px minimum in WCAG 2.2).
 * Targeting 44x44 as requested.
 *
 * inline-flex + centring keeps the existing visual size of icons while
 * enlarging the hit area around them. Uses margin-inline so RTL mirrors.
 */

/* -- primary navigation -- */
#site-navigation a,
#site-navigation .menu-item > a,
.main-navigation a,
.cshero-header-navigation a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* -- header icon controls (search / cart / hidden sidebar / mobile menu) -- */
.h-icon,
.h-search-wrapper .open-search,
.h-cart-wrapper .icon-cart,
.h-hidden-sidebar .h-button-hide,
#cshero-menu-mobile .open-menu,
#cshero-menu-mobile .open-search,
#cshero-menu-mobile .open-cart,
#cshero-menu-mobile a {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* -- buttons and CTAs -- */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.button,
.btn,
[role="button"],
.customaddtocart a,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	min-height: 44px;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.button,
.btn,
[role="button"] {
	min-width: 44px;
}

/* -- WooCommerce quantity stepper: the +/- spans are the smallest targets -- */
.quantity .minus,
.quantity .plus {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.quantity input.qty {
	min-height: 44px;
}

/* -- category jump links in the product grid shortcode -- */
.links_wrapper > a,
.category_slide {
	min-height: 44px;
}

/* -- cart / checkout controls -- */
.woocommerce a.remove,
.woocommerce .product-remove a {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/**
 * Spacing exemption: where targets sit in a tight row, ensure they do not
 * overlap once enlarged. margin-inline is direction-agnostic.
 */
.links_wrapper > a + a,
#cshero-menu-mobile > * + * {
	margin-inline-start: 4px;
}


/* ==========================================================================
   6. Supporting fixes
   ========================================================================== */

/* Never hide focus behind the sticky header. */
:target,
#cms-content {
	scroll-margin-top: 120px;
}

/* Honour reduced-motion for the theme's scripted scrolling and loaders. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Forced-colours (Windows high contrast) — keep the ring painted. */
@media (forced-colors: active) {
	a:focus-visible,
	button:focus-visible,
	input:focus-visible,
	select:focus-visible,
	textarea:focus-visible,
	[tabindex]:not([tabindex="-1"]):focus-visible,
	.skip-link:focus {
		outline: 3px solid Highlight;
		outline-offset: 2px;
	}
}