/**
 * BCB Modern Menu 1.5.0
 * Single-source front-end styles for WordPress + Divi 5.
 * The parent semantic classes are authoritative. Runtime JS only restores them
 * when Divi 5 re-renders markup; it no longer writes visual inline styles.
 */

:where(.bcb-modern-menu) {
    --bcb-focus-ring: rgba(255, 122, 0, .34);
}

/* ---------- Base ---------- */
.bcb-modern-menu > .bcb-menu-item {
    position: relative;
    align-self: center;
    height: auto !important;
    min-height: 0 !important;
    padding-top: 0;
    padding-bottom: 0;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    outline: 0 !important;
}

.bcb-modern-menu > .bcb-menu-item > a {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box !important;
    gap: var(--bcb-icon-gap, 8px);
    height: var(--bcb-public-height, 44px) !important;
    min-height: var(--bcb-public-height, 44px) !important;
    max-height: var(--bcb-public-height, 44px) !important;
    padding-top: 0 !important;
    padding-right: var(--bcb-public-pad-x, 14px) !important;
    padding-bottom: 0 !important;
    padding-left: var(--bcb-public-pad-x, 14px) !important;
    border: 0;
    border-radius: var(--bcb-public-radius, 10px);
    background-color: transparent;
    background-image: none;
    color: inherit;
    font-size: var(--bcb-font-size, 15px);
    font-weight: var(--bcb-font-weight, 700);
    line-height: 1.1;
    letter-spacing: -.015em;
    text-decoration: none;
    transition:
        color var(--bcb-transition, 220ms) ease,
        background-color var(--bcb-transition, 220ms) ease,
        border-color var(--bcb-transition, 220ms) ease,
        box-shadow var(--bcb-transition, 220ms) ease,
        transform var(--bcb-transition, 220ms) ease,
        opacity var(--bcb-transition, 220ms) ease;
}

.bcb-modern-menu > .bcb-menu-item > a:focus-visible {
    outline: 3px solid var(--bcb-focus-ring) !important;
    outline-offset: 3px;
}

.bcb-menu-label {
    min-width: 0;
}

.bcb-menu-icon,
.bcb-menu-icon svg {
    display: block;
    flex: 0 0 auto;
    width: var(--bcb-icon-size, 18px);
    height: var(--bcb-icon-size, 18px);
}

.bcb-menu-icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------- Public links ---------- */
.bcb-public-hover-line > .bcb-menu-public > a {
    background-image: linear-gradient(var(--bcb-menu-orange), var(--bcb-menu-orange));
    background-repeat: no-repeat;
    background-position: 50% calc(100% - 7px);
    background-size: 0 var(--bcb-public-line, 2px);
}

.bcb-public-hover-line > .bcb-menu-public > a:hover,
.bcb-public-hover-line > .bcb-menu-public.current-menu-item > a,
.bcb-public-hover-line > .bcb-menu-public.current-menu-ancestor > a,
.bcb-public-hover-line > .bcb-menu-public.bcb-menu-current > a {
    color: var(--bcb-menu-orange) !important;
    background-size: calc(100% - (var(--bcb-public-pad-x, 14px) * 2)) var(--bcb-public-line, 2px);
}

.bcb-public-hover-pill > .bcb-menu-public > a:hover,
.bcb-public-hover-pill > .bcb-menu-public.current-menu-item > a,
.bcb-public-hover-pill > .bcb-menu-public.current-menu-ancestor > a,
.bcb-public-hover-pill > .bcb-menu-public.bcb-menu-current > a {
    color: var(--bcb-menu-orange) !important;
    background-color: var(--bcb-public-hover-bg, rgba(255,122,0,.08)) !important;
}

.bcb-public-hover-glow > .bcb-menu-public > a:hover,
.bcb-public-hover-glow > .bcb-menu-public.current-menu-item > a,
.bcb-public-hover-glow > .bcb-menu-public.bcb-menu-current > a {
    color: var(--bcb-menu-orange) !important;
    text-shadow: 0 0 13px var(--bcb-public-hover-bg, rgba(255,122,0,.22));
}

