/* Brand color overrides: Inspector Wiz palette */
:root {
  /* Core IW colors */
  --brand-blue: #0B5E8E;   /* deep blue from logo */
  --brand-lime: #F9EE28;   /* logo yellow (warmer) */
  --brand-lime-rgb: 249, 238, 40; /* logo yellow as RGB for rgba() */
  /* Map legacy tokens to IW palette */
  --brand-yellow: var(--brand-lime);
  --brand-red: var(--brand-blue);
  --brand-orange: var(--brand-lime);
  --brand-dark: #052B44;   /* dark navy text fallback */
}

  
/* Text & links */
/* Buttons */
.btn-primary, .button, .wp-block-button__link, .btn.btn-primary {
  background-color: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
  color: #fff !important;
}
.btn-primary:hover, .button:hover, .wp-block-button__link:hover, .btn.btn-primary:hover {
  background-color: #063e61 !important;
  border-color: #063e61 !important;
}
.btn-outline-primary {
  color: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
}
.btn-outline-primary:hover {
  background-color: var(--brand-red) !important;
  color: #fff !important;
}

/* Navbar */
#header.navbar {
  background-color: var(--brand-yellow) !important;
  border-bottom: 2px solid var(--brand-blue);
}

/* Badges, accents */
.bg-primary, .badge-primary { background-color: var(--brand-red) !important; }
.text-primary { color: var(--brand-red) !important; }
.border-primary { border-color: var(--brand-red) !important; }

#footer a, .site-footer a { color: var(--brand-red) !important; }

