/**
 * Flex Calculator Page Styles
 *
 * Minimal custom CSS — most styling uses Tailwind utility classes.
 * This file handles animations, interactive states, and components
 * that are easier to express in CSS than utility classes.
 *
 * @package WP_Wayfinder
 */

/* =========================================================================
   Hero Gradient
   ========================================================================= */

.hero-gradient-bg {
	background: linear-gradient(
		135deg,
		rgba(245, 189, 30, 0.08),
		rgba(255, 101, 1, 0.06),
		rgba(237, 28, 36, 0.04),
		rgba(255, 255, 255, 1)
	);
}

/* =========================================================================
   Result Animation
   ========================================================================= */

.calc-result-enter {
	animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* =========================================================================
   Range Button States
   ========================================================================= */

.range-btn {
	transition: all 0.15s ease;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}

.range-btn:hover {
	border-color: #f5bd1e;
	background-color: rgba(245, 189, 30, 0.04);
}

.range-btn.selected {
	border-color: #f5bd1e;
	background-color: rgba(245, 189, 30, 0.08);
	font-weight: 600;
}

.range-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 101, 1, 0.4);
}

/* =========================================================================
   Unit Toggle Pill
   ========================================================================= */

.unit-toggle {
	position: relative;
	display: inline-flex;
	border-radius: 9999px;
	background: #f3f4f6;
	padding: 3px;
}

.unit-toggle button {
	padding: 6px 16px;
	border-radius: 9999px;
	font-size: 14px;
	font-weight: 500;
	transition: all 0.2s ease;
	border: none;
	background: transparent;
	cursor: pointer;
	color: #6b7280;
}

.unit-toggle button:hover {
	color: #374151;
}

.unit-toggle button.active {
	background: white;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	font-weight: 600;
	color: #111827;
}

/* =========================================================================
   Range Sliders
   ========================================================================= */

.calc-slider {
	-webkit-appearance: none;
	appearance: none;
	height: 8px;
	border-radius: 9999px;
	background: linear-gradient(to right,
		#ff6501 0%,
		#ff6501 var(--slider-pct, 50%),
		#e5e7eb var(--slider-pct, 50%),
		#e5e7eb 100%
	);
	outline: none;
	cursor: pointer;
}

.calc-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: white;
	border: 3px solid #ff6501;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	cursor: pointer;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.calc-slider::-webkit-slider-thumb:hover {
	box-shadow: 0 0 0 6px rgba(255, 101, 1, 0.15), 0 1px 4px rgba(0, 0, 0, 0.15);
	transform: scale(1.1);
}

.calc-slider::-webkit-slider-thumb:active {
	transform: scale(1.15);
	box-shadow: 0 0 0 8px rgba(255, 101, 1, 0.2), 0 1px 4px rgba(0, 0, 0, 0.15);
}

.calc-slider::-moz-range-thumb {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: white;
	border: 3px solid #ff6501;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	cursor: pointer;
}

.calc-slider::-moz-range-track {
	height: 8px;
	border-radius: 9999px;
	background: #e5e7eb;
}

.calc-slider::-moz-range-progress {
	height: 8px;
	border-radius: 9999px;
	background: #ff6501;
}

.calc-slider:focus-visible {
	outline: none;
}

.calc-slider:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 3px rgba(255, 101, 1, 0.4), 0 1px 4px rgba(0, 0, 0, 0.15);
}

.slider-container {
	padding: 4px 0;
}

/* =========================================================================
   Result Card
   ========================================================================= */

.flex-result-card {
	border-left-width: 4px;
	border-left-style: solid;
	transition: all 0.3s ease;
}

/* =========================================================================
   FAQ Accordion
   ========================================================================= */

.faq-item details > summary {
	cursor: pointer;
	list-style: none;
}

.faq-item details > summary::-webkit-details-marker {
	display: none;
}

.faq-item details[open] .faq-chevron {
	transform: rotate(180deg);
}

.faq-chevron {
	transition: transform 0.2s ease;
}

.faq-item details > summary:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 101, 1, 0.4);
	border-radius: 12px;
}

/* =========================================================================
   Flex Reference Chart
   ========================================================================= */

.flex-chart-row {
	transition: background-color 0.15s ease;
}

.flex-chart-row:hover {
	background-color: rgba(245, 189, 30, 0.05);
}


/* =========================================================================
   Validation Error
   ========================================================================= */

.calc-error {
	animation: shakeX 0.4s ease;
}

@keyframes shakeX {
	0%, 100% { transform: translateX(0); }
	20%, 60% { transform: translateX(-6px); }
	40%, 80% { transform: translateX(6px); }
}