/* =========================
   HEADER + NOTICE (ROBUST)
   ========================= */

/* wrapper so we can reorder notice vs header on mobile */
.header-wrap{
  display:flex;
  flex-direction:column;
}

/* desktop: notice above header */
.header-notice{ order:0; }
.header{ order:1; }

/* mobile: notice under header */
@media (max-width:768px){
  .header{ order:0; }
  .header-notice{ order:1; }
}

/* NOTICE */
.header-notice{
  background: var(--primary);
  color:#fff;
  border-bottom: 1px solid rgba(255,255,255,.16);
  overflow:hidden;
  max-height: 200px;
  opacity: 1;
  transition: max-height .26s ease, opacity .18s ease;
}
@media (max-width:768px){
  .header-notice{ border-bottom:0; border-top:1px solid rgba(255,255,255,.16); }
}
.header-notice__inner{
  --hn-btn: 34px;
  max-width:1200px;
  margin:0 auto;
  padding:.34rem 1rem;
  display:grid;
  grid-template-columns: var(--hn-btn) 1fr var(--hn-btn);
  align-items:center;
  gap:10px;
}
.header-notice__spacer{ width:var(--hn-btn); height:var(--hn-btn); }
.header-notice__center{
  justify-self:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-align:center;
  min-width:0;
}
.header-notice__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
  color:#fff;
  font-weight:800;
  letter-spacing:.08em;
  font-size:10px;
  line-height:1;
  white-space:nowrap;
}
.header-notice__text{
  color:#fff;
  opacity:.95;
  font-size:12.5px;
  line-height:1.3;
  min-width:0;
}
.header-notice__text b,
.header-notice__text strong{ font-weight:800; }

.header-notice__close{
  width:var(--hn-btn);
  height:var(--hn-btn);
  padding:0;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  background:transparent;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: background .2s, border-color .2s, transform .18s;
}
.header-notice__close:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.28);
  transform: translateY(-1px);
}
.header-notice__close span{ font-size:18px; line-height:1; }
.header-notice.is-hidden{ max-height:0; opacity:0; pointer-events:none; }

/* HEADER */
.header{
  position:sticky;
  top:0;
  z-index:10000;
  background: var(--primary);
  box-shadow:0 2px 4px rgba(0,0,0,.2);
}

.navbar.nav{
  max-width:1200px;
  margin:0 auto;
  padding:.75rem 1rem;
  display:flex;
  align-items:center;
  gap:12px;

  position:relative; /* pro mobile toggle uvnitř */
}

/* Brand logo (odolné proti globálním img resetům) */
.brand{ display:inline-flex; align-items:center; text-decoration:none; }
.brand__img{
  height:56px;
  width:auto !important;
  max-width:none !important;
  display:block;
}
@media (max-width:768px){
  .brand__img{ height:48px; }
}

/* Toggle */
.menu-toggle{
  display:none;
  width:44px;
  height:44px;
  padding:0;
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  background:transparent;
  color:#fff;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: background .2s, border-color .2s;
  z-index:10001;
}
.menu-toggle:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.28);
}

.bars{
  position:relative;
  display:inline-block;
  width:22px;
  height:2px;
  background:currentColor;
  border-radius:2px;
  transition: background .2s, transform .25s;
}
.bars::before,
.bars::after{
  content:"";
  position:absolute;
  left:0;
  width:22px;
  height:2px;
  background:currentColor;
  border-radius:2px;
  transition: transform .25s, top .25s, bottom .25s;
}
.bars::before{ top:-7px; }
.bars::after{ bottom:-7px; }
.menu-toggle.is-active .bars{ background:transparent; }
.menu-toggle.is-active .bars::before{ top:0; transform:rotate(45deg); }
.menu-toggle.is-active .bars::after{ bottom:0; transform:rotate(-45deg); }

/* =========================
   MENU – DESKTOP (PILL)
   ========================= */
.menu{
  margin-left:auto;
  display:flex;
  align-items:center;
  z-index:10000;
}

/* pouze desktop: viditelné jen linky */
.menu-logo,
.menu-sep,
.menu-social{ display:none; }

