/* Brand tokens, btn-style-two fix, ::selection, dark mode. Loads after style.css. v3 */

:root {
    --rt-orange: #F7931E; --rt-orange-dark: #e07f0a;
    --rt-navy: #23343C; --rt-blue: #2DB5D6; --rt-blue-dark: #1F8FAF;
    --rt-bg: #fff; --rt-bg-alt: #f5f5f0; --rt-bg-card: #fff;
    --rt-text: #23343C; --rt-text-muted: #666; --rt-border: #ece9e4;
}

.btn-style-two { color: var(--rt-blue); border-color: var(--rt-blue); background-color: transparent; }
.btn-style-two .btn-title { color: var(--rt-blue); }
.btn-style-two:hover { color: #fff; background-color: var(--rt-blue); border-color: var(--rt-blue); }
.btn-style-two:hover .btn-title { color: #fff; }

.on-dark .btn-style-two, .video-hero .btn-style-two,
.banner-section .btn-style-two, .page-banner .btn-style-two {
    color: #fff; border-color: #fff;
}
.on-dark .btn-style-two .btn-title, .video-hero .btn-style-two .btn-title,
.banner-section .btn-style-two .btn-title, .page-banner .btn-style-two .btn-title { color: #fff; }
.on-dark .btn-style-two:hover, .video-hero .btn-style-two:hover,
.banner-section .btn-style-two:hover, .page-banner .btn-style-two:hover {
    color: var(--rt-navy); background-color: #fff;
}
.on-dark .btn-style-two:hover .btn-title, .video-hero .btn-style-two:hover .btn-title,
.banner-section .btn-style-two:hover .btn-title, .page-banner .btn-style-two:hover .btn-title {
    color: var(--rt-navy);
}

.main-footer a[href^="tel:"], .main-footer a[href^="mailto:"] { color: var(--rt-blue); }
.main-footer a[href^="tel:"]:hover, .main-footer a[href^="mailto:"]:hover { color: var(--rt-blue-dark); }

::selection { background-color: var(--rt-orange); color: #fff; }
::-moz-selection { background-color: var(--rt-orange); color: #fff; }

@media (prefers-color-scheme: dark) {
    :root {
        --rt-bg: #0d1117; --rt-bg-alt: #161b22; --rt-bg-card: #1c2127;
        --rt-text: #e6edf3; --rt-text-muted: #94a3b8; --rt-border: #30363d;
    }

    html, body { background-color: var(--rt-bg) !important; color: var(--rt-text); }
    body, p, li, td, th, dd, dt { color: var(--rt-text); }
    h1, h2, h3, h4, h5, h6 { color: var(--rt-text); }

    section[style*="background:#fff"], section[style*="background: #fff"],
    section[style*="background:#FFFFFF"], section[style*="background: #FFFFFF"] {
        background-color: var(--rt-bg) !important;
    }
    section[style*="background:#f5"], section[style*="background: #f5"],
    section[style*="background:#f7"], section[style*="background: #f7"],
    section[style*="background:#f8"], section[style*="background: #f8"] {
        background-color: var(--rt-bg-alt) !important;
    }
    div[style*="background:#fff"][style*="border-radius"],
    div[style*="background: #fff"][style*="border-radius"],
    div[style*="background:#fff"][style*="padding"],
    div[style*="background: #fff"][style*="padding"],
    /* When JS hover handlers touch any style.* property, the browser re-serializes
       the entire inline style and converts #fff to rgb(255, 255, 255). The selector
       above loses the match. Catch the rgb() form too. */
    div[style*="background: rgb(255, 255, 255)"][style*="border-radius"],
    div[style*="background: rgb(255, 255, 255)"][style*="padding"] {
        background-color: var(--rt-bg-card) !important; color: var(--rt-text);
    }

    .top-sections, .recent-blog, .service-areas, .testimonials-section,
    .service-detail-section, .quote-section, .ba-section {
        background-color: var(--rt-bg) !important;
    }

    /* Inline color overrides — handle BOTH "color:#X" and "color: #X" spacing */
    [style*="color:#23343C"], [style*="color: #23343C"],
    [style*="color:#222"], [style*="color: #222"],
    [style*="color:#23343c"], [style*="color: #23343c"] {
        color: var(--rt-text) !important;
    }
    [style*="color:#444"], [style*="color: #444"],
    [style*="color:#555"], [style*="color: #555"],
    [style*="color:#666"], [style*="color: #666"],
    [style*="color:#777"], [style*="color: #777"],
    [style*="color:#888"], [style*="color: #888"] {
        color: var(--rt-text-muted) !important;
    }

    .sec-title h2, .sec-title.text-center h2, .sec-title.light h2,
    .about-section .sec-title h2, .about-section-two .sec-title h2 {
        color: var(--rt-text) !important;
    }
    .sec-title .text, .sec-title.light .text { color: var(--rt-text-muted) !important; }

    .service-detail .content-box, .service-detail .content-box p,
    .service-detail .content-box h2, .service-detail .content-box h3,
    .service-detail .content-box h4, .service-detail .content-box li,
    .project-detail .content-box, .project-detail .content-box p,
    .project-detail .content-box h2, .project-detail .content-box h3,
    .project-detail .content-box h4,
    .about-section, .about-section .text, .about-section p,
    .about-section h2, .about-section h3,
    .blog-detail, .blog-detail p, .blog-detail h2, .blog-detail h3, .blog-detail h4,
    .blog-detail .content, .blog-detail .content p {
        color: var(--rt-text) !important;
    }
    .auto-container p { color: var(--rt-text); }

    .testimonials-section h2, .testimonials-section p, .testimonials-section blockquote,
    .recent-blog h2, .recent-blog h3, .recent-blog p,
    .news-block h3, .news-block .text, .news-block p,
    .service-block-three h3, .service-block-three .text,
    .feature-block h3, .feature-block .text,
    .quote-section h2, .quote-section p,
    .why-choose-us h2, .why-choose-us p, .why-choose-us .text,
    .why-chosse-us h2, .why-chosse-us h5, .why-chosse-us p, .why-chosse-us .text,
    .why-chosse-us .features-list li h5, .why-chosse-us .features-list li .text,
    .top-sections h2, .top-sections p,
    .service-areas h2, .service-areas h3, .service-areas p,
    .ba-section h2, .ba-section p {
        color: var(--rt-text) !important;
    }

    /* Page-prefix catch-all (tr-, hddnv-, aur-, len-lyall-, etc.) */
    [class*="-text"] h1, [class*="-text"] h2, [class*="-text"] h3,
    [class*="-text"] h4, [class*="-text"] p, [class*="-text"] li,
    [class*="-card"] h2, [class*="-card"] h3, [class*="-card"] h4,
    [class*="-card"] p, [class*="-card"] li,
    [class*="-categories"] h2, [class*="-categories"] h3, [class*="-categories"] p,
    [class*="-cherry"] h2, [class*="-cherry"] h3, [class*="-cherry"] p,
    [class*="-perform"] h2, [class*="-perform"] h3, [class*="-perform"] p,
    [class*="-fitcheck"] h2, [class*="-fitcheck"] h3, [class*="-fitcheck"] p,
    [class*="-fitcheck"] li,
    [class*="-faq"] h2, [class*="-faq"] h3, [class*="-faq"] p,
    [class*="-cta"] h2, [class*="-cta"] h3, [class*="-cta"] p,
    [class*="-spec"] strong, [class*="-cat-spec"] li,
    [class*="-confidence"] h2, [class*="-confidence"] p,
    [class*="-values"] h2, [class*="-values"] p,
    [class*="-area-card"] h3, [class*="-area-card"] p,
    [class*="-gallery"] h2, [class*="-gallery"] p,
    [class*="-about"] h2, [class*="-about"] h3, [class*="-about"] p {
        color: var(--rt-text) !important;
    }

    [class$="-about"]:not(.about-section):not(.about-section-two),
    /* Anchor these to <section> elements only. The bare `[class$="-cta"]` form
       previously also matched `.sticky-header-cta` (the header CTA wrapper),
       painting a dark rectangle around the orange Instant Estimate pill in the
       sticky header. Page-prefix CTA bands always live on a <section>. */
    section[class$="-cherry"], section[class$="-perform"], section[class$="-fitcheck"],
    section[class$="-categories"], section[class$="-faq"], section[class$="-cta"] {
        background-color: var(--rt-bg) !important;
    }

    [class*="-cat-card"], [class*="-perform-card"], [class*="-fitcheck-col"] {
        background-color: var(--rt-bg-card) !important;
        border-color: var(--rt-border) !important;
    }

    [class*="-eyebrow"], [class*="-cat-tag"] { color: var(--rt-orange) !important; }

    div[style*="border:1px solid #ece9e4"],
    section[style*="border-top:1px solid #ece9e4"],
    section[style*="border-bottom:1px solid #ece9e4"] {
        border-color: var(--rt-border) !important;
    }

    .home-reviews-badge {
        background-color: var(--rt-bg-card) !important;
        border-color: var(--rt-border) !important; color: var(--rt-text);
    }
    .service-areas a[style*="background: #fff"],
    .service-areas a[style*="background:#fff"],
    /* JS-hover-normalized form: when JS touches style.borderColor, the browser
       re-serializes the entire style attribute and converts #fff -> rgb(255, 255, 255).
       Without this fallback the cards revert to white during/after hover. */
    .service-areas a[style*="background: rgb(255, 255, 255)"] {
        background-color: var(--rt-bg-card) !important;
        color: var(--rt-text) !important;
        /* No `border-color: ... !important` here — that would override the
           inline `borderColor='#F7931E'` that the onmouseover handler sets,
           killing the orange hover effect. The default border from the inline
           style (#e5e5e5) is fine in dark mode and JS-orange-on-hover wins. */
    }

    .main-header, .header-top, .header-upper { background-color: var(--rt-navy); }
    .fixed-header .sticky-header { background-color: var(--rt-navy) !important; }
    .main-footer { background-color: #07090c !important; }

    input[type="text"], input[type="email"], input[type="tel"],
    input[type="url"], input[type="number"], textarea, select {
        background-color: var(--rt-bg-card) !important;
        border-color: var(--rt-border) !important; color: var(--rt-text) !important;
    }
    input::placeholder, textarea::placeholder { color: var(--rt-text-muted) !important; }

    img[src$=".png"]:not([src*="logo"]):not([src*="hero"]) { filter: brightness(0.92); }
    /* v3 additions - card tags beyond <div>, form panels, testimonial classes */
    article[style*="background:#fff"], article[style*="background: #fff"],
    aside[style*="background:#fff"], aside[style*="background: #fff"],
    /* JS-hover-normalized form (see comment under div selectors above) */
    article[style*="background: rgb(255, 255, 255)"],
    aside[style*="background: rgb(255, 255, 255)"] {
        background-color: var(--rt-bg-card) !important; color: var(--rt-text);
    }

    .request-form, .contact-form {
        background-color: var(--rt-bg-card) !important;
        box-shadow: 0 8px 28px rgba(0,0,0,0.45) !important;
    }
    .request-form .sec-title h2, .request-form .sec-title .title,
    .contact-form .sec-title h2, .contact-form .sec-title .title { color: var(--rt-text) !important; }

    .testimonial-block .text,
    .testimonial-block .inner-box h3,
    .testimonial-block .designation,
    .testimonial-block-two .text,
    .testimonial-block-two .info-box .name,
    .testimonial-block-two .info-box .designation { color: var(--rt-text) !important; }
    .testimonial-block .designation,
    .testimonial-block-two .info-box .designation { color: var(--rt-text-muted) !important; }

    /* recent-blog article links — title link inherits #23343C inline. Already caught
       by the spaced-color override, but force here for safety. */
    .recent-blog article a[style*="color:#23343C"],
    .recent-blog article a[style*="color: #23343C"] { color: var(--rt-text) !important; }

    /* "Read All Reviews" anchor in home-reviews-badge */
    .home-reviews-badge a[style*="color:#23343C"],
    .home-reviews-badge a[style*="color: #23343C"] { color: var(--rt-text) !important; }

    /* Reviews badge separator divider - dim line color */
    .home-reviews-badge div[style*="background:#ece9e4"],
    .home-reviews-badge div[style*="background: #ece9e4"] { background-color: var(--rt-border) !important; }

    /* v3.1 — class-based light-bg sections on city pages.
       The 40+ city pages each have a per-page-prefix CSS like:
           .csp-values-section { background: #f8f7f5; ... }
       The earlier inline-style attribute selectors (e.g. section[style*="background:#f8"])
       only catch INLINE backgrounds, not class-rule ones. So these sections stayed
       light-cream while the dark-mode catch-all inverted their text to light — yielding
       light text on light bg = invisible. Override the class-rule bg here.
       Pattern matches city pages (PREFIX-values-section, etc.) and class-4-shingles-*. */
    [class$="-values-section"],
    [class$="-areas-section"],
    [class$="-gallery-section"],
    [class$="-cta-section"],
    [class$="-faq-section"],
    [class$="-map-section"],
    [class$="-contact-section"],
    [class$="-solar-section"] {
        background-color: var(--rt-bg-alt) !important;
    }
    /* Dividers inside those sections (border-bottom: 1px solid #ece9e4) */
    [class$="-values-section"] li,
    [class$="-areas-section"] li,
    [class$="-gallery-section"] li {
        border-color: var(--rt-border) !important;
    }
    /* Links/cards INSIDE those sections that use light bg */
    [class$="-values-section"] a[style*="background: #fff"],
    [class$="-values-section"] a[style*="background:#fff"],
    [class$="-areas-section"] a[style*="background: #fff"],
    [class$="-areas-section"] a[style*="background:#fff"],
    [class$="-gallery-section"] a[style*="background: #fff"],
    [class$="-gallery-section"] a[style*="background:#fff"] {
        background-color: var(--rt-bg-card) !important;
        color: var(--rt-text) !important;
    }

    /* v3.2 — additional class-based light-bg containers on city pages.
       Each city has a `*-partners` (Trusted Brands & Certifications), a
       `*-reviews-strip` (4.9/5 + Read Our Reviews), and small badges/tiles
       (`*-partner-badge`, `*-platform-badge`, `*-area-tile`). All are uniform
       across cities so suffix selectors catch them. Without these, the white
       bg + text-color-inverted rules combine to make the section unreadable. */
    [class$="-partners"],
    [class$="-reviews-strip"] {
        background-color: var(--rt-bg-alt) !important;
        border-color: var(--rt-border) !important;
    }
    [class$="-partner-badge"],
    [class$="-platform-badge"],
    [class$="-area-tile"] {
        background-color: var(--rt-bg-card) !important;
        border-color: var(--rt-border) !important;
        color: var(--rt-text) !important;
    }
    /* The eyebrow text inside these sections defaults to #bbb / #888 /
       similar light grays. Force a brighter readable color on dark bg. */
    [class$="-partners"] [class$="-partners-label"],
    [class$="-reviews-strip"] [class$="-reviews-eyebrow"],
    [class$="-reviews-strip"] [class*="-reviews-"] {
        color: var(--rt-text-muted) !important;
    }

    /* v3.3 — broader text-color contrast. The earlier inline-color overrides
       only catch a handful of colors (#23343C, #222, #444-#888). Pages also
       use #000, #111, #1a1a1a, #2c2c2c, #333, #3a3a3a as primary text and
       #999, #aaa, #bbb, #ccc as secondary/muted. Without these, text styled
       via inline `color:#1a1a1a` (common on city-page cards) stays nearly
       black on the dark bg = invisible. */
    [style*="color:#000"], [style*="color: #000"],
    [style*="color:#111"], [style*="color: #111"],
    [style*="color:#1a1a1a"], [style*="color: #1a1a1a"],
    [style*="color:#1a1a"], [style*="color: #1a1a"],
    [style*="color:#222"], [style*="color: #222"],
    [style*="color:#2c2c2c"], [style*="color: #2c2c2c"],
    [style*="color:#333"], [style*="color: #333"],
    [style*="color:#3a3a3a"], [style*="color: #3a3a3a"],
    [style*="color:rgb(0, 0, 0)"], [style*="color: rgb(0, 0, 0)"],
    [style*="color:rgb(35, 52, 60)"], [style*="color: rgb(35, 52, 60)"] {
        color: var(--rt-text) !important;
    }
    [style*="color:#999"], [style*="color: #999"],
    [style*="color:#aaa"], [style*="color: #aaa"],
    [style*="color:#bbb"], [style*="color: #bbb"],
    [style*="color:#ccc"], [style*="color: #ccc"] {
        color: var(--rt-text-muted) !important;
    }

    /* Force readable text on every descendant of city-page panels.
       The page-prefix class (csp-, hddnv-, aur-, etc.) carries a
       `background: #fff` or `#f8f7f5` rule and dark inline text on
       its children. The bg gets inverted by our earlier rules but
       deeply nested <strong>/<span>/<em>/<small>/<a> often inherit
       `#23343C` from a class rule we don't catch. Anchor on the
       suffix-selector backgrounds we already handle and force ALL
       descendant text to inherit the inverted text color. */
    [class$="-values-section"] *:not(svg):not(path),
    [class$="-areas-section"] *:not(svg):not(path),
    [class$="-gallery-section"] *:not(svg):not(path),
    [class$="-cta-section"] *:not(svg):not(path),
    [class$="-faq-section"] *:not(svg):not(path),
    [class$="-map-section"] *:not(svg):not(path),
    [class$="-contact-section"] *:not(svg):not(path),
    [class$="-solar-section"] *:not(svg):not(path),
    [class$="-partners"] *:not(svg):not(path),
    [class$="-reviews-strip"] *:not(svg):not(path),
    [class$="-partner-badge"] *:not(svg):not(path),
    [class$="-platform-badge"] *:not(svg):not(path),
    [class$="-area-tile"] *:not(svg):not(path) {
        color: inherit;
    }

    /* Force the container itself to set a readable color so the
       `inherit` above lands on a known good value rather than #000. */
    [class$="-values-section"],
    [class$="-areas-section"],
    [class$="-gallery-section"],
    [class$="-cta-section"],
    [class$="-faq-section"],
    [class$="-map-section"],
    [class$="-contact-section"],
    [class$="-solar-section"],
    [class$="-partners"],
    [class$="-reviews-strip"] {
        color: var(--rt-text) !important;
    }

    /* Page-prefix card panels (any element ending -card, -panel, -tile,
       -col, -box, -strip, -row, -block) should keep readable text once
       the bg is inverted. We don't blanket [class$="-card"] because the
       theme already uses .recent-blog .news-block etc. — restrict to the
       page-prefix forms, identified by a lowercase letter+dash before. */
    [class*="-cat-card"],
    [class*="-perform-card"],
    [class*="-fitcheck-col"],
    [class*="-area-card"],
    [class*="-area-tile"],
    [class*="-spec-card"],
    [class*="-info-card"],
    [class*="-cherry-card"],
    [class*="-perf-card"],
    [class*="-feature-card"],
    [class*="-confidence-card"],
    [class*="-values-card"],
    [class*="-cta-card"] {
        color: var(--rt-text) !important;
    }
    [class*="-cat-card"] *,
    [class*="-perform-card"] *,
    [class*="-fitcheck-col"] *,
    [class*="-area-card"] *,
    [class*="-spec-card"] *,
    [class*="-info-card"] *,
    [class*="-cherry-card"] *,
    [class*="-perf-card"] *,
    [class*="-feature-card"] *,
    [class*="-confidence-card"] *,
    [class*="-values-card"] *,
    [class*="-cta-card"] * {
        color: inherit;
    }
    /* But oranges/blues that came from explicit accent classes should win.
       Leave any element that EXPLICITLY sets its own color (via inline
       style or .text-orange / .text-blue / .accent class) alone — these
       selectors only target elements without their own color spec because
       they inherit. Accent-colored eyebrows below remain orange via the
       earlier `[class*="-eyebrow"], [class*="-cat-tag"]` rule. */

    /* Selection contrast on dark bg: the v1 rule sets bg-orange + #fff
       which works. But several city-page sections set ::selection at
       the section level via inline style="user-select:..." — clear any
       light-bg selection so highlighted text is visible. */
    *::selection { background-color: var(--rt-orange) !important; color: #fff !important; }
}