/* ukulele.ua - accessibility overrides, KakTak.Net 2026-08-05
 *
 * Loaded AFTER the vendor bundle, and deliberately unlayered: the theme ships its CSS
 * inside a cascade layer, and unlayered rules win over every layer regardless of
 * specificity. So plain selectors are enough - no !important anywhere.
 *
 * Every value below is the smallest hue-preserving shift that reaches WCAG 2.2 AA.
 * Measured against #ffffff with the standard relative-luminance formula.
 */

/* «В наявності» - was #00c950 = 2.21:1 at 12px, needs 4.5:1 */
.products-stocks__text--full,
.text-green-500.products-stocks__text {
    color: #15803d; /* 5.02:1 */
}

/* current price - was #f43f5e = 3.67:1 at 18px, needs 4.5:1.
 * The currency sign and the discount badge are SIBLINGS of .price, not children,
 * so they need naming too - the first pass fixed .price alone and left them failing. */
.price-discount .price,
.price-discount .currency,
.products-prices .price,
.products-prices .currency,
.products-prices__compare-percent,
.price-percentage {
    color: #e11d48; /* 4.70:1 */
}

/* struck-through old price - was #a3a3a3 = 2.52:1 at 12px.
 * Declared AFTER the block above on purpose: equal specificity, later wins, so the
 * compare-price currency keeps the muted grey instead of turning into the accent. */
.price-old,
.price-compare .price,
.price-compare .currency,
.products-prices__compare-price .price,
.products-prices__compare-price .currency,
.products-prices__old .price {
    color: #737373; /* 4.74:1 */
}

/* WCAG 1.4.1 - a link inside a paragraph may not be told apart by colour alone.
 * Measured: #335eea against surrounding #737373 is 1.12:1, far under the 3:1 floor.
 * An underline removes the dependency on colour entirely. */
.wa-form a[href]:not([class*="btn"]):not([class*="button"]),
.signup-form a[href]:not([class*="btn"]),
p > a[href]:not([class*="btn"]):not([class*="button"]) {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* WCAG 2.4.7 - the theme leaves several controls without a visible focus ring.
 * Double ring so it survives both light and dark surfaces. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 95, 204, 0.3);
}

/* The horizontally scrollable rows get keyboard access from custom.js; give the
 * resulting focus a visible home. */
.mobile-scrolled:focus-visible {
    outline: 2px solid #005fcc;
    outline-offset: -2px;
}

/* FAQ block ("Поширені запитання") has no dark variant at all.
 * Measured on /category/acoustic-guitars/ 2026-08-05: the panels are painted
 * rgb(190,190,195) by an INLINE <style>, the same value in both themes, so on the dark
 * page (rgb(23,23,23)) they stay light grey - and the question heading is white, i.e.
 * white text on a light panel. No !important needed: the inline block sits earlier in
 * the document than this file, so equal specificity is decided by order.
 *
 * Surfaces follow what the theme already uses: page #171717, raised panel one step up. */
.dark .groupQuestions__item-header,
.dark .groupQuestions__item-content {
    background-color: #262626;
    border-color: #404040;
}

.dark .groupQuestions__item-header {
    color: #e5e5e5; /* 11.6:1 on #262626 */
}

.dark .groupQuestions__item-content {
    color: #d4d4d4; /* 9.4:1 */
}

.dark .groupQuestions,
.dark .groupQuestions__item-title {
    color: #e5e5e5;
}

.dark .groupQuestions__title {
    color: #8fabff; /* the accent lifted for a dark surface; 32px heading */
}

.dark .groupQuestions__item-content a,
.dark .question-product,
.dark .groupQuestions__spoiler-indicator {
    color: #93b4ff; /* 7.0:1 on #262626 */
}

/* WCAG 2.2 2.5.8 Target Size - measured on the cart page: the captcha refresh control
 * is smaller than the 24x24 CSS-px floor. Grown by padding so nothing around it moves. */
.wa-captcha-refresh,
a.wa-captcha-refresh {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    min-width: 24px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}