/* ==========================================================================
   TOKENS (defaults) — overridable by theme.css.php
   ========================================================================== */
:root{
  /* Layout */
  --container:1120px;

  /* Colors */
  --bg:#ffffff;
  --surface:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;

  /* Brand & accent */
  --brand:#0f766e;
  --brand-contrast:#ffffff;
  --accent:#0ea5e9;
  --accent-contrast:#071018;

  /* Links */
  --link:var(--accent);
  --link-hover:#0284c7;
  --underline-offset:2px;

  /* Typography */
  --font:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,'Apple Color Emoji','Segoe UI Emoji';

  /* Shape & motion */
  --radius:12px;
  --btn-radius:10px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --btn-shadow:0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.06);
  --tr-fast:150ms;
  --tr-slow:250ms;

  /* Buttons */
  --btn-primary-bg:var(--brand);
  --btn-primary-text:var(--brand-contrast);
  --btn-primary-hover-bg:var(--brand);
  --btn-primary-active-bg:var(--brand);
  --btn-primary-disabled-bg:#9ca3af;

  --btn-secondary-bg:var(--accent);
  --btn-secondary-text:var(--accent-contrast);
  --btn-secondary-hover-bg:#38bdf8;
  --btn-secondary-active-bg:#0891b2;

  --btn-outline-bg:transparent;
  --btn-outline-text:var(--text);
  --btn-outline-border:var(--border);
  --btn-outline-hover-bg:color-mix(in srgb, var(--text) 4%, var(--surface));

  --btn-ghost-bg:transparent;
  --btn-ghost-text:var(--text);
  --btn-ghost-hover-bg:color-mix(in srgb, var(--text) 4%, var(--surface));

  /* Back (mobile panel head) */
  --back-font-size:.9rem;
  --back-icon-size:14px;
  --back-radius:10px;
  --back-bg:var(--surface);
  --back-text:var(--text);
  --back-border:var(--border);
  --back-hover-bg:color-mix(in srgb, var(--text) 4%, var(--surface));

  /* Search button (desktop search panel) */
  --btn-search-bg:var(--brand);
  --btn-search-text:#ffffff;

  /* Icons */
  --icon-color:var(--brand);
  --icon-stroke:2px;
  --icon-size:20px;

  /* Misc */
  --panel-head-padding-y:10px;

  /* Mobile nav arrow */
  --submenu-arrow-len:16px;
  --submenu-arrow-head:7px;
  --submenu-arrow-gap:12px;

  /* A11Y runtime vars (set by JS) */
  --a11y-font-scale:1;   /* 1 = 100% */
  --a11y-letter:0;       /* px */
  --a11y-filter:none;    /* composed filters (invert/gray) */
  --a11y-media-filter:none;

  /* NAV tokens (can be overridden by theme.css.php) */
  --nav-bg:   var(--bg);
  --nav-text: var(--text);
  --nav-link: var(--text);
  --nav-link-hover: var(--link-hover);
  --nav-border: var(--border); 
}

/* ==========================================================================
   RESET & BASE
   ========================================================================== */
*{box-sizing:border-box}
html,body{height:100%}
html:focus-within{scroll-behavior:smooth}

/* Base font in rem → zoom via --a11y-font-scale */
html{ font-size:calc(16px * var(--a11y-font-scale)); }
body{
  margin:0; font:400 1rem/1.6 var(--font);
  color:var(--text); background:var(--bg);
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
  letter-spacing:var(--a11y-letter);
}
:where(button,input,select,textarea){ font-size:inherit; letter-spacing:inherit; }

img,svg,video{max-width:100%; height:auto; display:block}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* Links */
a{
  color:var(--link);
  text-underline-offset:var(--underline-offset);
  text-decoration:none;
  transition:color var(--tr-fast) ease, opacity var(--tr-fast) ease;
}
a:hover{color:var(--link-hover); text-decoration:underline}

/* Helpers */
.container{max-width:var(--container); margin-inline:auto; padding:1rem}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(16.25rem,1fr)); gap:1rem}
.meta{color:var(--muted); font-size:.92rem}
.heading{margin:.2rem 0 .5rem}
ul.plain{list-style:none; padding:0; margin:0}
table{width:100%; border-collapse:collapse; background:var(--surface)}
td,th{border:1px solid var(--border); padding:.5rem; text-align:left}

/* Skip link */
.skip{position:absolute; left:-9999px}
.skip:focus{left:1rem; top:.5rem; background:var(--text); color:var(--bg); padding:.5rem; border-radius:.5rem; z-index:1000}

/* =========================================================
   HERO (grid + karta + panely)
   ========================================================= */

/* odsazení obsahu v levém dolním rohu */
:root { --hero-pad: 24px; }

/* === ZÁKLADNÍ STAV (desktop) === */
.hero-grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:16px;
  margin:16px 0 28px;
  align-items:stretch;              /* stejná výška obou sloupců */
}

.hero-card{
  display:grid;
  grid-template-columns:1fr 1fr;    /* vlevo text, vpravo obrázek */
  min-height:380px;
  max-height:clamp(220px,40vh,420px);
  border-radius:12px;
  overflow:hidden;
  background:#0b4b3f;
  color:#fff;
}

