/* Colour-contrast fixes (WCAG AA). The brand gold #D7B172 is only 2:1 against white,
   so where it is used for text, or behind white text, it is swapped for a deeper gold
   that keeps the same hue. The "html body" prefix lets these win over equal-specificity
   rules in stylesheets that load later (shop.css, blog-post.css, unit-test.css)
   while hover rules, which are more specific, still apply. */
:root {
    --color-secondary-text: #86601F; /* 5.7:1 on white, 5.0:1 on #F6F1EA */
}

/* Gold text on light backgrounds */
html body .blog-area.single .blog-article-body a,
html body #blog-toc-list li a.active,
html body .lp-hero .lp-hero-eyebrow,
html body .lp-hero .lp-hero-phone,
html body .lp-hero .lp-hero-stat strong,
html body .lp-cta .lp-cta-phone,
html body .about-style-one-info .fun-fact-style-flex .counter .operator {
    color: var(--color-secondary-text);
}
/* .product-list-box counters sit on a dark ::after panel, where the light gold already passes. */

@media (max-width: 991px) {
    html body #blog-toc-toggle {
        color: var(--color-secondary-text);
    }
}

@media (max-width: 767px) {
    html body .single-product-bottom-info .nav.nav-tabs button.active {
        color: var(--color-secondary-text) !important; /* shop.css sets this with !important */
    }
}

/* White text on gold backgrounds: deepen the gold behind it */
html body .btn.btn-theme.secondary,
html body .lp-hero-actions .btn.btn-theme,
html body .lp-cta-actions .btn.btn-theme,
html body .step-number,
html body .services-details-items blockquote,
html body .blog-style-one .thumb .date span,
html body .blog-area .thumb .date span {
    background: var(--color-secondary-text);
}
html body .step-number {
    color: var(--white);
}

/* Open FAQ header: brown background needs light text */
html body .accordion-style-two-items button.accordion-button:not(.collapsed) {
    color: var(--white);
}

/* Touch targets (WCAG 2.5.8): carousel dots get a 24x24px tap area. The visible dot keeps its
   size and colour (background painted in the content box only) and its vertical position
   (negative vertical margin = padding); dots now sit 24px apart instead of 16-20px. */
html body .swiper-pagination-bullet {
    padding: 8px !important;               /* 8px dots: 8 + 2x8 = 24 */
    margin: -8px 0 !important;
    background-clip: content-box !important;
    box-sizing: content-box !important;
}
html body .gallery-style-one-carousel .swiper-pagination-bullet {
    padding: 7px !important;               /* 10px dots */
    margin: -7px 0 !important;
}
html body .gallery-style-one-carousel .swiper-pagination-bullet-active {
    padding: 3.5px !important;             /* 17px active dot */
    margin: -3.5px 0 !important;
}