/* === Dark Mode Toggle & Theme Overrides === */
/* Toggle Button */
#theme-toggle {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  border: 1px solid #2a2a2a;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 14px;
  background: #f0f0f0;
  color: #111;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
[data-theme="dark"] #theme-toggle {
  background: #2b2b2b;
  color: #eaeaea;
  border-color: #3a3a3a;
}

/* Base dark palette */
:root {
  --bg: #ffffff;
  --text: #111111;
  --muted: #444444;
  --card: #ffffff;
  --border: #e5e5e5;
  --link: #0b57d0;
  --link-hover: #2b74e4;
  --accent: #2563eb;
}
:root[data-theme="dark"] {
  --bg: #121212;
  --text: #eaeaea;
  --muted: #bdbdbd;
  --card: #1e1e1e;
  --border: #2a2a2a;
  --link: #8ab4f8;
  --link-hover: #a0c3ff;
  --accent: #60a5fa;
}

/* Try gentle variable-based overrides for projects using CSS vars */
body {
  background: var(--bg) !important;
  color: var(--text) !important;
}
a { color: var(--link) !important; }
a:hover { color: var(--link-hover) !important; }

/* Common containers */
header, nav, footer, .navbar, .footer, .hero, .section, .panel, .card, .container, .content, .modal, .dropdown,
aside, .sidebar, .grid-item, .box, .tile, .accordion, .tab, .pricing-card {
  background-color: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Tables */
table, thead, tbody, tr, th, td {
  background-color: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* Forms */
input, select, textarea {
  background-color: color-mix(in srgb, var(--card), black 5%) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
input::placeholder, textarea::placeholder {
  color: var(--muted) !important;
}

/* Buttons */
button, .btn, input[type="submit"], .button {
  background-color: var(--accent) !important;
  color: #ffffff !important;
  border: 1px solid color-mix(in srgb, var(--accent), black 15%) !important;
}
button:hover, .btn:hover, input[type="submit"]:hover, .button:hover {
  filter: brightness(1.05);
}

/* Shadows and separators */
hr, .divider {
  border-color: var(--border) !important;
}

/* Media and galleries (avoid inverting images) */
img, video, canvas {
  filter: none !important;
  background: transparent !important;
}
/* === Targeted fixes: "What neighbors say" testimonials section === */
:root[data-theme="dark"] #testimonials,
:root[data-theme="dark"] #testimonials .section,
:root[data-theme="dark"] #testimonials .alt {
  background-color: var(--card) !important;
}

:root[data-theme="dark"] #testimonials,
:root[data-theme="dark"] #testimonials .quote,
:root[data-theme="dark"] #testimonials .card,
:root[data-theme="dark"] #testimonials blockquote,
:root[data-theme="dark"] #testimonials h2,
:root[data-theme="dark"] #testimonials p {
  color: var(--text) !important;
}

:root[data-theme="dark"] #testimonials figcaption,
:root[data-theme="dark"] #testimonials .add-review {
  color: var(--muted) !important;
}

:root[data-theme="dark"] #testimonials .card,
:root[data-theme="dark"] #testimonials .quote {
  border-color: var(--border) !important;
  background-color: var(--card) !important;
}

/* === Enhanced Dark Mode Styling for Testimonials === */
:root[data-theme="dark"] #testimonials {
  background: linear-gradient(180deg, #0d0d0d 0%, #1a1a1a 100%) !important;
  padding: 60px 0;
}

:root[data-theme="dark"] #testimonials h2 {
  color: #ffffff !important;
  text-align: center;
  font-size: 2rem;
  margin-bottom: 30px;
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}

:root[data-theme="dark"] #testimonials .quote.card {
  background: #1e1e1e !important;
  border: 1px solid #333 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.7), 0 0 10px rgba(37,99,235,0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
:root[data-theme="dark"] #testimonials .quote.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.9), 0 0 16px rgba(37,99,235,0.35);
}

:root[data-theme="dark"] #testimonials blockquote {
  color: #f1f1f1 !important;
  font-size: 1.05rem;
  line-height: 1.7;
}

:root[data-theme="dark"] #testimonials figcaption {
  color: #9ca3af !important;
  font-style: italic;
}

:root[data-theme="dark"] #testimonials .stars {
  color: #fbbf24 !important; /* bright gold */
  text-shadow: 0 0 6px rgba(251,191,36,0.6);
  font-size: 1.2rem;
}

:root[data-theme="dark"] #testimonials .add-review {
  color: #93c5fd !important;
  font-weight: 600;
  text-align: center;
  display: block;
  margin-top: 20px;
}

