/* Importing custom fonts */
@font-face {
    font-family: 'Being-ExtraBold';
    src: url('/fonts/Being-ExtraBold.ttf') format('ttf'),
    url('/fonts/Being-ExtraBold.woff') format('woff'),
    url('/fonts/Being-ExtraBold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Being-Light';
    src: url('/fonts/Being-Light.ttf') format('ttf'),
    url('/fonts/Being-Light.woff') format('woff'),
    url('/fonts/Being-Light.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Being-Bold';
    src: url('/fonts/Being-Bold.ttf') format('ttf'),
    url('/fonts/Being-Bold.woff') format('woff'),
    url('/fonts/Being-Bold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Being-Regular';
    src: url('/fonts/Being-Regular.ttf') format('ttf'),
    url('/fonts/Being-Regular.woff') format('woff'),
    url('/fonts/Being-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* General body styling */
body {
    font-family: 'Being-ExtraBold', sans-serif;
    margin: 0;
    padding: 0;
    background-color: black;
    color: red;
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Styling the header */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #222;
    color: red;
    padding: 15px;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Being-Regular', sans-serif;
    font-weight: bold;
    font-size: 23px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    border-bottom: 2px solid yellow;
}

.header-content {
    display: flex;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: 1200px;
    box-sizing: border-box;
    justify-content: center;
}

/* Header navigation links */
.nav-links {
    display: flex;
    gap: 20px;
}

/*Header animation */
header a {
    color: red;
    text-decoration: none;
    padding: 10px 20px;
    font-size: 1.2em;
    border: 2px solid red;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
}

/* Header hover animation */
header a:hover {
    background-color: red;
    color: #fff;
}

/* Social media buttons */
.social-media-buttons {
    display: flex;
    gap: 10px;
}

/* Social media buttons animation */
.social-media-buttons a {
    display: inline-block;
    border: none;
    outline: none;
    padding: 5px;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.3s;
}

/* Social media buttons images*/
.social-media-buttons img {
    width: 30px;
    height: 30px;
    display: block;
    border-radius: 5px;
}

/* Social media button hover animations */
.social-media-buttons a:hover {
    background-color: red;
    transform: scale(1.1);
}

/* Mobile menu button (Hamburger menu) */
.mobile-menu-button {
    display: none;
    cursor: pointer;
    font-size: 1.5em;
    background: transparent;
    border: none;
    color: red;
    position: fixed;
    right: 15px;
    top: 15px;
    padding: 0; /* Remove any extra padding to let it fit the size of the icon */
    width: auto; /* Let the width be determined by the content */
    height: auto;
}

/* Skjuler telefon bund-SoME knapper på computer-visning*/
.social-media-buttons-mobile {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 35px;
    height: 100%;
    padding-bottom: 20px;
}

 .social-media-buttons-mobile a:hover {
     background-color: red;
     transform: scale(1.1);
 }

 .social-media-buttons-mobile a {
     display: inline-block;
     border: none;
     outline: none;
     padding: 5px;
     border-radius: 5px;
     transition: background-color 0.3s, transform 0.3s;
 }

/* Mobile menu container */
.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    background-color: rgba(255, 255, 255, 0.9); /* White background with opacity */
    width: 50%; /* Slide out to cover 50% of the screen width */
    height: 100%;
    max-height: 100vh;
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    padding-top: 60px;
    padding-right: 20px; /* Space for close button */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;

}

/* Mobile menu animation */
.mobile-menu a {
    padding: 15px;
    text-align: center;
    color: black;
    text-decoration: none;
    font-size: 1.2em;
    display: block;
    transition: background-color 0.3s, color 0.3s;
    border-radius: 6px;
    margin: 3px 0;
    outline: none;
    border: none; /* Ensure no borders */
    box-shadow: none; /* Remove any box-shadow */
}

/* Mobile menu hover animation */
.mobile-menu a:hover {
    background-color: red;
    color: #fff;
}

/* Mobile menu animation */
.mobile-menu.active {
    transform: translateX(0);
    opacity: 1;
}

/* Close menu function*/
.close-menu {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 1.5em;
    cursor: pointer;
    background: transparent;
    border: none;
    color: black;
    transition: color 0.3s;
}

/*Close menu function closing animation */
.close-menu:hover {
    color: red;
}

 /* Band introduction section */
 .band-intro {
     width: 100%;
     height: 100vh;
     display: flex;
     flex-direction: column;
     justify-content: center; /* Align content vertically at the center */
     align-items: center;
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     color: red;
     font-family: 'Being-ExtraBold', sans-serif;
     font-size: 7.5vw;
     text-align: center;
     margin: 0;
     padding-top: 10px;
     box-sizing: border-box;
     position: relative;
 }

 /* Dårlige Råd Title styling */
 #Start-title {
     margin: 0; /* Remove any default margin */
     padding-top: 80px; /* Remove any padding */
     line-height: 1.2; /* Adjust line height if needed */
 }

 /*Dårlige Råd portrait styling */
 .band-intro img {
     margin-top: 5px; /* Adjust space between title and image */
     max-width: 40vw; /* Control image width */
     height: auto;
     border-radius: 4px;
 }

 /* Styling the sections */
 section {
     width: 100%;
     min-height: 50vh;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 40px 20px;
     box-sizing: border-box;
     border-bottom: 2px solid yellow; /* Thinner yellow line between sections */
     margin: 0; /* Remove margin to align yellow line */
     font-family: 'Being-Light', sans-serif;
 }

 /* Tour section styling */
 .tour-dates {
     list-style: none;
     padding: 0;
     margin: 0 auto;
     max-width: 800px; /* keep it centered and not too wide */
 }

 .tour-dates li {
     margin: 15px 0;
     padding: 12px 16px;
     border: 2px solid red;
     border-radius: 8px;
     transition: transform 0.2s ease, background 0.3s ease;
     font-size: 1.2em;
     cursor: pointer;
 }

 .tour-dates li:hover {
     background: rgba(255, 0, 0, 0.1); /* faint red glow */
     transform: scale(1.02);
     cursor: pointer;
 }

 .tour-dates a {
     text-decoration: none;
     color: yellow; /* keep it in line with section-content */
     display: block;
     cursor: pointer;
 }

 .tour-dates a.past {
     opacity: 0.2;
 }

 .tour-dates .soldout {
     color: red;
     font-weight: bold;
     margin-left: 8px;
 }

 .tour-dates .special {
     color: yellow;
     font-weight: bold;
 }


 /* Shop section styling */
 #shop {
     background-color: #333;
     position: relative;
 }

 #contact {
     background-color: #333;
 }
 /* Footer styling */
 footer {
     width: 100%;
     background-color: black;
     padding: 0; /* Remove any padding from the footer itself */
     margin: 0; /* Ensure no margin is added */
     box-sizing: border-box; /* Include padding and border in the element's total width and height */
 }

 .footer-bar {
     background-color: white; /* White background for the copyright bar */
     color: black; /* Black text color */
     width: 100%; /* Ensure it takes up full width of the footer */
     padding: 10px 0; /* Padding for the copyright bar */
     font-family: 'Avenir Next LT Pro', sans-serif;
     font-size: 1em;
     text-align: center;
     box-sizing: border-box; /* Include padding and border in the element's total width and height */
 }

 /*Styling of section titles */
 .section-title {
     font-family: 'Being-Bold', sans-serif;
     font-weight: normal;
     color: red;
     font-size: 3em;
     margin: 0;
     position: relative; /* Required for positioning the pseudo-element */
     display: inline-block; /* Adjust to fit the text width */
     text-align: center; /* Center text and pseudo-element */
 }

 .section-title::after {
     content: '';
     display: block; /* Block display to ensure it's on its own line */
     width: 100%; /* Adjust to fit the text width */
     height: 2px; /* Line thickness */
     background-color: yellow; /* Line color */
     margin: 10px auto 0; /* Center the line horizontally and give space above it */
     position: absolute; /* Position relative to the title */
     left: 0; /* Align the line to the start of the title */
     right: 0; /* Align the line to the end of the title */
     bottom: -10px; /* Position the line just below the title */
 }

 /*Styling of section content font*/
 .section-content {
     font-family: 'Being-Light', sans-serif; /* Font til indhold af sections */
     font-size: 40px;
     color: yellow;
 }

 .section-text {
     font-size: 1.5em;
     margin: 0;
 }

 /* Animation for hovering over events */
 .highlight {
     color: yellow;
     transition: transform 0.3s ease, text-shadow 0.3s ease;
     line-height: 1.5;
 }

 .highlight:hover {
     transform: scale(1.1); /* Slightly enlarges the text */
     text-shadow: 0px 0px 10px red; /* Adds a glowing effect */
 }

 /* Ensure the YouTube video takes up 60% of the viewport width */
 .youtube-video-wrapper {
     width: 50vw; /* 60% of viewport width */
     max-width: 1000px; /* Adjust as needed */
     margin: 20px 0; /* Space around the video */
     position: relative;
     padding-top: 56.25%; /* Adjusted for a 16:9 aspect ratio */
 }

 .youtube-video {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border: none;
 }

 /* Button for listening to music */
 .lyt-nu-button {
     display: inline-block;
     margin-top: 20px; /* Moved down a bit */
     padding: 10px 20px;
     color: red;
     background-color: transparent;
     border: 2px solid red;
     border-radius: 5px;
     text-decoration: none;
     font-size: 1.2em;
     transition: background-color 0.3s, color 0.3s;
 }

 .lyt-nu-button:hover {
     background-color: red;
     color: #fff;
 }

     /*---------------------------------!!!MOBIL KOMPATIBILITET SEKTION!!!---------------------------------------------*/

 @media (min-width: 2560px) {
     /* Juster padding og margin på headeren 27 inch */
     header {
         font-size: 2em;
         padding-top: 20px;
         padding-bottom: 20px;
         position: sticky;
     }
     .nav-links {
         display: flex;
         gap: 40px; /* Increase the gap between the buttons */
     }

     #Start-title {
         font-size: 6.5vw;
         padding-top: 20px;
     }

     .band-intro img {
         width: 96vh;
     }

     .band-intro {
        padding-bottom: 100px;
     }

     .section-title {
         font-size: 70px;
     }

     .section-text {
            font-size: 75px;
     }
 }


