/* 3Syxty dark theme for the Mobirise marketing pages.
 * Injected AFTER mbr-additional.css so it wins the cascade.
 * Recolours backgrounds + text only - images, layout, fonts and buttons
 * are left intact. Palette harmonised with /enquiry/ (landing.css). */

:root {
  --syxty-bg:    #0d0f12;
  --syxty-bg-2:  #15181d;
  --syxty-bg-3:  #1c2026;
  --syxty-line:  #2a2f37;
  --syxty-text:  #eef1f6;
  --syxty-muted: #aab2c0;
}

/* ---- page canvas (the white area between cards) ---- */
html,
body { background-color: var(--syxty-bg) !important; }
body { color: var(--syxty-text) !important; }

/* Darken every section's background COLOUR (keep the top nav + lead form,
 * which already style themselves). We deliberately leave background-image
 * untouched, so the hero / CTA photographs still show through - the dark
 * colour just sits underneath them. */
section:not(.menu):not(.syxty-lead) {
  background-color: var(--syxty-bg) !important;
}

/* Video blocks use a light gradient (a background-IMAGE), so the colour
 * rule above can't reach them - blank the gradient so they go dark too. */
section[id^="video"] { background-image: none !important; }

/* ---- card captions -> dark panels with a hairline for definition ---- */
.card-box,
.card-img { background-color: var(--syxty-bg-2) !important; }
.card-wrapper { border: 1px solid var(--syxty-line); }

/* ---- light text for copy + headings (buttons re-asserted below) ---- */
.mbr-section-title,
.mbr-section-subtitle,
.mbr-section-text,
.card-title,
.card-box,
h1, h2, h3, h4, h5, h6,
p, li, blockquote, td, th, label,
.display-1, .display-2, .display-4, .display-5, .display-7 {
  color: var(--syxty-text) !important;
}
.mbr-text { color: var(--syxty-muted) !important; }

/* Sections sitting over a photo (parallax hero): force white text with a
 * soft shadow so it stays legible over bright areas of the image. */
.mbr-parallax-background .mbr-text,
.mbr-parallax-background .mbr-section-title,
.mbr-parallax-background .mbr-section-subtitle,
.mbr-parallax-background h1,
.mbr-parallax-background h2,
.mbr-parallax-background h3,
.mbr-parallax-background h4,
.mbr-parallax-background p {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .55);
}

hr { border-color: var(--syxty-line) !important; opacity: .6; }

/* ---- preserve button readability (they also carry .display-* classes) ---- */
.btn-primary,
.btn-primary:active,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.active { color: #ffffff !important; }
.btn-white,
.btn-white:active { color: #1c2026 !important; }
.btn-white-outline { color: var(--syxty-text) !important; }

/* ---- shield the Iris chat widget (it ships its own light theme) ----
 * Give the widget a dark base text colour and let the text-bearing elements
 * the page theme touches inherit the widget's own colours (e.g. the iris
 * bubble's #1f2937, the user bubble's #fff) instead of the page's light text. */
.iris-widget { color: #1f2937; }
.iris-widget p,
.iris-widget li,
.iris-widget blockquote,
.iris-widget td,
.iris-widget th,
.iris-widget label,
.iris-widget h1, .iris-widget h2, .iris-widget h3,
.iris-widget h4, .iris-widget h5, .iris-widget h6 {
  color: inherit !important;
  text-shadow: none !important;
}