/**
 * Rebel Monkey Ride - Header
 */


/* =========================================================
 * Base
 * ========================================================= */

.rmr-header {
    position: relative;
    z-index: var(--rmr-z-header);
    width: 100%;
    background: var(--rmr-color-header);
}

.rmr-header__container {
    display: flex;
    align-items: center;
    gap: var(--rmr-space-lg);

    width: min(
        calc(100% - (2 * var(--rmr-space-lg))),
        var(--rmr-container-width)
    );

    min-height: var(--rmr-header-height);
    margin-inline: auto;
}

.rmr-header__brand {
    flex: 0 0 auto;
}

.rmr-header__logo {
    display: flex;
    align-items: center;
}

.rmr-header__logo-image {
    display: block;
    width: auto;
    max-height: 58px;
}

.rmr-header__navigation {
    flex: 1 1 auto;
}

.rmr-header__menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--rmr-space-lg);

    margin: 0;
    padding: 0;

    list-style: none;
}

.rmr-header__menu a {
    color: var(--rmr-color-white);
    text-decoration: none;
}

.rmr-header__actions {
    display: flex;
    align-items: center;
    gap: var(--rmr-space-md);
}

.rmr-header__cart {
    display: inline-flex;
    align-items: center;
    gap: var(--rmr-space-xs);
    flex: 0 0 auto;

    color: var(--rmr-color-white);
    text-decoration: none;
}

.rmr-header__cart-icon {
    display: block;
    width: 20px;
    height: 20px;
    min-width: 20px;
    flex: 0 0 20px;

    color: currentColor;
}

.rmr-header__cart-count {
    display: inline-block;
    line-height: 1;
}


/* =========================================================
 * Menu toggle
 * ========================================================= */

.rmr-header__menu-toggle {
    display: none;
    width: 28px;

    border: 0;
    padding: 0;

    background: transparent;
    color: var(--rmr-color-white);

    cursor: pointer;
}

.rmr-header__menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    margin: 6px 0;

    background: currentColor;

    transition:
        transform var(--rmr-transition-fast),
        opacity var(--rmr-transition-fast);
}

.rmr-header--menu-open .rmr-header__menu-toggle span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.rmr-header--menu-open .rmr-header__menu-toggle span:nth-child(2) {
    opacity: 0;
}

.rmr-header--menu-open .rmr-header__menu-toggle span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}


/* =========================================================
 * Navigation — submenus
 * ========================================================= */

.rmr-header__menu li {
    position: relative;
}

.rmr-header__menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--rmr-z-dropdown);

    display: none;
    min-width: 240px;
    margin: 0;
    padding: var(--rmr-space-sm) 0;

    list-style: none;
    background: var(--rmr-color-header);
}


.rmr-header__menu .sub-menu li {
    width: 100%;
}

.rmr-header__menu .sub-menu a {
    display: block;
    padding: 10px var(--rmr-space-md);

    white-space: nowrap;
}

.rmr-header__menu .sub-menu a:hover,
.rmr-header__menu .sub-menu a:focus {
    background: rgba(255, 255, 255, 0.08);
}

/* Segundo nivel y siguientes */

.rmr-header__menu .sub-menu .sub-menu {
    top: 0;
    left: 100%;
}


/* =========================================================
 * Submenu toggle
 * ========================================================= */

.rmr-header__submenu-toggle {
    display: none;

    border: 0;
    padding: 0;

    background: transparent;
    color: var(--rmr-color-white);

    cursor: pointer;
}


/* =========================================================
 * Variants
 * ========================================================= */

/* Standard
 *
 * Conserva exactamente las medidas de la cabecera existente.
 */

.rmr-header--standard,
.rmr-header--overlay {
    background: var(--rmr-color-header);
}

.rmr-header--standard .rmr-header__container,
.rmr-header--overlay .rmr-header__container {
    min-height: 58px;
    gap: var(--rmr-space-md);
}

.rmr-header--standard .rmr-header__logo-image,
.rmr-header--overlay .rmr-header__logo-image {
    max-height: 42px;
}

.rmr-header--standard .rmr-header__menu,
.rmr-header--overlay .rmr-header__menu {
    gap: 24px;
}

.rmr-header--standard .rmr-header__menu a,
.rmr-header--overlay .rmr-header__menu a {
    font-size: 15px;
    line-height: 1;
}

.rmr-header--standard .rmr-header__actions,
.rmr-header--overlay .rmr-header__actions {
    gap: 12px;
}


/* Hall of Fame overlay
 *
 * El header se renderiza antes de los wrappers de Divi mediante wp_body_open.
 * Solo el archivo Hall lo saca del flujo para superponerlo sobre su hero.
 */

.rmr-header--overlay.rmr-header--context-hall-of-fame {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;

    background: #000;
}

.rmr-header--overlay.rmr-header--context-hall-of-fame::after {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 0;

    height: 80px;

    content: '';
    pointer-events: none;
    background: linear-gradient(
        180deg,
        #000 0%,
        rgba(0, 0, 0, 0.72) 40%,
        rgba(0, 0, 0, 0) 100%
    );
}

.rmr-header--overlay.rmr-header--context-hall-of-fame .rmr-header__container {
    position: relative;
    z-index: 1;
}

/* El admin bar es fijo y no reserva espacio para una cabecera absoluta. */

body.admin-bar .rmr-header--overlay.rmr-header--context-hall-of-fame {
    top: 32px;
}

