/**
 * Fichier  : /menus/main/assets/css/elements.css
 * Fonction : style des éléments du menu
 */


/* ==================================================
   MENU
================================================== */

.menu {
    --menu-gap: 3em;
}


/* ==================================================
   LOGO
================================================== */

.menu .logo {
    position: relative;
}

.menu .logo {
    width: auto;
    height: 100%;
}

.menu .logo {
    padding: 0 18px;
}

.menu .logo a {
    width: auto;
    height: 100%;
}

.menu .logo a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.menu .logo a img {
    width: auto;
    height: 60%;
}


/* ==================================================
   BUTTONS
================================================== */

.menu .buttons {
    position: relative;
}

.menu .buttons {
    padding: 0;
}

.menu .buttons {
    display: flex;
    align-items: center;
    gap: var(--menu-gap);
}

.menu .buttons {
    list-style: none;
}

.menu .buttons li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
}

.menu .buttons li svg {
    width: auto;
    height: 20px;
}

.menu .buttons li svg {
    margin-top: -2px;
}

.menu .buttons li a {
    font-family: 'content-font';
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 1px;
}

.menu .buttons li svg,
.menu .buttons li a {
    color: var(--color-white);
}


/* ==================================================
   PUNCHTIME TV
================================================== */

.menu .buttons .punchtimetv {
    height: var(--button-height);
}

.menu .buttons .punchtimetv {
    padding: 0 20px;
}

.menu .buttons .punchtimetv {
    background: var(--gradient-primary);
    border-radius: var(--button-radius);
    box-shadow:
        0 10px 26px rgba(233,64,27,.30),
        0 0 18px rgba(255,123,0,.16),
        inset 0 1px 0 rgba(255,255,255,.16);
}

.menu .buttons .punchtimetv {
    transition: transform var(--transition-soft), box-shadow var(--transition-soft);
}

.menu .buttons .punchtimetv:hover {
    box-shadow: var(--shadow-primary-hover);
}

.menu .buttons .punchtimetv:hover {
    transform: translateY(-2px);
}


/* ==================================================
   SPORT BUSINESS
================================================== */

.menu .buttons .sport-business {
    position: relative;
}


/* ==================================================
   SPORT BUSINESS SUBMENU
================================================== */

.menu .sport-business__submenu {
    position: absolute;
    top: calc(100% + 1.3em);
    left: 50%;
}

.menu .sport-business__submenu {
    width: max-content;
    min-width: 220px;
}

.menu .sport-business__submenu {
    box-sizing: border-box;
}

.menu .sport-business__submenu {
    padding: .7em;
}

.menu .sport-business__submenu {
    visibility: hidden;
}

.menu .sport-business__submenu {
    background: var(--menu-background);
    border: 1px solid var(--color-border);
    backdrop-filter: var(--glass-blur-soft);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, .28);
    list-style: none;
}

.menu .sport-business__submenu {
    opacity: 0;
    pointer-events: none;
}

.menu .sport-business__submenu {
    transform: translateX(-50%) translateY(10px);
}

.menu .sport-business__submenu {
    transition:
        opacity var(--transition-soft),
        transform var(--transition-soft),
        visibility var(--transition-soft);
}


/* ==================================================
   SUBMENU BRIDGE
================================================== */

.menu .sport-business__submenu::before {
    content: "";
}

.menu .sport-business__submenu::before {
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
}

.menu .sport-business__submenu::before {
    height: 1.3em;
}


/* ==================================================
   SUBMENU ITEM
================================================== */

.menu .buttons .sport-business__submenu li {
    display: block;
}


/* ==================================================
   SUBMENU LINK
================================================== */

.menu .buttons .sport-business__submenu li a {
    width: 100%;
}

.menu .buttons .sport-business__submenu li a {
    box-sizing: border-box;
}

.menu .buttons .sport-business__submenu li a {
    padding: 1.1em 1.3em;
}

.menu .buttons .sport-business__submenu li a {
    display: flex;
    align-items: center;
}

.menu .buttons .sport-business__submenu li a {
    font-family: 'content-font';
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-white);
}

.menu .buttons .sport-business__submenu li a {
    transition:
        background var(--transition-soft),
        color var(--transition-soft),
        padding-left var(--transition-soft);
}


/* ==================================================
   SUBMENU HOVER
================================================== */

@media (hover: hover) and (pointer: fine) {

    .menu .sport-business:hover .sport-business__submenu {
        visibility: visible;
    }

.menu .sport-business:hover .sport-business__submenu {
        opacity: 1;
        pointer-events: auto;
    }

.menu .sport-business:hover .sport-business__submenu {
        transform: translateX(-50%) translateY(0);
    }

    .menu .sport-business__submenu li a:hover {
        padding-left: 1.7em;
    }

.menu .sport-business__submenu li a:hover {
        background: var(--glass-background-soft);
    }

.menu .sport-business__submenu li a:hover {
        color: var(--color-primary);
    }

}


/* ==================================================
   RESPONSIVE
================================================== */

@media screen and (max-width: 1024px) {

    .menu {
        --menu-gap: 2em;
    }

    .menu .logo a img {
        height: 65%;
    }

    .menu .buttons {
        display: none;
    }

}