/* --- MASSIVE DARK THEME OVERRIDE WITH TEXTURE --- */
:root {
  --background: 14, 11%, 11%;
  --foreground: 41, 33%, 90%;
  --card: 14, 11%, 11%;
  --card-foreground: 41, 33%, 90%;
  --popover: 14, 11%, 11%;
  --popover-foreground: 41, 33%, 90%;
  --primary: 38, 26%, 63%;
  --primary-foreground: 14, 11%, 11%;
  --secondary: 104, 7%, 33%;
  --secondary-foreground: 41, 33%, 90%;
  --muted: 104, 7%, 33%;
  --muted-foreground: 85, 9%, 45%;
  --accent: 38, 26%, 63%;
  --accent-foreground: 14, 11%, 11%;
  --border: 104, 7%, 33%;
}

/* Global Background - Textured Multi-Color */
body, html, main, section, .section-lg, .section-muted, .section-primary {
  background-color: #35372d !important;
  background-image: url('/images/wallpaper.jpg') !important;
  background-repeat: repeat !important;
  background-size: 400px auto !important;
  background-attachment: fixed !important;
  color: #EEE8DD !important;
}

/* Blog Page Exception - Solid Color for Readability */
body.blog-page, body.blog-page main, body.blog-page section {
  background-image: none !important;
  background-color: #35372d !important;
}

/* Smoky Olive cards for subpages */
.card, .county-card, .service-card, .testimonial-card, .cta-card, .map-frame, .callout-box, .bg-card, .bg-muted, .bg-accent-soft, .bg-card-soft, .bg-muted-soft {
  background-color: rgba(78, 88, 77, 0.95) !important; /* Smoky Olive (#4E584D) slightly transparent */
  color: #EEE8DD !important; 
  border-color: #B9AA89 !important; 
  box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}

/* Default headers are Ivory for dark backgrounds */
h1, h2, h3, h4, h5, h6, .text-dark-green {
  color: #EEE8DD !important;
}

.site-header .brand-name, .brand-name {
  color: #000000 !important;
  display: inline !important;
  font-size: clamp(1.45rem, 3.5vw, 2.5rem) !important;
  white-space: nowrap !important;
  font-family: 'Lora', Georgia, serif !important;
  font-style: italic !important;
  font-weight: 700 !important;
}

/* Headers and text inside cards will inherit the global Ivory color */

/* Base text on dark background */
p, span, li, .muted-text {
  color: #EEE8DD !important;
}
a, button, .btn {
  color: #B9AA89 !important;
  border-color: #B9AA89 !important;
}

/* Solid Buttons */
.btn-primary, .btn-on-primary,
a.btn-primary, button.btn-primary,
a.btn-on-primary, button.btn-on-primary {
  background-color: #B9AA89 !important;
  color: #000000 !important;
  border-color: #B9AA89 !important;
}

[style*="background: linear-gradient"], [style*="background:linear-gradient"] {
  background: transparent !important; /* Let the global texture show through */
}

.site-header nav img, .site-header .logo img { display: none !important; }

/* Nav Bar Default Links */
.site-header nav a:not(.btn), nav a:not(.btn) {
  color: #000000 !important;
}

/* Nav Bar Active/Hover Links */
.site-header nav a.active, nav a.active,
.site-header nav a:hover:not(.btn), nav a:hover:not(.btn) { 
  color: #B9AA89 !important; 
  text-shadow: none !important; 
}

/* Mobile Menu Toggle (Hamburger / 3 Lines Icon) styling */
.menu-toggle {
  color: #141615 !important;
}
.menu-toggle svg {
  color: #141615 !important;
  stroke: #141615 !important;
}
.menu-toggle svg line {
  stroke: #141615 !important;
  stroke-width: 2.5px !important;
}

/* Only hide the second logo (the shield / bottom-left logo) */
.brand-logo-decor.bottom-left,
img[src*="sanctuary-cleaning-logo-shield.webp"] {
  display: none !important;
}

