/* zorgt ervoor dat elementen worden berkend */

* {
    box-sizing: border-box;
}


/* zorgt ervoor dat je soepel kan scrollen over de pagina */

html {
    scroll-behavior: smooth;
}


/* algemene stijl van de pagina */

body {
    margin: 0;
    padding: 0;
    /* zorgt voor een bijna witte achtergrond */
    background: #f7f4ee;
    /* zorgt ervoor dat de tekst zo goed als zwart is */
    color: #292929;
    /* lettertype */
    font-family: Arial, sans-serif;
}


/* navigatiebalk */

.head1 nav a.activiteiten-button {
    color:#840e0e;

}

.head1 nav a.activiteiten-button::after {
    /* zorgt dat na de hover de width 100% is */
     width: 100%;
}

.head1 {
    /* zorgt ervoor dat de header altijd meegaat als je scrolt */
    position: sticky;
    top: 0;
    /* zorgt ervoor dat het element voor alle andere elementen komt */
    z-index: 999;
    /* maakt de header 82px hoog */
    height: 82px;

    /* elementen worden naast elkaar gezet in plaats van onder elkaar */
    display: flex;
    /* zorgt ervoor dat alles in de flex gecentreerd wordt */
    align-items: center;
    /* zorgt voor extra ruimte aan de zijkanten en aan de bovenkant niet */
    padding: 0 55px;
    /* geeft bijna volledig witte achtergrond maar niet helemaal zodat je er een beetje doorheen kan kijken nog */
    background: rgba(255, 255, 255, 0.97);
    /* geeft een border aan de onerkant van de header die 1px dik is en een bijna witte kleur heeft */
    border-bottom: 1px solid #ded8cc;
    /* zorgt voor een schaduw om de header heen die niet heel duidelijk te zien is maar wel beetje extra detail geeft en niet te afleidend is */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}


.logo {
    /* tekstkleur */
    color: #840e0e;
    /* lettertype */
    font-family: Georgia, serif;
    /* lettergroote */
    font-size: 24px;
    /* dikgedrukte tekst */
    font-weight: bold;
    /* zorgt voor ruimte tussen letters */
    letter-spacing: 4px;
    /* niks geen gedoe om de tekst heen */
    text-decoration: none;
    /* zorgt voor extra ruimte aan de zijkant van het logo */
    margin-right: 55px;
}


.head1 nav {
    display: flex;
    /* zorgt voor 30px ruimte tussen elke knop */
    gap: 30px;
    /* groeit mee met hoeveel ruimte er is */
    flex: 1;
}


.head1 nav a {
    /* blijft op de plek staan als er wat veranderd */
    position: relative;

    color: #333;
    /* lettertype en dikgedrukt */
    font-size: 15px;
    font-weight: bold;

    text-decoration: none;

    transition: color 0.25s ease;
}


.head1 nav a::after {
    /* zorgt voor een leeg lijnte zonder tekst */
    content: "";
    /* staat altijd onder vaste positie van het parent element */
    position: absolute;

    left: 0;
    bottom: -8px;
    /* zorgt ervoor dat de lijn eerst 0width heeft en een hoogte van 2px */
    width: 0;
    height: 2px;

    background: #840e0e;
    /* zorgt ervoor dat er een mooi lijnte tevoorschijn komt in 0.25s */
    transition: width 0.25s ease;
}


.head1 nav a:hover {
    /* zorgt ervoor dat de knop rood wordt als je erover heen gaat met je muis */
    color: #840e0e;
}

/* zorgt ervoor dat de lijn onder de knop maximale breedte van het vakje heeft na de hover */
.head1 nav a:hover::after {
    width: 100%;
}


.header-buttons {
    display: flex;

    gap: 10px;
}


.login-button,
.reserve-button {
    padding: 12px 19px;

    border-radius: 3px;

    text-decoration: none;

    font-size: 14px;
    font-weight: bold;
}


.login-button {
    color: #840e0e;

    border: 1px solid #840e0e;

    background: white;
}

.welkom {
padding-top: 4%;
}

.reserve-button {
    color: white;

    background: #840e0e;

    border: 1px solid #840e0e;
}


.login-button:hover {
    background: #f5eeee;
}


.reserve-button:hover {
    background: #a31515;
}


/* grote hero bovenaan */

.activity-hero {
    position: relative;

    min-height: 560px;

    display: flex;
    align-items: center;

    background-image: url("https://cdn.getyourguide.com/image/format=jpg,fit=crop,gravity=auto,quality=80,width=1200,height=630/dam/BCC-2023-EXPLORER-TRAVEL-GUIDE-UPDATES---how-to-spend-5-days-in-london-an-insiders-itinerary_DESKTOP-VUD94Fnu.jpg");
    background-size: cover;
    background-position: center;
}


/* donkere laag over de hero afbeelding */

