/*!
 * CaliforniaContractorInsurance.com — Clean B2B theme override
 * ------------------------------------------------------------
 * Loaded on every page AFTER the page's inline <style> block so
 * the cascade lets this file win. Shifts the site from a dark
 * green + orange + Rajdhani-uppercase aesthetic to a clean blue
 * professional B2B look modeled on ccisbonds.com — the style the
 * client explicitly asked for.
 *
 * Scope of changes:
 *   - Palette: blue primary, orange CTA accent, near-black text,
 *     white background with subtle slate section-alt tint.
 *   - Typography: Inter everywhere (already loaded). Rajdhani
 *     retired for body copy and section headings. Sentence-case,
 *     minimal letter-spacing.
 *   - Motion: particle canvas hidden, pulse animations neutralized,
 *     scale/translate hovers softened to color-only.
 *   - Depth: softer borders, tighter radiuses, less shadow.
 *   - Spacing: preserved (site already reads well); we're just
 *     changing the "feel" not the rhythm.
 */

/* ─── Design tokens ──────────────────────────────────────────
   Palette matches the original site identity (green primary,
   orange accent, warm off-white panels). The theme's job is to
   apply the CCIS "clean B2B" *layout, typography, and motion*
   feel — not to change color identity.
   ─────────────────────────────────────────────────────────── */
:root {
  --bg: #ffffff !important;
  --bg2: #f4f8f4 !important;       /* soft green tint */
  --bg3: #ecf4ec !important;
  --panel: #f8fbf8 !important;
  --panel2: #f0f6f0 !important;

  --blue: #0d4d0d !important;      /* deep forest green primary */
  --blue-bright: #072d07 !important; /* darker still for hover */
  --blue-glow: rgba(13, 77, 13, 0.10) !important;

  --cyan: #d4890a !important;      /* orange accent */
  --cyan-dim: rgba(212, 137, 10, 0.10) !important;

  --white: #0f1e0f !important;     /* near-black green for headings */
  --text: #1f3a1f !important;      /* dark green body text */
  --text-soft: #4a684a !important; /* muted green */

  --border: rgba(0, 0, 0, 0.08) !important;
  --border-blue: rgba(13, 77, 13, 0.20) !important;

  --orange: #d4890a !important;
  --green: #0d4d0d !important;
}

/* ─── Typography ─────────────────────────────────────────────── */
body,
p, li, span, td, th, label, input, select, textarea, button, a {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
}

/* Retire Rajdhani. Sentence-case, tight letter-spacing on all display copy. */
h1, h2, h3, h4, h5, h6,
.hero-title, .section-title, .section-heading, .article-header h1,
.blog-hero h1, .article-body h2, .article-body h3, .dd-h3,
.form-title, .uqf-title, .process-heading,
.hero-label, .section-label, .eyebrow, .blog-hero-eyebrow,
.article-tag, .cta-band-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif !important;
  text-transform: none !important;
  letter-spacing: -0.015em !important;
}

h1, .hero-title, .article-header h1, .blog-hero h1 {
  font-weight: 700 !important;
  color: var(--white) !important;
  line-height: 1.1 !important;
}
h1 span.block { display: inline !important; } /* undo the three-line hero title stack */
.hero-title .hl {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
  color: var(--blue) !important;
}

h2, .section-title, .section-heading {
  font-weight: 700 !important;
  color: var(--white) !important;
  line-height: 1.2 !important;
}

h3, .dd-h3 {
  font-weight: 600 !important;
  color: var(--white) !important;
  line-height: 1.3 !important;
}

/* Small caption/label styles — keep them uppercase but tighter,
   in blue instead of yellow-orange for a cleaner accent. */
