/* ============================================================
   Aikido-Verband Hamburg e.V. – Cassiopeia_AVHH Zusatzfarben
   Saisonsteuerung & Menü (Desktop)
   ============================================================ */

/* leichte Übergänge für Seitenhintergrund */
body {
  transition: background-color 0.6s ease, color 0.6s ease;
}

/* ---------- SOMMER (Juni–August) ---------- */
body.season-summer {
  --menu-text-color: #a4161a;      /* AVHH-Rot kräftig */
  --menu-hover-color: #000000;     /* Schwarz beim Hover */
  --accent-color: #a4161a;
  background-color: #fffdfb;
}

/* ---------- WINTER (Dez–Feb) ---------- */
body.season-winter {
  --menu-text-color: #003366;      /* Marineblau */
  --menu-hover-color: #000000;
  --accent-color: #004080;
  background-color: #f8f9fb;
}

/* ---------- FRÜHLING (März–Mai) ---------- */
body.season-spring {
  --menu-text-color: #a3416a;
  --menu-hover-color: #000000;
  --accent-color: #a3416a;
  background-color: #fdf7fb;
}

/* ---------- HERBST (Sep–Nov) ---------- */
body.season-autumn {
  --menu-text-color: #8a3b00;
  --menu-hover-color: #000000;
  --accent-color: #b45309;
  background-color: #fdf8f3;
}

/* ------------------------------------------
   Saison-Icon im Banner (Emoji rechts unten)
   ------------------------------------------ */

.avhh-top-header {
  position: relative;
}

.season-icon {
  font-size: 1.5rem;
  line-height: 1;
  position: absolute;
  right: 1.2rem;
  bottom: 4px;
  opacity: 0.85;
  z-index: 5;
  filter: drop-shadow(0 0 2px rgba(0,0,0,0.2));
  transition: transform 0.2s ease, opacity 0.2s ease;
  pointer-events: none;
}

.season-icon:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* Emojis je Saison */
body.season-spring .season-icon::after  { content: "🌱"; }
body.season-summer .season-icon::after  { content: "☀️"; }
body.season-autumn .season-icon::after  { content: "🍁"; }
body.season-winter .season-icon::after  { content: "❄️"; }

/* =====================================
   Menü-Überschriften neutral anpassen
   ===================================== */

.main-nav .mod-menu__heading,
.main-nav .mod-menu li.separator > span,
.main-nav .mod-menu li.heading > span {
  font-weight: 400 !important;
  font-size: 0.8rem !important;
  color: #a00000 !important;
  text-transform: none !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  cursor: default !important;
}

.main-nav .mod-menu__heading:hover,
.main-nav .mod-menu li.separator > span:hover {
  color: #000000 !important;
  background: none !important;
}

/* ============================================================
   Saisonfarben für das Hauptmenü (Desktop)
   ============================================================ */

/* Alle Menülinks (ober- & untergeordnet) – nur wenn Saisonklasse da ist */
body[class^="season-"] .container-header .navbar .mod-menu a,
body[class^="season-"] .container-header .navbar .mod-menu span {
  color: var(--menu-text-color) !important;
  background: transparent !important;
}

/* Hover / aktiv (nur obere Ebene) */
body[class^="season-"] .container-header .navbar .mod-menu > li > a:hover,
body[class^="season-"] .container-header .navbar .mod-menu > li > a:focus,
body[class^="season-"] .container-header .navbar .mod-menu > li.current > a,
body[class^="season-"] .container-header .navbar .mod-menu > li.active > a {
  color: var(--menu-hover-color) !important;
  background-color: rgba(255, 255, 255, 0.25) !important;
}

