/*
    Site-wide typography for the public site (layouts/app only, not the CP),
    matched to the Square1 reference's styles.css
    (square1server.com/islandrealtygroup/styles.css):

        body,td,th {font-family: "Montserrat"; color: #333333; font-size: 17px;}
        a:link #2E6DA4, a:hover #0A1932
        h1 42px/100, h2 32px/300, h3 24px/600, h4 24px/300

    The element rules sit in Tailwind's `base` layer (same layer as the
    defaults in resources/css/app.css, loaded after it), so they replace
    those defaults but any explicit size/colour a page sets with a utility
    or its own stylesheet still wins.
*/

/* Montserrat, self-hosted (the CSP only allows same-origin fonts). The
   file is the full 100–900 variable font (same one site-footer.css uses).
   Registering it as "Montserrat" makes the theme's --font-sans and every
   existing font-family: "Montserrat" rule (header etc.) actually load it. */
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/montserrat-latin-400-800.woff2") format("woff2");
}

@layer base {
    body {
        font-family: "Montserrat", sans-serif;
        font-size: 17px;
        color: #333333;
        -webkit-text-size-adjust: none;
    }

    h1 {
        font-size: 42px;
        font-weight: 100;
    }

    h2 {
        font-size: 32px;
        font-weight: 300;
    }

    h3 {
        font-size: 24px;
        font-weight: 600;
    }

    h4 {
        font-size: 24px;
        font-weight: 300;
    }

    a {
        color: #2e6da4;
        text-decoration: none;
    }

    a:hover {
        color: #0a1932;
    }

    strong,
    b {
        font-weight: 700;
    }

    /* Form controls use the page font and size rather than the browser's. */
    input,
    select,
    textarea,
    button {
        font-family: inherit;
        font-size: inherit;
    }
}

/* Header menu: the reference's .size18 nav (SALES / VACATION RENTALS / ...).
   The CP header HTML's own CSS sets 17px; desktop widths only, so the
   tablet/mobile menu sizes in irg-header-footer.css are unchanged. */
@media (min-width: 1280px) {
    .irg-header .irg-tpl-menu .irg-tpl-label {
        font-size: 18px;
    }
}

/* List Your Property / List Your Rental (pages/list-*.blade.php): the
   reference's <h3><strong>With Island Realty Group</strong></h3> subtitle
   (h3 600 + strong "bolder" = 900, 24px, in the 40px .medspacing) and its
   unstyled inputs/textarea (browser default 13.33px). Phones keep 16px
   inputs so iOS doesn't zoom into the field. */
.irg-theme .irg-page.irg-list-form .irg-intro h3,
.irg-theme .irg-page.irg-list-form .irg-intro h3 strong {
    margin: 0;
    font-size: 24px;
    font-weight: 900;
    line-height: 40px;
}

@media (min-width: 640px) {
    .irg-theme .irg-page.irg-list-form .irg-form input:not([type="hidden"]),
    .irg-theme .irg-page.irg-list-form .irg-form textarea {
        font-size: 13.33px;
    }
}

@media (max-width: 639px) {
    .irg-theme .irg-page.irg-list-form .irg-intro h3,
    .irg-theme .irg-page.irg-list-form .irg-intro h3 strong {
        font-size: 20px;
        line-height: 30px;
    }
}

/* Meet The Team (pages/team/index): the reference's
   <h3>Wildwood Realtors &amp; Rental Specialists</h3> under the h1. The CP
   intro stores it as a light grey <p>, so it's given the h3 style here. */
.irg-team-page h1 + p {
    font-size: 24px;
    font-weight: 600;
    line-height: 40px;
    color: #333333;
}

@media (max-width: 639px) {
    .irg-team-page h1 + p {
        font-size: 20px;
        line-height: 30px;
    }
}

/* Local Weather (/local-weather, pages/show.blade.php): the reference
   weather.php's layout — a width="90%" table with a 40px spacer above and
   50px below, no .medspacing, so h1 / h3 / p keep their default margins and
   normal line-height. The forecast widget (weatherwidget.io) fills that width. */
.irg-theme .irg-page.irg-weather-page {
    width: 90%;
    padding: 40px 0 50px;
}

.irg-theme .irg-page.irg-weather-page .irg-intro {
    margin-bottom: 0;
}

.irg-theme .irg-page.irg-weather-page .irg-intro h1 {
    margin: 0.67em 0;
    line-height: normal;
}

.irg-theme .irg-page.irg-weather-page .irg-intro h3 {
    margin: 1em 0;
    font-size: 24px;
    font-weight: 600;
    line-height: normal;
}

.irg-theme .irg-page.irg-weather-page .irg-intro p {
    margin: 1em 0;
}

@media (max-width: 639px) {
    .irg-theme .irg-page.irg-weather-page {
        width: auto;
        padding: 24px 16px 40px;
    }

    .irg-theme .irg-page.irg-weather-page .irg-intro h3 {
        font-size: 20px;
    }
}

/* Rental Search "More Options" (components/rental-filters.blade.php).
   Any width: a click/tap (.is-open) opens it as well as hover/focus. */
.rental-more-options.is-open > .nav-dropdown {
    visibility: visible;
    opacity: 1;
}

.rental-more-options.is-open .rental-more-options-caret {
    transform: rotate(180deg);
}

/* Phones: styled like the other filter fields, and the panel opens inline
   under the button (pushing the Search button down) rather than floating
   over the results; only a tap opens/closes it, not focus. */
@media (max-width: 639px) {
    .rental-more-options-toggle {
        background-color: #f7f7f7;
        font-size: 14px;
        color: #555555;
        padding: 0 10px;
    }

    .rental-more-options-caret {
        font-size: 10px;
        color: #555555;
    }

    .rental-more-options:not(.is-open) .rental-more-options-caret {
        transform: none;
    }

    .rental-more-options > .nav-dropdown {
        position: static;
        visibility: visible;
        opacity: 1;
        transition: none;
        box-shadow: none;
    }

    .rental-more-options:not(.is-open) > .nav-dropdown {
        display: none;
    }
}