.section-label, .eyebrow, .article-tag,
.blog-hero-eyebrow, .hero-label, .process-eyebrow, .res-eyebrow {
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 600 !important;
  font-size: 0.72rem !important;
  color: var(--blue) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Body text: dark slate on white, generous line-height. */
p, li { color: var(--text) !important; }

/* Links: blue, underline on hover only. */
a { color: var(--blue) !important; }
a:hover { color: var(--blue-bright) !important; }

/* ─── Motion — quiet everything down ─────────────────────────── */
#particle-canvas, #bg-canvas,
.hero-glow, .hero-glow-right {
  display: none !important;
}

.pulse-dot { animation: none !important; opacity: 1 !important; }
.hero-title, .hero-desc, .hero-trades, .hero-trust,
.hero-label, .hero-pricing-hooks {
  animation: none !important;
}

nav::after { display: none !important; } /* remove the gradient shimmer line under nav */

/* Soften card hovers — color/border shift only, no lift-and-shadow theater. */
.trade-pill, .pill, .city-chip, .blog-card, .res-card, .process-step,
.card, .cost-card, .coverage-card {
  transition: border-color 0.15s, color 0.15s !important;
  transform: none !important;
  box-shadow: none !important;
}
.trade-pill:hover, .pill:hover, .city-chip:hover, .blog-card:hover,
.res-card:hover, .process-step:hover, .card:hover,
.cost-card:hover, .coverage-card:hover {
  transform: none !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;
  border-color: var(--blue) !important;
}

/* ─── Nav — thin, sticky, clean ──────────────────────────────── */
nav {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 1px 0 var(--border) !important;
  border-bottom: none !important;
}
/* Logo — smaller so it doesn't collide with nav links */
.logo-text {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  color: var(--white) !important;
}
.logo-text span {
  color: var(--text-soft) !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  font-size: 0.6rem !important;
}
/* Nav links — tighter gap, sentence case */
.nav-links {
  gap: 1.25rem !important;
}
.nav-links a {
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  color: var(--text) !important;
}
.nav-links a:hover { color: var(--blue) !important; }
/* Get a Quote nav button — force white text (was inheriting dark
   green from `.nav-links a` which had higher specificity). */
.nav-cta,
.nav-links a.nav-cta,
.nav-links li a.nav-cta {
  background: var(--blue) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  border-radius: 6px !important;
  padding: 0.5rem 1rem !important;
  white-space: nowrap !important;
  font-weight: 600 !important;
}
.nav-cta:hover,
.nav-links a.nav-cta:hover {
  background: var(--blue-bright) !important;
  box-shadow: none !important;
  color: #ffffff !important;
}
/* Phone number — California flag red so it stands out. */
.nav-phone,
.nav-links a.nav-phone,
.footer-contact a,
.sticky-mobile-cta .smc-call {
  color: #8b0620 !important;              /* CA state flag red */
  white-space: nowrap !important;
}
.nav-phone {
  font-size: 0.9rem !important;
  font-weight: 700 !important;
}
.footer-contact a { font-weight: 700 !important; }
.sticky-mobile-cta .smc-call {
  border-color: rgba(139, 6, 32, 0.4) !important;
  font-weight: 700 !important;
}
@media (max-width: 900px) {
  .nav-phone { display: none !important; }
}

/* ─── Buttons — matte, no gradient, subtle radius ────────────── */
.btn-primary, .btn-cta, .form-btn, .uqf-submit, .cta-btn, .pr-submit {
  background: var(--blue) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-family: 'Inter', sans-serif !important;
  padding: 0.85rem 1.35rem !important;
  transition: background 0.15s !important;
}
.btn-primary:hover, .btn-cta:hover, .form-btn:hover, .uqf-submit:hover,
.cta-btn:hover, .pr-submit:hover {
  background: var(--blue-bright) !important;
  opacity: 1 !important;
  transform: none !important;
}
.form-btn.secondary {
  background: transparent !important;
  color: var(--white) !important;
  border: 1px solid var(--border) !important;
}

/* ─── CTA band at page bottom ─── */
.cta-band, section.cta-band, div.cta-band {
  background: #0f1e0f !important;   /* dark forest bg */
  border-top: none !important;
  border-bottom: none !important;
}
/* Dark-bg rule: all text on the CTA band is pure white. */
.cta-band h2, .cta-band h3, .cta-band-title {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: clamp(1.5rem, 2.5vw, 2rem) !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
}
.cta-band p, .cta-band-desc {
  color: #ffffff !important;
  opacity: 1 !important;
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
}
.cta-note, .cta-band .cta-note, .cta-band p.cta-note {
  color: #ffffff !important;
  opacity: 0.85 !important;
  font-size: 0.9rem !important;
}
/* Force the CTA-band button to be orange with max specificity to
   beat any per-page override. Different pages use different button
   classes on the band, so cover them all. */
.cta-band a.cta-btn,
section.cta-band .cta-btn,
div.cta-band .cta-btn,
.cta-band a.cta-big-btn,
section.cta-band .cta-big-btn,
div.cta-band .cta-big-btn,
.cta-band a.btn-cta,
section.cta-band .btn-cta,
div.cta-band .btn-cta {
  background: var(--cyan) !important;
  color: #0f1e0f !important;
  font-weight: 700 !important;
  padding: 1rem 2rem !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  display: inline-block !important;
  text-decoration: none !important;
}
.cta-band a.cta-btn:hover,
section.cta-band .cta-btn:hover,
div.cta-band .cta-btn:hover,
.cta-band a.cta-big-btn:hover,
section.cta-band .cta-big-btn:hover,
div.cta-band .cta-big-btn:hover,
.cta-band a.btn-cta:hover,
section.cta-band .btn-cta:hover,
div.cta-band .btn-cta:hover {
  background: #b06e05 !important;
  color: #0f1e0f !important;
}

/* ─── Sticky mobile CTA ─── */
.sticky-mobile-cta { background: var(--white) !important; }
.sticky-mobile-cta .smc-quote {
  background: var(--cyan) !important;
  color: #ffffff !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600 !important;
  font-family: 'Inter', sans-serif !important;
}
.sticky-mobile-cta .smc-call {
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.25) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600 !important;
  font-family: 'Inter', sans-serif !important;
}

