/* =============================================
   RADIO BEATWAVE — RESPONSIVE CSS
   ============================================= */

/* =============================================
   MOBILE NAV PANEL (outside container, full-width)
   ============================================= */
.mobile-nav-panel {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #F7F1ED;
    z-index: 9998;
    border-bottom: 2px solid rgba(0,0,0,0.08);
    box-shadow: 0 6px 20px rgba(0,0,0,0.10);
    padding: 20px 24px 24px 24px;
    box-sizing: border-box;
}

.mobile-nav-panel.active {
    display: block;
}

.mobile-nav-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    cursor: pointer;
    color: #1a1a1a;
    font-size: 24px;
    padding: 4px 8px;
    line-height: 1;
}

.mobile-nav-close:hover {
    color: #f62d79;
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mobile-nav-links a {
    display: block;
    padding: 14px 0;
    font-family: "Roboto Condensed", Helvetica, sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.5px;
    color: #1a1a1a;
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,0.07);
}

.mobile-nav-links a:last-child {
    border-bottom: none;
}

.mobile-nav-links a:hover {
    color: #f62d79;
}

/* Hamburger — hidden on desktop */
.hamburger-menu {
    display: none;
    background: none;
    border: none;
    color: #1a1a1a;
    font-size: 26px;
    cursor: pointer;
    z-index: 1001;
    padding: 4px;
}

/* =============================================
   MOBILE  (≤ 1024px)
   ============================================= */
