/* ============================================================
   A11Y – CIVILO
   1. BASE UI
   2. TOKENS + MODES
   3. GLOBAL BEHAVIOR
   4. COMPONENT OVERRIDES
============================================================ */
/* =========================================
   A11Y – NO FLASH FIX (CRITICAL)
   -----------------------------------------
   ⚠️ NEODSTRAŇOVAT

   Řeší:
   - bliknutí (flash) při načtení stránky
   - hlavně při aktivním:
     → dark mode
     → high contrast
     → grayscale
     → motion off

   Problém:
   - CSS se načte dřív než JS (localStorage A11Y state)
   - browser vyrenderuje DEFAULT theme
   - pak se aplikují .a11y-* classy → repaint → flicker

   Co to dělá:
   1) vypne všechny transitions/animace při prvním renderu
   2) nastaví stabilní bg + text → žádný „white flash“

   Funguje spolu s:
   → html.a11y-ready (po prvním paintu)

   👉 Bez tohohle:
   - dark mode bliká bíle
   - high contrast bliká
   - celé UI působí rozbité

========================================= */

/* 🔥 vypni přechody jen na kritické prvky */
html:not(.a11y-ready) body,
html:not(.a11y-ready) .site-container,
html:not(.a11y-ready) .header,
html:not(.a11y-ready) .main-menu {
  transition: none !important;
}

/* 🔥 fix pro color + bg flicker */
html:not(.a11y-ready) body {
  background: var(--bg, #fff);
  color: var(--text, #000);
}

/* ============================================================
   1. BASE UI
   Panel, tlačidlo, vnútorné prvky
============================================================ */

:root{
  --a11y-font-scale: 1;
  --a11y-letter: 0px;
  --a11y-gray: 0%;
}

.a11y-panel[hidden]{
  display:none !important;
}

.a11y-fab{
  position:fixed;
  bottom:20px;
  right:20px;
  z-index:9999;

  width:58px;
  height:58px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:none;
  border-radius:50%;

  background:var(--surface);
  color:var(--brand);

  box-shadow:0 4px 12px rgba(0,0,0,.15);
  cursor:pointer;
}

.a11y-icon{
  width:32px;
  height:32px;
  display:block;
}

.a11y-panel{
  position:fixed;
  inset:0;
  z-index:9999;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(0,0,0,.45);
}

.a11y-box{
  width:40rem;
  max-width:90vw;
  max-height:90vh;
  overflow-y:auto;

  padding:1.25rem;
  border-radius:12px;

  background:var(--surface);
  color:var(--text);

  box-shadow:var(--shadow);
}

.a11y-header{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-bottom:12px;
  padding-bottom:18px;

  border-bottom:1px solid var(--border);
}

.a11y-title{
  margin:0;
  font-size:1.2rem;
  font-weight:600;
  color:var(--text);
}

.a11y-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;

  margin:.75rem 0;
}

.a11y-row > div{
  display:flex;
  align-items:center;
  gap:8px;
}

.a11y-box button{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:2.4em;
  padding:.6em 1em;

  border:1px solid var(--border);
  border-radius:8px;

  background:var(--surface);
  color:var(--text);

  font-size:1rem;
  white-space:nowrap;
  cursor:pointer;
}

.a11y-box button:hover{
  opacity:.9;
}

.a11y-box button:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}

.a11y-box button.is-active{
  background:var(--brand);
  color:var(--brand-contrast);
  border-color:var(--brand);
}

#a11y-font-val,
#a11y-letter-val{
  min-width:56px;
  text-align:center;
  font-weight:600;
  color:var(--brand);
}


/* =========================================
   A11Y PANEL – MOBILE
========================================= */

@media (max-width: 640px){

  .a11y-box{
    width: 92vw;
    max-width: 92vw;
    max-height: 85vh;
    padding: 1rem;
    border-radius: 12px;
  }

  .a11y-row{
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;
  }

  .a11y-row > div{
    width: 100%;
    justify-content: flex-start; /* 🔥 left align */
    flex-wrap: wrap;
    gap: 6px;
  }

  .a11y-box button{
    flex: 0 0 auto;
  }
}


/* =========================================
   A11Y BOX – HARD STOP HOVER (MOTION OFF)
========================================= */