/* ---------- Club buttons: one visual layer = the <a> only ---------- */
.bcb-modern-menu > .bcb-menu-club > a {
    overflow: hidden;
    height: var(--bcb-secondary-height, 42px) !important;
    min-height: var(--bcb-secondary-height, 42px) !important;
    max-height: var(--bcb-secondary-height, 42px) !important;
    width: var(--bcb-secondary-width, auto) !important;
    min-width: var(--bcb-secondary-min-width, 0) !important;
    padding-right: var(--bcb-secondary-pad-x, 15px) !important;
    padding-left: var(--bcb-secondary-pad-x, 15px) !important;
    border-width: var(--bcb-secondary-border-width, 1px) !important;
    border-style: solid !important;
    border-color: var(--bcb-secondary-border, rgba(255,122,0,.34)) !important;
    border-radius: var(--bcb-secondary-radius, 14px);
    background: var(--bcb-secondary-bg, rgba(255,122,0,.10)) !important;
    color: var(--bcb-secondary-text, var(--bcb-menu-orange)) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 22px var(--bcb-secondary-shadow, rgba(255,122,0,.12));
}

.bcb-modern-menu > .bcb-menu-club-secondary > a:hover,
.bcb-modern-menu > .bcb-menu-club-secondary.current-menu-item > a,
.bcb-modern-menu > .bcb-menu-club-secondary.current-menu-ancestor > a,
.bcb-modern-menu > .bcb-menu-club-secondary.bcb-menu-current > a {
    border-color: var(--bcb-secondary-text, var(--bcb-menu-orange)) !important;
    background: var(--bcb-secondary-bg-hover, rgba(255,122,0,.19)) !important;
    box-shadow: 0 12px 28px var(--bcb-secondary-shadow, rgba(255,122,0,.18)), inset 0 1px 0 rgba(255,255,255,.10);
}

