/* ===== Nové horní menu – vybavsenaparty.cz =====
   Samostatný soubor style/menu.css, načítá se v styles.php za global.css.
   Barvy: modrá #353bd1 (aktivní), tmavě modrá #102971 (text), barvy služeb stejné jako dlaždice. */

:root {
  --menu-modra: #353bd1;
  --menu-tmava: #102971;
  --c-balonky: #619cbf;
  --c-plesy:   #d6b153;
  --c-maskoti: #b9473f;
  --c-hrady:   #97c15c;
  --c-vata:    #c84ca3;
  --c-video:   #6c6cd4;
}

/* ---- horní odkazy: lehčí písmo, tmavě modré ---- */
.navbar .nav-link {
  color: var(--menu-tmava);
  font-weight: 600;
  padding: .55rem .25rem;
  border-radius: 0;
  border-bottom: 0 !important;
  text-decoration: none !important;
  box-shadow: none !important;
  background: none;
  transition: color .2s ease, background-size .2s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus-visible {
  color: var(--menu-modra);
}

/* aktivní stránka / otevřené „Služby": tlustší zaoblená linka dole */
.navbar .nav-link.active,
.navbar .nav-link.show {
  color: var(--menu-modra);
  font-weight: 700;
  background-image: linear-gradient(var(--menu-modra), var(--menu-modra));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 4px;
}
.navbar .nav-link.show:not(.active) {
  color: var(--c-balonky);
  background-image: linear-gradient(var(--c-balonky), var(--c-balonky));
}

/* ---- rozbalovací menu ---- */
.navbar .dropdown-menu {
  border: 0 !important;
  border-radius: 24px;
  padding: .7rem;
  margin-top: 14px !important;
  background: #fff;
  box-shadow: 0 16px 44px rgba(16, 41, 113, .18);
  min-width: 340px;
}
.navbar .dropdown-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: .85rem;
  color: var(--menu-tmava);
  font-weight: 600;
  padding: .6rem .9rem;
  border-radius: 14px;
  transition: background-color .15s ease, color .15s ease;
}
/* barevný čtvereček před názvem služby */
.navbar .dropdown-item::before {
  content: "";
  flex: 0 0 18px;
  height: 18px;
  border-radius: 6px;
  background: var(--bod, var(--c-video));
  transition: background-color .15s ease;
}
.navbar .dropdown-menu li:nth-child(1) .dropdown-item { --bod: var(--c-balonky); }
.navbar .dropdown-menu li:nth-child(2) .dropdown-item { --bod: var(--c-plesy); }
.navbar .dropdown-menu li:nth-child(3) .dropdown-item { --bod: var(--c-maskoti); }
.navbar .dropdown-menu li:nth-child(4) .dropdown-item { --bod: var(--c-hrady); }
.navbar .dropdown-menu li:nth-child(5) .dropdown-item { --bod: var(--c-vata); }
.navbar .dropdown-menu li:nth-child(6) .dropdown-item { --bod: var(--c-video); }

/* najetí myší: celý řádek v barvě služby, bílý text */
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  color: #fff;
  background: var(--bod);
}
.navbar .dropdown-item:hover::before,
.navbar .dropdown-item:focus::before { background: rgba(255, 255, 255, .85); }

/* aktuální stránka v rozbalovacím menu: jemný nádech barvy služby */
.navbar .dropdown-item.active {
  color: var(--menu-tmava);
  font-weight: 700;
  background: color-mix(in srgb, var(--bod) 16%, transparent);
}
.navbar .dropdown-item.active:hover { color: #fff; background: var(--bod); }


/* ---- mobil ---- */
@media (max-width: 991.98px) {
  #navbarOffcanvasLg { border-left: 0; border-radius: 24px 0 0 24px; padding: 1.25rem 1rem; }
  .navbar .navbar-nav .nav-item { padding-left: 0 !important; padding-right: 0 !important; }
  .navbar .nav-link { padding: .85rem .5rem; font-size: 1.1rem; }
  .navbar .dropdown-menu { box-shadow: none; padding: 0 0 0 .5rem; min-width: 0; margin-top: 0 !important; }
}

/* ---- rozbalení na počítači: otevře se najetím a po odjetí myší chvíli počká ---- */
@media (min-width: 992px) {
  .navbar .dropdown-menu {
    display: block;                 /* vždy v dokumentu, schovává ho průhlednost */
    opacity: 0;
    visibility: hidden;
    margin-top: 0 !important;
    top: 100%;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .4s;  /* .4 s odklad před zavřením */
  }
  .navbar .dropdown:hover > .dropdown-menu,
  .navbar .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(14px);
    transition-delay: 0s;
  }
  /* neviditelný „most" mezi odkazem a panelem */
  .navbar .dropdown-menu::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: -40px; height: 40px;
  }
}