/*
 * Non-utility CSS: behavior the Tailwind utility layer can't express directly
 * (custom state classes like .is-active, JS-driven reveal-on-scroll).
 */

/* Offsets anchor-scroll targets so content doesn't land under the fixed header. */
main [id] {
	scroll-margin-top: 5.5rem;
}

/* Carousel crossfade — ports the framer-motion `animate={{ opacity }}` from ImageCarousel.tsx */
.vs-carousel__slide {
	opacity: 0;
	transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.vs-carousel__slide.is-active {
	opacity: 1;
}

/* Reveal-on-scroll: hidden until reveal.js adds the matching Tailwind animate-* utility. */
[data-reveal] {
	opacity: 0;
}
[data-reveal].vs-revealed {
	/* animate-* utility classes handle the actual transition; this class only
	   marks the element as processed so we don't re-trigger the observer. */
}

/* Desktop header menu font size — Aparência > Personalizar > Menu (slider).
   Scoped to #vs-desktop-nav only, so it never touches the mobile menu panel
   or the footer nav links (both reuse .villashalom-nav-link too). */
#vs-desktop-nav .villashalom-nav-link {
	font-size: var(--nav-font-size, 0.875rem);
}

/* Mobile nav panel, toggled by header.js */
#vs-mobile-menu {
	display: none;
}
#vs-mobile-menu.is-open {
	display: block;
}

/* Native <dialog> reset for the reservation modal (Phase 5) */
dialog.vs-modal {
	border: none;
	padding: 0;
	background: transparent;
	max-width: min(32rem, calc(100vw - 2rem));
	width: 100%;
}
dialog.vs-modal::backdrop {
	background: hsl(var(--ocean-dark) / 0.7);
	backdrop-filter: blur(2px);
}