/**
 * Jonaki Homestay - Rooms section: desktop layout only.
 *
 * Mobile/touch devices are completely untouched — the original
 * horizontal swipe-to-scroll row (overflow-x-auto) still works exactly as
 * before there.
 *
 * On devices with a real mouse/trackpad ("hover: hover and pointer: fine"
 * — i.e. desktop, not touch), the same 8 rooms instead lay out as a
 * 4-across grid (4 rooms on top, 4 below) so everything is visible at
 * once, with no scrolling needed.
 */

@media (hover: hover) and (pointer: fine) {
	.jonaki-homestay-scope #rooms .overflow-x-auto {
		display: grid !important;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		overflow: visible !important;
		scroll-snap-type: none !important;
	}

	.jonaki-homestay-scope #rooms .overflow-x-auto > article {
		width: 100% !important;
	}
}

/**
 * Room cards: no underline on the room title link or the "Book Now" link,
 * in any state (default/hover/focus/visited). Purely cosmetic, scoped to
 * the #rooms section only — nothing else on the page is touched.
 */
.jonaki-homestay-scope #rooms a {
	text-decoration: none !important;
}
.jonaki-homestay-scope #rooms a:hover,
.jonaki-homestay-scope #rooms a:focus,
.jonaki-homestay-scope #rooms a:visited,
.jonaki-homestay-scope #rooms a:active {
	text-decoration: none !important;
}

/**
 * Hero section admin customization support.
 *
 * The hero section's image crop position, text sizes, and section height
 * are all admin-editable (per Desktop/Mobile) from the "Jonaki Homestay"
 * dashboard page. Rather than generating new Tailwind utility classes at
 * runtime (impossible — the CSS below was pre-compiled at build time and
 * can't include combinations that don't already exist in it), each
 * customizable value is passed down as an inline CSS custom property, and
 * these few generic rules pick a mobile value by default and swap to the
 * desktop value at the "lg" (1024px) breakpoint — matching how the rest of
 * the design already treats desktop vs. mobile.
 *
 * `!important` here is intentional: these rules exist specifically to let
 * the admin panel override the original static Tailwind text-size classes
 * still present on the same elements as safe fallbacks.
 */
.jonaki-homestay-scope .hero-dyn-text {
	font-size: var(--fs-m, inherit) !important;
}
.jonaki-homestay-scope .hero-dyn-img {
	object-position: var(--pos-m, center) !important;
}
.jonaki-homestay-scope .hero-dyn-height {
	min-height: var(--h-m, 100dvh) !important;
}
@media (min-width: 1024px) {
	.jonaki-homestay-scope .hero-dyn-text {
		font-size: var(--fs-d, inherit) !important;
	}
	.jonaki-homestay-scope .hero-dyn-img {
		object-position: var(--pos-d, center) !important;
	}
	.jonaki-homestay-scope .hero-dyn-height {
		min-height: var(--h-d, 100dvh) !important;
	}
}

/* Two small utility classes the original compiled CSS didn't include
   (nothing in the original design used them), needed for the hero text
   position (vertical/horizontal) admin controls. */
.jonaki-homestay-scope .justify-end {
	justify-content: flex-end;
}
.jonaki-homestay-scope .text-right {
	text-align: right;
}

/**
 * Hero heading/paragraph entrance animations (admin-selectable, off by
 * default). Deliberately fast (0.45s) rather than slow/showy — the brief
 * covers the animation is a nice-to-have, not something that should make
 * visitors wait. Re-plays every time the slider changes image because the
 * text block gets a fresh React `key` per slide (see app.js), which is the
 * simplest and cheapest way to retrigger a CSS animation.
 */
.jonaki-homestay-scope .hero-anim-fade {
	animation: jonakiHeroFade 0.45s ease-out both;
}
.jonaki-homestay-scope .hero-anim-slideup {
	animation: jonakiHeroSlideUp 0.45s ease-out both;
}
.jonaki-homestay-scope .hero-anim-slidedown {
	animation: jonakiHeroSlideDown 0.45s ease-out both;
}
.jonaki-homestay-scope .hero-anim-slideleft {
	animation: jonakiHeroSlideLeft 0.45s ease-out both;
}
.jonaki-homestay-scope .hero-anim-zoom {
	animation: jonakiHeroZoom 0.45s ease-out both;
}
@keyframes jonakiHeroFade {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes jonakiHeroSlideUp {
	from { opacity: 0; transform: translateY(22px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes jonakiHeroSlideDown {
	from { opacity: 0; transform: translateY(-22px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes jonakiHeroSlideLeft {
	from { opacity: 0; transform: translateX(22px); }
	to { opacity: 1; transform: translateX(0); }
}
@keyframes jonakiHeroZoom {
	from { opacity: 0; transform: scale(0.94); }
	to { opacity: 1; transform: scale(1); }
}

/**
 * Homepage top-of-page cleanup.
 *
 * The theme prints the WordPress page title ("Jonaki") in a
 * .page-header block, and its own .site-header, on a plain white
 * background ABOVE the plugin content. While the transparent
 * Jonaki header floats over it, this showed up as a stray "Jonaki"
 * text on a white strip behind the logo/menu. Hiding those two theme
 * blocks removes both. This file only loads on pages that carry the
 * [jonaki_homestay_home] shortcode, so no other page is affected.
 * Nothing else in the plugin is changed.
 */
.page-header,
.page-header .entry-title,
header#site-header.site-header,
.site-header {
	display: none !important;
}

/**
 * "Available" badge on room cards (shown only after a date search, only on
 * rooms that are free for the chosen dates). Sits on the right of the photo,
 * mirroring the price pill on the left, in the site's green.
 */
.jonaki-homestay-scope #rooms .jh-avail-badge {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	border-radius: 9999px;
	background-color: #2e7d32;
	color: #ffffff;
	padding: 0.25rem 0.75rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 700;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 2px -1px rgba(0, 0, 0, 0.2);
	pointer-events: none;
}
.jonaki-homestay-scope #rooms .jh-avail-badge::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 9999px;
	background-color: #ffc857;
}