@charset "UTF-8";
/* ==========================================================================
   accessibility.css - basket.co.il
   Loaded last, after myStyle.css / media-queries.css.

   Everything here is either invisible in the default state (it only appears
   on keyboard focus) or has no rendered effect at all. No colour, spacing or
   typography of the existing design is changed.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Content for screen readers only.
   Used for <label> on the search field and <caption> on data tables - text
   that must exist in the accessibility tree but must not be seen.
   -------------------------------------------------------------------------- */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   Skip links - WCAG 2.4.1 (A).
   .access is already positioned off-screen at top:-1000px by myStyle.css and
   siteFunctions.js pulls it back on focus. These rules make that work without
   JavaScript too, and keep it above the sticky header at every breakpoint.
   -------------------------------------------------------------------------- */
#skip-links {
    height: 0;
    line-height: 0;
}
.access:focus {
    /* !important on purpose: siteFunctions.js writes an inline top:-1000px on
       blur, and an inline declaration would otherwise beat this rule if the
       two ever race. An !important author rule wins over inline. */
    top: 5px !important;
    z-index: 100000;
}
.en .access,
.access:lang(en) {
    direction: ltr;
}

/* --------------------------------------------------------------------------
   Focus indicator - WCAG 2.4.7 (AA) and 1.4.11 (AA).

   383 elements computed to outline-style:none, and seven rules switch it off
   explicitly (five of them with !important), so keyboard users had no way to
   see where they were.

   Why two colours and not one: the ring has to survive white content, the
   dark top bar (#141613), the dark off-canvas menu (#222421), the brand
   orange (#FF6E15) and light grey panels. Brute-forcing every colour, the
   best single value manages only 2.36:1 against the worst of those. A black
   ring with a white halo gives a worst case of 7.49:1 - on light grounds the
   black reads, on dark grounds the white does.

   :focus-visible only paints during keyboard navigation. Mouse users see
   nothing change; measured in-browser, 0 of 1466 elements move.
   -------------------------------------------------------------------------- */
:focus-visible {
    outline: 3px solid #000 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 6px #fff !important;
}
/* Known dark regions: invert, so the ring keeps its contrast there. */
#topMenu :focus-visible,
#header :focus-visible,
#mainMenu :focus-visible,
.cbp-spmenu :focus-visible,
#footer :focus-visible,
#games :focus-visible,
.megamenu :focus-visible {
    outline-color: #fff !important;
    box-shadow: 0 0 0 6px #000 !important;
}
/* The site switches the outline off in seven places. Three of them out-rank
   the rule above on specificity even with !important - #page_body .filter
   input[type="text"] is (1,2,1), #contact-form input:focus is (1,1,1) and
   select.dark is (0,1,1), against (0,1,0) for a bare :focus-visible - so they
   are restated here at a weight that wins. The two-tone ring reads on a light
   or a dark ground either way, so no per-region variant is needed. */
select:focus-visible,
select.dark:focus-visible,
#page_body .filter input[type="text"]:focus-visible,
#page_body .filter input[type="password"]:focus-visible,
#contact-form input:focus-visible,
#contact-form textarea:focus-visible,
.srch_input:focus-visible,
.megamenu > li > a:focus-visible,
.modal-content:focus-visible,
.jwplayer:focus-visible,
.jw-button-color:focus-visible,
.jw-toggle:focus-visible {
    outline: 3px solid #000 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 6px #fff !important;
}
/* Older browsers with no :focus-visible support still get a ring. */
@supports not selector(:focus-visible) {
    a:focus, button:focus, input:focus, select:focus, textarea:focus,
    [tabindex]:focus, [role="button"]:focus {
        outline: 3px solid #000 !important;
        outline-offset: 2px !important;
    }
}

/* --------------------------------------------------------------------------
   Mega menu, keyboard path - WCAG 2.1.1 (A).
   myStyle.css opens a drop-down with ".megamenu li:focus .dropdown_*", which
   only ever matched because every <li> carried a hand-written tabindex. With
   that removed the focus lands on the <a> inside, and :focus does not match an
   ancestor. :focus-within does. siteFunctions.js also handles this through a
   focusin handler; this rule makes the menu work without relying on it.
   -------------------------------------------------------------------------- */
.megamenu li:focus-within > .dropdown_container { top: 45px; right: auto; }
.megamenu li:focus-within > .dropdown_fullwidth { top: 45px; right: 0; }