/* =====================================================================
   UniStay — Landing page styles
   Only what Tailwind can't express cleanly. Keep this file small.
   ===================================================================== */

/* ---------- Hero background ---------- */
.landing-hero {
    background:
        radial-gradient(1200px 600px at 15% -10%, #f0fdfa 0%, transparent 60%),
        radial-gradient(1000px 500px at 100% 0%, #e0f2fe 0%, transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    position: relative;
}

html.dark .landing-hero {
    background:
        radial-gradient(1200px 600px at 15% -10%, rgba(15, 118, 110, 0.18) 0%, transparent 60%),
        radial-gradient(1000px 500px at 100% 0%, rgba(14, 116, 144, 0.15) 0%, transparent 55%),
        linear-gradient(180deg, #020617 0%, #0f172a 100%);
}

/* ---------- Sticky nav: shadow on scroll ---------- */
#landing-nav {
    border-bottom-color: transparent;
}

#landing-nav.is-scrolled {
    border-bottom-color: rgb(226 232 240); /* slate-200 */
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.04), 0 1px 2px -1px rgb(0 0 0 / 0.04);
}

html.dark #landing-nav.is-scrolled {
    border-bottom-color: rgb(30 41 59); /* slate-800 */
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4);
}

/* ---------- Scroll reveal ---------- */
.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger variants — assign on siblings */
.reveal-delay-1 { transition-delay: 60ms; }
.reveal-delay-2 { transition-delay: 120ms; }
.reveal-delay-3 { transition-delay: 180ms; }
.reveal-delay-4 { transition-delay: 240ms; }

/* Respect users who disable animation */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    html { scroll-behavior: auto; }
}

/* ---------- Hero search focus ring ---------- */
#heroSearch:focus-within {
    border-color: rgb(13 148 136); /* brand-600 */
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15), 0 20px 25px -5px rgb(0 0 0 / 0.08);
}

html.dark #heroSearch:focus-within {
    border-color: rgb(20 184 166); /* brand-500 */
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.25), 0 20px 25px -5px rgb(0 0 0 / 0.4);
}

/* Kill the default select/input ring inside the hero box */
#heroSearch select:focus,
#heroSearch input:focus {
    outline: none;
    box-shadow: none;
}

/* ---------- Subtle scrollbar for the AJAX results ---------- */
#heroSearch ::-webkit-scrollbar {
    width: 6px;
}

#heroSearch ::-webkit-scrollbar-thumb {
    background-color: rgb(203 213 225);
    border-radius: 3px;
}

html.dark #heroSearch ::-webkit-scrollbar-thumb {
    background-color: rgb(51 65 85);
}

/* ---------- Line-clamp fallback for older Tailwind CDN builds ---------- */
/* Tailwind v3.3+ includes line-clamp by default; this is harmless if not needed. */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- FAQ collapse smoothness (works with Alpine x-collapse) ---------- */
[x-collapse] {
    overflow: hidden;
}

/* ---------- Anchor offset for sticky nav ---------- */
/* When users click #how-it-works or #for-owners, don't hide the heading
   behind the fixed nav. 5rem ≈ nav height + a little breathing room. */
:target {
    scroll-margin-top: 5rem;
}