/* ===============================================================
 * Hauptnavigation — styled for Joomla's standard mod_menu module.
 *
 * Drop a normal "Menü" / "Menu" module on template position `menu`
 * (Module-Type: "Menü") and link it to your main menu. The default
 * Joomla output is enough:
 *
 *   <ul class="mod-menu mod-list nav menu …">
 *       <li class="item-101 current active"><a href="…">Home</a></li>
 *       <li class="item-102"><a href="…">Verwaltungsrat</a></li>
 *       …
 *   </ul>
 *
 * Each menu item becomes a pill matching Figma node 23:261 — Akhand
 * Bold 24 px, 50 px rounded, 3 px gradient stroke that cycles through
 * the four accent colours (wasser → wiese → schilf → petrol → repeat),
 * and a filled fill state on hover / for the current page.
 * =============================================================== */

#menu {
    z-index: 102;
}

#menu .mod-menu,
#menu ul.mod-menu,
#menu ul.nav,
#menu .nav.menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

#menu .mod-menu li,
#menu ul li {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

#menu .mod-menu > li > a,
#menu ul > li > a,
#menu ul > li > span {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--s-1) var(--s-6);
    border-radius: var(--rad-pill);
    background: transparent;
    color: var(--c-petrol);
    font-family: var(--ff-display);
    font-weight: var(--fw-bold);
    font-size: var(--fs-nav);
    line-height: var(--lh-text);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--tr-base), color var(--tr-base);
}

/* Pill stroke — masked gradient ring, exact same technique as the
 * teaser cards (linear gradient from full colour → transparent across
 * the perimeter, drawn by ::before with mask-composite: exclude). */
#menu .mod-menu > li > a::before,
#menu ul > li > a::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: var(--bw-card);
    background: linear-gradient(135deg, var(--c-petrol) 0%, transparent 100%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
            mask-composite: exclude;
    pointer-events: none;
}

/* Cycle: 1 = wasser, 2 = wiese, 3 = schilf, 4+ = petrol, then repeat. */
#menu .mod-menu > li:nth-child(4n+1) > a::before,
#menu ul > li:nth-child(4n+1) > a::before {
    background: linear-gradient(135deg, var(--c-accent-blau) 0%, transparent 100%);
}
#menu .mod-menu > li:nth-child(4n+2) > a::before,
#menu ul > li:nth-child(4n+2) > a::before {
    background: linear-gradient(45deg, var(--c-accent-gruen) 0%, transparent 100%);
}
#menu .mod-menu > li:nth-child(4n+3) > a::before,
#menu ul > li:nth-child(4n+3) > a::before {
    background: linear-gradient(315deg, var(--c-accent-gelb) 0%, transparent 100%);
}
#menu .mod-menu > li:nth-child(4n+4) > a::before,
#menu ul > li:nth-child(4n+4) > a::before {
    background: linear-gradient(225deg, var(--c-accent-petrol) 0%, transparent 100%);
}

/* Hover + current page + open submenu = filled pill with matching accent
 * colour. Text always white for consistent contrast across all four accents.
 * Uses `li:hover` (not `a:hover`) so the parent stays filled while the
 * mouse moves into the dropdown. */
#menu .mod-menu > li:nth-child(4n+1):hover > a,
#menu .mod-menu > li:nth-child(4n+1):focus-within > a,
#menu .mod-menu > li:nth-child(4n+1).current > a,
#menu .mod-menu > li:nth-child(4n+1).active > a,
#menu .mod-menu > li:nth-child(4n+1).alias-parent-active > a {
    background: var(--c-accent-blau);
    color: var(--c-white);
}
#menu .mod-menu > li:nth-child(4n+2):hover > a,
#menu .mod-menu > li:nth-child(4n+2):focus-within > a,
#menu .mod-menu > li:nth-child(4n+2).current > a,
#menu .mod-menu > li:nth-child(4n+2).active > a,
#menu .mod-menu > li:nth-child(4n+2).alias-parent-active > a {
    background: var(--c-accent-gruen);
    color: var(--c-white);
}
#menu .mod-menu > li:nth-child(4n+3):hover > a,
#menu .mod-menu > li:nth-child(4n+3):focus-within > a,
#menu .mod-menu > li:nth-child(4n+3).current > a,
#menu .mod-menu > li:nth-child(4n+3).active > a,
#menu .mod-menu > li:nth-child(4n+3).alias-parent-active > a {
    background: var(--c-accent-gelb);
    color: var(--c-white);
}
#menu .mod-menu > li:nth-child(4n+4):hover > a,
#menu .mod-menu > li:nth-child(4n+4):focus-within > a,
#menu .mod-menu > li:nth-child(4n+4).current > a,
#menu .mod-menu > li:nth-child(4n+4).active > a,
#menu .mod-menu > li:nth-child(4n+4).alias-parent-active > a {
    background: var(--c-accent-petrol);
    color: var(--c-white);
}