@media (max-width: 1024px) {

    /* CONTAINER */
    .container {
        padding: 0 16px;
    }

    .main-wrapper {
        overflow-x: hidden;
    }

    /* HEADER */
    .header {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 14px 0;
        border-bottom: none !important;
    }

    /* Logo — keep original desktop sizes, center in header */
    .logo-box {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 290px !important;
        height: 87px !important;
        flex-shrink: 0;
    }

    .logo-box .logo-line {
        width: 300px;
        height: 87px;
    }

    .nav-box {
        display: flex;
        align-items: center;
    }

    .hamburger-menu {
        display: block;
    }

    /* Collapsed nav dropdown */
    .navbar {
        display: none !important;
        position: absolute;
        top: 100%;
        left: -16px;   /* break out of container padding */
        right: -16px;
        flex-direction: column;
        background-color: #F7F1ED;
        padding: 8px 20px 16px 20px;
        gap: 0;
        z-index: 9999;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
        border-top: 1px solid rgba(0,0,0,0.08);
    }

    .navbar.active {
        display: flex !important;
    }

    .navbar a,
    .navbar button.search-btn {
        width: 100%;
        text-align: left;
        justify-content: flex-start;
        padding: 13px 4px;
        color: #1a1a1a !important;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0.5px;
        border-bottom: 1px solid rgba(0,0,0,0.07);
        text-decoration: none;
        background: transparent !important;
        border-radius: 0;
        display: flex;
        align-items: center;
    }

    .navbar a:last-child {
        border-bottom: none;
    }

    .navbar a:hover {
        color: #f62d79 !important;
    }

    /* Hide LISTEN LIVE button and search icon from mobile dropdown */
    .navbar .button-top-listen,
    .navbar .search-btn {
        display: none !important;
    }

    /* ---- HERO ---- */
    /* Kill the full-viewport desktop height */
    .hero {
        min-height: 0 !important;
        height: auto !important;
        padding: 20px 0 0 0 !important;
        padding-bottom: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .hero-content {
        flex-grow: 0 !important;
        padding-bottom: 0 !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
    }

    /* Hide the decorative right-side image */
    .hero-image {
        display: none !important;
    }

    /* "LIVE LOUD" */
    .label {
        position: static !important;
        width: 100% !important;
        margin: 0 !important;
        margin-bottom: 0 !important;
    }

    .label .text-wrapper {
        font-size: 68px !important;
        letter-spacing: 2px;
        line-height: 1;
        margin-top: 20px;
    }

    /* "FEEL FREE" — hidden */
    .label-feel-free {
        display: none !important;
    }

    /* Tagline */
    .header-text {
        text-align: center;
        margin: 0 !important;
        width: 100%;
    }

    .header-text .text-wrapper {
        font-size: 21px !important;
        width: auto !important;
        height: auto !important;
        position: static !important;
        margin: 0 !important;
    }

    .header-text .the-best-music-live {
        font-size: 14px !important;
        width: auto !important;
        height: auto !important;
        position: static !important;
    }

    /* ---- RADIO PLAYER CARD (.box) ---- */
    .box {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        transform: none !important;
        padding: 0 !important;
        margin-top: 16px !important;
    }

    .box .radio-player {
        width: 100% !important;
        height: auto !important;
        flex-direction: row !important;
        align-items: center !important;
        padding: 12px 14px !important;
        gap: 12px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        top: auto !important;
        left: auto !important;
        position: static !important;
    }

    .box .rp-col-1 {
        flex-shrink: 0;
    }

    .box .good-vibes-only {
        width: 200px !important;
        height: auto !important;
        object-fit: cover;
        border-radius: 10px;
    }

    .box .rp-col-2 {
        flex-grow: 1;
        padding-right: 0 !important;
        min-width: 0;
        text-align: left !important;
        align-items: flex-start !important;
    }

    .box .text-wrapper,
    .box .div,
    .box .text-wrapper-2,
    .box .text-wrapper-3 {
        text-align: left !important;
    }

    .box .music-wav-lines {
        max-width: 100px;
        height: 30px;
        margin-bottom: 6px;
    }

    /* ---- FEATURES STRIP — hidden ---- */
    .slide-bottom-box {
        display: none !important;
    }

    /* ---- MIDDLE SECTION ---- */
    /* Switch from 3-column grid to single-column, kill the negative margin */
    .middle-section {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        margin-top: 20px !important;
        gap: 20px !important;
        padding: 0 !important;
        align-items: stretch !important;
    }

    /* ---- SCHEDULE PANEL ---- */
    /* The panel: auto height, normal flow */
    .schedule-panel {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        position: relative !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 16px !important;
        gap: 12px !important;
        box-sizing: border-box !important;
    }

    /* Title row (LIVE RADIO) */
    .schedule-panel .title {
        position: static !important;
        top: auto !important;
        left: auto !important;
        height: auto !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    /* VIEW SCHEDULE link */
    .schedule-panel .view-schedule {
        position: static !important;
        top: auto !important;
        right: auto !important;
        align-self: flex-end !important;
        margin-top: -36px !important; /* pull up next to title */
    }

    /* CURRENTLY ON AIR box */
    .schedule-panel .first-box {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        height: auto !important;
        width: 100% !important;
        border-radius: 14px !important;
        overflow: hidden !important;
        flex-direction: column !important;
        display: flex !important;
    }

    .schedule-panel .img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        flex-shrink: 0 !important;
    }

    .schedule-panel .first-box-content {
        padding: 16px !important;
    }

    /* UP NEXT box */
    .schedule-panel .second-box {
        position: relative !important;  /* keep relative so inner absolutes work */
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        height: 100px !important;   /* enough for content */
        border-radius: 14px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Background fill for second-box */
    .schedule-panel .BG {
        height: 100% !important;
    }

    /* "UP NEXT" label inside second-box — keep absolute within the box */
    .schedule-panel .text-wrapper-3 {
        position: absolute !important;
        top: 16px !important;
        left: 16px !important;
    }

    /* Night Drive text inside second-box */
    .schedule-panel .second-box-text {
        position: absolute !important;
        top: 44px !important;
        left: 16px !important;
    }

    /* Play button inside second-box */
    .schedule-panel .vector-button {
        position: absolute !important;
        top: 50% !important;
        right: 16px !important;
        left: auto !important;
        transform: translateY(-50%) !important;
        width: 40px !important;
        height: 40px !important;
    }

    /* ---- POPULAR SHOWS ---- */
    .popular-shows-panel {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        position: static !important;
        margin: 0 !important;
    }

    .popular-shows-list {
        overflow-y: visible !important;
        max-height: none !important;
    }

    .show-card {
        width: 100% !important;
        margin: 0 !important;
    }

    /* ---- PODCASTS ---- */
    .podcasts-card {
        width: 100% !important;
        height: auto !important;
        position: static !important;
        margin: 0 !important;
    }

    .podcasts-list {
        overflow: visible !important;
    }

    /* ---- BOTTOM SECTION ---- */
    .bottom-section,
    .about-bottom-section,
    .page-blog .blog-section,
    .page-contact .contact-section {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        padding-bottom: 20px !important;
    }

    .blog-sidebar,
    .blog-main-content,
    .contact-sidebar,
    .contact-main-content {
        width: 100% !important;
    }

    .comment-form .form-row {
        flex-direction: column !important;
    }

    .hosts-about-column,
    .community-subscribe-column,
    .schedule-frame {
        width: 100% !important;
        position: static !important;
        margin: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
    }

    .hosts-list {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 16px !important;
        padding-bottom: 10px; /* room for scrollbar */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .host-card {
        flex: 0 0 160px !important;
        min-width: 160px !important;
        max-width: 160px !important;
        margin-bottom: 0;
    }

    /* About page specific mobile overrides for hosts */
    .about-bottom-section .hosts-list {
        flex-direction: column !important;
        overflow-x: hidden !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 32px !important;
    }

    .about-bottom-section .host-card {
        width: 100% !important;
        max-width: 320px !important;
        min-width: 0 !important;
        flex: 0 0 auto !important;
    }

    .about-bottom-section .host-card img.img,
    .about-bottom-section .host-card img.ellipse {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .subscribe-box {
        min-height: auto;
    }

    .learn-more-btn {
        display: none !important;
    }

    /* ---- FOOTER ---- */
    .site-footer {
        padding: 0px 20px 100px !important; /* reduced top padding to 0 */
    }

    /* Hide logo in footer */
    .footer-logo-box {
        display: none !important;
    }

    /* Socials at top, centered */
    .footer-brand {
        width: 100% !important;
        margin-top: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }

    .footer-socials {
        justify-content: center !important;
        margin-top: 0 !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    /* 2-column grid for nav cols */
    .footer-content {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 24px 16px !important;
        align-items: start !important;
    }

    /* Brand (socials) spans full width — first row */
    .footer-brand {
        grid-column: 1 / -1 !important;
    }

    /* Nav cols default (left column: EXPLORE, SUPPORT) */
    .footer-nav-col {
        width: 100% !important;
        text-align: left !important;
    }

    .footer-nav-col ul {
        align-items: flex-start !important;
    }

    /* Right column (COMPANY, CONTACT) which are 3rd and 5th children */
    .footer-content > .footer-nav-col:nth-child(odd) {
        text-align: right !important;
    }

    .footer-content > .footer-nav-col:nth-child(odd) ul {
        align-items: flex-end !important;
    }

    /* Hide decorative wav lines */
    .wav-lines-col {
        display: none !important;
    }

    /* Copyright centered at bottom */
    .footer-bottom {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        margin-top: 24px !important;
    }

    .copyright-text {
        width: 100% !important;
        text-align: center !important;
    }

    /* ---- FIXED BOTTOM PLAYER ---- */
    .long-bottom-radio {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        border-radius: 0;
        min-height: 70px;
        height: 70px;
        padding: 0 12px;
        margin: 0;
        justify-content: space-between;
        z-index: 1000;
    }

    .lbr-left {
        gap: 10px;
        flex-shrink: 0;
        max-width: 42%;
    }

    .long-bottom-radio .rectangle {
        width: 44px;
        height: 44px;
    }

    .long-bottom-radio .good-vibes-only-the {
        font-size: 12px;
        line-height: 15px;
        width: auto;
        height: auto;
    }

    .long-bottom-radio .on-air {
        display: none;
    }

    .lbr-center {
        position: static !important;
        transform: none !important;
        flex: 1;
        justify-content: center;
        gap: 16px;
    }

    .lbr-center .center-left {
        display: none;
    }

    .center-controls {
        gap: 14px;
    }

    .lbr-right {
        gap: 8px;
        flex-shrink: 0;
    }

    .long-bottom-radio .btn-heart,
    .long-bottom-radio .btn-cancel {
        width: 30px;
        height: 30px;
        font-size: 20px;
    }

    .long-bottom-radio .stop {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .long-bottom-radio .left,
    .long-bottom-radio .right {
        font-size: 16px;
    }

    .long-bottom-radio .voice-control {
        display: none;
    }
}

/* =============================================
   SMALL PHONES  (≤ 768px)
   ============================================= */
@media (max-width: 768px) {

    .label .text-wrapper {
        font-size: 52px !important;
    }

    .host-card {
        min-width: 100%;
        flex: 1 1 100%;
    }

    .footer-content {
        text-align: center;
        align-items: center;
    }

    .footer-socials {
        justify-content: center;
    }

    .community-socials {
        justify-content: center;
    }

    .subscribe-form {
        flex-direction: column;
        height: auto;
        gap: 10px;
    }

    .subscribe-input {
        padding: 10px 20px;
        text-align: center;
        border-radius: 10px;
        width: 100%;
    }

    .subscribe-btn {
        position: static;
        width: 100%;
        height: 46px;
        border-radius: 10px;
    }
}