@media (min-width: 981px) {

    .rmr-header__menu li:hover > .sub-menu,
    .rmr-header__menu li:focus-within > .sub-menu {
        display: block;
    }
}

/* =========================================================
 * Mobile
 * ========================================================= */

@media (max-width: 980px) {

    .rmr-header--overlay.rmr-header--context-hall-of-fame .rmr-header__navigation {
        z-index: var(--rmr-z-dropdown);
        background: var(--rmr-color-header);
    }

    .rmr-header__container {
        position: relative;

        width: calc(100% - (2 * var(--rmr-space-md)));
        gap: var(--rmr-space-md);
    }

    .rmr-header__logo-image {
        max-width: 220px;
    }

      .rmr-header__brand {
        flex: 1 1 auto;
        min-width: 0;
    }

    .rmr-header__actions {
        flex: 0 0 auto;
        margin-left: auto;
    }

    .rmr-header__navigation {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;

        display: none;

        background: var(--rmr-color-header);
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .rmr-header--menu-open .rmr-header__navigation {
        display: block;
    }

    .rmr-header__menu,
    .rmr-header--standard .rmr-header__menu,
    .rmr-header--overlay .rmr-header__menu {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;

        padding: var(--rmr-space-sm) 0;
    }

    .rmr-header__menu li {
        width: 100%;
    }

    .rmr-header__menu a {
        display: block;
        padding: 12px var(--rmr-space-md);
    }

    .rmr-header__actions {
        margin-left: auto;
    }

    .rmr-header__menu-toggle {
        display: block;
    }


    /* Submenus */

    .rmr-header__menu .menu-item-has-children {
        position: relative;
    }

    .rmr-header__menu .sub-menu,
    .rmr-header__menu .sub-menu .sub-menu {
        position: static;

        display: none;
        min-width: 0;
        margin: 0;
        padding: 0;

        background: transparent;
    }

    .rmr-header__menu .rmr-submenu--open > .sub-menu {
        display: block;
    }


    /* Submenu toggle */

    .rmr-header__submenu-toggle {
        position: absolute;
        top: 0;
        right: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 44px;
        height: 39px;
    }

    .rmr-header__submenu-toggle span {
        width: 8px;
        height: 8px;

        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;

        transform: rotate(45deg);

        transition: transform var(--rmr-transition-fast);
    }

    .rmr-header__menu
        .rmr-submenu--open
        > .rmr-header__submenu-toggle
        span {
        transform: rotate(225deg);
    }


    /* Profundidad */

    .rmr-header__menu .sub-menu a {
        padding-left: calc(var(--rmr-space-md) * 2);
    }

    .rmr-header__menu .sub-menu .sub-menu a {
        padding-left: calc(var(--rmr-space-md) * 3);
    }

    .rmr-header__menu .sub-menu .sub-menu .sub-menu a {
        padding-left: calc(var(--rmr-space-md) * 4);
    }

    .rmr-header__cart-icon {
        display: block;
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
    }

    .rmr-header__cart-count {
        line-height: 1;
    }

    /* =========================================================
    * Mobile header bar
    * ========================================================= */

    .rmr-header__brand {
        min-width: 0;
    }

    .rmr-header__logo-image {
        width: auto;
        max-width: 180px;
        height: auto;
    }

    .rmr-header--standard .rmr-header__logo-image,
    .rmr-header--overlay .rmr-header__logo-image {
        max-height: 38px;
    }

    .rmr-header__actions {
        flex: 0 0 auto;
        margin-left: auto;
        gap: var(--rmr-space-sm);
    }

    .rmr-header--standard .rmr-header__actions,
    .rmr-header--overlay .rmr-header__actions {
        gap: var(--rmr-space-sm);
    }

    .rmr-header__languages {
        display: flex;
        align-items: center;
    }

    .rmr-header__cart {
        flex: 0 0 auto;
    }

    .rmr-header__menu-toggle {
        flex: 0 0 28px;
    }
}

@media (max-width: 782px) {

    body.admin-bar .rmr-header--overlay.rmr-header--context-hall-of-fame {
        top: 46px;
    }
}

@media (min-width: 768px) {

    .rmr-header--overlay.rmr-header--context-hall-of-fame::after {
        height: 48px;
        background: linear-gradient(
            180deg,
            #000 0%,
            rgba(0, 0, 0, 0.45) 45%,
            rgba(0, 0, 0, 0) 100%
        );
    }
}

@media (max-width: 767px) {

    .rmr-header--overlay.rmr-header--context-hall-of-fame::after {
        height: 24px;
    }
}

@media (max-width: 600px) {

    .rmr-header__container {
        width: calc(100% - (2 * var(--rmr-space-sm)));
        gap: 6px;
    }

    .rmr-header__logo-image {
        max-width: 150px;
    }

    .rmr-header--standard .rmr-header__logo-image,
    .rmr-header--overlay .rmr-header__logo-image {
        max-height: 34px;
    }

    .rmr-header__actions,
    .rmr-header--standard .rmr-header__actions,
    .rmr-header--overlay .rmr-header__actions {
        gap: 6px;
    }

    .rmr-header__menu-toggle {
        flex: 0 0 24px;
        width: 24px;
        margin-right: 4px;
    }

    .rmr-header__cart-icon {
        width: 18px;
        height: 18px;
        min-width: 18px;
        flex-basis: 18px;
    }
}