* {
    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;
            overflow-x: hidden;   /* prevent side white line */
          
           }

body {
      height: 100vh;               /* ✅ fixed viewport stage */
      display: flex;
      flex-direction: column;     /* vertical layout: nav -> main -> footer */
      overflow-x: hidden;
     }








                                              /* === FOOTER === */
                                        

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



footer {
        margin-top: auto;       /* ✅ add THIS line */
        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;
             }



             /* ✅ main push the footer down */

.contact-main {
                flex: 1 0 auto;
              }



              /* CONTACT PAGE - BACKGROUND IMAGE */
.contact-main {
                flex: 1 0 auto;
                min-height: 100vh;

                background-image: url("/images/FlacoSel-contact-background-05.png");
                background-size: cover;
                background-position: center;
                background-repeat: no-repeat;

                position: relative;
                display: flex;
                align-items: flex-start;
                justify-content: flex-end;

                padding: 4rem 3rem;
              }

.contact-title {
              
                color: whitesmoke;
               }




               /* =========================
                    Floating Facebook Tab
                  ========================= */

.facebook-tab {
                position: fixed;

                right: 0;
                top: 50%;
                transform: translateY(-50%);

                background: rgb(187, 187, 187);
                padding: 10px;

                border-radius: 8px 0 0 8px;
                border-left: 2px solid aquamarine;

                z-index: 999;

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

                transition: all 0.25s ease;
              }


.facebook-tab img {
                    width: 60px;
                    height: 100px;
                    display: block;
                  }


/* hover glow matching your site */
.facebook-tab:hover {
                      background: aquamarine;
                      transform: translateY(-50%) translateX(-4px);

                      box-shadow: 0 0 15px rgba(127,255,212,0.6);
                    }


                    






                    
                                        /* =========================
                                                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;
  }



/* ✅ move image focal point slightly right */
  .contact-main {
                  background-position: 40% center;
                }




.facebook-tab {
                top: 70%;
                padding: 6px; 
                background: rgba(218, 218, 218, 0.85);
              }

  .facebook-tab img {
                      width: 38px;
                      height: auto;
                    }




} /* ✅ END max-width: 800px nav */