/* ---------- Navbar (hori-selector, adapted from chrisicoat, recolored) ---------- */
.navbar-mainbg {
  background-color: var(--navbar);
  padding: 0px;
}
.tt-brand {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: #562F00;
  padding: 12px 20px;
  margin: 0;
  white-space: nowrap;
  text-decoration: none;
}
.tt-brand:hover, .tt-brand:focus { color: #562F00; text-decoration: none; }

.navbar-toggler {
  border: 1px solid #FF9644;
  color: #562F00;
  background: transparent;
}

#navbarSupportedContent {
  /* overflow must stay visible so the Rezepte dropdown isn't clipped
     (the old hori-selector needed hidden; it's gone now). */
  overflow: visible;
  position: relative;
}
#navbarSupportedContent ul { padding: 0px; margin: 0px; }
#navbarSupportedContent li { list-style-type: none; float: left; }
#navbarSupportedContent ul li a {
  color: var(--text);
  text-decoration: none;
  font-size: 15px;
  display: block;
  padding: 20px 20px;
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  position: relative;
}
#navbarSupportedContent > ul > li.active > a {
  color: #562F00;
  font-weight: 700;
  background-color: transparent;
  transition: all 0.7s;
}

/* Active tab: a beige→off-white "pill" that connects to the page below.
   (Replaces the JS-positioned hori-selector, which the flex navbar wouldn't move.) */
.hori-selector { display: none !important; }
#navbarSupportedContent > ul > li.nav-item.active {
  background-color: var(--bg);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

.hori-selector {
  display: inline-block;
  position: absolute;
  height: 100%;
  top: 0px;
  left: 0px;
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  background-color: var(--bg);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  margin-top: 10px;
}
.hori-selector .right,
.hori-selector .left {
  position: absolute;
  width: 25px;
  height: 25px;
  background-color: var(--bg);
  bottom: 10px;
}
.hori-selector .right { right: -25px; }
.hori-selector .left { left: -25px; }
.hori-selector .right:before,
.hori-selector .left:before {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--navbar);
}
.hori-selector .right:before { bottom: 0; right: -25px; }
.hori-selector .left:before { bottom: 0; left: -25px; }

/* ---------- Rezepte dropdown ---------- */
.nav-item.has-dropdown { position: relative; }
.tt-caret { font-size: 11px; opacity: .7; margin-left: 4px; }
.tt-dropdown {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  position: absolute;
  display: grid;
  top: 100%;
  left: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0 0 10px 10px;
  box-shadow: 0 12px 26px rgba(52, 44, 33, 0.18);
  display: none;
  z-index: 1200;
}
.nav-item.has-dropdown:hover .tt-dropdown,
.nav-item.has-dropdown:focus-within .tt-dropdown { display: block; }
.tt-dropdown li { float: none; }
#navbarSupportedContent .tt-dropdown a {
  padding: 8px 18px;
  font-size: 14px;
  white-space: nowrap;
  color: var(--text);
}
#navbarSupportedContent .tt-dropdown a:hover { background: var(--surface-2); }
.tt-dropdown .empty { padding: 8px 18px; color: var(--muted); font-size: 13px; }

@media (max-width: 991px) {
  #navbarSupportedContent ul li a { padding: 12px 30px; }
  .hori-selector {
    margin-top: 0px;
    margin-left: 10px;
    border-radius: 0;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
  }
  .hori-selector .left, .hori-selector .right { right: 10px; }
  .hori-selector .left { top: -25px; left: auto; }
  .hori-selector .right { bottom: -25px; }
  .hori-selector .left:before { left: -25px; top: -25px; }
  .hori-selector .right:before { bottom: -25px; left: -25px; }

  /* Dropdown becomes an inline, always-open sublist on mobile. */
  .tt-dropdown {
    position: static; display: block; border: none; box-shadow: none;
    background: transparent; padding: 0 0 6px 0; min-width: 0;
  }
  #navbarSupportedContent .tt-dropdown a { padding: 8px 46px; opacity: .9; }
}