/* =========================================================
   Red Rock Flats — Front page template
   Scoped to .rrf-home so it won't affect other templates.
   ========================================================= */

.rrf-home {
    --rrf-maroon-dark: #3e1615;
    --rrf-maroon: #4b1c1b;
    --rrf-red-deep: #8a1f1f;
    --rrf-adventure-band: #7c202e;
    --rrf-copy: 1rem;
    --rrf-btn-red: #e2332b;
    --rrf-btn-maroon: #7a1a1a;
    --rrf-phone: #f04a32;
    --rrf-teal: #1a97b3;
    --rrf-green: #3da57b;
    --rrf-gray: #dfdfda;
    --rrf-text: #4a2a28;
    color: var(--rrf-text);
}

.rrf-home section { position: relative; }
.rrf-home p { line-height: 1.65; }
/* Body copy size, used by each section's paragraphs and lists (FAQ answers stay a fixed 16px). */
@media (min-width: 64em) { .rrf-home { --rrf-copy: 1.0625rem; } }

/* ---------- Shared pieces ---------- */
.rrf-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 0.75rem;
}
.rrf-eyebrow--green { color: var(--rrf-green); }
.rrf-eyebrow--white { color: #fff; margin: 0; }

.rrf-btn {
    display: inline-block;
    min-width: 150px;
    padding: 0.75rem 1.75rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
    color: #fff;
    text-decoration: none;
    border-radius: 2px;
    transition: filter 0.2s ease, transform 0.2s ease;
}
.rrf-btn:hover, .rrf-btn:focus { color: #fff; filter: brightness(1.1); transform: translateY(-1px); }
.rrf-btn--red { background: var(--rrf-btn-red); }
.rrf-btn--maroon { background: var(--rrf-btn-maroon); }

/* Section headings use h2–h5 for a sequential SEO outline, so their look is set here
   rather than by the theme's global h2 (Huger Black, uppercase) / h3–h5 styles. */
.rrf-heading,
.rrf-adventure__title,
.rrf-cta__title {
    font-family: "Poppins", sans-serif;
    font-style: normal;
    text-transform: none;
    letter-spacing: normal;
}
.rrf-heading {
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 1.25rem;
    font-size: clamp(1.4rem, 2.6vw, 2rem);
}
.rrf-heading--left { text-align: left; font-size: clamp(1.25rem, 2vw, 1.55rem); }
.rrf-heading--teal { color: var(--rrf-teal); }
.rrf-heading--green { color: var(--rrf-green); }

/* ---------- Intro ---------- */
.rrf-intro {
    background: var(--rrf-maroon);
    color: #fff;
    padding: clamp(3rem, 6vw, 5rem) 0;
}
.rrf-intro__title {
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.1;
    font-size: clamp(1.8rem, 4vw, 2.9rem);
    margin: 0 0 1.25rem;
}
.rrf-intro__text p { color: #f3e6e4; font-size: var(--rrf-copy); max-width: 640px; }
.rrf-intro__leasing { text-align: center; margin-top: 2rem; }
.rrf-intro__call { font-weight: 700; margin: 1.25rem 0 0.25rem; color: #fff; }
.rrf-intro__phone {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--rrf-phone);
    text-decoration: none;
}
.rrf-intro__phone:hover { color: #fff; }
@media (min-width: 64em) { .rrf-intro__leasing { margin-top: 0; } }

/* ---------- Floor plans ---------- */
.rrf-plans {
    background: var(--rrf-gray);
    padding: clamp(3rem, 6vw, 5rem) 0;
}
.rrf-plans__intro p { font-size: var(--rrf-copy); }
.rrf-plans__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem 3rem;
    margin: 2rem 0 2.5rem;
    text-align: center;
}
/* Two columns filled top-to-bottom, so plans read in order down each column. */
@media (min-width: 40em) {
    .rrf-plans__grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(var(--rrf-plan-rows, 2), auto);
        grid-auto-flow: column;
    }
}
.rrf-plans__item strong { display: block; font-size: 1.05rem; color: var(--rrf-maroon); }
.rrf-plans__item span { display: block; font-size: 1.05rem; color: var(--rrf-maroon); }
.rrf-plans__item .rrf-plans__price { font-size: 0.95rem; font-weight: 600; color: var(--rrf-teal); }
.rrf-plans__cta .rrf-eyebrow { margin-bottom: 0.6rem; }

/* ---------- Gallery ---------- */
.rrf-gallery {
    background: var(--rrf-maroon);
    padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.rrf-gallery__title {
    color: #fff;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin: 0 0 1.5rem;
}
.rrf-gallery__item img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
}
@media (min-width: 64em) { .rrf-gallery__item img { height: 260px; } }

/* ---------- Features + location ---------- */
.rrf-details {
    background: #fff;
    padding: clamp(3rem, 6vw, 5rem) 0;
}
.rrf-details__col { margin-bottom: 2rem; }
.rrf-details__col p { font-size: var(--rrf-copy); }
.rrf-list { margin: 1.25rem 0 0 1.1rem; padding: 0; }
.rrf-list li {
    font-size: var(--rrf-copy);
    line-height: 1.6;
    margin-bottom: 1rem;
}
.rrf-list li::marker { color: var(--rrf-maroon); }
.rrf-list strong { color: var(--rrf-maroon-dark); }
@media (min-width: 64em) {
    .rrf-details .cell:first-child .rrf-details__col { padding-right: 2rem; }
    .rrf-details .cell:last-child .rrf-details__col { padding-left: 2rem; }
}

/* ---------- Adventure ---------- */
.rrf-adventure {
    background: var(--rrf-red-deep);
    color: #fff;
    padding: clamp(1rem, 2vw, 1.75rem) 0 clamp(3.5rem, 7vw, 6rem);
    overflow: hidden;
}
.rrf-adventure__rocks {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 70%;
    fill: #fff;
    opacity: 0.06;
    pointer-events: none;
}
.rrf-adventure .grid-container { position: relative; z-index: 1; }
.rrf-adventure--has-bg {
    background-color: var(--rrf-adventure-band);
    background-size: cover;
    background-position: center;
}
/* Icon strip above the section: hard stop from white into the band color.
   The split is a fraction of the icon's height (strip height minus bottom padding).
   The arch's red fill has a slanted bottom edge (rows 33–36 of 110); 0.28 sits just
   above its highest point so the band overlaps the fill and no white seam shows.
   One gradient covers the whole box (no separately sized layer) so there are no
   image edges to anti-alias into hairlines at fractional zoom levels. The strip also
   overlaps the section below by 1px to hide the photo's anti-aliased top edge. */
.rrf-adventure-icon {
    --rrf-adventure-split: 0.28;
    --rrf-adventure-icon-pad: 1.5rem;
    position: relative;
    z-index: 1;
    margin-bottom: -1px;
    padding-bottom: calc(var(--rrf-adventure-icon-pad) + 1px);
    background: linear-gradient(
        to bottom,
        #fff calc((100% - var(--rrf-adventure-icon-pad) - 1px) * var(--rrf-adventure-split)),
        var(--rrf-adventure-band) 0
    );
}
.rrf-adventure__icon { display: block; width: 120px; height: auto; margin: 0 auto; fill: #6a1414; }
.rrf-adventure__title {
    color: #fff;
    font-weight: 700;
    line-height: 1.25;
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
    margin: 0 0 1rem;
}
.rrf-adventure p { color: #f6e3e1; font-size: var(--rrf-copy); }

/* ---------- FAQ ---------- */
.rrf-faq {
    background: #fff;
    padding: clamp(3rem, 6vw, 5rem) 0;
}
.rrf-faq__intro { margin-bottom: 1rem; }
.rrf-faq__intro p { font-size: var(--rrf-copy); }
.rrf-faq__item { border-bottom: 2px solid var(--rrf-maroon-dark); }
.rrf-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.4rem 0;
    font-weight: 700;
    font-size: var(--rrf-copy);
    color: var(--rrf-maroon-dark);
    cursor: pointer;
    list-style: none;
}
.rrf-faq__question::-webkit-details-marker { display: none; }
.rrf-faq__toggle {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    background: var(--rrf-green);
    position: relative;
}
.rrf-faq__toggle::before,
.rrf-faq__toggle::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 10px; height: 2px;
    background: #fff;
    transform: translate(-50%, -50%);
}
.rrf-faq__toggle::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform 0.2s ease; }
.rrf-faq__item[open] .rrf-faq__toggle::after { transform: translate(-50%, -50%) rotate(0deg); }
.rrf-faq__item[open] .rrf-faq__question { padding-bottom: 0.4rem; }
.rrf-faq__answer { padding: 0 3rem 1.4rem 0; font-size: 16px; }
/* Override the theme's global p/li sizes (16px, 18px at 64em+) so answers stay 16px. */
.rrf-faq__answer p,
.rrf-faq__answer a,
.rrf-faq__answer ul,
.rrf-faq__answer ol,
.rrf-faq__answer li { font-size: 16px; }
.rrf-faq__answer p:last-child { margin-bottom: 0; }

/* ---------- CTA ---------- */
.rrf-cta {
    background: var(--rrf-maroon-dark);
    color: #fff;
    padding: clamp(4rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 4.5rem);
}
.rrf-cta__edge {
    position: absolute;
    top: -1px; left: 0;
    width: 100%;
    height: 34px;
    fill: #fff;
    transform: scaleY(-1);
}
.rrf-cta__title {
    color: var(--rrf-btn-red);
    font-weight: 700;
    line-height: 1.25;
    font-size: clamp(1.3rem, 2.4vw, 1.75rem);
    margin: 0 0 0.75rem;
}
.rrf-cta p { color: #f3e6e4; font-size: var(--rrf-copy); }
.rrf-cta__rule {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.7);
    max-width: 100%;
    margin: 1.75rem 0;
}
.rrf-cta__action {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem 1.5rem;
}