/* ARMPIN accessibility layer (2026-10-26, WCAG 2.1 AA / IS 5568). Loaded after armpin-design-system.css.
   Only what accessibility needs: no visual redesign. Mobile-only rules stay inside the media query. */

/* visually hidden, still announced */
.armpin-sr-only { 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 link: first focusable element, visible only on focus */
.armpin-skip-link { position: absolute; inset-inline-start: 0.75rem; top: -4rem; z-index: 10000; background: var(--ap-foreground); color: var(--ap-background); padding: 0.6rem 1rem; border-radius: calc(var(--ap-radius) - 2px); font-weight: 700; font-size: 0.9rem; text-decoration: none; }
.armpin-skip-link:focus, .armpin-skip-link:focus-visible { top: 0.5rem; outline: 3px solid var(--ap-accent); outline-offset: 2px; }
main#main:focus { outline: none; }

/* menus closed with Esc stay closed until the pointer or keyboard re-enters */
.armpin-site-header__group.is-esc-closed > .armpin-site-header__dropdown,
.armpin-lang-menu.is-esc-closed > .armpin-lang-menu__dropdown { display: none !important; }

/* news ticker: pause on keyboard focus and via the pause button (WCAG 2.2.2) */
.armpin-home__ticker:focus-within .armpin-home__ticker-track,
.armpin-home__ticker.is-paused .armpin-home__ticker-track { animation-play-state: paused; }
.armpin-ticker-toggle { flex-shrink: 0; background: none; border: none; border-inline-start: 1px solid var(--ap-line); color: var(--ap-foreground); cursor: pointer; padding: 0 0.8rem; align-self: stretch; font-size: 0.85rem; line-height: 1; }
.armpin-ticker-toggle:hover { background: var(--ap-secondary); }
.armpin-ticker-toggle:focus-visible { outline: 2px solid var(--ap-foreground); outline-offset: -2px; }

/* help bubbles: hoverable/focusable and dismissible (WCAG 1.4.13) */
.armpin-help-ico:hover .armpin-help-ico__bubble,
.armpin-help-ico:focus .armpin-help-ico__bubble,
.armpin-help-ico:focus-within .armpin-help-ico__bubble { pointer-events: auto; }
.armpin-help-ico.is-esc-dismissed .armpin-help-ico__bubble { opacity: 0 !important; pointer-events: none !important; }
.armpin-help-ico:focus-visible { outline: 2px solid var(--ap-foreground); outline-offset: 2px; border-radius: 4px; }

/* keyboard-operable live stream bars */
.armpin-home__stream-bar[role="button"]:focus-visible { outline: 2px solid var(--ap-foreground); outline-offset: -2px; }

@media (max-width: 640px) {
	/* bigger tap areas WITHOUT moving anything: an invisible hit area around small header controls */
	.armpin-site-header__icon-link, .armpin-site-header__mobile-toggle > summary, .armpin-lang-menu__trigger, .armpin-cart__trigger { position: relative; }
	.armpin-site-header__icon-link::after, .armpin-site-header__mobile-toggle > summary::after, .armpin-lang-menu__trigger::after, .armpin-cart__trigger::after { content: ''; position: absolute; inset: -0.5rem; min-width: 44px; min-height: 44px; }
	.armpin-site-footer__legal nav a, .armpin-home__section-head a, .armpin-maglive__more, .armpin-maglive__sech a { display: inline-flex; align-items: center; min-height: 44px; }
	.armpin-ticker-toggle { min-width: 44px; }
}
/* very narrow phones (WCAG 1.4.10 reflow at 320px): the home panels forced a 340px-wide grid column */
@media (max-width: 400px) {
	.armpin-home__columns { grid-template-columns: minmax(0, 1fr); }
	.armpin-home__columns > *, .armpin-home__athletes-grid > * { min-width: 0; }
	.armpin-home__clubs-filters { flex-wrap: wrap; }
	.armpin-home__clubs-filters > * { min-width: 0; max-width: 100%; }
}
/* Mobile reflow fix (a11y, WCAG 1.4.10): on the athlete page the head row (fixed-width photo + title +
   flyer share links) did not wrap and pushed the page 15px wider than a 390px viewport. Wrap the row
   and the share-link group on narrow screens only; desktop layout is untouched. */
@media (max-width: 640px) {
	.armpin-athlete-profile__head { flex-wrap: wrap; }
	.armpin-athlete-profile__head > div { min-width: 0; flex: 1 1 12rem; }
	.armpin-flyer-share { flex-wrap: wrap; }
}