/* Public-page sizing fixes.
   Purpose: normalize desktop scale without browser zoom or transform hacks. */

:root {
    --site-header-height: 76px;
    --site-container: 1200px;
    --site-container-narrow: 1120px;
    --site-section-y: clamp(56px, 5vw, 80px);
    --site-section-y-tight: clamp(44px, 4vw, 64px);
}

html {
    font-size: 15px !important;
}

body {
    overflow-x: hidden;
}

/* Desktop navigation was being capped to 50px logos and tiny 0.8rem links. */
nav {
    min-height: var(--site-header-height) !important;
}

nav .container {
    max-width: var(--site-container) !important;
    padding-top: 0.55rem !important;
    padding-bottom: 0.55rem !important;
}

nav img {
    max-width: 72px !important;
    height: auto !important;
}

nav a:not(.mobile-menu a) {
    font-size: 0.9rem !important;
    letter-spacing: 0 !important;
}

/* Keep wide pages from stretching edge-to-edge, especially blog.html. */
@media (min-width: 641px) {
    .container,
    .container.mx-auto {
        max-width: var(--site-container) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    .max-w-7xl,
    .max-w-6xl {
        max-width: var(--site-container) !important;
    }
}

section.py-20,
section.py-16 {
    padding-top: var(--site-section-y) !important;
    padding-bottom: var(--site-section-y) !important;
}

section.py-12,
section.py-10,
section.py-8 {
    padding-top: var(--site-section-y-tight) !important;
    padding-bottom: var(--site-section-y-tight) !important;
}

/* Homepage: the visual problem was mainly the full-viewport hero plus a wide form/gap. */
#home {
    min-height: clamp(640px, calc(100vh - var(--site-header-height)), 720px) !important;
    height: clamp(640px, calc(100vh - var(--site-header-height)), 720px) !important;
}

.home-hero-layout {
    max-width: var(--site-container-narrow) !important;
    grid-template-columns: minmax(300px, 420px) minmax(380px, 520px) !important;
    gap: clamp(2.25rem, 4vw, 4rem) !important;
    padding-top: clamp(1rem, 2.5vw, 2rem) !important;
}

.hero-content-container h2 {
    font-size: clamp(2.65rem, 3.7vw, 3.65rem) !important;
    line-height: 1.08 !important;
}

.hero-content-container p {
    font-size: 1rem !important;
    max-width: 34rem;
}

#availability-check-container {
    max-width: 520px !important;
    width: 100% !important;
}

#availability-check-container > div {
    padding: 1.1rem 1.25rem 1.25rem !important;
}

#availability-check-container h3 {
    margin: -1.1rem -1.25rem 1rem !important;
    padding: 0.75rem 1rem !important;
    font-size: 1.35rem !important;
}

#availabilityForm input,
#availabilityForm button,
#room-dropdown-trigger,
#guests-dropdown-trigger {
    min-height: 46px !important;
}

/* Prevent generated card images from feeling like page zoom on hover. */
.room-card:hover img,
.service-card:hover img,
.gallery-item:hover img {
    transform: none !important;
    opacity: 0.94;
}

.room-card img,
.service-card img,
.gallery-item img {
    transition: opacity 0.2s ease !important;
}

.carousel-nav:hover {
    transform: translateY(-50%) !important;
}

@media (max-width: 1024px) and (min-width: 641px) {
    .home-hero-layout {
        grid-template-columns: 1fr !important;
        max-width: 780px !important;
        gap: 1.75rem !important;
    }

    #home {
        height: auto !important;
        min-height: 720px !important;
        padding-top: var(--site-header-height);
        padding-bottom: 3rem;
    }
}

@media (max-width: 640px) {
    html {
        font-size: 15px !important;
    }

    nav {
        min-height: auto !important;
    }

    nav img {
        max-width: 76px !important;
    }

    .container,
    .container.mx-auto {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    #home {
        height: auto !important;
        min-height: auto !important;
        padding-top: 5.5rem;
        padding-bottom: 3rem;
    }

    .home-hero-layout {
        display: grid !important;
        grid-template-columns: 1fr !important;
        max-width: 100% !important;
        gap: 1.5rem !important;
        padding-top: 0 !important;
    }

    .hero-content-container h2 {
        font-size: clamp(2.1rem, 12vw, 2.85rem) !important;
    }

    #availability-check-container {
        max-width: 100% !important;
    }
}