/*
 * Modern BBH navigation layer.
 * Deliberately scoped to the header/navigation and navigation transitions.
 * Existing page content/layout CSS is not changed here.
 */
:root {
    --bbh-nav-blue: #00a2e0;
    --bbh-nav-blue-dark: #0087bc;
    --bbh-nav-text: #26343d;
    --bbh-nav-muted: #66737c;
    --bbh-nav-surface: rgba(247, 249, 250, 0.92);
    --bbh-nav-border: rgba(38, 52, 61, 0.10);
    --bbh-nav-shadow: 0 14px 35px rgba(30, 50, 62, 0.12);
}

/* Header shell */
.site-header.bbh-modern-header {
    position: relative;
    z-index: 1000;
    align-items: center;
    gap: 28px;
    padding-top: 20px;
    padding-bottom: 20px;
}

.bbh-modern-header .site-branding {
    flex: 0 0 auto;
}

.bbh-modern-header .site-branding .site-logo img {
    display: block;
    max-height: 88px;
    width: auto;
    transition: transform 180ms ease, opacity 180ms ease;
}

.bbh-modern-header .custom-logo-link:hover img {
    transform: translateY(-1px);
    opacity: 0.94;
}

/* Desktop navigation */
.bbh-modern-navigation {
    margin-left: auto;
}

.bbh-modern-navigation .bbh-menu-toggle {
    display: none;
}

.bbh-modern-navigation > .menu-hauptmenue-container {
    position: static;
    display: block;
    margin: 0;
    padding: 5px;
    background: var(--bbh-nav-surface);
    border: 1px solid var(--bbh-nav-border);
    border-radius: 18px;
    box-shadow: 0 5px 18px rgba(30, 50, 62, 0.06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.bbh-modern-navigation > div > ul.main-menu {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    margin: 0;
    padding: 0;
}

.bbh-modern-navigation > div > ul.main-menu > li {
    position: relative;
    display: block;
    width: auto;
    padding: 0;
}

.bbh-modern-navigation > div > ul.main-menu > li > a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 10px 13px;
    border-radius: 13px;
    color: var(--bbh-nav-text);
    font-size: 0.96rem;
    font-weight: 500;
    line-height: 1.15;
    text-decoration: none;
    white-space: nowrap;
    transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.bbh-modern-navigation > div > ul.main-menu > li > a:hover,
.bbh-modern-navigation > div > ul.main-menu > li > a:focus-visible {
    color: var(--bbh-nav-blue-dark);
    background: rgba(0, 162, 224, 0.09);
    text-decoration: none;
    transform: translateY(-1px);
}

.bbh-modern-navigation > div > ul.main-menu > li > a.active,
.bbh-modern-navigation > div > ul.main-menu > li:has(.sub-menu a.active) > a {
    color: #087da7;
    background: #ffffff;
    box-shadow: 0 3px 12px rgba(30, 50, 62, 0.09), inset 0 0 0 1px rgba(0, 162, 224, 0.10);
    font-weight: 700;
}

/* Products chevron */
.bbh-modern-navigation > div > ul.main-menu > li.bbh-products-menu > a.bbh-products-link::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin: 0 0 0 8px;
    border: 0;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 180ms ease;
}

.bbh-modern-navigation > div > ul.main-menu > li.bbh-products-menu:hover > a.bbh-products-link::after,
.bbh-modern-navigation > div > ul.main-menu > li.bbh-products-menu:focus-within > a.bbh-products-link::after {
    transform: translateY(2px) rotate(225deg);
}

/* Product dropdown */
.bbh-modern-navigation .bbh-products-menu > .sub-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    z-index: 1002;
    display: grid;
    grid-template-columns: repeat(2, minmax(190px, 1fr));
    gap: 4px;
    width: 470px;
    margin: 0;
    padding: 10px;
    list-style: none;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid var(--bbh-nav-border);
    border-radius: 18px;
    box-shadow: var(--bbh-nav-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 8px) scale(0.985);
    transform-origin: top center;
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms linear;
}

.bbh-modern-navigation .bbh-products-menu > .sub-menu::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}

.bbh-modern-navigation .bbh-products-menu:hover > .sub-menu,
.bbh-modern-navigation .bbh-products-menu:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0) scale(1);
}

