/* =========================================================
   Accessibility layer (WCAG 2.1 AA / WAVE) — loaded last.
   ========================================================= */

/* ---- Utilities ---- */
.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;
}

/* Visible labels that the theme hid with display:none → keep them for AT */
header .srh label,
.hsrch label,
#news_popup #ns-frm-pop > label,
#newsletter .frm #ns-frm > label {
    display: block !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
}

/* ---- Skip link (2.4.1) ---- */
.skip-link {
    position: absolute;
    left: 16px;
    top: -100px;
    z-index: 10000;
    background: #0D174C;
    color: #fff;
    padding: 12px 18px;
    font-weight: bold;
    border-radius: 0 0 6px 6px;
    text-decoration: none;
}
.skip-link:focus {
    top: 0;
    color: #fff;
}
main:focus { outline: none; }

/* ---- Visible focus (2.4.7) ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid #3A52D4 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px #fff !important;
}
/* Text inputs: show focus also on mouse click (helps low-vision users) */
input[type="text"]:focus, input[type="search"]:focus, input[type="email"]:focus,
input[type="password"]:focus, input[type="tel"]:focus, input[type="number"]:focus,
select:focus, textarea:focus {
    outline: 2px solid #3A52D4;
    outline-offset: 1px;
}

/* ---- Button resets for elements that used to be <span>/<p>/<img> ---- */
header .mbcmmn #mbmn,
header .mbcmmn #mbsrch,
#cls_news_pop,
#cls-srch,
#menu button.dropdown-child,
#product .qty button.qty-btn,
.offers_car .prds button.a11y-arrow {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}
header .mbcmmn #mbsrch { line-height: 0; }
#menu .nav.navbar-nav button.dropdown-child {
    display: block;
    width: 100%;
    text-align: left;
    font-weight: bold;
    font-size: 16px;
    color: #0D174C;
    font-family: 'Manrope', sans-serif;
}
#menu .navbar .dropdown-child[aria-expanded="true"] { color: #3A52D4; }
.offers_car .prds button.a11y-arrow { z-index: 2; line-height: 0; }
.offers_car .prds button.a11y-arrow img { width: 100%; height: auto; }

/* ---- Carousel pause control (2.2.2) ---- */
.a11y-pause {
    position: absolute;
    z-index: 5;
    right: 10px;
    bottom: 10px;
    background: #0D174C;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 4px;
    padding: 6px 12px;
    font: bold 14px/1.2 'Manrope', sans-serif;
    cursor: pointer;
}
.a11y-pause:hover { background: #3A52D4; }
.offers_car .prds { position: relative; }
.offers_car .prds .a11y-pause { bottom: auto; top: -46px; right: 0; }
#sldr, #slideshow { position: relative; }

/* ---- Colour contrast (1.4.3) ---- */
::placeholder { color: #6b6b6b; opacity: 1; }
::-webkit-input-placeholder { color: #6b6b6b; opacity: 1; }

.glbprdrc .prd-model,
.glbprdrs .glbprdrc h3,
.offers_car .glbprdrc h3 { color: #696969 !important; }

.glbprdrs .prcs span,
.offers_car .prcs span { color: #696969 !important; }

/* Blog teasers: white text sat directly on photos → solid backing panel */
#hmft6 .blog_right .box .cnt {
    background: #0D174C;
    padding: 12px 16px;
    border-radius: 4px;
    right: 40px;
}
#hmft6 .blog_right .box .cnt h3 a,
#hmft6 .blog_right .box .cnt .post-date { color: #fff; }
@media only screen and (max-width: 500px) {
    #hmft6 .blog_left .box .cnt {
        background: #0D174C;
        padding: 10px 12px;
        border-radius: 4px;
        right: 15px;
        width: auto;
        box-sizing: border-box;
    }
    #hmft6 .blog_right .box .cnt { left: 15px; right: 15px; bottom: 15px; }
}

/* Headings changed tag for correct outline: keep visual weight */
.h3, .h4 { font-weight: bold; }
#news_popup .h3, #newsletter .ttl .h3 { margin-top: 0; }

/* ---- Reduced motion ---- */
@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;
    }
}

/* Heading tags promoted for a correct outline keep their former size */
h2.h3 { font-size: 1.17em; }
h2.h4, h3.h4 { font-size: 1em; }

/* Small phones: the theme hid top-bar text with font-size:0 → hide label text accessibly instead */
@media only screen and (max-width: 380px) {
    header .top .row > div { font-size: 13px; }
    header .top .top-lbl {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0, 0, 0, 0); white-space: nowrap;
    }
    header .top .row > div a { display: inline-block; min-width: 14px; min-height: 20px; }
}

/* CMS content: justified text is hard to read (1.4.8) */
main [style*="justify"], main [align="justify"] { text-align: left !important; }

/* Reflow (1.4.10): banner tiles from the "Homepage" HTML module overflowed on phones */
.frstw .boxl, .frstw .boxr, .frstw .box, .scndrw .box { min-width: 0; max-width: 100%; }
a.boxlc, a.boxc { max-width: 100%; }
a.boxlc img, a.boxc img { max-width: 100%; height: auto; }

/* Newsletter band: white text sits on the dark part of the photo, but the fallback
   colour under the photo was white (text invisible if the image fails, and fails
   contrast checks). Dark fallback + shadow keeps the text readable on light patches. */
#newsletter { background-color: #0D174C; }
#newsletter .ttl .h3,
#newsletter .ttl p {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85), 0 0 12px rgba(0, 0, 0, 0.6);
}