/* navigation.css - Alle Navigation-bezogenen Styles */

/* ========================================
   HAUPTNAVIGATION HOVER STYLES
======================================== */

/* Standard Hover für transparente Navigation (weiße Links) */
#main-nav.bg-transparent #nav-links a:hover {
  color: rgb(229, 231, 235) !important; /* text-gray-200 */
  border-bottom-color: rgb(255, 255, 255) !important; /* hover:border-white */
}

/* Hover für weiße Navigation (schwarze Links) */
#main-nav:not(.bg-transparent) #nav-links a:hover {
  font-weight: 500 !important;
  color: rgb(185, 28, 28) !important; /* text-red-700 */
  border-bottom-color: rgb(185, 28, 28) !important;
}

#main-nav #nav-links a {
  border-bottom: 2px solid transparent;
}

#phone-trigger {
  border-bottom: none !important;
}

#phone-trigger:hover {
  border-bottom: none !important;
}

/* ========================================
   AKTIVE NAVIGATION STYLES
======================================== */

/* Aktiver Hauptnavigationspunkt - Transparente Navigation */
#main-nav.bg-transparent #nav-links a.active {
  font-weight: 500 !important;
  color: rgb(255, 255, 255) !important; /* Weiß */
  border-bottom: 2px solid rgb(255, 255, 255) !important;
}

/* Aktiver Hauptnavigationspunkt - Weiße Navigation */
#main-nav:not(.bg-transparent) #nav-links a.active {
  font-weight: 500 !important;
  color: rgb(185, 28, 28) !important; /* text-red-700 */
  border-bottom: 2px solid rgb(185, 28, 28) !important;
}

/* ========================================
   UNTERNAVIGATION STYLES
======================================== */

/* Aktiver Untermenü-Link mit weißem Hintergrund */
#subnav:not(.bg-transparent) a.active {
  font-weight: 700 !important;
  color: rgb(185, 28, 28) !important; /* text-red-900 */
  background-color: rgba(185, 28, 28, 0.1);
  border-radius: 0.25rem;
}

/* Aktiver Untermenü-Link mit transparentem Hintergrund */
#subnav.bg-transparent a.active {
  color: white !important;
  background-color: rgba(255, 255, 255, 0.2);
  text-shadow: none;
  font-weight: 300;
}

/* Hoverstatus für Links im Untermenü - Weißer Hintergrund */
#subnav:not(.bg-transparent) a:hover {
  color: rgb(185, 28, 28) !important; /* text-red-900 */
  font-weight: 300;
  background-color: rgba(185, 28, 28, 0.05);
}

/* Hoverstatus für Links im Untermenü - Transparenter Hintergrund */
#subnav.bg-transparent a {
  color: white;
  text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.5);
}

#subnav.bg-transparent a:hover {
  color: white !important;
  background-color: rgba(255, 255, 255, 0.2);
  text-shadow: none;
}

/* ========================================
   LAYOUT & ANIMATION
======================================== */

/* Hamburger Button größer machen */
#menu-toggle span {
  width: 2rem; /* 32px - w-8 */
  height: 0.25rem; /* 4px - h-1 */
  margin-bottom: 0.5rem; /* 8px - space-y-2 */
  transition: all 0.3s ease;
}

/* Subnav-Position und Animation anpassen */
#subnav {
  top: 5.5rem; /* Direkt unter der Navigation */
  transform: translateY(0) translateY(-100%);
  transition: transform 0.3s ease, opacity 0.2s ease;
}

#subnav.translate-y-0 {
  transform: translateY(0);
}

/* Sicherstellen, dass die Links im Untermenü klickbar sind */
#subnav.pointer-events-none [data-parent] {
  pointer-events: none;
}

#subnav:not(.pointer-events-none) [data-parent] {
  pointer-events: auto;
}