/**
 * Simple RMS Theme — Runtime Palette Bridge
 *
 * Bridges the four ACF company_palette_color_* options (emitted as CSS custom
 * properties by inc/acf-theme-options.php via wp_add_inline_style) to the
 * semantic surfaces of the active JBA homepage (header-two + footer-v2 +
 * hero slider + about-us + services-v2 + portfolio-v2 + testimonials-v3 +
 * badges + area-coverage-v1 + seo-content).
 *
 * Design token mapping:
 *   --rms-color-primary        -> body primary text + intentional dark surface backgrounds
 *   --rms-color-accent          -> primary CTAs, buttons, links, accent borders/focus rings
 *   --rms-color-accent-2        -> review stars, secondary highlights (slider subheadline)
 *   --rms-color-surface         -> white/light surfaces and on-dark foreground text
 *   --rms-color-primary-strong  -> derived mid-dark shade (replaces #1e293b-like surfaces)
 *   --rms-color-primary-muted   -> derived lighter neutral (replaces #334155-like body/borders)
 *
 * Derived tokens are computed from primary + surface via color-mix so they
 * track the brand automatically. Fallback hex values (matching the compiled
 * defaults for primary=#0f172a, surface=#fff) are emitted first so browsers
 * without color-mix support still render correctly.
 *
 * Scope rules:
 *   - No !important. Source order wins because this stylesheet loads after the
 *     theme's compiled CSS (enqueued with a dependency on the header handle).
 *   - Selectors are intentionally narrow: they target specific component classes
 *     present on the active homepage so links/buttons elsewhere stay readable.
 *   - Layout, typography, shadows, and transitions are NOT touched here — only
 *     the color/background-color/border-color declarations that map to the palette.
 *   - When all four ACF fields are empty/invalid the inline variables fall back to
 *     the compiled defaults (#0f172a / #2563eb / #f59e0b / #ffffff), so the
 *     existing hardcoded design is preserved byte-for-byte.
 */

/* ─── Derived neutral shades from primary + surface ──────────────────── */
/* Fallbacks match the compiled defaults (primary=#0f172a, surface=#fff):
   strong ~ #1e293b, muted ~ #334155. color-mix overrides when supported. */
:root {
    --rms-color-primary-strong: #1e293b;
    --rms-color-primary-muted:  #334155;
    --rms-color-accent-strong:  #1d4ed8;
}

