/* ==========================================================================
   Fullscreen-Menü. Akkordeon-Verhalten (Toggle, Höhen-Animation, "nur eine
   Kategorie offen") kommt komplett von Bootstrap (Collapse + data-bs-parent),
   siehe class-fullscreen-menu-walker.php. Hier bleibt nur, was Bootstrap
   nicht mitbringt: Desktop-Spaltenlayout statt Akkordeon, Custom-Chevron,
   Farben auf dunklem Hintergrund.
   ========================================================================== */

.bg-fullscreen-nav {
  background-image: url(../images/bg-footer.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: var(--primary);
}

/* z-index über dem Offcanvas (1045), sonst wäre der Trigger beim Öffnen
   unsichtbar/unklickbar */

#fsm-trigger {
  position: relative;
  z-index: 1046;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background-color: transparent;
  box-shadow: none;
}

.fsm-burger {
  --fsm-burger-w: 24px;
  --fsm-burger-h: 18px;
  --fsm-burger-bar-h: 2px;

  position: relative;
  display: inline-block;
  width: var(--fsm-burger-w);
  height: var(--fsm-burger-h);
}

.fsm-burger-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--fsm-burger-bar-h);
  border-radius: 1px;
  background-color: currentColor;
  transition: transform 0.25s ease, opacity 0.25s ease, top 0.25s ease,
    background-color 0.25s ease;
}

.fsm-burger-bar:nth-child(1) {
  top: 0;
}

.fsm-burger-bar:nth-child(2) {
  top: calc(var(--fsm-burger-h) / 2 - var(--fsm-burger-bar-h) / 2);
}

.fsm-burger-bar:nth-child(3) {
  top: calc(var(--fsm-burger-h) - var(--fsm-burger-bar-h));
}

/* Trigger steht über dem dunklen Offcanvas-Hintergrund */
#fsm-trigger.is-open .fsm-burger-bar {
  background-color: #fff;
}

#fsm-trigger.is-open .fsm-burger-bar:nth-child(1) {
  top: calc(var(--fsm-burger-h) / 2 - var(--fsm-burger-bar-h) / 2);
  transform: rotate(45deg);
}

#fsm-trigger.is-open .fsm-burger-bar:nth-child(2) {
  opacity: 0;
}

#fsm-trigger.is-open .fsm-burger-bar:nth-child(3) {
  top: calc(var(--fsm-burger-h) / 2 - var(--fsm-burger-bar-h) / 2);
  transform: rotate(-45deg);
}

/* -- Accordion / Kategorien --------------------------------------------- */

.fsm-categories.accordion {
  --bs-accordion-bg: transparent;
  --bs-accordion-active-bg: transparent;
  --bs-accordion-color: var(--secondary);
  --bs-accordion-active-color: var(--secondary);
  --bs-accordion-btn-color: var(--secondary);
  --bs-accordion-border-width: 0;
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-btn-focus-box-shadow: none;
  /* Auf Mobile soll der Inhalt bis an den Container-Rand reichen, siehe
     Desktop-Media-Query weiter unten für die dortige Wiederherstellung. */
  --bs-accordion-btn-padding-x: 0;
}

.fsm-category .accordion-button,
.fsm-category .fsm-title-link {
  font-size: 1.5rem;
  font-weight: 500;
  text-decoration: none;
  text-transform: none !important;
}

.fsm-category .fsm-title-link:not(.fsm-title-link-static) {
  cursor: pointer;
}

/* Bootstrap-Fokus-Glow + iOS-Tap-Highlight sorgen sonst nur beim zuletzt
   geöffneten Punkt für eine sichtbare "Box" - einheitlich entfernt,
   :focus-visible weiter unten übernimmt die Fokus-Anzeige. */
