/*
 * myzencarttemplates.com demo: accessibility fixes for ZCA Bootstrap (John, 2026-10-11).
 * Linked last in <head> by the demo bar observer. The landmarks and the column order
 * come from build/a11y.php; this file is the colors and the target sizes.
 */

/* ---- Contrast: 7:1 (WCAG AAA). Bootstrap's muted gray #6c757d is 4.69:1 on white,
   used for table captions ("These items will be in stock soon") and .text-muted. */
caption,
.text-muted {
    color: #495057 !important;   /* 8.2:1 on white */
}

/* ---- Target size: every control at least 44 x 44 CSS px (WCAG 2.5.5, enhanced).
   Links keep their own display where it's already block, and get padding that centers
   one line of text in 44px (1lh is the element's own line height), so no whitespace
   is lost the way it would be with inline-flex. Links inside running text (p) are
   exempt under WCAG and stay as they are, so paragraphs keep their line spacing. */
.nav-link,
[class^="centerBoxContents"] > a:not(:has(img)),
main li > a,
main td > a,
main div > a:only-child:not(:has(img)):not(.btn),
#navBreadCrumb a,
#navColumnOne li > a,
#navColumnTwo li > a,
#navColumnOne form > a,
#navColumnTwo form > a,
.sideBoxContent > a:not(:has(img)),
.leftBoxHeading a,
.rightBoxHeading a,
.legalCopyright a,
#footer-wrapper a:not(:has(img)) {
    min-height: 44px;
    min-width: 44px;
    box-sizing: border-box;
    padding-top: max(0px, calc((44px - 1lh) / 2));
    padding-bottom: max(0px, calc((44px - 1lh) / 2));
}
main li > a,
main td > a,
main div > a:only-child:not(:has(img)):not(.btn),
#navBreadCrumb a,
#navColumnOne li > a,
#navColumnTwo li > a,
#navColumnOne form > a,
#navColumnTwo form > a,
.sideBoxContent > a:not(:has(img)),
.leftBoxHeading a,
.rightBoxHeading a,
.legalCopyright a,
#footer-wrapper a:not(:has(img)) {
    display: inline-block;
}

/* An image link's box is otherwise just one line of text tall, not the image. */
a:has(img) {
    display: inline-block;
    min-height: 44px;
    min-width: 44px;
    max-width: 100%;
}

.btn,
.form-control,
.custom-select {
    min-height: 44px;
}
.btn,
.navbar-toggler,
#back-to-top,
.carousel-control-prev,
.carousel-control-next {
    min-width: 44px;
}
.navbar-toggler,
#back-to-top {
    min-height: 44px;
}

/* Radio and checkbox options: Bootstrap hides the real input as an invisible 16px box
   behind its label. The option row is made 44px tall and the hidden input stretched over
   it, so the input's own box is the whole row (still invisible, still behind the label). */
.custom-control {
    min-height: 44px;
    display: flex;
    align-items: center;
}
.custom-control-input {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* List boxes (the Manufacturers sidebox and the like): 44px rows. */
select[size] option {
    padding-top: 12px;
    padding-bottom: 12px;
}