/* #header is only position:absolute (floating over the hero banner) from
   992px up (site.min.css). Below that it must stay in normal flow so it
   never sits on top of the page content on phones/tablets. Forced with
   !important as a safety net in case any other rule (plugin, customizer
   CSS we can't see from here) reasserts an absolute/fixed position. */
@media (max-width: 991.98px) {
    #header {
        position: relative !important;
        height: auto;
        top: auto;
        z-index: 1000 !important;
    }
}

/* Homepage hero banner: on desktop it's a fixed 80vh diagonal panel with the
   channel grid absolutely centered inside it (4 tiles per row, fits easily).
   On mobile the grid drops to 2 tiles per row (6 rows), which is taller than
   80vh, so the absolutely-positioned content overflowed upward and covered
   the header, hiding/blocking clicks on the first row (Radio Tirana 1 & 2). */
@media (max-width: 991.98px) {
    .banner {
        height: auto;
        min-height: 0;
        padding-top: 24px;
        padding-bottom: 32px;
        clip-path: none;
        -webkit-clip-path: none;
    }

    .banner .banner-content {
        position: static;
        transform: none;
        top: auto;
    }
}


/* Isolated radio controls: one audio element, one set of buttons. */
body { padding-bottom: 110px; }
#rtsh-radio-player { position: fixed !important; display: block; left: 5%; right: 5%; bottom: max(10px, env(safe-area-inset-bottom)); width: 90% !important; z-index: 99999; background: #14232a; color: #fff; padding: 12px 20px; border-radius: 6px; box-shadow: 0 -4px 24px #0005; box-sizing: border-box; }
#rtsh-radio-player audio { display: none !important; }
#rtsh-radio-player .rtsh-player-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; min-height: 56px; }
#rtsh-radio-player .rtsh-player-heading { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
#radio_title { color: #fff; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#rtsh-radio-player .rtsh-live { color: #3cf; font-size: 10px; letter-spacing: 2px; }
#rtsh-radio-player .rtsh-player-transport, #rtsh-radio-player .rtsh-player-navigation { display: flex; align-items: center; gap: 8px; }
#rtsh-radio-player .rtsh-player-navigation { justify-content: flex-end; }
#rtsh-radio-player button { appearance: none; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: #fff; border: 0; border-radius: 5px; min-width: 44px; min-height: 44px; margin: 0; padding: 8px; cursor: pointer; font: 20px Arial, sans-serif; }
#rtsh-radio-player button:hover, #rtsh-radio-player button[aria-pressed="true"] { color: #3cf; background: #ffffff0d; }
#rtsh-radio-player #rtsh-play-toggle { color: #3cf; width: 56px; height: 56px; font-size: 27px; }
#rtsh-radio-player button:focus-visible, #radio-volume:focus-visible { outline: 2px solid #3cf; outline-offset: 2px; }
#rtsh-radio-player #radio-channels-toggle { font-size: 14px; }
#radio-volume { width: 72px; accent-color: #3cf; }
#rtsh-channel-list { position: absolute; bottom: calc(100% + 8px); left: 0; right: 0; background: #14232a; border-radius: 6px; padding: 12px; max-height: 50vh; overflow-y: auto; box-shadow: 0 -4px 24px #0005; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
#rtsh-channel-list[hidden], #radio-message[hidden] { display: none !important; }
#rtsh-radio-player #rtsh-channel-list button { font-size: 14px; text-align: left; justify-content: flex-start; border: 1px solid #ffffff1a; }
#radio-message { margin: 6px 0 0; color: #fff; font-size: 12px; }
@media (max-width: 767.98px) {
 #rtsh-radio-player { left: 0; right: 0; bottom: 0; width: 100% !important; border-radius: 0; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
 #rtsh-radio-player .rtsh-player-bar { grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px; }
 #rtsh-radio-player .rtsh-player-transport, #rtsh-radio-player .rtsh-player-navigation { gap: 0; }
 #rtsh-radio-player #rtsh-play-toggle { width: 44px; height: 44px; }
 #radio_title { font-size: 12px; }
 #radio-volume, #rtsh-radio-player #radio-mute { display: none; }
 #rtsh-radio-player #radio-channels-toggle { font-size: 12px; }
 #rtsh-channel-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}