/* ============================================================
   Theme system — public site
   ------------------------------------------------------------
   Each theme defines BOTH:
     1. Legacy tokens (--c-bg, --c-text, …) used by the 852-line
        site.css and inline component styles.
     2. Semantic tokens (--bg-primary, --text-primary, …) for
        new and refactored code.
   The default theme is also declared on :root so the site renders
   correctly before JS or attribute resolution.

   Tokens defined per theme:
     --c-bg            page background
     --c-bg-soft       slightly inset background (alt sections)
     --c-panel         card / panel background
     --c-panel-2       inset surface within a panel
     --c-line          1px hairlines / borders
     --c-text          body text
     --c-muted         secondary text
     --c-faint         tertiary / disabled text
     --c-brand         brand primary
     --c-brand-2       brand highlight
     --c-accent        accent (CTAs, dividers)
     --c-accent-hover  accent on hover/focus
     --c-danger        error / venomous
     --c-warn          warning / seasonal alert
     --c-success       success / confirmation
     --c-overlay       hero/card overlay
     --c-shadow        long shadow color

   Semantic aliases (preferred for new code):
     --bg-primary, --bg-secondary, --text-primary, --text-muted,
     --accent, --accent-hover, --card-bg, --border-color,
     --success, --warning, --danger
   ============================================================ */

/* ----- Default = Light Professional ----- */
:root,
[data-theme="light-professional"] {
    --c-bg:           #f7f9f6;
    --c-bg-soft:      #ffffff;
    --c-panel:        #ffffff;
    --c-panel-2:      #f0f3ee;
    --c-line:         #dde2dd;
    --c-text:         #16201a;
    --c-muted:        #4d564f;
    --c-faint:        #76807a;
    --c-brand:        #1f6f3c;
    --c-brand-2:      #2dba63;
    --c-accent:       #8a6212;
    --c-accent-hover: #1f6f3c;
    --c-danger:       #a52a1a;
    --c-warn:         #b06a00;
    --c-success:      #186a37;
    --c-overlay:      rgba(20, 28, 22, 0.55);
    --c-shadow:       rgba(20, 28, 22, 0.12);

    --bg-primary:     var(--c-bg);
    --bg-secondary:   var(--c-panel-2);
    --text-primary:   var(--c-text);
    --text-muted:     var(--c-muted);
    --accent:         var(--c-accent);
    --accent-hover:   var(--c-accent-hover);
    --card-bg:        var(--c-panel);
    --border-color:   var(--c-line);
    --success:        var(--c-success);
    --warning:        var(--c-warn);
    --danger:         var(--c-danger);

    /* Chrome — topbar / nav / hero — light, premium, daylight. */
    --topbar-bg:           #eef1ec;
    --topbar-text:         #3a443d;
    --topbar-strong:       #14201a;
    --topbar-border:       rgba(20, 28, 22, 0.08);
    --nav-bg:              rgba(255, 255, 255, 0.86);
    --nav-bg-scrolled:     rgba(255, 255, 255, 0.97);
    --nav-border:          rgba(20, 28, 22, 0.08);
    --nav-shadow:          0 8px 22px rgba(20, 28, 22, 0.08);
    --nav-link-color:      #14201a;
    --nav-link-hover-bg:   rgba(31, 111, 60, 0.08);
    --nav-link-hover-text: #1f6f3c;
    --brand-glow:          drop-shadow(0 4px 14px rgba(31, 111, 60, 0.15));

    /* Hero — soft daylight wash, image-forward, dark headline. */
    --hero-veil:
        linear-gradient(180deg, rgba(247,249,246,0.10) 0%, rgba(247,249,246,0.32) 55%, rgba(247,249,246,0.78) 100%),
        linear-gradient(90deg, rgba(247,249,246,0.55) 0%, rgba(247,249,246,0.15) 45%, rgba(247,249,246,0.05) 100%);
    --hero-glow:
        radial-gradient(48% 60% at 14% 35%, rgba(255,255,255,0.45), transparent 65%),
        radial-gradient(40% 55% at 88% 70%, rgba(31,111,60,0.08), transparent 70%);
    --hero-text:           #14201a;
    --hero-text-emphasis:  rgba(20, 28, 22, 0.10);
    --hero-lead-text:      #2a3530;
    --hero-eyebrow-text:   #1f6f3c;

    /* Google rating badge — solid pill on light. */
    --gbadge-bg:           rgba(255, 255, 255, 0.92);
    --gbadge-bg-hover:     #ffffff;
    --gbadge-border:       rgba(20, 28, 22, 0.14);
    --gbadge-text:         #14201a;
    --gbadge-text-muted:   #4d564f;

    /* Footer — slight inset of body bg, dark-on-light, premium feel. */
    --footer-bg:           #1a2520;
    --footer-text:         #d6dcd6;
    --footer-link:         #b5beb6;
    --footer-border:       rgba(20, 28, 22, 0.12);

    /* Subtle photographic polish — improves perceived premium feel
       without trying to fix bad photography. */
    --hero-slide-filter:   saturate(1.04) contrast(1.02);

    /* Trust pills under the hero CTAs — readable on any photo. */
    --hero-trust-text:         #14201a;
    --hero-trust-pill-bg:      rgba(255, 255, 255, 0.86);
    --hero-trust-pill-border:  rgba(20, 28, 22, 0.10);
    --hero-trust-check-text:   #ffffff;

    /* Hero contact card — light glass, dark text, premium feel. */
    --hero-card-bg:            linear-gradient(160deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.78) 100%);
    --hero-card-text:          #14201a;
    --hero-card-text-muted:    #4d564f;
    --hero-card-border:        rgba(20, 28, 22, 0.12);
    --hero-card-divider:       rgba(20, 28, 22, 0.10);
    --hero-card-shadow:        0 18px 50px rgba(20, 28, 22, 0.18);
    --hero-card-ring:          rgba(31, 111, 60, 0.10);
    --hero-card-logo-bg:       rgba(20, 28, 22, 0.04);
    --hero-card-phone:         #1f6f3c;

    color-scheme: light;
}