/* CSS code for frontpage on phone display: */
@media (max-width: 768px) and (orientation: portrait) {
    .mobile-menu-button {
        top: 10px;
        right: 10px;
        font-size: 2em;
        display: block;
    }

    .social-media-buttons-mobile {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 48px;
        height: 100%;
        padding-bottom: 20px;
    }

    .social-media-buttons a {
        display: inline-block;
        transition: background-color 0.3s, transform 0.3s;
    }

    .social-media-buttons img {
        width: 35px;
        height: 35px;
        display: block;
    }

    .header-content {
        display: none;
    }

    header {
        border-bottom: none;
        box-shadow: none;
        background: none;
        margin: 0; /* Ensure no margin is pushing it down */
        padding: 0; /* Reset padding if any exists */
        position: relative; /* Make sure it's positioned correctly */
        top: 0;
    }

    .band-intro img {
    margin-top: 10px;
    max-width: 80vw;  /* this limits size */
    height: auto;
    border-radius: 4px;
    padding-top: 60px;
    }

    .band-intro {
        width: 100%;
        min-height: auto;   /* allow content to define height */
        background-size: contain;  /* or "cover" if you want it stretched */
        background-position: center;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;     /* vertically center text */
        align-items: center;         /* horizontally center text */
        padding: 12vh 5vw;            /* some padding for small screens */
        color: red;                  /* text color */
        text-align: center;
        font-family: 'Being-ExtraBold', sans-serif;
        position: relative;

    }
    .band-intro h1 {
        margin-top: 0;    /* remove extra space */
    }

    #Start-title {
        font-size: 12vw;
        margin-top: 0;     /* remove default spacing */
        padding-top: 1vh;
        z-index: 2;
        position: relative; /* place above overlay */
    }


}

 /* Eventuel form-design Style the submit button with a specific background color etc
 input[type=text], select, textarea {
     width: 75%;
     font-family: Being-Light, sans-serif;
     font-size: 30px;
     padding: 12px;
     border: 1px solid #ccc;
     border-radius: 4px;
     box-sizing: border-box;
     margin-top: 6px;
     margin-bottom: 16px;
     resize: vertical;
 }


 input[type=submit] {
     background-color: red;
     color: white;
     padding: 12px 20px;
     border: none;
     border-radius: 4px;
     cursor: pointer;
     width: 75%;
 }

  When moving the mouse over the submit button, add a darker green color
 input[type=submit]:hover {
     background-color: darkred;
 }

 Add a background color and some padding around the form
 .container {
     border-radius: 5px;
     background-color: black;
     padding: 20px;
 }

 */