/**
 * Header (FN-39, seit FN-19 im Theme, inc/kopfzeile.php). Nur Tokens aus tokens.css (Plugin).
 * Gestaltung = Vorschlag nach Referenzen-Analyse §Header (nicht freigegeben):
 * immer sticky auf Weiß, Desktop 80 px, mobil 64 px, aktiver Punkt mit
 * Unterstrich in Honey Melon, rechts Button „Member werden".
 *
 * Zustände (Klassen am <header>, gesetzt per Inline-Skript bzw. header.js):
 *   .fn-header--js      JavaScript läuft (ohne: Menü bricht um, kein Burger)
 *   .fn-header--burger  Burger-Ansicht — unter 1024 px oder wenn das Menü
 *                       nicht in eine Zeile passt
 *   .fn-header--offen   Burger-Menü geöffnet
 * Listen, Links und Buttons bewusst mit .fn-header davor zurückgesetzt, damit
 * keine Grundregel von WordPress oder einem Plugin hineinfunkt.
 */

.fn-header {
    position: sticky;
    top: 0;
    z-index: 100;
    font-family: var(--fn-font);
    font-size: var(--fn-size-nav);
    font-weight: var(--fn-weight-regular);
    line-height: 1.3;
    color: var(--fn-heading);
    background: var(--fn-color-white);
    border-bottom: var(--fn-border-width) solid var(--fn-border);
}

/* Angemeldet: unter der Admin-Leiste kleben (bis 600 px scrollt die Leiste mit) */
.admin-bar .fn-header {
    top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
    .admin-bar .fn-header {
        top: 0;
    }
}

.fn-header ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fn-header li {
    margin: 0;
}

.fn-header a:not(.fn-btn) {
    color: inherit;
    text-decoration: none;
}

.fn-header a:focus-visible,
.fn-header button:focus-visible {
    outline: 2px solid var(--fn-focus);
    outline-offset: 2px;
}

/* <button> ohne Browser-Gestaltung (Farbe, Polster, Rundung) */
.fn-header .fn-header__burger,
.fn-header .fn-header__sub-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--fn-radius);
    background: transparent;
    box-shadow: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.fn-header .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Leiste */
.fn-header__inner {
    display: flex;
    flex-wrap: wrap; /* nur ohne JavaScript nötig */
    align-items: center;
    column-gap: var(--fn-space-4);
    min-height: var(--fn-header-hoehe);
}

.fn-header--js .fn-header__inner {
    flex-wrap: nowrap;
}

.fn-header__logo {
    display: block;
    flex: none;
    width: var(--fn-logo-breite);
}

.fn-header__logo img {
    display: block;
    width: 100%;
    height: auto;
}

.fn-header__name {
    font-size: var(--fn-size-body);
    font-weight: var(--fn-weight-medium);
    letter-spacing: var(--fn-tracking-heading);
    text-transform: uppercase;
}

/*
 * Desktop-Menü. Nav, Liste und Punkte gehen über die volle Leistenhöhe —
 * so beginnt ein Untermenü mit top: 100 % genau an der Header-Linie, ohne
 * geschätzte Pixel. Die Links selbst bleiben 44 px hoch und mittig.
 */
.fn-header__nav {
    display: flex;
    align-self: stretch;
    margin-left: auto;
}

