/* File: modules/accessibility/assets/css/override.css */

/* ==================================================
   1) Header icon focus ring
   ================================================== */
.header_user_info a:focus-visible {
    outline: 3px solid #005fcc !important;
    outline-offset: 2px !important;
    z-index: 9999 !important;
}
.header_user_info {
    overflow: visible !important;
}

/* ==================================================
   2) Search input contrast
   ================================================== */
#autocomplete_1 {
    color: #222222 !important;
}
#autocomplete_1::placeholder {
    color: #666666 !important;
}

/* ==================================================
   3) Navigation items contrast
   ================================================== */
.nav-item-text,
.nav-collapse-text {
    color: #222222 !important;
}
.nav-item-text:hover,
.nav-item-text:focus-visible {
    color: #000000 !important;
    /*text-decoration: underline !important;*/
}

/* ==================================================
   4) Home banners headlines contrast
   ================================================== */
.newproducts.home-banner .banner-content .fs-22,
.blog.home-banner .banner-content .fs-22 {
    /*color: #222222 !important;*/
}

/* ==================================================
   5) Tooltip / small gray text contrast
   ================================================== */
.text-und.fw-400.fs-12,
.fs-10-xs.benefit-subtitle.fs-12 .text-und.fw-400.color-gray {
    color: #444444 !important;
}

/* ==================================================
   6) Breadcrumb links contrast (all languages)
   ================================================== */
.breadcrumb li:first-child a,
.breadcrumb .breadcrumb-link.color-gray:nth-child(2) > a {
    color: #222222 !important;
}
.breadcrumb li:first-child a:hover,
.breadcrumb li:first-child a:focus-visible,
.breadcrumb .breadcrumb-link.color-gray:nth-child(2) > a:hover,
.breadcrumb .breadcrumb-link.color-gray:nth-child(2) > a:focus-visible {
    color: #000000 !important;
    text-decoration: underline !important;
}
.breadcrumb .breadcrumb-link.color-green {
    color: #ffffff !important;
}
.breadcrumb .breadcrumb-link.color-green:hover,
.breadcrumb .breadcrumb-link.color-green:focus-visible {
    color: #e0e0e0 !important;
}

/* ==================================================
   7) Footer collapse headline spans on green BG
   ================================================== */
#ft1-info-collapse .footer-headline.hide-xs > span,
#ft2-contact-collapse .footer-headline.hide-xs > span,
#ft2-info-collapse .footer-headline.hide-xs > span {
    background-color: #0f4800 !important;
    border-radius: 7px !important;
    padding: 5px !important;
    color: #ffffff !important;
}

/* ==================================================
   8) Footer collapse links (white text on green BG)
   ================================================== */
#ft1-info-collapse .footer-links,
#ft2-contact-collapse .footer-links,
#ft2-info-collapse .footer-links {
    color: #ffffff !important;
}
#ft1-info-collapse .footer-links *[role] span,
#ft2-contact-collapse .footer-links *[role] span,
#ft2-info-collapse .footer-links *[role] span,
#ft1-info-collapse .footer-links a span,
#ft2-contact-collapse .footer-links a span,
#ft2-info-collapse .footer-links a span {
    color: inherit !important;
}
#ft1-info-collapse .footer-links a:hover,
#ft1-info-collapse .footer-links a:focus-visible,
#ft2-contact-collapse .footer-links a:hover,
#ft2-contact-collapse .footer-links a:focus-visible,
#ft2-info-collapse .footer-links a:hover,
#ft2-info-collapse .footer-links a:focus-visible {
    color: #e0e0e0 !important;
    text-decoration: underline !important;
}

/* ==================================================
   9) Telephone and email links
   - inside green-footer: inherit white
   - elsewhere: black on light BG
   ================================================== */
/* inside collapse sections */
#ft1-info-collapse .footer-links a[href^='tel:'],
#ft1-info-collapse .footer-links a[href^='mailto:'],
#ft2-contact-collapse .footer-links a[href^='tel:'],
#ft2-contact-collapse .footer-links a[href^='mailto:'],
#ft2-info-collapse .footer-links a[href^='tel:'],
#ft2-info-collapse .footer-links a[href^='mailto:'] {
    color: inherit !important;
}
/* global on page */
a[href^='tel:'],
a[href^='mailto:'] {
    color: #000000 !important;
}
a[href^='tel:']:hover,
a[href^='tel:']:focus-visible,
a[href^='mailto:']:hover,
a[href^='mailto:']:focus-visible {
    text-decoration: underline !important;
}

/* ==================================================
   10) Utility text and strong tags
   ================================================== */
.pt-0,
strong {
    /*color: #000000 !important;*/
}

/* ==================================================
   11) Modal focus style
   ================================================== */
.modal:focus-visible {
    box-shadow: 0 0 0 3px #ff9900 !important;
    outline: none !important;
}

/* ==================================================
   12) Checkout tab titles contrast
   ================================================== */
#checkout_tab_1 > .mv-auto-lg.checkout-tab-title.mb-auto-xs,
#checkout_tab_2 > .mv-auto-lg.checkout-tab-title.mb-auto-xs,
#checkout_tab_3 > .mv-auto-lg.checkout-tab-title.mb-auto-xs,
#checkout_tab_4 > .mv-auto-lg.checkout-tab-title.mb-auto-xs {
    color: #222222 !important;
}

/* ==================================================
   13) Only links may be underlined
   ================================================== */
/* All elements except <a> and its descendants have no text-decoration */
*:not(a):not(a *) {
    text-decoration: none !important;
}

/* ==================================================
   13) Accessibility: focus style for graphic checkboxes
   ================================================== */
/* .checkmark musí byť inline-block, aby outline obkreslil len jeho */
label.checkbox .checkmark {
    display: inline-block;
}

/* keď je v focuse, daj mu zreteľný outline */
label.checkbox .checkmark:focus-visible {
    outline: 3px solid #005fcc !important;
    outline-offset: 2px !important;
}

/* vypni natívny outline pri focus-e (klik myšou) */
.search-input input[type='text']:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* zobraz outline len keď používateľ tabuje (JS pridá .kbd-focus na <html>) */
.kbd-focus .search-input input[type='text']:focus {
    outline: 3px solid #005fcc !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}