/* Dropdown menus: Washology lime background with blue text */
.dropdown-menu,
.navbar .dropdown-menu {
  background-color: #fff !important; /* white panel for contrast on lime page */
  border-color: var(--brand-blue) !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.12) !important;
}
.dropdown-menu .dropdown-item,
.navbar .dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-header,
.navbar .dropdown-menu .dropdown-header {
  color: var(--brand-blue) !important;
  background-color: transparent !important;
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus {
  color: #fff !important; /* white text on blue */
  background-color: var(--brand-blue) !important;
}
.dropdown-menu .dropdown-item.active,
.navbar .dropdown-menu .dropdown-item.active {
  color: #fff !important;
  background-color: var(--brand-blue) !important;
}

/* Cards/sections that relied on old primary */
.card .card-header.bg-primary, .card.bg-primary { background-color: var(--brand-red) !important; }

/* Forms */
.form-control:focus {
  border-color: var(--brand-orange) !important;
  box-shadow: 0 0 0 .2rem rgba(247, 161, 26, 0.25) !important;
}

/* Section overlay adjustments */
/* Switch overlay-jade to IW palette */
section.overlay-jade {
  /* drive internal accents toward red */
  --garageup-accent-color: var(--brand-red);
}
section.overlay-jade:before {
  /* override the jade/blue background color applied in main.css */
  background-color: rgba(var(--brand-lime-rgb), 0.5) !important; /* semi-transparent IW yellow */
}

/* Top CTA banner */
.banner-wrapper a {
  background: transparent !important;
  color: var(--brand-lime) !important;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  border: 0 !important;
  text-decoration: none !important;
}
.banner-wrapper a:hover {
  filter: brightness(1.05);
}

/* Get Started section overrides */
.get-started {
  background-color: var(--brand-red) !important;
  /* ensure typography inherits orange */
  --bs-heading-color: var(--brand-orange);
  --bs-body-color: var(--brand-orange);
  color: var(--brand-orange) !important;
}
.get-started h1,
.get-started h2,
.get-started h3,
.get-started h4,
.get-started h5,
.get-started h6,
.get-started p,
.get-started a,
.get-started .section-title {
  color: white !important;
}

/* Button inside Get Started block */
.get-started .btn,
.get-started .btn-primary,
.get-started .btn-primary-dark {
  background-color: var(--brand-orange) !important;
  border-color: var(--brand-orange) !important;
  color: #fff !important;
}
.get-started .btn:hover,
.get-started .btn:focus,
.get-started .btn-primary:hover,
.get-started .btn-primary:focus,
.get-started .btn-primary-dark:hover,
.get-started .btn-primary-dark:focus {
  /* darken IW yellow slightly on hover */
  background-color: color-mix(in srgb, var(--brand-lime) 85%, #000 15%) !important;
  border-color: color-mix(in srgb, var(--brand-lime) 85%, #000 15%) !important;
  color: #fff !important;
}

/* Who We Are: Learn More button -> brand orange */
.who-we-are .btn.btn-primary-dark,
.who-we-are a.btn.btn-primary-dark {
  background-color: var(--brand-orange) !important;
  border-color: var(--brand-orange) !important;
  color: #fff !important;
}
.who-we-are .btn.btn-primary-dark:hover,
.who-we-are .btn.btn-primary-dark:focus,
.who-we-are a.btn.btn-primary-dark:hover,
.who-we-are a.btn.btn-primary-dark:focus {
  background-color: color-mix(in srgb, var(--brand-lime) 85%, #000 15%) !important;
  border-color: color-mix(in srgb, var(--brand-lime) 85%, #000 15%) !important;
  color: #fff !important;
}

/* Footer social icons: disable legacy orange filter (we use custom mask in footer.ejs) */
.footer .social-icons-wrapper img { filter: none !important; }
.footer .social-icons-wrapper a:hover img,
.footer .social-icons-wrapper a:focus img { filter: none !important; }

/* Reviews section overrides */
.reviews .resi-review--stars svg path,
.resi-reviews .resi-review--stars svg path {
  /* force star icons to brand red, overriding inline fills */
  fill: var(--brand-red) !important;
}

.resi-reviews .resi-review--content,
.resi-reviews .resi-review--content p,
.reviews .resi-review--content,
.reviews .resi-review--content p {
  /* review text in brand orange */
  color: var(--brand-orange) !important;
}

/* Warranty page background */
body.page-id-525,
body.page-id-525 #wrapper,
body.page-id-525 .page-defualt-template,
body.page-id-525 .page-default-template {
  background-color: var(--brand-red) !important;
}

/* Our Warranty banner background */
.warranty.banner {
  /* use background to override any existing image/gradient */
  background: var(--brand-red) !important;
  background-image: none !important;
}
.warranty.banner::before,
.warranty.banner::after {
  /* neutralize theme overlays if present */
  background: none !important;
  background-image: none !important;
  display: none !important;
  content: none !important;
}

/* Stronger specificity for homepage warranty banner */
section.warranty.banner.bg-jade-geometric {
  background: var(--brand-red) !important;
  background-image: none !important;
}

/* Blog features section should be white */
section.blogFeat {
  background: var(--brand-red) !important;
  background-image: none !important;
  color: white !important;
}
section.blogFeat::before,
section.blogFeat::after {
  background: none !important;
  background-image: none !important;
  content: none !important;
}

/* Blog features intro heading color */
section.blogFeat h4 {
  color: white !important;
}

/* Our Stats icons -> brand orange */
/* Blog feature cards: yellow cards with brand-red text */
.blogFeat .featured-posts-wrapper a.feat-post {
  background: var(--brand-yellow) !important;
  border-color: rgba(0,0,0,0) !important;
}
.blogFeat .featured-posts-wrapper a.feat-post .entry-summary,
.blogFeat .featured-posts-wrapper a.feat-post .entry-summary h6,
.blogFeat .featured-posts-wrapper a.feat-post .entry-summary p,
.blogFeat .featured-posts-wrapper a.feat-post .entry-title {
  color: var(--brand-red) !important;
}
.blogFeat .featured-posts-wrapper a.feat-post:hover {
  background: color-mix(in srgb, var(--brand-yellow) 92%, #000 8%) !important;
}

.blogFeat .featured-posts-wrapper { width: 100%; }
@media (max-width: 576px) {
  .blogFeat .featured-posts-wrapper { padding-left: 1rem; padding-right: 1rem; }
  .blogFeat .featured-posts-wrapper > a.feat-post { width: 100% !important; }
}

/* Blog feature: action buttons and nav should match Washology palette */
.blogFeat .blog-slider .blog-nav,
.blogFeat .blog-slider .blog-nav:disabled {
  background: var(--brand-blue) !important;
  color: #fff !important;
}
.blogFeat .blog-slider .blog-nav:hover,
.blogFeat .blog-slider .blog-nav:focus {
  filter: brightness(1.05);
}

/* Detail card primary action */
.blogFeat .featured-post-detail .detail-actions .btn,
.blogFeat .featured-post-detail .detail-actions a.btn,
.blogFeat .featured-post-detail .detail-actions .btn-primary-dark {
  background-color: var(--brand-blue) !important;
  border-color: var(--brand-blue) !important;
  color: #fff !important;
}
.blogFeat .featured-post-detail .detail-actions .btn:hover,
.blogFeat .featured-post-detail .detail-actions .btn:focus {
  filter: brightness(1.05);
  color: #fff !important;
}

/* All Posts button at bottom of section */
.blogFeat .blogContent .text-center .btn.btn-primary,
.blogFeat .blogContent .text-center a.btn.btn-primary {
  background-color: var(--brand-blue) !important;
  border-color: var(--brand-blue) !important;
  color: #fff !important;
}
.blogFeat .blogContent .text-center .btn.btn-primary:hover,
.blogFeat .blogContent .text-center .btn.btn-primary:focus {
  filter: brightness(1.05);
}

.our-stats .our-stats--stat--icon img { filter: none !important; }
/* Slight emphasis on hover/focus */
.our-stats .our-stats--stat:hover .our-stats--stat--icon img,
.our-stats .our-stats--stat:focus-within .our-stats--stat--icon img { filter: none !important; }
