/*
 * Page overlays and floating widgets. Loaded on every page.
 *
 * The floating widgets: our contact widget (components/contact-widget.css), and
 * two that are outside the --shop-z-* scale and not ours to renumber: the
 * Trusted Shops badge (vendor-injected at 2147483647) and Consent Studio's
 * cookie settings pill (.cookie-toggle, injected once consent is given, bottom
 * left). So instead of a z-index war,
 * each page-level overlay marks <html> with its own class, and the widgets are
 * hidden while any is present:
 *
 *   .site-nav-open       phone navigation (layout.html)
 *   .site-nav-mega-open  desktop catalogue menu (layout.html)
 *   .filter-sheet-open   filter sheet (selectie.js)
 *   .site-search-open    search suggestions (search-suggest.js)
 *
 * The badge alone also steps aside while the footer, which shows the rating
 * itself, is on screen (.site-footer-in-view, layout.html).
 *
 * A new overlay adds its class to the first selector list; a new floating
 * widget joins the second.
 */

html:is(.site-nav-open, .site-nav-mega-open, .filter-sheet-open, .site-search-open) :is(.contact-widget, [id^="trustbadge-container"], .consent-studio .cookie-toggle) {
    display: none;
}

/* The open contact panel covers the corner the badge floats in, and the badge
   would sit on top of it. */
html:has(.contact-widget[open]) [id^="trustbadge-container"] {
    display: none;
}

/* The skip link: out of sight until it has focus, then above everything at
   the top of the page. Here because this is the one stylesheet besides the
   tokens that every page loads. */
.skip-link {
    position: absolute;
    inset-block-start: var(--shop-space-2);
    inset-inline-start: var(--shop-space-2);
    z-index: 2147483647;
    padding: var(--shop-space-3) var(--shop-space-4);
    border-radius: var(--shop-radius-md);
    background: var(--shop-ink);
    color: var(--shop-on-dark);
    font-family: var(--shop-font);
    font-size: var(--shop-text-base);
    font-weight: var(--shop-weight-semibold);
    text-decoration: none;
    translate: 0 calc(-100% - var(--shop-space-4));
}

.skip-link:focus,
.skip-link:hover {
    color: var(--shop-on-dark);
    text-decoration: none;
}

.skip-link:focus-visible {
    translate: none;
    outline: 2px solid var(--shop-on-dark-focus);
    outline-offset: 2px;
}

/* main takes focus from the skip link (tabindex="-1") without a ring: the
   next Tab goes on from there. */
#content:focus {
    outline: none;
}

html.site-footer-in-view [id^="trustbadge-container"] {
    display: none;
}