/* ==========================================================================
   BUKOMA • MEGA MENU — CLEAN CSS v3.2.5
   (desktop 768px+, bezpečně zacílené na hlavičkovou navigaci)
   ========================================================================== */

/* ── Nastavení a tokeny ─────────────────────────────────────────────────── */
:root{
  /* řádková navigace: kolik znaků se smí zlomit do 2 řádků */
  --bk-menu-ch: 14;                 /* 12–18ch; 14ch je rozumné výchozí */

  /* panel a karty */
  --bk-mega-left-w-desktop: 360px;
  --bk-mega-left-w-tablet:  280px;
  --bk-mega-panel-gap:      20px;
  --bk-mega-panel-pad:      20px 22px;
  --bk-mega-card-gap:       16px;
  --bk-mega-radius:         10px;
  --bk-mega-shadow:         0 12px 26px rgba(0,0,0,.14);
  --bk-mega-active-bg:      #009688;     /* aktivní L2 */
  --bk-mega-hover-bg:       #f3f5f7;     /* hover L2 */
}

/* ==========================================================================
   [ROW] Hlavní řádek menu – dvouřádkové názvy (992px+) + bezpečný layout
   ========================================================================== */
@media (min-width: 992px){
  /* wrappery bez pevných výšek/overflow */
  nav#navigation.visible,
  #navigation,
  .navigation-in{
    position: relative !important;
    overflow: visible !important;
    z-index: 2147483646 !important;
  }

  nav#navigation.visible .menu-level-1,
  #navigation .menu-level-1,
  .navigation-in .menu-level-1{
    position: relative !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: .75rem 1rem;
    margin: 0; padding: 0;
  }

  .navigation-in .menu-level-1 > li{
    flex: 0 1 auto !important;
    min-width: 0 !important;
    list-style: none;
  }

  .navigation-in .menu-level-1 > li > a{
    display: inline-flex !important;
    flex-wrap: wrap !important;
    align-items: center; justify-content: center; gap: .4rem;
    box-sizing: border-box;
    padding: 10px 12px;
    text-align: center;
    line-height: 1.2 !important;
    min-inline-size: 0 !important;
    max-inline-size: calc(var(--bk-menu-ch) * 1ch) !important; /* klíč pro 2 řádky */
    white-space: normal !important;
    text-wrap: balance;
  }

  .navigation-in .menu-level-1 > li > a b,
  .navigation-in .menu-level-1 > li > a span{
    display: block !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.2 !important;
  }
}

/* ==========================================================================
   [PANEL] Submenu plátno, otevření na hover, „most“, šipka (768px+)
   ========================================================================== */
@media (min-width: 768px){
  /* výchozí stav submenu: skryté */
  nav#navigation.visible .menu-level-1 > li[class*="menu-item-"] > ul.menu-level-2,
  #navigation .menu-level-1 > li[class*="menu-item-"] > ul.menu-level-2,
  .navigation-in .menu-level-1 > li[class*="menu-item-"] > ul.menu-level-2{
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(1180px, 95vw) !important;
    background: #fff;
    border-radius: var(--bk-mega-radius);
    box-shadow: var(--bk-mega-shadow);
    padding: 0 !important;
    margin: 0 !important;
    list-style: none;
    display: none !important;
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
    z-index: 6000;
  }

  /* zobrazit při hoveru LI i při přejezdu panelu */
  nav#navigation.visible .menu-level-1 > li:hover > ul.menu-level-2,
  #navigation .menu-level-1 > li:hover > ul.menu-level-2,
  .navigation-in .menu-level-1 > li:hover > ul.menu-level-2,
  nav#navigation.visible .menu-level-1 > li > ul.menu-level-2:hover,
  #navigation .menu-level-1 > li > ul.menu-level-2:hover,
  .navigation-in .menu-level-1 > li > ul.menu-level-2:hover{
    display: block !important;
    opacity: 1; visibility: visible;
  }

  /* „most“ – bezproblémový přejezd z lišty do panelu */
  nav#navigation.visible .menu-level-1 > li > ul.menu-level-2::before,
  #navigation .menu-level-1 > li > ul.menu-level-2::before,
  .navigation-in .menu-level-1 > li > ul.menu-level-2::before{
    content: "";
    position: absolute; left: 0; right: 0; top: -8px; height: 8px;
    background: transparent;
  }
}

