/*
 * SANDS Theme mode surfaces - v0.1.5
 *
 * The original AutoDetail markup mixes neutral sections with intentionally
 * dark media/contrast sections. Theme mode is therefore applied by surface,
 * not by one global text color. This keeps Light and Dark readable without
 * changing page markup or source content.
 */

/* --------------------------------------------------------------------------
   Shared mode tokens
   -------------------------------------------------------------------------- */
body.sands-theme-dark {
  --sands-surface-page: #121212;
  --sands-surface-section: #121212;
  --sands-surface-raised: #1b1b1b;
  --sands-surface-card: #222222;
  --sands-text-heading: #ffffff;
  --sands-text-body: rgba(255, 255, 255, .78);
  --sands-text-muted: rgba(255, 255, 255, .62);
  --sands-border: rgba(255, 255, 255, .18);
  --sands-control-bg: rgba(255, 255, 255, .055);
  --sands-on-dark-body: rgba(255, 255, 255, .82);
}

body.sands-theme-light {
  --sands-surface-page: #ffffff;
  --sands-surface-section: #ffffff;
  --sands-surface-raised: #f7f7f7;
  --sands-surface-card: #f1f1f1;
  --sands-text-heading: #111111;
  --sands-text-body: #555b63;
  --sands-text-muted: #72777f;
  --sands-border: rgba(18, 18, 18, .14);
  --sands-control-bg: rgba(18, 18, 18, .035);
  --sands-on-dark-body: rgba(255, 255, 255, .82);
}

/* --------------------------------------------------------------------------
   DARK MODE - default project mode
   -------------------------------------------------------------------------- */
body.sands-theme-dark,
body.sands-theme-dark #content {
  background-color: var(--sands-surface-page);
  color: var(--sands-text-body);
}

/* Convert neutral/light content surfaces to Dark Mode. Keep red CTA and
   explicit dark variants intact. */
body.sands-theme-dark #content > section:not(.bg-color):not(.bg-dark):not(.bg-dark-1):not(.bg-dark-2):not(.bg-dark-3):not(.section-dark) {
  background-color: var(--sands-surface-section);
}

body.sands-theme-dark #content section.bg-light,
body.sands-theme-dark #content section.bg-white {
  background-color: var(--sands-surface-section) !important;
}

body.sands-theme-dark #content .bg-light,
body.sands-theme-dark #content .bg-white {
  background-color: var(--sands-surface-raised) !important;
}

body.sands-theme-dark #content section.bg-dark,
body.sands-theme-dark #content section.bg-dark-1 {
  background-color: var(--bg-dark-1) !important;
}

body.sands-theme-dark #content section.bg-dark-2 {
  background-color: var(--bg-dark-2) !important;
}

body.sands-theme-dark #content section.bg-dark-3 {
  background-color: var(--bg-dark-3) !important;
}

body.sands-theme-dark #content section.bg-color {
  background-color: var(--primary-color) !important;
}

/* Headings and ordinary copy must never remain black on a dark surface. */
body.sands-theme-dark #content h1,
body.sands-theme-dark #content h2,
body.sands-theme-dark #content h3,
body.sands-theme-dark #content h4,
body.sands-theme-dark #content h5,
body.sands-theme-dark #content h6,
body.sands-theme-dark #content .h1,
body.sands-theme-dark #content .h2,
body.sands-theme-dark #content .h3,
body.sands-theme-dark #content .h4,
body.sands-theme-dark #content .h5,
body.sands-theme-dark #content .h6 {
  color: var(--sands-text-heading);
}

body.sands-theme-dark #content p,
body.sands-theme-dark #content li,
body.sands-theme-dark #content label,
body.sands-theme-dark #content .lead,
body.sands-theme-dark #content .small,
body.sands-theme-dark #content small,
body.sands-theme-dark #content .form-text,
body.sands-theme-dark #content .accordion-section-content,
body.sands-theme-dark #content .text-dark,
body.sands-theme-dark #content .text-dark p {
  color: var(--sands-text-body) !important;
}

body.sands-theme-dark #content a:not(.btn-main):not(.btn-line):not(.id-color),
body.sands-theme-dark #content .de__pcard,
body.sands-theme-dark #content .de__pcard a {
  color: var(--sands-text-body);
}

body.sands-theme-dark #content .subtitle:not(.id-color) {
  color: var(--sands-text-heading);
}

/* Cards / partner surfaces. */
body.sands-theme-dark #content .sands-partner-card,
body.sands-theme-dark #content .sands-logo-tile,
body.sands-theme-dark #content .supplier-shell,
body.sands-theme-dark #content .de__pcard {
  border-color: var(--sands-border);
}

/* Accordion contrast. */
body.sands-theme-dark #content .accordion-section-title {
  color: var(--sands-text-heading);
  border-bottom-color: var(--sands-border) !important;
}

