/* ==========================================================================
   OstuGrupp — Accessibility (AAA pass)
   Additive only. Layers on top of main.css / woocommerce.css / nav.css.
   Goals: visible focus-visible rings everywhere, larger tap targets, a clean
   skip link, aria-current styling, prefers-reduced-motion safety, and a
   forced-colors / high-contrast pass. Nothing here changes layout or brand
   colours — it only strengthens what is already there.
   ========================================================================== */

/* ---- Focus tokens (scoped, do not touch :root in main.css) ---- */
.a11y-ready {
  --a11y-focus: var(--green, #059669);
  --a11y-focus-contrast: #052e16;
  --a11y-ring-w: 3px;
  --a11y-ring-offset: 2px;
  --a11y-tap-min: 44px;
}

/* ==========================================================================
   1. Visible focus everywhere (keyboard users only — :focus-visible)
   main.css sets a 2px ring; we upgrade to a stronger, double-layer ring with
   a white gap so it stays visible on both light and dark (slate) surfaces.
   ========================================================================== */
.a11y-ready a:focus-visible,
.a11y-ready button:focus-visible,
.a11y-ready input:focus-visible,
.a11y-ready select:focus-visible,
.a11y-ready textarea:focus-visible,
.a11y-ready summary:focus-visible,
.a11y-ready [tabindex]:focus-visible,
.a11y-ready [role="button"]:focus-visible,
.a11y-ready [contenteditable="true"]:focus-visible {
  outline: var(--a11y-ring-w) solid var(--a11y-focus);
  outline-offset: var(--a11y-ring-offset);
  box-shadow: 0 0 0 calc(var(--a11y-ring-offset) + 1px) #fff,
              0 0 0 calc(var(--a11y-ring-offset) + var(--a11y-ring-w) + 1px) var(--a11y-focus);
  border-radius: 6px;
}

/* Suppress the mouse-only outline so we never lose the keyboard ring above. */
.a11y-ready a:focus:not(:focus-visible),
.a11y-ready button:focus:not(:focus-visible),
.a11y-ready [role="button"]:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* On dark slate surfaces (hero, header drawer head, footer) flip the gap
   colour so the ring reads against a dark background too. */
.a11y-ready .home-hero :focus-visible,
.a11y-ready .home-cta :focus-visible,
.a11y-ready .site-footer :focus-visible,
.a11y-ready .og-drawer__head :focus-visible,
.a11y-ready .announcement-bar :focus-visible {
  outline-color: #6ee7b7;
  box-shadow: 0 0 0 calc(var(--a11y-ring-offset) + 1px) #0f172a,
              0 0 0 calc(var(--a11y-ring-offset) + var(--a11y-ring-w) + 1px) #6ee7b7;
}

/* ==========================================================================
   2. Skip link — "Liigu sisu juurde" (header.php already prints it)
   main.css gives the base off-screen behaviour; we make the focused state
   polished, high-contrast and unmistakable.
   ========================================================================== */
.a11y-ready .skip-link.screen-reader-text:focus,
.a11y-ready .skip-link:focus {
  position: fixed !important;
  left: 16px;
  top: 16px;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  z-index: 100000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--a11y-tap-min);
  padding: 12px 20px;
  background: var(--slate-dark, #1e293b);
  color: #fff;
  font-family: var(--font-display, sans-serif);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.01em;
  border-radius: var(--radius, 12px);
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--green, #059669),
              0 14px 32px -14px rgba(15, 23, 42, .5);
  text-decoration: none;
  white-space: nowrap;
}

/* ==========================================================================
   3. aria-current="page" on the active nav item (set in accessibility.php)
   Give it a clear, non-colour-only affordance (underline + weight).
   ========================================================================== */
.a11y-ready .site-nav__menu a[aria-current="page"] {
  color: var(--green, #059669);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.a11y-ready .og-drawer__links a[aria-current="page"],
.a11y-ready .og-drawer__cats a[aria-current="page"] {
  color: var(--green, #059669);
  font-weight: 700;
}
.a11y-ready .og-drawer a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 1.1em;
  background: var(--green, #059669);
  border-radius: 0 3px 3px 0;
}
.a11y-ready .og-drawer__cat-row,
.a11y-ready .og-drawer__links li {
  position: relative;
}

/* ==========================================================================
   4. Larger tap targets — WCAG 2.5.5 (Target Size). Interactive controls
   should comfortably reach ~44px without disturbing the visual layout.
   We pad the click area, not the box, where possible.
   ========================================================================== */
.a11y-ready .site-nav__menu a,
.a11y-ready .site-footer__menu a,
/* The footer actually renders .site-footer__links (inc/footer-extras.php:190);
   .site-footer__menu appears nowhere on the live site, so this rule had been
   styling nothing. Keeping both — the menu class may return with a real menu. */
.a11y-ready .site-footer__links a,
.a11y-ready .og-mega__children a,
.a11y-ready .og-drawer__links a,
.a11y-ready .og-drawer__subcats a {
  display: inline-flex;
  align-items: center;
  min-height: var(--a11y-tap-min);
}

/* Icon-only / small square controls get a guaranteed 44px hit area. */
.a11y-ready .og-drawer__close,
.a11y-ready .og-drawer__expand,
.a11y-ready .header-search button,
.a11y-ready .og-drawer__search button {
  min-width: var(--a11y-tap-min);
  min-height: var(--a11y-tap-min);
}

/* Pagination, quantity steppers and add-to-cart on shop/product pages. */
.a11y-ready .woocommerce-pagination a,
.a11y-ready .woocommerce-pagination span,
.a11y-ready .quantity input,
.a11y-ready .quantity .qty {
  min-height: var(--a11y-tap-min);
}

/* ---- Money path. Audited 2026-08-02: the smallest and most destructive controls
   in the whole shop were on the cart and checkout, and this list had skipped them.
   Measured at both 1280 and 375: cart row remove 24x24, mini-cart remove 24x24,
   mini-cart close 31x31, quantity +/- 42x44, checkout checkboxes 13x13. A 24px
   PERMANENT delete button on a phone is a product lost to one mis-tap.
   The remove buttons keep their visual size — an invisible centred ::after grows
   only the hit area, which is the technique both Apple HIG and Material recommend. */
/* ⚠️ .mini-cart__item-remove is deliberately NOT in this list. It is already
   `position:absolute; top:50%; right:8px` (cart-widget.css) and this rule is
   (0,2,0) against that rule's (0,1,0) — so adding it here silently reset the
   button to static and dropped the × into the grid's first column, on top of the
   thumbnail. Caught by the v1.2.73 audit before it ever deployed; it shipped into
   the source in v1.2.65. An absolutely positioned box is its own containing block,
   so the 44px ::after below works on it without this.
   `.woocommerce a.remove` DOES need it — on the cart page that link is static. */
.a11y-ready .woocommerce a.remove {
  position: relative;
}
.a11y-ready .woocommerce a.remove::after,
.a11y-ready .mini-cart__item-remove::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--a11y-tap-min);
  height: var(--a11y-tap-min);
  transform: translate(-50%, -50%);
}
.a11y-ready .mini-cart__close,
.a11y-ready .qty-stepper__btn {
  min-width: var(--a11y-tap-min);
  min-height: var(--a11y-tap-min);
}
/* Checkboxes: grow the box a little AND make the whole label row tappable, rather
   than asking for a precise hit on a 13px square. */
.a11y-ready .woocommerce form .form-row input[type="checkbox"],
.a11y-ready .woocommerce-checkout input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
.a11y-ready .woocommerce-terms-and-conditions-wrapper .woocommerce-form__label-for-checkbox,
.a11y-ready .woocommerce form .form-row label.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: var(--a11y-tap-min);
  padding: 8px 0;
}

/* ==========================================================================
   5. Forms — ensure a perceivable focus state on WooCommerce inputs even if
   the browser default is faint (login, checkout, account, search).
   ========================================================================== */
.a11y-ready input:focus-visible,
.a11y-ready select:focus-visible,
.a11y-ready textarea:focus-visible {
  border-color: var(--green, #059669);
}

/* Make required-field and error messaging legible (not colour-only). */
.a11y-ready .woocommerce-error,
.a11y-ready .wc-block-components-validation-error {
  font-weight: 600;
}

/* ==========================================================================
   6. prefers-reduced-motion — belt-and-braces guard.
   main.css already trims durations; we also neutralise transforms/parallax
   and keep scrolling instant for users who ask for less motion.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .a11y-ready *,
  .a11y-ready *::before,
  .a11y-ready *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  /* Cancel hover lifts so nothing "jumps" without a transition. */
  .a11y-ready .card-premium:hover,
  .a11y-ready .product-card:hover,
  .a11y-ready .home-cat:hover,
  .a11y-ready .btn-primary:hover,
  .a11y-ready .btn-secondary:hover {
    transform: none !important;
  }
  .a11y-ready html {
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   7. Forced colors / Windows High Contrast — keep focus + active states
   visible when the OS overrides colours, and stop decorative gaps swallowing
   the ring.
   ========================================================================== */
@media (forced-colors: active) {
  .a11y-ready a:focus-visible,
  .a11y-ready button:focus-visible,
  .a11y-ready input:focus-visible,
  .a11y-ready select:focus-visible,
  .a11y-ready textarea:focus-visible,
  .a11y-ready [tabindex]:focus-visible,
  .a11y-ready [role="button"]:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }
  .a11y-ready .skip-link:focus {
    outline: 3px solid Highlight;
    box-shadow: none;
  }
  .a11y-ready .site-nav__menu a[aria-current="page"] {
    forced-color-adjust: none;
    text-decoration: underline;
  }
}

/* ==========================================================================
   8. Misc niceties
   ========================================================================== */
/* A consistent, visible focus ring for the custom drawer/mega toggles. */
.a11y-ready .og-drawer-toggle:focus-visible,
.a11y-ready .og-mega__trigger:focus-visible,
.a11y-ready .js-mini-cart-toggle:focus-visible {
  outline: var(--a11y-ring-w) solid var(--a11y-focus);
  outline-offset: var(--a11y-ring-offset);
}

/* Respect users who navigate by keyboard: never hide content behind a
   permanently-removed outline on programmatically-focused regions. */
.a11y-ready [tabindex="-1"]:focus {
  outline: none;
}

/* Ensure the main landmark target (#main) doesn't show a stray ring when the
   skip link sends focus there, but keep it reachable. */
.a11y-ready #main:focus {
  outline: none;
}