/* === POP Enhancements for Testimonials ("What neighbors say") === */

/* Shared polish (both themes) */
#testimonials .quote.card {
  border-left: 4px solid var(--accent) !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
#testimonials .quote.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.14);
}
#testimonials .stars {
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 8px;
}
#testimonials blockquote {
  font-size: 1.05rem;
  line-height: 1.55;
}
#testimonials h2 {
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}
#testimonials h2::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), transparent);
  border-radius: 2px;
}

/* Light mode refinements */
:root[data-theme="light"] #testimonials.section.alt,
:root[data-theme="light"] #testimonials.section.alt .container {
  background: linear-gradient(180deg, rgba(37,99,235,0.06), rgba(37,99,235,0.00));
}
:root[data-theme="light"] #testimonials .stars {
  color: #ea9a00;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}

/* Dark mode wow-factor */
:root[data-theme="dark"] #testimonials.section.alt,
:root[data-theme="dark"] #testimonials.section.alt .container {
  background: linear-gradient(180deg, rgba(96,165,250,0.10), rgba(18,18,18,0.00));
}
:root[data-theme="dark"] #testimonials h2::after {
  background: linear-gradient(90deg, var(--accent), rgba(255,255,255,0.0));
}
:root[data-theme="dark"] #testimonials .quote.card {
  background: color-mix(in srgb, var(--card), black 6%) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  border-color: color-mix(in srgb, var(--accent), black 25%) !important;
}
:root[data-theme="dark"] #testimonials .quote.card:hover {
  box-shadow: 0 16px 42px rgba(0,0,0,.55);
}
:root[data-theme="dark"] #testimonials .stars {
  color: #ffd166 !important;
  text-shadow: 0 0 12px rgba(255, 209, 102, .35), 0 1px 0 rgba(0,0,0,.4);
}
:root[data-theme="dark"] #testimonials blockquote {
  color: var(--text) !important;
}
:root[data-theme="dark"] #testimonials figcaption {
  color: var(--muted) !important;
}


/* === Professional Dark Mode Section Enhancements === */
:root[data-theme="dark"] section.section {
  background: color-mix(in srgb, var(--card), black 4%) !important;
  border-radius: 12px;
  padding: 48px 28px !important;
  margin-bottom: 36px;
  box-shadow: 0 6px 22px rgba(0,0,0,.55);
}

:root[data-theme="dark"] .section.alt {
  background: linear-gradient(180deg, rgba(37,99,235,0.08), rgba(18,18,18,0.0)) !important;
}

:root[data-theme="dark"] h2, 
:root[data-theme="dark"] h3 {
  color: var(--text) !important;
  position: relative;
  margin-bottom: 20px;
}
:root[data-theme="dark"] h2::after, 
:root[data-theme="dark"] h3::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 60px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
}

:root[data-theme="dark"] .card, 
:root[data-theme="dark"] figure.shot {
  background: color-mix(in srgb, var(--card), black 8%) !important;
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0,0,0,.45);
  border: 1px solid color-mix(in srgb, var(--border), black 20%);
}

:root[data-theme="dark"] .btn.primary, 
:root[data-theme="dark"] button, 
:root[data-theme="dark"] .button {
  background: var(--accent) !important;
  border-radius: 6px;
  box-shadow: 0 3px 12px rgba(96,165,250,.45);
}

:root[data-theme="dark"] input, 
:root[data-theme="dark"] textarea, 
:root[data-theme="dark"] select {
  border-radius: 6px;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.55);
}

/* ===== Professional Dark Mode Polish (site-wide) ===== */

/* Section contrast & depth */
:root[data-theme="dark"] .section.alt {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.00));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -1px 0 rgba(0,0,0,0.35);
}

/* Cards, panels, and common containers */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .info,
:root[data-theme="dark"] .service,
:root[data-theme="dark"] .kpi,
:root[data-theme="dark"] .quote,
:root[data-theme="dark"] .shot {
  background: color-mix(in srgb, var(--card), black 6%) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
  transition: transform .18s ease, box-shadow .18s ease;
}
:root[data-theme="dark"] .card:hover,
:root[data-theme="dark"] .panel:hover,
:root[data-theme="dark"] .service:hover,
:root[data-theme="dark"] .kpi:hover,
:root[data-theme="dark"] .quote:hover,
:root[data-theme="dark"] .shot:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
}

/* Headings & separators */
:root[data-theme="dark"] h1,
:root[data-theme="dark"] h2,
:root[data-theme="dark"] h3 {
  color: var(--text) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
:root[data-theme="dark"] .section h2 {
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}
:root[data-theme="dark"] .section h2::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), rgba(255,255,255,0));
  border-radius: 2px;
}
:root[data-theme="dark"] hr,
:root[data-theme="dark"] .divider {
  border-color: var(--border) !important;
  opacity: .9;
}

