/*
 * AquaSafe accessibility layer.
 *
 * Loaded last on every frontend page, after the theme's own stylesheets and
 * after the v3 page sheets, so it can undo the theme defaults that suppress
 * focus and repair contrast without editing the minified vendor bundles.
 *
 * Everything here is a correction, not a design layer - if a rule is only
 * about how a page looks, it belongs in that page's stylesheet instead.
 */

:root {
    /* 4.8:1 on white, 4.5:1 on the #f4f8fd band, 3.5:1 on the navy footer.
       Same value as before, now taken from the shared token rather than
       repeated - this is the ring colour, not a second brand blue. */
    --as-focus-ring: var(--as-blue);
    /* For rings drawn on the navy surfaces, where the blue above goes flat. */
    --as-focus-ring-on-dark: var(--as-on-dark-ring);
    --as-focus-ring-width: 3px;
    --as-focus-ring-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * 1. Keyboard focus
 *
 * main.css sets `outline: none` on a,button and again on
 * button:focus,input:focus,textarea:focus - so nothing outside the v3 scopes
 * showed where the keyboard was. The rules below restate every selector the
 * theme suppresses, at matching or higher specificity, and the offset keeps
 * the ring on the page background rather than on a red button where a blue
 * ring would vanish.
 * ------------------------------------------------------------------------ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[contenteditable]:focus-visible {
    outline: var(--as-focus-ring-width) solid var(--as-focus-ring);
    outline-offset: var(--as-focus-ring-offset);
}

/* Beats `.btn:focus{outline:none}` and the .34-alpha v3 ring, both (0,2,0). */
.btn:focus-visible,
.button:focus-visible,
.btn-two:focus-visible,
.as-inner-page-v3 a:focus-visible,
.as-inner-page-v3 button:focus-visible,
.as-inner-page-v3 input:focus-visible,
.as-inner-page-v3 select:focus-visible,
.as-inner-page-v3 textarea:focus-visible,
.aquasafe-home-v3 a:focus-visible,
.aquasafe-home-v3 button:focus-visible,
.aquasafe-home-v3 input:focus-visible,
.aquasafe-home-v3 select:focus-visible,
.aquasafe-home-v3 textarea:focus-visible {
    outline: var(--as-focus-ring-width) solid var(--as-focus-ring);
    outline-offset: var(--as-focus-ring-offset);
}

/* Navy grounds: the top bar, the footer and the mobile drawer's header. */
.as-site-footer a:focus-visible,
.as-site-footer button:focus-visible,
.tg-header__top a:focus-visible,
.tg-header__top button:focus-visible {
    outline: var(--as-focus-ring-width) solid var(--as-focus-ring-on-dark);
    outline-offset: 2px;
}

/* Programmatic focus on the <main> target must not paint a ring round the
   whole page - the skip link's own confirmation is the scroll. */
main:focus,
main:focus-visible {
    outline: none;
}

/* ---------------------------------------------------------------------------
 * 2. Skip link
 *
 * ~30 header controls sat between the top of the page and the content.
 * ------------------------------------------------------------------------ */

.skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 9999;
    padding: 12px 20px;
    border-radius: 8px;
    background: var(--as-navy);
    color: #fff;
    font-family: var(--tg-heading-font-family, "Poppins", sans-serif);
    font-size: var(--as-text-base);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transform: translateY(calc(-100% - 16px));
    transition: transform .15s ease-out;
}

.skip-link:focus {
    color: #fff;
    transform: translateY(0);
    outline: var(--as-focus-ring-width) solid var(--as-focus-ring-on-dark);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .skip-link {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
 * 3. Contrast
 * ------------------------------------------------------------------------ */

/* The current page in the breadcrumb was --tg-theme-primary (#6eafdf):
   2.37:1 on white, 2.22:1 on the v3 band. */
.breadcrumb__content .breadcrumb > * {
    color: var(--as-muted);
}

.breadcrumb__content .breadcrumb > * a {
    color: var(--as-navy);
}

.breadcrumb__content .breadcrumb > * a:hover,
.breadcrumb__content .breadcrumb > * a:focus-visible {
    color: var(--as-blue);
    text-decoration: underline;
}

/* .btn-two shipped as #000 on the theme red - 3.62:1 for a 15px label.
   Inside the v3 scopes the button is already white on #c9342b; this covers
   the pages that scope has not reached, such as the dashboards. */
.btn-two {
    color: #fff;
}

.btn-two svg {
    color: #fff !important;
}

/* ---------------------------------------------------------------------------
 * 4. The off-canvas drawer
 *
 * It was hidden by transform alone, so its ~16 controls stayed in the tab
 * order at every width - including desktop, where its opener is display:none.
 * `visibility` inherits the .3s `all` transition already on the element, so
 * the panel stays visible for the whole slide-out and only then leaves the
 * tab order.
 * ------------------------------------------------------------------------ */

.tgmobile__menu {
    visibility: hidden;
}

body.mobile-menu-visible .tgmobile__menu {
    visibility: visible;
}

/* ---------------------------------------------------------------------------
 * 4b. The scroll-to-top button
 *
 * Parked at bottom:-10% until the page scrolls, but still visible to the
 * focus order - so it was the second tab stop on every page, and pressing
 * Enter there did nothing a visitor could see. The 1s transition already on
 * the element carries visibility, so it stays put while sliding away.
 * ------------------------------------------------------------------------ */

.scroll__top:not(.open) {
    visibility: hidden;
}

/* ---------------------------------------------------------------------------
 * 5. The account menu
 *
 * Opened on :hover only, so the whole signed-in menu - dashboards, profile,
 * logout - was unreachable by keyboard. The trigger is now a button whose
 * aria-expanded drives the panel, alongside the untouched hover rule.
 * ------------------------------------------------------------------------ */

.user_icon > button[aria-expanded="true"] + .menu_user_list {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    -webkit-transform: scale(1);
}

/* The trigger was an <a>; a <button> needs the user-agent defaults cleared,
   and the theme's own :hover rules re-pointed at the new element. */
.user_icon > button.cart-count {
    padding: 0;
    background: transparent;
    font: inherit;
}

.user_icon:hover > button.cart-count,
.user_icon > button.cart-count[aria-expanded="true"] {
    border-color: var(--tg-theme-primary);
    background: var(--tg-theme-primary);
}

.user_icon:hover > button.cart-count img,
.user_icon > button.cart-count[aria-expanded="true"] img {
    filter: brightness(0) invert(1);
}

/* ---------------------------------------------------------------------------
 * 6. Motion
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}