body.sands-theme-dark #content .accordion-section-title::before {
  color: var(--sands-text-heading);
}

/* Forms and selects. */
body.sands-theme-dark #content .form-control,
body.sands-theme-dark #content input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
body.sands-theme-dark #content textarea,
body.sands-theme-dark #content select {
  color: var(--sands-text-heading);
  background-color: var(--sands-control-bg);
  border-color: var(--sands-border);
}

body.sands-theme-dark #content input::placeholder,
body.sands-theme-dark #content textarea::placeholder {
  color: var(--sands-text-muted);
  opacity: 1;
}

body.sands-theme-dark #content select option {
  color: #ffffff;
  background: var(--bg-dark-1);
}

body.sands-theme-dark #content .border-bottom,
body.sands-theme-dark #content .border-top {
  border-color: var(--sands-border) !important;
}

body.sands-theme-dark #content table,
body.sands-theme-dark #content .table {
  color: var(--sands-text-body);
  border-color: var(--sands-border);
}

/* --------------------------------------------------------------------------
   LIGHT MODE
   -------------------------------------------------------------------------- */
body.sands-theme-light,
body.sands-theme-light #content {
  background-color: var(--sands-surface-page);
  color: var(--sands-text-body);
}

/* Neutral sections are genuinely light. Dark utility sections that do NOT
   explicitly request light text and are not media/jarallax blocks become
   light surfaces as well. This gives Light Mode a clear visual separation. */
body.sands-theme-light #content > section:not(.bg-color):not(.section-dark):not(.jarallax):not(.text-light) {
  background-color: var(--sands-surface-section) !important;
}

body.sands-theme-light #content > section.bg-dark-2:not(.jarallax):not(.text-light),
body.sands-theme-light #content > section.bg-dark-3:not(.jarallax):not(.text-light) {
  background-color: var(--sands-surface-raised) !important;
}

body.sands-theme-light #content > section.section-dark {
  background-color: var(--bg-dark-1) !important;
}

/* Dark cards inside a light surface become elevated light cards. Image/media
   overlays with .text-light are excluded so captions stay white on imagery. */
body.sands-theme-light #content section:not(.text-light):not(.jarallax):not(.section-dark) .bg-dark:not(.text-light),
body.sands-theme-light #content section:not(.text-light):not(.jarallax):not(.section-dark) .bg-dark-1:not(.text-light) {
  background-color: var(--sands-surface-raised) !important;
}

body.sands-theme-light #content section:not(.text-light):not(.jarallax):not(.section-dark) .bg-dark-2:not(.text-light),
body.sands-theme-light #content section:not(.text-light):not(.jarallax):not(.section-dark) .bg-dark-3:not(.text-light) {
  background-color: var(--sands-surface-card) !important;
}

body.sands-theme-light #content h1,
body.sands-theme-light #content h2,
body.sands-theme-light #content h3,
body.sands-theme-light #content h4,
body.sands-theme-light #content h5,
body.sands-theme-light #content h6,
body.sands-theme-light #content .h1,
body.sands-theme-light #content .h2,
body.sands-theme-light #content .h3,
body.sands-theme-light #content .h4,
body.sands-theme-light #content .h5,
body.sands-theme-light #content .h6 {
  color: var(--sands-text-heading);
}

body.sands-theme-light #content p,
body.sands-theme-light #content li,
body.sands-theme-light #content label,
body.sands-theme-light #content .lead,
body.sands-theme-light #content .small,
body.sands-theme-light #content small,
body.sands-theme-light #content .form-text,
body.sands-theme-light #content .accordion-section-content {
  color: var(--sands-text-body);
}

body.sands-theme-light #content a:not(.btn-main):not(.btn-line):not(.id-color) {
  color: var(--sands-text-body);
}

body.sands-theme-light #content .subtitle:not(.id-color) {
  color: var(--sands-text-heading);
}

/* Intentionally dark/media surfaces stay dark in Light Mode. They need their
   own light typography instead of inheriting the page's dark text. */
body.sands-theme-light #content section.text-light,
body.sands-theme-light #content section.section-dark,
body.sands-theme-light #content section.jarallax.bg-dark,
body.sands-theme-light #content section.jarallax.bg-dark-1,
body.sands-theme-light #content section.jarallax.bg-dark-2,
body.sands-theme-light #content section.jarallax.bg-dark-3 {
  color: var(--sands-on-dark-body);
}

