/* ═══════════════════════════════════════════════════════════════
   RRRH Hero Plugin — hero.css
   Palette: Warm Black #0d0d0a / Saddle Brown #8B4513 / Aged Gold #8B6914 / Forest Green #3a6a28
   ═══════════════════════════════════════════════════════════════ */

/* ── Global: prevent content hiding behind fixed player bar ── */
body { padding-bottom: 72px !important; }

/* ── Hero section ── */
.rrrh-hero {
    position: relative;
    background: #0d0d0a;
    color: #e8d5a0;
    overflow: hidden;
    padding: 40px 40px 48px;
    display: flex;
    flex-direction: column;
}

/* Rasta stripe accents — diagonal bands at very low opacity */
.rrrh-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        118deg,
        transparent              0px,
        transparent              60px,
        rgba(58, 106, 40, 0.06)  60px,
        rgba(58, 106, 40, 0.06)  62px,
        transparent              62px,
        transparent              120px,
        rgba(139, 105, 20, 0.06) 120px,
        rgba(139, 105, 20, 0.06) 122px,
        transparent              122px,
        transparent              180px,
        rgba(139, 69, 19, 0.06)  180px,
        rgba(139, 69, 19, 0.06)  182px,
        transparent              182px,
        transparent              240px
    );
    pointer-events: none;
    z-index: 0;
}

/* Rasta gradient divider — bottom edge of hero */
.rrrh-hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #3a6a28 0%, #8B6914 50%, #8B4513 100%);
    opacity: .6;
    pointer-events: none;
    z-index: 2;
}

/* Watermark — theme can supply via background-image on this class */
.rrrh-hero__bg-watermark {
    position: absolute;
    inset: 0;
    background-image: var(--rrrh-hero-watermark, none);
    background-size: 50%;
    background-position: center right;
    background-repeat: no-repeat;
    opacity: .04;
    pointer-events: none;
}

/* ── Left column — defined in new section above ── */

.rrrh-hero__station-name {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 900;
    letter-spacing: 1px;
    color: #e8d5a0;
    line-height: 1.1;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.rrrh-hero__tagline {
    font-size: 1rem;
    color: #8B6914;
    font-style: italic;
    letter-spacing: .5px;
    margin: 0 0 4px;
}

.rrrh-hero__subline {
    font-size: .85rem;
    color: #6a5030;
    margin: 0 0 28px;
}

/* DJ Card */
.rrrh-hero__dj-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid #5a3e1b;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    backdrop-filter: blur(6px);
    overflow: visible;   /* don't clip the photo */
}

.rrrh-hero__dj-photo-wrap {
    position: relative;
    flex-shrink: 0;
    width: 88px;
    height: 88px;
}

.rrrh-hero__dj-photo {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: contain;
    aspect-ratio: 1/1;
    border: 2px solid #8B4513;
    background: #1a1208;
    display: block;
    image-rendering: -webkit-optimize-contrast;
}

.rrrh-hero__live-dot {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 14px;
    height: 14px;
    background: #4a9a30;
    border-radius: 50%;
    border: 2px solid #0d0d0a;
    box-shadow: 0 0 0 0 rgba(74,154,48,.6);
    animation: rrrh-pulse 2s infinite;
}

@keyframes rrrh-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(74,154,48,.6); }
    70%  { box-shadow: 0 0 0 8px rgba(74,154,48,0); }
    100% { box-shadow: 0 0 0 0 rgba(74,154,48,0); }
}

.rrrh-hero__dj-info { min-width: 0; }
.rrrh-hero__on-air-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #4a9a30;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.rrrh-hero__show-name {
    font-size: 1.15rem;
    font-weight: 800;
    color: #e8d5a0;
    white-space: normal;      /* was nowrap — was clipping "Roots Rock Reggae Hawaii" */
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rrrh-hero__dj-name {
    font-size: .9rem;
    color: #9a7850;
    margin-top: 2px;
}