/* ----- Dark Tactical (matches legacy look) ----- */
[data-theme="dark-tactical"] {
    --c-bg:           #0d0f0e;
    --c-bg-soft:      #131816;
    --c-panel:        #181d1b;
    --c-panel-2:      #1f2522;
    --c-line:         #2a312d;
    --c-text:         #e8ece9;
    --c-muted:        #9aa39c;
    --c-faint:        #6c7670;
    --c-brand:        #1f6f3c;
    --c-brand-2:      #2dba63;
    --c-accent:       #c9a24a;
    --c-accent-hover: #f3c66a;
    --c-danger:       #ef7269;
    --c-warn:         #f0c344;
    --c-success:      #2dba63;
    --c-overlay:      rgba(0, 0, 0, 0.6);
    --c-shadow:       rgba(0, 0, 0, 0.5);

    --bg-primary:     var(--c-bg);
    --bg-secondary:   var(--c-panel-2);
    --text-primary:   var(--c-text);
    --text-muted:     var(--c-muted);
    --accent:         var(--c-accent);
    --accent-hover:   var(--c-accent-hover);
    --card-bg:        var(--c-panel);
    --border-color:   var(--c-line);
    --success:        var(--c-success);
    --warning:        var(--c-warn);
    --danger:         var(--c-danger);

    --topbar-bg:           #0a0c0b;
    --topbar-text:         #9aa39c;
    --topbar-strong:       #e8ece9;
    --topbar-border:       #2a312d;
    --nav-bg:              rgba(8, 10, 9, 0.55);
    --nav-bg-scrolled:     rgba(8, 10, 9, 0.92);
    --nav-border:          rgba(255, 255, 255, 0.06);
    --nav-shadow:          0 10px 30px rgba(0, 0, 0, 0.35);
    --nav-link-color:      #e8ece9;
    --nav-link-hover-bg:   rgba(45, 186, 99, 0.06);
    --nav-link-hover-text: #2dba63;
    --brand-glow:          drop-shadow(0 4px 14px rgba(45, 186, 99, 0.25));

    --hero-veil:
        linear-gradient(180deg, rgba(8,10,9,0.55) 0%, rgba(8,10,9,0.72) 40%, rgba(8,10,9,0.92) 100%),
        linear-gradient(90deg, rgba(8,10,9,0.65) 0%, rgba(8,10,9,0.20) 50%, rgba(8,10,9,0.55) 100%);
    --hero-glow:
        radial-gradient(50% 70% at 12% 30%, rgba(45,186,99,0.22), transparent 60%),
        radial-gradient(40% 60% at 90% 70%, rgba(201,162,74,0.18), transparent 65%);
    --hero-text:           #ffffff;
    --hero-text-emphasis:  rgba(255, 255, 255, 0.10);
    --hero-lead-text:      #d8ddd9;
    --hero-eyebrow-text:   #6cd685;

    --gbadge-bg:           linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
    --gbadge-bg-hover:     rgba(255, 255, 255, 0.08);
    --gbadge-border:       rgba(255, 255, 255, 0.14);
    --gbadge-text:         #ffffff;
    --gbadge-text-muted:   rgba(255, 255, 255, 0.75);

    --footer-bg:           #0a0c0b;
    --footer-text:         #e8ece9;
    --footer-link:         #9aa39c;
    --footer-border:       #2a312d;

    --hero-trust-text:         #e8ece9;
    --hero-trust-pill-bg:      transparent;
    --hero-trust-pill-border:  transparent;
    --hero-trust-check-text:   #ffffff;

    --hero-card-bg:            linear-gradient(160deg, rgba(20,28,24,0.78) 0%, rgba(20,28,24,0.55) 100%);
    --hero-card-text:          #ffffff;
    --hero-card-text-muted:    rgba(255, 255, 255, 0.72);
    --hero-card-border:        rgba(255, 255, 255, 0.12);
    --hero-card-divider:       rgba(255, 255, 255, 0.08);
    --hero-card-shadow:        0 24px 60px rgba(0, 0, 0, 0.5);
    --hero-card-ring:          rgba(45, 186, 99, 0.08);
    --hero-card-logo-bg:       rgba(255, 255, 255, 0.04);
    --hero-card-phone:         #2dba63;

    color-scheme: dark;
}