/* ==========================================================================
   [L2/L3] Struktura panelu, levý sloupec a pravý grid
   ========================================================================== */
@media (min-width: 768px){
  /* základ panelu (grid 2 sloupce) */
  .bk-panel{
    display: grid !important;
    align-items: start !important;
    gap: var(--bk-mega-panel-gap) !important;
    padding: var(--bk-mega-panel-pad) !important;
    box-sizing: border-box;
    min-height: 380px !important;
  }

  /* levý sloupec (seznam L2) */
  .bk-left, .bk-left .bk-l2{
    display: block !important;
    height: auto !important; max-height: none !important; overflow: visible !important;
  }
  .bk-left .bk-l2{
    margin: 0; padding: 0; list-style: none;
    display: grid; row-gap: 10px;
  }
  .bk-left .bk-l2 > li{
    display: flex !important; align-items: center;
    min-height: 48px !important;
    padding: 10px 14px !important; border-radius: 8px;
    cursor: pointer; transition: background .15s, color .15s;
  }
  .bk-left .bk-l2 > li:hover{ background: var(--bk-mega-hover-bg); }
  .bk-left .bk-l2 > li.bk-active{ background: var(--bk-mega-active-bg); color: #fff; }
  .bk-left .bk-l2 > li.bk-active:hover > a{ color:#fff !important; text-decoration: underline; }
  .bk-left .bk-l2 > li > a,
  .bk-left .bk-l2 > li > div > a{
    color: inherit; text-decoration: none;
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: transparent !important; padding: 0 !important; border-radius: 0 !important;
    line-height: 1.25;
  }
  .bk-left li > ul, .bk-left li > div > ul{ display: none !important; } /* L3 se renderují vpravo */

  /* pravý sloupec (grid karet) */
  .bk-mega-right{ min-width: 0 !important; padding-left: 4px; }
  .bk-mega-right .bk-grid{ display: grid !important; gap: var(--bk-mega-card-gap) !important; min-width: 320px !important; }

  /* karta */
  .bk-card{
    display: block;
    border: 1px solid #e7eaef; border-radius: var(--bk-mega-radius);
    padding: 12px; text-decoration: none; color: #111 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    transition: box-shadow .15s, transform .15s, border-color .15s;
  }
  .bk-card:hover{ box-shadow: 0 6px 18px rgba(0,0,0,.12); border-color: #dfe3e9; transform: translateY(-1px); }

  /* thumbnail 4:3 (pevné vyplnění bez „height:auto“ rozbití) */
  .bk-thumb{ position: relative; width: 100%; border-radius: 8px; overflow: hidden; background: #f5f7f9; aspect-ratio: 4 / 3; }
  .bk-thumb img{
    position: absolute !important; inset: 0 !important;
    width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important;
  }

  /* titulek karty */
  .bk-title{
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; line-height: 1.25 !important; text-align: center !important;
    font-weight: 600; color: #111 !important; font-size: 14px !important; margin-top: 6px;
  }
}

/* tablet layout (768–991px) */
@media (min-width: 768px) and (max-width: 991px){
  .navigation-in .menu-level-1 > li[class*="menu-item-"] > ul.menu-level-2{ width: min(900px,90vw) !important; }
  .bk-panel{ grid-template-columns: var(--bk-mega-left-w-tablet) 1fr !important; min-height: 360px !important; padding: 16px 18px !important; }
  .bk-left .bk-l2 > li{ min-height: 44px !important; padding: 8px 12px !important; font-size: 14px; }
  .bk-mega-right .bk-grid{ grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 12px !important; }
  .bk-thumb{ margin-bottom: 6px; }
  .bk-title{ font-size: 13px !important; margin-top: 4px; }
}

/* desktop layout (992px+) */
@media (min-width: 992px){
  .navigation-in .menu-level-1 > li[class*="menu-item-"] > ul.menu-level-2{ width: min(1180px,95vw) !important; }
  .bk-panel{ grid-template-columns: var(--bk-mega-left-w-desktop) 1fr !important; min-height: 420px !important; }
  .bk-mega-right .bk-grid{ grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
}

/* ==========================================================================
   [GRID L2] Varianta „panel jen grid“ (bez levého sloupce)
   ========================================================================== */
@media (min-width: 768px){
  .bk-panel-grid{
    display: block !important;
    padding: var(--bk-mega-panel-pad) !important;
    box-sizing: border-box;
  }
  .bk-panel-grid .bk-grid{ display: grid !important; gap: var(--bk-mega-card-gap) !important; min-width: 320px !important; }
}
@media (min-width: 768px) and (max-width: 991px){
  .bk-panel-grid .bk-grid{ grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 12px !important; }
}
@media (min-width: 992px){
  .bk-panel-grid .bk-grid{ grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
}

/* ==========================================================================
   [BANNERY] 986/992 – bílé plátno, šipka, širší rámeček dole/po stranách
   ========================================================================== */
@media (min-width: 992px){
  /* kotvy: 986/992 nejsou positioned (UL se centrovuje k řádku) */
  nav#navigation.visible .menu-level-1 > li.menu-item-986,
  nav#navigation.visible .menu-level-1 > li.menu-item-992,
  #navigation .menu-level-1 > li.menu-item-986,
  #navigation .menu-level-1 > li.menu-item-992,
  .navigation-in .menu-level-1 > li.menu-item-986,
  .navigation-in .menu-level-1 > li.menu-item-992{ position: static !important; }

  /* bílé plátno + padding; šířka = řádek */
  nav#navigation.visible .menu-level-1 > li.menu-item-986 > ul.menu-level-2,
  nav#navigation.visible .menu-level-1 > li.menu-item-992 > ul.menu-level-2,
  #navigation .menu-level-1 > li.menu-item-986 > ul.menu-level-2,
  #navigation .menu-level-1 > li.menu-item-992 > ul.menu-level-2,
  .navigation-in .menu-level-1 > li.menu-item-986 > ul.menu-level-2,
  .navigation-in .menu-level-1 > li.menu-item-992 > ul.menu-level-2{
    top: calc(100% + 8px) !important;
    padding: 20px 22px !important;
  }

  /* šipka (X pozice dodá JS přes --bk-arrow-x) */
  :root{ --bk-menu-active-bg: #2b6e65; }
  nav#navigation.visible .menu-level-1 > li.menu-item-986 > ul.menu-level-2::after,
  nav#navigation.visible .menu-level-1 > li.menu-item-992 > ul.menu-level-2::after,
  #navigation .menu-level-1 > li.menu-item-986 > ul.menu-level-2::after,
  #navigation .menu-level-1 > li.menu-item-992 > ul.menu-level-2::after,
  .navigation-in .menu-level-1 > li.menu-item-986 > ul.menu-level-2::after,
  .navigation-in .menu-level-1 > li.menu-item-992 > ul.menu-level-2::after{
    content: ""; position: absolute; top: -8px; left: var(--bk-arrow-x,50%);
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 8px solid transparent; border-right: 8px solid transparent;
    border-bottom: 8px solid var(--bk-menu-active-bg);
    z-index: 2147483648;
  }

  /* karta banneru uvnitř (bez vlastního boxu – plátno dělá UL) */
  [class*="menu-item-"] > ul.menu-level-2 > li.bk-panel-banner > a.bk-banner-link{
    display: block !important; width: 100% !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important;
  }
  [class*="menu-item-"] .bk-panel-banner img{
    display: block !important; width: 100% !important; height: auto !important; border-radius: var(--bk-mega-radius) !important;
  }

  /* požadavek: širší bílý rámeček dole + po stranách (horní nechat jak je) */
  nav#navigation.visible .menu-level-1 > li.menu-item-986 > ul.menu-level-2,
  nav#navigation.visible .menu-level-1 > li.menu-item-992 > ul.menu-level-2,
  #navigation .menu-level-1 > li.menu-item-986 > ul.menu-level-2,
  #navigation .menu-level-1 > li.menu-item-992 > ul.menu-level-2,
  .navigation-in .menu-level-1 > li.menu-item-986 > ul.menu-level-2,
  .navigation-in .menu-level-1 > li.menu-item-992 > ul.menu-level-2{
    /* top | right | bottom | left */
    padding: 24px 100px 24px 48px !important;
  }
}

/* tablet/mobil – bannerové panely v navigaci skrýt */
@media (max-width: 991.98px){
  nav#navigation.visible .menu-level-1 li.menu-item-986 .bk-panel-banner,
  nav#navigation.visible .menu-level-1 li.menu-item-992 .bk-panel-banner,
  #navigation .menu-level-1 li.menu-item-986 .bk-panel-banner,
  #navigation .menu-level-1 li.menu-item-992 .bk-panel-banner,
  .navigation-in .menu-level-1 li.menu-item-986 .bk-panel-banner,
  .navigation-in .menu-level-1 li.menu-item-992 .bk-panel-banner{ display: none !important; }
}

/* ==========================================================================
   [FIX PACK] Obrázky v menu – jisté vyplnění + výjimky pro bannery
   ========================================================================== */
@media (min-width: 768px){
  /* univerzální kotva pro thumbnaily 4:3 */
  [class*="menu-item-"] .bk-thumb{ aspect-ratio: 4 / 3; position: relative !important; }
  [class*="menu-item-"] .bk-thumb img{
    position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important;
    visibility: visible !important; opacity: 1 !important; display: block !important;
  }
  /* bannery/promo držet „height:auto“ */
  [class*="menu-item-"] .bk-banner-link img,
  [class*="menu-item-"] .bk-promo img{
    position: static !important; height: auto !important;
  }
}

/* ==========================================================================
   [A11y + Motion] Focus ring a redukce animací
   ========================================================================== */
@media (min-width: 768px){
  .bk-left .bk-l2 > li > a:focus,
  .bk-card:focus,
  .bk-banner-link:focus{ outline: 2px solid var(--bk-mega-active-bg); outline-offset: 2px; }
  .bk-left .bk-l2 > li > a:focus:not(:focus-visible),
  .bk-card:focus:not(:focus-visible),
  .bk-banner-link:focus:not(:focus-visible){ outline: none; }
}
@media (min-width: 768px) and (prefers-reduced-motion: no-preference){
  .bk-card, .bk-banner-link{ transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
  .bk-left .bk-l2 > li{ transition: background .15s ease, color .15s ease; }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce){
  .bk-card, .bk-banner-link, .bk-left .bk-l2 > li{ transition: none !important; }
  .bk-card:hover{ transform: none !important; }
}

/* ==========================================================================
   [Backdrop] Volitelný stmívací podklad (JS přidá/odebere .is-visible)
   ========================================================================== */
@media (min-width: 992px){
  #bk-mega-backdrop{
    position: fixed; inset: 0;
    background: rgba(17,31,44,.35);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .15s ease;
    z-index: 2147483645; /* pod panelem, nad obsahem */
  }
  #bk-mega-backdrop.is-visible{ opacity: 1; visibility: visible; }
}

/* tisk: submenu vypnout */
@media print{
  .navigation-in .menu-level-1 > li[class*="menu-item-"] > ul.menu-level-2{ display: none !important; }
}