/* ============================================================
   Signature Trust Insurance — Light / Dark Theme Overrides
   Shared across all pages.  theme.js sets data-theme on <html>.
   ============================================================ */

/* ---- Color-scheme hint for native browser UI ---- */
:root[data-theme="dark"]  { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

/* ---- Token overrides: light palette ---- */
:root[data-theme="light"] {
    --black:       #F0EBE0;
    --dark:        #F5F1E8;
    --dark-2:      #EDE8DC;
    --dark-3:      #E3DDD1;
    --white:       #1C1812;
    --white-muted: #7A6E60;
    --gold:        #9B7A45;
    --gold-light:  #C9A96E;
    --gold-dark:   #7A5E30;
}

/* ---- Animated office background ---- */
[data-theme="light"] #office-bg {
    background: #F5F1E8;
}
[data-theme="light"] #office-bg::before {
    background-image:
        linear-gradient(rgba(155,122,69,0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(155,122,69,0.07) 1px, transparent 1px);
}
[data-theme="light"] #office-bg::after {
    background:
        linear-gradient(to bottom, #F5F1E8 0%, transparent 28%, transparent 60%, rgba(245,241,232,0.55) 100%),
        radial-gradient(ellipse 700px 180px at 50% 0%, rgba(155,122,69,0.06) 0%, transparent 100%),
        radial-gradient(ellipse 160px 600px at 100% 38%, rgba(200,170,100,0.03) 0%, transparent 100%),
        radial-gradient(ellipse 120px 500px at 0% 45%, rgba(155,122,69,0.03) 0%, transparent 100%);
}

/* ---- Scrollbar ---- */
[data-theme="light"] ::-webkit-scrollbar-track { background: #E8E3D6; }

/* ---- Nav — prevent browser default blue on anchor logo ---- */
[data-theme="light"] .nav-logo,
[data-theme="light"] .nav-logo-main {
    color: var(--gold);
}

/* ---- Nav scrolled / mobile ---- */
[data-theme="light"] nav.scrolled {
    background: rgba(240,235,225,0.97);
    border-bottom-color: rgba(155,122,69,0.18);
}
[data-theme="light"] .mobile-nav {
    background: rgba(240,235,225,0.99);
}

/* ---- Stats bar ---- */
[data-theme="light"] #stats {
    background: rgba(227,221,206,0.62);
}

/* ---- Services ---- */
[data-theme="light"] #services {
    background: rgba(240,235,225,0.68);
}
[data-theme="light"] .service-card {
    background: rgba(255,252,246,0.88);
}
[data-theme="light"] .service-card:hover {
    background: rgba(237,231,218,0.93);
}
[data-theme="light"] .service-number {
    color: rgba(155,122,69,0.10);
}

/* ---- Carriers ---- */
[data-theme="light"] #carriers {
    background: rgba(235,229,216,0.65);
}
[data-theme="light"] .carrier-box {
    background: rgba(255,252,246,0.88);
}
[data-theme="light"] .carrier-box:hover {
    background: rgba(237,231,218,0.93);
}
/* Fix #4 & #5: carrier tag contrast — both themes */
[data-theme="light"] .carrier-tag {
    color: rgba(100,75,35,0.82);
}

/* ---- Why us ---- */
[data-theme="light"] .why-box {
    background: rgba(255,252,246,0.88);
}

/* ---- Areas ---- */
[data-theme="light"] #areas {
    background: rgba(235,229,216,0.68);
}
[data-theme="light"] .area-item {
    background: rgba(255,252,246,0.88);
}

/* ---- Testimonials ---- */
[data-theme="light"] .testimonial-card {
    background: rgba(255,252,246,0.88);
}
[data-theme="light"] .testimonial-card:hover {
    background: rgba(237,231,218,0.93);
}

/* ---- Emergency section ---- */
[data-theme="light"] #emergency {
    background: rgba(245,237,218,0.88);
}
[data-theme="light"] .emergency-card {
    background: rgba(255,250,242,0.90);
}
[data-theme="light"] .emergency-card:hover {
    background: rgba(240,232,215,0.95);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

/* ---- Help page hero (fix #3) ---- */
[data-theme="light"] #help-hero {
    background: rgba(240,235,225,0.68);
}

/* ---- Agent section ---- */
[data-theme="light"] #agent {
    background: rgba(240,235,225,0.65);
}
/* Fix #4: agent license text contrast */
[data-theme="light"] .agent-section-license {
    color: rgba(80,65,45,0.68);
}