#menu .mod-menu > li > a:focus-visible,
#menu ul > li > a:focus-visible {
    outline: none;
}


/* ===============================================================
 * Submenu (one level deep) — Figma node 23:75, variants 2–4.
 *
 * Each parent <li> with children gets a coloured dropdown that
 * matches its accent. The dropdown opens ONLY on hover or keyboard
 * focus — being on a child page never auto-opens it (the parent pill
 * already signals the active section by its filled background).
 *
 * Figma specs (component 23:88):
 *   width             303 px (fixed)
 *   border-radius     30 px
 *   padding           20 px vertical · 30 px horizontal
 *   gap between items 10 px
 *   divider           1 px solid white, full inner width (243 px)
 *   gap to parent pill ≈ 15 px
 * =============================================================== */

#menu .mod-menu ul,
#menu ul ul {
    position: absolute;
    top: calc(100% + var(--s-3));
    /* Centred horizontally relative to the parent pill. The 8 px Y offset
     * is the closed-state slide-up; hover state resets it to 0. */
    left: 50%;
    transform: translate(-50%, -8px);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    margin: 0;
    padding: var(--s-4) var(--s-6);
    width: 303px;
    max-width: max-content;
    list-style: none;
    background: var(--c-petrol);
    border-radius: 30px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--tr-base), transform var(--tr-base);
    z-index: 10;
}

/* Invisible hover bridge that covers the gap between the parent pill
 * and the submenu, so the mouse can travel from the pill into the
 * dropdown without losing the :hover state on the parent <li>. */
#menu .mod-menu ul::before,
#menu ul ul::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--s-3) - 4px);
    left: 0;
    right: 0;
    height: calc(var(--s-3) + 4px);
}

/* Open on hover and keyboard focus only — NOT when the current page
 * is a child of this parent. The pill's filled background already
 * signals the active section. */
#menu .mod-menu > li:hover > ul,
#menu .mod-menu > li:focus-within > ul {
    opacity: 1;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

#menu .mod-menu ul li,
#menu ul ul li {
    position: relative;
    margin: 0;
    padding: 0;
}

#menu .mod-menu ul li > a,
#menu ul ul li > a {
    display: block;
    padding: 0;
    background: transparent;
    color: var(--c-white);
    font-family: var(--ff-display);
    font-weight: var(--fw-bold);
    font-size: var(--fs-nav);
    line-height: 1.7;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 0;
    transition: opacity var(--tr-base);
}

#menu .mod-menu ul li > a::before,
#menu ul ul li > a::before {
    display: none;
}

#menu .mod-menu ul li > a:hover,
#menu .mod-menu ul li > a:focus-visible,
#menu ul ul li > a:hover,
#menu ul ul li > a:focus-visible {
    opacity: 0.8;
    background: transparent;
    color: var(--c-white);
}

#menu .mod-menu ul li > a:focus-visible,
#menu ul ul li > a:focus-visible {
    outline: none;
}

/* Solid white hairline dividers between submenu items (Figma node
 * 23:90 — these are NOT gradient lines, unlike the footer dividers). */
#menu .mod-menu ul li + li::before,
#menu ul ul li + li::before {
    content: "";
    position: absolute;
    top: calc(var(--s-2) * -0.5 - 0.5px);
    left: 0;
    right: 0;
    height: 1px;
    background: var(--c-white);
}

/* Submenu background follows the parent pill's accent colour. */
#menu .mod-menu > li:nth-child(4n+1) > ul { background: var(--c-accent-blau);  }
#menu .mod-menu > li:nth-child(4n+2) > ul { background: var(--c-accent-gruen); }
#menu .mod-menu > li:nth-child(4n+3) > ul { background: var(--c-accent-gelb);  }
#menu .mod-menu > li:nth-child(4n+4) > ul { background: var(--c-accent-petrol); }

/* Accordion toggle — a chevron button that js/main.js injects next to every
 * parent item that has a submenu. Hidden by default and on desktop (where the
 * submenu opens on hover); only revealed inside the mobile panel below. */
#menu .mod-menu__toggle { display: none; }

/* Joomla's own submenu toggle (.mod-menu__toggle-sub, emitted in the core
 * mod_menu output) is always hidden — we drive the accordion with our own
 * injected .mod-menu__toggle instead. Leaving Joomla's button visible put an
 * extra in-flow element inside every PARENT <li> only, which made those rows
 * taller than the childless ones (uneven menu spacing). */
#menu .mod-menu__toggle-sub { display: none; }

/* Mobile-first: hide the pill nav by default, show the hamburger. */
#menu { display: none; }
#menu-small { display: block; }


/* ===============================================================
 * Hamburger icon (mobile)
 * =============================================================== */

