/* Home page hero. Home.css (slideshow and search box, also used by the 404 page) loads first; these rules restyle on top of it.
     The search markup is the shared Views/Home/HomeSearch.cshtml, so it is restyled here rather than changed. */

.page-theme .homeslide {
    height: 680px;
}

/* Frosted teal panel behind the title and search fields */
.page-theme .homesearch {
    max-width: 1040px;
    border-radius: var(--radius-lg);
    background: rgba(15, 63, 69, .6);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.page-theme .hometitle {
    margin-bottom: 24px;
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: .01em;
}

.page-theme .search input {
    height: 56px;
    padding-left: 44px;
    border-radius: 12px;
    color: var(--ink);
    font-size: .95rem;
}

/* calendar icon re-centred for the 56px field */
.page-theme .search-field .ui-datepicker-trigger {
    top: 17px !important;
}

.page-theme .homesearchBtn {
    height: 56px;
    padding: 0 24px;
    border: 0;
    border-radius: 12px;
    background: var(--primary);
    transition: background .2s;
}

    .page-theme .homesearchBtn:hover {
        background: var(--primary-dark);
    }

    .page-theme .homesearchBtn i {
        font-size: 20px;
    }

/* Wide screens: destination, dates and button in one row with even gaps */
@media (min-width: 871px) {
    .page-theme .searchbox .search {
        flex-wrap: nowrap;
        gap: 12px;
    }

    .page-theme .search-field {
        flex: 1 1 0;
    }

    .page-theme .search-field-button {
        flex: 0 0 auto;
    }
}

@media (max-width: 767px) {
    .page-theme .homeslide {
        height: 500px;
    }

    .page-theme .homesearch {
        padding: 24px 16px !important;
    }

    .page-theme .homesearchBtn {
        height: 48px;
    }
}