/* Brand color overrides: Swim Studs-inspired palette */
:root {
  --brand-yellow: #F9EE28; /* bright lemon */
  --brand-red: #EE3D23;    /* vivid red-orange */
  --brand-orange: #F7A11A; /* warm orange accent */
  --brand-dark: #1B1B1B;   /* dark 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: #d7341b !important;
  border-color: #d7341b !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-orange);
}

/* 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 */
#footer, .site-footer {
  background-color: var(--brand-yellow) !important;
  color: var(--brand-dark) !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 a Swim Studs red overlay */
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(249, 238, 40, 0.5) !important; /* #F9EE28 at 50% */
}

/* Top CTA banner */
.banner-wrapper a {
  color: white !important;
  border-bottom-color: var(--brand-red) !important;
}
.banner-wrapper a:hover {
  border-color: transparent !important;
}

/* 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 {
  background-color: #e79112 !important; /* slightly darker orange */
  border-color: #e79112 !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: #e79112 !important; /* slightly darker orange */
  border-color: #e79112 !important;
  color: #fff !important;
}

/* Footer social icons: make white SVGs render as brand orange */
.footer .social-icons-wrapper img {
  /* approximate #F7A11A */
  filter: invert(69%) sepia(71%) saturate(743%) hue-rotate(352deg) brightness(101%) contrast(101%);
}
.footer .social-icons-wrapper a:hover img,
.footer .social-icons-wrapper a:focus img {
  /* slightly stronger on hover */
  filter: invert(71%) sepia(83%) saturate(902%) hue-rotate(349deg) brightness(101%) contrast(105%);
}

/* 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 {
  /* approximate #F7A11A */
  filter: invert(69%) sepia(71%) saturate(743%) hue-rotate(352deg) brightness(101%) contrast(101%);
}
/* 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: invert(71%) sepia(83%) saturate(902%) hue-rotate(349deg) brightness(101%) contrast(105%);
}