/* Up Next strip */
.rrrh-hero__up-next {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255,255,255,.03);
    border: 1px solid #3d2b10;
    border-radius: 8px;
}
.rrrh-hero__up-next-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #8B6914;
    white-space: nowrap;
}
.rrrh-hero__up-next-photo {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: contain; aspect-ratio: 1/1;
    border: 1px solid #5a3e1b;
    background: #1a1208;
    image-rendering: -webkit-optimize-contrast;
}
.rrrh-hero__up-next-show { color: #c8a870; font-size: .9rem; font-weight: 600; }

/* Artist — allow two lines like the title */
.rrrh-hero__np-artist {
    font-size: .85rem;
    font-weight: 600;
    color: #8B6914;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}

/* Vertical rasta divider between left and right columns */
.rrrh-hero__inner {
    display: flex;
    gap: 0;                  /* remove gap — divider handles spacing */
    align-items: flex-start;
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
}

.rrrh-hero__left {
    flex: 1;
    min-width: 0;
    padding-right: 40px;
}

.rrrh-hero__right {
    flex: 0 0 280px;
    padding-left: 40px;
    border-left: 1px solid transparent;
    border-image: linear-gradient(
        to bottom,
        transparent 0%,
        #3a6a28 15%,
        #8B6914 50%,
        #8B4513 85%,
        transparent 100%
    ) 1;
}

/* Active nav item — gold underline, not filled pill */
.current-menu-item > a,
.current_page_item > a,
.current-menu-item > a:hover,
.current_page_item > a:hover {
    background: transparent !important;
    color: #8B6914 !important;
    border-bottom: 2px solid #8B6914 !important;
    padding-bottom: 2px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.rrrh-hero__now-playing-card {
    background: rgba(139,69,19,.08);
    border: 1px solid #5a3e1b;
    border-radius: 12px;
    padding: 16px;
    backdrop-filter: blur(6px);
    text-align: center;
}

.rrrh-hero__np-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #8B6914;
    text-transform: uppercase;
    margin-bottom: 14px;
}

/* Album art container */
.rrrh-hero__np-art-wrap {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto 16px;
}

.rrrh-hero__np-art {
    width: 200px;
    height: 200px;
    border-radius: 8px;
    object-fit: cover;
    display: block;
    border: 2px solid #3d2b10;
    background: #1a1208;
    box-shadow: 0 8px 32px rgba(0,0,0,.6);
    transition: opacity 0.3s ease;
}

/* Subtle spinner overlay while art loads */
.rrrh-hero__np-art-spinner {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: rgba(13,13,10,.6);
    display: none;
}
.rrrh-hero__np-art-spinner.loading { display: block; }

/* Track info — large and bold */
.rrrh-hero__np-track { text-align: center; }

.rrrh-hero__np-artist {
    font-size: .85rem;
    font-weight: 600;
    color: #8B6914;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rrrh-hero__np-title {
    font-size: 1.25rem;
    font-weight: 900;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 6px;
    /* Allow 2 lines before truncating */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.rrrh-hero__np-album {
    font-size: .75rem;
    color: #5a3e1b;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 12px;
}

.rrrh-hero__listener-count {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: .8rem;
    color: #9a7850;
    margin-top: 8px;
}
.rrrh-hero__listener-dot {
    width: 8px; height: 8px;
    background: #4a9a30;
    border-radius: 50%;
    animation: rrrh-pulse 2s infinite;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════
   ANCHORED PLAYER BAR
   ═══════════════════════════════════════════════ */
.rrrh-player-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #1a0f06;
    border-top: none;
    box-shadow: 0 -4px 24px rgba(0,0,0,.7);
}

/* Rasta gradient divider line — top of player bar */
.rrrh-player-bar::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg, #3a6a28 0%, #8B6914 50%, #8B4513 100%);
}

.rrrh-player-bar__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.rrrh-player-bar__brand { flex-shrink: 0; }
.rrrh-player-bar__station {
    font-size: .75rem;
    font-weight: 900;
    letter-spacing: 3px;
    color: #8B6914;
    text-transform: uppercase;
}

/* Play button — green pill, matches hero Listen Now button */
.rrrh-player-bar__play-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 50px;
    background: #3a6a28 !important;
    border: none !important;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .2s, transform .1s;
    box-shadow: 0 2px 12px rgba(58,106,40,.4);
    height: auto;
    width: auto;
}
.rrrh-player-bar__play-btn:hover { background: #4a8a35 !important; transform: scale(1.03); }
.rrrh-player-bar__play-btn:active { transform: scale(.97); }
.rrrh-player-bar__play-btn svg {
    width: 14px; height: 14px;
    fill: #ffffff !important;
    display: block;
    pointer-events: none;
    flex-shrink: 0;
}
.rrrh-player-bar__play-btn.is-playing { background: #4a8a35 !important; }
.rrrh-player-bar__play-btn.is-playing .rrrh-icon-play  { display: none !important; }
.rrrh-player-bar__play-btn.is-playing .rrrh-icon-pause { display: block !important; }

/* Track info */
.rrrh-player-bar__track {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.rrrh-player-bar__artist {
    font-size: .75rem;
    color: #9a7850;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rrrh-player-bar__title {
    font-size: .9rem;
    font-weight: 700;
    color: #e8d5a0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Volume */
.rrrh-player-bar__volume {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.rrrh-vol-icon { width: 18px; height: 18px; fill: #6a5030; }
#rrrh-volume {
    width: 90px;
    accent-color: #8B4513;
    cursor: pointer;
}

.rrrh-player-bar__play-label {
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .5px;
    color: #fff;
    text-transform: uppercase;
}

/* Live badge */
.rrrh-player-bar__live-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #4a9a30;
    text-transform: uppercase;
    flex-shrink: 0;
}
.rrrh-player-bar__live-dot {
    width: 7px; height: 7px;
    background: #4a9a30;
    border-radius: 50%;
    animation: rrrh-pulse 2s infinite;
}

/* EQ Visualizer bars */
.rrrh-player-bar__eq {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 24px;
    flex-shrink: 0;
}
.rrrh-eq-bar {
    width: 4px;
    border-radius: 2px 2px 0 0;
    transform-origin: bottom;
    transition: height 0.12s ease;
    min-height: 3px;
}
.rrrh-eq-bar:nth-child(1) { background: #3a6a28; }
.rrrh-eq-bar:nth-child(2) { background: #4a8a32; }
.rrrh-eq-bar:nth-child(3) { background: #8B6914; }
.rrrh-eq-bar:nth-child(4) { background: #a07a1a; }
.rrrh-eq-bar:nth-child(5) { background: #8B4513; }
.rrrh-eq-bar:nth-child(6) { background: #8B6914; }
.rrrh-eq-bar:nth-child(7) { background: #3a6a28; }

/* When paused — all bars drop to minimum */
.rrrh-player-bar__eq.is-paused .rrrh-eq-bar {
    height: 3px !important;
    transition: height 0.4s ease;
}

/* Listen Now button */
.rrrh-hero__listen-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 13px 28px;
    background: #3a6a28 !important;
    border: none !important;
    border-radius: 50px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .5px;
    color: #fff !important;
    text-transform: uppercase;
    transition: background .2s, transform .1s, box-shadow .2s;
    box-shadow: 0 4px 20px rgba(58,106,40,.4);
}
.rrrh-hero__listen-btn:hover {
    background: #4a8a35 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(58,106,40,.5);
}
.rrrh-hero__listen-btn:active { transform: scale(.98); }
.rrrh-hero__listen-btn svg {
    width: 16px; height: 16px;
    fill: #fff !important;
    flex-shrink: 0;
    transition: transform .15s;
}
.rrrh-hero__listen-btn:hover svg { transform: scale(1.15); }

/* Pause state */
.rrrh-hero__listen-btn.is-playing { background: #5a3e1b !important; box-shadow: 0 4px 20px rgba(139,69,19,.4); }
.rrrh-hero__listen-btn.is-playing:hover { background: #6a4e2b !important; }
.rrrh-hero__listen-btn.is-playing svg polygon { display: none; }
.rrrh-hero__listen-btn.is-playing::before {
    content: '❚❚';
    font-size: .75rem;
    letter-spacing: 2px;
    color: #fff;
    margin-right: -6px;
}
@media (max-width: 768px) {
    .rrrh-hero__inner { flex-direction: column; gap: 24px; }
    .rrrh-hero__left  { padding-right: 0; }
    .rrrh-hero__right {
        flex: none; width: 100%;
        padding-left: 0;
        border-left: none;
        border-top: 1px solid transparent;
        border-image: linear-gradient(
            to right,
            transparent 0%,
            #3a6a28 15%,
            #8B6914 50%,
            #8B4513 85%,
            transparent 100%
        ) 1;
        padding-top: 24px;
    }
    .rrrh-hero { padding: 28px 20px 36px; }
    #rrrh-volume { width: 60px; }
    .rrrh-player-bar__volume .rrrh-vol-icon,
    .rrrh-player-bar__brand,
    .rrrh-player-bar__eq { display: none; }
}

@media (max-width: 480px) {
    .rrrh-player-bar__live-badge { display: none; }
}