/* ════════════════════════════════════════
   CRANIMAX – Navigation
════════════════════════════════════════ */

/* ── Navbar Basis ── */
.navbar {
    background-color: var(--bs-quaternary) !important;
    background-image: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.navbar-brand img,
.navbar-brand svg {
    filter: brightness(0) invert(1);
}

.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.25);
}
.navbar-toggler-icon {
    filter: brightness(0) invert(1);
}

/* ════════════════════════════════════════
   DESKTOP (ab 992px)
════════════════════════════════════════ */
@media (min-width: 992px) {

    .navbar-collapse {
        justify-content: flex-end;
    }

    #mainnavigation .navbar-nav {
        width: auto;
        position: static;
        align-items: stretch;
    }

    .navbar-nav .nav-item {
        display: flex;
        align-items: stretch;
        position: relative;
    }

    /* Roter Strich unten – nur Haupt-Nav */
    .navbar-nav .nav-item::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 18px;
        right: 18px;
        height: 2px;
        background: var(--bs-primary, #c8202a);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.2s ease;
    }

    .navbar-nav .nav-item:hover::after,
    .navbar-nav .nav-item:has(.active)::after {
        transform: scaleX(1);
    }

    /* Language: kein Strich */
    .navbar-nav:has(#languageDropdown) .nav-item::after {
        display: none !important;
    }

    /* ── Nav Links ── */
    .navbar-nav .nav-link,
    .navbar-nav .nav-link-main {
        color: rgba(255, 255, 255, 0.72) !important;
        font-weight: 500;
        font-size: 15px;
        padding: 0 18px !important;
        text-decoration: none !important;
        transition: color 0.2s ease;
        display: flex;
        align-items: center;
        height: 100%;
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link-main:hover {
        color: #ffffff !important;
    }

    .navbar-nav .nav-link.active,
    .navbar-nav .nav-link-main.active {
        color: #ffffff !important;
        font-weight: 600;
    }

    .navbar-nav .nav-link-main::before {
        display: none !important;
    }

    /* ── Desktop Dropdown ── */
    .navbar-nav .nav-item.dropdown {
        position: relative;
    }

    /* Desktop – Hover öffnet Subnav */
@media (min-width: 992px) {
    .navbar-nav .nav-item.has-subnav .subnav-menu {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity 0.2s ease, transform 0.2s ease;
        pointer-events: none;
        background: var(--bs-quaternary) !important;
        background-image: none !important;
        border: none !important;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.35);
        padding: 8px 0;
        min-width: 200px;
    }

    .navbar-nav .nav-item.has-subnav:hover .subnav-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
}

