/*
 * Theme-Anpassungen, die ein Theme-Update überleben müssen.
 *
 * Diese Regeln lagen ursprünglich im Theme (navbar.css / page-legal.css) und
 * würden bei einem Theme-Update verschwinden. Deshalb liegen sie jetzt hier im
 * mu-plugin und werden von td-nav-dropdown.php geladen. Zwei Blöcke:
 *   1. Die Untermenüs (Dropdowns) im Hauptmenü.
 *   2. Die Gutenberg-Buttons auf Standardseiten (Rechtstexte usw.).
 */

/* ==========================================================================
   Untermenüs (Dropdowns) im Hauptmenü
   --------------------------------------------------------------------------
   Bootstrap liefert nur ein weißes Rechteck ohne Bezug zum Theme. Diese
   Regeln geben dem Untermenü dieselbe Formsprache wie der übrigen Navigation
   und trennen sauber nach Breakpoint:

     Desktop (ab 992px) – schwebendes Panel, das beim Überfahren aufgeht.
                          Der Elternpunkt bleibt anklickbar und führt auf
                          seine eigene Seite.
     Mobil   (bis 991px) – kein Panel: Die Unterpunkte stehen eingerückt
                          direkt unter dem Elternpunkt, dauerhaft sichtbar.
                          Kein Auf- und Zuklappen, keine verdeckten Ziele.
   ========================================================================== */

.td-navbar__menu .dropdown-menu {
  --td-dd-bg: #ffffff;
  --td-dd-border: rgba(15, 23, 42, 0.08);
  --td-dd-shadow: 0 12px 32px rgba(15, 23, 42, 0.12), 0 2px 8px rgba(15, 23, 42, 0.06);
  margin: 0;
  padding: 6px;
  border: 1px solid var(--td-dd-border);
  border-radius: 14px;
  background: var(--td-dd-bg);
  box-shadow: var(--td-dd-shadow);
  list-style: none;
}

/* Einträge im Untermenü: gleiche Schrift wie die Hauptnavigation. */
.td-navbar__menu .dropdown-item {
  display: flex;
  align-items: center;
  min-height: 44px;               /* bequeme Trefferfläche, auch mit Maus */
  padding: 10px 16px;
  border-radius: 10px;
  color: var(--td-nav-link-color, #0f172a);
  font-size: 0.95rem;
  font-weight: var(--td-nav-link-font-weight, 600);
  line-height: 1.3;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.td-navbar__menu .dropdown-item:hover,
.td-navbar__menu .dropdown-item:focus-visible {
  background: rgba(37, 99, 235, 0.08);
  color: var(--td-nav-link-hover, #2563eb);
}

/* Aktive Unterseite hervorheben. */
.td-navbar__menu .dropdown-menu .current-menu-item > .dropdown-item {
  background: rgba(37, 99, 235, 0.1);
  color: var(--td-nav-link-active, #2563eb);
}

/* Bootstrap setzt hier ein eigenes Blau – überschreiben, sonst springt die
   Farbe beim Klicken auf ein fremdes Blau um. */
.td-navbar__menu .dropdown-item:active {
  background: rgba(37, 99, 235, 0.14);
  color: var(--td-nav-link-hover, #2563eb);
}

/* Pfeil am Elternpunkt: dezent und drehbar. */
.td-navbar__menu .dropdown-toggle::after {
  margin-left: 0.4em;
  vertical-align: 0.15em;
  border-top-width: 0.32em;
  border-right-width: 0.28em;
  border-left-width: 0.28em;
  opacity: 0.55;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

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

  .td-navbar__menu .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    min-width: 232px;
    /* Aus der Mitte des Elternpunkts heraus, leicht angehoben starten. */
    transform: translate(-50%, -6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: block;                /* Bootstrap blendet per display aus –
                                      hier stattdessen weich über Deckkraft. */
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  }

  /* Unsichtbare Brücke zwischen Menüpunkt und Panel: Ohne sie schließt das
     Untermenü, sobald die Maus den Zwischenraum überquert. */
  .td-navbar__menu .dropdown-menu::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
  }

  .td-navbar__menu .dropdown:hover > .dropdown-menu,
  .td-navbar__menu .dropdown:focus-within > .dropdown-menu,
  .td-navbar__menu .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }

  .td-navbar__menu .dropdown:hover > .dropdown-toggle::after,
  .td-navbar__menu .dropdown:focus-within > .dropdown-toggle::after {
    transform: rotate(180deg);
    opacity: 1;
  }
}

/* ---------- Mobil ---------- */
@media (max-width: 991.98px) {

  /* Kein schwebendes Panel: Die Unterpunkte gehören in den Lesefluss des
     aufgeklappten Menüs – immer sichtbar, damit kein Ziel verborgen bleibt. */
  /* Bei zentrierten Links wirkt ein Strich am Blattrand beziehungslos – er
     stünde über 170 Pixel neben dem Text. Stattdessen eine leicht abgesetzte
     Fläche: Sie ordnet den Unterpunkt sichtbar dem Elternpunkt unter, ohne
     die mittige Ausrichtung des Menüs zu brechen. */
  .td-navbar__menu .dropdown-menu {
    display: block;
    position: static;
    width: auto;
    margin: 4px 12px 8px;
    padding: 4px;
    border: 0;
    border-radius: 10px;
    background: rgba(37, 99, 235, 0.05);
    box-shadow: none;
  }

  .td-navbar__menu .dropdown-item {
    justify-content: center;
    padding: 12px 20px;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 500;
    color: #475569;
    white-space: normal;
  }

  .td-navbar__menu .dropdown-item:active {
    background: rgba(0, 0, 0, 0.04);
  }

  /* Der Pfeil hat mobil keine Funktion mehr – das Untermenü steht ohnehin
     offen. Ausblenden statt einen Klick anzudeuten, der nichts bewirkt. */
  .td-navbar__menu .dropdown-toggle::after {
    display: none;
  }
}

/* ==========================================================================
   Gutenberg-Buttons auf Standardseiten
   --------------------------------------------------------------------------
   Das Theme bringt fuer die Kern-Buttons keine eigenen Regeln mit. Ohne sie
   erbt der gefuellte Button die Linkfarbe als Schriftfarbe - und die ist
   dieselbe wie sein Hintergrund. Ergebnis: blaue Schrift auf blauem Grund,
   also ein sichtbar leerer Knopf. Faellt nur auf, wenn man hinsieht, und
   betrifft jede Seite, die im Editor gebaut wird.
   ========================================================================== */

.td-page .wp-block-button__link {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	border-radius: 999px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* Gefuellt: heller Text auf der Markenfarbe. */
.td-page .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background-color: var(--td-primary, #2563eb);
	border: 2px solid var(--td-primary, #2563eb);
	color: #fff;
}

.td-page .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.td-page .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible {
	background-color: var(--td-primary-dark, #1d4ed8);
	border-color: var(--td-primary-dark, #1d4ed8);
	color: #fff;
}

/* Umriss: Markenfarbe auf transparentem Grund, beim Zeigen umgekehrt. */
.td-page .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: 2px solid var(--td-primary, #2563eb);
	color: var(--td-primary, #2563eb);
}

.td-page .wp-block-button.is-style-outline .wp-block-button__link:hover,
.td-page .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: var(--td-primary, #2563eb);
	color: #fff;
}

.td-page .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1.5rem 0;
}