/* Dark theme, additions only, loaded last. Scoped under html.dark-mode.

   Rule for every entry below: a text-color change is only ever added
   alongside an explicit background-color change for that element's
   actual container — never a bare global `p, li, span, .text` rule.
   That blanket pattern is what caused the invisible/washed-out text
   bug: sections like .service-territory-section and .about-section
   kept their own light background (#f6f6f6 / #fff, set in style.css)
   while a global rule repainted their headings and body copy light
   grey, leaving pale text on a near-white card.

   Also: selectors here are scoped to the actual section a component
   lives in, not just the bare class name. Class names like
   .content-box and .icon-box are reused by unrelated parts of the
   theme (the hero text wrapper on the homepage, and the small
   checkmark icons in service feature lists) — styling them generically
   as "cards" painted a dark panel behind the hero headline and boxed
   the checkmarks. Neither is a card, so neither gets the treatment. */

html.dark-mode {
  --dm-bg: #121212;
  --dm-bg-alt: #1a1a1c;
  --dm-surface: #201f22;
  --dm-border: #343336;
  --dm-text: #cfcfd2;
  --dm-heading: #f5f5f6;
  --dm-muted: #9a9a9e;
}

/* ---------- theme toggle button ----------
   Fixed glass-on-dark style, the SAME in both themes. The button sits
   inside .header-lower / .sticky-header, which are solid black in
   light mode too — so its color can never depend on html.dark-mode.
   (Previously: color: var(--theme-color3), which resolves to pure
   black — invisible on the black header until dark mode was already
   on.) Modeled on the .dark-toggle button on smartlywebbed.com. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-left: 15px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  cursor: pointer;
  font-size: 16px;
  color: #fff;
  transition: background .2s ease, border-color .2s ease;
}
.theme-toggle:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); }
.theme-toggle__icon--sun { display: none; }
html.dark-mode .theme-toggle__icon--moon { display: none; }
html.dark-mode .theme-toggle__icon--sun { display: inline-block; }
.theme-toggle--sticky { margin-left: 10px; }

/* ---------- base page ---------- */
html.dark-mode body { background-color: var(--dm-bg) !important; color: var(--dm-text) !important; }
/* This is a fallback default for plain in-text links only. It's
   wrapped in :where() so it carries ZERO specificity — otherwise
   "html.dark-mode a" (2 type selectors + 1 class) actually beats
   most of the site's own button/CTA color rules like ".theme-btn"
   or ".header-phone-group a" (1 class, 0-1 type selectors), which
   silently dragged every link's text down to the grey body color
   in dark mode, site-wide. With :where(), any real color rule
   anywhere — dark-mode-specific or not — wins as intended. */
:where(html.dark-mode) a { color: inherit; }
/* .btn-style-two (the white pill "24/7 Emergency Line" button) sets
   its own dark text color in style.css, but the bare `a { color:
   inherit }` above outranks it and pulls in the surrounding hero
   text's white — white text on a white button. Its own background
   never changes with theme, so its text shouldn't either. */
html.dark-mode .btn-style-two,
html.dark-mode .btn-style-two .btn-title { color: var(--theme-color-dark) !important; }
/* style.css hardcodes `b, strong { color: #333; }` site-wide. That's an
   element's own color, so it always wins over an inherited color from
   a lighter-text parent (e.g. the bold company names inside .text
   blocks on the homepage and About page) — it was staying dark grey
   against the dark background everywhere a <b>/<strong> appeared. */
html.dark-mode b,
html.dark-mode strong { color: inherit !important; }

/* ---------- header ----------
   header-top keeps its brand orange (#f2541f, set in style.css) in
   both themes — that's a deliberate brand color bar, not something
   dark mode should flatten to grey. Only header-lower / sticky-header
   (already black-on-black by design) get the dark-mode surface tone. */
