/**
 * Pet City accessibility layer — WCAG 2.2 A/AA.
 * Scoped color/focus/skip/motion only. Does not change Elementor layout.
 */

:root {
	--pc-ink: #180a32;
	--pc-gold: #fbab2a;
	--pc-muted: #534e5c;
	--pc-muted-on-tint: #3f3a48;
	--pc-on-footer: #d8d3e6;
	--pc-focus: #180a32;
	--pc-focus-on-dark: #fbab2a;
	--pc-badge: #9f1b16;
}

/* -------------------------------------------------------------------------- */
/* Skip link — Astra keeps it clipped even when focused (measured 1×1px).     */
/* -------------------------------------------------------------------------- */
html body a.skip-link.screen-reader-text:focus,
html body a.skip-link.screen-reader-text:focus-visible,
html body a.skip-link.petcity-a11y-skip-on {
	clip: auto !important;
	clip-path: none !important;
	width: auto !important;
	height: auto !important;
	min-width: 44px;
	min-height: 44px;
	position: fixed !important;
	top: 12px !important;
	left: 12px !important;
	z-index: 100000 !important;
	padding: 12px 16px !important;
	overflow: visible !important;
	background: var(--pc-ink) !important;
	background-color: var(--pc-ink) !important;
	background-image: none !important;
	color: #ffffff !important;
	text-decoration: none !important;
	border-radius: 4px !important;
	outline: 3px solid var(--pc-gold) !important;
	outline-offset: 2px !important;
	box-shadow: 0 4px 16px rgba(24, 10, 50, 0.35);
}

/* -------------------------------------------------------------------------- */
/* Focus — Elementor/Astra set outline: none on interactive controls.         */
/* -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.elementor-button:focus-visible,
.elementor-item:focus-visible,
.e-n-tab-title:focus-visible,
.add_to_cart_button:focus-visible,
.single_add_to_cart_button:focus-visible,
#elementor-menu-cart__toggle_button:focus-visible,
.e-search-submit:focus-visible {
	outline: 3px solid var(--pc-focus) !important;
	outline-offset: 3px !important;
}

.elementor-location-footer a:focus-visible,
.elementor-location-footer button:focus-visible,
#elementor-menu-cart__toggle_button:focus-visible,
.joinchat:focus-visible,
.joinchat a:focus-visible {
	outline-color: var(--pc-focus-on-dark) !important;
}

/* -------------------------------------------------------------------------- */
/* Contrast — measured failures. Keep brand gold/ink; darken or invert text.  */
/* -------------------------------------------------------------------------- */

/* Nav + body muted gray #7e7986 on white = 4.23:1 (needs 4.5). */
.elementor-nav-menu a.menu-link:not(.elementor-item-active),
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.ast-woo-product-category,
.elementor-accordion-title,
.elementor-tab-title,
.elementor-accordion-item .elementor-tab-title a {
	color: var(--pc-muted);
}

/* Product cards sit on #f7ebed — muted gray there is 3.64:1. */
.ast-article-single .ast-woo-product-category,
li.product .ast-woo-product-category {
	color: var(--pc-muted-on-tint);
}

/* Active gold nav on white = 1.92:1. Keep gold as underline, ink as text. */
a.elementor-item.elementor-item-active,
.elementor-nav-menu .elementor-item.elementor-item-active {
	color: var(--pc-ink) !important;
	box-shadow: inset 0 -3px 0 var(--pc-gold);
}

/* Product titles gold on pink card = 1.65:1. */
h2.woocommerce-loop-product__title,
h3.woocommerce-loop-product__title,
a.ast-loop-product__link,
a.ast-loop-product__link .woocommerce-loop-product__title {
	color: var(--pc-ink) !important;
}

/* Gold-filled Elementor buttons: cream #f7ebed on #fbab2a = 1.65:1. */
a.elementor-button.elementor-button-link,
.elementor-button.elementor-button-link .elementor-button-text,
.elementor-button.elementor-button-link .elementor-button-content-wrapper {
	color: var(--pc-ink) !important;
}

/* Selected nested tabs: white on gold = 1.92:1. */
.e-n-tabs .e-n-tab-title[aria-selected="true"],
.e-n-tabs .e-n-tab-title[aria-selected="true"] .e-n-tab-title-text,
button.e-n-tab-title[aria-selected="true"] {
	color: var(--pc-ink) !important;
}

/* Footer gray on #180a32 = 4.4:1. */
.elementor-location-footer,
.elementor-location-footer a,
.elementor-location-footer .elementor-heading-title,
.elementor-location-footer .elementor-icon-list-text,
.elementor-location-footer .elementor-nav-menu a,
.elementor-location-footer .menu-link {
	color: var(--pc-on-footer);
}

.elementor-location-footer a:hover,
.elementor-location-footer a:focus {
	color: #fff;
}

/* Social icons inherit muted gray; lift for 3:1 non-text on dark. */
.elementor-location-footer .elementor-social-icon {
	color: var(--pc-on-footer) !important;
	fill: var(--pc-on-footer);
}

/* Cart count badge: white on #d9534f at 10px = 3.96:1. */
.elementor-button-icon-qty,
#elementor-menu-cart__toggle_button .elementor-button-icon-qty {
	background-color: var(--pc-badge) !important;
	color: #fff !important;
	font-size: 12px !important;
	min-width: 18px;
	min-height: 18px;
	line-height: 18px;
}

/* Overlay ATC only — visible card/single CTAs are teal + white (shop-ux / reconcile). */
a.ast-on-card-button.add_to_cart_button {
	color: var(--pc-ink);
}

/* -------------------------------------------------------------------------- */
/* Target size — WCAG 2.2 2.5.8 (24px CSS).                                   */
/* -------------------------------------------------------------------------- */
.e-search-submit,
#elementor-menu-cart__toggle_button,
.joinchat__button {
	min-width: 44px;
	min-height: 44px;
}

/* -------------------------------------------------------------------------- */
/* Reduced motion — Elementor jello / fadeInUp measured on homepage.          */
/* -------------------------------------------------------------------------- */
@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;
	}
}

/* Cart / checkout — focus + 44px targets only. Do not restyle layout. */
.woocommerce-cart .quantity .qty:focus-visible,
.woocommerce-cart #coupon_code:focus-visible,
.woocommerce-checkout .input-text:focus-visible,
.woocommerce-checkout select:focus-visible,
.woocommerce-checkout textarea:focus-visible {
	outline: 3px solid var(--pc-focus) !important;
	outline-offset: 2px !important;
}

.woocommerce-cart .button,
.woocommerce-cart .checkout-button,
.woocommerce-checkout #place_order,
.woocommerce-checkout .button {
	min-height: 44px;
}

/* Visually hidden labels injected for newsletter / search. */
.petcity-a11y-vh {
	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;
}