.bcb-modern-menu > .bcb-menu-club-primary > a {
    height: var(--bcb-primary-height, 42px) !important;
    min-height: var(--bcb-primary-height, 42px) !important;
    max-height: var(--bcb-primary-height, 42px) !important;
    width: var(--bcb-primary-width, auto) !important;
    min-width: var(--bcb-primary-min-width, 0) !important;
    padding-right: var(--bcb-primary-pad-x, 15px) !important;
    padding-left: var(--bcb-primary-pad-x, 15px) !important;
    border-width: var(--bcb-primary-border-width, 1px) !important;
    border-style: solid !important;
    border-color: var(--bcb-primary-border, rgba(255,255,255,.14)) !important;
    border-radius: var(--bcb-primary-radius, 14px);
    background:
        radial-gradient(circle at 82% 8%, rgba(255,255,255,.22), transparent 30%),
        linear-gradient(135deg, var(--bcb-primary-start, #ffab45) 0%, var(--bcb-primary-mid, #ff7a00) 46%, var(--bcb-primary-end, #ff4d00) 100%) !important;
    color: var(--bcb-primary-text, #fff) !important;
    box-shadow: 0 10px 26px var(--bcb-primary-shadow, rgba(255,91,0,.29)), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(128,36,0,.14);
    text-shadow: 0 1px 1px rgba(99,31,0,.18);
}

.bcb-modern-menu > .bcb-menu-club-primary > a::after {
    content: "";
    display: var(--bcb-primary-dot-display, block);
    flex: 0 0 auto;
    width: var(--bcb-primary-dot-size, 7px);
    height: var(--bcb-primary-dot-size, 7px);
    margin-left: 1px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(255,255,255,.14);
}

/* Current state stays inside the same button. No external ring. */
.bcb-modern-menu > .bcb-menu-club-primary > a:hover,
.bcb-modern-menu > .bcb-menu-club-primary.current-menu-item > a,
.bcb-modern-menu > .bcb-menu-club-primary.current-menu-ancestor > a,
.bcb-modern-menu > .bcb-menu-club-primary.bcb-menu-current > a {
    box-shadow: 0 12px 28px var(--bcb-primary-shadow, rgba(255,91,0,.32)), inset 0 1px 0 rgba(255,255,255,.31), inset 0 -1px 0 rgba(128,36,0,.14);
}

/* ---------- Interaction effects ---------- */
.bcb-modern-menu.bcb-effect-lift > .bcb-menu-club > a:hover,
.bcb-modern-menu.bcb-effect-shine-lift > .bcb-menu-club > a:hover {
    transform: translateY(calc(var(--bcb-lift, 2px) * -1));
}

.bcb-modern-menu.bcb-effect-scale > .bcb-menu-club > a:hover {
    transform: scale(var(--bcb-scale, 1.03));
}

.bcb-modern-menu.bcb-effect-glow > .bcb-menu-club > a:hover {
    filter: drop-shadow(0 0 11px var(--bcb-secondary-shadow, rgba(255,122,0,.20)));
}

.bcb-modern-menu.bcb-effect-none > .bcb-menu-club > a:hover {
    transform: none;
    filter: none;
}

.bcb-modern-menu.bcb-effect-shine > .bcb-menu-club > a::before,
.bcb-modern-menu.bcb-effect-shine-lift > .bcb-menu-club > a::before {
    content: "";
    position: absolute;
    top: -120%;
    left: -42%;
    width: 26%;
    height: 360%;
    background: rgba(255,255,255,var(--bcb-shine,.28));
    transform: rotate(24deg) translateX(-230%);
    transition: transform calc(var(--bcb-transition, 220ms) * 2.5) cubic-bezier(.2,.8,.2,1);
    pointer-events: none;
}

.bcb-modern-menu.bcb-effect-shine > .bcb-menu-club > a:hover::before,
.bcb-modern-menu.bcb-effect-shine-lift > .bcb-menu-club > a:hover::before {
    transform: rotate(24deg) translateX(520%);
}

/* ---------- Public / club separator ---------- */
@media (min-width: 981px) {
    .bcb-modern-menu > .bcb-club-first {
        margin-left: var(--bcb-separator-gap, 24px) !important;
    }

    .bcb-modern-menu > .bcb-club-first::before {
        content: "";
        position: absolute;
        top: 50%;
        left: calc((var(--bcb-separator-gap, 24px) / -2) - .5px);
        display: var(--bcb-separator-display, block);
        width: 1px;
        height: var(--bcb-separator-height, 28px);
        border-radius: 99px;
        background: linear-gradient(180deg, transparent, var(--bcb-separator-color, rgba(255,122,0,.58)), transparent);
        transform: translateY(-50%);
        pointer-events: none;
    }
}

/* ---------- Dropdowns ---------- */
.bcb-modern-menu .bcb-menu-item .sub-menu {
    border-top: 0 !important;
    border-radius: var(--bcb-submenu-radius, 16px);
    box-shadow: 0 18px 55px var(--bcb-submenu-shadow, rgba(12,15,20,.16));
    overflow: hidden;
}

.bcb-modern-menu .bcb-menu-item .sub-menu a {
    border-radius: 9px;
    transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.bcb-modern-menu .bcb-menu-item .sub-menu a:hover {
    background: var(--bcb-submenu-hover, rgba(255,122,0,.09));
    color: var(--bcb-menu-orange) !important;
    transform: translateX(var(--bcb-submenu-translate, 2px));
}

/* ---------- Badges ---------- */
.bcb-menu-badge {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    margin-left: 2px;
    padding: 2px 7px;
    border-radius: var(--bcb-badge-radius, 999px);
    background: var(--bcb-badge-bg, #fff);
    color: var(--bcb-badge-text, #ff5b00);
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* ---------- Divi 5 mobile: preserve Divi's panel, only style its contents ---------- */
@media (max-width: 980px) {
    .bcb-modern-menu.et_mobile_menu {
        box-sizing: border-box;
        padding-bottom: 16px !important;
    }

    .bcb-modern-menu.et_mobile_menu > .bcb-menu-item,
    .et_mobile_menu.bcb-modern-menu > .bcb-menu-item {
        width: auto !important;
        max-width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }

    .bcb-modern-menu.et_mobile_menu > .bcb-menu-public > a,
    .et_mobile_menu.bcb-modern-menu > .bcb-menu-public > a {
        width: calc(100% - (var(--bcb-mobile-margin-x, 8px) * 2)) !important;
        height: auto !important;
        min-height: var(--bcb-public-height, 44px) !important;
        max-height: none !important;
        margin: 2px var(--bcb-mobile-margin-x, 8px);
        padding: 13px var(--bcb-mobile-pad-x, 15px) !important;
        justify-content: flex-start;
        border-radius: var(--bcb-mobile-public-radius, 12px);
    }

    .bcb-modern-menu.et_mobile_menu > .bcb-club-first,
    .et_mobile_menu.bcb-modern-menu > .bcb-club-first {
        position: relative;
        margin-top: var(--bcb-mobile-section-gap, 22px) !important;
        padding-top: 40px !important;
        border-top: 1px solid var(--bcb-secondary-border, rgba(255,122,0,.20)) !important;
    }

    .bcb-modern-menu.et_mobile_menu > .bcb-club-first::before,
    .et_mobile_menu.bcb-modern-menu > .bcb-club-first::before {
        content: var(--bcb-mobile-label, "ESPACE CLUB");
        position: absolute;
        top: 8px;
        left: calc(var(--bcb-mobile-margin-x, 8px) + 6px);
        display: inline-flex;
        align-items: center;
        min-height: 18px;
        padding: 2px 8px;
        border: 1px solid var(--bcb-secondary-border, rgba(255,122,0,.23));
        border-radius: 999px;
        background: var(--bcb-secondary-bg, rgba(255,122,0,.08));
        color: var(--bcb-secondary-text, var(--bcb-menu-orange));
        font-size: 10px;
        font-weight: 900;
        line-height: 1.2;
        letter-spacing: .11em;
        pointer-events: none;
    }

    .bcb-modern-menu.et_mobile_menu > .bcb-menu-club > a,
    .et_mobile_menu.bcb-modern-menu > .bcb-menu-club > a {
        height: var(--bcb-mobile-height, 50px) !important;
        min-height: var(--bcb-mobile-height, 50px) !important;
        max-height: var(--bcb-mobile-height, 50px) !important;
        margin: var(--bcb-mobile-spacing, 7px) var(--bcb-mobile-margin-x, 8px);
        padding: 0 var(--bcb-mobile-pad-x, 15px) !important;
        border-radius: var(--bcb-mobile-radius, 14px);
        justify-content: flex-start;
        font-weight: 800;
    }

    .bcb-modern-menu.et_mobile_menu > .bcb-menu-club-primary > a::after,
    .et_mobile_menu.bcb-modern-menu > .bcb-menu-club-primary > a::after {
        margin-left: auto;
    }

}

/* Touchscreens: no sticky hover transforms or extra glow. */
@media (max-width: 980px) and (hover: none), (max-width: 980px) and (pointer: coarse) {
    .bcb-modern-menu.et_mobile_menu > .bcb-menu-club > a:hover {
        transform: none !important;
        filter: none !important;
    }
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
    .bcb-modern-menu > .bcb-menu-item > a,
    .bcb-modern-menu > .bcb-menu-club > a::before {
        transition: none !important;
    }

    .bcb-modern-menu > .bcb-menu-club > a:hover {
        transform: none !important;
    }
}

/* User-requested Divi 5 header-bar breathing room. */
.et_pb_section_0_tb_header .et_pb_menu_inner_container {
    position: relative;
    overflow: visible !important;
    margin-top: 10px;
    margin-bottom: 10px;
}