.bbh-modern-navigation .sub-menu .menu-item {
    display: block;
    width: auto;
}

.bbh-modern-navigation .sub-menu .menu-item a {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 10px 12px;
    border-radius: 11px;
    color: var(--bbh-nav-text);
    font-size: 0.90rem;
    line-height: 1.25;
    text-decoration: none;
    transition: color 150ms ease, background-color 150ms ease, transform 150ms ease;
}

.bbh-modern-navigation .sub-menu .menu-item a::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-right: 10px;
    border-radius: 50%;
    background: rgba(0, 162, 224, 0.30);
    transition: background-color 150ms ease, transform 150ms ease;
}

.bbh-modern-navigation .sub-menu .menu-item a:hover,
.bbh-modern-navigation .sub-menu .menu-item a:focus-visible,
.bbh-modern-navigation .sub-menu .menu-item a.active {
    color: var(--bbh-nav-blue-dark);
    background: rgba(0, 162, 224, 0.08);
    text-decoration: none;
    transform: translateX(2px);
}

.bbh-modern-navigation .sub-menu .menu-item a:hover::before,
.bbh-modern-navigation .sub-menu .menu-item a:focus-visible::before,
.bbh-modern-navigation .sub-menu .menu-item a.active::before {
    background: var(--bbh-nav-blue);
    transform: scale(1.15);
}

/* Contact as a restrained CTA */
.bbh-modern-navigation > div > ul.main-menu > li.menu-item-contact > a {
    color: #ffffff;
    background: var(--bbh-nav-blue);
    box-shadow: 0 5px 14px rgba(0, 162, 224, 0.20);
}

.bbh-modern-navigation > div > ul.main-menu > li.menu-item-contact > a:hover,
.bbh-modern-navigation > div > ul.main-menu > li.menu-item-contact > a:focus-visible,
.bbh-modern-navigation > div > ul.main-menu > li.menu-item-contact > a.active {
    color: #ffffff;
    background: var(--bbh-nav-blue-dark);
    box-shadow: 0 7px 18px rgba(0, 162, 224, 0.26);
}

/* Keyboard focus */
.bbh-modern-navigation a:focus-visible,
.bbh-menu-toggle:focus-visible {
    outline: 3px solid rgba(0, 162, 224, 0.28);
    outline-offset: 2px;
}

/* Mobile menu */
@media only screen and (max-width: 899px) {
    .site-header.bbh-modern-header {
        gap: 16px;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    .bbh-modern-header .site-branding .site-logo img {
        max-height: 72px;
    }

    .bbh-modern-navigation {
        position: static;
        margin-left: auto;
    }

    .bbh-modern-navigation .bbh-menu-toggle {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        min-height: 44px;
        margin: 0;
        padding: 9px 13px;
        border: 1px solid var(--bbh-nav-border);
        border-radius: 13px;
        background: var(--bbh-nav-surface);
        color: var(--bbh-nav-text);
        box-shadow: 0 4px 14px rgba(30, 50, 62, 0.07);
        cursor: pointer;
        font-size: 0.92rem;
        font-weight: 700;
        line-height: 1;
        user-select: none;
        transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
    }

    .bbh-menu-toggle-bars {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4px;
        width: 20px;
        height: 18px;
    }

    .bbh-menu-toggle-bars span {
        display: block;
        width: 20px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
        transition: transform 180ms ease, opacity 180ms ease;
    }

    .bbh-nav-toggle:checked + .bbh-menu-toggle {
        color: var(--bbh-nav-blue-dark);
        background: rgba(0, 162, 224, 0.08);
        border-color: rgba(0, 162, 224, 0.18);
    }

    .bbh-nav-toggle:checked + .bbh-menu-toggle .bbh-menu-toggle-bars span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .bbh-nav-toggle:checked + .bbh-menu-toggle .bbh-menu-toggle-bars span:nth-child(2) {
        opacity: 0;
    }

    .bbh-nav-toggle:checked + .bbh-menu-toggle .bbh-menu-toggle-bars span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    .bbh-modern-navigation > .menu-hauptmenue-container {
        position: absolute;
        top: calc(100% - 4px);
        left: 16px;
        right: 16px;
        z-index: 1001;
        display: block;
        max-height: calc(100vh - 118px);
        margin: 0;
        padding: 8px;
        overflow-y: auto;
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.985);
        border: 1px solid var(--bbh-nav-border);
        box-shadow: var(--bbh-nav-shadow);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px) scale(0.985);
        transform-origin: top right;
        transition: opacity 170ms ease, transform 170ms ease, visibility 170ms linear;
    }

    .bbh-nav-toggle:checked ~ .menu-hauptmenue-container {
        opacity: 1;
        visibility: visible;
        transform: translateY(0) scale(1);
    }

    .bbh-modern-navigation > div > ul.main-menu {
        display: block;
        margin: 0;
        padding: 0;
    }

    .bbh-modern-navigation > div > ul.main-menu > li {
        display: block;
        width: 100%;
        padding: 0;
    }

    .bbh-modern-navigation > div > ul.main-menu > li > a {
        width: 100%;
        min-height: 46px;
        padding: 11px 13px;
        border-radius: 11px;
    }

    .bbh-modern-navigation > div > ul.main-menu > li.bbh-products-menu > a.bbh-products-link::after {
        margin-left: auto;
    }

    .bbh-modern-navigation .bbh-products-menu > .sub-menu {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3px;
        width: auto;
        margin: 3px 0 7px;
        padding: 6px;
        border: 0;
        border-radius: 13px;
        background: #f7f9fa;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }

    .bbh-modern-navigation .bbh-products-menu > .sub-menu::before {
        display: none;
    }

    .bbh-modern-navigation .sub-menu .menu-item a {
        min-height: 42px;
        padding: 8px 9px;
        font-size: 0.84rem;
    }

    .bbh-modern-navigation .sub-menu .menu-item a::before {
        width: 6px;
        height: 6px;
        margin-right: 7px;
        flex: 0 0 auto;
    }

    .bbh-modern-navigation > div > ul.main-menu > li.menu-item-contact > a {
        margin-top: 4px;
        justify-content: center;
    }
}

