/* ============ DARK MODE GLOBAL OVERRIDES ============ */
/* Forced pure black theme across all pages & inline styles */

html, body {
  background-color: #000000 !important;
  color: #FFFFFF !important;
}

/* --- TEXT & HEADINGS --- */
h1, h2, h3, h4, h5, h6,
p, span, li, td, th, label, a, strong, b, em, blockquote {
  color: #FFFFFF;
}

/* Soft muted text elements */
p, .hero-sub, .page-hero p, .svc-row p, .goal-card p, .b-card-1 p,
.cta-band p, .faq-a p, .f-brand p, .form-note, .crumb, .crumb *,
.prose p, .prose li, .prose blockquote p, .aside-card p, .toc-list a {
  color: rgba(255, 255, 255, 0.78) !important;
}

h1, h2, h3, h4, h5, h6,
.brand, .nav-links a, .goal-card h3, .svc-row h3, .price-card h3,
.faq-q, .b-stat b, .prose h1, .prose h2, .prose h3, .prose h4 {
  color: #FFFFFF !important;
}

/* --- ACCENTS & BRAND COLOR PRESERVATION --- */
.accent, .hero-title .accent, .b-card-1 h3 .accent, .goal-num,
.brand small, .svc-num, .f-contact svg, .p-feats svg, .crumb .sep,
.crumb a:hover, .nav-links a:hover, .f-col a:hover, .f-bottom a:hover,
.svc-more:hover, .prose a {
  color: var(--color-primary) !important;
}

/* --- NAVIGATION & HEADER --- */
/* Solid, not translucent. The pill used to be rgba(18,18,18,.85), which is
   only 85% opaque — on the two older article pages the inline <style> still
   asked for a white rgba behind it, so the bar could read as light grey.
   An opaque fill has nothing to blend with and cannot come out white.
   .nav-shell, .nav.scrolled and the plain .nav are all listed so no state
   and no wrapper is left pointing at the light value. */
.nav,
.nav-shell,
.nav-scrolled,
.nav.scrolled,
nav.nav {
  background: #0A0A0A !important;
  background-color: #0A0A0A !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.nav.scrolled {
  background: #000000 !important;
  background-color: #000000 !important;
}

.nav-links a {
  color: #FFFFFF !important;
}

.nav-links a:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}

.nav-links a.active {
  background: var(--color-primary) !important;
  color: #FFFFFF !important;
}