/* ---- Footer ---- */
[data-theme="light"] footer {
    background: rgba(220,213,198,0.96);
}
[data-theme="light"] .footer-top {
    border-bottom-color: rgba(0,0,0,0.10);
}
/* Fix #4: footer text contrast */
[data-theme="light"] .footer-copy,
[data-theme="light"] .footer-license {
    color: rgba(55,44,28,0.72);
}

/* ---- Contact form ---- */
[data-theme="light"] .form-group input,
[data-theme="light"] .form-group select,
[data-theme="light"] .form-group textarea {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.14);
}
[data-theme="light"] .form-group input[type="date"] {
    color-scheme: light;
}
[data-theme="light"] .form-group input[type="date"]::-webkit-calendar-picker-indicator {
    filter: none;
    opacity: 0.55;
}
[data-theme="light"] .form-success {
    background: linear-gradient(160deg, rgba(155,122,69,0.08) 0%, rgba(240,235,225,0.85) 100%);
}

/* ---- Fix #4: hero trust points contrast ---- */
[data-theme="light"] .hero-trust-item {
    color: rgba(75,60,35,0.78);
    background: rgba(245,241,232,0.90) !important;
    border-color: rgba(155,122,69,0.18) !important;
}

/* ---- QF trust strip (homepage below ZIP) ---- */
[data-theme="light"] .qf-trust-item {
    color: rgba(75,60,35,0.75);
}

/* ---- Footer hours & availability ---- */
[data-theme="light"] .footer-hours,
[data-theme="light"] .footer-hours p {
    color: var(--white);
}
/* Footer column headings and links */
[data-theme="light"] .footer-col h5 {
    color: var(--white);
}
[data-theme="light"] .footer-col ul li a {
    color: var(--white);
}

/* ---- Breadcrumb — rgba(201,169,110,.6) is 1.5:1 on cream; nearly invisible ---- */
[data-theme="light"] .breadcrumb,
[data-theme="light"] .breadcrumb a {
    color: var(--gold-dark);
}
[data-theme="light"] .breadcrumb-sep {
    color: var(--white-muted);
}

/* ---- FAQ answer text on card backgrounds (product + /es/ pages) ---- */
[data-theme="light"] .faq-a {
    color: var(--white);
}

/* ---- Section eyebrow labels (product + /es/ pages) ---- */
[data-theme="light"] .section-label {
    color: var(--gold-dark);
}
[data-theme="light"] .section-label::before {
    background: var(--gold-dark);
}

/* ---- Footer Privacy / Terms links (inline style override) ---- */
[data-theme="light"] a[href="/privacy-policy"],
[data-theme="light"] a[href="/terms-and-conditions"] {
    color: rgba(75,60,35,0.65) !important;
}

/* ---- /quote trust strip ---- */
[data-theme="light"] .trust-item {
    color: rgba(75,60,35,0.75);
}

/* ============================================================
   Theme toggle button — works in both themes
   ============================================================ */
.theme-toggle {
    background: none;
    border: 1px solid rgba(201,169,110,0.35);
    color: var(--gold);
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.3s, color 0.3s;
    flex-shrink: 0;
    padding: 0;
    margin-right: 4px;
}
.theme-toggle:hover {
    border-color: var(--gold);
}
/* Dark mode: show sun (switch to light) */
.theme-toggle .icon-sun  { display: block; }
.theme-toggle .icon-moon { display: none;  }
/* Light mode: show moon (switch to dark) */
[data-theme="light"] .theme-toggle .icon-sun  { display: none;  }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }

@media (max-width: 768px) {
    .theme-toggle { width: 30px; height: 30px; }
}

/* ---- Hero section border — transparent in light mode ---- */
[data-theme="light"] .city-hero,
[data-theme="light"] .svc-hero,
[data-theme="light"] .page-hero,
[data-theme="light"] #help-hero {
    border-bottom-color: transparent;
}

/* ---- Scroll offset: fixed nav height so anchors land below the bar ---- */
html {
    scroll-padding-top: 80px;
}

/* ---- Nav: always has a background in light mode (prevents invisible-bar / pop-in overlap) ---- */
[data-theme="light"] nav,
[data-theme="light"] nav#mainNav {
    background: rgba(240,235,225,0.90);
    border-bottom-color: rgba(155,122,69,0.14);
}

/* ---- Testimonials section: light background in light mode ---- */
[data-theme="light"] #testimonials {
    background: rgba(227,221,206,0.62);
}
/* Review count / "N reviews" text contrast */
[data-theme="light"] .testimonials-header span {
    color: rgba(55,44,28,0.72) !important;
}
/* Decorative opening quote mark: more visible on cream card ---- */
[data-theme="light"] .testimonial-card::before {
    color: rgba(155,122,69,0.14);
}

