/*
 RL-E106-CONNECTION-HOME-THEME-V1

 Energy 106 homepage only.
 Reuse existing Vibe homepage design variables.
 No feed, player or nickname behaviour changes.
*/

body.vibe-site .e106-crew-ad-layout {

    --connection-bg:
        var(--vibe-bg-card, #250638);

    --connection-border:
        var(--vibe-border-medium, #522761);

    --connection-radius:
        var(--vibe-card-radius, 5px);

    --connection-pink:
        var(--vibe-primary, #ed1584);

    --connection-white:
        var(--vibe-text-primary, #ffffff);

    --connection-muted:
        var(--vibe-text-muted, #d2bbdc);
}

/* Match the advertising image card to the same border system */

body.vibe-site
.e106-crew-ad-layout > :first-child {
    border: 1px solid var(--connection-border) !important;
    border-radius: var(--connection-radius) !important;
    box-shadow: none !important;
    overflow: hidden;
}

/* Match the entire Connection panel to standard Vibe cards */

body.vibe-site
.e106-crew-ad-layout
.ecv3.ecv3--reference {
    background: var(--connection-bg) !important;
    border: 1px solid var(--connection-border) !important;
    border-radius: var(--connection-radius) !important;
    box-shadow: none !important;
    color: var(--connection-white) !important;
    overflow: hidden;
}

/* Remove the mismatched separate purple background */

body.vibe-site
.e106-crew-ad-layout
.ecv3.ecv3--reference .ecv3__content,

body.vibe-site
.e106-crew-ad-layout
.ecv3.ecv3--reference .ecv3__panel,

body.vibe-site
.e106-crew-ad-layout
.ecv3.ecv3--reference .ecv3__promo {
    background: var(--connection-bg) !important;
    box-shadow: none !important;
}

/* Header divider */

body.vibe-site
.e106-crew-ad-layout
.ecv3.ecv3--reference .ecv3__promo {
    border-bottom: 1px solid var(--connection-border) !important;
}

/* Use the same heading typeface and white as the homepage */

body.vibe-site
.e106-crew-ad-layout
.ecv3.ecv3--reference .ecv3__brand {
    color: var(--connection-white) !important;
    font-family: var(--rl-heading-font, inherit) !important;
    font-weight: 900 !important;
}

/* Pink heading accent */

body.vibe-site
.e106-crew-ad-layout
.ecv3.ecv3--reference .ecv3__brand::before,

body.vibe-site
.e106-crew-ad-layout
.ecv3.ecv3--reference .ecv3__brand::after {
    background-color: var(--connection-pink) !important;
}

/* Align activity dividers and other internal lines */

body.vibe-site
.e106-crew-ad-layout
.ecv3.ecv3--reference .ecv3__item,

body.vibe-site
.e106-crew-ad-layout
.ecv3.ecv3--reference .ecv3__tabs,

body.vibe-site
.e106-crew-ad-layout
.ecv3.ecv3--reference .ecv3r6__footer {
    border-color: var(--connection-border) !important;
}

/* Listener nicknames */

body.vibe-site
.e106-crew-ad-layout
.ecv3.ecv3--reference .ecv3__detail a {
    color: var(--connection-white) !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
}

body.vibe-site
.e106-crew-ad-layout
.ecv3.ecv3--reference .ecv3__detail a:hover,
body.vibe-site
.e106-crew-ad-layout
.ecv3.ecv3--reference .ecv3__detail a:focus-visible {
    color: var(--connection-pink) !important;
    text-decoration: none !important;
    border-bottom: 0 !important;
}

/* Supporting listener text */

body.vibe-site
.e106-crew-ad-layout
.ecv3.ecv3--reference .ecv3__detail p,

body.vibe-site
.e106-crew-ad-layout
.ecv3.ecv3--reference .ecv3__time {
    color: var(--connection-muted) !important;
}

/* Matching accents for listener icons and actions */

body.vibe-site
.e106-crew-ad-layout
.ecv3.ecv3--reference .ecv3__icon,

body.vibe-site
.e106-crew-ad-layout
.ecv3.ecv3--reference .ecv3__icon svg,

body.vibe-site
.e106-crew-ad-layout
.ecv3.ecv3--reference .ecv3r6__more {
    color: var(--connection-pink) !important;
}

/* About and nickname actions */

body.vibe-site
.e106-crew-ad-layout
.ecv3.ecv3--reference .ecv3__tab,

body.vibe-site
.e106-crew-ad-layout
.ecv3.ecv3--reference .ecv3__profile-edit {
    color: var(--connection-muted) !important;
}

body.vibe-site
.e106-crew-ad-layout
.ecv3.ecv3--reference .ecv3__tab:hover,

body.vibe-site
.e106-crew-ad-layout
.ecv3.ecv3--reference .ecv3__profile-edit:hover {
    color: var(--connection-pink) !important;
}

/* Mobile keeps its current stacking and dimensions.
   These colour and border settings also apply on mobile. */