.nav-cta, .btn-secondary, .secondary-button, .google-reviews-btn, .cta-btn-light, .p-btn,
.toc .toc-cta a.toc-btn,
.result-video {
  background: #1A1A1A !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.nav-cta:hover, .btn-secondary:hover, .secondary-button:hover,
.google-reviews-btn:hover, .cta-btn-light:hover, .p-btn:hover,
.toc .toc-cta a.toc-btn:hover {
  background: var(--color-primary) !important;
  color: #FFFFFF !important;
  border-color: var(--color-primary) !important;
}

.burger {
  background: #1A1A1A !important;
}

.burger span {
  background: #FFFFFF !important;
}

.m-menu {
  background: #000000 !important;
  color: #FFFFFF !important;
}

.m-menu a.m-link {
  color: #FFFFFF !important;
  border-bottom-color: rgba(255, 255, 255, 0.14) !important;
}

/* --- CARDS & SURFACES --- */
.card, .bento-card, .svc-card, .price-card, .testi-card, .goal-card,
.res-card, .blog-card, .aside-card, .prose, .toc, .faq-item, .faq-box,
.review-card, .map-card, .enq-card, .testi-video-card, .video-card, .review-g {
  background: #111111 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
}

.price-sec, .why-sec, .marquee, .callout, .aside-card.dark, .b-card-1, .svc-cta {
  background: #0A0A0A !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.price-card.featured {
  background: #161616 !important;
  border: 1.5px solid var(--color-primary) !important;
}

.price-card.featured .p-btn {
  background: var(--color-primary) !important;
  color: #FFFFFF !important;
}

.price-card.featured .p-btn:hover {
  background: #FFFFFF !important;
  color: #000000 !important;
}

/* --- BADGES, CHIPS & CRUMBS --- */
.hero-tag, .chip, .crumb, .hero-badge, .res-tag, .enq-chip, .p-tag {
  background: #1A1A1A !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

.res-tag {
  background: rgba(30, 30, 30, 0.9) !important;
  color: #FFFFFF !important;
}

.btn-ghost {
  background: #1A1A1A !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
}

.btn-ghost:hover {
  background: #FFFFFF !important;
  color: #000000 !important;
}

/* --- FORMS & INPUTS --- */
input, select, textarea,
.cta-form input, .cta-form select, .cta-form textarea,
.enq-input, .iti {
  background: #1A1A1A !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
}

input:focus, select:focus, textarea:focus,
.cta-form input:focus, .cta-form select:focus, .cta-form textarea:focus, .iti:focus-within {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 4px rgba(225, 6, 0, 0.25) !important;
}

input::placeholder, textarea::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
}

.cta-form {
  background: rgba(20, 20, 20, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
}

/* --- TABLES & BLOG PROSE --- */
table, th, td {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

th {
  background: #1F1F1F !important;
  color: #FFFFFF !important;
}

tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.04) !important;
}

.prose blockquote {
  background: #161616 !important;
  border-left-color: var(--color-primary) !important;
}

.prose ol li::before {
  background: #1A1A1A !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.step {
  background: #161616 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.faq-q .plus {
  background: #222222 !important;
  color: var(--color-primary) !important;
}

.faq-item.open .plus {
  background: var(--color-primary) !important;
  color: #FFFFFF !important;
}

/* --- FOOTER --- */
footer {
  background: #050505 !important;
  color: #FFFFFF !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.f-grid {
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

.f-social a {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* --- MODALS & OVERLAYS --- */
.modal, .enq-modal, .enq-prefs-box {
  background: #121212 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* --- CONTACT FORM SECTION --- */
.enq-sec {
  background: #000000 !important;
}

.enq-card {
  background: #111111 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.enq-chip {
  background: #1A1A1A !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

.enq-chip:hover {
  border-color: rgba(255, 255, 255, 0.4) !important;
}

.enq-chip.active,
.enq-chip[aria-pressed="true"],
.enq-pref-lbl input:checked + .enq-chip {
  background: var(--color-primary) !important;
  color: #FFFFFF !important;
  border-color: var(--color-primary) !important;
}

.enq-chip-plus {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #FFFFFF !important;
}

.enq-chip[aria-pressed="true"] .enq-chip-plus {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
}

.enq-field label, .enq-label, .enq-label-note, .enq-hint,
.enq-prefs-box p, .enq-prefs-box .enq-optout,
.enq-form .enq-note {
  color: rgba(255, 255, 255, 0.6) !important;
}

.enq-prefs-box .enq-box-label {
  color: #FFFFFF !important;
}

.iti__country-list {
  background: #1A1A1A !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #FFFFFF !important;
}

.iti__country:hover, .iti__country.iti__highlight {
  background: #2A2A2A !important;
}

.enq-input:focus-within {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 4px rgba(225, 6, 0, 0.2) !important;
}

/* --- CONTACT FORM SPACING TIGHTENED --- */
.enq-form {
  gap: clamp(16px, 2vw, 24px) !important;
}
.enq-grid-2 {
  gap: 10px !important;
}
.enq-field {
  gap: 4px !important;
}

.enq-submit {
  background: var(--color-primary) !important;
  color: #FFFFFF !important;
}
.enq-submit:hover {
  background: var(--color-primary-dark) !important;
}

.map-ic {
  background: #1F1F1F !important;
}

.toc-inner, .review-pair, .map-sec {
  background: #111111 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

#how-it-works,
.why-sec {
  padding-top: clamp(70px, 8vw, 110px) !important;
  padding-bottom: clamp(70px, 8vw, 110px) !important;
  background: #0A0A0A !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.why-grid {
  max-width: 1100px !important;
  margin: 0 auto !important;
}

.review-pair img, .review-g img {
  background: #0A0A0A !important;
}

/* --- FIXES FROM AUDIT --- */
/* ALL .price-card descendants get light text on dark background. Non-featured
   cards had near-black rgba(8,8,8,...) values from components.css that are
   invisible against the #111111 dark-override background. */
.price-card h3,
.price-card p,
.price-card span,
.price-card li,
.price-card small,
.price-card b {
  color: #FFFFFF !important;
}

/* Secondary text: description, period label, feature list — dimmer than
   headings but still WCAG AA on #111111. */
.price-card .p-desc,
.price-card .p-price small {
  color: rgba(255, 255, 255, 0.6) !important;
}
.price-card .p-feats li {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* The "Enquire for pricing" prompt is a deliberate accent, not body copy, so
   it opts out of the blanket white applied to .price-card span above.
   !important because that rule has one too. */
.price-card .p-price--enquire {
  color: var(--color-primary) !important;
}

/* Badge: was background var(--peach) = #2D0A0A with color var(--coral).
   Red on near-black fails contrast; the badge is small text so it needs the
   solid brand fill. */
.price-card .p-tag {
  background: var(--color-primary) !important;
  color: #FFFFFF !important;
}

/* reset.css:25 — selected text was var(--color-cream) = black on the red
   highlight, so dragging to select made the text vanish. */
::selection {
  background: var(--color-primary) !important;
  color: #FFFFFF !important;
}

/* privacy.html / terms.html — "Return to Home" was background:var(--color-ink)
   (white) with color:#fff, i.e. white on white. */
.back-link {
  background: #1A1A1A !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.back-link:hover {
  background: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #FFFFFF !important;
}

/* ============ SAFETY NET: kill remaining light surfaces ============ */
/* Any element still painting a near-white background gets forced dark,
   whatever selector it lives under. Loaded last, so it wins. */
[style*="background:rgba(255,253,248"],
[style*="background:rgba(255, 253, 248"],
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background:#FFF"],
[style*="background: #FFF"],
[style*="background:#FFF8"],
[style*="background:rgba(255,255,255,0.9"],
.qa-item,
.qa-badge,
.stat-card,
.pill,
.badge,
.accordion,
.accordion-item,
.swiper-pagination-bullet,
.lazy-load-background,
.spinner {
  background: #111111 !important;
  color: #FFFFFF !important;
}

/* Text that inherited a now-black token must be forced white.
   Covers every inline <style> rule that still reads var(--cream). */
[style*="color:var(--cream)"],
[style*="color:var(--color-cream)"] {
  color: #FFFFFF !important;
}

/* Inline SVGs inherit currentColor — guarantee the colour is never black
   even when an ancestor rule sets a hardcoded dark value.
   NOTE: never force `fill` — solid brand glyphs (YouTube/TikTok) rely on it. */
svg[stroke="currentColor"] {
  stroke: currentColor;
  fill: none;
}
svg[fill="currentColor"] {
  fill: currentColor;
}
.social-mark {
  stroke: currentColor;
  fill: none;
}
.f-contact svg,
.p-feats svg,
.mq-item svg,
.chip svg {
  stroke: currentColor;
  fill: none;
  color: var(--color-primary);
}