/* =========================================================
   DYB – A11Y Patch (global)
   Goal: improve contrast + basic a11y without redesign.
   File: dyb-zoli-child/assets/css/a11y-contrast.css
   ========================================================= */

/* ---------------------------------------------------------
   0) Baseline readable text
   --------------------------------------------------------- */
body{
  color:#1f1f1f;
}

/* Paragraphs and small text that often end up #777/#999 */
p, li, small, .small, .text-muted,
.elementor-widget-text-editor,
.elementor-widget-text-editor p{
  color:#1f1f1f;
}

/* ---------------------------------------------------------
   1) Links
   --------------------------------------------------------- */
a{
  color:#0b57d0;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover, a:focus{
  color:#063b8f;
}

/* ---------------------------------------------------------
   2) Header brand tagline (was too light)
   --------------------------------------------------------- */
.ac-brand-tagline,
.site-branding .site-description,
.site-branding p,
.header .site-description{
  color:#1f1f1f !important;
  opacity:1 !important;
}

/* ---------------------------------------------------------
   3) Footer readability
   --------------------------------------------------------- */
.site-footer,
.site-footer p,
.site-footer li,
.site-footer a,
.dyb-footer,
.dyb-footer p,
.dyb-footer a{
  color:#1f1f1f;
}

.dyb-footer-title{
  color:#111 !important;
}

.site-footer a:hover,
.dyb-footer a:hover{
  color:#063b8f;
}

/* ---------------------------------------------------------
   4) Elementor headings baseline
   --------------------------------------------------------- */
.elementor-heading-title{
  color:#111;
}

/* ---------------------------------------------------------
   5) Home image cards: use ONE system (title pill)
   NOTE: Removed conflicting overlay gradients. We keep overlay NONE
         and make title always readable via dark pill.
   --------------------------------------------------------- */
.dyb-home-cards__overlay{
  background: none !important;
}

.dyb-home-cards__title{
  background: rgba(0,0,0,.68) !important;
  color:#fff !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  display: inline-block !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.65);
}

/* ---------------------------------------------------------
   6) Focus visibility
   --------------------------------------------------------- */
:focus-visible{
  outline: 2px solid #0b57d0;
  outline-offset: 2px;
}

/* ---------------------------------------------------------
   7) Header nav: force readable link color (parent adds grey)
   --------------------------------------------------------- */
.navbar .nav-link,
.navbar-nav .nav-link,
.navbar a.nav-link,
header .navbar a,
header .navbar-nav a{
  color:#111 !important;
  opacity:1 !important;
}

.dropdown-menu .dropdown-item{
  color:#111 !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus{
  color:#000 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------
   8) Testimonials: star rating + titles
   --------------------------------------------------------- */
.elementor-star-rating__title,
.elementor-screen-only,
.elementor-star-rating-wrapper,
.elementor-star-rating{
  color:#111 !important;
  opacity:1 !important;
}

/* Stars: darker gold */
.elementor-star-rating i{
  color:#8a4f00 !important;
  opacity:1 !important;
}

/* Woo star rating pseudo-elements too */
.star-rating span:before,
.star-rating:before{
  color:#b07800;
}

/* ---------------------------------------------------------
   9) Kill leftover forced light grey inline styles
   --------------------------------------------------------- */
[style*="color: rgb(119, 119, 119)"],
[style*="color: rgb(153, 153, 153)"],
[style*="color:#777"],
[style*="color: #777"],
[style*="color:#999"],
[style*="color: #999"]{
  color:#111 !important;
  opacity:1 !important;
}

/* ---------------------------------------------------------
   10) Slider / product card text contrast (titles + prices)
   --------------------------------------------------------- */
.woocommerce-loop-product__title a,
h3.woocommerce-loop-product__title a,
.woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product a,
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price span{
  color:#111 !important;
  opacity:1 !important;
}

.swiper .woocommerce-loop-product__title a,
.swiper .price,
.elementor-swiper .woocommerce-loop-product__title a,
.elementor-swiper .price{
  color:#111 !important;
  opacity:1 !important;
}

/* ---------------------------------------------------------
   11) A11Y utility: visually hidden but accessible
   --------------------------------------------------------- */
.dyb-sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =========================================================
   12) WAVE: "Very small text" (<=10px)
   IMPORTANT: This is often caused by pseudo-elements and controls.
   We fix BOTH normal nodes and ::before/::after cases.
   ========================================================= */

/* Woo product cards: star rating is tiny in Zoli */
body ul.products li.product .star-rating,
body .woocommerce ul.products li.product .star-rating{
  font-size: 12px !important;
  line-height: 1.2 !important;
}

/* Star rating pseudo content (common culprit for WAVE) */
body .star-rating::before,
body .star-rating span::before{
  font-size: 12px !important;
  line-height: 1.2 !important;
}

/* Sale badge (.onsale) */
body .woocommerce span.onsale,
body span.onsale{
  font-size: 12px !important;
  line-height: 1.2 !important;
}

/* Opal/Elementor nav menu badges/descriptions */
body .opalelementor-nav-menu .menu-badge,
body .elementor-nav-menu .menu-badge,
body .elementor-nav-menu .menu-desc{
  font-size: 12px !important;
  line-height: 1.2 !important;
}

/* Submenu arrow indicator (often via pseudo-elements) */
body .opalelementor-nav-menu .sub-arrow,
body .opalelementor-nav-menu .sub-arrow::before{
  font-size: 12px !important;
  line-height: 1.2 !important;
}

/* Header cart count bubble / label */
body .elementor-widget-opal-cart .header-button .count,
body .elementor-widget-opal-cart .header-button .count-text{
  font-size: 12px !important;
  line-height: 1.2 !important;
}

/* Navigation micro-text (rare) */
body .post-navigation .meta-nav{
  font-size: 12px !important;
  line-height: 1.2 !important;
}

/* Tooltips (if present) */
body .tooltipster-sidetip div.opal-image-hotspots-tooltips-text .star-rating{
  font-size: 12px !important;
  line-height: 1.2 !important;
}

/* Icon next chevron */
body .zoli-read-more-link .lexus-icon-Icon_Next{
  font-size: 12px !important;
  line-height: 1.2 !important;
}

/* Slider pagination dots/bullets (VERY common WAVE culprit) */
body .slick-dots li button,
body .slick-dots li button::before,
body .slick-dots li button::after,
body .swiper-pagination-bullet,
body .swiper-pagination-bullet::before,
body .swiper-pagination-bullet::after{
  font-size: 12px !important;
}

/* Make dots physically readable/clickable too */
body .slick-dots li button,
body .swiper-pagination-bullet{
  width: 12px !important;
  height: 12px !important;
}