/*
 * Design overrides — supplements style.css with the page-specific styling
 * added during the May 2026 hero/intro redesign. Loaded after style.css so
 * its rules take precedence without touching the gulp-compiled main file.
 *
 * Sections:
 *   1. Color-scheme + body background fallback
 *   2. Site-wide hero overlay (white text, italic light heading, mobile sizes)
 *   3. Homepage-specific hero (CTA button styling) + intro layout
 *   4. Mobile intro paragraph size
 */

/* 1. Color-scheme — opt the site into light defaults so visitors with
 *    OS-level dark mode don't get a black canvas behind sections that
 *    have no explicit background. */
:root,
html,
body {
    background-color: #fff;
    color-scheme: light;
}

/* 2. Hero overlays — scoped to `hero-content-type--title` so we ONLY touch
 *    the new title-only overlays added in May 2026 (Home/About/Homes/
 *    Lifestyle/Wellness/Contact). The theme's existing wysiwyg-type heroes
 *    (e.g. "Luxury Abounds" on the homepage) keep their native styling.
 *
 *    Also covers a theme quirk: hero-content-color--white doesn't have a
 *    color rule in style.css (theme only handles --light/--dark). If the
 *    class lands as --white, we still flip text to #fff. */
.hero-content-color--white .hero-content,
.hero-content-color--white .hero-content * {
    color: #fff;
}

section.hero.hero-content-type--title h1 {
    font-style: italic;
    font-weight: 300;
    font-size: 68px;
    line-height: 1.1;
}
@media (max-width: 1023px) {
    section.hero.hero-content-type--title h1 {
        font-size: 48px;
    }
}
@media (max-width: 767px) {
    section.hero.hero-content-type--title h1 {
        font-size: 26px;
        line-height: 1.2;
    }
    /* The theme makes .hero-content shrink-to-fit which forces extra wraps
     * on narrow phones. Force full-width so explicit <br /> are the only
     * break points. */
    section.hero.hero-content-type--title .hero-content {
        width: 100%;
    }
}

/* 3. Homepage hero — H1 + Schedule a Tour CTA layout.
 *    Scoped to the title-type hero only (the new top-of-page overlay).
 *    The homepage also has a SECONDARY hero further down — "Luxury Abounds" —
 *    that uses hero-content-type--wysiwyg; we must NOT restyle that one. */
.home section.hero.hero-content-type--title h1 {
    font-style: italic;
    font-weight: 300;
    font-size: 68px;
    line-height: 1.05;
    text-align: left;
    max-width: 9.5em;
    margin: 0 0 1.25rem;
}
.home section.hero.hero-content-type--title .btn--primary {
    display: inline-block;
    font-family: "Proxima Nova Condensed", "Proxima Nova TH", sans-serif;
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 1.1rem 2rem;
    border-radius: 2px;
}
@media (max-width: 767px) {
    .home section.hero.hero-content-type--title h1 {
        font-size: 36px;
        line-height: 1.1;
        max-width: none;
    }
    .home section.hero.hero-content-type--title .btn--primary {
        font-size: 16px;
        padding: 0.9rem 1.5rem;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .home section.hero.hero-content-type--title h1 {
        font-size: 52px;
    }
}

/* Homepage intro section directly below hero — keep the heading on two
 * lines (black row, green row) and let the paragraph run slightly wider. */
.home section.generalContent .wysiwyg {
    max-width: 1100px;
}
.home section.generalContent .wysiwyg h1 {
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.15;
    white-space: nowrap;
}
.home section.generalContent .wysiwyg h1 span {
    white-space: nowrap;
}
.home section.generalContent .wysiwyg p {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 767px) {
    .home section.generalContent .wysiwyg h1 {
        font-size: 36px;
        white-space: normal;
    }
    .home section.generalContent .wysiwyg h1 span {
        white-space: normal;
    }
    /* On mobile let the heading flow naturally — drop the forced break
     * between the black and green segments so nothing clips. */
    .home section.generalContent .wysiwyg h1 br {
        display: none;
    }
}

/* 4. Mobile intro paragraph — theme defaults to 24px which is oversized on
 *    phones across all pages with a general_content intro. */
@media (max-width: 767px) {
    section.generalContent .wysiwyg p {
        font-size: 16px;
        line-height: 1.55;
    }
}