/*
 * myzencarttemplates.com demo: accessibility fixes for Responsive Classic (John, 2026-10-11).
 * Linked last in <head> by the demo bar observer, after responsive*.css. The landmarks
 * and the column order come from build/a11y.php; this file is the layout that keeps the
 * columns where they were, the colors and the target sizes.
 */

/* ---- Column order. build/a11y.php moves the left column after the page content in the
   source, so the page's <h1> is the first heading. Here flexbox puts it back on the left.
   Only for the desktop layout (on phones and tablets #mainWrapper sits inside #page and
   responsive_mobile/tablet.css stack the columns) and only from 768px, where
   responsive_default.css stops stacking them. The margins reproduce responsive.css's
   :first-child / :nth-child(3) ones, which follow source order and would now land on the
   wrong columns. */
@media (min-width: 768px) {
    body > #mainWrapper #contentMainWrapper {
        display: flex;
        align-items: flex-start;
    }
    body > #mainWrapper #contentMainWrapper > [data-mzct-col="left"] {
        order: -1;
        margin-left: 0;
        margin-right: 0.4208%;
    }
    body > #mainWrapper #contentMainWrapper > [data-mzct-col="center"] {
        margin-left: 0.5208%;
        margin-right: 0;
    }
    body > #mainWrapper #contentMainWrapper > [data-mzct-col="right"] {
        margin-left: auto;   /* it floated right before */
    }
}

/* ---- Contrast: 7:1 (WCAG AAA). */
.cat-count {
    color: #4d4d4d;               /* sidebox category counts: #666 is 5.74:1; this 8.45:1 */
}
.rowEven a {
    color: #2b3f91;               /* links on the #eee even table rows: 6.15:1; this 8.14:1 */
}
legend {
    color: #000;                  /* #333 on the #bbb legend: 6.58:1; this 10.9:1 */
}
#siteinfoIP,
#siteinfoLegal {
    background-color: #4a4a4a;    /* white footer text on #666: 5.74:1; this 8.86:1 */
}
#cart-box .productSpecialPrice,
#cart-box .productPriceDiscount,
#cart-box .productSalePrice {
    color: #5c0000;               /* prices on the #bbb add-to-cart box: 4.96:1; this 7.52:1 */
}
/* Scheduled Events' sidebox: black heading text on its #444 bar (2.15:1), and carousel
   dates in #5e72c4 at 80% opacity (5.24:1). */
.eventzSideboxHeading,
.eventzSideboxHeading h4 {
    color: #fff;                  /* 9.74:1 */
}
.eventzSideboxContent .eventzCarouselLink .eventzCarouselStartDate,
.eventzSideboxContent .eventzCarouselLink .eventzCarouselStopDate {
    color: #34448a;               /* 8.97:1 */
    opacity: 1;
}

/* ---- Target size: every control at least 44 x 44 CSS px (WCAG 2.5.5, enhanced), which
   also covers the 24px minimum and spacing (2.5.8). Links get padding that centers one
   line of text in 44px (1lh is the element's own line height), so no whitespace is lost.
   Links inside running text are exempt under WCAG and stay as they are. */
#navMain a,
#navCatTabs a,
#navEZPagesTop a,
#navBreadCrumb a,
#navSupp a,
#siteinfoLegal a,
.sideBoxContent a:not(:has(img)),
.leftBoxHeading a,
.rightBoxHeading a,
.centerColumn li > a,
.centerColumn td > a,
.centerColumn div > a:only-child:not(:has(img)),
[class^="centerBoxContents"] > a:not(:has(img)),
#productQuestions a,
input[type="radio"] + label,
input[type="checkbox"] + label {
    display: inline-block;
}
#navMain a,
#navCatTabs a,
#navEZPagesTop a,
#navBreadCrumb a,
#navSupp a,
#siteinfoLegal a,
.sideBoxContent a:not(:has(img)),
.leftBoxHeading a,
.rightBoxHeading a,
.centerColumn li > a,
.centerColumn td > a,
.centerColumn div > a:only-child:not(:has(img)),
[class^="centerBoxContents"] > a:not(:has(img)),
#productQuestions a,
input[type="radio"] + label,
input[type="checkbox"] + label,
.category-top,
.category-links,
.list-group-item {
    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));
}

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

input[type="submit"],
input[type="button"],
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="search"],
select,
button,
.cssButton,
.carousel-control-prev,
.carousel-control-next {
    min-height: 44px;
    min-width: 44px;
}

/* Radio buttons and checkboxes: 24px boxes (the 2.5.8 minimum). Their labels, styled
   above, are the 44px targets; WCAG 2.5.5 accepts an equivalent control of that size,
   and clicking a label selects its input. */
input[type="radio"],
input[type="checkbox"] {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

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