/* TEXT BOX — doleva dolů s okraji */
.hero-card__text{
  display:flex;
  flex-direction:column;
  gap:12px;
  justify-content:center;

  /* klíčové umístění v rámci levé gridové buňky */
  place-self:end start;                       /* svisle dolů, vodorovně doleva */
  margin:0 var(--hero-pad) var(--hero-pad); /* vnější okraje od levého/spodního okraje */
  padding:0;                                  /* padding nechte 0, děláme to přes margin */
}
.hero-card__text h1{ margin:0; font-size:clamp(24px,2.6vw,36px); line-height: 1.2; }
.hero-card__text p { margin:0; opacity:.9; }

.hero-card__img{ position:relative; }
.hero-card__img img{ width:100%; height:100%; object-fit:cover; display:block; }

.hero-panels{
  display:flex;
  flex-direction:column;
  gap:12px;
  height:100%;                     /* dorůst do výšky řádku */
  align-self:stretch;              /* pojistka */
}

.hero-panel{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px;
  border-radius:10px;
  background:#fff; color:inherit; text-decoration:none;
  box-shadow:0 1px 2px rgba(0,0,0,.06),0 4px 12px rgba(0,0,0,.06);
  flex:1 1 0;                       /* rovnoměrné rozdělení výšky */
  min-height:56px;                  /* rozumné minimum */
}
.hero-panel:hover{ background:#f8fafc; }

/* === BREAKPOINT 980px === */
@media (max-width:980px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-card{ max-height:none; }          /* strop pryč */
  .hero-panels{ height:auto; flex-direction:row; flex-wrap:wrap; }
  .hero-panel{ flex:1 1 calc(50% - 6px); }
}

/* === BREAKPOINT 640px === */
@media (max-width:640px){
  .hero-card{ grid-template-columns:1fr; }
  .hero-card__img{ min-height:220px; }    /* když je pod sebou */

  /* na mobilech vrať text do normálního toku */
  .hero-card__text{
    place-self:auto;
    margin:0;
    padding:var(--hero-pad);
  }

  .hero-panel{ flex:1 1 100%; }
}

/* ==========================================================================
   CARDS
   ========================================================================== */
.card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem; background:var(--surface);
  transition:box-shadow var(--tr-slow), transform var(--tr-fast);
}
.card:hover{box-shadow:var(--shadow); transform:translateY(-1px)}

/* ==========================================================================
   BUTTONS (design-system)
   ========================================================================== */
.btn{
  --_bg:var(--surface);
  --_text:var(--text);
  --_border:var(--border);
  --_hover-bg:var(--surface);
  --_active-bg:var(--surface);

  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.625rem .875rem;
  border-radius:var(--btn-radius);
  border:1px solid var(--_border);
  background:var(--_bg);
  color:var(--_text);
  text-decoration:none; cursor:pointer; user-select:none;
  box-shadow:var(--btn-shadow);
  transition: box-shadow var(--tr-slow) ease, background var(--tr-fast) ease,
             color var(--tr-fast) ease, border-color var(--tr-fast) ease;
}
.btn:hover{ box-shadow:0 2px 10px rgba(0,0,0,.06); background:var(--_hover-bg) }
.btn:active{ background:var(--_active-bg) }
.btn:disabled,
.btn[aria-disabled="true"]{ opacity:.6; cursor:not-allowed; box-shadow:none }

/* sizes */
.btn.sm{ padding:.5rem .75rem; font-size:.875rem }     /* 14px */
.btn.lg{ padding:.75rem 1.125rem; font-size:1.125rem } /* 18px */

/* primary */
.btn.primary,
.btn-primary{
  --_bg:var(--btn-primary-bg);
  --_text:var(--btn-primary-text);
  --_border:var(--btn-primary-bg);
  --_hover-bg:var(--btn-primary-hover-bg);
  --_active-bg:var(--btn-primary-active-bg);
  color:var(--_text); background:var(--_bg); border-color:var(--_border);
}
.btn.primary:disabled,
.btn-primary:disabled{ background:var(--btn-primary-disabled-bg) }

/* secondary */
.btn.secondary{
  --_bg:var(--btn-secondary-bg);
  --_text:var(--btn-secondary-text);
  --_border:var(--btn-secondary-bg);
  --_hover-bg:var(--btn-secondary-hover-bg);
  --_active-bg:var(--btn-secondary-active-bg);
  color:var(--_text); background:var(--_bg); border-color:var(--_border);
}

/* outline */
.btn.outline{
  --_bg:var(--btn-outline-bg);
  --_text:var(--btn-outline-text);
  --_border:var(--btn-outline-border);
  --_hover-bg:var(--btn-outline-hover-bg);
  color:var(--_text); background:var(--_bg); border-color:var(--_border);
  box-shadow:none;
}

/* ghost */
.btn.ghost{
  --_bg:var(--btn-ghost-bg);
  --_text:var(--btn-ghost-text);
  --_border:transparent;
  --_hover-bg:var(--btn-ghost-hover-bg);
  color:var(--_text); background:var(--_bg); border-color:var(--_border);
  box-shadow:none;
}

/* icon-only circle */
.btn.icon{ width:2.5rem; height:2.5rem; padding:0; border-radius:999px; justify-content:center }

/* focus */
.btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* Badge */
.badge{
  display:inline-block; padding:.125rem .5rem; border-radius:999px;
  background:color-mix(in srgb, #4f46e5 14%, var(--surface)); color:#3730a3; font-size:.8rem
}

/* ==========================================================================
   FORMS
   ========================================================================== */
input[type="search"],
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="datetime-local"],
textarea,select{
  padding:.75rem .875rem; border:1px solid var(--border); border-radius:.75rem; width:100%;
  background:var(--surface); color:var(--text);
  transition:border-color var(--tr-fast) ease, box-shadow var(--tr-fast) ease;
}
input::placeholder, textarea::placeholder{color:#9ca3af}
input:focus, textarea:focus, select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
  outline:0;
}