/* ----- Earth / Natural (warm cream + forest) ----- */
[data-theme="earth-natural"] {
    --c-bg:           #f3eee2;
    --c-bg-soft:      #faf6ec;
    --c-panel:        #fbf7ed;
    --c-panel-2:      #ece4d0;
    --c-line:         #d8cdb3;
    --c-text:         #2b2418;
    --c-muted:        #5b5141;
    --c-faint:        #847a68;
    --c-brand:        #355c2a;
    --c-brand-2:      #4f8e3d;
    --c-accent:       #8a4a16;
    --c-accent-hover: #355c2a;
    --c-danger:       #963718;
    --c-warn:         #8a5a00;
    --c-success:      #355c2a;
    --c-overlay:      rgba(43, 36, 24, 0.55);
    --c-shadow:       rgba(43, 36, 24, 0.18);

    --bg-primary:     var(--c-bg);
    --bg-secondary:   var(--c-panel-2);
    --text-primary:   var(--c-text);
    --text-muted:     var(--c-muted);
    --accent:         var(--c-accent);
    --accent-hover:   var(--c-accent-hover);
    --card-bg:        var(--c-panel);
    --border-color:   var(--c-line);
    --success:        var(--c-success);
    --warning:        var(--c-warn);
    --danger:         var(--c-danger);

    --topbar-bg:           #e7dcc2;
    --topbar-text:         #5b5141;
    --topbar-strong:       #2b2418;
    --topbar-border:       rgba(43, 36, 24, 0.10);
    --nav-bg:              rgba(251, 247, 237, 0.86);
    --nav-bg-scrolled:     rgba(251, 247, 237, 0.97);
    --nav-border:          rgba(43, 36, 24, 0.10);
    --nav-shadow:          0 8px 22px rgba(43, 36, 24, 0.12);
    --nav-link-color:      #2b2418;
    --nav-link-hover-bg:   rgba(53, 92, 42, 0.10);
    --nav-link-hover-text: #355c2a;
    --brand-glow:          drop-shadow(0 4px 14px rgba(53, 92, 42, 0.18));

    --hero-veil:
        linear-gradient(180deg, rgba(243,238,226,0.12) 0%, rgba(243,238,226,0.36) 55%, rgba(243,238,226,0.82) 100%),
        linear-gradient(90deg, rgba(243,238,226,0.58) 0%, rgba(243,238,226,0.18) 50%, rgba(243,238,226,0.08) 100%);
    --hero-glow:
        radial-gradient(48% 60% at 14% 35%, rgba(255,247,232,0.45), transparent 65%),
        radial-gradient(40% 55% at 88% 70%, rgba(53,92,42,0.08), transparent 70%);
    --hero-text:           #2b2418;
    --hero-text-emphasis:  rgba(43, 36, 24, 0.10);
    --hero-lead-text:      #4a3f2b;
    --hero-eyebrow-text:   #355c2a;

    --gbadge-bg:           rgba(251, 247, 237, 0.92);
    --gbadge-bg-hover:     #fbf7ed;
    --gbadge-border:       rgba(43, 36, 24, 0.16);
    --gbadge-text:         #2b2418;
    --gbadge-text-muted:   #5b5141;

    --footer-bg:           #2b2418;
    --footer-text:         #ece4d0;
    --footer-link:         #c8be9f;
    --footer-border:       rgba(43, 36, 24, 0.20);

    --hero-slide-filter:   saturate(1.06) contrast(1.02) sepia(0.04);

    --hero-trust-text:         #2b2418;
    --hero-trust-pill-bg:      rgba(251, 247, 237, 0.88);
    --hero-trust-pill-border:  rgba(43, 36, 24, 0.12);
    --hero-trust-check-text:   #fbf7ed;

    --hero-card-bg:            linear-gradient(160deg, rgba(251,247,237,0.94) 0%, rgba(251,247,237,0.80) 100%);
    --hero-card-text:          #2b2418;
    --hero-card-text-muted:    #5b5141;
    --hero-card-border:        rgba(43, 36, 24, 0.14);
    --hero-card-divider:       rgba(43, 36, 24, 0.12);
    --hero-card-shadow:        0 18px 50px rgba(43, 36, 24, 0.20);
    --hero-card-ring:          rgba(53, 92, 42, 0.10);
    --hero-card-logo-bg:       rgba(43, 36, 24, 0.04);
    --hero-card-phone:         #355c2a;

    color-scheme: light;
}

