/* ════════════════════════════════════════════════════════════════════════
   04-nav.css — Hlavní navigace + mega-menu

   Zdroj pravdy: navrh-novy/index.html (řádky 150–160) + klientův vzor s
   widefull mega-panelem rozděleným do sloupců.

   Markup: standardní wp_nav_menu() output přes shortcode [mk_main_menu]
   (viz functions.php), depth=3.

   <nav class="nav">
     <div class="container">
       <ul class="menu menu-hlavni">
         L1: <li class="menu-item-has-children">
               <a>Drahé kameny</a>
               <ul class="sub-menu">          ← MEGA PANEL
        L2:     <li class="menu-item-has-children">
                  <a>Podle kamenu</a>         ← nadpis sloupce
                  <ul class="sub-menu">       ← linky
         L3:      <li><a>Achát</a></li>
                  <li><a>Akvamarín</a></li>
                </ul>
                </li>
               <li>…další sloupec</li>
               </ul>
             </li>
         …
       </ul>
     </div>
   </nav>
   ──────────────────────────────────────────────────────────────────────── */


/* ─── NAV WRAPPER (default position; sticky řeší nav-sticky.js) ─────── */
.nav{
  background:#fff;
  border-bottom:1px solid var(--line-soft);
  position:relative;
  z-index:var(--z-nav);
  box-shadow:0 2px 8px rgba(0,0,0,.03);
}

/* ─── STUCK STAV (přepíná nav-sticky.js po překročení threshold) ────── */
.nav.is-stuck{
  position:fixed;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:var(--z-nav);
  background:#fff;
  border-bottom:1px solid var(--line);
  box-shadow:0 4px 16px rgba(0,0,0,.08);
  animation:mkNavSlideDown .22s ease;
}
@keyframes mkNavSlideDown{
  from{transform:translateY(-100%);}
  to{transform:translateY(0);}
}

/* WP admin bar offset — když je přihlášený, nav se lepí pod admin lištu */
.admin-bar .nav.is-stuck{
  top:32px;
}
@media screen and (max-width:782px){
  .admin-bar .nav.is-stuck{
    top:46px;
  }
}

/* Spacer drží layout, když je nav fixed (JS nastaví height inline) */
.nav-spacer{
  height:0;
  pointer-events:none;
}
.nav .container{
  display:flex;
  justify-content:space-between;
  gap:6px;
  align-items:center;
  height:84px;
  flex-wrap:nowrap;
  position:relative;     /* containing block pro absolute mega-panel */
}


/* ─── MENU UL (čistý wp_nav_menu output) ─────────────────────────────── */
.nav .menu,
.nav-main{
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:6px;
  width:100%;
  margin:0;
  padding:0;
  flex-wrap:nowrap;
}
.nav .menu > li,
.nav-main > li{
  list-style:none;
  margin:0;
  padding:0;
  /* position: static abychom mohli dát mega-panel přes celou šíři .nav */
  position:static;
}


/* ─── NAV ITEMS (L1 položky) ─────────────────────────────────────────── */
.nav .menu > li > a,
.nav-main > li > a{
  padding:18px 32px;
  font-weight:700;
  font-size:19px;
  color:var(--ink);
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  white-space:nowrap;
  letter-spacing:-.005em;
  text-decoration:none;
  transition:background .15s ease, color .15s ease;
}
.nav .menu > li > a:hover,
.nav-main > li > a:hover,
.nav .menu > li.menu-item-has-children:hover > a{
  background:var(--pink-50);
  color:var(--pink);
}
.nav .menu > li.current-menu-item > a,
.nav .menu > li.current_page_item > a,
.nav-main > li.current-menu-item > a{
  color:var(--pink);
}


