/*
 * ENERGY 106 — SHARED VIBE MOBILE HEADER
 * Used by homepage and inner public pages.
 * Desktop styles are not affected.
 */

@media screen and (max-width: 700px) {
/* -------------------------------------------
       MOBILE HEADER
       ------------------------------------------- */

    body.vibe-site .vibe-header {
        background: #21082e;
    }

    body.vibe-site .vibe-header__top {
        background: #21082e !important;
        border-bottom: 2px solid var(--e106-pink, #ed1584);
    }

    body.vibe-site .vibe-header__top-inner {
        width: calc(100% - 24px) !important;
        min-height: 66px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center;
        gap: 8px !important;
        margin-inline: auto;
    }

    body.vibe-site .vibe-logo {
        width: fit-content;
        max-width: min(56vw, 210px) !important;
        min-width: 0;
    }

    body.vibe-site .vibe-logo__image {
        display: block;
        width: auto !important;
        max-width: 100% !important;
        max-height: 43px !important;
        object-fit: contain;
    }

    body.vibe-site .vibe-header__actions {
        grid-column: 2 !important;
        display: flex;
        align-items: center;
        gap: 9px !important;
    }

    body.vibe-site .vibe-header__studio-action {
        display: none !important;
    }

    /* Circular mobile listening button */

    body.vibe-site .vibe-header__actions
    .vibe-listen-live--top {
        order: 1;
        display: inline-flex !important;
        justify-content: center;
        align-items: center;
        flex: 0 0 39px;
        width: 39px !important;
        min-width: 39px;
        height: 39px;
        min-height: 39px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: var(--e106-pink, #ed1584) !important;
        color: #ffffff !important;
        box-shadow: none !important;
    }

    body.vibe-site .vibe-header__actions
    .vibe-listen-live--top > span:last-child {
        display: none !important;
    }

    body.vibe-site .vibe-header__actions
    .vibe-listen-live--top .vibe-listen-live__icon,
    body.vibe-site .vibe-header__actions
    .vibe-listen-live--top .vibe-listen-live__icon svg {
        width: 32px;
        height: 32px;
}

    /* Existing navigation toggle, restyled */

    body.vibe-site .vibe-header__actions
    .vibe-menu-toggle {
        order: 2;
        display: grid !important;
        place-items: center;
        flex: 0 0 42px;
        width: 42px !important;
        height: 43px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 4px;
        background: transparent !important;
        color: #ffffff !important;
        box-shadow: none !important;
    }

    body.vibe-site .vibe-menu-toggle svg {
        width: 27px;
        height: 27px;
        stroke-width: 2.4;
    }

    body.vibe-site .vibe-navigation {
        top: 66px !important;
        right: 0;
        left: 0;
        z-index: 80;
        max-height: 75vh;
        overflow-y: auto;
        background: #21082e !important;
        border-bottom: 1px solid var(--e106-purple, #763493);
    }

    body.vibe-site .vibe-navigation__item {
        border-bottom-color: #472056;
    }

    body.vibe-site .vibe-navigation__link,
    body.vibe-site .vibe-navigation__dropdown a {
        color: #ffffff !important;
    }

    body.vibe-site .vibe-navigation__dropdown {
        background: #2d103d !important;
    }
}

@media screen and (max-width: 359px) {
    body.vibe-site .vibe-header__actions {
        gap: 4px !important;
    }
}