/* =========================================================
   RockSolid Concrete & Paving - dark.css
   Applied when <html data-theme="dark">.
   Most of the work is done by re-defining the CSS variables
   from style.css; a few components need targeted fixes.
   ========================================================= */

[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0d1015;
  --bg-alt: #12161c;
  --surface: #181d25;
  --text: #eceef1;
  --muted: #9aa3ae;
  --border: #272e39;

  --accent-soft: rgba(242, 107, 15, .16);
  --header-bg: rgba(13, 16, 21, .86);

  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);
}

/* Logo & header */
[data-theme="dark"] .logo { color: #fff; }
[data-theme="dark"] .site-header.scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, .5); }
[data-theme="dark"] .icon-btn,
[data-theme="dark"] .burger { background: var(--surface); }
[data-theme="dark"] .burger span { background: #fff; }

/* Photos feel less glaring in dark mode */
[data-theme="dark"] .hero-photo,
[data-theme="dark"] .about-photo,
[data-theme="dark"] .about-photo-sm,
[data-theme="dark"] .project-img { filter: brightness(.86) contrast(1.05); }
[data-theme="dark"] .about-photo-sm { border-color: var(--bg-alt); }

/* Buttons */
[data-theme="dark"] .btn-dark { background: #fff; color: var(--ink); }
[data-theme="dark"] .btn-dark:hover { background: var(--accent); color: #fff; }

/* Cards */
[data-theme="dark"] .trust-card,
[data-theme="dark"] .service-card,
[data-theme="dark"] .t-slider,
[data-theme="dark"] .t-score { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .service-num { color: #232a34; }
[data-theme="dark"] .service-card::before { background: linear-gradient(160deg, #222a35, #151a21); }
[data-theme="dark"] .trust-card:hover { border-color: var(--accent); }
[data-theme="dark"] .filter-btn { background: var(--surface); }
[data-theme="dark"] .filter-btn.active { background: var(--accent); }

/* Floating hero cards stay light for contrast; soften slightly */
[data-theme="dark"] .float-card { background: rgba(24, 29, 37, .96); color: #fff; border: 1px solid rgba(255, 255, 255, .1); }
[data-theme="dark"] .float-card small { color: var(--muted); }

/* Experience badge photo border */
[data-theme="dark"] .exp-badge { box-shadow: 0 16px 34px rgba(242, 107, 15, .3); }

/* Form */
[data-theme="dark"] .estimate-form { background: var(--surface); box-shadow: 0 20px 50px rgba(0, 0, 0, .55); border: 1px solid var(--border); }
[data-theme="dark"] .field input,
[data-theme="dark"] .field select,
[data-theme="dark"] .field textarea { background: #11151b; border-color: var(--border); color: var(--text); }
[data-theme="dark"] .field input::placeholder,
[data-theme="dark"] .field textarea::placeholder { color: #667080; }
[data-theme="dark"] .field input:focus,
[data-theme="dark"] .field select:focus,
[data-theme="dark"] .field textarea:focus { background: #0d1015; }
[data-theme="dark"] .form-status.ok { color: #52d98a; }

/* Dropdowns / mobile panel */
[data-theme="dark"] .dropdown { background: var(--surface); }
[data-theme="dark"] .tool-btn,
[data-theme="dark"] .dropdown { border-color: var(--border); }

@media (max-width: 1100px) {
  [data-theme="dark"] .nav { background: var(--surface); }
  [data-theme="dark"] .dropdown { background: var(--bg); }
  [data-theme="dark"] .tool-btn { background: var(--bg); }
}

/* Footer is already dark; make the divider a touch brighter */
[data-theme="dark"] .site-footer { background: #080a0e; }

/* Smooth theme switching on key surfaces */
.trust-card, .service-card, .t-slider, .t-score, .estimate-form, .dropdown, .nav, .icon-btn, .filter-btn {
  transition-property: background-color, border-color, color, box-shadow, transform;
  transition-duration: .3s;
}


/* =========================================================
   ABOUT PAGE (dark mode)
   ========================================================= */
[data-theme="dark"] .mv-card:not(.mv-card--dark),
[data-theme="dark"] .value-item { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .value-item { border-block-start-color: var(--accent); }
[data-theme="dark"] .mv-card--dark { background: linear-gradient(160deg, #222a35, #151a21); }
[data-theme="dark"] .story .about-photo-sm { border-color: var(--bg); }
[data-theme="dark"] .skill-tags li:hover { color: #fff; }

.mv-card, .value-item {
  transition-property: background-color, border-color, color, box-shadow, transform;
  transition-duration: .3s;
}

/* =========================================================
   CONTACT PAGE (dark mode)
   ========================================================= */
[data-theme="dark"] .promise-card,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .area-chip { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .faq-item.open { border-color: var(--accent); }
[data-theme="dark"] .promise-card { border-inline-start-color: var(--accent); }
[data-theme="dark"] .area-chip:hover { background: var(--accent); border-color: var(--accent); }
[data-theme="dark"] .area-search input { background: var(--surface); border-color: var(--border); color: var(--text); }
[data-theme="dark"] .area-search input:focus { border-color: var(--accent); }
[data-theme="dark"] .area-msg.ok { color: #52d98a; }
[data-theme="dark"] .contact-form { border-color: var(--border); }
[data-theme="dark"] .contact-form .field select option { background: var(--surface); color: var(--text); }
[data-theme="dark"] .hours-list li.closed span:last-child { color: #ff7a7e; }
[data-theme="dark"] .field .err-msg,
[data-theme="dark"] .field .req { color: #ff7a7e; }
[data-theme="dark"] .map-card { border-color: var(--border); filter: brightness(.92); }
[data-theme="dark"] .faq-q { color: var(--text); }
[data-theme="dark"] .faq-q:hover { color: var(--accent); }

.promise-card, .faq-item, .area-chip, .area-search input, .map-card {
  transition-property: background-color, border-color, color, box-shadow, transform;
  transition-duration: .3s;
}

/* =========================================================
   SERVICES PAGE (dark mode)
   ========================================================= */
[data-theme="dark"] .svc-photo { filter: brightness(.86) contrast(1.05); }
[data-theme="dark"] .svc-nav { background: var(--header-bg); border-color: var(--border); }
[data-theme="dark"] .svc-extras { background: var(--surface); border-color: var(--border); }

.svc-nav, .svc-extras {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: .3s;
}

/* =========================================================
   SERVICE DETAILS PAGES (dark mode)
   ========================================================= */
[data-theme="dark"] .sd-photo { filter: brightness(.86) contrast(1.05); }
[data-theme="dark"] .sd-fact,
[data-theme="dark"] .sd-other { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .sd-fact { border-inline-start-color: var(--accent); }

.sd-fact, .sd-other {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: .3s;
}


/* =========================================================
   SYSTEM PAGES (dark mode)  - 404.html, coming-soon.html
   ========================================================= */
[data-theme="dark"] .sys-help { background: var(--surface); border-color: var(--border); border-inline-start-color: var(--accent); }
[data-theme="dark"] .err-slab { background: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.6px) 0 0 / 15px 15px, linear-gradient(145deg, #3b424c, #1d232b 62%, #12161c); }
[data-theme="dark"] .cs-card { background: rgba(24, 29, 37, .72); border-color: rgba(255, 255, 255, .12); }
[data-theme="dark"] .cs-unit { background: rgba(24, 29, 37, .7); }
[data-theme="dark"] .sys-link:hover { color: #ffb070; }
@media (max-width: 640px) {
  [data-theme="dark"] .sys-help { border-color: var(--border); border-block-start-color: var(--accent); }
}


/* =========================================================
   PROJECTS / GALLERY PAGE (dark mode)
   ========================================================= */
[data-theme="dark"] .ba-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .ba-img { filter: brightness(.86) contrast(1.05); }
[data-theme="dark"] .gal-filter { border-color: var(--border); }
[data-theme="dark"] .gal-hint { color: #ffb070; }


/* =========================================================
   TESTIMONIALS PAGE (dark mode)
   ========================================================= */
[data-theme="dark"] .rv-summary,
[data-theme="dark"] .rv-card,
[data-theme="dark"] .pt-feature { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .rv-card:hover { border-color: var(--accent); }
[data-theme="dark"] .pt-tab { background: var(--surface); }
[data-theme="dark"] .pt-tab.active { background: var(--accent); }
[data-theme="dark"] .pt-photo { filter: brightness(.86) contrast(1.05); }
[data-theme="dark"] .avatar { background: #222a35; }


/* =========================================================
   HOME 2 PAGE (dark mode)
   ========================================================= */
[data-theme="dark"] .h2-pick,
[data-theme="dark"] .h2-svc,
[data-theme="dark"] .h2-why-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .h2-svc:hover,
[data-theme="dark"] .h2-why-card:hover { border-color: var(--accent); }
[data-theme="dark"] .h2-svc-photo { filter: brightness(.86) contrast(1.05); }
[data-theme="dark"] .h2-pick-link { background: rgba(242, 107, 15, .14); }
[data-theme="dark"] .h2-pick-link:hover { background: var(--accent); }
[data-theme="dark"] .h2-alt { background: var(--bg-alt); }