/**
 * Developer Flavor — Theme Styles
 *
 * Custom CSS for the Developer Flavor theme including
 * hero slider, animations, and plugin shortcode overrides.
 *
 * @package Developer_Flavor
 */

/* ============================================
   1. Global Enhancements
   ============================================ */

html {
	scroll-behavior: smooth;
}

/* Subtle fade-in for page content */
.wp-site-blocks > * {
	animation: dfFadeInUp 0.5s ease-out both;
}

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

/* ============================================
   2. Header Enhancements
   ============================================ */

/* Sticky header backdrop blur */
.wp-block-group[style*="position:sticky"] {
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	background-color: rgba(255, 255, 255, 0.92) !important;
	z-index: 100;
	transition: box-shadow 0.3s ease;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* ============================================
   3. Hero Slider
   ============================================ */

.developer-flavor-hero-slider {
	position: relative;
	overflow: hidden;
}

.developer-flavor-hero-slides {
	position: relative;
}

.developer-flavor-hero-slide {
	display: none;
	opacity: 0;
	transition: opacity 0.8s ease-in-out;
}

.developer-flavor-hero-slide.active {
	display: flex;
	opacity: 1;
}

/* First slide visible by default (before JS initializes) */
.developer-flavor-hero-slide:first-child {
	display: flex;
	opacity: 1;
}

/* Hero content animation */
.developer-flavor-hero-slide.active .wp-block-cover__inner-container {
	animation: dfSlideIn 0.8s ease-out 0.2s both;
}

@keyframes dfSlideIn {
	from {
		opacity: 0;
		transform: translateX(-30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Dot navigation */
.developer-flavor-hero-dots {
	position: absolute;
	bottom: 30px;
	left: 0;
	right: 0;
	z-index: 10;
	display: flex;
	gap: 10px;
}

.developer-flavor-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.7);
	background: transparent;
	cursor: pointer;
	padding: 0;
	transition: all 0.3s ease;
}

.developer-flavor-dot:hover {
	border-color: #FF6B35;
	background: rgba(255, 107, 53, 0.3);
}

.developer-flavor-dot.active {
	background: #FF6B35;
	border-color: #FF6B35;
	width: 32px;
	border-radius: 6px;
}

/* ============================================
   4. Card Hover Effects
   ============================================ */

/* Program cards and info cards */
.has-accent-2-background-color .wp-block-column > .wp-block-group,
.has-base-background-color.wp-block-group[style*="border-radius:12px"] {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.has-accent-2-background-color .wp-block-column > .wp-block-group:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(26, 26, 46, 0.08);
}

/* ============================================
   5. Button Enhancements
   ============================================ */

.wp-element-button,
.wp-block-button__link {
	transition: all 0.25s ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(255, 107, 53, 0.3);
}

.is-style-outline .wp-block-button__link:hover {
	box-shadow: 0 6px 20px rgba(255, 107, 53, 0.15);
}

/* ============================================
   6. Sports Booking Plugin Overrides
   ============================================ */

/* Schedule table */
.sports-booking-schedule {
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--accent-4, #E8E8E8);
}

.sports-booking-schedule table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.sports-booking-schedule th {
	background: var(--wp--preset--color--contrast, #1A1A2E);
	color: var(--wp--preset--color--base, #FFFFFF);
	padding: 14px 18px;
	text-align: left;
	font-weight: 600;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.sports-booking-schedule td {
	padding: 14px 18px;
	border-bottom: 1px solid var(--wp--preset--color--accent-4, #E8E8E8);
	vertical-align: middle;
}

.sports-booking-schedule tr:last-child td {
	border-bottom: none;
}

.sports-booking-schedule tr:hover td {
	background: var(--wp--preset--color--accent-2, #F7F7F8);
}

.sports-booking-schedule .btn-book {
	background: var(--wp--preset--color--accent-1, #FF6B35);
	color: #FFFFFF;
	border: none;
	padding: 8px 20px;
	border-radius: 6px;
	font-weight: 600;
	font-size: 0.85rem;
	cursor: pointer;
	transition: all 0.25s ease;
}

.sports-booking-schedule .btn-book:hover {
	background: #e55a28;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.sports-booking-schedule .btn-book:disabled,
.sports-booking-schedule .btn-book.full {
	background: var(--wp--preset--color--accent-4, #E8E8E8);
	color: var(--wp--preset--color--accent-3, #2D3436);
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* Price badge */
.sports-booking-price {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 4px;
	font-weight: 600;
	font-size: 0.85rem;
}

.sports-booking-price.free {
	background: #E8F5E9;
	color: #2E7D32;
}

.sports-booking-price.paid {
	background: #FFF3E0;
	color: #E65100;
}

/* Booking form modal overrides */
.sports-booking-modal {
	border-radius: 12px;
	box-shadow: 0 24px 64px rgba(26, 26, 46, 0.15);
}

.sports-booking-modal input[type="text"],
.sports-booking-modal input[type="email"],
.sports-booking-modal input[type="tel"] {
	border: 1px solid var(--wp--preset--color--accent-4, #E8E8E8);
	border-radius: 6px;
	padding: 10px 14px;
	font-size: 0.95rem;
	transition: border-color 0.2s ease;
}

.sports-booking-modal input:focus {
	border-color: var(--wp--preset--color--accent-1, #FF6B35);
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
}

/* Thank You page */
.sports-booking-thank-you {
	text-align: center;
	padding: 40px;
	border-radius: 12px;
	background: var(--wp--preset--color--accent-2, #F7F7F8);
}

/* ============================================
   7. Footer List Styles
   ============================================ */

.has-contrast-background-color ul {
	list-style: none;
}

.has-contrast-background-color ul li a {
	text-decoration: none;
	transition: color 0.2s ease;
}

.has-contrast-background-color ul li a:hover {
	color: var(--wp--preset--color--accent-1, #FF6B35) !important;
}

/* ============================================
   8. Responsive Adjustments
   ============================================ */

@media (max-width: 782px) {
	/* Smaller hero on mobile */
	.developer-flavor-hero-slide {
		min-height: 70vh !important;
	}

	/* Stack footer columns */
	.has-contrast-background-color .wp-block-columns {
		flex-direction: column;
	}

	/* Stats bar adjustments */
	.has-contrast-background-color .wp-block-column {
		padding-bottom: var(--wp--preset--spacing--40);
	}

	/* Dot navigation mobile position */
	.developer-flavor-hero-dots {
		bottom: 16px;
	}
}

@media (max-width: 480px) {
	.developer-flavor-hero-slide h1 {
		font-size: 2rem !important;
	}
}