/* Buttons */
:root[data-theme="dark"] .btn,
:root[data-theme="dark"] button,
:root[data-theme="dark"] input[type="submit"],
:root[data-theme="dark"] .button {
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent), black 15%));
  border: 1px solid color-mix(in srgb, var(--accent), black 25%) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.45);
}
:root[data-theme="dark"] .btn:hover,
:root[data-theme="dark"] button:hover,
:root[data-theme="dark"] input[type="submit"]:hover,
:root[data-theme="dark"] .button:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

/* Links */
:root[data-theme="dark"] a { text-underline-offset: 3px; }
:root[data-theme="dark"] a:hover { text-decoration: underline; }

/* Forms */
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea {
  background: color-mix(in srgb, var(--card), black 8%) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
:root[data-theme="dark"] input:focus,
:root[data-theme="dark"] select:focus,
:root[data-theme="dark"] textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent), white 20%) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), white 70% / 0.16);
}

/* Navbar & footer */
:root[data-theme="dark"] .navbar,
:root[data-theme="dark"] header {
  background: color-mix(in srgb, var(--card), black 8%) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
:root[data-theme="dark"] .footer {
  background: color-mix(in srgb, var(--card), black 10%) !important;
  border-top: 1px solid var(--border) !important;
  box-shadow: 0 -6px 18px rgba(0,0,0,.4);
}

/* Gallery images – consistent subtle framing in dark */
:root[data-theme="dark"] .gallery .shot img {
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0,0,0,.5);
  background: #0000;
}

/* === Dark mode select + field parity === */
:root[data-theme="dark"] .form-card input,
:root[data-theme="dark"] .form-card select,
:root[data-theme="dark"] .form-card textarea {
  background-color: color-mix(in srgb, var(--card), black 8%) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

:root[data-theme="dark"] .form-card select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%),
    linear-gradient(to right, var(--border), var(--border));
}

:root[data-theme="dark"] .form-card input:focus,
:root[data-theme="dark"] .form-card select:focus,
:root[data-theme="dark"] .form-card textarea:focus {
  border-color: color-mix(in srgb, var(--accent), white 20%) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent), white 70% / 0.16);
}

/* === Preventative Maintenance Section — Theme Integration === */
#maintenance-services {
  background: var(--bg);
  color: var(--text);
}
#maintenance-services h2,
#maintenance-services h3 {
  color: var(--text);
}
#maintenance-services p,
#maintenance-services .lead,
#maintenance-services .billnote,
#maintenance-services .muted,
#maintenance-services .foot {
  color: var(--muted);
}
#maintenance-services .card {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
}
#maintenance-services .card.hero {
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent), black 10%));
  border: 2px solid var(--accent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent), black 40%);
}
#maintenance-services .card.hero .billnote strong {
  color: #fff;
  background: color-mix(in srgb, var(--accent), black 35%);
}
#maintenance-services .badge {
  background: var(--accent);
  color: #fff;
}
#maintenance-services .tag {
  background: #22c55e;
  color: #052e16;
}

/* ===== Theme-aware overrides for Preventative Maintenance section ===== */

/* Base: let the site's variables drive colors */
#maintenance-services {
  background: var(--bg) !important;
  color: var(--text) !important;
}
#maintenance-services .card {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
#maintenance-services .box {
  background: color-mix(in srgb, var(--card), black 5%) !important;
  border-color: var(--border) !important;
}
#maintenance-services .billnote,
#maintenance-services .muted,
#maintenance-services .foot {
  color: var(--muted) !important;
}
#maintenance-services .badge {
  background: var(--accent) !important;
  color: #fff !important;
}
#maintenance-services .tag {
  background: #22c55e !important;
  color: #052e16 !important;
}
#maintenance-services .best {
  background: #fff !important;
  color: #065f46 !important;
}

/* Headings */
#maintenance-services h2,
#maintenance-services h3 {
  color: var(--text) !important;
}

/* Light mode polish */
:root[data-theme="light"] #maintenance-services {
  background: linear-gradient(180deg, rgba(37,99,235,0.04), rgba(37,99,235,0.00)) !important;
}
:root[data-theme="light"] #maintenance-services .card.hero {
  background: linear-gradient(180deg, #16a34a, #22c55e) !important;
  border-color: #22c55e !important;
  box-shadow: 0 0 18px rgba(34,197,94,.35) !important;
}
:root[data-theme="light"] #maintenance-services .box {
  background: #f8fafc !important;
}

