/**
 * Supplementary styles: accessibility, Elementor Free harmony,
 * and print/utility rules that don't belong in the root style.css
 * (WordPress requires style.css to hold only the theme header + core CSS,
 * but splitting non-critical rules keeps the main stylesheet lean).
 */

/* Visible focus outlines for keyboard navigation (accessibility). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--sv-color-secondary, #D32F2F);
	outline-offset: 2px;
}

/* Screen-reader only text (labels, skip links). */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* Elementor Free: ensure our container width matches Elementor's default
   boxed width so coded sections and Elementor-built sections align visually. */
.elementor-section.elementor-section-boxed > .elementor-container {
	max-width: var(--sv-container, 1280px);
}

/* Respect reduced-motion preferences. */
@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;
	}
}

/* Print */
@media print {
	.sv-header, .sv-footer, .sv-hero__ctas, .sv-search { display: none; }
}

/* ==========================================================================
   Scroll animations — one entrance style per section, plus a staggered
   reveal for cards/features/testimonials inside each section.
   JS (main.js) adds .sv-in-view once a .sv-animate section scrolls into
   view; everything below is inert until that class lands, so content is
   fully visible/readable with JS disabled or before scripts run.
   ========================================================================== */

.sv-animate {
	opacity: 0;
	will-change: opacity, transform;
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.sv-animate[data-animate="fade-up"] { transform: translateY(36px); }
.sv-animate[data-animate="zoom-in"] { transform: scale(0.96); }
.sv-animate[data-animate="fade"]    { transform: none; }

.sv-animate.sv-in-view {
	opacity: 1;
	transform: none;
}

/* Hero gets its own one-shot entrance the moment the page loads
   (it's already in view, so it doesn't wait for IntersectionObserver). */
.sv-hero.sv-animate { transition-duration: 1.1s; }
.sv-hero__content > * {
	opacity: 0;
	transform: translateY(22px);
	animation: sv-hero-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.sv-hero__content h1  { animation-delay: 0.15s; }
.sv-hero__content p   { animation-delay: 0.3s; }
.sv-hero__content .sv-hero__ctas  { animation-delay: 0.45s; }
.sv-hero__content .sv-search      { animation-delay: 0.6s; }

@keyframes sv-hero-rise {
	to { opacity: 1; transform: none; }
}

/* Staggered reveal for grid/carousel children — each item's own
   fade-up transition is delayed a little more than the one before it,
   so cards settle in left-to-right / top-to-bottom instead of all at once. */
.sv-grid > *,
.sv-carousel > * {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.sv-in-view .sv-grid > *,
.sv-in-view .sv-carousel > * {
	opacity: 1;
	transform: none;
}
.sv-grid > *:nth-child(1),  .sv-carousel > *:nth-child(1)  { transition-delay: 0.05s; }
.sv-grid > *:nth-child(2),  .sv-carousel > *:nth-child(2)  { transition-delay: 0.12s; }
.sv-grid > *:nth-child(3),  .sv-carousel > *:nth-child(3)  { transition-delay: 0.19s; }
.sv-grid > *:nth-child(4),  .sv-carousel > *:nth-child(4)  { transition-delay: 0.26s; }
.sv-grid > *:nth-child(5)  { transition-delay: 0.33s; }
.sv-grid > *:nth-child(6)  { transition-delay: 0.4s; }
.sv-grid > *:nth-child(7)  { transition-delay: 0.47s; }
.sv-grid > *:nth-child(8)  { transition-delay: 0.54s; }
.sv-grid > *:nth-child(9)  { transition-delay: 0.61s; }
.sv-grid > *:nth-child(10) { transition-delay: 0.68s; }
.sv-card.sv-stagger { transition-delay: calc(var(--sv-stagger, 0) * 70ms + 50ms) !important; }

/* Subtle hover lift, independent of scroll-reveal, on anything already visible. */
.sv-card, .sv-feature {
	transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.25s ease;
}
.sv-in-view .sv-card:hover,
.sv-in-view .sv-feature:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px rgba(17,17,17,0.12);
}

/* Season tiles get a gentle zoom on the image, not the whole tile,
   so the grid doesn't jump when the reveal finishes. */
.sv-season img { transition: transform 0.6s ease; }
.sv-season:hover img { transform: scale(1.05); }

@media (prefers-reduced-motion: reduce) {
	.sv-animate, .sv-hero__content > *, .sv-grid > *, .sv-carousel > * {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
}