.fsm-category .accordion-button,
.fsm-category .accordion-button:hover,
.fsm-category .accordion-button:focus,
.fsm-category .accordion-button:not(.collapsed) {
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

/* Bootstraps Default-Pfeil ist ein SVG-Background-Image, ignoriert
   --bs-accordion-color - komplett aus, FA-Icon übernimmt (siehe Walker). */
.fsm-category .fsm-toggle::after {
  content: none;
}

.fsm-chevron {
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.fsm-toggle:not(.collapsed) .fsm-chevron {
  transform: rotate(180deg);
}

.fsm-category .fsm-title-link::after {
  content: none;
}

/* -- Punkte (List-Group) -------------------------------------------------- */

.fsm-categories .list-group {
  --bs-list-group-bg: transparent;
  --bs-list-group-active-bg: transparent;
  --bs-list-group-action-hover-bg: transparent;
  --bs-list-group-action-active-bg: transparent;
  --bs-list-group-color: #fff;
  --bs-list-group-action-color: #fff;
  --bs-list-group-action-hover-color: #fff;
  --bs-list-group-action-active-color: #fff;
  --bs-list-group-border-width: 0;
  --bs-list-group-item-padding-x: 0;
}

.fsm-link {
  font-size: 1.25rem;
}

/* -- Aktueller Menüpunkt --------------------------------------------------
   Override gegen sitewide ".current_page_item a { color: var(--primary) }":
   WP setzt current-menu-item automatisch */

.fsm-category.current_page_item .fsm-link,
.fsm-category.current-menu-item .fsm-link,
.fsm-category.current-menu-parent .fsm-link,
.fsm-category.current-menu-ancestor .fsm-link {
  color: #fff;
}

.fsm-category.current_page_item .fsm-title-link,
.fsm-category.current-menu-item .fsm-title-link {
  color: var(--secondary);
}

/* Active-Menu-Item styling */
.fsm-category .fsm-link[aria-current="page"] {
  color: var(--secondary);
}

.fsm-category .fsm-toggle[aria-current="page"],
.fsm-category .fsm-title-link[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* -- Hover ------------------------------------------------------------- */

.fsm-link {
  transition: color 0.15s ease, transform 0.15s ease;
}

.fsm-link:hover {
  color: var(--secondary);
  transform: translateX(4px);
}

.fsm-category .fsm-toggle,
.fsm-category .fsm-title-link:not(.fsm-title-link-static) {
  transition: opacity 0.15s ease;
}

.fsm-category .fsm-toggle:hover,
.fsm-category .fsm-title-link:not(.fsm-title-link-static):hover {
  opacity: 0.75;
}

/* -- Fokus (Tastaturbedienung) -------------------------------------------- */

.fsm-category .accordion-button:focus-visible,
.fsm-category .fsm-title-link:focus-visible,
.fsm-link:focus-visible,
.fsm-quicklink:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}

#fsm-trigger:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* -- Desktop (≥1200px): Spalten statt Akkordeon --------------------------
   Spaltenlayout selbst läuft über Bootstraps row-cols-xl-4 im Markup
   (header.php). Hier nur das Umschalten von "einklappbar" auf "immer offen". */

@media (min-width: 1200px) {
  .fsm-categories.accordion {
    --bs-accordion-btn-padding-x: 1rem;
  }

  .fsm-categories .list-group {
    --bs-list-group-item-padding-x: 1rem;
  }

  /* Header/Body überlappen sich im Grid - Body bekommt so die volle
     Panel-Höhe und zentriert gegen das ganze Panel, nicht nur gegen die
     Fläche unterm Header. */
  #fsm-panel {
    grid-template-rows: auto 1fr;
  }

  #fsm-panel .offcanvas-header {
    grid-area: 1 / 1;
    z-index: 2;
  }

  #fsm-panel .offcanvas-body {
    grid-area: 1 / 1 / -1 / 1;
    z-index: 1;
  }

  #fsm-trigger {
    min-width: 56px;
    min-height: 56px;
  }

  .fsm-burger {
    --fsm-burger-w: 32px;
    --fsm-burger-h: 24px;
    --fsm-burger-bar-h: 3px;
  }

  .fsm-category .accordion-collapse {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
  }

  .fsm-category .accordion-button {
    pointer-events: none;
  }

  /* Kategorie mit hinterlegter URL bleibt klickbar (Navigation über
     fullscreen-menu.js, das dort auch die ARIA-Attribute umbaut). */
  .fsm-category .accordion-button[data-fsm-url] {
    pointer-events: auto;
    cursor: pointer;
  }

  .fsm-chevron {
    display: none; /* immer offen, kein Chevron nötig */
  }

  /* Quicklink wiederholt den Kategorienamen - auf Desktop ist die
     Kopfzeile selbst schon klickbar, sonst doppelt. */
  .fsm-quicklink {
    display: none;
  }
}

/* -- Reduced Motion -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .fsm-chevron {
    transition: none;
  }

  .fsm-burger-bar {
    transition: none;
  }

  .fsm-link {
    transition: color 0.15s ease;
  }

  .fsm-link:hover {
    transform: none;
  }
}