/* Dark mode polish */
:root[data-theme="dark"] #maintenance-services {
  background: linear-gradient(180deg, rgba(96,165,250,0.07), rgba(18,18,18,0.00)) !important;
}
:root[data-theme="dark"] #maintenance-services .card {
  background: color-mix(in srgb, var(--card), black 6%) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
}
:root[data-theme="dark"] #maintenance-services .card.hero {
  background: linear-gradient(180deg, #166534, #22c55e) !important;
  border-color: color-mix(in srgb, #22c55e, black 12%) !important;
  box-shadow: 0 0 20px rgba(34,197,94,.5) !important;
}
:root[data-theme="dark"] #maintenance-services .box {
  background: color-mix(in srgb, var(--card), black 10%) !important;
}

/* Inputs, if any added later */
#maintenance-services input,
#maintenance-services select,
#maintenance-services textarea {
  background: color-mix(in srgb, var(--card), black 5%) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}

/* ===== POP Enhancements for Preventative Maintenance Section ===== */

/* Shared */
#maintenance-services h2 {
  text-align: center;
  position: relative;
  display: inline-block;
  margin-bottom: 24px;
}
#maintenance-services h2::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), transparent);
  border-radius: 2px;
}

#maintenance-services .card {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#maintenance-services .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0,0,0,.25);
}

/* Light mode pop */
:root[data-theme="light"] #maintenance-services {
  background: linear-gradient(180deg, rgba(37,99,235,0.06), rgba(37,99,235,0.00)) !important;
}
:root[data-theme="light"] #maintenance-services .card.hero {
  background: linear-gradient(180deg, #16a34a, #22c55e) !important;
  border: 2px solid #16a34a !important;
  box-shadow: 0 0 22px rgba(34,197,94,.6) !important;
  transform: scale(1.02);
}

/* Dark mode pop */
:root[data-theme="dark"] #maintenance-services {
  background: linear-gradient(180deg, rgba(96,165,250,0.10), rgba(18,18,18,0.00)) !important;
}
:root[data-theme="dark"] #maintenance-services .card {
  background: color-mix(in srgb, var(--card), black 4%) !important;
  border-color: color-mix(in srgb, var(--accent), black 40%) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.55);
}
:root[data-theme="dark"] #maintenance-services .card.hero {
  background: linear-gradient(180deg, #166534, #22c55e) !important;
  border: 2px solid #22c55e !important;
  box-shadow: 0 0 28px rgba(34,197,94,.7), 0 0 12px rgba(34,197,94,.4) inset !important;
  transform: scale(1.02);
}
:root[data-theme="dark"] #maintenance-services h2::after {
  background: linear-gradient(90deg, var(--accent), rgba(255,255,255,0));
}

/* ===== POP upgrades for #maintenance-services ===== */

/* Section heading accent */
#maintenance-services h2 {
  position: relative;
  display: inline-block;
  padding-bottom: 6px;
}
#maintenance-services h2::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), transparent);
  border-radius: 2px;
}

/* Better rhythm */
#maintenance-services .grid { gap: 20px; }
#maintenance-services .card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
#maintenance-services .box { transition: background-color .2s ease, border-color .2s ease; }

/* Lift + shadow on hover */
#maintenance-services .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 42px rgba(0,0,0,.18);
  border-color: color-mix(in srgb, var(--accent), var(--border) 70%);
}

/* Make lists breathe a touch */
#maintenance-services li { margin: 6px 0 !important; }

/* Badges a tad bolder */
#maintenance-services .badge {
  box-shadow: 0 6px 16px rgba(14,165,233,.25);
}

/* HERO emphasis */
#maintenance-services .card.hero {
  transform: translateY(0);
  box-shadow: 0 18px 50px rgba(34,197,94,.30) !important;
}
#maintenance-services .card.hero:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(34,197,94,.36) !important;
}

/* Box contrast per theme */
:root[data-theme="light"] #maintenance-services .box {
  background: #f1f5f9 !important;
  border-color: color-mix(in srgb, #94a3b8, white 30%) !important;
}
:root[data-theme="dark"] #maintenance-services .box {
  background: color-mix(in srgb, var(--card), black 14%) !important;
  border-color: color-mix(in srgb, var(--border), white 10%) !important;
}

/* Tiny star sparkle effect for badges Best label */
#maintenance-services .best {
  box-shadow: 0 8px 20px rgba(255,255,255,.20);
}

/* Slightly larger price to scan quickly */
#maintenance-services .price { font-size: 22px !important; }