.fn-header__menu {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.fn-header--js .fn-header__menu {
    flex-wrap: nowrap;
}

.fn-header__menu > li {
    position: relative;
    display: flex;
    align-items: center;
}

.fn-header__menu > li > a {
    display: inline-flex;
    align-items: center;
    min-height: var(--fn-touch-target);
    padding-inline: var(--fn-nav-abstand);
    white-space: nowrap;
}

/* Unterstrich liegt immer an, nur unsichtbar — sonst setzt `.fn-header a { text-decoration: none }`
   die Farbe auf currentColor zurück und der Übergang blitzt beim Hovern erst dunkel auf. */
.fn-header .fn-header__menu > li > a {
    text-decoration: underline transparent;
    text-decoration-thickness: var(--fn-linie, 1px);
    text-underline-offset: 8px;
    transition: text-decoration-color var(--fn-transition);
}

.fn-header .fn-header__menu > li > a:hover {
    text-decoration-color: var(--fn-border);
}

/* Aktiver Punkt (WordPress setzt die Klassen und aria-current) */
.fn-header .fn-header__menu > .current-menu-item > a,
.fn-header .fn-header__menu > .current-menu-ancestor > a,
.fn-header .fn-header__menu > .current-menu-parent > a {
    text-decoration-color: var(--fn-color-honey-melon);
}

/* Offenes Untermenü: der Hauptpunkt bleibt unterstrichen, damit klar ist, wozu die Schublade gehört */
.fn-header:not(.fn-header--burger) .fn-header__menu > .menu-item-has-children:not(.current-menu-item, .current-menu-ancestor, .current-menu-parent):is(:hover, :focus-within, .fn-sub-offen) > a {
    text-decoration-color: var(--fn-border);
}

/* Untermenü (heute: Membership → Gallery) */
.fn-header__menu > .menu-item-has-children > a {
    padding-right: var(--fn-space-1);
}

.fn-header--js:not(.fn-header--burger) .fn-header__sub-toggle {
    display: inline-flex;
    width: 24px;
    height: var(--fn-touch-target);
    margin-right: var(--fn-nav-abstand);
}

.fn-header__sub-toggle svg {
    transition: transform var(--fn-transition);
}

.fn-header__sub-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/*
 * Untermenü als Schublade unter der Header-Linie: beginnt direkt unter dem
 * Strich (der ist ihre Oberkante), Rahmen nur links/rechts/unten, unten
 * gerundet. Der Text der Unterpunkte steht bündig unter dem Text des
 * Hauptpunkts. Hover und aktive Seite wie oben: Unterstrich statt Fläche.
 */
.fn-header .sub-menu {
    position: absolute;
    top: calc(100% + var(--fn-border-width));
    left: calc(var(--fn-nav-abstand) - var(--fn-space-3) - var(--fn-border-width));
    z-index: 2;
    display: none;
    min-width: 200px;
    padding: var(--fn-space-2) 0 var(--fn-space-3);
    background: var(--fn-color-white);
    border: var(--fn-border-width) solid var(--fn-border);
    border-top: 0;
    border-radius: 0 0 var(--fn-radius) var(--fn-radius);
}

/* Unsichtbare Brücke über die Header-Linie: die Maus verlässt beim Hinüberfahren nie den Menüpunkt */
.fn-header .sub-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: calc(var(--fn-border-width) + 2px);
}

.fn-header__menu > li:hover > .sub-menu,
.fn-header__menu > li:focus-within > .sub-menu,
.fn-header__menu > li.fn-sub-offen > .sub-menu {
    display: block;
}

.fn-header .sub-menu a {
    display: flex;
    align-items: center;
    min-height: var(--fn-touch-target);
    padding: 0 var(--fn-space-4) 0 var(--fn-space-3);
    white-space: nowrap;
    text-decoration: underline transparent;
    text-decoration-thickness: var(--fn-linie, 1px);
    text-underline-offset: 6px;
    transition: text-decoration-color var(--fn-transition);
}

.fn-header .sub-menu a:hover {
    text-decoration-color: var(--fn-border);
}

.fn-header .sub-menu .current-menu-item > a {
    text-decoration-color: var(--fn-color-honey-melon);
}

/* Rechts: Club-Login + Button */
.fn-header__aktionen {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--fn-space-3);
}

.fn-header__aktionen--panel {
    display: none;
}

/* Club-Login (Rahmen) und „Member werden“ (Fläche) gleich groß (Daisy, 13.10.) */
.fn-header .fn-header__cta,
.fn-header .fn-header__login {
    min-height: var(--fn-touch-target);
    padding: 10px var(--fn-space-4);
    font-size: var(--fn-size-nav);
    white-space: nowrap;
}

/*
 * Burger-Ansicht
 */
.fn-header--burger .fn-header__inner {
    min-height: var(--fn-header-hoehe-mobil);
}

