/* Main navigation on phones and touch screens (partials/main_nav.html).
   Loaded after style.css, pages/base.css and responsive.css so it wins over
   the older mobile rules there.

   On touch screens a tap leaves the element in a "sticky" :hover state, so
   the desktop rule `.dropdown:hover .dropdown-content` kept the recipe menu
   open after it was tapped closed, and the staggered card animation (which
   also keyed off :hover) replayed, which looked like a second drop.
   Here the menu is opened and closed only by the .active class that
   static/js/ui-interactions.js toggles. */

@media screen and (max-width: 768px), (hover: none) {
  /* --- Hover never opens the menu here; only .active does --- */
  .dropdown:hover .dropdown-content {
    max-height: 0;
    opacity: 0;
    visibility: hidden;
  }

  /* --dropdown-max-h = room left below the menu bar (ui-interactions.js) */
  .dropdown.active .dropdown-content {
    max-height: var(--dropdown-max-h, 70vh);
    opacity: 1;
    visibility: visible;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* One smooth slide for the panel; the cards just come with it */
  .dropdown-content {
    transition:
      max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.2s ease,
      visibility 0.3s;
  }

  .supercategory-item,
  .dropdown:hover .supercategory-item,
  .dropdown.active .supercategory-item {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  /* No hover lift on the top-level items (it sticks after a tap) */
  nav a:hover,
  nav .dropdown:hover > a {
    transform: none;
  }
}

@media screen and (max-width: 768px) {
  /* --- The bar: three equal, evenly spaced items --- */
  nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    padding: 0;
    gap: 0;
  }

  nav > a,
  nav > .dropdown {
    flex: 1 1 0;
    min-width: 0;
  }

  nav > a,
  nav > .dropdown > a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 52px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.5rem !important;
    margin: 0 !important;
    font-size: 1.05rem !important;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: #fff8ef !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    white-space: nowrap;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Thin dividers between the three items */
  nav > a,
  nav > .dropdown {
    border-right: 1px solid rgba(255, 255, 255, 0.18) !important;
  }

  nav > :last-child {
    border-right: none !important;
  }

  nav > a:hover,
  nav > a:active,
  nav > .dropdown > a:active {
    background-color: rgba(0, 0, 0, 0.12) !important;
  }

  nav > a.active {
    background-color: var(--highlight) !important;
  }

  /* Open state: the button stays highlighted while the menu is down */
  nav > .dropdown.active > a {
    background-color: var(--accent-warm, #ae5c40) !important;
  }

  /* Chevron next to "Recept": points down when closed, up when open */
  .dropdown > a::after {
    content: '';
    width: 0.45em;
    height: 0.45em;
    margin: -0.2em 0 0 0.15rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.25s ease, margin 0.25s ease;
    font-size: inherit;
  }

  .dropdown.active > a::after {
    transform: rotate(-135deg);
    margin-top: 0.25em;
  }

  .dropdown-content {
    top: 100% !important;
    background-color: #4b3c2d !important;   /* solid, so the page doesn't show through */
  }

  /* Clearer category names inside the menu */
  .supercategory-title {
    font-size: 0.85rem !important;
    padding: 0.5rem 0.35rem !important;
    line-height: 1.25;
  }

  .supercategory-link {
    font-size: 0.8rem !important;
    transform: none;
    opacity: 1;
    padding: 22px 6px 10px !important;
    margin: 0 !important;          /* undo the top-level `nav a` spacing */
    border-radius: 0 !important;
    min-height: 0;
  }
}

@media screen and (max-width: 360px) {
  nav > a,
  nav > .dropdown > a {
    font-size: 0.95rem !important;
    padding: 0 0.25rem !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dropdown-content,
  .dropdown > a::after {
    transition: none !important;
  }
}