/* Phone number highlighting */
a[href^="tel:"]:not(.btn) { color: #B9AA89 !important; }

/* ------------------------------------------------------------- */
/* OVERRIDE FOR INLINE-STYLED WHITE/IVORY HERO BOXES           */
/* ------------------------------------------------------------- */
div[style*="background-color:rgba(253, 251, 247"],
div[style*="background-color: rgba(253, 251, 247"],
div[style*="background-color:#FDFBF7"],
div[style*="background-color: #FDFBF7"],
div[style*="background-color:#FFFFFF"],
div[style*="background-color: #FFFFFF"],
div[style*="background-color:rgba(255, 255, 255"],
div[style*="background-color: rgba(255, 255, 255"],
div[style*="background-color:#F3EFE7"],
div[style*="background-color: #F3EFE7"],
div[style*="background-color: #f3efe7"],
div[style*="background-color:#f3efe7"] {
  background-color: rgba(78, 88, 77, 0.95) !important; /* Smoky Olive */
  border-color: #B9AA89 !important; 
  box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}

/* --- FORCE LEGIBLE DARK TEXT & HEADINGS INSIDE WHITE/LIGHT CONTAINERS --- */
/* Target any elements inside containers that have inline styles of #ffffff, #FDFBF7, #F3EFE7 or their React-serialized equivalents */
div[style*="#ffffff"] p, div[style*="#ffffff"] span, div[style*="#ffffff"] li, div[style*="#ffffff"] strong,
div[style*="#ffffff"] a:not(.btn), div[style*="rgb(255, 255, 255)"] p, div[style*="rgb(255, 255, 255)"] span,
div[style*="rgb(255, 255, 255)"] li, div[style*="rgb(255, 255, 255)"] strong, div[style*="rgb(255, 255, 255)"] a:not(.btn),
div[style*="#ffffff"] p, div[style*="#ffffff"] span, div[style*="#ffffff"] li, div[style*="#ffffff"] strong,
div[style*="rgb(255,255,255)"] p, div[style*="rgb(255,255,255)"] span, div[style*="rgb(255,255,255)"] li, div[style*="rgb(255,255,255)"] strong,
/* About page inner box #F3EFE7 */
div[style*="#F3EFE7"] p, div[style*="#F3EFE7"] span, div[style*="#F3EFE7"] li, div[style*="#F3EFE7"] strong,
div[style*="#f3efe7"] p, div[style*="#f3efe7"] span, div[style*="#f3efe7"] li, div[style*="#f3efe7"] strong,
div[style*="rgb(243, 239, 231)"] p, div[style*="rgb(243, 239, 231)"] span, div[style*="rgb(243, 239, 231)"] li, div[style*="rgb(243, 239, 231)"] strong,
div[style*="rgb(243,239,231)"] p, div[style*="rgb(243,239,231)"] span, div[style*="rgb(243,239,231)"] li, div[style*="rgb(243,239,231)"] strong,
/* Services/County detail page containers #FDFBF7 */
article[style*="#FDFBF7"] p, article[style*="#FDFBF7"] span, article[style*="#FDFBF7"] li, article[style*="#FDFBF7"] strong,
article[style*="#fdfbf7"] p, article[style*="#fdfbf7"] span, article[style*="#fdfbf7"] li, article[style*="#fdfbf7"] strong,
article[style*="rgb(253, 251, 247)"] p, article[style*="rgb(253, 251, 247)"] span, article[style*="rgb(253, 251, 247)"] li, article[style*="rgb(253, 251, 247)"] strong,
article[style*="rgb(253,251,247)"] p, article[style*="rgb(253,251,247)"] span, article[style*="rgb(253,251,247)"] li, article[style*="rgb(253,251,247)"] strong,
/* Class-based light containers */
.bg-white p, .bg-white span, .bg-white li, .bg-white strong,
.card-warm p, .card-warm span, .card-warm li, .card-warm strong, .card-warm time {
  color: #1F2221 !important; /* Elegant Charcoal Black */
}

/* Headings inside light background containers */
div[style*="#ffffff"] h1, div[style*="#ffffff"] h2, div[style*="#ffffff"] h3, div[style*="#ffffff"] h4,
div[style*="rgb(255, 255, 255)"] h1, div[style*="rgb(255, 255, 255)"] h2, div[style*="rgb(255, 255, 255)"] h3, div[style*="rgb(255, 255, 255)"] h4,
div[style*="rgb(255,255,255)"] h1, div[style*="rgb(255,255,255)"] h2, div[style*="rgb(255,255,255)"] h3, div[style*="rgb(255,255,255)"] h4,
div[style*="#F3EFE7"] h1, div[style*="#F3EFE7"] h2, div[style*="#F3EFE7"] h3, div[style*="#F3EFE7"] h4,
div[style*="#f3efe7"] h1, div[style*="#f3efe7"] h2, div[style*="#f3efe7"] h3, div[style*="#f3efe7"] h4,
div[style*="rgb(243, 239, 231)"] h1, div[style*="rgb(243, 239, 231)"] h2, div[style*="rgb(243, 239, 231)"] h3, div[style*="rgb(243, 239, 231)"] h4,
div[style*="rgb(243,239,231)"] h1, div[style*="rgb(243,239,231)"] h2, div[style*="rgb(243,239,231)"] h3, div[style*="rgb(243,239,231)"] h4,
article[style*="#FDFBF7"] h1, article[style*="#FDFBF7"] h2, article[style*="#FDFBF7"] h3, article[style*="#FDFBF7"] h4,
article[style*="#fdfbf7"] h1, article[style*="#fdfbf7"] h2, article[style*="#fdfbf7"] h3, article[style*="#fdfbf7"] h4,
article[style*="rgb(253, 251, 247)"] h1, article[style*="rgb(253, 251, 247)"] h2, article[style*="rgb(253, 251, 247)"] h3, article[style*="rgb(253, 251, 247)"] h4,
article[style*="rgb(253,251,247)"] h1, article[style*="rgb(253,251,247)"] h2, article[style*="rgb(253,251,247)"] h3, article[style*="rgb(253,251,247)"] h4,
.bg-white h1, .bg-white h2, .bg-white h3, .bg-white h4,
.card-warm h1, .card-warm h2, .card-warm h3, .card-warm h4 {
  color: #4D574B !important; /* Beautiful Smoky Olive */
}

/* Ensure checkmarks and other inline-colored spans preserve their color */
div[style*="#ffffff"] span[style*="color"],
div[style*="rgb(255, 255, 255)"] span[style*="color"],
div[style*="rgb(255,255,255)"] span[style*="color"],
div[style*="#F3EFE7"] span[style*="color"],
div[style*="#f3efe7"] span[style*="color"],
div[style*="rgb(243, 239, 231)"] span[style*="color"],
div[style*="rgb(243,239,231)"] span[style*="color"],
article[style*="#FDFBF7"] span[style*="color"],
article[style*="#fdfbf7"] span[style*="color"],
article[style*="rgb(253, 251, 247)"] span[style*="color"],
article[style*="rgb(253,251,247)"] span[style*="color"] {
  color: inherit !important;
}

/* Outline buttons inside light containers should have high contrast */
div[style*="#ffffff"] .btn-outline,
div[style*="rgb(255, 255, 255)"] .btn-outline,
div[style*="rgb(255,255,255)"] .btn-outline,
div[style*="#F3EFE7"] .btn-outline,
div[style*="#f3efe7"] .btn-outline,
div[style*="rgb(243, 239, 231)"] .btn-outline,
div[style*="rgb(243,239,231)"] .btn-outline,
article[style*="#FDFBF7"] .btn-outline,
article[style*="#fdfbf7"] .btn-outline,
article[style*="rgb(253, 251, 247)"] .btn-outline,
article[style*="rgb(253,251,247)"] .btn-outline,
.bg-white .btn-outline,
.card-warm .btn-outline {
  color: #394531 !important;
  border-color: #394531 !important;
}

div[style*="#ffffff"] .btn-outline:hover,
div[style*="rgb(255, 255, 255)"] .btn-outline:hover,
div[style*="rgb(255,255,255)"] .btn-outline:hover,
article[style*="#FDFBF7"] .btn-outline:hover,
article[style*="#fdfbf7"] .btn-outline:hover,
.bg-white .btn-outline:hover,
.card-warm .btn-outline:hover {
  background-color: rgba(57, 69, 49, 0.08) !important;
}

/* Exception for the dark CTA box inside the white services page */
.bg-white .bg-\[\#394531\] p, .bg-white .bg-\[\#394531\] span, .bg-white .bg-\[\#394531\] h3 {
  color: #FFFFFF !important;
}

/* --- BLOG PAGE FIXES --- */
/* Fix the Blog Hero text (Sanctuary Insights and subtitle) to pure Black */
div[style*="blog_hero_warm"] h1,
div[style*="blog_hero_warm"] p,
div[style*="blog_hero_warm"] span {
  color: #000000 !important;
}

/* Fix the Blog Preview Cards (.card-warm) text to dark olive */
.card-warm h1, .card-warm h2, .card-warm h3, .card-warm h4,
.card-warm p, .card-warm span, .card-warm li, .card-warm time {
  color: #35372D !important;
}

/* Hide decorative floating butterflies on mobile and tablet screens to prevent overlaying text */
@media (max-width: 1024px) {
  .animate-float-1,
  .animate-float-2,
  .animate-float-3 {
    display: none !important;
  }
}

/* FAQ CTA box styling overrides to ensure high readability and dark premium look (with high specificity) */
body div.faq-cta-card {
  background-color: #141615 !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}
body div.faq-cta-card h3 {
  color: #FFFFFF !important;
}
body div.faq-cta-card p {
  color: #EEE8DD !important;
  opacity: 0.9 !important;
}
body div.faq-cta-card a[href^="tel:"] {
  background-color: #FFFFFF !important;
  color: #141615 !important;
}

/* Fix all CTA cards/boxes with green background (#394531) inside white containers to keep white text */
div[style*="background-color: #394531"] h3,
div[style*="background-color:#394531"] h3,
div[style*="background-color: #394531"] p,
div[style*="background-color:#394531"] p,
.bg-\[\#394531\] h3, .bg-\[\#394531\] p, .bg-\[\#394531\] span,
div[class*="bg-[#394531]"] h3, div[class*="bg-[#394531]"] p, div[class*="bg-[#394531]"] span,
div[class*="bg-[#394531]"] a:not(.btn) {
  color: #FFFFFF !important;
}

/* Hero banner heading and back-links overrides on service and service-area pages (keep them white/champagne) */
div[class*="relative pt-24"] h1,
.relative.pt-24.pb-16 h1,
article h1.text-white,
article a[class*="text-[#EBE3D5]"],
article a[class*="text-[#ebe3d5]"],
.relative.pt-24.pb-16 a {
  color: #FFFFFF !important;
}
article a[class*="text-[#EBE3D5]"] svg,
article a[class*="text-[#ebe3d5]"] svg,
.relative.pt-24.pb-16 a svg {
  color: #EBE3D5 !important;
}

/* Floating persistent call button style fixes and mobile centering */
.persistent-call {
  background-color: #B9AA89 !important; /* Gold/Champagne background */
  color: #141615 !important; /* Soft black text for legibility */
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
}
.persistent-call .pc-text strong,
.persistent-call .pc-text small,
.persistent-call svg {
  color: #141615 !important;
}
.persistent-call .pc-text small {
  opacity: 0.8 !important;
}

@media (max-width: 767px) {
  .persistent-call {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    bottom: 1.5rem !important;
    width: max-content !important;
    white-space: nowrap !important;
  }
}

/* Prevent floating persistent call button from overlapping footer copyright and links */
.site-footer {
  padding-bottom: 6.5rem !important;
}

@media (min-width: 768px) {
  .site-footer .footer-bottom {
    padding-right: 14rem !important;
  }
}

@media (max-width: 767px) {
  .site-footer .footer-bottom {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0.75rem !important;
  }
}

/* Header navigation spacing and font adjustments for tablets/iPads (1024px to 1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {
  .site-header .brand {
    margin-right: 2.5rem !important; /* Move Home away from brand logo by at least 40px */
    flex-shrink: 0 !important;
  }
  .site-header .brand-name, .brand-name {
    font-size: 1.35rem !important; /* Make font size slightly smaller to fit navigation */
  }
  .site-header .nav-desktop {
    gap: 0.75rem !important; /* Tighter gap to prevent overflow */
    flex-shrink: 0 !important;
  }
  .site-header .nav-desktop a {
    font-size: 0.85rem !important; /* Slightly smaller links */
  }
  .site-header .nav-call {
    padding: 0.5rem 0.85rem !important; /* Smaller button */
    font-size: 0.85rem !important;
    margin-left: 0.5rem !important;
  }
}

/* Base header nav layout defaults (1280px and wider) */
@media (min-width: 1280px) {
  .site-header .brand {
    margin-right: 3rem !important;
    flex-shrink: 0 !important;
  }
  .site-header .nav-desktop {
    gap: 1.75rem !important;
    flex-shrink: 0 !important;
  }
}

/* Fix background decorative logos: hide on screens below 1280px to prevent overlapping and looking cut-off */
@media (max-width: 1279px) {
  .brand-logo-decor {
    display: none !important;
  }
}
@media (min-width: 1280px) {
  .brand-logo-decor {
    display: block !important;
    width: 12rem !important;
    height: 12rem !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }
  .brand-logo-decor.top-right {
    top: 8rem !important;
    right: 4rem !important;
    background-image: url('/images/sanctuary-cleaning-logo-large.webp') !important;
  }
  .brand-logo-decor.bottom-left {
    top: auto !important;
    bottom: 8rem !important;
    left: 4rem !important;
    background-image: url('/images/sanctuary-cleaning-logo-shield.webp') !important;
  }
}

/* Responsive adjustments for the county hero banner to control panorama crop */
.county-hero-banner {
  padding-top: 8.5rem !important;
  padding-bottom: 5.5rem !important;
}

@media (max-width: 767px) {
  .county-hero-banner {
    padding-top: 5.5rem !important;
    padding-bottom: 3.5rem !important;
  }
}