/* ===== Basis reset ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.5;
    color: #222;
    background-color: #fff;

    /* Ruimte voor vaste header */
    padding-top: 90px;
}

/* ===== Header ===== */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;

    height: 90px;                 /* START hoogte */
    padding: 0 25px;

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

    background-color: #111;
    color: white;

    z-index: 9999;

    transition: 
        height 0.3s ease,
        padding 0.3s ease,
        background-color 0.3s ease;
}

/* ===== Verkleinde header bij scroll ===== */
header.scrolled {
    height: 65px;                 /* kleinere hoogte */
    background-color: rgba(17,17,17,0.95);
}

/* ===== Logo ===== */
.logo-text a {
    color: white;
    text-decoration: none;
    font-size: 1.8rem;
    font-weight: bold;
    font-family: Arial, sans-serif;
    transition: font-size 0.3s ease;
}

/* Logo krimpt mee */
header.scrolled .logo-text a {
    font-size: 1.4rem;
}

/* ===== Desktop menu ===== */
nav ul {
    list-style: none;
    display: flex;
    gap: 25px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;

    line-height: 90px;   /* gelijk aan header hoogte */
    transition: 
        color 0.3s ease,
        line-height 0.3s ease;
}

/* Links aanpassen bij scroll */
header.scrolled nav ul li a {
    line-height: 65px;
}

nav ul li a:hover {
    color: #f04e30;
}

/* ===== Hamburger knop ===== */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 25px;
    height: 20px;
    cursor: pointer;
}

.hamburger span {
    display: block;
    height: 3px;
    background: white;
    border-radius: 2px;
}

/* ===== Mobiel menu ===== */
@media screen and (max-width: 768px) {

    nav ul {
        position: absolute;
        top: 90px;  /* start onder header */
        right: 0;
        background-color: #111;
        flex-direction: column;
        width: 220px;
        display: none;
        padding: 20px;
        gap: 10px;
        box-shadow: -5px 5px 15px rgba(0,0,0,0.3);
        transition: top 0.3s ease;
    }

    /* Menu positie aanpassen bij scroll */
    header.scrolled nav ul {
        top: 65px;
    }
    
    nav ul.active {
        display: flex;
    }

    .hamburger {
        display: flex;
    }

    nav ul li a {
        line-height: normal;
        padding: 10px 0;
    }
}

/* ===== Hero ===== */
.hero {
    position: relative;
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    overflow: hidden;
}

/* Hero generiek */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: center/cover no-repeat;
    z-index: 0;
    background-color: #333; /* fallback kleur als afbeelding niet laadt */
}

/* Home-pagina: achtergrond + filter */
body.home .hero::before {
    background-image: url('../images/hero_home.jpg');
    background-color: #666; /* fallback grijs voor Safari mobiel */
    filter: grayscale(100%) brightness(60%);
}

/* Andere pagina's: alleen afbeelding in kleur */
body.muziek .hero::before {
    background-image: url('../images/hero_muziek.jpg');
}

body.live .hero::before {
    background-image: url('../images/hero_live.jpg');
}

body.overons .hero::before {
    background-image: url('../images/hero_overons.jpg');
}

body.contact .hero::before {
    background-image: url('../images/hero_contact.jpeg');
    filter: grayscale(100%) brightness(60%);
}



.hero-text {
    position: relative;
    z-index: 1;
}

.hero .highlight-red {
    color: #f04e30;
    font-weight: bold;
    font-size: 1.2rem;
    margin: 15px 0;
}

.hero .btn {
    display: inline-block;
    margin: 10px;
    padding: 12px 25px;
    background-color: #f04e30;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background 0.3s ease;
}

.hero .btn:hover {
    background-color: #d03e20;
}

/* ===== Secties ===== */
.release, 
.shows, 
.news {
    padding: 50px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.release h2, 
.shows h2, 
.news h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    text-align: center;
}

.release-content {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    justify-content: center;
}

.release-content img {
    max-width: 200px;
    border-radius: 10px;
}

.release-info p {
    max-width: 500px;
}

.stream-buttons {
    margin-top: 10px;
}

/* ===== Nieuws ===== */
.news ul {
    list-style: disc;
    margin-left: 20px;
}

.news ul li {
    margin-bottom: 10px;
}

/* ===== Footer ===== */
footer {
    background-color: #111;
    color: white;
    text-align: center;
    padding: 20px;
}

footer .socials a {
    color: white;
    text-decoration: none;
    margin: 0 10px;
    font-weight: bold;
    transition: color 0.3s;
}

footer .socials a:hover {
    color: #f04e30;
}

/* ===== Extra responsive ===== */
@media screen and (max-width: 768px) {

    .hero-text h2 {
        font-size: 2rem;
    }

    .release-content {
        flex-direction: column;
    }

    .release-info p {
        max-width: 100%;
    }
}

/* ===== Live shows layout ===== */
.show-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-top: 30px;
}

.show-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fafafa;
}

.show-date {
    text-align: center;
    font-weight: bold;
    min-width: 80px;
}

.show-date .day {
    display: block;
    font-size: 1.8rem;
}

.show-date .month {
    font-size: 0.9rem;
    color: #666;
}

.show-details h3 {
    margin-bottom: 5px;
}

.show-ticket {
    margin-left: 20px;
}

/* Mobiel */
@media screen and (max-width: 768px) {
    .show-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .show-ticket {
        margin-left: 0;
    }
}

/* ===== Over Ons ===== */
.about-text {
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
}

.about-text p {
    margin-bottom: 20px;
}

/* Band grid */
.band-grid {
    display: flex;
    gap: 30px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px;
}

.band-member {
    text-align: center;
    max-width: 220px;
}

.band-member img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 10px;
}

/* Mobiel */
@media screen and (max-width: 768px) {
    .band-grid {
        flex-direction: column;
        align-items: center;
    }
}

/* ===== Contact Formulier ===== */
.contact-form {
    display: flex;
    flex-direction: column; /* verticale stapeling */
    gap: 15px;              /* ruimte tussen velden */
    max-width: 600px;       /* breedte van het formulier */
    margin: 0 auto;         /* gecentreerd */
}

.contact-form input,
.contact-form textarea {
    width: 100%;            /* vul de beschikbare breedte */
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1rem;
    box-sizing: border-box;
    resize: vertical;       /* alleen verticaal resizebaar voor textarea */
}

.contact-form button {
    padding: 12px 25px;
    background-color: #f04e30;
    color: white;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease;
}

.contact-form button:hover {
    background-color: #d03e20;
}

#form-response {
    margin-top: 10px;
    text-align: center;
    font-size: 0.95rem;
}