/* ============================================================
   Google Reviews Carousel
   ============================================================ */
.gr-section {
    padding: 64px 24px;
    background: var(--dark-2);
    text-align: center;
}
.gr-hd {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 32px;
    text-align: center;
}
.gr-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.gr-st { color: var(--gold); font-size: 20px; letter-spacing: 2px; }
.gr-sc { font-size: 13px; color: var(--white-muted); }
.gr-at { font-size: 13px; font-weight: 700; color: #9aa0a6; letter-spacing: 0.01em; }

.gr-btn {
    display: inline-block;
    padding: 9px 22px;
    border: 1px solid var(--gold);
    color: var(--gold);
    text-decoration: none;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 3px;
    transition: background 0.2s, color 0.2s;
}
.gr-btn:hover { background: var(--gold); color: var(--black); }

.gr-wrap {
    overflow: hidden;
    max-width: 680px;
    margin: 0 auto;
}
.gr-tr {
    display: flex;
    transition: transform 0.45s cubic-bezier(.4,0,.2,1);
    will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
    .gr-tr { transition: none; }
}

.gr-card {
    min-width: 100%;
    box-sizing: border-box;
    padding: 28px 24px;
    background: var(--dark-3);
    border-radius: 8px;
    text-align: left;
}
.gr-cst { color: var(--gold); font-size: 15px; letter-spacing: 2px; margin-bottom: 10px; }
.gr-body {
    font-size: 14px;
    line-height: 1.65;
    color: var(--white-muted);
    margin: 0 0 16px;
}
.gr-more {
    background: none;
    border: none;
    color: var(--gold);
    cursor: pointer;
    font-size: 13px;
    padding: 0;
    text-decoration: underline;
}
.gr-auth { display: flex; align-items: center; gap: 10px; }
.gr-av {
    width: 34px; height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.gr-avinit {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--black);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px;
    flex-shrink: 0;
}
.gr-nm { font-size: 13px; font-weight: 600; color: var(--white); }
.gr-dt { font-size: 11px; color: var(--white-muted); margin-top: 2px; }

.gr-dots {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 16px;
}
.gr-dot {
    /* tap target 24×24 px; visual dot stays 7 px via ::after */
    width: 24px; height: 24px;
    border-radius: 50%;
    background: transparent;
    border: none; cursor: pointer; padding: 0;
    position: relative;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}
.gr-dot::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(201,169,110,0.25);
    transition: background 0.25s, transform 0.25s;
}
.gr-don::after, .gr-dot:hover::after {
    background: var(--gold);
    transform: translate(-50%, -50%) scale(1.35);
}

/* light-mode overrides */
[data-theme="light"] .gr-section { background: rgba(227,221,206,0.62); }
[data-theme="light"] .gr-card    { background: rgba(255,252,246,0.88); }
[data-theme="light"] .gr-card:hover { background: rgba(237,231,218,0.93); }
[data-theme="light"] .gr-at      { color: #5f6368; }

@media (max-width: 600px) {
    .gr-section { padding: 48px 16px; }
    .gr-card    { padding: 20px 16px; }
}

/* ============================================================
   Mobile nav layout — collapse gap:32px at ≤900 px
   All product/city/ES pages share nav#mainNav { gap:32px } in
   their inline <style>. theme.css loads after, so nav#mainNav
   (specificity 0-1-1) overrides the inline gap at mobile widths.
   ============================================================ */
@media (max-width: 900px) {
    nav#mainNav {
        gap: 0;
    }
    /* Push controls to the right; cancel index.html's margin-right:8px */
    nav#mainNav .lang-toggle {
        margin-left: auto;
        margin-right: 0;
    }
    /* Pages without a lang-toggle (e.g. carriers): theme-toggle is the right anchor.
       Specificity (1,2,1) beats the margin-left:10px rule below (1,1,1). */
    nav#mainNav:not(:has(.lang-toggle)) .theme-toggle {
        margin-left: auto;
    }
    /* 10px breathing room between each right-side control; ≥36px tap target */
    nav#mainNav .theme-toggle {
        margin-left: 10px;
        width: 36px;
        height: 36px;
    }
    nav#mainNav .nav-toggle {
        margin-left: 10px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* Shrink logo text at narrow widths to stay clear of the controls */
@media (max-width: 480px) {
    .nav-logo-main {
        font-size: 16px;
        letter-spacing: 0.08em;
    }
}
@media (max-width: 400px) {
    .nav-logo-main {
        font-size: 15px;
        letter-spacing: 0.06em;
    }
}