html.dark-mode .header-lower,
html.dark-mode .sticky-header { background-color: var(--dm-bg-alt) !important; border-color: var(--dm-border) !important; }
html.dark-mode .navigation > li > a { color: var(--dm-heading) !important; }
html.dark-mode .navigation > li > ul,
html.dark-mode .navigation > li .dropdown-menu { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; }
html.dark-mode .navigation > li > ul > li > a { color: var(--dm-text) !important; }
/* header-phone-group keeps its brand-orange pill / white text in both
   themes too, same reasoning as header-top above — it's a CTA, not
   a surface that should flatten to grey. No override needed here:
   the :where()-wrapped `a { color: inherit }` rule above now has
   zero specificity, so custom-overrides.css's own
   ".header-phone-group a { color: white }" rule wins on its own. */

/* ---------- mobile menu ---------- */
html.dark-mode .mobile-menu .menu-box { background-color: var(--dm-surface) !important; }
html.dark-mode .mobile-menu .navigation li a { color: var(--dm-text) !important; border-color: var(--dm-border) !important; }
html.dark-mode .mobile-menu .contact-info-box .title { color: var(--dm-heading) !important; }
html.dark-mode .mobile-menu .contact-info-box,
html.dark-mode .mobile-menu .contact-info-box a { color: var(--dm-text) !important; }

/* ---------- real card components only ----------
   .content-box and .icon-box deliberately excluded — see file header. */
html.dark-mode .brands-card { border-color: rgba(255, 255, 255, 0.14) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important; }
html.dark-mode .service-block .inner-box,
html.dark-mode .team-card,
html.dark-mode .review-card,
html.dark-mode .sidebar-widget,
html.dark-mode .contact-info-box {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}
html.dark-mode .service-block .title a,
html.dark-mode .team-card__details h3,
html.dark-mode .team-card__details .role,
html.dark-mode .team-card__details ul li,
html.dark-mode .acc-btn { color: var(--dm-heading) !important; }
html.dark-mode .team-card__details ul li strong { color: var(--dm-heading) !important; }

/* ---------- homepage: hero (banner-section-one) ----------
   Already white text over a photo by design in the base theme — no
   change needed. .content-box here stays transparent (see file header). */

/* ---------- homepage: "Our Introduction" (about-section) ----------
   No background of its own in style.css — sits directly on body, so
   pairing it explicitly (rather than relying on inheritance) keeps
   this correct even if something else in the stack sets an opaque
   background on a wrapping element. */
html.dark-mode .about-section { background-color: var(--dm-bg) !important; }
html.dark-mode .about-section .sec-title h2 { color: var(--dm-heading) !important; }
html.dark-mode .about-section .sec-title h2 .color1 { color: var(--theme-color1) !important; }
html.dark-mode .about-section .sec-title .sub-title { color: var(--theme-color1) !important; }
html.dark-mode .about-section .text { color: var(--dm-text) !important; }

/* ---------- homepage: services marquee band ----------
   .services-marquee is just the scroll viewport/track wrapper — it has
   no background of its own in style.css, so leave it untouched and let
   the section behind it show through. Dark styling applies only to the
   individual cards (.service-block .inner-box, already covered above)
   and their text, never to the marquee track itself. */
