/* ==========================================================================
   tsp-site.css — Tahoe Signature Properties skin (HANDOFF §200, 2026-09-04).

   Built from tahoesignatureproperties.com's OWN stylesheets, not eyeballed
   (captured 2026-09-04: sandbox-child style.css, Elementor post-16142 [home],
   post-3767 [header], post-912 [footer]). Verbatim source values:

     Manrope        their body + button face (--sandbox-font-main; Google
                    Fonts, OFL) — self-hosted here as ONE variable file,
                    weights 200–800, per the no-CDN rule
     #60697b        body text (--sandbox-body-color)
     #34334E        header nav links (post-3767)  · hover #060314B3
     #FFFFFF99      header background over the hero, #FFFFFFDE once stuck
     #336699        every button (octf-btn radial-gradient, radius 8px,
                    17px/600 white)
     #6EC1E4        section headings ("Featured Properties" 1.75rem,
                    "Why Choose…" 2.3rem/600)  · card titles #000
     #033979        footer band · headings #FFF 1rem/600 · text #CACACA
     3.5rem/600     hero H1, white  · hero H2 white 500

   HOW THIS LOADS (the anti-fork design, unchanged): demo-site.css supplies
   every piece of chrome structure and reads the --rr-*/--lx-* tokens; this
   file re-declares the tokens and then counters the small set of chrome rules
   that bake the demo's dark navy theme in as literals (header, page heroes,
   buttons). The homepage and the footer are SITE TEMPLATES
   (sites/tsp/templates/) styled in the §200 blocks at the bottom.
   ========================================================================== */

/* ── Their typeface, self-hosted (variable font: one file, every weight) ─── */
@font-face {
    font-family: "Manrope";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("fonts/Manrope-Variable.ttf") format("truetype-variations"),
         url("fonts/Manrope-Variable.ttf") format("truetype");
}

/* ── Palette (re-skins every var()-driven chrome + .lx-next surface) ─────── */
:root {
    --lx-color-brand:      #336699;   /* their button blue */
    --lx-color-brand-ink:  #274f78;
    --lx-color-brand-tint: #e9f4fb;
    --lx-color-accent:     #6EC1E4;   /* their heading sky */
    --lx-color-accent-ink: #4aa9d3;
    --lx-color-ink:        #000000;
    --lx-color-ink-2:      #60697b;
    --lx-color-ink-3:      #8a93a3;
    --lx-color-bg-2:       #f7f9fc;
    --lx-color-bg-3:       #eef3f8;
    --lx-color-line:       #e6e6e6;
    --lx-color-line-2:     #d5dbe3;
    --lx-font-sans:  "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --lx-font-serif: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Chrome palette — same --rr-* names on purpose; "navy" is now their
       footer navy, "blue" their button blue, "sky" their heading accent. */
    --rr-navy:      #033979;
    --rr-navy-2:    #0c1f41;
    --rr-blue:      #336699;
    --rr-blue-ink:  #274f78;
    --rr-sky:       #6EC1E4;
    --rr-mint:      #cfe8f5;
    --rr-cream:     #f7f9fc;
    --rr-ink:       #000000;
    --rr-line-dark: rgba(0, 0, 0, 0.08);
}