.menu-links{
  list-style:none;
  margin:0;
  padding:0;

  display:flex;
  align-items:center;
  gap:8px;              /* ✅ žádné překryvy */
}

.menu-links__item{ display:flex; }

/* ✅ stabilní navlink třída (žádné :not) */
.nav-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;        /* ✅ stop overlap */
  white-space:nowrap;

  text-decoration:none;
  color: var(--white);

  padding:8px 12px;
  border-radius:999px;

  transition: background .18s ease, transform .18s ease;
}

/* hover */
.nav-link:hover,
.nav-link:focus-visible{
  background: rgba(255,255,255,.12);
  transform: translateY(-1px);
}

/* active */
.nav-link.is-active,
.nav-link[aria-current="page"]{
  background: rgba(255,255,255,.14);
}

/* pill container */
@media (min-width:769px){
  .navbar.nav{ padding:.65rem 1rem; }

  .menu{
    padding:6px; /* ✅ víc prostoru proti borderu */
    border-radius:999px;
    border:1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(8px);
  }
}

/* =========================
   MENU – MOBILE (OVERLAY)
   ========================= */
@media (max-width:768px){
  .menu-toggle{
    display:inline-flex;

    /* ✅ toggle je v headeru */
    position:absolute;
    right: calc(12px + env(safe-area-inset-right));
    top: 50%;
    transform: translateY(-50%);
  }

  /* ✅ při otevření overlay držet toggle nad overlayem */
  body.menu-open .menu-toggle{
    position:fixed;
    top: calc(14px + env(safe-area-inset-top));
    right: calc(12px + env(safe-area-inset-right));
    transform:none;
  }

  /* overlay */
  .menu{
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    height:100dvh;

    background: var(--footer-bg);

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;

    gap:10px;
    padding:
      calc(56px + env(safe-area-inset-top))
      24px
      calc(24px + env(safe-area-inset-bottom));

    transform: translateY(-100%);
    opacity:0;
    pointer-events:none;
    transition: transform .35s ease, opacity .3s ease;

    overflow:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .menu.is-open{
    transform: translateY(0);
    opacity:1;
    pointer-events:auto;
  }

  /* mobile menu logo (odolné) */
  .menu-logo{
    display:flex;
    width:100%;
    max-width:520px;
    justify-content:center;
    margin:0 0 10px;
  }
  .menu-logo__img{
    height:48px;
    width:auto !important;
    max-width:none !important;
    display:block;
  }

  .menu-links{
    width:100%;
    max-width:520px;
    flex-direction:column;
    gap:10px;
  }
  .menu-links__item{ width:100%; }

  .nav-link{
    width:100%;
    border-radius:12px;
    padding:12px 10px;
    border:1px solid rgba(255,255,255,.14);
    font-size:.9rem;
    transform:none; /* na mobilu nechceme hop */
  }
  .nav-link:hover,
  .nav-link:focus-visible{ transform:none; }

  .menu-sep{
    display:block;
    width:100%;
    max-width:520px;
    height:1px;
    background: rgba(255,255,255,.18);
    margin:5px 0;
  }

  .menu-social{
    display:flex;
    gap:10px;
    margin-top:10px;
  }

  /* ✅ social ikony: SVG = currentColor => musí mít barvu */
  .menu-social .icon-btn,
  .menu-social .icon-btn:visited{
    color:#fff;
  }
}

/* když je menu open, nechceme scroll body */
body.menu-open{ overflow:hidden; }

/* Focus */
@supports selector(:focus-visible){
  :where(a, button){ outline:none; }
  :where(a, button):focus-visible{
    box-shadow: 0 0 0 3px rgba(255,255,255,.35);
    border-radius: 12px;
  }
}
@supports not selector(:focus-visible){
  :where(a, button):focus{
    box-shadow: 0 0 0 3px rgba(255,255,255,.35);
    border-radius: 12px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .menu,
  .menu-toggle,
  .bars,
  .bars::before,
  .bars::after,
  .header-notice,
  .nav-link{
    transition:none !important;
  }
}