/* ==========================================================
   ANGEBOTE NAVIGATION
   Desktop: linkes Menü sticky innerhalb .angebote-scroll-area
   Mobile:  kein Menü / kein Dropdown

   Die Klassen werden von functions.php am bestehenden Gutenberg-
   Markup automatisch ergänzt:
   - angebote-scroll-area
   - angebote-layout
   - angebote-nav
   - angebote-nav-item
   - angebote-content
   - angebote-section
   ========================================================== */

.angebote-scroll-area.angebote-scroll-area {
  position: relative !important;
}

.angebote-scroll-area .angebote-layout {
  position: relative !important;
  align-items: flex-start !important;
  overflow: visible !important;
}

.angebote-scroll-area .angebote-nav {
  position: sticky !important;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + 32px) !important;
  z-index: 30 !important;
  align-self: flex-start !important;
  height: fit-content !important;
}

/* Einzelne linke Menüpunkte */
.angebote-scroll-area .angebote-nav-item {
  position: relative !important;
  cursor: pointer;
}

.angebote-scroll-area .angebote-nav-item > .angebote-nav-row {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  padding-left: 0 !important;
  transition: gap 180ms ease !important;
}

.angebote-scroll-area .angebote-nav-item .angebote-nav-label {
  margin: 0 !important;
  color: var(--wp--preset--color--dark-gray, #333333) !important;
  font-weight: 400 !important;
  transition: color 180ms ease, font-weight 180ms ease !important;
}

/* Bestehenden orangen Pfeil rechts erhalten und leicht bewegen. */
.angebote-scroll-area .angebote-nav-item .angebote-nav-row figure,
.angebote-scroll-area .angebote-nav-item .angebote-nav-row .wp-block-image {
  flex: 0 0 auto !important;
  transition: transform 180ms ease !important;
}

@media (hover: hover) and (pointer: fine) {
  .angebote-scroll-area .angebote-nav-item:not(.is-disabled):hover .angebote-nav-row figure,
  .angebote-scroll-area .angebote-nav-item:not(.is-disabled):focus-visible .angebote-nav-row figure {
    transform: translateX(4px) !important;
  }
}

/* Aktiver Angebotspunkt wie in der Referenz: Punkt + kräftigere Schrift. */
.angebote-scroll-area .angebote-nav-item.is-active > .angebote-nav-row {
  justify-content: flex-start !important;
  gap: 14px !important;
}

.angebote-scroll-area .angebote-nav-item.is-active .angebote-nav-label {
  text-align: left !important;
}

.angebote-scroll-area .angebote-nav-item.is-active .angebote-nav-row figure,
.angebote-scroll-area .angebote-nav-item.is-active .angebote-nav-row .wp-block-image {
  margin-left: auto !important;
}

.angebote-scroll-area .angebote-nav-item.is-active > .angebote-nav-row::before {
  content: "" !important;
  position: static !important;
  display: block !important;
  flex: 0 0 7px !important;
  width: 7px !important;
  height: 7px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background-color: var(--wp--preset--color--amber, #f5a000) !important;
  transform: none !important;
}

.angebote-scroll-area .angebote-nav-item.is-active .angebote-nav-label {
  font-weight: 700 !important;
}

.angebote-scroll-area .angebote-nav-item.is-disabled {
  cursor: default !important;
}

/* Die Karten sind die Scroll-Ziele. */
.angebote-scroll-area .angebote-section {
  scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 48px) !important;
}

/* Desktop-Dropdown ist unsichtbar. */
.angebote-scroll-area .angebote-mobile-dropdown {
  display: none !important;
}


/* ----------------------------------------------------------
   MOBILE
   Auf Mobile wird in der Angebote-Sektion keine Navigation angezeigt.
   ---------------------------------------------------------- */
@media (max-width: 782px) {

  .angebote-scroll-area .angebote-layout {
    display: block !important;
    overflow: visible !important;
  }

  /* Desktop-Navigation auf Mobile komplett ausblenden. */
  .angebote-scroll-area .angebote-nav {
    display: none !important;
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  /* Das von functions.php erzeugte Mobile-Dropdown ebenfalls vollständig ausblenden. */
  .angebote-scroll-area .angebote-mobile-dropdown {
    display: none !important;
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  /* Angebotskarten auf Mobile über die volle verfügbare Breite. */
  .angebote-scroll-area .angebote-content,
  .angebote-scroll-area .angebote-content > .angebote-section {
    width: 100% !important;
    max-width: 100% !important;
  }

  .angebote-scroll-area .angebote-section {
    scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 48px) !important;
  }
}

/* END ANGEBOTE NAVIGATION */

/* ==========================================================
   FIX: ANGEBOTE-NAVIGATION AUF TABLET/MOBILE KOMPLETT AUSBLENDEN
   functions.php lädt später noch Dropdown-CSS mit !important.
   Deshalb ist dieser Selektor absichtlich spezifischer.
   ========================================================== */
@media (max-width: 782px) {
  html body .angebote-scroll-area .angebote-nav,
  html body .angebote-scroll-area .angebote-mobile-dropdown {
    display: none !important;
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  html body .angebote-scroll-area .angebote-layout {
    display: block !important;
    overflow: visible !important;
  }

  html body .angebote-scroll-area .angebote-content,
  html body .angebote-scroll-area .angebote-content > .angebote-section {
    width: 100% !important;
    max-width: 100% !important;
  }
}