:root{
  /* Outdoor palette */
  --bg:#f3f6f3;            /* light sage */
  --card:#ffffff;
  --text:#0f1720;          /* deep blue-black */
  --muted:#5a6b73;         /* slate */
  --line:#dfe6e1;          /* soft line */

  --accent:#2e7d5b;        /* forest green */
  --accent-dark:#1f5f45;   /* deep forest */
  --accent-2:#7a5c3a;      /* bunker bronze */
  --accent-3:#2b5d8a;      /* radio blue */

  --radius:16px;
  --shadow:0 12px 28px rgba(15,23,32,.12);
  --w: 1280px;
}
*{ box-sizing:border-box; }
html, body{ min-height:100%; }
body{
  margin:0;
  font:16px/1.55 system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background: var(--bg);
}
.wrap{ max-width:var(--w); margin:0 auto; padding:18px; }

/* HEADER */
.top{
  position:sticky; top:0; z-index:10;
  background:rgba(247,248,246,.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.brand__name{
  font-weight:900; letter-spacing:.5px;
  text-decoration:none; color:var(--text);
}
.brand__tag{ font-size:13px; color:var(--muted); }

.nav{ display:flex; gap:12px; flex-wrap:wrap; }
.nav a{
  text-decoration:none; color:var(--text);
  padding:8px 10px; border-radius:12px;
}
.nav a:hover{ background:rgba(47,125,74,.10); }

/* LANG */
.lang{ display:flex; gap:6px; }
.lang a{
  font-size:13px; padding:6px 8px;
  border-radius:999px; border:1px solid var(--line);
  text-decoration:none; color:var(--muted); background:#fff;
}
.lang a.is-active{
  color:var(--accent);
  border-color:rgba(47,125,74,.45);
}

/* HERO */
.hero{ padding:22px 0; }
.hero__card{
  position:relative;
  padding:26px;
  border-radius:var(--radius);
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow:var(--shadow);
  border:1px solid var(--line);
}
.hero__card h1{ margin:0 0 6px; }
.hero__card > p{ margin:0 0 16px; max-width:60ch; color:var(--muted); }
/* Allow custom HTML blocks (home_hero_html_*) to use full width */
.hero__card .hero-html p{ max-width:none; }


/* BUTTONS */
.btn{
  display:inline-block; padding:10px 14px; border-radius:14px;
  background:var(--accent); color:#fff; text-decoration:none;
  border:1px solid rgba(0,0,0,.05);
}
.btn:hover{ background:var(--accent-dark); }
.btn--ghost{
  background:transparent; color:var(--accent);
  border:1px solid rgba(47,125,74,.45);
}
.btn--ghost:hover{ background:rgba(47,125,74,.10); }

/* GRID / CARDS */
.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:14px;
  padding:10px 0 26px;
}
.card{
  grid-column:span 4;
  padding:16px;
  border-radius:var(--radius);
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  box-shadow:0 6px 18px rgba(16,20,24,.08);
}
.card h2{ margin:0 0 8px; font-size:18px; }
.card p, .card li{ color:var(--text); }
.list{ padding-left:18px; margin:8px 0 0; }

/* PROGRAM LAYOUT */
.page h1{ margin:18px 0 10px; }
.program-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px;
}
.program-card a{ color:var(--accent); text-decoration:none; }
.program-card a:hover{ text-decoration:underline; }

/* FOOTER */
.footer{
  border-top:1px solid var(--line);
  color:var(--muted);
  padding-top:18px;
}

/* FORMS */
form{ display:grid; gap:12px; }
input, textarea{
  width:100%; padding:10px 12px;
  border-radius:12px; border:1px solid var(--line);
  font:inherit;
}
textarea{ resize:vertical; }

/* RESPONSIVE */
@media (max-width:900px){
  .card{ grid-column:span 12; }
  body{ background-attachment: scroll; background-position: center 35%; }
}

