/* fx/menu-header.css - modul menu-header
   1) mobilná hlavička sa pri rolovaní dole schová, pri pohybe hore vráti (<=900px)
   2) mobilné menu ako scéna: opona (clip-path), riadky stúpajú, linky sa kreslia
   3) podčiarknutie navigácie: vchádza zľava, odchádza doprava (desktop) */

/* ---------- 1) hlavička (iba mobil) ---------- */
@media (max-width:900px){
  .js .top{ transition:transform .35s var(--ease), box-shadow .3s var(--ease); }
  .js .top.is-away{ transform:translateY(-100%); box-shadow:none; }
}

/* ---------- 2) menu ---------- */
.js .mnav{
  padding-bottom:calc(1.2rem + env(safe-area-inset-bottom));
  animation:none;
  opacity:1;
  clip-path:inset(0 0 100% 0);
  visibility:hidden;
  pointer-events:none;
  transition:clip-path .3s var(--ease), visibility 0s .3s;
}
.js .mnav.is-open{
  clip-path:inset(0);
  visibility:visible;
  pointer-events:auto;
  transition:clip-path .52s var(--ease), visibility 0s 0s;
}

/* deti: pri zatváraní spoločne zhasnú (140 ms, bez oneskorenia) */
.js .mnav > *{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .14s var(--ease), transform 0s .14s;
}
.js .mnav.is-open > *{
  opacity:1;
  transform:none;
  transition:opacity .5s var(--ease) calc(90ms + var(--i, 0) * 45ms),
             transform .5s var(--ease) calc(90ms + var(--i, 0) * 45ms);
}

/* riadky s odkazmi: text stúpa z masky, oddeľovač sa kreslí zľava */
.js .mnav > a:not(.mnav__next):not(.mnav__phone){
  position:relative;
  overflow:hidden;
  border-bottom:0;
  transform:none;
}
.js .mnav > a:not(.mnav__next):not(.mnav__phone)::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--line);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s var(--ease);
}
.js .mnav.is-open > a:not(.mnav__next):not(.mnav__phone)::after{
  transform:scaleX(1);
  transition:transform .6s var(--ease) calc(90ms + var(--i, 0) * 45ms);
}
.js .mnav > a:not(.mnav__next):not(.mnav__phone) > span{
  display:block;
  transform:translateY(calc(100% + 16px)); /* spod spodnej hrany 60 px riadku */
  transition:transform 0s .14s;
}
.js .mnav.is-open > a:not(.mnav__next):not(.mnav__phone) > span{
  transform:none;
  transition:transform .7s var(--ease) calc(80ms + var(--i, 0) * 45ms);
}
/* aktívna sekcia: zelená + 5 px bodka */
.mnav > a.is-active > span::after{
  content:"";
  display:inline-block; vertical-align:middle;
  width:5px; height:5px; margin:0 0 0 .6rem; border-radius:50%;
  background:var(--green);
}

/* bez podpory clip-path: iba prelínanie */
.js.no-clip .mnav{ clip-path:none; opacity:0; transition:opacity .24s var(--ease), visibility 0s .24s; }
.js.no-clip .mnav.is-open{ opacity:1; transition:opacity .3s var(--ease), visibility 0s 0s; }

/* burger: jedna krivka, bez prekmitu */
.burger span{ transition:transform .3s var(--ease), opacity .2s var(--ease); }

/* ---------- 3) podčiarknutie: zľava dnu, doprava von ---------- */
.top__nav a::after{ transform-origin:right; }
.footer__nav a{ position:relative; }
.footer__nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; border-radius:2px;
  background:var(--grad);
  transform:scaleX(0); transform-origin:right;
  transition:transform .35s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .top__nav a:hover::after,
  .footer__nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
}
.top__nav a:focus-visible::after,
.footer__nav a:focus-visible::after{ transform:scaleX(1); transform-origin:left; }
/* na mobile majú odkazy 44 px box (touch-a11y): linka ostáva pod textom */
@media (max-width:760px){
  .footer__nav a::after{ bottom:auto; top:calc(50% + .75em); }
}

/* ---------- zredukovaný pohyb: okamžite, hlavička statická ---------- */
@media (prefers-reduced-motion: reduce){
  .js .top.is-away{ transform:none; }
  .js .mnav, .js .mnav > *, .js .mnav > a > span, .js .mnav > a::after{ transition:none !important; }
}