/* ==========================================================================
   HEADER & NAV
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:70;
  background:var(--nav-bg); color:var(--nav-text);
  border-bottom:1px solid var(--border);
}
.header-row{display:flex; align-items:center; justify-content:space-between; gap:1rem}

/* Brand (text/logo) – vždy z nav tokenov */
.desktop-brand a{ text-decoration:none; color:var(--nav-text) !important }
.mbar-logo{ justify-self:center; color:var(--nav-text) !important; font-weight:700; text-decoration:none }
.desktop-brand img{height:2.5rem; vertical-align:middle}

/* Desktop menu */
.desk-nav{display:flex; gap:1rem; list-style:none; margin:0; padding:0}
.desk-nav a{display:inline-block; padding:.5rem .625rem; text-decoration:none; color:var(--nav-link)}
.desk-nav a:hover{color:var(--nav-link-hover); text-decoration:underline; text-underline-offset:3px}

/* Icon button */
.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.25rem; height:2.25rem; border:1px solid var(--border);
  background:var(--surface); border-radius:.625rem; cursor:pointer;
}

/* Unified SVG icon */
.icon, .icon svg{
  width:var(--icon-size);
  height:var(--icon-size);
  stroke:var(--icon-color);
  stroke-width:var(--icon-stroke);
  fill:none;
}

/* Hamburger */
.nav-toggle{
  display:none; position:relative; width:2.625rem; height:2.625rem;
  border:1px solid var(--border); border-radius:.625rem; background:var(--surface); cursor:pointer;
}
.nav-toggle .bar{
  position:absolute; left:.5625rem; right:.5625rem;
  height:var(--icon-stroke);
  background:var(--icon-color);
  transition:transform var(--tr-fast), opacity var(--tr-fast);
}
.nav-toggle .bar:nth-child(1){top:.75rem}
.nav-toggle .bar:nth-child(2){top:1.25rem}
.nav-toggle .bar:nth-child(3){top:1.75rem}
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){transform:translateY(.5rem) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-.5rem) rotate(-45deg)}

