* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }




img, video {
            max-width: 100%;
            height: auto;
           }




  nav {
        width: 100%;
        background: rgb(31, 30, 30);
        display: flex;  /* ✅ SWITCH TO FLEX */
        align-items: center;
        padding: 0.75rem 2rem;
        position: relative;   /* safe + helps dropdown anchoring */    /* required for z-index */

        z-index: 10;          /* ✅ ensures nav + dropdown sit above hero image */
      }
  


/* ✅ Desktop Flex layout */
.nav-left,
.nav-right {
            flex: 0 0 auto;       /* ✅ only as wide as their content */
            display: flex;
            align-items: center;
            min-width: 0;
           }




.nav-left {justify-content: flex-start;}

.nav-right {justify-content: flex-end;}


 


 /* ✅ PERFECT optical centering */
/* Desktop nav links — true visual centering */
.nav-links {
            flex: 1;                 /* middle zone takes remaining space */
            display: flex;
            justify-content: center; /* centers links in the middle zone */
            align-items: center;

            list-style: none;
            gap: 2rem;
            margin: 0;               /* IMPORTANT: no auto margins */
            padding: 0;
            min-width: 0;
          }



  /* Artist name look */
  .artist-name {
                font-size: clamp(2rem, 4vw, 4rem);
                font-weight: 700;
                color: aquamarine;
                letter-spacing: 1px;
                margin: 0;
                white-space: nowrap;
               }
  


  .nav-links li { 
                  padding: 0; 
                }



  .nav-links li a {
                    position: relative;
                    text-transform: uppercase;
                    font-size: 1.5rem;
                    font-weight: 500;
                    text-decoration: none;
                    color: whitesmoke;
                    /* refined animation */
                    transition: color 0.2s ease, text-shadow 0.2s ease, transform 0.15s ease;
                    padding: 0.85rem 1rem; 
                  }
                  
  
  
.nav-links li a:hover,
.nav-links li a:focus-visible,
.nav-links li a:active {
                        color: aquamarine;
                        text-shadow: 0 0 10px aqua;
                       }

  

.nav-links li a:focus-visible {
                                outline: 2px solid aquamarine;
                                outline-offset: 4px;
                              }
                      


  
  /* Logo */
  .logo { margin: 0; display: flex; }
  .logo img {
              width: 72px;
              height: 72px;
              border-radius: 50%;
              background-color: aquamarine;
              display: block;
              object-fit: cover;
            }


  
  /* Hamburger: hidden on desktop */
  .nav-toggle {
                display: none;              /* ✅ important */
                background: transparent;
                border: 0;
                padding: 0.5rem;
                cursor: pointer;
                line-height: 0;
              }


  
  /* Hamburger lines (visible when button is visible) */
  .nav-toggle span {
                    display: block;             /* ✅ important */
                    width: 34px;
                    height: 3px;
                    margin: 6px 0;
                    background: whitesmoke;
                    transition: transform 0.5s ease, opacity 0.5s ease;  /* Animate hamburger to X */
                    transform-origin: center;
                   }
  



 

/* When menu is open */
.nav-toggle.is-active span:nth-child(1) {
                                          transform: translateY(7px) rotate(45deg);
                                        }

.nav-toggle.is-active span:nth-child(2) {
                                          opacity: 0;
                                        }

.nav-toggle.is-active span:nth-child(3) {
                                          transform: translateY(-9px) rotate(-45deg);
                                        }



          /* The body starts here */

html, body { height: 100%; margin: 0; }


body{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
   }





nav, footer {
              flex: 0 0 auto;   /* ✅ keep nav/footer at natural height */
            }



footer {
        margin-top: auto;          /* ✅ pushes footer to bottom when page is short */
        text-align: center;
        background-color: black;
        color: whitesmoke;
        padding: 0.5rem 0.5rem;
        width: 100%;
       }



.footer-content {
                display: flex;
                flex-direction: column;   /* logo on top, text below */
                align-items: center;
                justify-content: center;
                gap: 0.75rem;
                }
      

.footer-logo {
              width: 90px;              /* adjust as needed */
              height: auto;
              display: block;
             }
      

.footer-text {
              font-size: 0.9rem;
              text-align: center;
              opacity: 0.9;
             }

             


/* =========================
   HOME PAGE (hero image only)
   ========================= */

.home-main {
            flex: 1;
            min-height: 0;   /* ✅ important in flex layouts */
            overflow: auto;     /* or visible */
            display: flex;
           }


.home-main .home-hero {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        display: block;
                      }



/* ✅ Make ALL your page mains push the footer down */
.home-main {
            flex: 1 0 auto;
           }


                      

/* Sticky nav ONLY on Home + Music */

.page-home nav {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                z-index: 999;    /* stay above content */
               }


                                                
                  
                                    /*  MEDIA QUERY STARTS HERE  */
                              /* ✅ Mobile / small tablet hamburger layout */


                                        /* =========================
                                                MEDIA QUERIES
                                          ========================= */

/* ✅ Mobile / small tablet hamburger layout */
@media (max-width: 800px) {

  nav {
    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    padding: 0.75rem 1rem;
  }

  .nav-right { 
    display: none;
  }

  .nav-left {
    grid-column: 2;
    justify-self: center;
  }

  .nav-toggle {
    display: block;
    grid-column: 3;
    justify-self: end;
  }

  .nav-toggle span {
    margin: 5px 0;
  }

  .artist-name {
    text-align: center;
    letter-spacing: 0.12em;
    white-space: nowrap;
  }

  .nav-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    flex: none;
    width: 100%;

    position: absolute;
    top: 100%;
    inset-inline: 0;

    z-index: 11;
    background: rgb(31, 30, 30);
    border-top: 1px solid rgba(255, 255, 255, 0.15);

    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
    overflow: hidden;
    pointer-events: none;

    transition: max-height 300ms ease, opacity 220ms ease, transform 220ms ease;
    will-change: max-height, opacity, transform;

    padding: 0;
  }

  .nav-links.is-open {
    max-height: 320px;
    opacity: 1;
    transform: translateY(0);
    padding: 0.5rem 0 0.75rem;
    pointer-events: auto;
  }

  .nav-links li {
    width: fit-content;
    list-style: none;
    padding: 0.85rem 1rem;
    margin: 0 auto;
  }

  .nav-links li a {
    display: inline-block;
    width: auto;
    padding: 0;
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.2;
  }
} /* ✅ END max-width: 800px nav */


/* Small phones */
@media (max-width: 600px) {
  .home-main { min-height: 55vh; }

  .home-main .home-hero {
    object-position: center top;
  }
}