.activity-hero-overlay {
    position: absolute;
    /* alle 4 de kanten van van de hero met 0 pixles afstand aan buitenkant */
    inset: 0;

    background:
    /* zorgt voor kleurverloop */
        linear-gradient(
            /* zorgt voor kleurverloop van links naar rechts */
            90deg,
            /* van steeds donkerder zwart naar lichter zwart */
            rgba(0, 0, 0, 0.75),
            rgba(0, 0, 0, 0.35),
            rgba(0, 0, 0, 0.1)
        );
}


/* tekst in de hero */

.activity-hero-content {
    position: relative;
    /* zorgt ervoor dat de inhoud van de hero als 2e wordt gebruikt als laag */
    z-index: 2;

    max-width: 750px;
    margin-left: 9%;

    color: white;
}

.section-label {
    margin-bottom: 18px;

    color: #a37c32;

    font-size: 12px;
    font-weight: bold;
    letter-spacing: 3px;
}

.activity-hero h1 {
    margin-bottom: 25px;

    font-family: Georgia, serif;
    font-size: 68px;
    font-weight: normal;
    line-height: 1.05;
}

.activity-hero p:last-child {
    max-width: 580px;

    color: #f3f1ed;

    font-size: 17px;
    line-height: 1.8;
}


/* introductie onder de hero */

.activity-intro {
    /* grid gebruiken voor rijen en kolommen */
    display: grid;
    /* 2 kolommen die beiden precies 50 % van de breedte geburiken */
    grid-template-columns: 1fr 1fr;
    /* 80px gap tussen de 2 kolommen */
    gap: 80px;

    padding: 100px 9%;

    background: white;
}

.activity-intro h2 {
    font-family: Georgia, serif;
    font-size: 52px;
    font-weight: normal;
    /* afstand tussen tekstregels */
    line-height: 1.1;
}

.activity-intro-description {
    padding-top: 10px;
}

.activity-intro-description p {
    margin-bottom: 25px;

    color: #625d57;

    font-size: 16px;
    line-height: 1.8;
}


/* categorie navigatie */

.activity-filter {
    padding: 55px 9%;

    background: #eee6d8;

    text-align: center;
}

.activity-filter .section-label {
    margin-bottom: 25px;
}

.filter-links {
    display: flex;
    /* horizontale verdeling */
    justify-content: center;
    /* als het niet meer past overspringen naar nieuwe regel */
    flex-wrap: wrap;
    gap: 12px;
}

.filter-links a {
    padding: 13px 22px;

    color: #840e0e;
    background: white;

    border: 1px solid #d8cdbb;

    text-decoration: none;
    font-size: 13px;

    transition: 0.3s;
}

.filter-links a:hover {
    background: #840e0e;
    color: white;
    border-color: #840e0e;
}


/* basis van iedere activiteit */

.activity-section {
    /* zorgt voor mooie grids en dan kolommen met 50/50 verdeling van plaatje en tekst */
    display: grid;
    grid-template-columns: 1fr 1fr;

    min-height: 620px;

    background: white;
}

.activity-section.reverse {
    /* tekst van rechts naar links */
    direction: rtl;
}

.activity-section.reverse .activity-content {
    /* tekst van links naar rechts */
    direction: ltr;
}


/* afbeelding van een activiteit */

.activity-image {
    position: relative;
    overflow: hidden;

    min-height: 620px;
}

.activity-image a {
    display: block;

    width: 100%;
    height: 100%;
}

.activity-image img {
    width: 100%;
    height: 100%;
    min-height: 620px;

    display: block;

    object-fit: cover;

    transition: transform 0.7s ease;
}

.activity-image:hover img {
    /* als je over afbeelding heen gaat wordt die ietsje groter */
    transform: scale(1.2);
}


/* laag die verschijnt als je over een foto gaat */

.image-overlay {
    position: absolute;
    inset: 0;

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

    background: rgba(40, 25, 20, 0.35);

    opacity: 0;

    transition: 0.35s;
}

.activity-image:hover .image-overlay {
    opacity: 1;
}

.image-overlay span {
    padding: 14px 25px;

    background: white;
    color: #840e0e;

    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;
}


/* tekstgedeelte van een activiteit */

.activity-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 75px 9%;
}

.activity-number {
    margin-bottom: 25px;

    color: #c9a227;

    font-family: Georgia, serif;
    font-size: 20px;
}

.activity-content h2 {
    margin-bottom: 25px;

    font-family: Georgia, serif;
    font-size: 52px;
    font-weight: normal;
    line-height: 1.1;
}
/* Rutger: AI nog erbij zetten */
.activity-content > p:not(.section-label) {
    max-width: 600px;
    margin-bottom: 18px;

    color: #625d57;

    font-size: 16px;
    line-height: 1.8;
}


/* informatie over afstand tijd en duur */

.activity-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 15px;

    margin: 20px 0 25px;
    padding: 20px 0;

    border-top: 1px solid #ddd6ca;
    border-bottom: 1px solid #ddd6ca;
}