/* ─── CARET ŠIPKA u L1 položek s podmenu ─────────────────────────────── */
.nav .menu > li.menu-item-has-children > a::after,
.nav-main > li.menu-item-has-children > a::after{
  content:'';
  display:inline-block;
  width:14px;
  height:14px;
  margin-left:2px;
  opacity:.55;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>") no-repeat center / contain;
  transition:opacity .15s ease, transform .15s ease;
}
.nav .menu > li.menu-item-has-children:hover > a::after,
.nav-main > li.menu-item-has-children:hover > a::after{
  opacity:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea4366' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
  transform:rotate(180deg);
}


/* ════════════════════════════════════════════════════════════════════════
   MEGA-MENU PANEL (L1 > sub-menu)

   Klientův vzor: panel přes šíři containeru, světlé pozadí, 4-5 sloupců
   automaticky podle počtu L2 položek. Bez banneru (přijde později přes
   ACF, pokud klient pošle finální obsah).
   ──────────────────────────────────────────────────────────────────────── */
.nav .menu > li > .sub-menu{
  list-style:none;
  position:absolute;
  left:50%;
  top:100%;
  transform:translateX(-50%) translateY(6px);
  width:100%;
  max-width:var(--container);
  background:#fff;
  border:1px solid var(--line);
  border-top:0;
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  box-shadow:var(--shadow);
  padding:32px 36px;
  margin:0;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:28px 32px;
  opacity:0;
  visibility:hidden;
  /* Zavřený panel nesmí chytat myš — vnořené .sub-menu mají v resetu
     visibility:visible, takže by jinak průhledný panel pod navem reagoval
     na najetí (a jako potomek <li> by spustil li:hover → vyskočil by). */
  pointer-events:none;
  transition:opacity .15s ease, transform .2s ease, visibility .15s ease;
  z-index:var(--z-nav);
}
.nav .menu > li:hover > .sub-menu,
.nav .menu > li:focus-within > .sub-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

/* Hover „bridge" — mezi položkou a panelem je ~11px mezera; než ji myš
   přejede, li:hover by zmizel a menu by se zavřelo. Neviditelný pruh nad
   panelem mezeru přemostí. Dědí pointer-events od panelu, takže když je
   panel zavřený (pointer-events:none), bridge nereaguje → neoživí bug s
   otevřením na prázdném prostoru. */
.nav .menu > li > .sub-menu::before{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:-16px;
  height:16px;
  /* průhledné, jen kvůli plynulému hoveru */
}


/* ─── Sloupec mega-menu (L2 = nadpis sloupce) ────────────────────────── */
.nav .menu > li > .sub-menu > li{
  list-style:none;
  margin:0;
  padding:0;
  position:relative;
}
.nav .menu > li > .sub-menu > li > a{
  display:block;
  padding:0 0 10px;
  margin-bottom:10px;
  font-size:16px;
  font-weight:700;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--line-soft);
  letter-spacing:-.005em;
  transition:color .15s ease, border-color .15s ease;
}
.nav .menu > li > .sub-menu > li > a:hover{
  color:var(--pink);
  border-bottom-color:var(--pink-100);
}


/* ─── Linky v sloupci (L3) — resetovat vnořené sub-menu styly ─────────── */
.nav .menu > li > .sub-menu .sub-menu,
.nav .menu .sub-menu .sub-menu{
  list-style:none;
  position:static;
  display:block;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  padding:0;
  margin:0;
  width:auto;
  max-width:none;
  opacity:1;
  visibility:visible;
  transform:none;
  transition:none;
  grid-template-columns:none;
}
.nav .menu > li > .sub-menu .sub-menu li{
  list-style:none;
  margin:0;
  padding:0;
}
.nav .menu > li > .sub-menu .sub-menu a{
  display:block;
  padding:5px 0;
  font-size:14px;
  font-weight:500;
  color:var(--muted);
  text-decoration:none;
  border-radius:6px;
  transition:color .15s ease, padding-left .15s ease;
}
.nav .menu > li > .sub-menu .sub-menu a:hover{
  color:var(--pink);
  padding-left:4px;
}