/* DARK MODE */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1418;
    --card:#121a20;
    --text:#e9eef2;
    --muted:#a6b3bc;
    --line:#22303a;
  }
  body{
    background:
      linear-gradient(180deg, rgba(14,20,25,.82), rgba(14,20,25,.82)),
      url("/assets/img/site/full/hero.webp") center / cover no-repeat fixed;
  }
  .top{ background:rgba(15,20,24,.85); border-bottom-color:var(--line); }
  .nav a{ color:var(--text); }
  .nav a:hover{ background:rgba(47,125,74,.18); }
  .lang a{ background:#0f1418; color:var(--muted); border-color:var(--line); }
  .card{ background:rgba(18,26,32,.92); border-color:var(--line); }
  input, textarea{ background:#0f1418; color:var(--text); border-color:var(--line); }
  .footer{ border-top-color:var(--line); }
  @media (max-width:900px){
    body{ background-attachment: scroll; background-position: center 35%; }
  }
}


/* ===== HOME PROGRAM TILES ===== */
.program-tile h2 a{
  color:var(--accent);
  text-decoration:none;
  font-size:20px;
  letter-spacing:.5px;
}
.program-tile h2 a:hover{
  text-decoration:underline;
}
.program-tile:hover{
  box-shadow:0 10px 26px rgba(16,20,24,.14);
  transform:translateY(-2px);
}


/* ===== BRAND (TOP LEFT) – bigger ===== */
.brand__name{
  font-size:22px;
  line-height:1.05;
}
.brand__tag{
  font-size:14px;
  font-weight:650;
  letter-spacing:.2px;
  margin-top:2px;
}
@media (max-width:900px){
  .brand__name{ font-size:20px; }
  .brand__tag{ font-size:13px; }
}


/* ===== HEADER HEIGHT & BRAND VISIBILITY ===== */
.top{
  padding:8px 0;              /* more vertical space */
}
.topbar{
  align-items:flex-start;     /* brand sits visually higher */
}

.brand{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.brand__name{
  font-size:24px;             /* a bit larger */
}

.brand__tag{
  font-size:15px;
  opacity:.95;
}

/* Nav vertically centered relative to brand block */
.nav{
  margin-top:6px;
}

@media (max-width:900px){
  .top{ padding:6px 0; }
  .brand__name{ font-size:22px; }
  .brand__tag{ font-size:14px; }
  .nav{ margin-top:4px; }
}


/* ===== HEADER ALIGNMENT (brand + nav left, language pinned right) ===== */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:nowrap;
}
.top-left{
  display:flex;
  align-items:center;
  gap:18px;
  min-width:0;
}
.brand{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:0;
}
.lang{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}

/* Slightly smaller nav on narrow screens and allow wrapping */
@media (max-width:900px){
  .topbar{ flex-wrap:wrap; }
  .top-left{ width:100%; }
  .lang{ margin-left:0; }
}


/* ===== ACTIVE NAV ITEM ===== */
.nav a.is-active{
  background:rgba(47,125,74,.14);
  border:1px solid rgba(47,125,74,.35);
  font-weight:750;
}

/* ===== ADMIN UI (simple) ===== */
.admin-wrap{ max-width:900px; margin:0 auto; }
.admin-row{ display:flex; gap:10px; flex-wrap:wrap; }
.admin-row > *{ flex:1; min-width:220px; }
.table{ width:100%; border-collapse:collapse; }
.table th,.table td{ border-bottom:1px solid var(--line); padding:10px 8px; vertical-align:top; text-align:left; }
.small{ font-size:13px; color:var(--muted); }
.badge{ display:inline-block; padding:4px 8px; border-radius:999px; border:1px solid rgba(47,125,74,.35); background:rgba(47,125,74,.08); color:var(--accent); font-weight:700; font-size:12px; }
.actions{ display:flex; gap:8px; flex-wrap:wrap; }
.btn--danger{ background:#b42318; }
.btn--danger:hover{ background:#8f1c13; }
.btn--mini{ padding:8px 10px; border-radius:12px; font-size:14px; }
input[type="file"]{ padding:8px; background:rgba(255,255,255,.65); }
@media (prefers-color-scheme: dark){
  .nav a.is-active{ background:rgba(47,125,74,.22); border-color:rgba(47,125,74,.45); }
  input[type="file"]{ background:rgba(18,26,32,.65); }
}


/* ===== COLOR ACCENTS ===== */
.brand__name{ color:var(--accent-3); }
.nav a:hover{ background:rgba(46,125,91,.12); }
.nav a.is-active{
  background:rgba(46,125,91,.18);
  border:1px solid rgba(46,125,91,.45);
}
.program-tile h2 a{ color:var(--accent-3); }
.btn{ background:var(--accent); }
.btn:hover{ background:var(--accent-dark); }

/* Dark mode tuned to palette */
@media (prefers-color-scheme: dark){
  .brand__name{ color:#7fb3ff; }
  .program-badge{
    border-color:rgba(167,137,95,.45);
    color:#d2b48c;
    background:rgba(167,137,95,.14);
  }
}


/* ===== ADMIN LINK (visible only when logged in) ===== */
.adminlink{ display:flex; align-items:center; }
.adminlink__a{
  font-size:13px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(46,125,91,.45);
  text-decoration:none;
  color:var(--accent);
  background:rgba(46,125,91,.10);
  font-weight:750;
}
.adminlink__a:hover{
  background:rgba(46,125,91,.18);
}


/* ===== ADMIN MENU ITEM ===== */
.nav a.admin-nav{
  color:var(--accent-3);
  font-weight:800;
  border:1px dashed rgba(46,125,91,.45);
}
.nav a.admin-nav:hover{
  background:rgba(46,125,91,.18);
}

/* ===== SUCCESS NOTICE ===== */
.notice-success{
  margin:12px 0;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid rgba(46,125,91,.45);
  background:rgba(46,125,91,.12);
  color:var(--accent);
  font-weight:700;
}

/* ===== LIGHTBOX ===== */



/* ===== LIGHTBOX NAV + META ===== */














@media (max-width:700px){
  
  
  
  
  
}

/* ===== GALLERY THUMBNAILS ===== */
.grid.gallery{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:16px;
}
.grid.gallery > .card{
  grid-column:span 4;
}
@media (max-width:900px){
  .grid.gallery > .card{ grid-column:span 6; }
}
@media (max-width:600px){
  .grid.gallery > .card{ grid-column:span 12; }
}
.gallery-thumb{
  width:100%;
  height:180px;
  object-fit:contain;
  display:block;
  background:#fff;
  border-radius:12px;
  border:1px solid var(--line);
  margin-bottom:10px;
  cursor: default !important;
}




/* ===== ADMIN MENU (logged in) ===== */
.nav a.admin-logout{
  border-style:solid;
  opacity:.9;
}

/* ===== FIX: GALLERY/QSL GRID (markup uses <section class="grid">) ===== */
body.page-gallery section.grid,
body.page-qsl section.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:16px;
}

/* cards default span (the first header card has inline grid-column:span 12;) */
body.page-gallery section.grid > .card,
body.page-qsl section.grid > .card{
  grid-column:span 4;
}

@media (max-width:900px){
  body.page-gallery section.grid > .card,
  body.page-qsl section.grid > .card{ grid-column:span 6; }
}
@media (max-width:600px){
  body.page-gallery section.grid > .card,
  body.page-qsl section.grid > .card{ grid-column:span 12; }
}

/* thumbnails: keep small + clickable */
body.page-gallery img.gallery-thumb,
body.page-qsl img.gallery-thumb,
body.page-gallery img.gallery-img,
body.page-qsl img.gallery-img{
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
  background:#fff;
  border-radius:12px;
  border:1px solid var(--line);
  margin-bottom:10px;
  cursor: zoom-in !important;
}


/* CURSOR OVERRIDE: magnifier */
/* Force magnifier/zoom cursor on gallery & QSL thumbnails.
   Uses very broad selectors + !important to win specificity battles. */
section.grid a,
section.grid a *,
section.grid img {
  cursor: zoom-in !important;
}

/* ==========================================================
   OK7JN BACKGROUND + HEADER (single source of truth)
   Target look: like screenshot (dark photo behind, clean cards)
   Updated: 2026-02-05
   ========================================================== */

/* Background image lives on html (prevents double-rendering with scroll panels) */
html{
  min-height:100%;
  background:
    url("/assets/img/site/full/hero.webp") center top / cover no-repeat fixed;
}

/* If you use /subdom path instead, switch the URL above accordingly. */
@supports (background-image: image-set(url("/assets/img/site/full/hero.webp") type("image/webp"))){
  html{
    background:
      image-set(
        url("/assets/img/site/full/hero.webp") type("image/webp"),
        url("/assets/img/site/full/hero.webp") type("image/png")
      ) center top / cover no-repeat fixed;
  }
}

/* Body stays transparent so the html background shows through */
body{ background: transparent; }

/* Soft dark overlay over the whole page (keeps photo readable) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background: linear-gradient(
    to bottom,
    rgba(10,15,20,0.55),
    rgba(10,15,20,0.35) 40%,
    rgba(10,15,20,0.20) 70%,
    rgba(10,15,20,0.12)
  );
}

/* Content above overlay */
header.top, .ok7jn-scroll, main.wrap, footer, .wrap{ position:relative; z-index:2; }

/* Header readability (dark glass like screenshot) */
header.top{
  background: rgba(0,0,0,0.32);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
header.top .nav a,
header.top .lang a{
  color: rgba(255,255,255,0.92) !important;
  font-weight: 750;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55);
  background: rgba(0,0,0,0.18) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}
header.top .nav a:hover,
header.top .lang a:hover{
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.22) !important;
}
header.top .nav a.is-active{
  background: rgba(255,255,255,0.14) !important;
  border-color: rgba(255,255,255,0.30) !important;
}

/* Mobile: avoid fixed background jank */
@media (max-width:900px){
  html{ background-attachment: scroll; }
  body::before{ position:fixed; }
}

/* ==========================================================
   FIX: HEADER ALWAYS VISIBLE + SCROLL ONLY BELOW MENU
   (hybrid safe) — 2026-02-05
   Requires: body has class "scrollpanel"
   ========================================================== */

/* Default: panel scroll on most pages */
body.scrollpanel:not(.page-gallery):not(.page-qsl){
  overflow: hidden !important;
}

/* Header stays on top */
body.scrollpanel:not(.page-gallery):not(.page-qsl) header.top{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
}

/* Scroll container under header */
body.scrollpanel:not(.page-gallery):not(.page-qsl) .ok7jn-scroll{
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  top: var(--ok7jn-header-h, 110px) !important;
  bottom: 0 !important;
  height: auto !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  z-index: 2 !important;
}

/* In panel-scroll mode, do NOT add extra header offset */
body.scrollpanel:not(.page-gallery):not(.page-qsl) main.wrap{
  padding-top: 22px !important;
}

/* Exceptions: classic document scrolling for gallery/QSL */
body.scrollpanel.page-gallery,
body.scrollpanel.page-qsl{
  overflow-y: auto !important;
}

body.scrollpanel.page-gallery .ok7jn-scroll,
body.scrollpanel.page-qsl .ok7jn-scroll{
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  height: auto !important;
  overflow: visible !important;
}

/* Back to top button (scroll container aware) */
.back-to-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(30,40,55,.75);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 2000;

  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  backdrop-filter: blur(6px);
}
.back-to-top.is-visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover{ background: rgba(30,40,55,.9); }
.back-to-top:focus{
  outline: 2px solid rgba(120,180,255,.8);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  .back-to-top{ transition: none; }
}

/* ==========================================================
   MODAL: always on top (news / widgets / dialogs)
   ========================================================== */
dialog[open],
.modal, .modal-overlay, .modal-backdrop,
#newsModal, #overlay, #modal{
  position: fixed !important;
  z-index: 30000 !important;
}
dialog::backdrop,
.modal-overlay, .modal-backdrop{
  position: fixed !important;
  inset: 0 !important;
  z-index: 29999 !important;
}