/* Desktop “Chci vyhledat” chip */
.desk-search-btn{
  --chip-bg: color-mix(in srgb, var(--accent) 6%, var(--surface));
  --chip-border: color-mix(in srgb, var(--accent) 22%, var(--border));
  --chip-text: var(--text);

  display:inline-flex; align-items:center; gap:.625rem;
  height:2.5rem; padding:0 1rem;
  border:1px solid var(--chip-border);
  border-radius:999px;
  background:var(--chip-bg);
  color:var(--chip-text);
  font-weight:600; font-size:.9rem; line-height:1;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  transition:background var(--tr-fast), box-shadow var(--tr-slow);
}
.desk-search-btn:hover{
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.desk-search-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.desk-search-text{ font-weight:600 }

/* Old overlay off */
.desk-search-overlay{display:none !important}


/* ==========================================================================
   FLASH BAR (globální oznámení pod navigací)
   ========================================================================== */
.flashbar{
  position: relative; /* je uvnitř headeru → drží se s ním */
  z-index: 60; /* pod sticky overlaya/panely pokud mají vyšší z-index */
  background: var(--flash-bg, var(--primary, #0f766e));
  color: var(--flash-fg, #ffffff);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.flashbar__inner{
  max-width: var(--container, 1120px);
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.flashbar__text{
  font-size: 15px;
  line-height: 1.4;
}
.flashbar__link{
  margin-left: .5em;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: var(--underline-offset, 2px);
}
.flashbar__link:hover{ text-decoration: none; opacity:.95; }
.flashbar__close{
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  opacity: .9;
}
.flashbar__close:hover{ opacity: 1; }


.flashbar.is-info    { background: var(--flash-bg, #1f99ce); color: var(--flash-fg, #fff); }
.flashbar.is-warning { background: var(--flash-warning-bg, #b45309); color: var(--flash-warning-fg, #fff); }
.flashbar.is-alert   { background: var(--flash-alert-bg,   #991b1b); color: var(--flash-alert-fg,   #fff); }


/* Volitelné | responsivní drobnost: na menších šířkách zmenši text */
@media (max-width: 480px){
  .flashbar__text{ font-size: 14px; }
}

/* Volitelné | tisk: flash pruh netisknout */
@media print{
  .flashbar{ display: none !important; }
}



/* ==========================================================================
   DROPDOWN BAR (menu + search)
   ========================================================================== */
.mobile-drop[hidden]{display:none !important}
.mobile-drop{
  background:var(--surface); border-bottom:1px solid var(--border);
  box-shadow:var(--shadow);
  overflow:hidden; will-change:max-height,opacity;
  max-height:0; opacity:0;
  transition:max-height .25s ease, opacity .18s ease;
}
.mobile-drop[data-open="true"]{ opacity:1; max-height:80vh }
.mobile-drop--search .mobile-search{
  display:flex; align-items:center; gap:.625rem;
  padding:.75rem 1rem; border-bottom:1px solid var(--border);
  background:var(--surface); position:sticky; top:0; z-index:1;
}

/* bigger input */
.mobile-drop--search .mobile-search input[type="search"]{
  font-size:1.125rem; line-height:1.45; padding:.875rem 1rem; border-radius:.75rem;
}
.mobile-drop--search .mobile-search input[type="search"]::placeholder{ font-size:inherit; opacity:.7 }

/* results */
.search-results{
  max-width:var(--container);
  margin-inline:auto;
  padding:.5rem 1rem 1rem;
}
.search-results:empty,
.search-results[hidden]{display:none}
.search-results .result{
  display:block; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--border);
  border-radius:.875rem; padding:.75rem .875rem; margin:.625rem 0;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
  transition:background var(--tr-fast), transform var(--tr-fast);
}
.search-results .result:hover{background:color-mix(in srgb, var(--text) 3%, var(--surface)); transform:translateY(-1px)}
.search-results .result-title{font-weight:700; display:block; margin:0 0 .25rem}
.search-results .result-snippet{font-size:.96rem; opacity:.9}
.search-results .result-meta{font-size:.85rem; opacity:.7; margin-top:.375rem; display:block}
.search-results mark{
  background: color-mix(in srgb, var(--accent) 60%, transparent);
  color: var(--accent-contrast);
  padding:0 .12em; border-radius:.2em;
}
.search-results .loading,
.search-results .empty,
.search-results .error{
  margin:.625rem 0; padding:.75rem; border-radius:.75rem;
  border:1px dashed var(--border); background:color-mix(in srgb, var(--text) 4%, var(--surface)); font-size:.95rem;
}
.search-results .loading{border-style:solid}

/* /hledat – info bloky pod panelom */
.search-help{ margin:.75rem 0 1rem; }
.search-page-results .result-title{
  display:inline-block; font-weight:700; margin-left:.5rem; text-decoration:none; color:var(--text);
}
.search-page-results .result-title:hover{ color:var(--accent); text-decoration:underline; }
.search-page-results .result-snippet{ margin-top:.375rem; color:var(--muted); font-size:.95rem; }

/* ==========================================================================
   MOBILE (<= 920px)
   ========================================================================== */
.mobile-only{display:none}
@media (max-width:920px){
  .desktop-only{display:none}
  .mobile-only{display:grid}

  .site-header .container.header-row{max-width:none; padding:0}
  .header-row{display:flex; align-items:center}
  .header-row > .mbar{flex:1; min-width:0}

  .mbar{
    display:grid; grid-template-columns:44px 1fr 44px; align-items:center;
    height:56px; padding:0 .5rem; background:var(--nav-bg); color:var(--nav-text); width:100%;
  }
  .mbar .icon-btn{border:0; background:transparent; color:var(--nav-text); border-radius:.5rem}
  .mbar-logo{justify-self:center; color:var(--nav-text); font-weight:700; text-decoration:none}
  .mbar-logo img{height:1.5rem; display:block; margin:0 auto}

  .nav-toggle{display:inline-flex; align-items:center; justify-content:center}
  .mbar .nav-toggle{background:transparent; border-color:color-mix(in srgb, var(--nav-text) 35%, transparent)}
  .mbar .nav-toggle .bar{background:var(--nav-text)}

  .mobile-drop[data-open="true"]{max-height:calc(100dvh - 56px)}
  .mobile-drop--search .mobile-search .btn{display:none}

  .mobile-panels{overflow:auto}
  .panel{display:none; background:var(--surface)}
  .panel.is-active{display:block}

  .panel-head{
    position:sticky; top:0; z-index:1;
    display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.5rem;
    min-height:52px;
    padding-block:10px; padding-inline:12px;
    background:color-mix(in srgb, var(--text) 6%, var(--surface)); border-bottom:1px solid var(--border);
  }

  .panel-head .back{
    display:inline-flex; align-items:center; gap:.375rem;
    height:42px; padding:0 .625rem;
    border:1px solid var(--back-border);
    border-radius:var(--back-radius);
    background:var(--back-bg);
    color:var(--back-text);
    font-size:var(--back-font-size);
    font-weight:600; cursor:pointer; user-select:none;
  }
  .panel-head .back .chev{ display:inline-block; font-size:var(--back-icon-size); line-height:1; translate:0 1px; }
  .panel-head .back .lbl{ line-height:1 }
  .panel-head .back:hover{ background:var(--back-hover-bg) }
  .panel-head .back:active{ filter:brightness(.98) }
  .panel-head .back:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

  .panel-head .back::before, .panel-head .back::after{ content:none !important; }
  .panel-head .title{font-weight:700}
  .panel-head .spacer{width:36px; height:36px}

  .mobile-menu__list{list-style:none; margin:0; padding:0}

  .row{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:.75rem;
    padding:1.125rem 1rem; font-size:1.18rem; line-height:1.3; color:var(--text);
    background:var(--surface); border:0; text-align:left; cursor:pointer;
    border-bottom:1px solid var(--border); -webkit-tap-highlight-color:transparent;
  }
  .row.link{cursor:auto; text-decoration:none}
  .row:active{background:color-mix(in srgb, var(--text) 4%, var(--surface))}
  .row:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

  .mobile-menu__list .row{ -webkit-appearance:none; appearance:none }

/* pôvodne: --_arrow-color: var(--icon-color);  → to spôsobovalo divné odtiene v invert */
.mobile-menu__list .row.next{
  position:relative; padding-right:44px;
  --_arrow-color: currentColor;           /* <— kľúčová zmena */
  --_arrow-stroke: var(--icon-stroke);
}
.mobile-menu__list .row.next::after{
  content:""; position:absolute; right:12px; top:50%;
  width:16px; height:var(--_arrow-stroke); transform:translateY(-50%);
  background:var(--_arrow-color); border-radius:2px; pointer-events:none;
}
.mobile-menu__list .row.next::before{
  content:""; position:absolute; right:12px; top:50%;
  width:7px; height:7px; transform:translateY(-50%) rotate(45deg);
  border-top:var(--_arrow-stroke) solid var(--_arrow-color);
  border-right:var(--_arrow-stroke) solid var(--_arrow-color);
  pointer-events:none;
}

/* High Contrast: šípky žlté (ak chceš držať žlté odkazy) */
html.a11y-contrast-high .mobile-menu__list .row.next{
  --_arrow-color: #ff0;
}

  /* NAV drop je vždy svetlý obsah (čitateľnosť nad brand barom) */
  .nav-dark .mobile-drop,
  .nav-dark .mobile-drop .panel,
  .nav-dark .mobile-drop .panel-head{
    background:var(--surface); color:var(--text);
  }
  .nav-dark .mobile-menu__list .row{ color:var(--text) }
  .nav-dark .mobile-menu__list .row.next{ --_arrow-color: var(--brand); }

  .desk-search-btn, .desk-search-overlay{display:none !important}
}

/* ==========================================================================
   DESKTOP (>= 921px) — search panel
   ========================================================================== */
@media (min-width:921px){
  .mobile-only{display:none}
  .desktop-only{display:flex; align-items:center; gap:1rem}
  .nav-toggle{display:none}

  .mobile-drop--search .mobile-search{
    display:flex; align-items:center; gap:.625rem;
    padding-block:.875rem;
  }

  .mobile-drop--search .mobile-search input[type="search"]{
    height:3rem; font-size:1.125rem; line-height:1.4; padding:.75rem .875rem;
  }

  .mobile-drop--search .mobile-search .btn{
    display:inline-flex; align-items:center; gap:.5rem;
    height:3rem; padding:0 1.125rem;
    border:1px solid var(--btn-search-bg);
    border-radius:.75rem;
    background:var(--btn-search-bg);
    color:var(--btn-search-text);
    font-size:1.125rem; font-weight:700; cursor:pointer;
    box-shadow:0 1px 2px rgba(0,0,0,.05);
    transition: filter var(--tr-fast) ease, box-shadow var(--tr-slow) ease;
    text-decoration:none; white-space:nowrap;
  }
  .mobile-drop--search .mobile-search .btn:hover{ filter:brightness(0.97); box-shadow:0 2px 10px rgba(0,0,0,.08) }
  .mobile-drop--search .mobile-search .btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
  .mobile-drop--search .mobile-search .btn:disabled{ opacity:.6; cursor:not-allowed; box-shadow:none; filter:none }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer{border-top:1px solid var(--border); margin-top:2rem; background:var(--surface)}

/* ==========================================================================
   MOTION REDUCE
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *{transition:none!important; animation:none!important; scroll-behavior:auto!important}
}

/* ==========================================================================
   NAV DARK THEME (via .nav-dark on body)
   ========================================================================== */
.nav-dark{
  --nav-bg:   var(--brand);
  --nav-text: var(--brand-contrast);
  --nav-link: var(--brand-contrast);
  --nav-link-hover: color-mix(in srgb, var(--brand-contrast) 80%, #fff);
  --nav-border: transparent;          /* ← miesto border-color */
}
.nav-dark .desktop-brand a{color:var(--brand-contrast) !important}
.nav-dark .desk-nav a{color:#fefefe}
.nav-dark .desk-nav a:hover{color:#b2dbdb}
.nav-dark .mbar{background:var(--brand)}
.nav-dark .mbar .icon-btn{color:var(--brand-contrast)}
.nav-dark .mbar .icon svg,
.nav-dark .desktop-only .icon svg,
.nav-dark .mbar .nav-toggle .bar{ stroke:var(--brand-contrast); background:var(--brand-contrast); }

.desk-search-btn .icon,
.mbar .icon-btn svg.icon{
  background:none !important;
  fill:none;
}

/* A11y helper – visually hidden only */
.sr-only{
  position:absolute!important;
  width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important;
  overflow:hidden!important; clip:rect(0,0,0,0)!important;
  white-space:nowrap!important; border:0!important;
}

/* iOS focus ring fix (mobile panel) */
.mobile-drop .row:focus,
.mobile-drop a:focus,
.mobile-drop [tabindex]:focus{ outline:none; }
.mobile-drop .row:focus-visible{
  outline:none; border-radius:.75rem;
  box-shadow: inset 0 0 0 2px var(--accent);
  background: color-mix(in srgb, var(--text) 6%, var(--surface));
}

/* ==========================================================================
   A11Y PANEL + FAB
   ========================================================================== */
.a11y-fab{
  position:fixed; right:1rem; bottom:1rem; z-index:120;
  display:inline-flex; align-items:center; justify-content:center;
  width:2.75rem; height:2.75rem; border-radius:999px;
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  box-shadow:var(--shadow); cursor:pointer; text-decoration:none;
}
.a11y-fab:hover{ box-shadow:0 6px 18px rgba(0,0,0,.12); }
.a11y-fab:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Ikona pre A11Y FAB cez masku – farbí sa currentColor */
.a11y-fab .ico-a11y{
  display:inline-block;
  width:1.25rem; height:1.25rem;
  background: currentColor;
  -webkit-mask: url('/assets/img/hendi.svg') no-repeat center / contain;
          mask: url('/assets/img/hendi.svg') no-repeat center / contain;
}

/* FAB ikona modrá (ako aktívne nastavení) */
.a11y-fab .ico-a11y{
  color: var(--accent);         /* ikona sa farbí cez currentColor */
}

/* V High Contrast nech je žltá (konzistentne s linkami) */
html.a11y-contrast-high .a11y-fab .ico-a11y{
  color: var(--link);           /* typicky #ff0 v HC */
}

.a11y-panel{
  position:fixed; right:1rem; top:4.5rem; z-index:130;
  width:min(26.25rem, calc(100vw - 1.5rem));
  border:1px solid var(--border); border-radius:.75rem;
  background:var(--surface); color:var(--text); box-shadow:var(--shadow);
  font-size:1rem; /* panel zoomuje s html size */
}
.a11y-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:.75em .875em; border-bottom:1px solid var(--border);
  background:color-mix(in srgb, var(--text) 6%, var(--surface));
}
.a11y-section{ padding:.625em .75em; }
.a11y-row{
  display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:.75em; padding:.625em 0; border-bottom:1px dashed var(--border);
}
.a11y-row:last-child{ border-bottom:0; }
.a11y-ctrl{ display:inline-flex; gap:.5rem; align-items:center; }
.a11y-out{ min-width:3.5ch; text-align:center; font-variant-numeric:tabular-nums; }

/* Active toggle in panel */
.a11y-ctrl .btn.is-active{
  background:var(--accent);
  color:var(--accent-contrast, #000);
  border-color:var(--accent);
}


/* Panel: aktívne tlačidlo – biely text (okrem High Contrast) */
html:not(.a11y-contrast-high) .a11y-ctrl .btn.is-active{
  color:#fff !important;
}

/* V High Contrast nechaj pôvodné (čierny text na žltej) kvôli kontrastu */
html.a11y-contrast-high .a11y-ctrl .btn.is-active{
  color:var(--accent-contrast) !important;
}

/* ==========================================================================
   GLOBAL A11Y LAYER (place near end)
   ========================================================================== */

/* rem-ify pár pevných veľkostí */
.btn.sm{ font-size:.875rem; }
.btn.lg{ font-size:1.125rem; }

/* HIGH CONTRAST = token remap only (žlté odkazy všade) */
html.a11y-contrast-high,
body.a11y-contrast-high{
  --bg:#000; --surface:#000; --text:#fff; --muted:#c7c7c7; --border:#666;
  --accent:#ff0; --accent-contrast:#000;
  --brand:#000; --brand-contrast:#fff;

  /* Odkazy: žlté všade */
  --link:#ff0; --link-hover:#ff0;

  /* Buttons via tokens */
  --btn-primary-bg:var(--accent);
  --btn-primary-text:var(--accent-contrast);
  --btn-primary-hover-bg:var(--accent);
  --btn-primary-active-bg:var(--accent);

  --btn-secondary-bg:var(--accent);
  --btn-secondary-text:var(--accent-contrast);
  --btn-secondary-hover-bg:var(--accent);
  --btn-secondary-active-bg:var(--accent);

  --btn-outline-bg:transparent;
  --btn-outline-text:var(--text);
  --btn-outline-border:var(--border);
  --btn-outline-hover-bg:#111;

  --btn-ghost-bg:transparent;
  --btn-ghost-text:var(--text);
  --btn-ghost-hover-bg:#111;

  --btn-search-bg:var(--accent);
  --btn-search-text:var(--accent-contrast);

  --icon-color:var(--text);
  --icon-stroke:2px;
}

/* Enforce žlté odkazy v HC */
html.a11y-contrast-high a{
  color: var(--link) !important;
}
html.a11y-contrast-high a:hover{
  color: var(--link-hover) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* INVERT/GRAY – globálny filter (JS dáva triedu na <html>) */
html.a11y-filter{ filter:var(--a11y-filter); }
html.a11y-filter img,
html.a11y-filter video,
html.a11y-filter iframe,
html.a11y-filter canvas,
html.a11y-filter picture{ filter:var(--a11y-media-filter); }

/* =====================================================
   MOTION OFF — final
   - vypne prechody/animácie + smooth scroll + snap
   - zneutralizuje hover efekty komponentovo (bez opacity hacku)
   - rešpektuje prefers-reduced-motion
   - drží High Contrast farby odkazov
===================================================== */

/* 1) Globálne vypnúť transition/animation (vrátane pseudo-elementov) */
html.a11y-motion-off *,
html.a11y-motion-off *::before,
html.a11y-motion-off *::after,
body.a11y-motion-off *,
body.a11y-motion-off *::before,
body.a11y-motion-off *::after{
  transition: none !important;
  animation: none !important;
}

/* 2) Scroll správanie + scroll-snap OFF */
html.a11y-motion-off,
body.a11y-motion-off{
  scroll-behavior: auto !important;
}
html.a11y-motion-off,
body.a11y-motion-off,
html.a11y-motion-off * ,
body.a11y-motion-off *{
  scroll-snap-type: none !important;
}

/* 3) Systémové preferencie (funguje aj bez panelu) */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
  html{ scroll-behavior: auto !important; }
}

/* 4) Komponentové neutralizácie hoveru (bez menenia opacity) */

/* Tlačidlá – vráť základný vizuál */
html.a11y-motion-off .btn,
html.a11y-motion-off a.btn{
  transition: none !important;
  animation: none !important;
  box-shadow: none !important;
  filter: none !important;
}
html.a11y-motion-off .btn:hover,
html.a11y-motion-off a.btn:hover,
html.a11y-motion-off .btn:active,
html.a11y-motion-off a.btn:active{
  background: var(--_bg) !important;
  color: var(--_text) !important;
  border-color: var(--_border) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  text-decoration: underline !important;            /* voliteľné zvýraznenie */
  text-underline-offset: var(--underline-offset, 2px) !important;
}

/* „Chci vyhledat“ chip */
html.a11y-motion-off .desk-search-btn,
html.a11y-motion-off .desk-search-btn *{
  transition: none !important;
  animation: none !important;
}
html.a11y-motion-off .desk-search-btn:hover,
html.a11y-motion-off .desk-search-btn:active{
  background: var(--chip-bg) !important;
  color: var(--text) !important;
  border-color: var(--chip-border) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  text-decoration: none !important;
}

/* Button v search paneli (desktop) */
html.a11y-motion-off .mobile-drop--search .mobile-search .btn:hover,
html.a11y-motion-off .mobile-drop--search .mobile-search .btn:active{
  background: var(--btn-search-bg) !important;
  color: var(--btn-search-text) !important;
  border-color: var(--btn-search-bg) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

/* Karty a rýchle výsledky – bez „lift“ efektu */
html.a11y-motion-off .card:hover,
html.a11y-motion-off .search-results .result:hover{
  transform: none !important;
  box-shadow: none !important;
  background: var(--surface) !important;
}

/* Mobilné menu riadky – neutrálne pozadie */
html.a11y-motion-off .mobile-menu__list .row:hover,
html.a11y-motion-off .mobile-menu__list .row:active{
  background: var(--surface) !important;
}

/* Odkazy – len underline (farbu nemeníme) */
html.a11y-motion-off a:hover{
  color: inherit !important;
  text-decoration: underline !important;
  text-underline-offset: var(--underline-offset, 2px) !important;
}
/* V High Contrast nechaj žlté linky aj na hover */
html.a11y-motion-off.a11y-contrast-high a:hover,
html.a11y-contrast-high body.a11y-motion-off a:hover{
  color: var(--link) !important;
}

/* Ikony/hamburger – bez prechodov pri hoveri */
html.a11y-motion-off .mbar .nav-toggle .bar,
html.a11y-motion-off .mbar .icon svg,
html.a11y-motion-off .desktop-only .icon svg{
  transition: none !important;
}

/* „Číst více“ – rôzne varianty (ak nie je .btn) */
html.a11y-motion-off a.read-more:hover,
html.a11y-motion-off a.readmore:hover,
html.a11y-motion-off a.more:hover,
html.a11y-motion-off a.link-more:hover,
html.a11y-motion-off .news a.more:hover,
html.a11y-motion-off .aktuality a.more:hover{
  color: inherit !important;
  background: inherit !important;
  border-color: currentColor !important;
  text-decoration: underline !important;
  text-underline-offset: var(--underline-offset, 2px) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Fallback pre <button> / <input type="submit"> ak nie sú .btn */
html.a11y-motion-off button:hover,
html.a11y-motion-off input[type="submit"]:hover{
  filter: none !important;
  background: inherit !important;
  color: inherit !important;
  border-color: currentColor !important;
  box-shadow: none !important;
}

/* --- EXCEPTIONS: neneutralizuj vybraté prepínače v A11Y paneli --- */
html.a11y-motion-off .a11y-ctrl .btn.is-active,
html.a11y-motion-off .a11y-ctrl .btn.is-active:hover,
html.a11y-motion-off .a11y-ctrl .btn.is-active:active{
  background: var(--accent) !important;
  color: var(--accent-contrast) !important;
  border-color: var(--accent) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

/* Neutralizuj hover/active VŠADE INDE, ale nie na .is-active */
html.a11y-motion-off .btn:not(.is-active):hover,
html.a11y-motion-off .btn:not(.is-active):active{
  background: var(--_bg) !important;
  color: var(--_text) !important;
  border-color: var(--_border) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  text-decoration: underline !important;
  text-underline-offset: var(--underline-offset, 2px) !important;
}

/* Na mobilech / coarse pointer zařízeních volbu kurzoru neukazuj */
@media (pointer: coarse), (hover: none){
  .a11y-row--cursor{ display:none !important; }
}

/* --- EXCEPTIONS: neneutralizuj vybraté prepínače v A11Y paneli --- */
html.a11y-motion-off .a11y-ctrl .btn.is-active,
html.a11y-motion-off .a11y-ctrl .btn.is-active:hover,
html.a11y-motion-off .a11y-ctrl .btn.is-active:active{
  background: var(--accent) !important;
  color: #fff !important;                 /* <— doplnené */
  border-color: var(--accent) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
}

/* High Contrast verzia (kvôli kontrastu) */
html.a11y-contrast-high.a11y-motion-off .a11y-ctrl .btn.is-active,
html.a11y-contrast-high.a11y-motion-off .a11y-ctrl .btn.is-active:hover,
html.a11y-contrast-high.a11y-motion-off .a11y-ctrl .btn.is-active:active{
  color: var(--accent-contrast) !important;
}



/* Zvýrazni odkazy */
.a11y-links-on a{
  text-decoration:underline !important;
  text-decoration-thickness:3px;
  text-underline-offset:3px;
}

/* Overlay kurzor */
#a11y-cursor{
  position:fixed; left:0; top:0; z-index:9999;
  width:36px; height:36px; border-radius:999px;
  border:3px solid #fff; box-shadow:0 0 0 2px #000 inset;
  pointer-events:none; opacity:0;
  transform:translate(-9999px,-9999px);
  transition:opacity .12s ease; mix-blend-mode:difference;
}
.a11y-cursor-on{ cursor:none; }
.a11y-cursor-on #a11y-cursor{ opacity:1; }
.a11y-motion-off #a11y-cursor{ transition:none !important; }

/* ==========================================================================
   NAV v A11Y režimoch (token-driven)
   ========================================================================== */

/* High Contrast – nav vždy čitateľný tmavý bar, žlté linky */
html.a11y-contrast-high{
  --nav-bg:#000;
  --nav-text:#fff;
  --nav-link:#ff0;
  --nav-link-hover:#ff0;
}
/* Invert – nav sa nefiltruje a dostane opačný tón k pôvodnému
   (app.js tiež vkladá shim s `filter:none` pre .site-header/.mbar) */
html.a11y-filter .site-header,
html.a11y-filter .mbar{ filter:none; }
html.a11y-filter[data-nav-tone="light"]{ /* pôvodne svetlá NAV → tmavý bar */
  --nav-bg:#000; --nav-text:#fff; --nav-link:#fff; --nav-link-hover:#ff0;
}
html.a11y-filter[data-nav-tone="dark"]{  /* pôvodne tmavá NAV → svetlý bar */
  --nav-bg:#fff; --nav-text:#000; --nav-link:#000; --nav-link-hover:#111;
}

/* Ak téma používa pseudo-element na bar, zachovaj farbu */
html.a11y-filter .site-header::before,
html.a11y-contrast-high .site-header::before{ background:inherit !important; }

/* v invert režime nech ikony v mbar kopírujú nav text */
html.a11y-filter .mbar .icon svg{ stroke: var(--nav-text) !important; fill: none !important; }
html.a11y-filter .mbar .nav-toggle .bar{ background: var(--nav-text) !important; }


/* ==========================================================================
   CMS/ADMIN OBSAH — drž sa tokenov
   ========================================================================== */
.cms, .content, .editor { color:var(--text); }
.cms h1, .cms h2, .cms h3, .cms h4, .cms h5, .cms h6,
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6,
.editor h1, .editor h2, .editor h3, .editor h4, .editor h5, .editor h6{
  color:inherit !important;
}
.cms a, .content a, .editor a{ color:var(--link) !important; }
.cms a:hover, .content a:hover, .editor a:hover{
  color:var(--link-hover) !important;
  text-decoration:underline; text-underline-offset:var(--underline-offset, 2px);
}
/* V HC prepíš inline farby headingov na token */
html.a11y-contrast-high .cms h1[style*="color"],
html.a11y-contrast-high .cms h2[style*="color"],
html.a11y-contrast-high .cms h3[style*="color"],
html.a11y-contrast-high .cms h4[style*="color"],
html.a11y-contrast-high .cms h5[style*="color"],
html.a11y-contrast-high .cms h6[style*="color"],
html.a11y-contrast-high .content h1[style*="color"],
html.a11y-contrast-high .content h2[style*="color"],
html.a11y-contrast-high .content h3[style*="color"],
html.a11y-contrast-high .content h4[style*="color"],
html.a11y-contrast-high .content h5[style*="color"],
html.a11y-contrast-high .content h6[style*="color"],
html.a11y-contrast-high .editor h1[style*="color"],
html.a11y-contrast-high .editor h2[style*="color"],
html.a11y-contrast-high .editor h3[style*="color"],
html.a11y-contrast-high .editor h4[style*="color"],
html.a11y-contrast-high .editor h5[style*="color"],
html.a11y-contrast-high .editor h6[style*="color"]{
  color:var(--text) !important;
}

/* Failsafe pre drop panely */
.mobile-drop[hidden]{display:none!important;}
.mobile-drop{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow);
  overflow:hidden;
  max-height:0; opacity:0;
  transition:max-height .25s ease, opacity .18s ease;
}
.mobile-drop[data-open="true"]{ max-height:80vh; opacity:1; }

/* Prepínače zobrazenia podľa šírky */
.mobile-only{display:none}
.desktop-only{display:flex}
@media (max-width:920px){
  .desktop-only{display:none}
  .mobile-only{display:grid}
}


/* =========================================================
   FIX: iba Mobile + INVERT (nie High Contrast)
   - nav ikonky (lupa, hamburger) dostanú správnu farbu
   - šípky v mobilnom menu nebudú brať brand
   ========================================================= */
@media (max-width: 920px){

  /* NAV ikonky – zruš globálny invert a použi farbu textu NAV */
  html.a11y-filter:not(.a11y-contrast-high) .mbar .icon,
  html.a11y-filter:not(.a11y-contrast-high) .mbar .icon svg{
    filter: var(--a11y-media-filter) !important;   /* “doinvert” = zruší invert z <html> */
    color:  var(--nav-text) !important;            /* pre currentColor */
    stroke: var(--nav-text) !important;            /* pre istotu aj explicitný stroke */
    fill: none !important;
  }
  html.a11y-filter:not(.a11y-contrast-high) .mbar .nav-toggle .bar{
    filter: var(--a11y-media-filter) !important;
    background: var(--nav-text) !important;
  }

  /* Šípky v mobilnom menu – v INVERT nikdy neber brand */
  html.a11y-filter:not(.a11y-contrast-high) .mobile-menu__list .row.next{
    --_arrow-color: currentColor !important;
  }
}