/**
 * Site Core View Switcher — frontend styles.
 *
 * Layout/behavior only lives here (hiding/showing views, button
 * chrome). Whatever gets dragged INSIDE each view (product grids,
 * category cards, etc.) brings its own styles from its own widget —
 * this file has zero knowledge of what a view actually contains.
 */

.svs-view-switcher {
	position: relative;
}

.svs-header {
	display: flex;
	align-items: baseline;
	justify-content: flex-start;
	gap: 40px;

	width: 73%;
	max-width: 73%;
	margin: 20px auto 16px;
}

.svs-title {
	margin: 0;
	font-size: 2.2rem;
}

/* .screen-reader-text itself is NOT redefined here on purpose —
   Astra already ships that class globally (it's a standard
   WordPress theme convention). Site Core is already coupled to
   Astra by design, so redefining it here would just be duplicated
   CSS with a chance of drifting out of sync with the theme's own
   version. */

.svs-views {
	position: relative;
}

.svs-view--active {
	display: block;
	animation: svs-fade-up 0.45s ease forwards;
}

@keyframes svs-fade-up {
	from {
		opacity: 0;
		transform: translateY(24px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Users who've asked the OS/browser to reduce motion still get the
   view swap, just as an instant cut instead of a fade+slide — so the
   feature never depends on the animation to be usable. */
@media (prefers-reduced-motion: reduce) {
	.svs-view--active {
		animation: none;
	}
}

.svs-view--hidden {
	display: none;
}

.svs-switch-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	flex-shrink: 0;
	white-space: nowrap;

	font-size: 1.6rem;
	color: #007bff;
	border: 2px solid #007bff;
	border-radius: 20px;
	background: transparent;
	text-decoration: none;
	padding: 8px 32px;
	cursor: pointer;

	/* The blue flash on tap (distinct from :hover/:focus/:active) is
	   WebKit/Chrome's native tap-highlight overlay, not something CSS
	   states control — same fix already used on .product-grid-tab. */
	-webkit-tap-highlight-color: transparent;

	transition: background-color 0.3s ease, color 0.3s ease;
}

/* (hover: hover) scopes this to devices with a real pointer that can
   actually hover (mouse/trackpad) — without it, touch devices "stick"
   in this state after a tap, since there's no mouse-out event to
   ever clear a touchscreen's simulated :hover. That stuck blue fill
   after tapping on mobile is the same symptom as the focus issue
   below, just a different cause. */
@media (hover: hover) {
	.svs-switch-btn:hover {
		transform: scale(1.05);
		transition: transform 0.3s ease;
		background-color: #007bff;
		color: #fff;
	}
}

/* Astra's theme CSS puts a blue outline/box-shadow AND a blue
   background-color on every button's :focus state. !important is
   needed here because that Astra rule targets `button:focus`
   globally with its own !important, which normal specificity can't
   out-rank. background-color/color are reset back to this button's
   own normal (non-hover) look explicitly — just killing outline/
   box-shadow wasn't enough, Astra's blue fill was still winning on
   the background.

   Note for later: this removes the focus ring for keyboard users too,
   not just mouse/touch clicks (there used to be a :focus-visible rule
   here that put a custom ring back for keyboard navigation only —
   removed on request). Worth revisiting if this widget is ever
   audited for accessibility. */
.svs-switch-btn:focus {
	outline: none !important;
	box-shadow: none !important;
	background-color: transparent !important;
	color: #007bff !important;
}

/* Mobile: stack the button below the title instead of side by side,
   and center title, button, and whatever content is dragged into the
   views — mirrors the same 768px breakpoint and shrink pattern the
   site already uses for .header-with-link. */
@media (max-width: 768px) {

	.svs-header {
		width: 92%;
		max-width: 92%;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 14px;
		margin: 20px auto 16px;
		text-align: center;
	}

	.svs-title {
		font-size: 2rem;
		line-height: 1.2;
	}

	.svs-switch-btn {
		font-size: 22px;
		padding: 10px 28px;
		border-radius: 20px;
	}

	.svs-views {
		text-align: center;
	}
}