/* ─── Fallback pro L1 položku bez submenu (např. Slevy, Atlas) ────────── */
/* (Žádné CSS potřeba — bez .menu-item-has-children není dropdown.) */


/* ════════════════════════════════════════════════════════════════════════
   DVOUŘÁDKOVÉ POLOŽKY (6 pozic) — název + popis pod ním

   Řádek 1 = název (obalen <span class="nav-title">, link_before/after v
             shortcode mk_main_menu), drží i caret u položek s podmenu.
   Řádek 2 = popis = pole „Popis" položky menu (Vzhled → Menu → Možnosti
             zobrazení → „Popis"). Renderuje filtr wplama_mk_nav_item_description()
             jako <span class="nav-sub"> — jen u položek, co popis mají.
   ──────────────────────────────────────────────────────────────────────── */

/* L1 položka jako sloupec (název nad popisem) */
.nav .menu-hlavni > li > a{
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:3px;
  padding:11px 22px;
  font-size:15px;          /* fallback; konkrétní řádky níže */
  line-height:1.25;
}

/* Řádek 1 — název */
.nav .menu-hlavni > li > a .nav-title{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-weight:700;
  font-size:15px;
  letter-spacing:-.01em;
}

/* Řádek 2 — popis (jen položky s vyplněným popisem) */
.nav .menu-hlavni > li > a .nav-sub{
  font-weight:500;
  font-size:12px;
  color:var(--muted);
  letter-spacing:0;
  transition:color .15s ease;
}
.nav .menu-hlavni > li > a:hover .nav-sub,
.nav .menu-hlavni > li.menu-item-has-children:hover > a .nav-sub{
  color:var(--pink);
}

/* Caret přesunout ze <a> na .nav-title — jinak by ve sloupci spadl pod popis */
.nav .menu-hlavni > li.menu-item-has-children > a::after{
  content:none;
}
.nav .menu-hlavni > li.menu-item-has-children > a .nav-title::after{
  content:'';
  display:inline-block;
  width:13px;
  height:13px;
  opacity:.55;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>") no-repeat center / contain;
  transition:opacity .15s ease, transform .15s ease;
}
.nav .menu-hlavni > li.menu-item-has-children:hover > a .nav-title::after{
  opacity:1;
  transform:rotate(180deg);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea4366' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
}

/* 6 pozic — na užším desktopu postupně zmírnit padding/velikost, ať se vejdou.
   Nav se schovává (hamburger) na 980px (viz 99-responsive.css), takže desktop
   nav žije v rozsahu 981–∞; tato pásma kryjí 981–1320px. */
@media (max-width:1320px){
  .nav .menu-hlavni{ gap:2px; }
  .nav .menu-hlavni > li > a{ padding:11px 12px; }
  .nav .menu-hlavni > li > a .nav-title{ font-size:14px; gap:5px; }
  .nav .menu-hlavni > li > a .nav-sub{ font-size:11.5px; }
}

/* 981–1200px — nejtěsnější pásmo těsně před přepnutím na hamburger (980px).
   Dlouhé názvy nechá zalomit, aby menu nikdy nepřeteklo doprava mimo obrazovku. */
@media (max-width:1200px){
  .nav .container{ gap:0; }
  .nav .menu-hlavni{ gap:0; }
  .nav .menu-hlavni > li > a{ padding:9px 9px; }
  .nav .menu-hlavni > li > a .nav-title{
    font-size:13px;
    gap:4px;
    white-space:normal;     /* dovol zalomení dlouhého názvu (přepíše nowrap z base) */
    line-height:1.18;
  }
  .nav .menu-hlavni > li > a .nav-sub{
    font-size:11px;
    white-space:normal;
    line-height:1.18;
  }
  /* caret u zalomeného názvu nesmí spadnout sám na řádek */
  .nav .menu-hlavni > li.menu-item-has-children > a .nav-title::after{
    width:11px;
    height:11px;
  }
}