/* ------------------------------------------------------------------
   Oprava kategoriové lišty na /sluzby

   Problém (změřeno v prohlížeči):
     hlavička  = fixed, top 20px, výška 68px  -> končí na 88px, z-index 100
     kategorie = fixed, top 80px               -> začínaly 8px POD hlavičkou,
                                                  která je překryla a ořízla

   Řešení: lištu posunout pod hlavičku a dát jí stejný „pilulkový" tvar,
   ať vypadá jako záměr, ne jako kolize.
   ------------------------------------------------------------------ */

nav[class*="top-[80px]"] {
  top: 100px;                    /* 12px pod hlavičkou (ta končí na 88px) */
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: fit-content;            /* obepne obsah, ať se netáhne přes celou šířku */
  max-width: calc(100% - 2rem);
  border: 1px solid rgba(201, 169, 110, 0.30);
  border-radius: 999px;
  background: rgba(253, 251, 248, 0.97);
  box-shadow: 0 6px 24px rgba(46, 47, 83, 0.10);
  overflow: hidden;
}

nav[class*="top-[80px]"] > div {
  max-width: none;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}

/* odsazení uvnitř pilulky + zrušení původního podtržení */
nav[class*="top-[80px]"] ul {
  gap: 0.15rem;
  padding: 0.35rem 0;
}

nav[class*="top-[80px]"] a {
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  border-bottom-color: transparent;
  white-space: nowrap;
}

nav[class*="top-[80px]"] a:hover {
  background: rgba(201, 169, 110, 0.12);
}

/* aktivní kategorie = plná zlatá pilulka, ať je jasně odlišená */
nav[class*="top-[80px]"] a[class*="border-[#C9A96E]"] {
  background: #c9a96e;
  color: #fff;
  box-shadow: 0 2px 8px rgba(201, 169, 110, 0.45);
}

/* kotvy sekcí nesmí skončit schované pod oběma lištami */
section[id] {
  scroll-margin-top: 180px;
}

@media (max-width: 768px) {
  nav[class*="top-[80px]"] {
    top: 94px;
    width: calc(100% - 1.5rem);
    border-radius: 22px;
  }
  nav[class*="top-[80px]"] a {
    padding: 0.55rem 0.85rem;
  }
  section[id] {
    scroll-margin-top: 165px;
  }
}
