/* Accessibility overrides, loaded after style.css.
   style.css globally strips focus outlines with :focus{outline-style:none}; this puts a
   visible ring back for keyboard users only (:focus-visible), so mouse clicks look unchanged.
   Two-tone ring (dark inner, amber outer) stays visible on both the black header and white pages. */
:focus-visible {
    outline: 3px solid #ffbf47 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #0b0c0c !important;
}

/* Skip link: off-screen until focused, then pinned top-left above the header. */
.skip-link {
    position: absolute;
    left: 0.5rem;
    top: -10rem;
    z-index: 10000;
    padding: 0.75rem 1rem;
    background: #fff;
    color: #0b0c0c;
    font-weight: 700;
    text-decoration: underline;
}

.skip-link:focus {
    top: 0.5rem;
}

/* Visually hidden but still read by screen readers (style.css's Bulma predates .is-sr-only). */
.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;
}

/* Former <a @click> controls that are now <button>s: drop the browser's button chrome so they look
   as the links did. :where() keeps this at zero specificity, so Bulma classes on the same element
   (.card-footer-item padding and dividers, .card-header-icon) still apply. */
:where(.a11y-link-button) {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    line-height: inherit;
    text-align: inherit;
    color: #cc0200; /* style.css a{} */
    cursor: pointer;
}

/* Bulma's element rule button{font-family:...} outranks :where(); no Bulma class sets a font, so a class rule is safe. */
.a11y-link-button {
    font-family: inherit;
}

/* Footer headings were #c00 on black (3.56:1); #f00 is 5.25:1. */
.footer .footer-heading {
    color: #f00;
}

/* Bulma's .has-text-grey (#7a7a7a) fails 4.5:1 on white and the light-grey panels; #6b6b6b passes on all (4.89:1+). */
.has-text-grey {
    color: #6b6b6b !important;
}

/* White on Bulma's .is-info blue (#209cee) is 2.98:1, e.g. the checkout "PAY" card button; #1576c4 is 4.75:1. */
.button.is-info {
    background-color: #1576c4;
}

.button.is-info:hover,
.button.is-info.is-hovered {
    background-color: #1268ad;
}

.button.is-info:active,
.button.is-info.is-active {
    background-color: #105f9e;
}

/* Links inside running text must not rely on colour alone. */
p a:not(.button):not(.tag) {
    text-decoration: underline;
}

/* The skip target is focusable only so the skip link can move focus into it; no ring on the whole page. */
main:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}