/* Mobile – Subnav immer sichtbar */
@media (max-width: 991px) {
    .navbar-nav .nav-item.has-subnav .subnav-menu {
        display: block !important;
        position: static !important;
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 0 8px 0;
    }
}

    /* Brücke */
    .navbar-nav .nav-item.dropdown::before {
        content: '';
        position: absolute;
        bottom: -6px;
        left: 0;
        right: 0;
        height: 6px;
        background: transparent;
        z-index: 9999;
    }

    /* Kein Strich auf Dropdown-Items */
    .navbar-nav .dropdown-menu .nav-item::after {
        display: none !important;
    }

    /* Dropdown Items – kein Pfeil, nur linker roter Balken */
    .navbar-nav .dropdown-menu .nav-link-dropdown,
    .navbar-nav .dropdown-menu .dropdown-item {
        color: rgba(255, 255, 255, 0.75) !important;
        font-size: 14px;
        padding: 11px 20px !important;
        border-left: 2px solid transparent;
        transition: color 0.15s ease, border-color 0.15s ease;
        background: none !important;
        height: auto;
        display: block;
    }

    /* Kein Pfeil bei Dropdown-Items */
    .navbar-nav .dropdown-menu .nav-link-dropdown::before,
    .navbar-nav .dropdown-menu .nav-link-dropdown::after,
    .navbar-nav .dropdown-menu .dropdown-item::before,
    .navbar-nav .dropdown-menu .dropdown-item::after {
        display: none !important;
    }

    .navbar-nav .dropdown-menu .nav-link-dropdown:hover,
    .navbar-nav .dropdown-menu .dropdown-item:hover {
        /* Kein Hintergrund beim Hover – nur roter Balken links */
        background: none !important;
        color: #ffffff !important;
        border-left-color: var(--bs-primary, #c8202a);
    }

    .navbar-nav .dropdown-menu .nav-link-dropdown.active,
    .navbar-nav .dropdown-menu .dropdown-item.active {
        background: none !important;
        color: #ffffff !important;
        border-left-color: var(--bs-primary, #c8202a);
        font-weight: 600;
    }

    /* ── Language Desktop ── */
    #languageDropdown {
        margin-left: 8px;
        padding-left: 20px !important;
        border-left: 1px solid rgba(255, 255, 255, 0.15);
        font-weight: 600;
        letter-spacing: 0.5px;
    }

    #languageDropdown::before {
        display: none !important;
    }

    .navbar-nav .dropdown-menu-end {
        left: auto !important;
        right: 0 !important;
        background: var(--bs-quaternary) !important;
        background-image: none !important;
        border: none !important;
        border-radius: 0 0 8px 8px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
        padding: 8px 0;
        min-width: 160px;
    }

    .navbar-nav .dropdown-menu-end .dropdown-item {
        color: rgba(255, 255, 255, 0.75) !important;
        font-size: 14px;
        font-weight: 500;
        padding: 11px 20px !important;
        border-left: 2px solid transparent;
        transition: color 0.15s ease, border-color 0.15s ease;
        background: none !important;
    }

    .navbar-nav .dropdown-menu-end .dropdown-item:hover {
        background: none !important;
        color: #ffffff !important;
        border-left-color: var(--bs-primary, #c8202a);
    }

    .navbar-nav .dropdown-menu-end .dropdown-item.active {
        background: none !important;
        color: #ffffff !important;
        border-left-color: var(--bs-primary, #c8202a);
        font-weight: 600;
    }
}


/* ════════════════════════════════════════
   MOBILE (bis 991px)
════════════════════════════════════════ */
@media (max-width: 991px) {

    .navbar-collapse {
        background: var(--bs-quaternary);
        background-image: none !important;
        padding: 8px 0 24px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* Nav Items */
    .navbar-nav .nav-item {
        border-left: 3px solid transparent;
        transition: border-color 0.15s ease;
    }


    /* Nav Links */
    .navbar-nav .nav-link,
    .navbar-nav .nav-link-main {
        color: rgba(255, 255, 255, 0.75) !important;
        font-size: 16px;
        font-weight: 500;
        padding: 14px 20px !important;
        transition: color 0.15s ease;
        text-decoration: none !important;
        display: block;
        background: none !important;
    }

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link-main:hover {
        color: #ffffff !important;
    }

    .navbar-nav .nav-link.active,
    .navbar-nav .nav-link-main.active {
        color: #ffffff !important;
        font-weight: 600;
    }

    /* ── Mobile Dropdowns: immer sichtbar, kein Klick nötig ── */
    .navbar-collapse .dropdown-menu,
    .navbar-nav .dropdown-menu-end {
        display: block !important;        /* immer sichtbar */
        position: static !important;
        background: none !important;
        background-image: none !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 0 8px 0;
        margin: 0 !important;
        float: none;
        min-width: unset;
    }

    /* Dropdown Items */
    .navbar-collapse .dropdown-menu .nav-link-dropdown,
    .navbar-collapse .dropdown-menu .dropdown-item,
    .navbar-nav .dropdown-menu-end .dropdown-item {
        color: rgba(255, 255, 255, 0.55) !important;
        font-size: 14px;
        padding: 10px 20px 10px 28px !important;
        border-left: 2px solid transparent;
        transition: color 0.15s, border-color 0.15s;
        display: block;
        background: none !important;
    }

    /* Kein Pfeil bei Items */
    .navbar-collapse .dropdown-menu .nav-link-dropdown::before,
    .navbar-collapse .dropdown-menu .nav-link-dropdown::after,
    .navbar-collapse .dropdown-menu .dropdown-item::before,
    .navbar-collapse .dropdown-menu .dropdown-item::after {
        display: none !important;
    }

    .navbar-collapse .dropdown-menu .nav-link-dropdown:hover,
    .navbar-collapse .dropdown-menu .dropdown-item:hover,
    .navbar-nav .dropdown-menu-end .dropdown-item:hover {
        color: #ffffff !important;
        background: none !important;
        border-left-color: var(--bs-primary, #c8202a);
    }

    .navbar-collapse .dropdown-menu .nav-link-dropdown.active,
    .navbar-collapse .dropdown-menu .dropdown-item.active,
    .navbar-nav .dropdown-menu-end .dropdown-item.active {
        color: #ffffff !important;
        border-left-color: var(--bs-primary, #c8202a);
        font-weight: 600;
        background: none !important;
    }

    /* ── Language Mobile ── */
    .navbar-nav + .navbar-nav {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        margin-top: 8px;
        padding-top: 8px;
    }

    #languageDropdown {
        padding: 14px 20px !important;
        font-weight: 600;
        letter-spacing: 0.5px;
        border-left: none !important;
        margin-left: 0 !important;
    }
}