/* ========================================================================
 * Version 0.31.0 – hierarchical primary navigation
 * ======================================================================== */

/* Desktop: true dropdown navigation. This intentionally overrides the older
   display:contents fallback once version 0.31.0 is active. */
.dsa-site-nav > .dsa-site-menu {
    display: flex;
    align-items: center;
    gap: .18rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dsa-site-nav > .dsa-site-menu > li {
    position: relative;
    display: block;
}

.dsa-site-nav .menu-item-has-children > a,
.dsa-site-nav .dsa-menu-parent > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .34rem;
}

.dsa-nav-caret {
    display: inline-block;
    font-size: .72em;
    line-height: 1;
    opacity: .72;
    transform: translateY(.03em);
}

.dsa-site-nav .sub-menu {
    position: absolute;
    z-index: 250;
    top: calc(100% + .28rem);
    left: 0;
    display: none;
    min-width: 14.5rem;
    margin: 0;
    padding: .42rem;
    border: 1px solid var(--dsa-border);
    border-radius: .68rem;
    background: #0a151f;
    box-shadow: 0 1rem 2.5rem rgba(0,0,0,.42);
}

.dsa-site-nav .sub-menu li {
    display: block;
    width: 100%;
}

.dsa-site-nav .sub-menu a {
    display: block;
    width: 100%;
    padding: .58rem .68rem;
    white-space: nowrap;
    box-sizing: border-box;
}

.dsa-site-nav li:hover > .sub-menu,
.dsa-site-nav li:focus-within > .sub-menu {
    display: block;
}

/* Keep the two longer labels compact without forcing the entire menu wider. */
.dsa-site-nav .dsa-nav-software > a,
.dsa-site-nav .dsa-nav-events > a {
    line-height: 1.08;
    text-align: center;
    white-space: normal;
}

/* Mobile/tablet: the existing global menu remains behind the "Menü" button.
   Submenus are shown as indented groups, which is easier to operate by touch
   than hover-based flyouts. */
