@charset "UTF-8";

.dark {
  --primary: #f2f2f2;          /* headings, primary text, active states */
  --secondary: #a8a8a8;        /* body / muted text */
  --border: rgba(255, 255, 255, 0.14);
  --bg: #0d0d0d;

  /* dark-mode-only surface tokens (used further down) */
  --dm-page: #0d0d0d;          /* page background            */
  --dm-surface: #171717;       /* cards / raised sections     */
  --dm-surface-2: #1f1f1f;     /* alt / hover surface         */
  --dm-line: rgba(255, 255, 255, 0.14);
  --dm-line-soft: rgba(255, 255, 255, 0.08);
  --dm-text: #f2f2f2;
  --dm-muted: #a8a8a8;
  --dm-faint: #7c7c7c;
}


/* ---------------------------------------------------------
   2. PAGE BACKGROUND
   Robust regardless of which element carries the .dark class.
--------------------------------------------------------- */
html.dark,
body.dark,
.dark .body-wrapper,
.body-wrapper.dark {
  background-color: var(--dm-page);
}

.dark body,
.body-wrapper.dark {
  color: var(--dm-muted);
}


/* ---------------------------------------------------------
   3. BACKGROUND UTILITIES  (were light greys / white)
--------------------------------------------------------- */
.dark .theme-bg-white { background-color: var(--dm-surface); }
.dark .rr-bg-gray,
.dark .rr-bg-light,
.dark .rr-bg-light-gray { background-color: var(--dm-surface); }

/* --primary flips to a light color, so surfaces painted with it
   become light chips with dark text sitting on them — keep that
   text dark for contrast. */
.dark .rr-bg-primary,
.dark .theme-bg-primary { color: #000; }

.dark .color-black { color: var(--dm-text); }   /* black text -> light */
/* .color-white stays white — correct on dark. */


/* ---------------------------------------------------------
   4. DIVIDERS & BORDERS
   Covers hr plus the very common #dadada / rgba(17,17,17,*)
   hairlines used across the theme.
--------------------------------------------------------- */
.dark hr {
  border-top-color: var(--dm-line);
}

.dark .line-divider-sm { background-color: var(--dm-line); }

.dark .parallax-view__content {
  border-bottom-color: var(--dm-line);
}
.dark .parallax-view__content p { color: var(--dm-text); }


/* ---------------------------------------------------------
   5. SCROLLBAR
--------------------------------------------------------- */
.dark ::-webkit-scrollbar-track { background: var(--dm-page); }
.dark ::-webkit-scrollbar-thumb { background: #e61e28; }
.dark ::-webkit-scrollbar-thumb:hover { background: #ffffff; }


/* ---------------------------------------------------------
   6. TEXT SELECTION
--------------------------------------------------------- */
.dark ::selection      { background-color: #ffffff; color: #000000; }
.dark ::-moz-selection { background-color: #ffffff; color: #000000; }


/* ---------------------------------------------------------
   7. PROJECT HIGHLIGHTS  (service-7 — the block in your HTML)
   Selectors are doubled so the "dark" class works whether it's
   on an ancestor (.dark .service-7__bg) OR directly on the
   <section> itself (.service-7__bg.dark).
--------------------------------------------------------- */
.dark .service-7__bg,
.service-7__bg.dark { background-color: var(--dm-page); }

/* When .dark sits on the section itself, define the palette
   variables here too so text/borders inside flip. */
.service-7__bg.dark {
  --primary: #f2f2f2;
  --secondary: #a8a8a8;
  --border: rgba(255, 255, 255, 0.14);
  --dm-page: #0d0d0d;
  --dm-surface: #171717;
  --dm-surface-2: #1f1f1f;
  --dm-line: rgba(255, 255, 255, 0.14);
  --dm-line-soft: rgba(255, 255, 255, 0.08);
  --dm-text: #f2f2f2;
  --dm-muted: #a8a8a8;
  --dm-faint: #7c7c7c;
}

/* Title & description already read from --primary / --secondary,
   so they flip automatically. Inactive list items stay mid-grey
   (readable on dark); the active item uses --primary (light). */
.dark .service-7__list li { color: var(--dm-faint); }
.dark .service-7__list li::before { background-color: var(--dm-faint); }
.dark .service-7__list li.active { color: var(--dm-text); }
.dark .service-7__list li.active::before { background-color: var(--dm-text); }

.dark .service-7__title,
.dark .service-7__list li,
.dark .service-7__list li:first-of-type {
  border-color: var(--dm-line-soft);
}


/* ---------------------------------------------------------
   8. OUTLINE BUTTONS (.dw-btn--outline)
   Base class may live in the main theme CSS; these make sure
   the outline variant stays visible on a dark background.
--------------------------------------------------------- */
.dark .dw-btn--outline {
  color: var(--dm-text);
  border-color: #f2f2f2;
}
.dark .dw-btn--outline:hover {
  color: #000;
  background-color: #ffffff;
  border-color: #ffffff;
}


/* ---------------------------------------------------------
   9. TEAM GRID (urban-team)
--------------------------------------------------------- */
.dark .urban-team__image { background: var(--dm-surface-2); }
.dark .urban-team__name-row { border-bottom-color: var(--dm-line); }
.dark .urban-team__name { color: var(--dm-text); }
.dark .urban-team__role { color: var(--dm-muted); }
.dark .urban-team__social i { color: rgba(255, 255, 255, 0.30); }
.dark .urban-team__social a:hover i { color: #ffffff; }


/* ---------------------------------------------------------
   10. EXPLORE CTA BAND (was a mid-grey #666 band)
   Already uses white text + white-alpha borders, so just
   darken the band itself.
--------------------------------------------------------- */
.dark .explore-cta { background-color: var(--dm-surface); }
.dark .explore-cta__link:hover {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #000;
}


/* ---------------------------------------------------------
   11. GENERIC SAFETY NETS
   Catches strong-emphasis text hard-coded to black.
--------------------------------------------------------- */
.dark li strong,
.dark li strong2 { color: var(--dm-text); }