body.a11y-motion-off .a11y-box button,
body.a11y-motion-off .a11y-box button:hover,
body.a11y-motion-off .a11y-box button:focus,
body.a11y-motion-off .a11y-box button:active {
  opacity: 1 !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;

  transition: none !important;
  animation: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* active state musí zostať active */
body.a11y-motion-off .a11y-box button.is-active,
body.a11y-motion-off .a11y-box button.is-active:hover,
body.a11y-motion-off .a11y-box button.is-active:focus,
body.a11y-motion-off .a11y-box button.is-active:active {
  opacity: 1 !important;
  background: var(--brand) !important;
  color: var(--brand-contrast) !important;
  border-color: var(--brand) !important;

  transition: none !important;
  animation: none !important;
  transform: none !important;
  box-shadow: none !important;
}





/* ============================================================
   2. TOKENS + MODES
   Len premenné a módové prepínače
============================================================ */

html{
  font-size:calc(16px * var(--a11y-font-scale));
}

body{
  font-size:1rem;
  letter-spacing:var(--a11y-letter);
}




/* =========================================
   A11Y – GRAYSCALE (FINAL SIMPLE FIX)
========================================= */



/* grayscale na reálne časti layoutu */
body.a11y-gray header,
body.a11y-gray .site-header,
body.a11y-gray .layout-main,
body.a11y-gray main,
body.a11y-gray .site-footer,
body.a11y-gray .mobile-menu,
body.a11y-gray footer,
body.a11y-gray .a11y-fab {
  filter: grayscale(var(--a11y-gray));
  will-change: filter;
}

/* preview len vo vnútri panelu */
body.a11y-gray .a11y-box {
  filter: grayscale(var(--a11y-gray));
}

/* header musí byť nad obsahom */
body.a11y-gray header,
body.a11y-gray .site-header {
  position: relative;
  z-index: 5000;
}

/* obsah nech je pod headerom 
body.a11y-gray .layout-main,
body.a11y-gray main {
  position: relative;
  z-index: 1;
}*/

/* dropdown ešte vyššie v rámci headeru */
body.a11y-gray .main-menu .menu-level li ul {
  z-index: 5001;
}

/* preview len vo vnútri panelu */
body.a11y-gray .a11y-box{
  filter: grayscale(var(--a11y-gray));
}







/* =========================================
   A11Y – GRAYSCALE STABILITY FIX
========================================= */

/* 🔥 stabilizace GPU vrstvy */
body.a11y-gray .main-menu,
body.a11y-gray .main-menu * {
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

/* 🔥 dropdown musí být vlastní vrstva */
body.a11y-gray .main-menu .menu-level li ul {
  transform: translateZ(0);
  will-change: transform;
}

/* 🔥 hover prvky (linky, buttony) */
body.a11y-gray a,
body.a11y-gray button {
  transform: translateZ(0);
}

/* =========================================
   A11Y – GRAYSCALE MOBILE FIX
========================================= */

@media (max-width: 768px){

  /* 🔥 hlavní problém – nav a fixed prvky */
  body.a11y-gray .main-menu,
  body.a11y-gray .mobile-menu,
  body.a11y-gray header {
    filter: grayscale(var(--a11y-gray));
    transform: translateZ(0);
    will-change: transform;
  }

  /* 🔥 dropdown + mobile panel */
  body.a11y-gray .main-menu .menu-level li ul,
  body.a11y-gray .mobile-menu .panel {
    filter: grayscale(var(--a11y-gray));
    transform: translateZ(0);
  }

  /* 🔥 zabrání repaint glitch */
  body.a11y-gray * {
    backface-visibility: hidden;
  }
}





.a11y-dark{
  --bg:#111827;
  --surface:#111827;
  --surface-soft:#1f2937;

  --text:#e5e7eb;
  --muted:#9ca3af;
  --border:rgba(255,255,255,.12);

  --link: #93c5fd; 
  --link-hover: #ffffff;

  --nav-bg:#020617;
  --nav-text:#e5e7eb;

  --btn-bg:#2563eb;
  --btn-text:#ffffff;
}





.a11y-contrast-high{
  --bg:#000;
  --surface:#000;
  --surface-soft:#111;

  --text:#fff;
  --muted:#ccc;
  --border:rgba(255,255,255,.2);

  --brand:#ff0;
  --link:#ff0;
  --link-hover:#ff0;

  --nav-bg:#000;
  --nav-text:#fff;

  --btn-bg:#ff0;
  --btn-text:#000;

  --brand-contrast: var(--brand-contrast-high);
}

.a11y-motion-off{
  --tr:0s;
  --tr-fast:0s;
  --tr-slow:0s;
}


/* ============================================================
   3. GLOBAL BEHAVIOR
   Správanie bez zásahu do theme layoutu
============================================================ */

.a11y-links a{
  text-decoration:underline !important;
  text-underline-offset:3px;
}

.a11y-motion-off *,
.a11y-motion-off *::before,
.a11y-motion-off *::after{
  animation:none !important;
  transition:none !important;
}

.a11y-contrast-high body{
  line-height:1.7;
}

h1, h2, h3, h4{
  color:var(--text);
}

p{
  color:var(--text);
}

small,
.text-muted{
  color:var(--muted);
}

.breadcrumb{
  color:var(--link);
}

.breadcrumb a{
  color:var(--link);
}

.breadcrumb span,
.breadcrumb a + a::before{
  color:var(--muted);
}

.breadcrumb a + a::before{
  content: none;
}

hr,
.divider,
.border,
[class*="divider"]{
  border-color:var(--border) !important;
}

img,
video{
  max-width:100%;
  height:auto;
}

.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;
}


/* ============================================================
   4. COMPONENT OVERRIDES
   Len tam kde treba jemne doladiť theme
============================================================ */

/* panel box v tmavom / contrast režime */
.a11y-dark .a11y-box,
.a11y-contrast-high .a11y-box{
  border:1px solid var(--border);
}

.a11y-contrast-high .a11y-box{
  box-shadow:none;
}

/* =========================================
   HEADER – HIGH CONTRAST BACKGROUND
========================================= */

body.a11y-contrast-high header {
  border-bottom: 1px solid var(--border);
}

/* search icon */
.icon-btn{
  background:transparent !important;
  border:none !important;
}

.icon-btn .icon{
  color:var(--nav-text);
}

/* language switch */
.a11y-dark .lang-switch a{
  border-color:var(--border);
  color:var(--nav-text);
}

.a11y-dark .lang-switch a:hover{
  background:color-mix(in srgb, #fff 10%, transparent);
}

.a11y-contrast-high .lang-switch a{
  border:1px solid #fff;
  color:var(--brand);
  background:transparent;
}

.a11y-contrast-high .lang-switch a:hover{
  background:var(--brand);
  color:var(--brand-contrast);
}

/* footer links */
.a11y-contrast-high .footer-center a,
.a11y-contrast-high .footer-center a:hover,
.a11y-contrast-high .footer-center a:focus{
  color:var(--brand) !important;
}

/* footer social */
.a11y-contrast-high .footer-right a{
  background:var(--surface);
  color:var(--brand);
  border-color:var(--border);
}

.a11y-contrast-high .footer-right a:hover{
  background:var(--brand);
  color:var(--brand-contrast);
  border-color:var(--brand);
}

.a11y-motion-off .footer-right a,
.a11y-motion-off .footer-right a:hover,
.a11y-motion-off .footer-right a:focus,
.a11y-motion-off .footer-right a:active{
  transition:none !important;
  animation:none !important;
  transform:none !important;
}

.a11y-motion-off .footer-right svg{
  transition:none !important;
  transform:none !important;
}

/* main navigation */
.a11y-motion-off .main-menu a,
.a11y-motion-off .main-menu a:hover,
.a11y-motion-off .main-menu a:focus,
.a11y-motion-off .main-menu a:active,
.a11y-motion-off .main-menu a:visited{
  opacity:1 !important;
}

/* footer center links */
.a11y-motion-off .footer-center a,
.a11y-motion-off .footer-center a:hover,
.a11y-motion-off .footer-center a:focus,
.a11y-motion-off .footer-center a:active,
.a11y-motion-off .footer-center a:visited{
  background:transparent !important;
}

/* mobile menu internals */
.a11y-motion-off .mobile-menu .panel{
  transform:none !important;
}

.a11y-motion-off .mobile-drop{
  max-height:none !important;
  opacity:1 !important;
}

.a11y-motion-off .nav-toggle .bar{
  transform:none !important;
  opacity:1 !important;
}


/* =========================================
   FOOTER SOCIAL – FINAL FIX
   musí být úplně poslední v a11y.css
========================================= */

/* HIGH CONTRAST – base */
body.a11y-contrast-high .footer-right a {
  background: var(--surface);
  color: var(--brand);
  border-color: var(--border);
}

/* HIGH CONTRAST – hover */
body.a11y-contrast-high .footer-right a:hover,
body.a11y-contrast-high .footer-right a:focus-visible {
  background: var(--brand);
  color: var(--brand-contrast);
  border-color: var(--brand);
}

/* MOTION OFF + HIGH CONTRAST – hover vypnout, ale nechat žlutou ikonu */
body.a11y-motion-off.a11y-contrast-high .footer-right a:hover,
body.a11y-motion-off.a11y-contrast-high .footer-right a:focus-visible,
body.a11y-motion-off.a11y-contrast-high .footer-right a:active {
  background: var(--surface) !important;
  color: var(--brand) !important;
  border-color: var(--border) !important;
}

/* SVG musí vždy dědit barvu linku */
body.a11y-contrast-high .footer-right svg,
body.a11y-motion-off.a11y-contrast-high .footer-right svg {
  fill: currentColor !important;
  stroke: currentColor;
}


/* MOTION OFF – pouze když NENÍ high contrast */
body.a11y-motion-off:not(.a11y-contrast-high) .footer-right a:hover,
body.a11y-motion-off:not(.a11y-contrast-high) .footer-right a:focus,
body.a11y-motion-off:not(.a11y-contrast-high) .footer-right a:active {

  background: var(--surface) !important;
  color: inherit !important;
  border-color: var(--border) !important;
}







/* =========================================
   FOOTER LINKS – MOTION OFF (NO HOVER)
========================================= */

body.a11y-motion-off:not(.a11y-contrast-high) .footer-center a:hover,
body.a11y-motion-off:not(.a11y-contrast-high) .footer-center a:focus,
body.a11y-motion-off:not(.a11y-contrast-high) .footer-center a:active {

  color: inherit !important;
  text-decoration: none !important;
}

/* =========================================
   FOOTER TEXT – HIGH CONTRAST (YELLOW)
========================================= */

body.a11y-contrast-high .footer-left {
  color: var(--brand) !important;
}

/* =========================================
   A11Y FAB – HIGH CONTRAST (VISIBLE BORDER)
========================================= */

body.a11y-contrast-high .a11y-fab {
  background: var(--surface) !important;
  color: var(--brand) !important; /* žltá */
  border: 1px solid var(--border); /* 🔥 outline ako v dark */
}



/* =========================================
   NAVIGATION – HIGH CONTRAST (YELLOW)
========================================= */

body.a11y-contrast-high .main-menu a,
body.a11y-contrast-high .main-menu a:visited {
  color: var(--brand) !important;
  opacity: 1 !important;
}

body.a11y-contrast-high .main-menu a:hover,
body.a11y-contrast-high .main-menu a:focus,
body.a11y-contrast-high .main-menu a:active {
  color: var(--brand) !important;
}


/* =========================================
   NAVIGATION – HIGH CONTRAST (HOVER UNDERLINE)
========================================= */

body.a11y-contrast-high .main-menu a,
body.a11y-contrast-high .main-menu a:visited {
  color: var(--brand) !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

body.a11y-contrast-high .main-menu a:hover,
body.a11y-contrast-high .main-menu a:focus,
body.a11y-contrast-high .main-menu a:active {
  color: var(--brand) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

/* =========================================
   NAV LINKS – A11Y LINKS HIGHLIGHT
========================================= */

body.a11y-links .main-menu a,
body.a11y-links .main-menu a:visited {
  text-decoration: underline !important;
  text-underline-offset: 3px;
}

body.a11y-links .main-menu a:hover,
body.a11y-links .main-menu a:focus,
body.a11y-links .main-menu a:active {
  text-decoration: underline !important;
}



/* =========================================
   LANG SWITCH – NO HOVER WHEN MOTION OFF
========================================= */

body.a11y-motion-off .lang-switch a:hover,
body.a11y-motion-off .lang-switch a:focus,
body.a11y-motion-off .lang-switch a:active {

  background: transparent !important;
  color: inherit !important;
  border-color: inherit !important;
  transform: none !important;
}









/* =========================================
  HIGH CONTRAST
========================================= */


/* =========================================
   SITE TITLE – HIGH CONTRAST
========================================= */

body.a11y-contrast-high .site-title {
  color: var(--brand) !important;
}


/* =========================================
   SEARCH ICON – HIGH CONTRAST (STROKE SVG)
========================================= */

body.a11y-contrast-high .icon-btn svg {
  stroke: var(--brand) !important;
}

/* =========================================
   LANG SWITCH – HARD STOP (MOTION OFF)
========================================= */

body.a11y-motion-off:not(.a11y-contrast-high) .lang-switch a,
body.a11y-motion-off:not(.a11y-contrast-high) .lang-switch a:hover,
body.a11y-motion-off:not(.a11y-contrast-high) .lang-switch a:focus,
body.a11y-motion-off:not(.a11y-contrast-high) .lang-switch a:active {

  background: transparent !important;
  color: var(--nav-text) !important;
  border-color: var(--border) !important;

  transition: none !important;
  animation: none !important;
  transform: none !important;

  transition-property: none !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  transition-timing-function: linear !important;
}


/* HIGH CONTRAST + MOTION OFF = NO HOVER CHANGE */

body.a11y-motion-off.a11y-contrast-high .lang-switch a:hover,
body.a11y-motion-off.a11y-contrast-high .lang-switch a:focus,
body.a11y-motion-off.a11y-contrast-high .lang-switch a:active {

  background: transparent !important;
  color: var(--brand) !important;
  border-color: var(--brand) !important;
}


/* =========================================
   LANG SWITCH – HIGH CONTRAST (YELLOW)
========================================= */

body.a11y-contrast-high .lang-switch a {
  border: 1px solid var(--brand);
  color: var(--brand);
  background: transparent;
}

body.a11y-contrast-high .lang-switch a:hover,
body.a11y-contrast-high .lang-switch a:focus,
body.a11y-contrast-high .lang-switch a:active {
  background: var(--brand);
  color: var(--brand-contrast-high); /* čierna */
  border-color: var(--brand);
}




/* =========================================
   A11Y – HAMBURGER (HIGH CONTRAST)
========================================= */

/* HIGH CONTRAST → vždy žltý */
.a11y-contrast-high .nav-toggle {
  background: var(--brand); /* žltá */
  border-color: var(--brand);
  color: #000; /* ikonka čierna */
}

/* bars (ikonka) */
.a11y-contrast-high .nav-toggle .bar {
  background: #000;
}

/* hover nesmie meniť farbu */
.a11y-contrast-high .nav-toggle:hover {
  background: var(--brand);
  border-color: var(--brand);
}


/* =========================================
   A11Y – MOTION OFF (žiadne hover animácie)
========================================= */

.a11y-motion-off .nav-toggle,
.a11y-motion-off .nav-toggle:hover {
  transition: none !important;
}

/* hover nesmie meniť nič */
.a11y-motion-off .nav-toggle:hover {
  background: inherit;
  border-color: inherit;
}


/* =========================================
   COMBO: HIGH CONTRAST + MOTION OFF
========================================= */

/* musí zostať žltý aj bez animácie */
.a11y-contrast-high.a11y-motion-off .nav-toggle,
.a11y-contrast-high.a11y-motion-off .nav-toggle:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #000;
}

.a11y-contrast-high.a11y-motion-off .nav-toggle .bar {
  background: #000;
}

.a11y-motion-off .nav-toggle:hover,
.a11y-motion-off .nav-toggle:focus,
.a11y-motion-off .nav-toggle:active {
  background: transparent;
  border-color: color-mix(in srgb, var(--nav-text) 35%, transparent);
}


/* =========================================
   HIGH CONTRAST + MOTION OFF – NO UNDERLINE
========================================= */

body.a11y-contrast-high.a11y-motion-off a,
body.a11y-contrast-high.a11y-motion-off a:hover,
body.a11y-contrast-high.a11y-motion-off a:focus,
body.a11y-contrast-high.a11y-motion-off a:active {
  text-decoration: none !important;
  text-underline-offset: 0 !important;

  transition: none !important;
}







/* =========================================
   A11Y PANEL – DARK MODE ACTIVE FIX
========================================= */

body.a11y-dark .a11y-box button.is-active {
  background: rgba(255,255,255,0.08) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

/* =========================================
   A11Y PANEL – VALUES COLOR FIX (DARK)
========================================= */

body.a11y-dark #a11y-font-val,
body.a11y-dark #a11y-letter-val {
  color: var(--text) !important;
}

/* =========================================
   A11Y FAB – DARK MODE COLOR FIX
========================================= */

body.a11y-dark .a11y-fab {
  color: var(--text) !important;
  background: var(--surface) !important;
  border: 1px solid var(--border);
}

/* =========================================
   A11Y PANEL – DARK + MOTION OFF FIX
========================================= */

body.a11y-dark.a11y-motion-off .a11y-box button,
body.a11y-dark.a11y-motion-off .a11y-box button:hover,
body.a11y-dark.a11y-motion-off .a11y-box button:focus,
body.a11y-dark.a11y-motion-off .a11y-box button:active {

  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;

  transition: none !important;
  animation: none !important;
  transform: none !important;
}

/* active musí zostať viditeľný (ale nie red) */
body.a11y-dark.a11y-motion-off .a11y-box button.is-active,
body.a11y-dark.a11y-motion-off .a11y-box button.is-active:hover {

  background: rgba(255,255,255,0.08) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}



/* =========================================
   FOOTER LINKS – DARK MODE (WHITE HOVER)
========================================= */

body.a11y-dark:not(.a11y-motion-off) .footer-center a:hover,
body.a11y-dark:not(.a11y-motion-off) .footer-center a:focus,
body.a11y-dark:not(.a11y-motion-off) .footer-center a:active {
  color: #ffffff !important;
}




/* =========================================
   NAV LINKS – DARK + MOTION ON
========================================= */

body.a11y-dark:not(.a11y-motion-off) .main-menu a,
body.a11y-dark:not(.a11y-motion-off) .main-menu a:visited {
  color: var(--nav-text) !important;
  text-decoration: none !important;
}

body.a11y-dark:not(.a11y-motion-off) .main-menu a:hover,
body.a11y-dark:not(.a11y-motion-off) .main-menu a:focus-visible,
body.a11y-dark:not(.a11y-motion-off) .main-menu a:active {
  color: #ffffff !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}


/* =========================================
   MOBILE MENU – DARK MODE LINKS
========================================= */

body.a11y-dark .mobile-menu .row.link {
  color: #ffffff;
}


/* DARK MODE – šipky */
.a11y-dark .mobile-menu .row.next::after {
  border-color: #fff;
}

.a11y-dark .mobile-lang-switch {
  color: #fff;
  background: color-mix(in srgb, #fff 10%, transparent);
}

.a11y-dark .mobile-menu {
  background: #1f2937; /* tmavá šedá */
}

.a11y-dark .mobile-menu .panel {
  background: #1f2937;
}


.a11y-dark .mobile-menu .back {
  color: #fff;
  border-color: #374151;

}


/* =========================================
   MOBILE MENU – DARK MODE
========================================= */

body.a11y-dark .mobile-menu .row{
  color: #ffffff;
}


/* =========================================
   FILTER SELECT – DARK MODE
========================================= */

body.a11y-dark .module-filters select,
body.a11y-dark .select-wrap select {
  background: var(--surface);
  color: #ffffff;
  border-color: var(--border);
}

/* option (fallback pro některé browsery) */
body.a11y-dark .module-filters select option,
body.a11y-dark .select-wrap select option {
  color: #000; /* native dropdown bývá světlý */
}

/* =========================================
   SELECT ARROW – DARK MODE
========================================= */

body.a11y-dark .select-wrap:not(.no-arrow)::after {
  border-top-color: #ffffff;
  border-right-color: #ffffff;
}




/* =========================================
   LANG SWITCH – DARK HOVER ONLY
========================================= */

body.a11y-dark .lang-switch a:hover {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #ffffff !important;
}


/* =========================================
   FOOTER SOCIAL – DARK HOVER
========================================= */

body.a11y-dark:not(.a11y-motion-off) .footer-right a:hover,
body.a11y-dark:not(.a11y-motion-off) .footer-right a:focus,
body.a11y-dark:not(.a11y-motion-off) .footer-right a:active {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: var(--border) !important;
}


/* =========================================
   DARK MODE – FORCE BODY + FOOTER
   musí byť úplne posledné
========================================= */

body.a11y-dark {
  color: #e5e7eb !important;
}

body.a11y-dark .layout-wrapper,
body.a11y-dark .layout-main,
body.a11y-dark .site-footer,
body.a11y-dark footer {
  background: #111827 !important;
  color: #e5e7eb !important;
}

body.a11y-dark .site-footer {
  border-color: rgba(255,255,255,.12) !important;
}





/* =========================================
   FOOTER – DARK + MOTION OFF (FINAL FIX)
========================================= */

body.a11y-dark.a11y-motion-off .footer-right a:hover,
body.a11y-dark.a11y-motion-off .footer-right a:focus,
body.a11y-dark.a11y-motion-off .footer-right a:active {
  background: var(--surface) !important;
  color: var(--muted) !important;
  border-color: var(--border) !important;
}

/* footer links */
body.a11y-dark.a11y-motion-off .footer-center a:hover,
body.a11y-dark.a11y-motion-off .footer-center a:focus,
body.a11y-dark.a11y-motion-off .footer-center a:active {
  color: var(--muted) !important;
  text-decoration: none !important;
}


/* =========================================
   A11Y GRAYSCALE – FIX COOKIES
========================================= */

body.a11y-gray .civilo-cookie-banner,
body.a11y-gray .civilo-cookie-bar,
body.a11y-gray .civilo-cookie-modal,
body.a11y-gray .civilo-cookie-dialog {
  filter: grayscale(var(--a11y-gray));
}




/* =========================================
   A11Y – FLASHBAR DARK
========================================= */

.a11y-dark .flashbar {
  background: #111827 !important;
  border-color: rgba(255,255,255,.1);
}

.a11y-dark .flashbar__text,
.a11y-dark .flashbar__link {
  color: #fff;
}

.a11y-dark .flashbar__close {
  background: rgba(255,255,255,0.15);
}

.a11y-dark .flashbar__close:hover {
  background: rgba(255,255,255,0.25);
}

.a11y-dark .flashbar__close .icon::before,
.a11y-dark .flashbar__close .icon::after {
  background: #fff;
}


/* =========================================
   A11Y – FLASHBAR HIGH CONTRAST
========================================= */

.a11y-contrast-high .flashbar {
  background: #000 !important;
  border-color: var(--border);
}

.a11y-contrast-high .flashbar__text,
.a11y-contrast-high .flashbar__link {
  color: var(--brand);
}

.a11y-contrast-high .flashbar__link {
  text-decoration: underline;
}

.a11y-contrast-high .flashbar__close {
  background: var(--brand);
}

.a11y-contrast-high .flashbar__close .icon::before,
.a11y-contrast-high .flashbar__close .icon::after {
  background: #000;
}


/* =========================================
   FLASHBAR – FIX MOTION OFF (NO VISUAL CHANGE)
========================================= */

/* default */
.flashbar__close {
  background: rgba(255,255,255,0.25);
}

/* hover normálne */
.flashbar__close:hover {
  background: rgba(255,255,255,0.35);
}




/* =========================================
   A11Y – FLASHBAR HIGH CONTRAST (HOVER YELLOW)
========================================= */

/* default */
.a11y-contrast-high .flashbar__close {
  background: #000 !important;
  border: 1px solid var(--brand)
}

/* X ikona */
.a11y-contrast-high .flashbar__close .icon::before,
.a11y-contrast-high .flashbar__close .icon::after {
  background: var(--brand) !important;
}

/* 🔥 hover = žltá */
.a11y-contrast-high .flashbar__close:hover,
.a11y-contrast-high .flashbar__close:focus,
.a11y-contrast-high .flashbar__close:active {
  background: var(--brand) !important;
}

/* 🔥 KĽÚČOVÉ – ikonka musí byť čierna */
.a11y-contrast-high .flashbar__close:hover .icon::before,
.a11y-contrast-high .flashbar__close:hover .icon::after,
.a11y-contrast-high .flashbar__close:focus .icon::before,
.a11y-contrast-high .flashbar__close:focus .icon::after,
.a11y-contrast-high .flashbar__close:active .icon::before,
.a11y-contrast-high .flashbar__close:active .icon::after {
  background: #000 !important;
}


/* =========================================
   FIX – MOTION OFF má prioritu nad všetkým
========================================= */

.a11y-motion-off.a11y-contrast-high .flashbar__close,
.a11y-motion-off.a11y-contrast-high .flashbar__close:hover,
.a11y-motion-off.a11y-contrast-high .flashbar__close:focus,
.a11y-motion-off.a11y-contrast-high .flashbar__close:active {
  background: var(--brand) !important;
  opacity: 1 !important;
}

/* ikonka */
.a11y-motion-off.a11y-contrast-high .flashbar__close .icon::before,
.a11y-motion-off.a11y-contrast-high .flashbar__close .icon::after {
  background: #000 !important;
}

/* vypni animácie */
.a11y-motion-off .flashbar__close {
  transition: none !important;
}


/* =========================================
   GLOBAL
========================================= */

/* motion OFF – hover = rovnaké ako default */
.a11y-motion-off .flashbar__close,
.a11y-motion-off .flashbar__close:hover,
.a11y-motion-off .flashbar__close:focus,
.a11y-motion-off .flashbar__close:active {
  background: rgba(255,255,255,0.25) !important;
}




/* =========================================
   SKIP LINK (ACCESSIBILITY)
========================================= */

.skip-link {
  position: absolute;
  top: -40px;
  left: 10px;

  color: var(--link);
  text-decoration: underline;

  padding: 6px 10px;
  border-radius: 6px;

  z-index: 10000;
}

/* zobrazí se až při focusu */
.skip-link:focus {
  top: 10px;

  background: var(--surface);
  color: var(--text);

  outline: 2px solid var(--brand);
  outline-offset: 2px;
}


:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* fallback pre Safari */
:focus {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}


/* =========================================
   CMP
========================================= */
body.a11y-dark .civilo-cookie-dialog,
body.a11y-contrast-high .civilo-cookie-dialog {
  border: 1px solid var(--border);
}

body.a11y-gray .civilo-slider{
  filter: grayscale(var(--a11y-gray));
}

body.a11y-gray .civilo-cookie-btn-primary{
  filter: grayscale(var(--a11y-gray));
}


/* =========================================
   CMP – MOTION OFF (HARD STOP)
========================================= */

body.a11y-motion-off .civilo-cookie-btn,
body.a11y-motion-off .civilo-cookie-btn:hover,
body.a11y-motion-off .civilo-cookie-btn:focus,
body.a11y-motion-off .civilo-cookie-btn:active {
  transform: none !important;
  transition: none !important;
}

body.a11y-motion-off .civilo-cookie-btn-primary:hover,
body.a11y-motion-off .civilo-cookie-btn-primary:focus,
body.a11y-motion-off .civilo-cookie-btn-primary:active {
  background: var(--btn-bg) !important;
  color: var(--btn-text) !important;
  border-color: var(--btn-bg) !important;
	opacity: 1 !important;
}

body.a11y-motion-off .civilo-cookie-btn-secondary:hover,
body.a11y-motion-off .civilo-cookie-btn-secondary:focus,
body.a11y-motion-off .civilo-cookie-btn-secondary:active {
  background: transparent !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  opacity: .75 !important;
}



/* =========================================
   CMP – TOGGLE HIGH CONTRAST (ON STATE)
========================================= */

body.a11y-contrast-high .civilo-switch input:checked + .civilo-slider {
  background: var(--brand); /* žltá */
}

body.a11y-contrast-high .civilo-switch input:checked + .civilo-slider::before {
  background: #000; /* tmavá bublina */
}

/* =========================================
   CMP – TOGGLE DARK MODE (ACTIVE STATE)
========================================= */

body.a11y-dark .civilo-switch input:checked + .civilo-slider {
  background: #fff;
}

body.a11y-dark .civilo-switch input:checked + .civilo-slider::before {
  background: var(--surface);
}


/* =========================================
   CMP – PRIMARY BUTTON (DARK MODE)
========================================= */

body.a11y-dark .civilo-cookie-btn-primary {
  background: #fff;
  color: var(--surface);
  border-color: #fff;
}

/* hover = len opacity */
body.a11y-dark .civilo-cookie-btn-primary:hover {
  opacity: .95;
}


/* CMP – DARK + MOTION OFF (PRIMARY NO HOVER) */

body.a11y-dark.a11y-motion-off .civilo-cookie-btn-primary,
body.a11y-dark.a11y-motion-off .civilo-cookie-btn-primary:hover,
body.a11y-dark.a11y-motion-off .civilo-cookie-btn-primary:focus,
body.a11y-dark.a11y-motion-off .civilo-cookie-btn-primary:active {
  background: #fff !important;
  color: var(--surface) !important;
  border-color: #fff !important;
  opacity: 1 !important;
}



/* =========================================
   FOOTER – CIVILO HIGH CONTRAST
========================================= */

body.a11y-contrast-high .footer-powered-center {
  color: var(--brand);
}


/* =========================================
   FOOTER – CIVILO DARK + MOTION OFF (NO UNDERLINE)
========================================= */

body.a11y-dark.a11y-motion-off .footer-powered-center a,
body.a11y-dark.a11y-motion-off .footer-powered-center a:hover,
body.a11y-dark.a11y-motion-off .footer-powered-center a:focus,
body.a11y-dark.a11y-motion-off .footer-powered-center a:active {
  text-decoration: none !important;
}


/* =========================================
   FOOTER – CIVILO MOTION OFF (DEFAULT)
========================================= */

body.a11y-motion-off:not(.a11y-contrast-high) .footer-powered-center a,
body.a11y-motion-off:not(.a11y-contrast-high) .footer-powered-center a:hover,
body.a11y-motion-off:not(.a11y-contrast-high) .footer-powered-center a:focus,
body.a11y-motion-off:not(.a11y-contrast-high) .footer-powered-center a:active {
  text-decoration: none !important;
}




/* =========================================
   LEGAL NAV – DARK MODE ACTIVE FIX
========================================= */

body.a11y-dark .legal-nav-link.is-active{
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #ffffff !important;
}

body.a11y-dark .legal-nav-link.is-active:hover{
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #ffffff !important;
}

/* =========================================
   BREADCRUMB – DARK MODE LINKS FIX
========================================= */

body.a11y-dark .breadcrumb a{
  color: #ffffff !important;
}

body.a11y-dark .breadcrumb a:hover,
body.a11y-dark .breadcrumb a:focus,
body.a11y-dark .breadcrumb a:active{
  color: #ffffff !important;
  text-decoration: underline;
}


/* =========================================
   DARK MODE – LINKS FIX
========================================= */

body.a11y-dark {
  --link: #ffffff;
  --link-hover: color-mix(in srgb, #ffffff 70%, transparent);
}



/* =========================================
   A11Y DARK – RELATED + QUICK LINKS
========================================= */


body.a11y-dark .related-all a:hover,
body.a11y-dark .quick-link:hover {
  border-color: #fff;
}


body.a11y-dark .related-all a::after,
body.a11y-dark .quick-link::after,
body.a11y-dark .category-card::after{
  border-top-color: #fff;
  border-right-color: #fff;
}



/* DARK MODE – INPUT FOCUS FIX */
body.a11y-dark .newsletter-input:focus{
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.25);
}


/* DARK MODE – newsletter button override */
body.a11y-dark .newsletter-btn{
  background: #fff;
  color: #000;
  border: 1px solid rgba(255,255,255,.3);
}






/* =========================================
   MENU DROPDOWN DARK 
========================================= */

/* DARK MODE */
body.a11y-dark .main-menu .menu-level li ul {
  background: var(--nav-bg);
}

body.a11y-dark .main-menu .menu-level li ul a {
  color: #fff;
}

body.a11y-dark .main-menu .menu-level li ul a:hover {
  background: color-mix(in srgb, var(--nav-bg) 85%, black);
}


/* =========================================
   MENU DROPDOWN – HIGH CONTRAST FINAL FIX
========================================= */

body.a11y-contrast-high .main-menu .menu-level li ul {
  background: var(--nav-bg) !important;
  border: 1px solid var(--border) !important;
}

body.a11y-contrast-high .main-menu .menu-level li ul a,
body.a11y-contrast-high .main-menu .menu-level li ul a:visited {
 color: var(--brand);
  background: transparent !important;
  text-decoration: none !important;
}

body.a11y-contrast-high .main-menu .menu-level li ul a:hover,
body.a11y-contrast-high .main-menu .menu-level li ul a:focus,
body.a11y-contrast-high .main-menu .menu-level li ul a:active {
  color: var(--brand);
  background: rgba(255,255,0,.18) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px;
}






/* =========================================
   NO UNDERLINE – MOTION OFF (GLOBAL FIX)
========================================= */

body.a11y-motion-off .breadcrumb a,
body.a11y-motion-off .breadcrumb a:hover,
body.a11y-motion-off .breadcrumb a:focus,
body.a11y-motion-off .breadcrumb a:active,

body.a11y-motion-off .legal-nav-link,
body.a11y-motion-off .legal-nav-link:hover,
body.a11y-motion-off .legal-nav-link:focus,
body.a11y-motion-off .legal-nav-link:active{
  text-decoration: none !important;
}


/* =========================================
   NO HOVER BG – KEEP BORDER (MOTION OFF)
========================================= */

body.a11y-motion-off .legal-nav-link:not(.is-active):hover,
body.a11y-motion-off .legal-nav-link:not(.is-active):focus,
body.a11y-motion-off .legal-nav-link:not(.is-active):active,

body.a11y-motion-off .breadcrumb a:hover,
body.a11y-motion-off .breadcrumb a:focus,
body.a11y-motion-off .breadcrumb a:active{
  background: transparent !important;
  color: inherit !important;
  text-decoration: none !important;

  /* 🔥 NECHÁVAME border */
  border-color: var(--border) !important;
}




/* =========================================
   A11Y LINKS + MOTION OFF
   underline ANO, hover efekt NIE
========================================= */

body.a11y-links.a11y-motion-off .main-menu a,
body.a11y-links.a11y-motion-off .main-menu a:visited,
body.a11y-links.a11y-motion-off .main-menu a:hover,
body.a11y-links.a11y-motion-off .main-menu a:focus,
body.a11y-links.a11y-motion-off .main-menu a:active{
  text-decoration: underline !important;
  text-underline-offset: 3px !important;

  color: inherit !important;
  background: transparent !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

/* =========================================
   A11Y – TABLE LETTER SPACING FIX
========================================= */

.editor-content th,
.editor-content td{
  letter-spacing: var(--a11y-letter);
}




/* =========================================
   A11Y – GRAYSCALE FIX (FIXED ELEMENTS)
========================================= */

/* 👉 aplikuj aj na fixed overlay + bubble */
body.a11y-gray .contact-bubble,
body.a11y-gray .contact-dialog{
  filter: grayscale(var(--a11y-gray));
}





/* =========================================
   EDITOR H2 – DARK MODE WHITE
========================================= */

body.a11y-dark .editor-content h2{
  color: #fff !important;
  border-left: 4px solid #fff !important;
}


/* =========================================
   EVENT CARD H3 – DARK MODE WHITE
========================================= */

body.a11y-dark .event-card h3{
  color: #fff !important;
}

body.a11y-dark .event-card h3:hover,
body.a11y-dark .event-card h3:focus-visible{
  color: #fff !important;
}


/* =========================================
   GALLERY META H3 – DARK MODE WHITE
========================================= */

body.a11y-dark .gallery-meta h3{
  color: #fff !important;
}

body.a11y-dark .gallery-meta h3:hover,
body.a11y-dark .gallery-meta h3:focus-visible{
  color: #fff !important;
}



/* =========================================
   BOARD LIST H3 – DARK MODE WHITE
========================================= */

body.a11y-dark .board-list .board-item h3{
  color: #fff !important;
}

body.a11y-dark .board-list .board-item h3:hover,
body.a11y-dark .board-list .board-item h3:focus-visible{
  color: #fff !important;
}



/* =========================================
   RELATED ALL – DARK MODE WHITE
========================================= */

body.a11y-dark .related-all a{
  color: #fff !important;
 
}

body.a11y-dark .related-all a:hover,
body.a11y-dark .related-all a:focus-visible{
  color: #fff !important;
  border-color: 1px solid var(--border)
}



/* =========================================
   WASTE LIST STRONG – DARK MODE WHITE
========================================= */

body.a11y-dark .waste-list li strong{
  color: #fff !important;
}


/* =========================================
   WASTE FIXED – DARK MODE WHITE
========================================= */

body.a11y-dark .waste-fixed{
  border-left: 3px solid #fff !important;
}

/* =========================================
   WASTE RECUR – DARK MODE WHITE
========================================= */

body.a11y-dark .waste-recur{
  border-left: 3px solid #fff !important;
}




/* =========================================
   BTN PRIMARY – DARK MODE WHITE
========================================= */

body.a11y-dark .btn.primary{
  background: #fff !important;
  color: #111827 !important;

  border: 1px solid #fff !important;
}



/* =========================================
   NEWS CARD H3 – DARK MODE WHITE
========================================= */

body.a11y-dark .news-card h3{
  color: #fff !important;
}

body.a11y-dark .news-card h3:hover,
body.a11y-dark .news-card h3:focus-visible{
  color: #fff !important;
}



/* =========================================
   NEWS LINK – DARK MODE WHITE
========================================= */

body.a11y-dark .news-link{
  color: #fff !important;
}

body.a11y-dark .news-link:hover,
body.a11y-dark .news-link:focus-visible{
  color: #fff !important;
}

/* =========================================
   WEATHER WIDGET – DARK MODE
========================================= */

body.a11y-dark .weather-widget{
  background: linear-gradient(
    135deg,
    #1f2937,   /* dark base */
    #111827    /* ještě tmavší */
  ) !important;

  color: #fff !important;

  border: 1px solid rgba(255,255,255,0.08);
}


/* =========================================
   DARK CARD SYSTEM (UNIFIED)
========================================= */

body.a11y-dark .chmi-widget,
body.a11y-dark .waste-widget,
body.a11y-dark .poll-widget,
body.a11y-dark .contact-box,
body.a11y-dark .event-aside,
body.a11y-dark .news-card,
body.a11y-dark .home-news-card,
body.a11y-dark .board-item,
body.a11y-dark .meta-card,
body.a11y-dark .event-card-body,
body.a11y-dark .category-card,
body.a11y-dark .gallery-card,
body.a11y-dark .newsletter-box,
body.a11y-dark .contact-col{

  background: linear-gradient(
    135deg,
    #1f2937,
    #111827
  );

  color: var(--text);
  border: 1px solid rgba(255,255,255,.08);
}






/* =========================================
   SEARCH INPUT – DARK MODE WHITE BORDER
========================================= */

body.a11y-dark .search-input{
  border-color: #fff !important;
}


/* =========================================
   SEARCH ITEM – DARK MODE FIX
========================================= */

body.a11y-dark .search-item:hover,
body.a11y-dark .search-page-item:hover {
  background: rgba(255,255,255,0.06);
}


/* =========================================
   MARK – DARK MODE SOFT
========================================= */

body.a11y-dark mark{
  background: rgba(255,255,255,0.12) !important;
  color: #fff !important;
}




/* =========================================
   CONTACT BUBBLE – DARK MODE WHITE
========================================= */

body.a11y-dark .contact-bubble{
  background: #fff !important;
  color: #111827 !important;

  border: 1px solid rgba(0,0,0,0.08); /* jemný outline */
}


/* =========================================
   CONTACT – LINKS (DARK MODE WHITE)
========================================= */

body.a11y-dark .contact-col a,
body.a11y-dark .contact-card a,
body.a11y-dark .contact-row a{
  color: #fff !important;
}

body.a11y-dark .contact-col a:hover,
body.a11y-dark .contact-card a:hover,
body.a11y-dark .contact-row a:hover,
body.a11y-dark .contact-col a:focus-visible,
body.a11y-dark .contact-card a:focus-visible,
body.a11y-dark .contact-row a:focus-visible{
  color: #fff !important;
  text-decoration: underline;
}


/* =========================================
   CATEGORY CARD – DARK MODE WHITE
========================================= */

body.a11y-dark .category-card{
  color: #fff !important;
}

body.a11y-dark .category-card:hover,
body.a11y-dark .category-card:focus-visible{
  color: #fff !important;
}

/* =========================================
   QUICK LINK – DARK MODE WHITE
========================================= */

body.a11y-dark .quick-link{
  color: #fff !important;
}

body.a11y-dark .quick-link:hover,
body.a11y-dark .quick-link:focus-visible{
  color: #fff !important;
  border-color: #fff;
}




/* =========================================
   HOURS
========================================= */

body.a11y-contrast-high .contact-hours li.is-today{
  background: transparent !important;

  color: var(--brand) !important; /* žltý text */
	border: 1px solid var(--border) !important;
  border-left: 3px solid var(--brand) !important;
}


body.a11y-contrast-high .today-badge{
  background: transparent !important;

  color: var(--brand) !important; /* žltý text */
  border: 1px solid var(--brand) !important;
}





/* =========================================
   OFFICE HOURS – DARK MODE (WHITE)
========================================= */

body.a11y-dark .contact-hours li.is-today{
  background: transparent !important;

  color: #fff !important;
  border-left: 3px solid #fff !important;
  border: 1px solid var(--border);
}

body.a11y-dark .today-badge{
  background: transparent !important;

  color: #fff !important;

  border: 1px solid #fff !important;
}


/* =========================================
   LIGHT BOX PREVIEW
========================================= */
body.a11y-gray #lightbox.active img{
  filter: grayscale(var(--a11y-gray));
}


/* =========================================
   DARK MODE – HERO BG
========================================= */

body.a11y-dark .home-hero-inner{
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--surface-soft) 100%, var(--text) 6%),
    var(--surface)
  );

  border-bottom: 1px solid var(--border);
}





/* =========================================
   POLL – DARK MODE SELECTED (WHITE)
========================================= */

body.a11y-dark .poll-option-row input:checked + .poll-option-ui{
  background: color-mix(in srgb, #ffffff 12%, transparent);
  border-color: rgba(255,255,255,.9);
  box-shadow: 0 0 0 2px rgba(255,255,255,.25);
}




/* =========================================
   POLL RESULTS – DARK MODE (WHITE BARS)
========================================= */

/* bar background (track) */
body.a11y-dark .poll-bar{
  background: rgba(255,255,255,.08);
}

/* fill */
body.a11y-dark .poll-bar-fill{
  background: rgba(255,255,255,.4);
}

/* winner */
body.a11y-dark .poll-row.is-winner .poll-bar-fill{
  background: #ffffff;
}

/* =========================================
   POLL – DARK HOVER (WHITE)
========================================= */

body.a11y-dark .poll-row:hover .poll-bar-fill{
  background: rgba(255,255,255,.75);
}


/* =========================================
   LINK MORE – DARK MODE
========================================= */

body.a11y-dark .link-more,
body.a11y-dark .link-more:visited{
  color: #ffffff;
  text-decoration: none;
}

/* hover */
body.a11y-dark .link-more:hover{
  color: rgba(255,255,255,.75);
  text-decoration: underline;
}


/* =========================================
   DARK MODE – ACTIVE PAGINATION
========================================= */
body.a11y-dark .pagination-item.active {
  background: #ffffff;
  color: #111827 !important;
}





/* =========================================
   A11Y – READY FLAG (NO FLICKER FIX)
   -----------------------------------------
   ⚠️ NEODSTRAŇOVAT

   Řeší problém:
   - bliknutí (flash) při přepnutí A11Y režimů
   - hlavně dark / high contrast / grayscale

   Co se děje:
   - browser nejdřív vyrenderuje default theme
   - pak se aplikují .a11y-* třídy → repaint → flicker

   Řešení:
   - krátká "fake" animace zajistí, že první render
     proběhne bez transition/animation glitchů

   Funguje spolu s:
   html:not(.a11y-ready) { transition: none }

   👉 Bez JS, bez zásahu do logiky
========================================= */

html {
  animation: a11y-ready-fix 0s linear forwards;
}

@keyframes a11y-ready-fix {
  to {
    /* unlock po prvním paintu */
  }
}