/* Logo links, alles andere (Button, Burger) nach rechts */
.fn-header--burger .fn-header__logo {
    width: var(--fn-logo-breite-mobil);
    margin-right: auto;
}

.fn-header--burger .fn-header__aktionen--leiste {
    order: 2;
}

.fn-header.fn-header--burger .fn-header__burger {
    display: inline-flex;
    order: 3;
    flex: none;
    width: var(--fn-touch-target);
    height: var(--fn-touch-target);
    margin-right: calc((var(--fn-touch-target) - 24px) / -2); /* Striche bündig mit dem Rand */
}

/* Drei Striche → X */
.fn-header__burger-linien,
.fn-header__burger-linien span,
.fn-header__burger-linien::before,
.fn-header__burger-linien::after {
    display: block;
    width: 24px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    transition: transform var(--fn-transition), opacity var(--fn-transition);
}

.fn-header__burger-linien {
    position: relative;
    background: transparent;
}

.fn-header__burger-linien::before,
.fn-header__burger-linien::after {
    content: "";
    position: absolute;
    left: 0;
}

.fn-header__burger-linien::before {
    top: -7px;
}

.fn-header__burger-linien::after {
    top: 7px;
}

.fn-header--offen .fn-header__burger-linien span {
    opacity: 0;
}

.fn-header--offen .fn-header__burger-linien::before {
    transform: translateY(7px) rotate(45deg);
}

.fn-header--offen .fn-header__burger-linien::after {
    transform: translateY(-7px) rotate(-45deg);
}

/* Panel unter der Leiste */
.fn-header--burger .fn-header__nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100dvh - var(--fn-header-hoehe-mobil) - var(--wp-admin--admin-bar--height, 0px));
    margin: 0;
    padding: var(--fn-space-3) var(--fn-gutter) var(--fn-space-6);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--fn-color-white);
    border-top: var(--fn-border-width) solid var(--fn-border);
    box-sizing: border-box;
}

.fn-header--burger.fn-header--offen .fn-header__nav {
    display: block;
}

.fn-header--burger .fn-header__menu {
    display: block;
    max-width: var(--fn-container);
    margin-inline: auto;
}

.fn-header--burger .fn-header__menu > li {
    display: block;
    border-bottom: var(--fn-border-width) solid var(--fn-border);
}

.fn-header--burger .fn-header__menu > li > a {
    display: flex;
    min-height: 56px;
    padding-inline: 0;
    font-size: var(--fn-size-h3);
    text-underline-offset: 6px;
}

.fn-header--burger .fn-header__menu > .menu-item-has-children > a {
    padding-right: 0;
}

.fn-header--burger .sub-menu {
    position: static;
    display: block;
    min-width: 0;
    margin: calc(var(--fn-space-2) * -1) 0 var(--fn-space-2);
    padding: 0 0 0 var(--fn-space-3);
    border: 0;
    border-radius: 0;
}

.fn-header--burger .sub-menu::before {
    display: none;
}

.fn-header--burger .sub-menu a {
    display: flex;
    align-items: center;
    min-height: var(--fn-touch-target);
    padding: 0;
    font-size: var(--fn-size-body);
    color: var(--fn-muted);
}

.fn-header--burger .sub-menu a:hover {
    background: transparent;
    text-decoration: underline;
}

/* Handy: Button + Club-Login ins Panel, Leiste nur Logo + Burger */
@media (max-width: 599.98px) {
    .fn-header--burger .fn-header__aktionen--leiste {
        display: none;
    }

    .fn-header--burger .fn-header__aktionen--panel {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        max-width: var(--fn-container);
        margin: var(--fn-space-5) auto 0;
    }

    .fn-header--burger .fn-header__aktionen--panel .fn-header__cta,
    .fn-header--burger .fn-header__aktionen--panel .fn-header__login {
        font-size: var(--fn-size-body);
    }

    .fn-header--burger .fn-header__aktionen--panel .fn-header__login {
        order: 2;
    }
}

/* Seite hinter dem offenen Menü nicht mitscrollen */
html.fn-header-offen {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .fn-header *,
    .fn-header *::before,
    .fn-header *::after {
        transition: none !important;
    }
}