/* Menu dostępności — wersja dla szablonu Joomla „kardio-layout” (stary kardiotel.pl)
   Wgraj jako: templates/kardio-layout/css/dostepnosc.css  (instrukcja: INSTALACJA-JOOMLA.md) */
html { --navy: #02376b; --blue: #004a8f; --red: #ee1d25; --red-dark: #c4141b; --ink: #0a2f5c; --text: #475467; --muted: #667085; --tint: #e6f0fa; }
/* zabezpieczenie przed stylami szablonu (nagłówki, listy, przyciski, odstępy) */
#a11y, #a11y *, #a11y *::before, #a11y *::after { box-sizing: border-box; }
#a11y { font-family: "Rubik", Arial, sans-serif; font-weight: 400; text-align: left; }
#a11y :is(h2, h3, p, ul, li, header, section, div, span, output, small, b) { text-shadow: none; }
#a11y :is(h2, h3, p) { margin-left: 0; margin-right: 0; float: none; width: auto; background-image: none; }
#a11y button { font-family: inherit; margin: 0; line-height: 1.25; overflow: visible; }
#a11y a { text-decoration: underline; }

/* ==================== Menu dostępności (karta po prawej stronie; układ wzorowany na menu ze strony blikpol.pl) ==================== */
.a11y-btn { position: fixed; right: 0; top: calc(50% - 30px); z-index: 260; width: 52px; height: 60px; padding: 0; border: 0; border-radius: 14px 0 0 14px; background: var(--navy); color: #fff !important; display: grid; place-items: center; cursor: pointer; box-shadow: -4px 6px 22px rgba(6, 38, 74, .35) !important; transition: width .18s, background .18s; }
.a11y-btn svg { width: 30px; height: 30px; }
.a11y-btn:hover, .a11y-btn:focus-visible { width: 60px; background: var(--red); }
.a11y-btn:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.a11y-panel { position: fixed; top: 12px; right: 12px; bottom: 12px; z-index: 320; width: min(440px, calc(100vw - 24px)); display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: #eef1f6; color: var(--text); box-shadow: 0 24px 80px rgba(6, 38, 74, .45); font-size: min(calc(var(--fs, 17px) - 1px), 19px); line-height: 1.35; transform: translateX(112%); visibility: hidden; transition: transform .26s ease, visibility 0s .26s; }
.a11y-panel.open { transform: none; visibility: visible; transition: transform .26s ease; }
.a11y-panel header { display: flex; align-items: center; gap: 10px; padding: 14px 16px 14px 20px; background: var(--navy); color: #fff; }
.a11y-hico svg { width: 30px; height: 30px; display: block; }
.a11y-panel h2 { flex: 1; margin: 0; padding: 0; border: 0; background: none; color: #fff; font-size: 1.28em; font-weight: 500; letter-spacing: 0; text-transform: none; }
.a11y-hbtn { width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff !important; display: grid; place-items: center; cursor: pointer; }
.a11y-hbtn svg { width: 21px; height: 21px; }
.a11y-hbtn:hover, .a11y-hbtn:focus-visible { background: var(--red); }
.a11y-body { flex: 1; overflow: auto; padding: 14px 16px 18px; }
.a11y-panel h3.a11y-sec { margin: 20px 2px 10px; padding: 0; border: 0; background: none; color: var(--ink); font-size: 1.05em; font-weight: 500; letter-spacing: 0; text-transform: none; }
.a11y-ico svg { width: 30px; height: 30px; display: block; }
.a11y-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; margin: 0 0 10px; padding: 12px 16px; border: 1px solid #dfe5ee; border-radius: 12px; background: #fff; color: var(--text) !important; font: inherit; text-align: left; cursor: pointer; }
.a11y-row .a11y-ico svg { width: 26px; height: 26px; }
.a11y-row .a11y-lbl { flex: 1; font-weight: 500; }
.a11y-row .a11y-lbl small { display: block; margin-top: 2px; font-weight: 400; color: var(--muted); font-size: .88em; }
.a11y-chev svg { width: 20px; height: 20px; display: block; }
.a11y-row:hover { border-color: var(--blue); background: var(--tint); }
.a11y-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.a11y-opt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 104px; padding: 12px 8px; border: 2px solid #dfe5ee; border-radius: 12px; background: #fff; color: var(--text) !important; font: inherit; font-size: .9em; line-height: 1.25; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.a11y-opt:hover { border-color: var(--blue); background: var(--tint); }
.a11y-opt[aria-pressed="true"] { border-color: var(--navy); background: var(--navy); color: #fff !important; }
.a11y-dots { display: flex; gap: 5px; height: 8px; }
.a11y-dots i { width: 8px; height: 8px; border-radius: 50%; background: #c9d3e1; }
.a11y-dots i.on { background: var(--red); }
.a11y-opt[aria-pressed="true"] .a11y-dots i { background: rgba(255, 255, 255, .4); } .a11y-opt[aria-pressed="true"] .a11y-dots i.on { background: #fff; }
.a11y-fscard { grid-column: span 2; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 2px solid #dfe5ee; border-radius: 12px; background: #fff; font-size: .9em; }
.a11y-fshead { display: flex; align-items: center; gap: 10px; }
.a11y-fshead .a11y-ico svg { width: 28px; height: 28px; }
.a11y-size { display: flex; align-items: center; gap: 10px; }
.a11y-sz { flex: none; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; background: var(--navy); color: #fff !important; font-size: 26px; line-height: 1; cursor: pointer; }
.a11y-sz:hover:not(:disabled), .a11y-sz:focus-visible { background: var(--red); }
.a11y-sz:disabled { opacity: .35; cursor: not-allowed; }
.a11y-fsv { flex: 1; padding: 10px; border-radius: 999px; background: #eef1f6; text-align: center; font-weight: 600; color: var(--ink); }
.a11y-hint { margin: 0 2px 12px; color: var(--muted); font-size: .92em; }
.a11y-status { min-height: 1.4em; margin: 14px 2px 0; color: var(--muted); font-size: .92em; }
.a11y-note { margin: 4px 2px 0; font-size: .86em; color: var(--muted); }
.a11y-panel button { text-transform: none !important; letter-spacing: 0 !important; transform: none !important; box-shadow: none !important; }
/* ogólna reguła „button:hover { color: #fff !important }” nie może bielić napisów na jasnych kafelkach */
.a11y-panel .a11y-opt:hover, .a11y-panel .a11y-opt:focus-visible, .a11y-panel .a11y-row:hover, .a11y-panel .a11y-row:focus-visible { color: var(--text) !important; }
.a11y-panel .a11y-opt[aria-pressed="true"], .a11y-panel .a11y-opt[aria-pressed="true"]:hover, .a11y-panel .a11y-opt[aria-pressed="true"]:focus-visible { color: #fff !important; background: var(--navy); border-color: var(--navy); }
.a11y-panel .a11y-opt:focus-visible, .a11y-panel .a11y-row:focus-visible, .a11y-panel .a11y-sz:focus-visible, .a11y-panel .a11y-hbtn:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
#a11yGuide { position: fixed; left: 0; right: 0; top: 40%; height: 48px; z-index: 255; pointer-events: none; background: rgba(255, 214, 0, .22); border-top: 3px solid #e59a00; border-bottom: 3px solid #e59a00; }
@media (max-width: 520px) { .a11y-btn { width: 46px; height: 54px; top: 38%; } .a11y-panel { inset: 0; width: 100%; border-radius: 0; } .a11y-grid { grid-template-columns: repeat(2, 1fr); } }
@media print { #a11y, #a11yGuide { display: none !important; } }

/* --- rozmiar tekstu: wszystkie rozmiary na stronie wynikają ze zmiennej --fs --- */
/* przy powiększonym tekście i odstępach elementy z zablokowanym zawijaniem muszą móc się łamać */
html:is(.a11y-font, [class*="a11y-fs-"], [class*="a11y-letter-"]) #mainCol * { overflow-wrap: anywhere; }

/* --- tekst i czytanie --- */
html.a11y-links a:not(.btn):not(.cta-visit):not(#logo):not(.a11y-btn) { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: .18em; background-color: #fff3a8 !important; color: #0a2f5c !important; font-weight: 600; border-radius: 3px; }
html.a11y-links #a11y a { background-color: transparent !important; color: var(--blue) !important; text-decoration: underline !important; font-weight: 500; }
html.a11y-heads :is(h1, h2, h3, h4, h5, h6):not(.a11y-sec):not(#a11yTitle) { background: #fff3a8 !important; color: #000 !important; outline: 3px solid #0a2f5c; outline-offset: 2px; padding: .15em .45em !important; border-radius: 4px; }
html.a11y-font, html.a11y-font * { font-family: "OpenDyslexic", "Lexend", "Atkinson Hyperlegible", "Comic Sans MS", "Comic Neue", "Trebuchet MS", Verdana, sans-serif !important; }
html.a11y-letter-1 :is(#mainCol, #leftCol, #footer, #detale, #detaleM) * { letter-spacing: .04em !important; }
html.a11y-letter-2 :is(#mainCol, #leftCol, #footer, #detale, #detaleM) * { letter-spacing: .09em !important; }
html.a11y-letter-3 :is(#mainCol, #leftCol, #footer, #detale, #detaleM) * { letter-spacing: .15em !important; }
html.a11y-lh-1 :is(#mainCol, #leftCol) * { line-height: 1.85 !important; } html.a11y-lh-2 :is(#mainCol, #leftCol) * { line-height: 2.15 !important; } html.a11y-lh-3 :is(#mainCol, #leftCol) * { line-height: 2.5 !important; }
html.a11y-weight-1 :is(#mainCol, #leftCol, #footer) * { font-weight: 500 !important; } html.a11y-weight-2 :is(#mainCol, #leftCol, #footer) * { font-weight: 700 !important; }
html.a11y-align-left #mainCol :is(p, li, h1, h2, h3, h4, h5, h6, td, th, blockquote, dd, dt) { text-align: left !important; }
html.a11y-align-center #mainCol :is(p, li, h1, h2, h3, h4, h5, h6, td, th, blockquote, dd, dt) { text-align: center !important; }
html.a11y-align-right #mainCol :is(p, li, h1, h2, h3, h4, h5, h6, td, th, blockquote, dd, dt) { text-align: right !important; }
html.a11y-align-justify #mainCol :is(p, li, blockquote, dd, dt) { text-align: justify !important; }

/* --- obrazy, ruch, nawigacja --- */
html.a11y-noimg :is(#banner, #mainCol img, #mainCol figure, .galeria, .plakat) { display: none !important; }
html.a11y-focus :focus { outline: 4px solid #ee1d25 !important; outline-offset: 3px !important; box-shadow: 0 0 0 7px #fff !important; }
html.a11y-still *, html.a11y-still *::before, html.a11y-still *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-still .reveal { opacity: 1 !important; transform: none !important; }
html.a11y-still::view-transition-group(*), html.a11y-still::view-transition-old(*), html.a11y-still::view-transition-new(*) { animation: none !important; }
html.a11y-cursor, html.a11y-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 9-6.5 1.8L16 20l-3 1.4-3.6-7.2L4 18z' fill='%23000' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto !important; }
html.a11y-cursor :is(a, button, [role="button"], select, summary, label, input[type="submit"]) { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 9-6.5 1.8L16 20l-3 1.4-3.6-7.2L4 18z' fill='%23ee1d25' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, pointer !important; }

/* --- filtry: skala szarości i odwrócenie kolorów (nakładane na bloki strony, żeby elementy „fixed” nie traciły położenia) --- */
html.a11y-gray body > :not(#a11y):not(script):not(style):not(noscript):not(iframe) { filter: grayscale(1); }
html.a11y-invert body > :not(#a11y):not(script):not(style):not(noscript):not(iframe) { filter: invert(1) hue-rotate(180deg); }
html.a11y-gray.a11y-invert body > :not(#a11y):not(script):not(style):not(noscript):not(iframe) { filter: grayscale(1) invert(1) hue-rotate(180deg); }
html.a11y-invert :is(img, video, iframe, a#logo) { filter: invert(1) hue-rotate(180deg); }
html.a11y-gray body { background: #f1f1f1 !important; }
html.a11y-invert body { background: #101820 !important; }

/* --- kontrast: ciemny (biały na czarnym), jasny (czarny na białym), wysoki (żółty na czarnym), czarny na żółtym --- */
html.a11y-c-yb { --a-bg: #000; --a-fg: #ff0; --a-link: #0ff; }
html.a11y-c-wb { --a-bg: #000; --a-fg: #fff; --a-link: #ffeb3b; }
html.a11y-c-lt { --a-bg: #fff; --a-fg: #000; --a-link: #0000b8; }
html.a11y-c-by { --a-bg: #ff0; --a-fg: #000; --a-link: #0000b8; }
html[class*="a11y-c-"], html[class*="a11y-c-"] body { background: var(--a-bg) !important; }
html[class*="a11y-c-"] *:not(#a11y-x):not(#a11y-y), html[class*="a11y-c-"] *:not(#a11y-x):not(#a11y-y)::before, html[class*="a11y-c-"] *:not(#a11y-x):not(#a11y-y)::after { background-color: var(--a-bg) !important; background-image: none !important; color: var(--a-fg) !important; border-color: var(--a-fg) !important; box-shadow: none !important; text-shadow: none !important; }
html[class*="a11y-c-"] a:not(#a11y-x):not(#a11y-y), html[class*="a11y-c-"] a:not(#a11y-x):not(#a11y-y) * { color: var(--a-link) !important; text-decoration: underline !important; }
html[class*="a11y-c-"] a#logo:not(#a11y-x):not(#a11y-y) { background-image: var(--a11y-logo, url(../img/logo.png)) !important; background-color: #fff !important; border-radius: 8px; }
html[class*="a11y-c-"] img:not(#a11y-x):not(#a11y-y) { background-color: #fff !important; }
html[class*="a11y-c-"] :is(.btn, button, input, select, textarea, .cta-visit):not(#a11y-x):not(#a11y-y) { border: 2px solid var(--a-fg) !important; }
html[class*="a11y-c-"] :is(#toTop, .cta-visit, #mmTrigger) svg *:not(#a11y-x):not(#a11y-y) { stroke: var(--a-fg) !important; fill: none !important; }
html[class*="a11y-c-"] .a11y-panel svg *:not(#a11y-x):not(#a11y-y), html[class*="a11y-c-"] .a11y-btn svg *:not(#a11y-x):not(#a11y-y) { stroke: var(--a-fg) !important; }
html[class*="a11y-c-"] :is(.a11y-btn, .a11y-hico) svg path:not(#a11y-x):not(#a11y-y) { fill: var(--a-fg) !important; stroke: none !important; }
html[class*="a11y-c-"] .a11y-panel { border: 3px solid var(--a-fg) !important; }
html[class*="a11y-c-"] .a11y-opt[aria-pressed="true"]:not(#a11y-x):not(#a11y-y) { border-width: 5px !important; font-weight: 700; }
html[class*="a11y-c-"] .a11y-dots i:not(#a11y-x):not(#a11y-y) { border: 2px solid var(--a-fg) !important; background-color: transparent !important; }
html[class*="a11y-c-"] .a11y-dots i.on:not(#a11y-x):not(#a11y-y) { background-color: var(--a-fg) !important; }
html[class*="a11y-c-"] #a11yGuide:not(#a11y-x):not(#a11y-y) { background-color: transparent !important; border-color: var(--a-link) !important; border-top: 3px solid; border-bottom: 3px solid; }
html[class*="a11y-c-"] ::selection { background: var(--a-fg) !important; color: var(--a-bg) !important; }