/* Wellfit Living — WordPress layer: drawer states, reveals, a11y, misc. */

/* ---- safety: no horizontal overflow at any viewport ---- */
html,
body {
	overflow-x: clip;
}

/* ---- focus visibility ---- */
:focus-visible {
	outline: 2px solid #c6f000;
	outline-offset: 2px;
}

/* ---- missing utility classes used by templates ---- */

/* Sale badge on single-product.php (absolute-positioned; no other
 * transform on this element, so a plain rotate is safe). */
.-rotate-4 {
	transform: rotate(-4deg);
}

/* Arbitrary-value easing used inline by drawers / buy bar. */
.ease-\[cubic-bezier\(0\.22\,1\,0\.36\,1\)\] {
	transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.pt-2 {
	padding-top: 0.5rem;
}

/* ---- drawer base transforms + motion timing (JS toggles .wl-open) ---- */
[data-wl-menu],
[data-wl-cart] {
	transform: translateX(100%);
	transition-duration: 0.4s;
	transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
[data-wl-cart] {
	transition-duration: 0.35s;
}
[data-wl-buybar] {
	transform: translateY(100%);
}

/* Review breakdown bars */
.wl-bar {
	transition: width 0.7s ease-out;
}

/* Native select restyle (contact form) */
.wl-select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.5rem;
}

/* Form error alert */
.wl-alert-error {
	background: rgba(255, 90, 31, 0.1);
	border: 1px solid rgba(255, 90, 31, 0.6);
}

/* Delivery option price glow on card hover */
.wl-price-glow {
	transition: filter 0.2s;
}
.group:hover .wl-price-glow {
	filter: drop-shadow(0 0 16px rgba(198, 240, 0, 0.45));
}

/* Logo bolt glow on hover */
.group:hover .wl-logo-glow {
	filter: drop-shadow(0 0 12px rgba(198, 240, 0, 0.6));
}

/* Generic page content typography */
.wl-page-content a {
	color: #c6f000;
}
.wl-page-content h2,
.wl-page-content h3 {
	font-family: Anton, Impact, sans-serif;
	text-transform: uppercase;
}
.wl-page-content h2 {
	color: #fff;
}
.wl-page-content h3 {
	color: #c6f000;
}
.wl-page-content p {
	line-height: 1.7;
}

/* ==========================================================================
 * Drawer / overlay open states (toggled by theme.js via .wl-open)
 * ======================================================================== */

[data-wl-menu].wl-open {
	transform: translateX(0);
}

[data-wl-menu-backdrop].wl-open,
[data-wl-cart-backdrop].wl-open {
	opacity: 1;
}

[data-wl-cart].wl-open {
	transform: translateX(0);
}

[data-wl-search].wl-open {
	opacity: 1;
}

/* Hamburger → X */
[data-wl-menu-toggle].wl-open [data-wl-bar]:first-child {
	transform: translateY(0) rotate(45deg);
	background-color: #c6f000;
}
[data-wl-menu-toggle].wl-open [data-wl-bar]:last-child {
	transform: translateY(0) rotate(-45deg);
	background-color: #c6f000;
}

/* Mobile menu staggered items */
.wl-js [data-wl-menu-item] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-wl-menu].wl-open [data-wl-menu-item] {
	opacity: 1;
	transform: translateY(0);
}

/* Mobile buy bar */
[data-wl-buybar].wl-open {
	display: flex;
	transform: translateY(0);
}
@media (min-width: 768px) {
	[data-wl-buybar].wl-open {
		display: none;
	}
}

/* ==========================================================================
 * Reveal-on-scroll + mask-line animations
 * ======================================================================== */

.wl-js .wl-reveal {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--wl-delay, 0s);
}
.wl-reveal.wl-in {
	opacity: 1;
	transform: translateY(0);
}

/* Clip parents of mask lines so the pre-animation offset is hidden */
span:has(> .wl-mask),
span:has(> .wl-line) {
	overflow: hidden;
}
.wl-js .wl-mask,
.wl-js .wl-line {
	display: inline-block;
	transform: translateY(110%);
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--wl-delay, 0s);
}
.wl-mask.wl-in,
.wl-line.wl-in {
	transform: translateY(0);
}

/* ==========================================================================
 * Contact form: invalid shake + orange field borders
 * ======================================================================== */

@keyframes wl-shake {
	0%,
	100% {
		transform: translateX(0);
	}
	20% {
		transform: translateX(-6px);
	}
	40% {
		transform: translateX(6px);
	}
	60% {
		transform: translateX(-6px);
	}
	80% {
		transform: translateX(6px);
	}
}
.wl-shake {
	animation: wl-shake 0.3s ease;
}
.wl-field-error {
	border-color: #ff5a1f !important;
}

/* ==========================================================================
 * Contact map pin pulse
 * ======================================================================== */

@keyframes wl-pin-pulse {
	0% {
		transform: scale(1);
		opacity: 0.7;
	}
	100% {
		transform: scale(1.3);
		opacity: 0;
	}
}
.wl-pin-ring {
	animation: wl-pin-pulse 2s ease-out infinite;
}

/* ==========================================================================
 * Shop filter-bar edge fade (matches .wl-fade-mask hook in archive)
 * ======================================================================== */

.wl-fade-mask {
	mask-image: linear-gradient(to right, #000 92%, transparent);
	-webkit-mask-image: linear-gradient(to right, #000 92%, transparent);
}

/* ==========================================================================
 * WordPress niceties
 * ======================================================================== */

/* Nav link active state */
.nav-link.active,
.current-menu-item > a,
.current_page_item > a {
	color: #c6f000;
}

/* Screen-reader text (WP core class) */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Pagination */
.pagination .nav-links {
	display: flex;
	gap: 1rem;
	align-items: center;
}
.pagination .page-numbers {
	padding: 0.5rem 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: #a3a3a3;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 12px;
	transition: color 0.2s, border-color 0.2s;
}
.pagination .page-numbers.current {
	color: #0d0d0b;
	background: #c6f000;
	border-color: #c6f000;
}
.pagination .page-numbers:hover:not(.current) {
	color: #c6f000;
	border-color: rgba(198, 240, 0, 0.4);
}

/* ==========================================================================
 * Reduced motion
 * ======================================================================== */

@media (prefers-reduced-motion: reduce) {
	.wl-reveal,
	.wl-mask,
	.wl-line {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.animate-marquee,
	.animate-marquee-fast,
	.animate-spin-slow,
	.animate-glow-pulse,
	.animate-bolt-pulse,
	.animate-shine,
	.wl-pin-ring {
		animation: none !important;
	}
	* {
		scroll-behavior: auto !important;
	}
}