/* ----- High Contrast Accessibility (AAA-grade) ----- */
[data-theme="high-contrast"] {
    --c-bg:           #ffffff;
    --c-bg-soft:      #ffffff;
    --c-panel:        #ffffff;
    --c-panel-2:      #f2f2f2;
    --c-line:         #000000;
    --c-text:         #000000;
    --c-muted:        #1a1a1a;
    --c-faint:        #333333;
    --c-brand:        #004d20;
    --c-brand-2:      #006e2e;
    --c-accent:       #6a3d00;
    --c-accent-hover: #004d20;
    --c-danger:       #8a0000;
    --c-warn:         #5a3a00;
    --c-success:      #004d20;
    --c-overlay:      rgba(0, 0, 0, 0.7);
    --c-shadow:       rgba(0, 0, 0, 0.4);

    --bg-primary:     var(--c-bg);
    --bg-secondary:   var(--c-panel-2);
    --text-primary:   var(--c-text);
    --text-muted:     var(--c-muted);
    --accent:         var(--c-accent);
    --accent-hover:   var(--c-accent-hover);
    --card-bg:        var(--c-panel);
    --border-color:   var(--c-line);
    --success:        var(--c-success);
    --warning:        var(--c-warn);
    --danger:         var(--c-danger);

    --topbar-bg:           #000000;
    --topbar-text:         #ffffff;
    --topbar-strong:       #ffffff;
    --topbar-border:       #000000;
    --nav-bg:              #ffffff;
    --nav-bg-scrolled:     #ffffff;
    --nav-border:          #000000;
    --nav-shadow:          0 4px 0 #000000;
    --nav-link-color:      #000000;
    --nav-link-hover-bg:   #000000;
    --nav-link-hover-text: #ffffff;
    --brand-glow:          none;

    --hero-veil:
        linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.80) 50%, rgba(0,0,0,0.95) 100%);
    --hero-glow:           none;
    --hero-text:           #ffffff;
    --hero-text-emphasis:  rgba(255, 255, 255, 0.15);
    --hero-lead-text:      #f5f5f5;
    --hero-eyebrow-text:   #ffffff;

    --gbadge-bg:           #ffffff;
    --gbadge-bg-hover:     #ffffff;
    --gbadge-border:       #000000;
    --gbadge-text:         #000000;
    --gbadge-text-muted:   #1a1a1a;

    --footer-bg:           #000000;
    --footer-text:         #ffffff;
    --footer-link:         #ffffff;
    --footer-border:       #000000;

    --hero-trust-text:         #000000;
    --hero-trust-pill-bg:      #ffffff;
    --hero-trust-pill-border:  #000000;
    --hero-trust-check-text:   #ffffff;

    --hero-card-bg:            #ffffff;
    --hero-card-text:          #000000;
    --hero-card-text-muted:    #1a1a1a;
    --hero-card-border:        #000000;
    --hero-card-divider:       #000000;
    --hero-card-shadow:        0 8px 0 #000000;
    --hero-card-ring:          #000000;
    --hero-card-logo-bg:       #f2f2f2;
    --hero-card-phone:         #004d20;

    color-scheme: light;
}

/* ============================================================
   Component utility classes — token-driven, no inline color.
   New components (silo-index, active-problems, hub-uplink, etc.)
   use these so a theme swap repaints them automatically.
   ============================================================ */