/* ─── Trade pills / chips — flatter ──────────────────────────── */
.trade-pill, .pill, .city-chip {
  background: var(--bg2) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  padding: 0.5rem 0.85rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.9rem !important;
}

/* ─── Uniform quote form — distinct green-tinted card ────────── */
.uniform-quote-form {
  background: #eaf2ea !important;                     /* soft green tint — separates from page */
  border: 1px solid rgba(13, 77, 13, 0.18) !important;
  border-radius: 12px !important;
  box-shadow: 0 12px 40px rgba(13, 77, 13, 0.10) !important;
  padding: 2rem !important;
}
.uqf-title { color: var(--white) !important; }
.uqf-subtitle { color: var(--text-soft) !important; }
.uqf-field label { color: var(--text) !important; }
.uqf-field input, .uqf-field select {
  border: 1px solid rgba(13, 77, 13, 0.15) !important;
  border-radius: 6px !important;
  background: #ffffff !important;                     /* inputs stay white for contrast against green card */
}
.uqf-field input:focus, .uqf-field select:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px var(--blue-glow) !important;
}
.uqf-submit {
  background: var(--cyan) !important;                 /* orange submit is highest-attention CTA */
  color: var(--white) !important;
}
.uqf-submit:hover { background: #b06e05 !important; }
.uqf-note { color: var(--text-soft) !important; }

/* ─── Trust badges — restrained ─── */
.hero-trust .num, .trust-stat .num, .stat-num {
  color: var(--blue) !important;
  font-weight: 700 !important;
  font-family: 'Inter', sans-serif !important;
  letter-spacing: -0.02em !important;
}
.hero-trust .lbl, .trust-stat .lbl, .stat-label {
  color: var(--text-soft) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 500 !important;
  font-size: 0.72rem !important;
}
.trust-divider { background: var(--border) !important; }

/* ─── Section headings — center-align styles unaffected ─── */
.section-heading, .section-title { letter-spacing: -0.015em !important; }

/* ─── Coverage / trade / process cards — flatter ─────────────── */
.card, .cost-card, .coverage-card, .process-step, .blog-card, .res-card {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.process-num { background: var(--blue) !important; color: #ffffff !important; }

/* ─── Footer — cleaner ──────────────────────────────────────── */
footer { background: var(--bg2) !important; border-top: 1px solid var(--border) !important; }
.footer-links a {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9rem !important;
  color: var(--text-soft) !important;
}
.footer-links a:hover { color: var(--blue) !important; }
.footer-contact a { color: #8b0620 !important; font-weight: 700 !important; }
.footer-copy { color: var(--text-soft) !important; }
.disclosure-band {
  background: var(--bg3) !important;
  color: var(--text-soft) !important;
  border-top: 1px solid var(--border) !important;
}
.disclosure-band p { color: var(--text-soft) !important; }

/* ─── Sound Familiar / Why It Matters ────────────────────────
   Pain-points diagnostic grid on a soft green-tinted background
   that separates from the white sections above/below without
   being oppressive. */
.pain-points-section {
  background: #eaf2ea !important;
  padding: 5rem 5% !important;
  position: relative !important;
  z-index: 1 !important;
  border-top: 1px solid rgba(13, 77, 13, 0.08) !important;
  border-bottom: 1px solid rgba(13, 77, 13, 0.08) !important;
}
.pain-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
.pain-eyebrow {
  display: inline-block;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: #8b0620 !important;
  margin-bottom: 0.75rem !important;
}
.pain-heading {
  font-family: 'Inter', sans-serif !important;
  font-size: clamp(2rem, 4vw, 2.75rem) !important;
  font-weight: 700 !important;
  color: #0f1e0f !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  margin: 0 0 0.6rem 0 !important;
  text-transform: none !important;
}
.pain-lede {
  font-size: 1.05rem !important;
  color: #1f3a1f !important;
  max-width: 620px;
  margin: 0 auto 3rem auto !important;
  line-height: 1.5 !important;
}
.pain-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  text-align: left;
  margin-bottom: 2.5rem;
}
.pain-card {
  background: #ffffff !important;
  border: 1px solid rgba(13, 77, 13, 0.10) !important;
  border-radius: 10px !important;
  padding: 1.5rem 1.35rem !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.pain-card:hover {
  border-color: rgba(139, 6, 32, 0.35) !important;
  box-shadow: 0 6px 20px rgba(13, 77, 13, 0.08) !important;
}
.pain-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(139, 6, 32, 0.10);
  color: #8b0620;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1;
  margin-bottom: 0.85rem;
}
.pain-card h3 {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.02rem !important;
  font-weight: 700 !important;
  color: #0f1e0f !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
  margin: 0 0 0.5rem 0 !important;
  text-transform: none !important;
}
.pain-card p {
  font-size: 0.9rem !important;
  color: #4a684a !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}
.pain-cta {
  font-size: 1rem !important;
  color: #1f3a1f !important;
  max-width: 680px;
  margin: 0 auto !important;
  line-height: 1.55 !important;
}
.pain-cta a {
  color: #0d4d0d !important;
  font-weight: 700 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.pain-cta a:hover { color: #072d07 !important; }

@media (max-width: 900px) {
  .pain-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .pain-grid { grid-template-columns: 1fr; }
  .pain-points-section { padding: 3.5rem 5% !important; }
}

/* ─── Article / blog pages — cleaner reading rhythm ─────────── */
.article-body h2 {
  border-bottom: 1px solid var(--border) !important;
  padding-bottom: 0.5rem !important;
}
.article-body h3 { color: var(--white) !important; }
.article-body p { color: var(--text) !important; }
.article-body a { color: var(--blue) !important; }
.takeaways-box, .info-callout, .warning-box, .dd-cta-note {
  background: var(--bg2) !important;
  border-left-color: var(--blue) !important;
}
.warning-box { border-left-color: var(--cyan) !important; }