/* Untermenü-Hintergründe (Desktop) */
body[class^="season-"] .container-header .navbar .mod-menu__sub {
  background-color: rgba(253, 248, 243, 0.97) !important; /* warmes Beige */
  border: 1px solid rgba(0,0,0,0.05) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Links im Untermenü */
body[class^="season-"] .container-header .navbar .mod-menu__sub a {
  color: var(--menu-text-color) !important;
  background: transparent !important;
}

/* Hover im Untermenü */
body[class^="season-"] .container-header .navbar .mod-menu__sub a:hover,
body[class^="season-"] .container-header .navbar .mod-menu__sub a:focus {
  color: var(--menu-hover-color) !important;
  background-color: rgba(255, 255, 255, 0.25) !important;
}

/* ============================================================
   Hamburger-Button (Icon) einfärben
   ============================================================ */

.site .navbar .navbar-toggler {
  color: var(--menu-text-color, #8a3b00);
  border: none;
  padding: 0.25rem 0.5rem;
}

.site .navbar .navbar-toggler .icon-menu::before {
  font-size: 1.6rem;
  line-height: 1;
}

.site .navbar .navbar-toggler,
.site .navbar .navbar-toggler .icon-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ===========================
   Hamburger-Menü nur auf kleinen Displays
   =========================== */

/* Standard: Button ausblenden */
.container-header .navbar-toggler {
  display: none !important;
}

/* Bis 991.98px: anzeigen */
@media (max-width: 991.98px) {
  .container-header .navbar-toggler {
    display: block !important;
  }
}

/* Ab 992px: wieder ausblenden */
@media (min-width: 992px) {
  .container-header .navbar-toggler {
    display: none !important;
  }
}

/* ============================================================
   Desktop: letzte beiden Menüpunkte nach rechts aufklappen
   ============================================================ */
@media (min-width: 992px) {
  .main-nav .mod-menu > li:nth-last-child(1) > ul.mod-menu__sub,
  .main-nav .mod-menu > li:nth-last-child(2) > ul.mod-menu__sub {
    left: auto;
    right: 0;
    transform-origin: top right;
  }
}

/* ============================================================
   Dreieck-Markierung für Menüeinträge mit Unterpunkten
   - Desktop: eigener, filigraner Pfeil
   - Mobile: nur der Standard-Pfeil von Cassiopeia/Bootstrap
   ============================================================ */

/* Desktop (ab 992px): eigener Pfeil */
@media (min-width: 992px) {

  .main-nav .mod-menu li.parent > a {
    position: relative;
    padding-right: 1.1rem; /* Platz für das Dreieck */
  }

  .main-nav .mod-menu li.parent > a::after {
    content: "";
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--menu-text-color); /* Saisonfarbe */
    opacity: 0.9;
    transition: border-top-color 0.25s ease;
  }

  .main-nav .mod-menu li.parent > a:hover::after {
    border-top-color: var(--menu-hover-color);
  }

  .main-nav .mod-menu li.parent.show > a::after {
    transform: translateY(-50%);
  }
}

/* Mobile (< 992px): unseren Pfeil sicherheitshalber deaktivieren,
   falls die gleiche Struktur im Offcanvas verwendet wird */
@media (max-width: 991.98px) {
  .container-header .navbar-collapse .mod-menu li.parent > a::after {
    content: none !important;
    border: none !important;
  }
}


/* ============================================================
   Mobile: dezente Carets im Hamburger-Menü (nur Offcanvas)
   ============================================================ */

@media (max-width: 991.98px) {

  /* Nur im aufgeklappten mobilen Menü, nur Einträge mit Untermenü */
  body[class*="season-"] .container-header .navbar-collapse .mod-menu li.parent > a {
    position: relative;
    padding-right: 1.4rem; /* Platz für das Pfeilchen rechts */
  }

  body[class*="season-"] .container-header .navbar-collapse .mod-menu li.parent > a::after {
    content: "";
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);

    /* kleines, filigranes Dreieck nach unten */
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--menu-text-color);

    opacity: 0.9;
    pointer-events: none;
  }

  /* Beim Hover/Fokus im Burger-Menü leicht dunkler */
  body[class*="season-"] .container-header .navbar-collapse .mod-menu li.parent > a:hover::after,
  body[class*="season-"] .container-header .navbar-collapse .mod-menu li.parent > a:focus::after {
    border-top-color: var(--menu-hover-color);
  }
}