#menu-small {
    width: 40px;
    /* Box height = the icon's own height (lines at 0/11/22 + 3px = 25px) so
     * centring the box also centres the glyph. */
    height: 25px;
    position: absolute;
    top: 50%;
    right: var(--s-8);
    transform: translateY(-50%);
    transition: 0.5s ease-in-out;
    cursor: pointer;
}

#menu-small span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: var(--c-petrol);
    border-radius: 2px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: 0.25s ease-in-out;
}

#menu-small span:nth-child(1) { top: 0px; }
#menu-small span:nth-child(2),
#menu-small span:nth-child(3) { top: 11px; }
#menu-small span:nth-child(4) { top: 22px; }

#menu-small.open span:nth-child(1) {
    top: 11px;
    width: 0%;
    left: 50%;
}
#menu-small.open span:nth-child(2) { transform: rotate(45deg); }
#menu-small.open span:nth-child(3) { transform: rotate(-45deg); }
#menu-small.open span:nth-child(4) {
    top: 11px;
    width: 0%;
    left: 50%;
}

/* Desktop: pill nav visible, hamburger hidden. */
@media (min-width: 1024px) {
    #menu { display: block; }
    #menu-small { display: none; }
}


/* ===============================================================
 * Mobile / tablet navigation panel (< 1024 px)
 *
 * The #menu-small hamburger (markup in index.php, behaviour in
 * js/main.js) toggles `.open` on #menu-small + #menu and `menu-open`
 * on <body>. Below 1024 the desktop pill row is hidden; #menu becomes a
 * full-width panel that drops from the bottom edge of the (fixed) header.
 * It stays rendered but hidden (opacity/visibility) until `.open`, so the
 * open/close can fade and slide. position:absolute is relative to the
 * fixed <header>, so the panel tracks the sticky bar; an opaque page
 * gradient keeps it legible while content scrolls underneath the header.
 *
 * Selectors cover the standard Joomla mod_menu output (.mod-menu /
 * ul.nav / .nav.menu) AND the mod_serenade_menu BEM output
 * (.mod-serenade-menu__list / __item / __link), so the panel works
 * whichever module sits on the `menu` position.
 * =============================================================== */