@supports (color: color-mix(in srgb, #000, #fff)) {
    :root {
        --rms-color-primary-strong: color-mix(in srgb, var(--rms-color-primary), var(--rms-color-surface) 15%);
        --rms-color-primary-muted:  color-mix(in srgb, var(--rms-color-primary), var(--rms-color-surface) 30%);
        --rms-color-accent-strong:  color-mix(in srgb, var(--rms-color-accent) 70%, var(--rms-color-primary) 30%);
    }
}

/* ─── Primary text ──────────────────────────────────────────────────── */
body {
    color: var(--rms-color-primary);
}

/* ─── Intentional dark surfaces (primary background) ─────────────────── */
.footer-v2,
.badges,
.cta-v2,
.area-coverage-v1,
.testimonials-v2 {
    background-color: var(--rms-color-primary);
}

/* Header-two top-bar — was #0f172a. */
.rms-header-v2__top-bar {
    background-color: var(--rms-color-primary);
}

/* Slider bottom shape SVG path — was inline fill #0f172a. The path fill is
   a presentation attribute on the <path> element inside .slider__shape.
   CSS fill on the path overrides the presentation attribute. */
.slider__shape path {
    fill: var(--rms-color-primary);
}

/* Slider dark overlay — was rgba(15,23,42,.75). Derived from primary with
   transparency to preserve the depth/contrast of the hero image. */
.slider__overlay--dark {
    background-color: color-mix(in srgb, var(--rms-color-primary) 75%, transparent);
}

/* CTA-v1 brand gradient — previously used independent blue/slate literals. */
.cta-v1 {
    background-image: linear-gradient(
        135deg,
        var(--rms-color-accent) 0%,
        var(--rms-color-accent-strong) 60%,
        var(--rms-color-primary) 100%
    );
}

/* ─── Accent: primary CTAs, buttons, links, focus ────────────────────── */

/* Header-two top-bar CTA — was amber on dark; now uses the accent token so
   the approved red reads as the primary call-to-action. */
.rms-header-v2__top-bar-right .rms-header-v2__cta-btn {
    color: var(--rms-color-surface);
    background-color: var(--rms-color-accent);
}

/* Footer-v2 CTA strip button — was blue. */
.footer-v2__cta-button {
    color: var(--rms-color-surface);
    background-color: var(--rms-color-accent);
}

/* Shared .btn primary variant — was blue with #1d4ed8 hover. We re-token
   the base + hover so the whole CTA system follows the palette. The hover
   shade stays a literal darkening of the accent for a visible state. */
.btn {
    color: var(--rms-color-surface);
    background-color: var(--rms-color-accent);
    border-color: var(--rms-color-accent);
}

/* Outline button: accent text/border, surface-on-accent hover. */
.btn--outline {
    color: var(--rms-color-accent);
    background-color: transparent;
    border-color: var(--rms-color-accent);
}

.btn--outline:hover {
    color: var(--rms-color-surface);
    background-color: var(--rms-color-accent);
}

/* Focus ring on buttons and social links — was #2563eb. */
.btn:focus-visible,
.footer-v2__logo-placeholder:focus-visible,
.footer-v2__social-link:focus-visible,
.footer-v2__list a:focus-visible {
    outline-color: var(--rms-color-accent);
}

/* Hero form submit (primary CTA inside hero card). */
.hero__form-submit {
    color: var(--rms-color-surface);
    background-color: var(--rms-color-accent);
}

/* Area-coverage radius pill accent border (on dark surface). */
.area-coverage-v1__radius {
    border-color: var(--rms-color-accent);
}

/* Map rings accent stroke. */
.area-coverage-v1__map-ring {
    stroke: var(--rms-color-accent);
}

/* ─── Accent-2: review stars + secondary highlights ─────────────────── */
.testimonials-v1__stars,
.testimonials-v2__stars,
.testimonials-v3__stars,
.hero__reviews-stars {
    color: var(--rms-color-accent-2);
}

/* Slider subheadline (eyebrow on dark hero) — was amber, now accent-2. */
.slider__subheadline {
    color: var(--rms-color-accent-2);
}

/* ─── Surface: white/light surfaces + on-dark foreground ────────────── */

/* Footer-v2 CTA headline and heading text on dark surface — keep #fff
   semantics via the surface token. */
.footer-v2__cta-text,
.footer-v2__heading,
.footer-v2__logo-placeholder {
    color: var(--rms-color-surface);
}

/* Header main bar background (light surface) — was #fff. */
.rms-header-v2__main-bar {
    background-color: var(--rms-color-surface);
}

/* ─── Derived strong shade (#1e293b-like surfaces, nav, quote) ──────── */

/* Footer-v2 CTA strip — was #1e293b background, #334155 bottom border. */
.footer-v2__cta-strip {
    background-color: var(--rms-color-primary-strong);
    border-bottom-color: var(--rms-color-primary-muted);
}

/* Badges icon background — was #1e293b on the dark badges section. */
.badges__icon {
    background-color: var(--rms-color-primary-strong);
}

/* Area-coverage eyebrow pill, radius pill, city pills, map card — were
   #1e293b backgrounds with #334155 borders. */
.area-coverage-v1__eyebrow {
    background-color: var(--rms-color-primary-strong);
    border-color: var(--rms-color-primary-muted);
}

.area-coverage-v1__radius {
    background-color: var(--rms-color-primary-strong);
}

.area-coverage-v1__city {
    background-color: var(--rms-color-primary-strong);
    border-color: var(--rms-color-primary-muted);
}

.area-coverage-v1__map-card {
    background-color: var(--rms-color-primary-strong);
}

.area-coverage-v1__map-card::before,
.area-coverage-v1__map-card::after {
    border-color: var(--rms-color-primary-muted);
}

/* Header-two desktop and mobile nav link text — was #1e293b. */
.rms-header-v2__main-bar .rms-header-v2__nav-link,
.rms-header-v2__mobile-nav-link {
    color: var(--rms-color-primary-strong);
}

/* Header-two mobile menu icon bars — were #1e293b. */
.rms-header-v2__main-bar .rms-header-v2__menu-icon span {
    background-color: var(--rms-color-primary-strong);
}

/* Testimonials-v3 quote text — was #1e293b. */
.testimonials-v3__quote {
    color: var(--rms-color-primary-strong);
}

/* ─── Derived muted shade (#334155-like body copy, borders) ─────────── */

/* SEO-content body text — was #334155. */
.seo-content__text p {
    color: var(--rms-color-primary-muted);
}

/* Footer-v2 copyright border — was #334155. */
.footer-v2__copyright {
    border-top-color: var(--rms-color-primary-muted);
}

/* Footer-v2 social link border — was #334155. */
.footer-v2__social-link {
    border-color: var(--rms-color-primary-muted);
}

/* ─── Primary headings (direct dark, was #0f172a) ───────────────────── */
/* Targeted semantic headline selectors only — not a blanket heading rule. */

.about-us__headline,
.services-v2__headline,
.services-v2__box-title,
.portfolio-v2__headline,
.testimonials-v3__headline,
.testimonials-v3__author,
.seo-content__headline {
    color: var(--rms-color-primary);
}

/* ─── Accent: blue brand details (was #2563eb) ─────────────────────── */

/* About-us subheadline — was #2563eb. */
.about-us__subheadline {
    color: var(--rms-color-accent);
}

/* About-us badge (years experience box) — was #2563eb background. */
.about-us__badge {
    background-color: var(--rms-color-accent);
}

/* Testimonials-v3 decorative quote mark — was #2563eb. */
.testimonials-v3__quote-mark {
    color: var(--rms-color-accent);
}

/* Nav link hover/focus — was #2563eb. */
.rms-header-v2__main-bar .rms-header-v2__nav-link:hover,
.rms-header-v2__main-bar .rms-header-v2__nav-link:focus,
.rms-header-v2__mobile-nav-link:hover,
.rms-header-v2__mobile-nav-link:focus {
    color: var(--rms-color-accent);
}

/* Nav link focus-visible outline — was #2563eb. */
.rms-header-v2__main-bar .rms-header-v2__nav-link:focus-visible,
.rms-header-v2__mobile-nav-link:focus-visible {
    outline-color: var(--rms-color-accent);
}

/* Area-coverage city hover border — was #2563eb. */
.area-coverage-v1__city:hover {
    border-color: var(--rms-color-accent);
}

/* ─── On-dark text readability (surface token) ──────────────────────── */
/* Ensure text on the derived strong surfaces stays readable. */

/* Area-coverage eyebrow text on strong pill — keep light. */
.area-coverage-v1__eyebrow {
    color: var(--rms-color-surface);
}

/* Badges icon text — was #fff, keep readable on strong background. */
.badges__icon {
    color: var(--rms-color-surface);
}

/* Area-coverage city text — keep light on strong pill. */
.area-coverage-v1__city {
    color: var(--rms-color-surface);
}

/* Area-coverage city hover text — keep light. */
.area-coverage-v1__city:hover {
    color: var(--rms-color-surface);
}