/* ==================================================
   GLOBAL
================================================== */

* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    padding: 0;

    width: 100%;
    height: 100%;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/*
Desktop pages do not scroll.
This is overridden for mobile below.
*/

body {
    overflow: hidden;
}



/* ==================================================
   SIDEBAR
================================================== */

.sidebar {
    position: fixed;

    top: 0;
    left: 0;

    width: 250px;
    height: 100vh;

    background:
        rgba(20, 20, 20, 0.96);

    color: white;

    z-index: 1000;

    box-shadow:
        4px 0 15px
        rgba(0, 0, 0, 0.30);

    transition:
        transform 0.3s ease;
}



/* ==================================================
   SIDEBAR HEADER
================================================== */

.sidebar-header {
    height: 90px;

    display: flex;

    align-items: center;

    padding-left: 25px;

    font-size: 24px;
    font-weight: bold;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.15);
}



/* ==================================================
   SIDEBAR MENU
================================================== */

.sidebar-menu {
    display: flex;

    flex-direction: column;

    padding-top: 20px;
}


.menu-item {
    color: #ddd;

    text-decoration: none;

    font-size: 18px;

    padding:
        18px
        25px;

    transition:
        background 0.2s,
        color 0.2s;
}


.menu-item:hover {
    background:
        rgba(255, 255, 255, 0.10);

    color: white;
}


.menu-item.active {
    background:
        rgba(255, 255, 255, 0.18);

    color: white;

    border-left:
        5px solid white;
}



/* ==================================================
   MAIN DESKTOP LAYOUT

   10% = SONG TITLE
   80% = IMAGE
   10% = PLAY BUTTON
================================================== */

.main-content {
    margin-left: 250px;

    width:
        calc(100% - 250px);

    height: 100vh;

    display: grid;

    grid-template-rows:
        10vh
        80vh
        10vh;

    overflow: hidden;
}



/* ==================================================
   TOP HEADER
================================================== */

.page-header {
    width: 100%;
    height: 100%;

    background: #111;

    color: white;

    padding:
        10px
        25px;

    overflow: hidden;
}



/* ==================================================
   HEADER CONTENT
================================================== */

.header-content {
    width: 100%;
    height: 100%;

    display: flex;

    justify-content: center;
    align-items: center;

    gap: 25px;
}



/* ==================================================
   HEADER TITLE
================================================== */

.header-title {
    display: flex;

    justify-content: center;
    align-items: center;

    text-align: center;
}


.header-title h1 {
    margin: 0;

    font-size:
        clamp(
            24px,
            3vw,
            46px
        );
}


.header-title p {
    margin:
        5px
        0
        0
        0;

    font-size:
        clamp(
            14px,
            1.2vw,
            18px
        );
}



/* ==================================================
   PAGE CONTENT CONTAINER
================================================== */

.page-container {
    width: 100%;

    display: flex;

    flex-direction: column;

    justify-content: center;
    align-items: center;

    text-align: center;
}



/* ==================================================
   DESKTOP IMAGE AREA
================================================== */

.image-area {
    width: 100%;
    height: 100%;

    background-position:
        center center;

    background-repeat:
        no-repeat;

    background-size:
        cover;

    overflow: hidden;
}



/* ==================================================
   DESKTOP AUDIO FOOTER
================================================== */

.audio-footer {
    display: flex;

    justify-content: center;
    align-items: center;

    background: #111;

    padding:
        8px
        20px;

    overflow: hidden;
}



/* ==================================================
   PLAY BUTTON
================================================== */

.play-button {
    min-width: 220px;

    padding:
        16px
        36px;

    border:
        2px solid white;

    border-radius:
        50px;

    background:
        rgba(
            255,
            255,
            255,
            0.08
        );

    color: white;

    font-size: 20px;

    font-weight: bold;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}


.play-button:hover {
    background:
        rgba(
            255,
            255,
            255,
            0.20
        );

    transform:
        scale(1.04);
}


.play-button:active {
    transform:
        scale(0.97);
}



/* ==================================================
   MOBILE PLAY BUTTON

   Hidden on desktop.
================================================== */