@media only screen and (max-width: 520px) {
    .bbh-modern-header .site-branding .site-logo img {
        max-height: 62px;
        max-width: 170px;
    }

    .bbh-menu-toggle-text {
        display: none;
    }

    .bbh-modern-navigation .bbh-menu-toggle {
        padding-left: 11px;
        padding-right: 11px;
    }

    .bbh-modern-navigation .bbh-products-menu > .sub-menu {
        grid-template-columns: 1fr;
    }
}

/* Professional page motion.
   Important: the outgoing page is never faded. Only the newly loaded content
   receives a short entrance animation, so a missed Blazor event cannot leave
   the website dimmed or displaced. */
#main {
    transform-origin: 50% 0;
}

@keyframes bbhPageEnter {
    0% {
        opacity: 0.90;
        transform: translateY(9px) scale(0.998);
    }
    55% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

#main.bbh-page-enter {
    animation: bbhPageEnter 360ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    will-change: opacity, transform;
}

/* Gentle one-time reveals for content further down the page. The class is
   only added by JavaScript to elements below the initial viewport, so the
   visible first screen never flashes or changes layout. */
html.bbh-motion-ready .bbh-scroll-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 460ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--bbh-reveal-delay, 0ms),
        transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1) var(--bbh-reveal-delay, 0ms);
    will-change: opacity, transform;
}