html.dark-mode .service-block .lower-content { background-color: var(--dm-surface) !important; }
html.dark-mode .service-block .title a,
html.dark-mode .service-block .text { color: var(--dm-text) !important; }
html.dark-mode .service-section .sec-title.light h2,
html.dark-mode .service-section .sec-title.light .text { color: #fff !important; }

/* ---------- homepage: "Comprehensive Service Offerings" / why-choose-us /
   emergency-cta ----------
   All three already render on solid black (--theme-color2 /
   --bg-theme-color2 both resolve to #000000 in style.css) with white
   text baked in — already dark by design, no change needed in either
   theme. */

/* ---------- homepage: Service Territory ----------
   .service-territory-section has its own explicit light background
   (var(--theme-light-background) = #f6f6f6), and .territory-box (the
   white card holding the city list) has an explicit background:#fff.
   Both need an explicit override — this is the section from the
   screenshot with pale text on a near-white card. */
html.dark-mode .service-territory-section { background-color: var(--dm-bg) !important; }
html.dark-mode .service-territory-section .sec-title h2 { color: var(--dm-heading) !important; }
html.dark-mode .service-territory-section .sec-title h2 .color1 { color: var(--theme-color1) !important; }
html.dark-mode .service-territory-section .sec-title .sub-title { color: var(--theme-color1) !important; }
html.dark-mode .service-territory-section .sec-title .text { color: var(--dm-text) !important; }
html.dark-mode .territory-box { background: var(--dm-surface) !important; border-color: var(--dm-border) !important; }
html.dark-mode .territory-list li { color: var(--dm-text) !important; }

/* ---------- inner pages: page-title hero band ----------
   Already a photo background with a dark overlay and white h1 by
   design — no change needed in either theme. */

/* ---------- inner pages: services-details (about-us.php, service
   detail pages) ----------
   No background of its own — sits on body. */
html.dark-mode .services-details { background-color: var(--dm-bg) !important; }
html.dark-mode .services-details .sec-title h2,
html.dark-mode .services-details h2,
html.dark-mode .services-details h3 { color: var(--dm-heading) !important; }
html.dark-mode .services-details .sec-title .text,
html.dark-mode .services-details .text { color: var(--dm-text) !important; }
html.dark-mode .services-details__content .feature-list .single-item {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}
html.dark-mode .services-details__content .feature-list .single-item .title { color: var(--dm-heading) !important; }
/* .icon-box (the checkmark) is intentionally untouched — see file header */

/* ---------- inner pages: service-sidebar ("Quick Access" + "Not
   Sure?" cards on service detail pages) ----------
   Both widgets keep style.css's light/cream card look in every theme
   (they're on the same white page background regardless of mode), so
   they need their own dark surface + text instead of the page's
   default dark background bleeding through around them. */
html.dark-mode .service-sidebar-single-services {
  background-color: var(--dm-surface) !important;
}
html.dark-mode .service-sidebar-single-services .title h3 { color: var(--dm-heading) !important; }
html.dark-mode .service-sidebar-single-services .title h3::after { background: var(--theme-color1) !important; }
html.dark-mode .service-sidebar-single-services ul li a { color: var(--dm-text) !important; }
html.dark-mode .service-sidebar-single-services ul li a:hover,
html.dark-mode .service-sidebar-single-services ul li.current a { color: #fff !important; }
html.dark-mode .service-sidebar-single-contact-box .title h2 { color: #fff !important; }
html.dark-mode .service-sidebar-single-contact-box p { color: var(--dm-text) !important; }

/* ---------- inner pages: FAQ (innerpage + accordion) ----------
   .innerpage itself sits on body; .accordion-box .block already has
   its own explicit white background in style.css and was already
   handled correctly here. */
html.dark-mode .innerpage { background-color: var(--dm-bg) !important; }
html.dark-mode .innerpage .accordion-box .block {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
}
html.dark-mode .innerpage .accordion-box .block .acc-btn { color: var(--dm-text) !important; }
html.dark-mode .innerpage .accordion-box .block .acc-content { color: #fff !important; }
html.dark-mode .innerpage .accordion-box .block .acc-content { background-color: var(--dm-surface) !important; }
html.dark-mode .innerpage .accordion-box .block .acc-content .content .text h6,
html.dark-mode .innerpage .accordion-box .block .acc-content .content .text ul li,
html.dark-mode .innerpage .accordion-box .block .acc-content .content .text p { color: #fff !important; }

/* ---------- inner pages: FAQ category tabs (faq-tabs-wrap) ----------
   New markup added directly in faq.php on top of the theme's
   .default-tabs component, which wasn't used anywhere else on the
   site — so dark-mode.css never had a reason to cover it before.
   Inactive pills were solid black-on-black (invisible against the
   dark page background); .active-btn already turns white with
   orange text in style.css and needs no dark-mode change. The
   .tabs-content card kept its light-mode white background from
   custom-overrides.css, so it's reset to match .innerpage here. */
html.dark-mode .faq-tabs-wrap .tab-buttons li:not(.active-btn) {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text) !important;
  border: 1px solid var(--dm-border);
}
html.dark-mode .faq-tabs-wrap .tabs-content {
  background-color: var(--dm-bg) !important;
  border-color: var(--dm-border) !important;
}

/* ---------- inner pages: Testimonials (reviews-section) ----------
   No background of its own — sits on body. */
html.dark-mode .reviews-section { background-color: var(--dm-bg) !important; }
html.dark-mode .reviews-section h2 { color: #f2541f !important; }
html.dark-mode .review-card .text,
html.dark-mode .review-card p { color: var(--dm-text) !important; }

/* ---------- Request a Quote: contact-details ----------
   No background of its own — sits on body. */
html.dark-mode .contact-details { background-color: var(--dm-bg) !important; }
html.dark-mode .contact-details .sec-title h2 { color: var(--dm-heading) !important; }
html.dark-mode .contact-details .sec-title .text { color: var(--dm-text) !important; }
html.dark-mode .contact_details__info01 {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}
html.dark-mode .contact_details__info01 .text h6 { color: var(--dm-heading) !important; }
html.dark-mode .quote-form-card {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

/* ---------- homepage: "Get in touch with us" (contact-section) ----------
   No background of its own — sits on body. */
html.dark-mode .contact-section { background-color: var(--dm-bg) !important; }
html.dark-mode .contact-section .sec-title h2 { color: var(--dm-heading) !important; }
html.dark-mode .contact-section .sec-title .text,
html.dark-mode .contact-section .text { color: var(--dm-text) !important; }

/* ---------- forms (quote form, homepage contact form) ---------- */
html.dark-mode .form-control,
html.dark-mode .form-select,
html.dark-mode textarea.form-control,
html.dark-mode select {
  background-color: var(--dm-surface) !important;
  border-color: var(--dm-border) !important;
  color: var(--dm-text) !important;
}
html.dark-mode ::placeholder { color: var(--dm-muted) !important; }
html.dark-mode #quote_form .form-control,
html.dark-mode #quote_form .form-select,
html.dark-mode #quote_form textarea.form-control,
html.dark-mode .contact-form .form-group input:not([type=submit]),
html.dark-mode .contact-form .form-group select,
html.dark-mode .contact-form .form-group textarea {
  background-color: var(--dm-surface) !important;
  color: var(--dm-text) !important;
  border-color: var(--theme-color1) !important;
}
html.dark-mode #quote_form .form-control:focus,
html.dark-mode #quote_form .form-select:focus,
html.dark-mode #quote_form textarea.form-control:focus,
html.dark-mode .contact-form .form-group input:not([type=submit]):focus,
html.dark-mode .contact-form .form-group select:focus,
html.dark-mode .contact-form .form-group textarea:focus {
  background-color: var(--dm-surface) !important;
  border-color: var(--theme-color1) !important;
  box-shadow: 0 0 0 4px rgba(242, 84, 31, 0.3) !important;
}

/* ---------- footer ----------
   .main-footer is already #110c1b (near-black) by design in both
   themes — this only nudges it slightly darker/consistent with the
   rest of the dark palette and keeps footer text readable. */
html.dark-mode .main-footer,
html.dark-mode .footer-bottom { background-color: #0c0c0d !important; border-color: var(--dm-border) !important; }
html.dark-mode .main-footer .widget-title,
html.dark-mode .footer-widget h4 { color: var(--dm-heading) !important; }
html.dark-mode .main-footer a,
html.dark-mode .main-footer li,
html.dark-mode .main-footer .text { color: var(--dm-muted) !important; }
/* .social-icon-two are circular icon buttons on their own solid
   background (orange/near-black), not muted text — the blanket
   ".main-footer a" rule above would otherwise grey them out too,
   since !important rules are decided by specificity, not source
   order, this needs one more class to outrank it. On :hover the
   button's background flips to white (style.css), so the icon
   itself must flip to the orange brand color there, or it's a
   white blotch — white icon on a white circle. */
html.dark-mode .main-footer .social-icon-two a { color: var(--theme-color-light) !important; }
html.dark-mode .main-footer .social-icon-two a:hover { color: var(--theme-color1) !important; }

/* keep photos and the logo at full brightness */
html.dark-mode img { filter: none; }