@charset "utf-8";
/*
 * Vacation Rentals typography, matched to the Island Realty Group
 * reference (public/islandrealtygroup/recentlylistedrentals.php and
 * vacationrentals.php + styles.css), for every page under the Vacation
 * Rentals menu: Rental Search, Recently Listed Rentals, Wildwood Rentals,
 * Special Weekends (+ weekend pages), FAQ, List Your Rental, Tenants &
 * Owners, plus the rental detail page. Loaded via partials/rentals-type
 * and scoped to the .irg-rentals-type wrapper those pages add. The
 * IRG-themed pages (body.irg-theme) also get the reference text sizes;
 * the others take the font only and keep their own sizes. Text only: no
 * colours, layout or spacing rules.
 */

/* Montserrat, self-hosted (the same variable font file as the footer and
   Sales pages, weights 100-900), under a page-only family name so it
   can't change the font anywhere else. The reference loads it from
   Google Fonts. */
@font-face {
    font-family: "IRG Rentals Montserrat";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/montserrat-latin-400-800.woff2") format("woff2");
}

.irg-rentals-type,
.irg-rentals-type * {
    font-family: "IRG Rentals Montserrat", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Page title: reference h1 is 42px / 100 inside a .medspacing (40px)
   table (the title is visually hidden on this page, per the reference
   note, but kept consistent for screen readers / if it's shown again). */
.irg-theme .irg-rentals-type .irg-intro h1 {
    font-size: 42px;
    font-weight: 100;
    line-height: 40px;
}

.irg-theme .irg-rentals-type .irg-intro h4 {
    font-size: 24px;
    font-weight: 300;
    line-height: 40px;
}

/* Pager: reference "< | 1 | 2 | ... | >" sits in a .medspacing (40px) row. */
.irg-theme .irg-rentals-type nav[aria-label="Pagination"] {
    font-size: 17px;
    line-height: 40px;
}

/* Town rental pages (pages/rentals/town): keep each link in the town row
   whole ("Wildwood Crest", not "Wildwood / Crest") when it wraps on small
   screens — same as the Sales town pages — and show the current town as
   plain text colour. */
.irg-town-rentals .irg-intro h4 a {
    white-space: nowrap;
}

.irg-theme .irg-town-rentals .irg-intro h4 a[aria-current="page"] {
    color: inherit;
}

/* Wildwood NJ CMS pages (pages/show for plan-your-vacation, events,
   attractions, local-weather): images in the CP body (e.g. the
   pagebreak divider) centred with the text, as on the reference. */
.irg-cms-page .irg-intro img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

/* Rental cards, the "Showing" line and the pager already match the
   reference on desktop (title 17px, details 15px / 28px, price 17px / 700,
   status 17px / 40px); only scaled down below. The filter bar has no
   counterpart on the reference, so it takes the font and keeps its sizes. */

/* The reference is a fixed 1620px desktop layout, so these steps are our
   own, on the themed pages' breakpoints (1024 / 768 / 640). */
@media (max-width: 1024px) {
    .irg-theme .irg-rentals-type .irg-intro h1 {
        font-size: 38px;
        line-height: 1.2;
    }
}

@media (max-width: 768px) {
    .irg-theme .irg-rentals-type .irg-intro h1 {
        font-size: 34px;
    }

    .irg-theme .irg-rentals-type .irg-intro h4 {
        font-size: 20px;
        line-height: 1.5;
    }

    .irg-theme .irg-rentals-type [data-results-status],
    .irg-theme .irg-rentals-type nav[aria-label="Pagination"] {
        font-size: 16px;
        line-height: 32px;
    }
}

@media (max-width: 639px) {
    .irg-theme .irg-rentals-type .irg-intro h1 {
        font-size: 30px;
    }

    .irg-theme .irg-rentals-type .irg-rental-grid h3 {
        font-size: 16px;
        line-height: 24px;
    }

    .irg-theme .irg-rentals-type .irg-rental-price .irg-card-price {
        font-size: 16px;
    }

    .irg-theme .irg-rentals-type [data-results-status],
    .irg-theme .irg-rentals-type nav[aria-label="Pagination"] {
        font-size: 15px;
        line-height: 28px;
    }
}

/* ---------------------------------------------------------------- *
 * Vacation Rentals search page (/vacation-rentals, .irg-rental-search)
 *   - compact visible H1 above the form; the page's top padding and the
 *     form's own top margin are trimmed so the form sits about where it
 *     did before the H1 was added
 *   - the searched date range beside each card's price in #888888
 *     (also on the Special Weekend pages, .irg-special-weekend)
 * ---------------------------------------------------------------- */
.irg-theme .irg-rental-search {
    padding-top: 16px;
}

.irg-theme .irg-rental-search .irg-rental-search__title {
    margin: 0;
    padding: 0;
    font-size: clamp(20px, 2.2vw, 28px);
    font-weight: 400;
    line-height: 1.25;
    color: var(--irg-text);
}

.irg-theme .irg-rental-search #results-region > .mt-8:first-child {
    margin-top: 14px;
}

.irg-theme .irg-rental-search .irg-rental-grid .irg-rental-price .irg-card-meta,
.irg-theme .irg-special-weekend .irg-rental-grid .irg-rental-price .irg-card-meta {
    color: #888888;
}