/* Weihnachten: saisonaler Hauptmenüpunkt vor Empfehlungen. */
.baba-menu-christmas > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.baba-menu-christmas__icon {
  color: #f2c980 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
}

@media (min-width: 901px) {
  :is(header, .site-header, #masthead) li.baba-desktop-weihnachten-item > a.baba-premium-desktop-link {
    border-color: rgba(201,154,82,.10) !important;
  }

  :is(header, .site-header, #masthead) li.baba-desktop-weihnachten-item > a.baba-premium-desktop-link:hover,
  :is(header, .site-header, #masthead) li.baba-desktop-weihnachten-item > a.baba-premium-desktop-link:focus-visible {
    background: rgba(201,154,82,.08) !important;
    border-color: rgba(201,154,82,.16) !important;
  }
}

/* Empfehlungen: neuer Menüpunkt direkt vor „Meine Rezepte“. */
.baba-menu-recommendations > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.baba-menu-recommendations__star {
  color: #f2c980 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
}

/* Meine Rezepte: echter Menüpunkt aus diesem Plugin. Die Typografie kommt
 * absichtlich von .baba-premium-desktop-link, damit sie 1:1 zu den übrigen
 * Hauptmenüpunkten passt. */
.baba-menu-my-recipes > a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.baba-menu-my-recipes__heart {
  color: #e02435 !important;
  font-size: 13px !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
}

.baba-menu-favorites-count {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  margin-left: 1px !important;
  border-radius: 999px !important;
  background: #e02435 !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 20px !important;
  font-family: inherit !important;
}

.baba-menu-favorites-count.has-items {
  display: inline-flex !important;
}

/*
 * Baba Kocht – Premium Desktop Menü v0.1.6
 * WICHTIG:
 * - Kein JavaScript/DOM-Scanning mehr.
 * - Nur echte WordPress-Menüelemente im Header werden gestylt.
 * - Dadurch kein Nachladen/Umstylen nach Seitenaufbau und kein Eingriff in CTA/Karten/Inhalt.
 */

@media (min-width: 901px) {
  :is(header, .site-header, #masthead) {
    --bk-nav-ink: #111820;
    --bk-nav-panel: #111820;
    --bk-nav-panel-2: #151d25;
    --bk-nav-ivory: #fffdf9;
    --bk-nav-ivory-2: #f6f1e9;
    --bk-nav-gold: #c99a52;
    --bk-nav-gold-deep: #9f7134;
    --bk-nav-copper: #d77a38;
    --bk-nav-text: #f8f6f2;
  }

  /* Nur die UL, die unsere echten Hauptmenü-Punkte enthält. */
  :is(header, .site-header, #masthead) ul:has(> li.baba-desktop-startseite-item):has(> li.baba-desktop-rezepte-item):has(> li.baba-desktop-kategorien-item) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: fit-content !important;
    max-width: calc(100vw - 64px) !important;
    margin: 0 auto !important;
    padding: 5px !important;
    list-style: none !important;
    overflow: visible !important;
    border: 1px solid rgba(201,154,82,.16) !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, #17212a 0%, #111820 100%) !important;
    box-shadow:
      0 12px 28px rgba(0,0,0,.15),
      inset 0 1px 0 rgba(255,255,255,.035) !important;
  }

  :is(header, .site-header, #masthead) li.baba-desktop-top-item {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /*
   * Hover-Korridor für Kategorien:
   * Sobald Kategorien aktiv ist, liegt zwischen Menüpunkt und Dropdown eine
   * unsichtbare Trefferfläche. So kann die Maus auch schnell/diagonal nach
   * unten bewegt werden, ohne dass das Dropdown sofort zuklappt.
   */
  :is(header, .site-header, #masthead) li.baba-desktop-kategorien-item::before {
    content: "" !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    width: 520px !important;
    height: 22px !important;
    transform: translateX(-50%) !important;
    background: transparent !important;
    pointer-events: none !important;
    z-index: 99998 !important;
  }

  :is(header, .site-header, #masthead) li.baba-desktop-kategorien-item:hover::before,
  :is(header, .site-header, #masthead) li.baba-desktop-kategorien-item:focus-within::before {
    pointer-events: auto !important;
  }

  :is(header, .site-header, #masthead) a.baba-premium-desktop-link {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 0 17px !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    background: transparent !important;
    color: var(--bk-nav-text) !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease !important;
  }

  :is(header, .site-header, #masthead) a.baba-premium-desktop-link:hover,
  :is(header, .site-header, #masthead) a.baba-premium-desktop-link:focus-visible {
    color: #fff !important;
    background: rgba(255,255,255,.055) !important;
    border-color: rgba(255,255,255,.055) !important;
    transform: translateY(-1px) !important;
    outline: none !important;
  }

  :is(header, .site-header, #masthead) li.baba-desktop-top-item.current-menu-item > a.baba-premium-desktop-link,
  :is(header, .site-header, #masthead) li.baba-desktop-top-item.current_page_item > a.baba-premium-desktop-link,
  :is(header, .site-header, #masthead) li.baba-desktop-top-item.current-menu-ancestor > a.baba-premium-desktop-link {
    color: #f2c980 !important;
    background: linear-gradient(180deg, rgba(201,154,82,.14), rgba(201,154,82,.075)) !important;
    border-color: rgba(201,154,82,.20) !important;
    box-shadow: inset 0 -2px 0 var(--bk-nav-gold) !important;
  }

  /* Kategorien: Theme-Pfeile ausblenden, exakt einen eigenen Pfeil verwenden. */
  :is(header, .site-header, #masthead) li.baba-desktop-kategorien-item > a.baba-premium-desktop-link {
    padding-right: 20px !important;
  }

  :is(header, .site-header, #masthead) li.baba-desktop-kategorien-item > a.baba-premium-desktop-link::after {
    content: "" !important;
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    width: 7px !important;
    height: 7px !important;
    border-right: 1.7px solid currentColor !important;
    border-bottom: 1.7px solid currentColor !important;
    transform: translateY(-68%) rotate(45deg) !important;
    opacity: .78 !important;
    transition: transform .16s ease !important;
  }

  :is(header, .site-header, #masthead) li.baba-desktop-kategorien-item:hover > a.baba-premium-desktop-link::after,
  :is(header, .site-header, #masthead) li.baba-desktop-kategorien-item:focus-within > a.baba-premium-desktop-link::after {
    transform: translateY(-32%) rotate(225deg) !important;
  }

  :is(header, .site-header, #masthead) li.baba-desktop-kategorien-item > a.baba-premium-desktop-link > :is(svg, .dropdown-icon, .kadence-svg-iconset, .menu-arrow, .caret, .ct-toggle-dropdown-desktop),
  :is(header, .site-header, #masthead) li.baba-desktop-kategorien-item > :is(button, .dropdown-toggle, .sub-menu-toggle, .ct-toggle-dropdown-desktop-ghost) {
    display: none !important;
  }

  /* Blocksy legt für Kategorien zusätzlich einen eigenen Dropdown-Wrapper an.
     Der wurde bisher neben unserem eigenen Pfeil mitgerechnet und erzeugte die
     große optische Lücke vor „Küchen Umrechner“. */
  :is(header, .site-header, #masthead) li.baba-desktop-kategorien-item > a.baba-premium-desktop-link .ct-toggle-dropdown-desktop {
    display: none !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  :is(header, .site-header, #masthead) li.baba-desktop-top-item {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }

  /* Kategorien soll horizontal exakt wie die anderen Menüpunkte laufen.
     Blocksy reserviert je nach Header-Konfiguration zusätzlich Platz für
     Dropdown-Indikator/Toggle. Diese Breiten werden hier hart neutralisiert. */
  :is(header, .site-header, #masthead) li.baba-desktop-kategorien-item {
    margin-right: 0 !important;
    padding-right: 0 !important;
    column-gap: 0 !important;
    gap: 0 !important;
  }

  :is(header, .site-header, #masthead) li.baba-desktop-kategorien-item > :is(button, .ct-toggle-dropdown-desktop-ghost, .ct-toggle-dropdown-mobile) {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    flex: 0 0 0 !important;
    overflow: hidden !important;
  }

  /* Nur das direkte Kategorien-Untermenü im Header. */
  :is(header, .site-header, #masthead) li.baba-desktop-kategorien-item > ul.sub-menu {
    position: absolute !important;
    top: calc(100% + 7px) !important;
    left: 50% !important;
    transform: translate(-50%, 8px) !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 500px !important;
    min-width: 500px !important;
    margin: 0 !important;
    padding: 15px !important;
    list-style: none !important;
    border: 1px solid rgba(159,113,52,.22) !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, var(--bk-nav-ivory) 0%, var(--bk-nav-ivory-2) 100%) !important;
    box-shadow:
      0 24px 54px rgba(0,0,0,.22),
      0 7px 18px rgba(0,0,0,.07),
      inset 0 1px 0 rgba(255,255,255,.95) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 99999 !important;
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease !important;
  }

  :is(header, .site-header, #masthead) li.baba-desktop-kategorien-item:hover > ul.sub-menu,
  :is(header, .site-header, #masthead) li.baba-desktop-kategorien-item:focus-within > ul.sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate(-50%, 0) !important;
  }

  :is(header, .site-header, #masthead) li.baba-desktop-kategorien-item > ul.sub-menu::before {
    content: "" !important;
    position: absolute !important;
    top: -7px !important;
    left: 50% !important;
    width: 14px !important;
    height: 14px !important;
    background: var(--bk-nav-ivory) !important;
    border-left: 1px solid rgba(159,113,52,.22) !important;
    border-top: 1px solid rgba(159,113,52,.22) !important;
    transform: translateX(-50%) rotate(45deg) !important;
  }

  :is(header, .site-header, #masthead) li.baba-desktop-kategorien-item > ul.sub-menu > li {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    list-style: none !important;
  }

  :is(header, .site-header, #masthead) li.baba-desktop-kategorien-item > ul.sub-menu > li > a {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 36px minmax(0,1fr) 12px !important;
    align-items: center !important;
    gap: 11px !important;
    min-height: 58px !important;
    width: 100% !important;
    padding: 9px 12px !important;
    box-sizing: border-box !important;
    border: 1px solid rgba(17,24,32,.07) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.58) !important;
    color: #171b1f !important;
    font-size: 13.8px !important;
    line-height: 1.2 !important;
    font-weight: 720 !important;
    text-align: left !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.92) !important;
    transition: background .14s ease, border-color .14s ease, transform .14s ease, box-shadow .14s ease !important;
  }

  /* Icon-Kachel */
  :is(header, .site-header, #masthead) li.baba-desktop-kategorien-item > ul.sub-menu > li > a::before {
    content: "" !important;
    display: block !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 11px !important;
    background-color: #f2ece3 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 17px 17px !important;
    border: 1px solid rgba(159,113,52,.15) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important;
  }

  :is(header, .site-header, #masthead) li.baba-desktop-sub-deutsch > a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23936b35' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v7M4.5 3v5.2A2.8 2.8 0 0 0 7.3 11H8.5A2.5 2.5 0 0 0 11 8.5V3M7.3 11v10M16 3v18M16 3c3 1.2 4 3.9 4 6.2 0 2.2-1.2 4.1-4 4.8'/%3E%3C/svg%3E") !important;
  }

  :is(header, .site-header, #masthead) li.baba-desktop-sub-tuerkisch > a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23936b35' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.8 3.5a8.7 8.7 0 1 0 4.7 13.6 7.5 7.5 0 0 1-4.7-13.6Z'/%3E%3Cpath d='m17.7 9.2.7 1.5 1.6.2-1.2 1.1.3 1.6-1.4-.8-1.4.8.3-1.6-1.2-1.1 1.6-.2.7-1.5Z'/%3E%3C/svg%3E") !important;
  }

  :is(header, .site-header, #masthead) li.baba-desktop-sub-international > a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23936b35' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.7 12h16.6M12 3.5c2.2 2.3 3.3 5.1 3.3 8.5S14.2 18.2 12 20.5M12 3.5C9.8 5.8 8.7 8.6 8.7 12s1.1 6.2 3.3 8.5'/%3E%3C/svg%3E") !important;
  }

  :is(header, .site-header, #masthead) li.baba-desktop-sub-schnell > a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23936b35' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m13.4 2.8-7 10h5.2l-1 8.4 7-10h-5.2l1-8.4Z'/%3E%3C/svg%3E") !important;
  }

  :is(header, .site-header, #masthead) li.baba-desktop-sub-backen > a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23936b35' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10h14v9H5zM7 10V7h10v3M12 3v4M4 14h16M8 19v2M16 19v2'/%3E%3C/svg%3E") !important;
  }

  :is(header, .site-header, #masthead) li.baba-desktop-sub-airfryer > a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23936b35' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='3'/%3E%3Cpath d='M8 7h8M9 11h6v5H9zM10 18h4'/%3E%3C/svg%3E") !important;
  }

  /* eigener kleiner Pfeil rechts */
  :is(header, .site-header, #masthead) li.baba-desktop-kategorien-item > ul.sub-menu > li > a::after {
    content: "" !important;
    display: block !important;
    width: 7px !important;
    height: 7px !important;
    border-right: 1.6px solid #938a80 !important;
    border-bottom: 1.6px solid #938a80 !important;
    transform: rotate(-45deg) !important;
    justify-self: end !important;
  }

  :is(header, .site-header, #masthead) li.baba-desktop-kategorien-item > ul.sub-menu > li > a:hover,
  :is(header, .site-header, #masthead) li.baba-desktop-kategorien-item > ul.sub-menu > li > a:focus-visible {
    background: #fff !important;
    border-color: rgba(201,154,82,.31) !important;
    box-shadow: 0 8px 18px rgba(80,58,31,.07), inset 0 1px 0 rgba(255,255,255,.95) !important;
    transform: translateY(-1px) !important;
    outline: none !important;
  }

  @media (max-width: 1150px) {
    :is(header, .site-header, #masthead) a.baba-premium-desktop-link {
      padding-left: 13px !important;
      padding-right: 13px !important;
      font-size: 14px !important;
    }

    :is(header, .site-header, #masthead) li.baba-desktop-kategorien-item > a.baba-premium-desktop-link {
      padding-right: 20px !important;
    }

    :is(header, .site-header, #masthead) li.baba-desktop-kategorien-item > ul.sub-menu {
      width: 470px !important;
      min-width: 470px !important;
    }
  }
}

/* Mit dem zusätzlichen Punkt „Empfehlungen“ bleibt das Menü auch auf kleineren Desktopbreiten sauber in einer Zeile. */
@media (min-width: 1051px) and (max-width: 1190px) {
  :is(header, .site-header, #masthead) a.baba-premium-desktop-link {
    padding-left: 11px !important;
    padding-right: 11px !important;
    font-size: 14px !important;
  }
}

@media (min-width: 901px) and (max-width: 1050px) {
  :is(header, .site-header, #masthead) ul:has(> li.baba-desktop-startseite-item):has(> li.baba-desktop-rezepte-item):has(> li.baba-desktop-kategorien-item) {
    gap: 3px !important;
  }

  :is(header, .site-header, #masthead) a.baba-premium-desktop-link {
    min-height: 38px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 13px !important;
  }

  :is(header, .site-header, #masthead) li.baba-desktop-kategorien-item > a.baba-premium-desktop-link {
    padding-right: 16px !important;
  }

  .baba-menu-christmas > a,
  .baba-menu-recommendations > a,
  .baba-menu-my-recipes > a {
    gap: 5px !important;
  }
}