/* Token-aware card surface used by silo index, active problems, etc. */
.tk-card {
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--r-md, 12px);
}
.tk-card--accent-left {
    border-left: 4px solid var(--accent);
}
.tk-callout {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    padding: .9rem 1.1rem;
}
.tk-muted   { color: var(--text-muted); }
.tk-accent  { color: var(--accent); }
.tk-success { color: var(--success); }
.tk-warning { color: var(--warning); }
.tk-danger  { color: var(--danger); }
.tk-link-row {
    display: block;
    padding: .55rem 0;
    border-top: 1px solid var(--border-color);
    text-decoration: none;
    color: var(--text-primary);
}

/* Hub-uplink + active-problems components use these surfaces */
.hub-uplink {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    padding: .9rem 1.1rem;
    margin: 1.4rem 0;
    font-size: .97rem;
}
.hub-uplink a {
    color: var(--accent-hover);
    text-decoration: underline;
}

.ap-card {
    position: relative;
    display: block;
    padding: 1.1rem 1.2rem;
    background: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent);
    border-radius: 10px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.ap-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--c-shadow);
}
.ap-card h3 { margin: .1rem 0 .5rem; font-size: 1.05rem; line-height: 1.3; color: var(--text-primary); }
.ap-card h3 a {
    color: inherit;
    text-decoration: none;
}
.ap-card h3 a::after {
    /* Stretched-link overlay — whole card is clickable while the anchor
       text (and therefore SEO anchor text) is just the headline. */
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
}
.ap-card h3 a:hover { color: var(--accent-hover); }
.ap-card p  { margin: .2rem 0 .6rem; font-size: .92rem; color: var(--text-primary); }
.ap-card .ap-label {
    display: inline-block;
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: .3rem;
}
.ap-card .ap-watch { font-size: .85rem; color: var(--text-muted); }
.ap-card .ap-arrow { font-size: .85rem; color: var(--accent); }

.silo-index {
    margin: 2rem 0;
    padding: 1.4rem 1.5rem;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}
.silo-index h2 { margin: 0; font-size: 1.25rem; color: var(--text-primary); }
.silo-index h4 { margin: .2rem 0 .4rem; font-size: .95rem; color: var(--text-primary); }
.silo-index a  { color: var(--accent-hover); }
.silo-index .silo-muted { color: var(--text-muted); }

/* Focus ring driven by theme accent (accessibility) */
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ----- AI Fast Answers ----- */
.ai-fast-answers { padding: 2rem 0; }
.ai-fast-answers .section-head { text-align: center; margin-bottom: 1.4rem; }
.aifa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}
.aifa-block { padding: 1.1rem 1.3rem; }
.aifa-label {
    margin: 0 0 .4rem; font-size: .95rem; color: var(--text-primary);
    letter-spacing: .01em;
}
.aifa-answer { margin: 0; color: var(--text-primary); font-size: .95rem; line-height: 1.55; }

/* ----- Entity Signals ----- */
.entity-signals { padding: 2rem 0; }
.entity-signals .section-head { text-align: center; margin-bottom: 1.4rem; }
.es-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}
.es-cell { padding: 1rem 1.2rem; }
.es-label {
    margin: 0 0 .5rem;
    font-size: .85rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.es-list { margin: 0; padding-left: 1.1rem; }
.es-list li { font-size: .92rem; color: var(--text-primary); margin: .2rem 0; }

/* ----- Sticky mobile call bar ----- */
.mobile-call-bar {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 95;
    background: var(--card-bg);
    border-top: 1px solid var(--border-color);
    padding: .55rem .7rem;
    box-shadow: 0 -6px 18px var(--c-shadow);
    align-items: center; gap: .6rem;
}
.mobile-call-bar a.cb-call {
    flex: 1;
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    background: var(--c-brand);
    color: #fff !important;
    padding: .7rem 1rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: .98rem;
    text-decoration: none;
}
.mobile-call-bar a.cb-quote {
    display: inline-flex; align-items: center; justify-content: center;
    padding: .7rem .9rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    text-decoration: none;
    font-size: .9rem;
}
.mobile-call-bar .cb-meta {
    font-size: .72rem;
    color: var(--text-muted);
    line-height: 1.2;
    text-align: right;
    padding-right: .2rem;
}
@media (max-width: 700px) {
    .mobile-call-bar { display: flex; }
    body { padding-bottom: 4.6rem; }
}

/* ----- Trust strip ----- */
.trust-strip {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: .85rem 0;
    font-size: .92rem;
}
.trust-strip .ts-row {
    display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center; align-items: center;
    color: var(--text-primary);
}
.trust-strip .ts-pill {
    display: inline-flex; align-items: center; gap: .35rem;
    color: var(--text-primary);
}
.trust-strip .ts-pill strong { color: var(--accent); }