@media (max-width: 900px) {
    .dsa-mobile-nav[open] nav {
        max-height: min(72vh, 42rem);
        overflow-y: auto;
        min-width: min(21rem, calc(100vw - 2rem));
    }

    .dsa-mobile-nav nav > .dsa-site-menu,
    .dsa-mobile-nav nav .dsa-site-menu,
    .dsa-mobile-nav nav ul,
    .dsa-mobile-nav nav li {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .dsa-mobile-nav nav > .dsa-site-menu > li + li {
        margin-top: .12rem;
    }

    .dsa-mobile-nav nav a {
        display: block;
        box-sizing: border-box;
        width: 100%;
    }

    .dsa-mobile-nav nav .sub-menu {
        display: block;
        margin: .08rem 0 .38rem .72rem;
        padding: 0 0 0 .55rem;
        border-left: 1px solid rgba(139,205,255,.18);
    }

    .dsa-mobile-nav nav .sub-menu a {
        padding-top: .48rem;
        padding-bottom: .48rem;
        color: var(--dsa-muted) !important;
        font-size: .88rem;
        font-weight: 600;
    }

    .dsa-mobile-nav nav .sub-menu a[aria-current="page"],
    .dsa-mobile-nav nav .sub-menu a:hover,
    .dsa-mobile-nav nav .sub-menu a:focus {
        color: var(--dsa-accent-strong) !important;
    }
}

/* Current area highlight for dropdown parents. WordPress custom menus use the
   current-menu-ancestor/current-menu-parent classes; the generated fallback
   uses is-current-area. */
.dsa-site-nav > .dsa-site-menu > li.is-current-area > a,
.dsa-site-nav > .dsa-site-menu > li.current-menu-ancestor > a,
.dsa-site-nav > .dsa-site-menu > li.current-menu-parent > a {
    background: rgba(114, 191, 255, 0.11);
    color: var(--dsa-accent-strong) !important;
}


/* ========================================================================
 * Version 0.32.0 – robust dropdown hover path and photo-card crop
 * ======================================================================== */

/* Keep the visible breathing room below a parent menu item, but make the
   complete path to the submenu hoverable. The transparent bridge belongs to
   the parent li, so moving the pointer slowly no longer closes the menu. */
@media (min-width: 901px) {
    .dsa-site-nav > .dsa-site-menu > li.menu-item-has-children::after,
    .dsa-site-nav > .dsa-site-menu > li.dsa-menu-parent::after {
        content: "";
        position: absolute;
        z-index: 249;
        top: 100%;
        left: -.15rem;
        right: -.15rem;
        height: .42rem;
        background: transparent;
    }
}

/* The tile crop is visual only; the surrounding card remains the clipping
   frame. */
.dsa-photo-card .dsa-card-image {
    overflow: hidden !important;
}
.dsa-photo-card .dsa-card-image-file {
    will-change: transform;
}

/* A standalone compact Wikipedia badge belongs on overview cards, not above
   the editorial description of a single Astroaufnahme. Preserve Wikipedia
   buttons in the summary and badges inside actual photo cards. */
body.dsa-photo-template .dsa-photo-description .dsa-card-wikipedia {
    display: none !important;
}

/* ========================================================================
 * Version 0.33.2 – Tablet navigation
 * ========================================================================
 * The global header switches from the desktop navigation to <details> at
 * 1500px (see frontend-0170.css). Until 0.33.1 the hierarchical rules below
 * existed only up to 900px. On tablets in the 901–1500px range the old
 * display:contents fallback therefore flattened parent and submenu items into
 * one horizontal row. Keep the proven phone layout untouched and apply its
 * hierarchy specifically to the missing tablet range.
 */
@media (min-width: 901px) and (max-width: 1500px) {
    .dsa-mobile-nav {
        position: relative;
        display: block !important;
    }

    .dsa-mobile-nav summary {
        cursor: pointer;
        list-style: none;
        padding: .6rem .75rem;
        border: 1px solid var(--dsa-border);
        border-radius: .45rem;
        color: var(--dsa-text);
        font-weight: 700;
        white-space: nowrap;
    }

    .dsa-mobile-nav[open] nav {
        position: absolute;
        z-index: 260;
        right: 0;
        left: auto;
        top: calc(100% + .5rem);
        display: block;
        box-sizing: border-box;
        width: min(24rem, calc(100vw - 2rem));
        min-width: 0;
        max-height: min(78vh, 46rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: .62rem;
        border: 1px solid var(--dsa-border);
        border-radius: .68rem;
        background: #0a151f;
        box-shadow: 0 1rem 2.5rem rgba(0,0,0,.45);
    }

    .dsa-mobile-nav nav > .dsa-site-menu,
    .dsa-mobile-nav nav .dsa-site-menu,
    .dsa-mobile-nav nav ul,
    .dsa-mobile-nav nav li {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .dsa-mobile-nav nav > .dsa-site-menu > li + li {
        margin-top: .12rem;
    }

    .dsa-mobile-nav nav a {
        display: block;
        box-sizing: border-box;
        width: 100%;
    }

    .dsa-mobile-nav nav > .dsa-site-menu > li > a {
        padding: .62rem .72rem;
        color: var(--dsa-text) !important;
        font-size: .94rem;
        font-weight: 700;
    }

    .dsa-mobile-nav nav .sub-menu {
        display: block;
        margin: .08rem 0 .38rem .72rem;
        padding: 0 0 0 .55rem;
        border-left: 1px solid rgba(139,205,255,.18);
    }

    .dsa-mobile-nav nav .sub-menu a {
        padding: .48rem .68rem;
        color: var(--dsa-muted) !important;
        font-size: .88rem;
        font-weight: 600;
    }

    .dsa-mobile-nav nav .sub-menu a[aria-current="page"],
    .dsa-mobile-nav nav .sub-menu a:hover,
    .dsa-mobile-nav nav .sub-menu a:focus {
        color: var(--dsa-accent-strong) !important;
    }
}