body.sands-theme-light #content section.text-light h1,
body.sands-theme-light #content section.text-light h2,
body.sands-theme-light #content section.text-light h3,
body.sands-theme-light #content section.text-light h4,
body.sands-theme-light #content section.text-light h5,
body.sands-theme-light #content section.text-light h6,
body.sands-theme-light #content section.section-dark h1,
body.sands-theme-light #content section.section-dark h2,
body.sands-theme-light #content section.section-dark h3,
body.sands-theme-light #content section.section-dark h4,
body.sands-theme-light #content section.section-dark h5,
body.sands-theme-light #content section.section-dark h6,
body.sands-theme-light #content section.jarallax.bg-dark h1,
body.sands-theme-light #content section.jarallax.bg-dark h2,
body.sands-theme-light #content section.jarallax.bg-dark h3,
body.sands-theme-light #content section.jarallax.bg-dark h4,
body.sands-theme-light #content section.jarallax.bg-dark h5,
body.sands-theme-light #content section.jarallax.bg-dark h6,
body.sands-theme-light #content section.jarallax.bg-dark-1 h1,
body.sands-theme-light #content section.jarallax.bg-dark-1 h2,
body.sands-theme-light #content section.jarallax.bg-dark-1 h3,
body.sands-theme-light #content section.jarallax.bg-dark-1 h4,
body.sands-theme-light #content section.jarallax.bg-dark-1 h5,
body.sands-theme-light #content section.jarallax.bg-dark-1 h6,
body.sands-theme-light #content section.jarallax.bg-dark-2 h1,
body.sands-theme-light #content section.jarallax.bg-dark-2 h2,
body.sands-theme-light #content section.jarallax.bg-dark-2 h3,
body.sands-theme-light #content section.jarallax.bg-dark-2 h4,
body.sands-theme-light #content section.jarallax.bg-dark-2 h5,
body.sands-theme-light #content section.jarallax.bg-dark-2 h6,
body.sands-theme-light #content section.jarallax.bg-dark-3 h1,
body.sands-theme-light #content section.jarallax.bg-dark-3 h2,
body.sands-theme-light #content section.jarallax.bg-dark-3 h3,
body.sands-theme-light #content section.jarallax.bg-dark-3 h4,
body.sands-theme-light #content section.jarallax.bg-dark-3 h5,
body.sands-theme-light #content section.jarallax.bg-dark-3 h6 {
  color: #ffffff;
}

body.sands-theme-light #content section.text-light p,
body.sands-theme-light #content section.text-light li,
body.sands-theme-light #content section.section-dark p,
body.sands-theme-light #content section.section-dark li,
body.sands-theme-light #content section.jarallax.bg-dark p,
body.sands-theme-light #content section.jarallax.bg-dark li,
body.sands-theme-light #content section.jarallax.bg-dark-1 p,
body.sands-theme-light #content section.jarallax.bg-dark-1 li,
body.sands-theme-light #content section.jarallax.bg-dark-2 p,
body.sands-theme-light #content section.jarallax.bg-dark-2 li,
body.sands-theme-light #content section.jarallax.bg-dark-3 p,
body.sands-theme-light #content section.jarallax.bg-dark-3 li {
  color: var(--sands-on-dark-body);
}

/* Nested image overlays explicitly marked text-light remain white even when
   their parent section has been converted to a light surface. */
body.sands-theme-light #content .text-light,
body.sands-theme-light #content .text-light p,
body.sands-theme-light #content .text-light li,
body.sands-theme-light #content .text-white,
body.sands-theme-light #content .text-white p,
body.sands-theme-light #content .text-white li {
  color: var(--sands-on-dark-body);
}

body.sands-theme-light #content .text-light h1,
body.sands-theme-light #content .text-light h2,
body.sands-theme-light #content .text-light h3,
body.sands-theme-light #content .text-light h4,
body.sands-theme-light #content .text-light h5,
body.sands-theme-light #content .text-light h6,
body.sands-theme-light #content .text-white h1,
body.sands-theme-light #content .text-white h2,
body.sands-theme-light #content .text-white h3,
body.sands-theme-light #content .text-white h4,
body.sands-theme-light #content .text-white h5,
body.sands-theme-light #content .text-white h6 {
  color: #ffffff;
}

/* But a section that was converted from a dark utility surface to a light
   surface must use dark text even if a legacy section-level text-light class
   is absent/present indirectly. Keep explicit media text-light blocks above. */