@media (max-width: 1023.98px) {
    nav#menu {
        display: block;
        position: absolute;
        top: var(--nav-h-md);
        left: 0;
        right: 0;
        max-height: calc(100vh - var(--nav-h-md));
        max-height: calc(100dvh - var(--nav-h-md));
        padding: var(--s-4) var(--s-6) var(--s-6);
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--bg-page);
        border-bottom-left-radius: var(--rad-card);
        border-bottom-right-radius: var(--rad-card);
        opacity: 0;
        visibility: hidden;
        transform: translateY(calc(-1 * var(--s-2)));
        transition:
            opacity var(--tr-base),
            transform var(--tr-base),
            visibility 0s linear var(--tr-base);
    }

    nav#menu.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition:
            opacity var(--tr-base),
            transform var(--tr-base),
            visibility 0s;
    }

    /* Stack the items full-width as a vertical list. The serenade list isn't
     * matched by the desktop base flex rule, so set display:flex here too. */
    #menu .mod-menu,
    #menu ul.mod-menu,
    #menu ul.nav,
    #menu .nav.menu,
    #menu .mod-serenade-menu__list {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: var(--s-2);
    }

    #menu .mod-menu > li,
    #menu ul > li,
    #menu .mod-serenade-menu__item {
        width: 100%;
    }

    /* Pills get a SOLID full border in the item's accent colour — the desktop
     * fading-gradient ::before ring is switched off on mobile. */
    #menu .mod-menu > li > a::before,
    #menu ul > li > a::before {
        display: none;
    }

    #menu .mod-menu > li > a,
    #menu ul > li > a,
    #menu ul > li > span,
    #menu .mod-serenade-menu__link {
        justify-content: flex-start;
        width: 100%;
        padding: var(--s-2) var(--s-6);
        border: var(--bw-card) solid var(--c-petrol);
        border-radius: var(--rad-pill);
        white-space: normal;
    }

    /* Per-accent solid border colour (same wasser→wiese→gelb→petrol cycle). */
    #menu .mod-menu > li:nth-child(4n+1) > a,
    #menu ul > li:nth-child(4n+1) > a { border-color: var(--c-accent-blau);   }
    #menu .mod-menu > li:nth-child(4n+2) > a,
    #menu ul > li:nth-child(4n+2) > a { border-color: var(--c-accent-gruen);  }
    #menu .mod-menu > li:nth-child(4n+3) > a,
    #menu ul > li:nth-child(4n+3) > a { border-color: var(--c-accent-gelb);   }
    #menu .mod-menu > li:nth-child(4n+4) > a,
    #menu ul > li:nth-child(4n+4) > a { border-color: var(--c-accent-petrol); }

    #menu .mod-menu > li > a:focus-visible,
    #menu ul > li > a:focus-visible,
    #menu .mod-serenade-menu__link:focus-visible {
        outline: var(--bw-marker) solid var(--c-petrol);
        outline-offset: var(--s-1);
    }

    /* Parent items (standard mod_menu only — the serenade menu is flat) get a
     * chevron toggle injected by main.js. It is anchored absolutely INSIDE the
     * pill on the right; the link keeps extra right padding so its label never
     * runs under the chevron. The parent link itself stays clickable; only the
     * chevron toggles the submenu. */
    #menu .mod-menu > li.has-children > a,
    #menu ul > li.has-children > a {
        padding-right: var(--s-9);
    }

    #menu .mod-menu__toggle {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--s-9);
        height: calc(2 * var(--s-2) + var(--fs-nav) * var(--lh-text) + 2 * var(--bw-card));
        margin: 0;
        padding: 0;
        background: transparent;
        border: 0;
        color: var(--c-petrol);
        cursor: pointer;
        -webkit-appearance: none;
                appearance: none;
    }

    #menu .mod-menu__toggle::before {
        content: "";
        width: var(--s-3);
        height: var(--s-3);
        border-right:  var(--bw-marker) solid currentColor;
        border-bottom: var(--bw-marker) solid currentColor;
        transform: translateY(-25%) rotate(45deg);
        transition: transform var(--tr-base);
    }

    #menu .mod-menu > li.is-open > .mod-menu__toggle::before,
    #menu ul > li.is-open > .mod-menu__toggle::before {
        transform: translateY(25%) rotate(-135deg);
    }

    #menu .mod-menu__toggle:focus-visible {
        outline: var(--bw-marker) solid var(--c-petrol);
        outline-offset: var(--s-1);
        border-radius: var(--rad-dot);
    }

    /* On a filled parent pill (the active/current section) the chevron turns
     * white so it stays legible against the accent fill. */
    #menu li.active > .mod-menu__toggle,
    #menu li.current > .mod-menu__toggle,
    #menu li.alias-parent-active > .mod-menu__toggle {
        color: var(--c-white);
    }

    /* Neutralise the desktop hover / focus-within submenu open on mobile — the
     * submenu opens ONLY via the chevron (.is-open). This stops the panel from
     * springing the first submenu open (and off-screen via the desktop
     * translate(-50%)) the moment it auto-focuses the first link. */
    #menu .mod-menu > li:hover > ul,
    #menu .mod-menu > li:focus-within > ul,
    #menu ul > li:hover > ul,
    #menu ul > li:focus-within > ul {
        opacity: 0;
        pointer-events: none;
        transform: none;
    }

    /* Submenu: a collapsed accordion panel that drops full-width below the
     * pill. Inline (not floating), accent background + white text inherited
     * from the base rules. */
    #menu .mod-menu ul,
    #menu ul ul {
        position: static;
        left: auto;
        transform: none;
        width: 100%;
        max-width: none;
        max-height: 0;
        margin: 0;
        padding-top: 0;
        padding-bottom: 0;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
        border-radius: var(--rad-card);
        transition:
            max-height var(--tr-base),
            opacity var(--tr-base),
            margin var(--tr-base),
            padding var(--tr-base);
    }

    #menu .mod-menu > li.is-open > ul,
    #menu ul > li.is-open > ul {
        max-height: 80vh;
        margin-top: var(--s-2);
        padding: var(--s-4) var(--s-6);
        opacity: 1;
        pointer-events: auto;
    }

    /* Submenu links are plain white text on the accent panel — reset the pill
     * border / radius / padding that the top-level rule above applies to every
     * `ul > li > a` (which also matches these nested items). */
    #menu .mod-menu ul li > a,
    #menu ul ul li > a {
        padding: 0;
        border: 0;
        border-radius: 0;
        white-space: normal;
    }

    #menu .mod-menu ul::before,
    #menu ul ul::before {
        display: none;
    }
}

/* Below 768 the header shrinks to --nav-h-sm, so the panel starts higher. */
@media (max-width: 767.98px) {
    nav#menu {
        top: var(--nav-h-sm);
        max-height: calc(100vh - var(--nav-h-sm));
        max-height: calc(100dvh - var(--nav-h-sm));
    }
}

/* Honour reduced-motion: open/close the panel and accordions instantly. The
 * chevron keeps its rotate transform (only its transition is dropped) so it
 * still shows the correct up/down state. */
@media (max-width: 1023.98px) and (prefers-reduced-motion: reduce) {
    nav#menu,
    nav#menu.open,
    #menu .mod-menu ul,
    #menu ul ul,
    #menu .mod-menu__toggle::before {
        transition: none;
    }

    nav#menu,
    nav#menu.open {
        transform: none;
    }
}