html.bbh-motion-ready .bbh-scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .bbh-modern-header .site-branding .site-logo img,
    .bbh-modern-navigation *,
    #main.bbh-page-enter,
    html.bbh-motion-ready .bbh-scroll-reveal,
    html.bbh-motion-ready .bbh-scroll-reveal.is-visible {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* ==========================================================
   BBH dynamic product image slideshows
   ========================================================== */
.bbh-media-slider {
    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
}

/* Product-area hero boxes keep exactly the dimensions of their original
   first image. Changing between portrait and landscape product photos can
   therefore never make the surrounding page jump. */
.bbh-media-slider[data-bbh-slider="hero"].bbh-slider-initialized,
.bbh-media-slider[data-bbh-slider="overview-hero"].bbh-slider-initialized {
    aspect-ratio: var(--bbh-slider-aspect) !important;
}

.bbh-media-slider[data-bbh-slider="hero"].bbh-slider-initialized > img.bbh-slider-primary,
.bbh-media-slider[data-bbh-slider="overview-hero"].bbh-slider-initialized > img.bbh-slider-primary,
.bbh-media-slider[data-bbh-slider="hero"] > img.bbh-slider-layer,
.bbh-media-slider[data-bbh-slider="overview-hero"] > img.bbh-slider-layer {
    position: absolute !important;
    z-index: 2 !important;
    top: 9px !important;
    right: 9px !important;
    bottom: 9px !important;
    left: 9px !important;
    width: calc(100% - 18px) !important;
    height: calc(100% - 18px) !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 10px !important;
}

/* The six category cards on the home page and the main product overview
   already have a fixed 16:10 image stage. Both image layers simply occupy
   that stage and cross-fade without changing any card dimensions. */
.bbhprod-card-image.bbh-media-slider.bbh-slider-initialized > img.bbh-slider-primary,
.bbhprod-card-image.bbh-media-slider > img.bbh-slider-layer {
    position: absolute !important;
    z-index: 2 !important;
    top: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    left: 8px !important;
    width: calc(100% - 16px) !important;
    height: calc(100% - 16px) !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center top !important;
}

.bbh-media-slider > img.bbh-slider-primary {
    opacity: 1 !important;
    transform: none !important;
    transition: opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
    will-change: opacity;
}

.bbh-media-slider.is-changing > img.bbh-slider-primary {
    opacity: 0 !important;
    transform: none !important;
}

.bbh-media-slider > img.bbh-slider-layer {
    opacity: 0 !important;
    transform: none !important;
    transition: opacity 620ms cubic-bezier(0.22, 0.61, 0.36, 1) !important;
    pointer-events: none !important;
    will-change: opacity;
}

.bbh-media-slider > img.bbh-slider-layer.is-active {
    opacity: 1 !important;
    transform: none !important;
}

/* The incoming image is already fully visible when the primary image is
   replaced underneath it.  The layer hand-off is deliberately transition-free
   so there is no second zoom/fade pulse after the actual cross-fade. */
.bbh-media-slider.bbh-slider-settling > img.bbh-slider-primary,
.bbh-media-slider.bbh-slider-settling > img.bbh-slider-layer {
    transition: none !important;
    transform: none !important;
}

/* Keep existing badges, card numbers and hero labels above the changing
   images. */
.bbh-media-slider .bbhveh-badge,
.bbh-media-slider .bbhkfz-bus-badge,
.bbh-media-slider .bbh48z-voltage,
.bbh-media-slider .bbhprod-card-index,
.bbh-media-slider .bbhveh-image-label,
.bbh-media-slider .bbhkfz-image-label,
.bbh-media-slider .bbh48z-image-label {
    z-index: 6 !important;
}

.bbh-slider-progress {
    position: absolute !important;
    z-index: 7 !important;
    top: 9px !important;
    left: 9px !important;
    right: 9px !important;
    height: 2px !important;
    overflow: hidden !important;
    background: rgba(255,255,255,.20) !important;
    border-radius: 999px !important;
    pointer-events: none !important;
}

.bbhprod-card-image .bbh-slider-progress {
    top: auto !important;
    bottom: 8px !important;
    left: 8px !important;
    right: 8px !important;
    height: 2px !important;
    background: rgba(18,50,62,.10) !important;
}

.bbh-slider-progress > span {
    display: block !important;
    width: 0%;
    height: 100% !important;
    background: #26bdd8 !important;
    border-radius: inherit !important;
}

@keyframes bbhSliderCaptionChange {
    0% { opacity: .55; }
    100% { opacity: 1; }
}

.bbh-media-slider [data-bbh-slider-caption="true"].bbh-slider-caption-change {
    animation: bbhSliderCaptionChange 360ms ease-out both;
}

/* Pause feedback is intentionally almost invisible: the image stays crisp,
   but the progress line softens while the mouse or keyboard focus is inside. */
.bbh-media-slider:hover .bbh-slider-progress,
.bbh-media-slider:focus-within .bbh-slider-progress {
    opacity: .45;
}

@media (prefers-reduced-motion: reduce) {
    .bbh-media-slider > img.bbh-slider-primary,
    .bbh-media-slider > img.bbh-slider-layer,
    .bbh-media-slider [data-bbh-slider-caption="true"].bbh-slider-caption-change,
    .bbh-slider-progress > span {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }

    .bbh-slider-progress {
        display: none !important;
    }
}