body { font-family: var(--lx-font-sans); color: #60697b; }
h1, h2, h3, h4, h5, h6 { font-family: var(--lx-font-sans); color: #000000; }

/* ── Header: white, sticky, their nav colours ─────────────────────────────── */
.lx-demo-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgba(255, 255, 255, 0.87);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: none;
    padding: 12px clamp(16px, 3vw, 40px);
}
.lx-demo-header .lx-demo-header__logo {
    height: 55px;
    width: auto;
    max-width: 250px;
}
@media (max-width: 640px) {
    .lx-demo-header .lx-demo-header__logo { height: 40px; max-width: 180px; }
    /* Phone: keep the anchor (the favourites heart mounts on it) but drop the
       number so logo · heart · menu toggle fit a 360px header. */
    .lx-demo-header__phone { font-size: 0; padding: 6px 2px; }
    .lx-demo-header__phone svg { width: 18px; height: 18px; }
}
.lx-demo-header nav { margin-left: auto; }
.lx-demo-header__nav { justify-content: flex-end; gap: 22px; }
.lx-demo-header__nav a,
.lx-demo-header__nav .lx-demo-header__navdead {
    font-size: 15px;
    font-weight: 600;
    color: #34334E;
    text-transform: none;
    letter-spacing: 0;
}
.lx-demo-header__nav a:hover,
.lx-demo-header__nav a.is-active { color: rgba(6, 3, 20, 0.7); border-bottom-color: #336699; }
.lx-demo-header__navdead { cursor: default; }
.lx-demo-header__has-sub > a::after,
.lx-demo-header__has-sub > .lx-demo-header__navdead::after {
    content: "";
    display: inline-block;
    margin-left: 6px;
    width: 6px;
    height: 6px;
    border-right: 1.6px solid #34334E;
    border-bottom: 1.6px solid #34334E;
    transform: rotate(45deg) translateY(-3px);
}
.lx-demo-header__sub a { color: #34334E; font-size: 14px; }
.lx-demo-header__sub .lx-demo-header__navdead {
    display: block;
    padding: 10px 16px 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8a93a3;
}
/* Their header phone: bold dark text, no pill (post-3767 header-phone 900) */
.lx-demo-header__phone {
    color: #34334E;
    background: transparent;
    border: 0;
    padding: 6px 4px;
    font-weight: 800;
    font-size: 15px;
}
.lx-demo-header__phone:hover { color: #336699; background: transparent; border: 0; }
.lx-demo-header .lx-fav-headerbtn { color: #34334E !important; }
.lx-demo-header .lx-fav-headerbtn:hover { color: #336699 !important; }
.lx-demo-header__navtoggle { color: #34334E; }
@media (max-width: 880px) {
    body.lx-nav-open .lx-demo-header__nav {
        background: #ffffff;
        box-shadow: 0 14px 24px rgba(3, 57, 121, 0.14);
        border-top: 1px solid #ececec;
    }
    body.lx-nav-open .lx-demo-header__nav a { color: #34334E; border-bottom: 1px solid #eef1f6; }
}

/* ── Search strip (homepage only — manifest search_strip.home_only) ──────── */
.lx-demo-searchstrip { background: #ffffff; border-bottom: 1px solid #e6e6e6; }
.lx-demo-searchstrip__field > span { color: #333333; font-weight: 600; }
.lx-demo-searchstrip__field select,
.lx-demo-searchstrip__field input { background: #f3f5f8; color: #333; border-radius: 8px; }
.lx-demo-searchstrip__go,
.lx-demo-searchstrip__filters { background: #336699; border-radius: 8px; }
.lx-demo-searchstrip__go:hover, .lx-demo-searchstrip__filters:hover { background: #274f78; }

/* ── Buttons: their geometry (8px radius, 17px/600, #336699) ─────────────── */
.rr-btn {
    border-radius: 8px;
    font-family: var(--lx-font-sans);
    font-weight: 600;
    font-size: 17px;
    letter-spacing: 0;
    text-transform: none;
}
.rr-btn--solid { background: #336699; border-color: #336699; color: #fff; }
.rr-btn--solid:hover { background: #274f78; border-color: #274f78; }
.rr-btn--outline { border-color: #336699; color: #336699; background: #fff; }
.rr-btn--outline:hover { background: #e9f4fb; border-color: #274f78; color: #274f78; }
.rr-btn--outline-navy { color: #336699; border-color: rgba(51, 102, 153, 0.5); }
.rr-btn--outline-navy:hover { border-color: #336699; background: #e9f4fb; }

/* ── Page heroes (content pages, contact, favorites): light, their type ───── */
.rr-page-hero {
    background: linear-gradient(180deg, #f7f9fc 0%, #ffffff 100%);
    color: #000000;
    border-bottom: 1px solid #eef1f6;
}
.rr-page-hero h1 { color: #000000; font-weight: 600; }
.rr-page-hero .rr-accent { color: #6EC1E4; font-style: normal; }
.rr-page-hero .rr-page-hero__sub { color: #60697b; }
.rr-page-hero .rr-label--ondark { color: #336699; }
.rr-label { color: #336699; }
.rr-band--navy { background: #f7f9fc; color: #60697b; }
.rr-band--navy h2 { color: #000000; }
.rr-band--navy h2 .rr-accent { color: #6EC1E4; }
.rr-band--navy .rr-band__sub { color: #60697b; }
.rr-band--navy .rr-label--ondark { color: #336699; }
.rr-band h2 { font-weight: 600; letter-spacing: 0; }
.rr-band h2 .rr-accent { color: #6EC1E4; font-style: normal; }
.rr-prop { background: #ffffff; border-radius: 12px; box-shadow: 0 10px 30px rgba(3, 57, 121, 0.08); }
.rr-prop h3 { color: #000000; }
.rr-prop p { color: #60697b; }
.rr-prop__num { color: #6EC1E4; }

/* Content pages (content.php) + collection intros: their heading colours */
.lx-content-md h2, .lx-content-md h3, .lx-content-md h4 { color: #000000; margin-top: 1.6em; font-weight: 700; }
.lx-content-md h2 { font-size: 1.75rem; color: #6EC1E4; }
.lx-content-md h3 { font-size: 1.3rem; }
.lx-content-md h4 { font-size: 1.08rem; margin-top: 1.4em; }
.lx-content-md h2 a, .lx-content-md h3 a, .lx-content-md h4 a { color: inherit; text-decoration: none; }
.lx-content-md h2 a:hover, .lx-content-md h3 a:hover, .lx-content-md h4 a:hover { text-decoration: underline; }
.lx-content-md a, .lx-collection__intro-md a { color: #336699; }
.lx-content-md blockquote {
    margin: 1.2em 0;
    padding: 14px 20px;
    border-left: 4px solid #6EC1E4;
    background: #f7f9fc;
    color: #34334E;
    font-style: italic;
}
.lx-content-md ul, .lx-content-md ol { padding-left: 1.3em; list-style: disc; }
.lx-content-md ol { list-style: decimal; }
.lx-content-md li { margin: .35em 0; }
.lx-collection__intro-md p { color: #60697b; }

/* Results bar + listing chrome: white and plain (tiles stay the Lexaily tiles, S184) */
.lx-next .lx-resultsbar { background: #ffffff; border: 0; }

/* ==========================================================================
   §200 HOMEPAGE — sites/tsp/templates/landing.php, a structural replica of
   tahoesignatureproperties.com's home: full-bleed hero → Featured Properties
   → Google reviews → "Why Choose" (8 cards) → property-management band →
   "here to help you plan" CTA over their photo → partner logos.
   ========================================================================== */
.tsp-container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.tsp-band { padding: 64px 0; background: #ffffff; }
.tsp-band--tint { background: #f7f9fc; }
.tsp-band__head { text-align: center; margin-bottom: 34px; }
.tsp-band__head h2 { color: #6EC1E4; font-size: 2.3rem; font-weight: 600; margin: 0 0 8px; line-height: 1.2; }
.tsp-band__head p { color: #60697b; max-width: 760px; margin: 0 auto; font-size: 1.05rem; }

/* Hero — their full-bleed photo (self-hosted), white centred type */
.tsp-hero {
    position: relative;
    min-height: 560px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    background: #0c1f41 url("../img/sites/tsp/hero-palisades.webp") center / cover no-repeat;
}
.tsp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, rgba(0, 0, 0, 0.42) 100%);
}
.tsp-hero__inner { position: relative; z-index: 1; padding: 80px 20px; width: 100%; max-width: 900px; overflow-wrap: anywhere; }
.tsp-hero h1 {
    white-space: normal;
    color: #ffffff;
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 600;
    line-height: 1.15;
    margin: 0 0 14px;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}
.tsp-hero h2 {
    white-space: normal;
    color: #ffffff;
    font-size: clamp(1.1rem, 2.2vw, 1.5rem);
    font-weight: 500;
    margin: 0 0 30px;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
.tsp-hero .rr-btn { padding: 15px 34px; }

/* Featured Properties — their 5-up row (title, "N bedrooms | N bathrooms | Sleeps N", Check Availability) */
.tsp-featured { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 22px; }
.tsp-feat {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 26px rgba(3, 57, 121, 0.10);
    display: flex;
    flex-direction: column;
    text-align: center;
}
.tsp-feat__img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #eef3f8; }
.tsp-feat__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.tsp-feat:hover .tsp-feat__img img { transform: scale(1.04); }
.tsp-feat__body { padding: 16px 16px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tsp-feat__body h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: #000000; }
.tsp-feat__body h3 a { color: inherit; text-decoration: none; }
.tsp-feat__meta { margin: 0; color: #60697b; font-size: .9rem; }
.tsp-feat .rr-btn { margin-top: auto; align-self: center; padding: 10px 18px; font-size: 14px; }

/* Google reviews — their slider, as a scroll-snap row of white cards */
.tsp-reviews__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(300px, 1fr);
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    align-items: start;   /* each card sizes to its own review, not the longest one */
    padding: 6px 4px 18px;
    -webkit-overflow-scrolling: touch;
}
.tsp-review {
    scroll-snap-align: start;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 26px rgba(3, 57, 121, 0.08);
    padding: 22px 22px 20px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tsp-review__stars { color: #fbbc05; letter-spacing: 2px; font-size: 1rem; }
.tsp-review p {
    margin: 0;
    color: #34334E;
    line-height: 1.6;
    font-size: .95rem;
    display: -webkit-box;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tsp-review cite { font-style: normal; font-weight: 700; color: #000000; font-size: .9rem; margin-top: auto; }
.tsp-reviews__link { text-align: center; margin: 6px 0 0; }
.tsp-reviews__link a { color: #336699; font-weight: 600; }

/* Why Choose — their two rows of four image cards */
.tsp-why { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; }
.tsp-why__card { text-align: center; }
.tsp-why__card img { width: 100%; aspect-ratio: 400 / 270; object-fit: cover; border-radius: 10px; display: block; margin-bottom: 14px; }
.tsp-why__card h3 { font-size: 1.15rem; font-weight: 700; color: #000000; margin: 0 0 8px; }
.tsp-why__card p { color: #60697b; margin: 0; line-height: 1.6; }

/* Property management — their 2×2 photo collage beside the copy */
.tsp-mgmt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.tsp-mgmt__collage { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tsp-mgmt__collage img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; display: block; }
.tsp-mgmt__collage img:nth-child(2) { margin-top: 28px; }
.tsp-mgmt__collage img:nth-child(3) { margin-top: -28px; }
.tsp-mgmt__copy h2 { color: #000000; font-size: 2rem; font-weight: 600; margin: 0 0 16px; line-height: 1.2; }
.tsp-mgmt__copy p { color: #60697b; line-height: 1.7; margin: 0 0 1em; }
@media (max-width: 860px) { .tsp-mgmt { grid-template-columns: 1fr; } .tsp-mgmt__collage img:nth-child(2), .tsp-mgmt__collage img:nth-child(3) { margin-top: 0; } }

/* "Here to help you plan" — their photo band with a tilted bottom edge */
.tsp-cta {
    position: relative;
    padding: 110px 0;
    text-align: center;
    color: #ffffff;
    background: #0c1f41 url("../img/sites/tsp/cta-bg.jpg") center / cover no-repeat;
}
.tsp-cta::before { content: ""; position: absolute; inset: 0; background: rgba(3, 57, 121, 0.45); }
.tsp-cta .tsp-container { position: relative; z-index: 1; }
.tsp-cta h2 { color: #ffffff; font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 600; margin: 0 auto 26px; max-width: 820px; line-height: 1.25; }

/* Partner / affiliation logos */
.tsp-partners { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px 44px; }
.tsp-partners img { height: 84px; width: auto; opacity: .9; }

/* ==========================================================================
   §200 FOOTER — sites/tsp/templates/chrome-footer.php: their #033979 band,
   four columns (address + phones · Quick Links · Learn More · newsletter),
   social icons, "All Rights Reserved".
   ========================================================================== */
.tsp-footer { background: #033979; color: #CACACA; padding: 70px clamp(16px, 4vw, 48px) 28px; }
.tsp-footer__cols {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 36px;
}
@media (max-width: 960px) { .tsp-footer__cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .tsp-footer__cols { grid-template-columns: 1fr; } }
.tsp-footer__logo { height: 55px; width: auto; max-width: 275px; display: block; margin-bottom: 22px; }
.tsp-footer h2 { color: #ffffff; font-size: 1rem; font-weight: 600; margin: 0 0 12px; letter-spacing: .02em; }
.tsp-footer h4 { color: #ffffff; font-size: .95rem; font-weight: 600; margin: 18px 0 8px; }
.tsp-footer p { color: #CACACA; line-height: 1.7; margin: 0 0 8px; font-size: .92rem; }
.tsp-footer a { color: #CACACA; text-decoration: none; }
.tsp-footer a:hover { color: #ffffff; text-decoration: underline; }
.tsp-footer ul { list-style: none; margin: 0; padding: 0; }
.tsp-footer li { margin: 0 0 7px; font-size: .92rem; }
.tsp-footer__copy { color: #CACACA; font-size: .85rem; margin-top: 22px; }
.tsp-footer__news { display: flex; gap: 8px; margin-top: 14px; }
.tsp-footer__news input {
    flex: 1;
    min-width: 0;
    padding: 11px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font: inherit;
}
.tsp-footer__news input::placeholder { color: rgba(255, 255, 255, 0.6); }
.tsp-footer__news button {
    padding: 11px 18px;
    border: 0;
    border-radius: 8px;
    background: #336699;
    color: #ffffff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.tsp-footer__news button:hover { background: #6EC1E4; color: #033979; }
.tsp-footer__newsmsg { font-size: .85rem; margin-top: 8px; min-height: 1.2em; }
.tsp-footer__bottom {
    max-width: 1180px;
    margin: 44px auto 0;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.tsp-footer__social { display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.tsp-footer__social a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.10);
}
.tsp-footer__social a:hover { background: #336699; text-decoration: none; }
.tsp-footer__social svg { width: 18px; height: 18px; fill: #ffffff; }
.tsp-footer__built { color: rgba(255, 255, 255, 0.55); font-size: .8rem; }
.tsp-footer__built a { color: rgba(255, 255, 255, 0.75); }