/* ===== OK7JN PATCH: PAGE BACKGROUND (global) =====
   hero.webp is the SITE background (same everywhere), NOT the .hero section.
   This block is appended last to override any earlier background declarations.
*/
html{
  min-height:100%;
  background: url("/assets/img/site/full/hero.webp") center top / cover no-repeat fixed;
}
@supports (background: image-set(url("/assets/img/site/full/hero.webp") type("image/webp"))) {
  html{
    background: image-set(
      url("/assets/img/site/full/hero.webp") type("image/webp"),
      url("/assets/img/site/full/hero.webp") type("image/png")
    ) center top / cover no-repeat fixed;
  }
}
body{
  min-height:100%;
  background: transparent !important;
}





/* ===== Tools dropdown (click-hold) ===== */
.nav .nav-item.has-dropdown{ position: relative; display: inline-flex; align-items: center; }
.nav .nav-item.has-dropdown > .tools-toggle{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.nav .nav-item.has-dropdown .caret{ font-size: .9em; opacity: .85; }

.nav .nav-item.has-dropdown .dropdown-menu{
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 8px;
  min-width: 260px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(10,12,16,.92);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 42px rgba(0,0,0,.45);
  z-index: 999999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
}

.nav .nav-item.has-dropdown.is-open .dropdown-menu,
.nav .nav-item.has-dropdown:hover .dropdown-menu,
.nav .nav-item.has-dropdown:focus-within .dropdown-menu{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav .nav-item.has-dropdown .dropdown-menu a{
  display:block;
  padding: 10px 12px;
  border-radius: 10px;
  color: rgba(255,255,255,.92);
  text-decoration: none;
  white-space: nowrap;
}
.nav .nav-item.has-dropdown .dropdown-menu a:hover{
  background: rgba(255,255,255,.08);
}
.nav .nav-item.has-dropdown .dropdown-sep{
  height: 1px;
  margin: 6px 6px;
  background: rgba(255,255,255,.14);
}

/* Lock icon next to language switch */
.lang .admin-lock{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.92);
  text-decoration:none;
  margin-right: 8px;
}
.lang .admin-lock:hover{ background: rgba(0,0,0,.38); }


/* ===== OK7JN: DISABLE GLOBAL DARK OVERLAY =====
   Requested: turn off page darkening completely.
   This disables the fixed gradient overlay applied via body::before.
*/
body::before{
  display: none !important;
  background: none !important;
}


/* ===== OK7JN: DISABLE GLASS / MILK EFFECT COMPLETELY =====
   Removes backdrop-filter blur and replaces translucent "glass" backgrounds
   with solid (or near-solid) fills for consistent rendering across browsers.
*/
header.top,
.top{
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: rgba(0,0,0,0.60) !important; /* solid dark header */
}

.hero__card{
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: rgba(255,255,255,0.98) !important; /* solid card */
}

.card{
  background: rgba(255,255,255,0.98) !important;
}

/* If you have other glass panels, this neutralizes them too */
.glass,
[class*="glass"],
[class*="blur"]{
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
/* ===== FIX: normal cursor on links (no magnifier) ===== */
section.grid a,
section.grid a *{
  cursor: pointer !important;
}

/* zachovej lupu jen pro obrázky */
section.grid img{
  cursor: zoom-in !important;
}


/* ==========================================================
   FIX: Tools dropdown should overlay content on Gallery/QSL too
   Reason: header/top and ok7jn-scroll were sharing same z-index,
   creating stacking-context tie where page content could paint above.
   ========================================================== */
header.top{
  position: relative;
  z-index: 10000 !important;
}
body.page-gallery .ok7jn-scroll,
body.page-qsl .ok7jn-scroll,
.ok7jn-scroll{
  position: relative;
  z-index: 1 !important;
}
/* keep dropdown panel above header content */
.nav .nav-item.has-dropdown .dropdown-menu{
  z-index: 10001 !important;
}
/* =========================================
   PROGRAM PAGES MOBILE FIX
   BOTA / TOTA / ARDOS only
   ========================================= */

.program-card iframe{
  width:100%;
  max-width:100%;
  border:0;
  display:block;
}

/* OKBOTA widget only */
#okbotaFrameBota{
  width:100%;
  max-width:960px;
  margin:0 auto;
  display:block;
}

.okbota-fit{
  width:100%;
  max-width:960px;
  margin:0 auto;
}

.program-card img{
  max-width:100%;
  height:auto;
}

.program-stats{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.program-stats table{
  width:100%;
  min-width:560px;
  border-collapse:collapse;
}

@media (max-width:820px){

  .program-card{
    padding:14px !important;
  }

  .program-card iframe{
    height:auto !important;
  }

  .okbota-fit{
    --okbota-w:650;
    --okbota-h:310;
    --okbota-scale:min(1, calc((100vw - 90px) / (var(--okbota-w) * 1px)));

    width:100%;
    height:calc(var(--okbota-h) * var(--okbota-scale) * 1px);
    overflow:hidden;
    margin:0 auto;
  }

  #okbotaFrameBota{
    width:calc(var(--okbota-w) * 1px) !important;
    height:calc(var(--okbota-h) * 1px) !important;
    transform:scale(var(--okbota-scale));
    transform-origin:top left;
    margin:0;
    display:block;
  }

  .program-stats{
    overflow-x:auto;
  }

  .program-stats table{
    min-width:560px;
  }
}

@media (max-width:820px){

  header.top .nav .nav-item.has-dropdown{
    position:relative !important;
    width:100% !important;
  }

  header.top .nav .nav-item.has-dropdown > .tools-toggle{
    width:100% !important;
    justify-content:center !important;
  }

  header.top .nav .nav-item.has-dropdown .dropdown-menu{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:100% !important;
    margin-top:8px !important;
    min-width:100% !important;
    width:100% !important;
    max-width:100% !important;
    transform:none !important;
    padding:8px !important;
    box-sizing:border-box !important;
    z-index:10001 !important;
  }

  header.top .nav .nav-item.has-dropdown.is-open .dropdown-menu,
  header.top .nav .nav-item.has-dropdown:hover .dropdown-menu,
  header.top .nav .nav-item.has-dropdown:focus-within .dropdown-menu{
    transform:none !important;
  }

  header.top .nav .nav-item.has-dropdown .dropdown-menu a{
    display:block !important;
    width:100% !important;
    white-space:nowrap !important;
    word-break:normal !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }
}

/* =========================================
   HEADER FINAL FIX
   ========================================= */

header.top .topbar{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
  flex-wrap:nowrap !important;
}

header.top .top-left{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:18px !important;
  flex:1 1 auto !important;
  min-width:0 !important;
}

header.top .brand{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:4px !important;
}

header.top .nav{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  margin-top:0 !important;
}

header.top .lang{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  margin-left:auto !important;
  white-space:nowrap !important;
}

@media (max-width:900px){
  header.top .topbar{
    flex-wrap:wrap !important;
  }

  header.top .top-left{
    width:100% !important;
    justify-content:center !important;
  }

  header.top .nav{
    width:100% !important;
    justify-content:center !important;
  }

  header.top .lang{
    width:100% !important;
    justify-content:center !important;
    margin-left:0 !important;
  }
}

/* =========================================
   NAV DROPDOWN FIX
   ========================================= */

header.top .nav .nav-item.has-dropdown{
  position:relative !important;
}

header.top .nav .nav-item.has-dropdown .dropdown-menu{
  position:absolute !important;
  left:50% !important;
  transform:translateX(-50%) !important;
  top:100% !important;
  margin-top:6px !important;
  z-index:10000 !important;
}

@media (max-width: 820px){

  header.top .nav .nav-item.has-dropdown{
    position:relative !important;
    width:100% !important;
  }

  header.top .nav .nav-item.has-dropdown > .tools-toggle{
    width:100% !important;
    justify-content:center !important;
  }

  header.top .nav .nav-item.has-dropdown .dropdown-menu{
    position:fixed !important;
    left:50% !important;
    right:auto !important;
    top:480px !important;
    width:min(320px, calc(100vw - 24px)) !important;
    max-width:calc(100vw - 24px) !important;
    min-width:unset !important;
    margin:0 !important;
    transform:translateX(-50%) !important;
    padding:8px !important;
    box-sizing:border-box !important;
    z-index:10001 !important;
  }

  header.top .nav .nav-item.has-dropdown.is-open .dropdown-menu,
  header.top .nav .nav-item.has-dropdown:hover .dropdown-menu,
  header.top .nav .nav-item.has-dropdown:focus-within .dropdown-menu{
    transform:translateX(-50%) !important;
  }

  header.top .nav .nav-item.has-dropdown .dropdown-menu a{
    white-space:normal !important;
    word-break:break-word !important;
  }
}