.mobile-play-button {
    display: none;
}



/* ==================================================
   MOBILE MENU BUTTON

   Hidden on desktop.
================================================== */

.menu-button {
    display: none;

    position: fixed;

    top: 15px;
    left: 15px;

    z-index: 2000;

    width: 50px;
    height: 50px;

    border: none;

    border-radius: 8px;

    background:
        rgba(
            20,
            20,
            20,
            0.85
        );

    color: white;

    font-size: 27px;

    cursor: pointer;
}



/* ==================================================
   TABLET / MOBILE

   SCREEN WIDTH <= 768px
================================================== */

@media (max-width: 768px) {


    /* ==============================================
       ALLOW MOBILE PAGE SCROLLING
    ============================================== */

    html,
    body {
        width: 100%;

        height: auto;

        min-height: 100%;

        overflow-x: hidden;

        overflow-y: auto;

        -webkit-overflow-scrolling: touch;
    }



    /* ==============================================
       SIDEBAR

       Sidebar remains a slide-out drawer.
    ============================================== */

    .sidebar {
        width: 260px;

        height: 100vh;

        transform:
            translateX(-100%);
    }


    .sidebar.open {
        transform:
            translateX(0);
    }



    /* ==============================================
       HAMBURGER BUTTON
    ============================================== */

    .menu-button {
        display: block;
    }



    /* ==============================================
       MOBILE MAIN PAGE

       We remove the desktop CSS grid.

       Mobile is allowed to grow vertically,
       which allows normal page scrolling.
    ============================================== */

    .main-content {
        margin-left: 0;

        width: 100%;

        height: auto;

        min-height: 100vh;

        display: block;

        overflow: visible;
    }



    /* ==============================================
       MOBILE HEADER

       Fixed-size header area.

       Contains:

           SONG TITLE
           [ PLAY SONG ]

       The 75px left padding leaves room
       for the hamburger menu button.
    ============================================== */

    .page-header {
        width: 100%;

        height: 150px;

        padding:
            8px
            15px
            8px
            75px;

        background: #111;

        color: white;

        overflow: hidden;
    }



    /* ==============================================
       MOBILE HEADER CONTENT

       flex-direction: column puts the
       Play Song button underneath the title.
    ============================================== */

    .header-content {
        width: 100%;
        height: 100%;

        display: flex;

        flex-direction: column;

        justify-content: center;
        align-items: center;

        gap: 8px;
    }



    /* ==============================================
       MOBILE TITLE
    ============================================== */

    .header-title {
        width: 100%;

        flex: none;

        display: flex;

        justify-content: center;
        align-items: center;

        text-align: center;

        min-width: 0;
    }


    .header-title h1 {
        margin: 0;

        max-width: 100%;

        font-size:
            clamp(
                18px,
                5vw,
                28px
            );

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;
    }


    .header-title p {
        margin:
            3px
            0
            0
            0;

        font-size: 13px;
    }



    /* ==============================================
       MOBILE PAGE CONTAINER
    ============================================== */

    .page-container {
        width: 100%;

        display: flex;

        flex-direction: column;

        justify-content: center;
        align-items: center;

        text-align: center;
    }



    /* ==============================================
       MOBILE PLAY BUTTON

       Appears underneath song title.
    ============================================== */

    .mobile-play-button {
        display: block;

        min-width: 160px;

        padding:
            8px
            18px;

        font-size: 14px;

        flex-shrink: 0;
    }



    /* ==============================================
       HIDE DESKTOP AUDIO FOOTER

       The mobile Play Song button is located
       inside the header instead.
    ============================================== */

    .audio-footer {
        display: none;
    }



    /* ==============================================
       MOBILE IMAGE AREA

       The image area is a full viewport tall.

       Because the header is 150px plus the
       image is 100vh, the page becomes taller
       than the phone screen and can be scrolled.

       background-position: center top means
       we start viewing the image from its top.
    ============================================== */

    .image-area {
        width: 100%;

        height: 100vh;

        background-position:
            center top;

        background-repeat:
            no-repeat;

        background-size:
            cover;

        overflow: hidden;
    }


}