.activity-info div {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.activity-info span {
    color: #888078;

    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.activity-info strong {
    color: #332c27;

    font-size: 13px;
}


/* tip bij iedere activiteit */

.activity-tip {
    display: flex;
    align-items: center;
    gap: 15px;

    margin: 5px 0 30px;
    padding: 14px 17px;

    background: #eee6d8;
    border-left: 3px solid #840e0e;
}

.activity-tip strong {
    color: #840e0e;

    font-size: 12px;
    white-space: nowrap;
}

.activity-tip span {
    color: #625d57;

    font-size: 13px;
    line-height: 1.5;
}


/* knop naar de officiële ticketpagina */

.activity-button {
    width: fit-content;

    padding: 15px 28px;

    background: #840e0e;
    color: white;

    text-decoration: none;

    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.5px;

    transition: 0.3s;
}

.activity-button:hover {
    background: #650909;
    transform: translateY(-2px);
}


/* afsluitende reserveringssectie */

.activity-ending {
    padding: 120px 20px;

    background:
        radial-gradient(
            circle at center,
            #fffdf8 0%,
            #eee6d8 100%
        );

    text-align: center;
}

.activity-ending h2 {
    margin-bottom: 25px;

    font-family: Georgia, serif;
    font-size: 55px;
    font-weight: normal;
    line-height: 1.1;
}

.activity-ending > p:not(.section-label) {
    max-width: 650px;
    margin: 0 auto 35px;

    color: #625d57;

    font-size: 16px;
    line-height: 1.8;
}

.booking-button {
    display: inline-block;

    padding: 17px 32px;

    background: #840e0e;
    color: white;

    text-decoration: none;

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

    transition: 0.3s;
}

.booking-button:hover {
    background: #650909;
    transform: translateY(-2px);
}


/* footer van de website */

.footer {
    padding: 65px 30px 30px;

    background: #241d19;
    color: #d8d0c7;

    text-align: center;
}

.footer-logo {
    margin-bottom: 12px;

    color: white;

    font-family: Georgia, serif;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 4px;
}

.footer > p {
    color: #aaa29a;

    font-size: 13px;
}

.footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 25px;

    margin: 30px 0;
}

.footer-links a {
    color: #d8d0c7;

    text-decoration: none;
    font-size: 13px;

    transition: 0.3s;
}

.footer-links a:hover {
    color: #c9a227;
}

.footer .copyright {
    padding-top: 25px;

    border-top: 1px solid #403831;

    font-size: 11px;
}


/* tablet versie */

@media (max-width: 1000px) {

    .head1 {
        padding: 0 30px;
    }

    .head1 nav {
        gap: 18px;
    }

    .activity-hero h1 {
        font-size: 55px;
    }

    .activity-intro {
        gap: 40px;
        padding: 80px 7%;
    }

    .activity-section {
        grid-template-columns: 1fr 1fr;
    }

    .activity-content {
        padding: 55px 7%;
    }

    .activity-content h2 {
        font-size: 43px;
    }

    .activity-info {
        grid-template-columns: 1fr;
        gap: 12px;
    }

}


/* mobiele versie */

@media (max-width: 750px) {

    .head1 {
        height: auto;
        min-height: 75px;

        padding: 15px 20px;

        flex-wrap: wrap;
        gap: 15px;
    }

    .head1 nav {
        order: 3;

        width: 100%;

        justify-content: center;
        flex-wrap: wrap;

        gap: 15px;
    }

    .header-buttons {
        margin-left: auto;
    }

    .login-button,
    .reserve-button {
        padding: 10px 13px;
    }

    .activity-hero {
        min-height: 500px;
    }

    .activity-hero-content {
        margin-left: 7%;
        margin-right: 7%;
    }

    .activity-hero h1 {
        font-size: 43px;
    }

    .activity-intro {
        grid-template-columns: 1fr;

        padding: 65px 7%;

        gap: 30px;
    }

    .activity-intro h2 {
        font-size: 42px;
    }

    .activity-filter {
        padding: 45px 7%;
    }

    .activity-section,
    .activity-section.reverse {
        display: flex;
        flex-direction: column;

        direction: ltr;
    }

    .activity-image {
        min-height: 400px;
    }

    .activity-image img {
        min-height: 400px;
    }

    .activity-content {
        padding: 55px 7%;
    }

    .activity-content h2 {
        font-size: 42px;
    }

    .activity-info {
        grid-template-columns: repeat(3, 1fr);
    }

    .activity-ending {
        padding: 80px 7%;
    }

    .activity-ending h2 {
        font-size: 43px;
    }

}


/* kleine telefoons */

@media (max-width: 500px) {

    .logo {
        font-size: 20px;
        letter-spacing: 3px;
    }

    .head1 nav {
        font-size: 12px;
    }

    .head1 nav a {
        font-size: 12px;
    }

    .activity-hero h1 {
        font-size: 37px;
    }

    .activity-hero p:last-child {
        font-size: 15px;
    }

    .activity-intro h2 {
        font-size: 36px;
    }

    .activity-content h2 {
        font-size: 36px;
    }

    .activity-info {
        grid-template-columns: 1fr;
    }

    .activity-tip {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .activity-ending h2 {
        font-size: 36px;
    }

    .footer-links {
        gap: 15px;
    }

}