/* === WCAG 2.2 nakładka: focus, skip-link, menus, toolbar toggles === */

/* 1) Strong, visible focus on all interactive controls */
a:focus, button:focus, input:focus, select:focus, textarea:focus,
summary:focus, [role="button"]:focus, [tabindex]:not([tabindex="-1"]):focus {
  outline: 3px solid #000 !important;
  outline-offset: 3px !important;
}
:where(a, button, input, select, textarea, summary,
       [role="button"],
       [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid #000;
  outline-offset: 3px;
}
.a11y-focus-visible { outline: 3px solid #000 !important; outline-offset: 3px !important; }

/* 2) Skip link (injected by JS if missing) */
.a11y-skip-link {
  position: absolute; left: .5rem; top: -100px; padding: .5rem 1rem;
  background: #000; color: #fff; z-index: 9999; text-decoration: none; border-radius: 4px;
}
.a11y-skip-link:focus, .a11y-skip-link:active { top: .5rem; z-index: 999999; }

/* 3) Generic helpers */
.sr-only {
  position: absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
[role="button"], [data-a11y-click], .a11y-menu-toggle { cursor: pointer; }

/* 4) Menu visibility via [hidden] and classes (non-destructive) */
nav li.a11y-has-submenu { position: relative; }
nav li.a11y-has-submenu > ul[hidden],
nav li.a11y-has-submenu > div[hidden] { display: none !important; }
nav li.a11y-has-submenu.is-open > ul,
nav li.a11y-has-submenu.is-open > div { display: block; }
nav li.a11y-has-submenu.is-open > a,
nav li.a11y-has-submenu.is-open > button,
nav li.a11y-has-submenu.is-open > [aria-haspopup="true"] {
  background-color: rgba(0,0,0,.06);
}

/* 5) Accessibility toolbar (positioned fixed) */
.a11y-toolbar {
  position: fixed; left: 1rem; top: 0.5rem; z-index: 10000;
  display: flex; gap: .5rem; flex-wrap: wrap;
}
.a11y-toolbar button {
  font: inherit; line-height: 1; padding: .5rem .6rem;
  border: 1px solid #333; border-radius: .5rem; background: #fff;
}
.a11y-toolbar button:focus { outline: 3px solid #000; outline-offset: 3px; }



/* === Launcher (♿) – przycisk toggle === */
.a11y-toggle {
  position: fixed;
  left: 1rem;
  top: 0.3rem;
  z-index: 10000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0px;
  border: none;
  background: transparent;
  color: #ffffff;
  font-size: 2rem;
  cursor: pointer;
  
}
@media only screen and (max-width: 768px) {
.a11y-toggle {
  position: fixed;
  left: 0;
  top: 0.5rem;
  z-index: 10000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0px;
  border: none;
  background: transparent;
  color: #ffffff;
  font-size: 2rem;
  cursor: pointer;
  
}	
}

.a11y-toggle:hover {
  
}

.a11y-icon-wheelchair {
  line-height: 1;
}

/* === Panel wysuwany z lewej === */
.a11y-panel {
 position: fixed;
    left: 0;
    top: 3.8rem;
    z-index: 9999;
    width: 260px;
    max-width: 80vw;
    padding: 1rem 1rem 1.25rem;
    background: #ffffff;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.3);
    border-top-right-radius: 12px;
    border-right: 1px solid #ccc;
    transform: translateX(-100%);
    transition: transform 0.25s 
ease-in-out;
}

html.a11y-reduce-motion .a11y-panel {
  transition: none !important;
}

/* Gdy panel otwarty – klasa ustawiana JS-em */
.a11y-panel.is-open {
  transform: translateX(0);
}

.a11y-panel-title {
  font-size: 1rem;
  margin: 0 0 .75rem;
  font-weight: 600;
  color: #00365f;
}

.a11y-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
  margin-bottom: .5rem;
  padding: .55rem .75rem;
  border-radius: 999px;
  border: 1px solid #00365f;
  background: #ffffff;
  color: #00365f;
  font: inherit;
  cursor: pointer;
}

/* Ostatni bez marginesu jeśli chcesz */
.a11y-btn:last-child {
  margin-bottom: 0;
}

.a11y-btn .a11y-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.a11y-btn-text {
  font-size: .9rem;
}

/* Stan wciśnięty / aktywny */
.a11y-btn[aria-pressed="true"],
.a11y-btn.is-active {
  background: #00365f;
  color: #ffffff;
}

/* żeby ikonki nie traciły kontrastu w stanie aktywnym */
.a11y-btn[aria-pressed="true"] .a11y-icon,
.a11y-btn.is-active .a11y-icon {
  color: #ffffff;
}

/* Motion: przełączanie pauza/play */
#a11y-btn-motion .a11y-icon-play {
  display: none;
}

#a11y-btn-motion.is-active .a11y-icon-pause {
  display: none;
}

#a11y-btn-motion.is-active .a11y-icon-play {
  display: inline-block;
}


/* 6) State classes applied to <html> by JS */
html.a11y-contrast * { background: #000 !important; color: #fff !important; }
html.a11y-contrast a { color: #0ff !important; text-decoration: underline !important; }
html.a11y-font-lg { font-size: 112.5% !important; }       /* +2 steps */
html.a11y-font-xl { font-size: 125% !important; }         /* +3 steps */
html.a11y-letter-wide * { letter-spacing: .06em !important; }
html.a11y-reduce-motion * { animation: none !important; transition: none !important; }

/* Globalne ograniczenie ruchu */
html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
}

/* --- SLIDER GŁÓWNY (bannery na stronie głównej) --- */
/* SimplyScroll opakowuje listę klasami simply-scroll* – neutralizujemy przesuwanie */

html.a11y-reduce-motion .simply-scroll,
html.a11y-reduce-motion .simply-scroll-clip,
html.a11y-reduce-motion .simply-scroll-list {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    left: 0 !important;
    margin-left: 0 !important;
}

/* Pokaż tylko pierwszy slajd, resztę ukryj */
html.a11y-reduce-motion .simply-scroll-list li {
    display: none !important;
}

html.a11y-reduce-motion .simply-scroll-list li:first-child {
    display: block !important;
}

/* 7) Respect prefers-reduced-motion in case users set OS setting */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
.m-abox {
	display: block !important;
}
a, button {
  min-width: 24px;
  min-height: 24px;
}