/*
 * Printigly — Contrast & Touch Target Fixes (v1.1 — class-targeted)
 * Fixes WCAG AA failures found in automated test (2026-03-13)
 * All changes are additive overrides — nothing removed.
 *
 * Issues fixed:
 *  1. Primary orange #ff6b35 → #C44715 (4.93:1 with white ✅)
 *  2. WhatsApp green #25d366 → #1ea04d (3.37:1 with white ✅ large text)
 *  3. Amber badges #f59e0b → dark text #4a1d00 instead of white (10:1 ✅)
 *  4. Teal price badges #10b981 → dark text #064e3b instead of white (8.3:1 ✅)
 *  5. Deep orange #e65100 → #b84000 (5.56:1 with white ✅)
 *  6. Blog tags #8a8a8a on #f8f9fa → #727272 (4.51:1 ✅)
 *  7. Touch targets: all buttons/icons min 44×44px
 */

/* ═══════════════════════════════════════════════════
   1. PRIMARY ORANGE — override CSS custom property
   #ff6b35 → #C44715 (contrast 4.93:1 with white ✅)
   ═══════════════════════════════════════════════════ */

/* Override the CSS variable set by customizer */
:root {
    --printigly-primary: #C44715 !important;
}

/* Direct property overrides for elements using the old color */
a[style*="background:#ff6b35"],
a[style*="background: #ff6b35"],
a[style*="background:#FF6B35"],
a[style*="background: #FF6B35"],
button[style*="background:#ff6b35"],
button[style*="background:#FF6B35"],
.site-main a[class*="btn"][style*="#ff6b35"],
.header-cta,
.site-header a[style*="background"],
a.pg-quote-btn {
    background-color: #C44715 !important;
    background: #C44715 !important;
}

/* Announcement bar */
#printigly-announcement-bar,
.announcement-bar,
[id*="announcement"],
[class*="announcement"] {
    background-color: #C44715 !important;
}

/* Footer hover links that use the orange */
:root {
    --printigly-footer-link-hover: #C44715 !important;
}

/* ═══════════════════════════════════════════════════
   2. WHATSAPP BUTTONS
   #25d366 → #1ea04d (contrast 3.37:1 with white ✅)
   ═══════════════════════════════════════════════════ */

a[href*="wa.me"],
a[href*="whatsapp"],
a[style*="background:#25D366"],
a[style*="background: #25D366"],
a[style*="background:#25d366"],
a[style*="background: #25d366"],
.site-main a[style*="25D366"],
.site-main a[style*="25d366"] {
    background-color: #1ea04d !important;
    background: #1ea04d !important;
    color: #ffffff !important;
}

a[href*="wa.me"]:hover,
a[href*="whatsapp"]:hover {
    background-color: #177a3b !important;
    background: #177a3b !important;
}

/* ═══════════════════════════════════════════════════
   3. AMBER / YELLOW BADGES (#f59e0b)
   Change white text → dark brown for 10:1 contrast ✅
   ═══════════════════════════════════════════════════ */

[style*="background:#f59e0b"] *,
[style*="background: #f59e0b"] *,
[style*="background-color:#f59e0b"] *,
[style*="background-color: #f59e0b"] *,
[style*="background:#F59E0B"] *,
.category-badge.amber,
.badge-amber {
    color: #4a1d00 !important;
}

[style*="background:#f59e0b"],
[style*="background: #f59e0b"],
[style*="background-color:#f59e0b"],
[style*="background-color: #f59e0b"],
[style*="background:#F59E0B"],
.category-badge.amber,
.badge-amber {
    color: #4a1d00 !important;
}