body.sands-theme-light #content > section.bg-dark:not(.jarallax):not(.text-light) h1,
body.sands-theme-light #content > section.bg-dark:not(.jarallax):not(.text-light) h2,
body.sands-theme-light #content > section.bg-dark:not(.jarallax):not(.text-light) h3,
body.sands-theme-light #content > section.bg-dark:not(.jarallax):not(.text-light) h4,
body.sands-theme-light #content > section.bg-dark:not(.jarallax):not(.text-light) h5,
body.sands-theme-light #content > section.bg-dark:not(.jarallax):not(.text-light) h6,
body.sands-theme-light #content > section.bg-dark-1:not(.jarallax):not(.text-light) h1,
body.sands-theme-light #content > section.bg-dark-1:not(.jarallax):not(.text-light) h2,
body.sands-theme-light #content > section.bg-dark-1:not(.jarallax):not(.text-light) h3,
body.sands-theme-light #content > section.bg-dark-1:not(.jarallax):not(.text-light) h4,
body.sands-theme-light #content > section.bg-dark-1:not(.jarallax):not(.text-light) h5,
body.sands-theme-light #content > section.bg-dark-1:not(.jarallax):not(.text-light) h6,
body.sands-theme-light #content > section.bg-dark-2:not(.jarallax):not(.text-light) h1,
body.sands-theme-light #content > section.bg-dark-2:not(.jarallax):not(.text-light) h2,
body.sands-theme-light #content > section.bg-dark-2:not(.jarallax):not(.text-light) h3,
body.sands-theme-light #content > section.bg-dark-2:not(.jarallax):not(.text-light) h4,
body.sands-theme-light #content > section.bg-dark-2:not(.jarallax):not(.text-light) h5,
body.sands-theme-light #content > section.bg-dark-2:not(.jarallax):not(.text-light) h6,
body.sands-theme-light #content > section.bg-dark-3:not(.jarallax):not(.text-light) h1,
body.sands-theme-light #content > section.bg-dark-3:not(.jarallax):not(.text-light) h2,
body.sands-theme-light #content > section.bg-dark-3:not(.jarallax):not(.text-light) h3,
body.sands-theme-light #content > section.bg-dark-3:not(.jarallax):not(.text-light) h4,
body.sands-theme-light #content > section.bg-dark-3:not(.jarallax):not(.text-light) h5,
body.sands-theme-light #content > section.bg-dark-3:not(.jarallax):not(.text-light) h6 {
  color: var(--sands-text-heading);
}

/* Cards, accordion and form controls on light surfaces. */
body.sands-theme-light #content .sands-partner-card,
body.sands-theme-light #content .sands-logo-tile,
body.sands-theme-light #content .supplier-shell,
body.sands-theme-light #content .de__pcard {
  color: var(--sands-text-body);
  border-color: var(--sands-border);
}

body.sands-theme-light #content .accordion-section-title {
  color: var(--sands-text-heading);
  border-bottom-color: var(--sands-border) !important;
}

body.sands-theme-light #content .accordion-section-title::before {
  color: var(--sands-text-heading);
}

body.sands-theme-light #content .form-control,
body.sands-theme-light #content input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
body.sands-theme-light #content textarea,
body.sands-theme-light #content select {
  color: var(--sands-text-heading);
  background-color: var(--sands-control-bg);
  border-color: var(--sands-border);
}

body.sands-theme-light #content input::placeholder,
body.sands-theme-light #content textarea::placeholder {
  color: var(--sands-text-muted);
  opacity: 1;
}

body.sands-theme-light #content select option {
  color: #111111;
  background: #ffffff;
}

body.sands-theme-light #content .border-bottom,
body.sands-theme-light #content .border-top {
  border-color: var(--sands-border) !important;
}

body.sands-theme-light #content table,
body.sands-theme-light #content .table {
  color: var(--sands-text-body);
  border-color: var(--sands-border);
}

/* Red CTA surfaces always use white copy in both modes. */
body.sands-theme-dark #content section.bg-color,
body.sands-theme-light #content section.bg-color,
body.sands-theme-dark #content section.bg-color h1,
body.sands-theme-dark #content section.bg-color h2,
body.sands-theme-dark #content section.bg-color h3,
body.sands-theme-dark #content section.bg-color h4,
body.sands-theme-dark #content section.bg-color h5,
body.sands-theme-dark #content section.bg-color h6,
body.sands-theme-light #content section.bg-color h1,
body.sands-theme-light #content section.bg-color h2,
body.sands-theme-light #content section.bg-color h3,
body.sands-theme-light #content section.bg-color h4,
body.sands-theme-light #content section.bg-color h5,
body.sands-theme-light #content section.bg-color h6,
body.sands-theme-dark #content section.bg-color p,
body.sands-theme-light #content section.bg-color p {
  color: #ffffff;
}


/* Clubium Automotive managed branding: preserve the existing logo dimensions
   while switching only the media source for the active color mode. */
.sands-logo--light { display: none; }
body.sands-theme-dark .sands-logo--dark { display: inline-block; }
body.sands-theme-dark .sands-logo--light { display: none; }
body.sands-theme-light .sands-logo--dark { display: none; }
body.sands-theme-light .sands-logo--light { display: inline-block; }
#logo .sands-header-logo { height: auto; }

/* Warranty results inherit the approved Theme surfaces in both modes. */
body.sands-theme-dark .sands-warranty-result { border-color: var(--sands-border); }
body.sands-theme-light .sands-warranty-result { border-color: var(--sands-border); background: var(--sands-surface-card); color: var(--sands-text-body); }