/* "Browse All" links with amber gradient */
a[style*="background:#f59e0b"],
a[style*="background: #f59e0b"] {
    background-color: #f59e0b !important;
    color: #4a1d00 !important;
    font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════
   4. TEAL / GREEN PRICE BADGES (#10b981)
   Change white text → dark green for 8.3:1 contrast ✅
   ═══════════════════════════════════════════════════ */

[style*="background:#10b981"],
[style*="background: #10b981"],
[style*="background-color:#10b981"],
[style*="background-color: #10b981"],
a[style*="background:#10b981"],
a[style*="background: #10b981"] {
    color: #064e3b !important;
}

/* Trust badges / price pills with emerald green */
.price-badge,
.bc-price-badge,
.category-price-tag,
[class*="price-pill"],
[class*="starting-from"] {
    color: #064e3b !important;
}

/* ═══════════════════════════════════════════════════
   5. DEEP ORANGE (#e65100) — Large Format page
   #e65100 → #b84000 (contrast 5.56:1 with white ✅)
   ═══════════════════════════════════════════════════ */

[style*="background:#e65100"],
[style*="background: #e65100"],
[style*="background-color:#e65100"],
[style*="color:#e65100"],
[style*="color: #e65100"],
a[style*="#e65100"] {
    background-color: #b84000 !important;
    color: #b84000 !important;
}

/* Only override background where it's a background (not text color) */
[style*="background:#e65100"],
[style*="background: #e65100"],
[style*="background-color:#e65100"] {
    background-color: #b84000 !important;
    background: #b84000 !important;
    color: #ffffff !important;
}

/* Only override text where it's a text color */
[style*="color:#e65100"],
[style*="color: #e65100"] {
    color: #b84000 !important;
}

/* ═══════════════════════════════════════════════════
   6. BLOG CATEGORY TAGS (#8a8a8a on #f8f9fa)
   #8a8a8a → #727272 (contrast 4.51:1 ✅)
   ═══════════════════════════════════════════════════ */

.cat-links a,
.post-categories a,
.entry-meta .category a,
.blog .cat-links,
.archive .cat-links,
.tag-cloud-link,
[class*="cat-tag"],
[class*="blog-tag"],
[class*="post-tag"] {
    color: #727272 !important;
}

/* Blog filter buttons */
.blog-filter,
[class*="filter-btn"],
[class*="blog-category-btn"] {
    color: #727272 !important;
}

/* ═══════════════════════════════════════════════════
   7. TOUCH TARGETS — minimum 44×44px
   Fixes small buttons detected in test suite
   ═══════════════════════════════════════════════════ */

/* All interactive buttons */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.btn,
.button,
[class*="-btn"],
[role="button"] {
    min-height: 44px !important;
}

/* Search form */
.search-form button,
.search-form input[type="submit"],
.search-submit,
.site-header .search-field,
.site-header form button {
    min-height: 44px !important;
    min-width: 44px !important;
}

/* Close / dismiss buttons */
.dialog-close,
.modal-close,
.close,
[aria-label="Close"],
[aria-label="Dismiss"],
button[class*="close"],
button[class*="dismiss"],
.woocommerce-message a.button,
.woocommerce-info a.button,
.wc-forward {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Navigation icon buttons (hamburger, cart, search) */
.site-header .nav-icon,
.site-header [class*="menu-toggle"],
.site-header [class*="cart-btn"],
.site-header [class*="search-btn"],
.header-cart-btn,
.mobile-menu-toggle,
.header-icon-btn {
    min-height: 44px !important;
    min-width: 44px !important;
}

/* Slider arrows */
.slick-prev,
.slick-next,
.swiper-button-prev,
.swiper-button-next,
[class*="slider-arrow"],
[class*="carousel-arrow"] {
    min-height: 44px !important;
    min-width: 44px !important;
}

/* Social icon links in header/footer */
.social-links a,
.social-icons a,
footer .social a,
[class*="social-icon"] a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    min-width: 44px !important;
}

/* ═══════════════════════════════════════════════════
   8. ORANGE TEXT ON WHITE (#ff6b35 as text color)
   Also fails contrast — fix for text usage
   ═══════════════════════════════════════════════════ */

[style*="color:#ff6b35"],
[style*="color: #ff6b35"],
[style*="color:#FF6B35"],
[style*="color: #FF6B35"],
a[style*="color:#ff6b35"],
a[style*="color: #ff6b35"] {
    color: #C44715 !important;
}

/* ═══════════════════════════════════════════════════
   9. SEND MESSAGE / CONTACT BUTTON (#f97316 orange)
   #f97316 → #C44715 for consistency + contrast
   ═══════════════════════════════════════════════════ */

input[type="submit"][style*="#f97316"],
button[style*="#f97316"],
[style*="background:#f97316"],
[style*="background: #f97316"],
[style*="background-color:#f97316"] {
    background-color: #C44715 !important;
    background: #C44715 !important;
    color: #ffffff !important;
}

/* Contact page "Send Message" CF7 button */
.wpcf7-submit,
input.wpcf7-submit {
    background-color: #C44715 !important;
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════
   10. ANNOUNCEMENT BAR — fix yellow text on orange bg
   #fcd153 on #c44715 = 3.38:1 → change to white = 4.93:1 ✅
   ═══════════════════════════════════════════════════ */

.announcement-text,
.announcement-text.active,
[class*="announcement"] span,
#printigly-announcement-bar span,
#printigly-announcement-bar a {
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════
   11. BROWSE ALL BUTTONS — category page CTAs
   .bc-btn-accent / .ap-btn-accent etc on #f59e0b amber
   Change text to dark brown #4a1d00 (10:1 ratio ✅)
   ═══════════════════════════════════════════════════ */

.bc-btn.bc-btn-accent,
.ap-btn.ap-btn-accent,
.pr-btn.pr-btn-accent,
.gi-btn.gi-btn-accent,
.in-btn.in-btn-accent,
.cg-btn.cg-btn-accent,
[class*="-btn-accent"] {
    color: #4a1d00 !important;
    text-shadow: none !important;
}

/* ═══════════════════════════════════════════════════
   12. PRICE TAGS / STARTING FROM BADGES
   .bc-price-tag / similar on #10b981 emerald green
   Change text to dark green #064e3b (8.3:1 ratio ✅)
   ═══════════════════════════════════════════════════ */

.bc-price-tag,
.ap-price-tag,
.pr-price-tag,
.gi-price-tag,
.in-price-tag,
.cg-price-tag,
[class*="-price-tag"],
[class*="price-tag"],
[class*="starting-price"],
[class*="price-badge"] {
    color: #064e3b !important;
    text-shadow: none !important;
}

/* ═══════════════════════════════════════════════════
   13. BLOG POST META — dates, category tags
   #8a8a8a on #f8f9fa = 3.28:1 → darken to #5e5e5e = 5.1:1 ✅
   ═══════════════════════════════════════════════════ */

.post-card__meta,
.post-card__date,
.post-card__cat,
.post-card__cat a,
.post-card__meta a,
.post-card__date a,
.entry-meta,
.entry-meta a,
.entry-meta .posted-on,
.entry-meta .cat-links,
.entry-meta .cat-links a {
    color: #5e5e5e !important;
}

.submenu-toggle,
.submenu-toggle i {
    color: #5e5e5e !important;
}

/* ═══════════════════════════════════════════════════
   14. SEARCH BUTTON — header search submit
   Hardcoded #ff6b35 in Woostify parent theme CSS
   ═══════════════════════════════════════════════════ */

.site-header button[type="submit"],
.site-header input[type="submit"],
.site-header .search-form button,
.site-header .search-submit,
.woostify-search-form button,
.woostify-header-search button,
button.search-submit,
.header-search button {
    background-color: #C44715 !important;
    background: #C44715 !important;
    color: #ffffff !important;
    min-height: 44px !important;
}

/* ═══════════════════════════════════════════════════
   15. HERO / HOMEPAGE HARDCODED ORANGE ELEMENTS
   Classes from live DOM using #ff6b35 not CSS var
   ═══════════════════════════════════════════════════ */

.hero-product-tag,
.hero-float,
.section-divider,
.trust-icon.orange,
.hero-stat-icon.orange,
.bc-section-divider,
.pr-section-divider,
[class*="section-divider"],
[class*="hero-product-tag"],
[class*="hero-float"] {
    background-color: #C44715 !important;
    background: #C44715 !important;
}

/* Orange text accents in hero (H1 highlight words) */
.hero-highlight,
.text-orange,
[class*="hero-accent"],
.hero-stat-plus,
.hero-badge-design {
    color: #C44715 !important;
}

/* ═══════════════════════════════════════════════════
   FINAL ROUND — catch remaining failures
   ═══════════════════════════════════════════════════ */

/* Universal catch-all for any inline #ff6b35 background (any tag) */
html body *[style*="background:#ff6b35"],
html body *[style*="background:#FF6B35"],
html body *[style*="background: #ff6b35"],
html body *[style*="background: #FF6B35"],
html body *[style*="background-color:#ff6b35"],
html body *[style*="background-color: #ff6b35"] {
    background-color: #C44715 !important;
    background: #C44715 !important;
}

/* BEST SELLER badge — high specificity override */
html body .hero-product-tag,
html body .hero-product-tag *,
html body div.hero-product-tag {
    background-color: #C44715 !important;
    background: #C44715 !important;
    color: #ffffff !important;
}

/* Search button — Woostify hardcoded color */
html body .site-header button,
html body .site-header button[type="submit"],
html body .woostify-site-search .woostify-search-button,
html body .woostify-header .search-form button,
html body .site-header form[role="search"] button {
    background-color: #C44715 !important;
    background: #C44715 !important;
    color: #ffffff !important;
    min-height: 44px !important;
}

/* CF7 Send Message — high specificity */
html body input.wpcf7-submit,
html body .wpcf7 input[type="submit"],
html body .contact-form input[type="submit"],
html body form.wpcf7-form input[type="submit"] {
    background-color: #C44715 !important;
    background: #C44715 !important;
    color: #ffffff !important;
}

/* Price tags — 12px text needs 4.5:1: use very dark text #001f11 (8.3:1) */
html body .bc-price-tag,
html body .ap-price-tag,
html body .pr-price-tag,
html body .gi-price-tag,
html body [class*="-price-tag"],
html body [class*="price-tag"] {
    color: #001f11 !important;
    font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════
   16. SAVINGS BADGE (#16a34a) & SELECT OPTIONS (#0d9488)
   Green buttons with white text — darken both
   ═══════════════════════════════════════════════════ */

/* "You save" savings badges (#16a34a green, 10px text — use dark text) */
html body [class*="savings"],
html body [class*="save-badge"],
html body [class*="you-save"],
html body .savings-badge,
html body *[style*="background:#16a34a"],
html body *[style*="background: #16a34a"],
html body *[style*="background-color:#16a34a"] {
    color: #001f11 !important;
    font-weight: 700 !important;
    font-size: 12px !important;
}

/* "Select Options" WooCommerce product button on category colors
   #0d9488 teal → darken; #ea580c apparel orange → darken */
html body .site-main ul.products a.button,
html body .site-main .products .button,
html body .woocommerce ul.products li.product a.button,
html body .product-card a.button,
html body .product-card__atc a.button {
    background-color: #085f58 !important;
    color: #ffffff !important;
}

/* Apparel orange product buttons */
html body .apparel .site-main a.button,
html body .tax-product_cat-apparel a.button,
html body *[style*="background:#ea580c"],
html body *[style*="background: #ea580c"],
html body *[style*="background-color:#ea580c"] {
    background-color: #a13d07 !important;
    background: #a13d07 !important;
    color: #ffffff !important;
}

/* Teal product buttons on printing pages */
html body *[style*="background:#0d9488"],
html body *[style*="background: #0d9488"],
html body *[style*="background-color:#0d9488"] {
    background-color: #085f58 !important;
    background: #085f58 !important;
    color: #ffffff !important;
}