/* vars */
:root {
    --primary-color: #3c7dc1;
    --primary-color: #ffea02;
    --secondary-color: #3da53d;
    --background-accent: #e8e8e8;
    --color-text: rgb(23, 23, 23);

    --font-main: 'Helvetica Neue', sans-serif;
    --font-title: 'Helvetica Neue', sans-serif;
    --font-size-small: 8px;
    --font-size-regular: 16px;
    --font-size-bigsmall: 24px;
    --font-size-big: 32px;
    --font-size-bigger: 64px;

    --standardwidth: 840px;
    --standardgap: 20px;
}

/* general */
h1 {
    font-size: var(--font-size-bigger);
}
h2 {
    font-size: var(--font-size-big);
}
h3 {
    font-size: var(--font-size-bigsmall);
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
}
a, p, span, input, figcaption {
    margin: 0;
    padding: 0;
    font-family: var(--font-main);
    font-size: var(--font-size-regular);
}
a {
    color: var(--color-text);
}
.blockSection {
    padding: 40px;
    width: var(--standardwidth);
    margin: auto;
    max-width: calc(100% - 80px);
}
.blockSection .right li {
    margin-bottom: 10px;
}
.column .blocks figure {
    margin: 0;
    padding: 0;
}
.column .blocks figure ul {
    margin: 0;
    padding: 0;
}
.column .blocks figure ul li {
    list-style: none;
}
.column .blocks figure ul li img {
    width: 100%;
}
.column .blocks figure img {
    width: 100%;
}
#hero {
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    width: 100%;
    height: 400px; 
}
#title {
    display: grid;
    gap: var(--standardgap);
}
#title .left {
    display: grid;
    gap: var(--standardgap);
}

.no-scroll {
    overflow: hidden;
}
.block-type-text {
    display: grid;
    gap: 20px;
}

/* header */
#header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}
#header .menu-socials-container {
    display: flex;
}
#header .menu nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}
#header .menu nav ul li {
    padding: 20px;
}
#header .menu nav ul li a {
    color: var(--color-text);
    text-decoration: none;
}
#header .header-logo {
    width: 100%;
    max-width: 380px;
}

.menu-item {
    position: relative;
}

.submenu {
    margin-top: 20px !important;
    visibility: hidden; /* Hide submenu */
    opacity: 0;
    position: absolute;
    left: 0;
    background-color: #f9f9f9; /* Light grey background */
    min-width: 150px; /* Minimum width */
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2); /* Add some shadow */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Smooth transition for opacity and visibility */
    flex-direction: column;
}

.submenu li {
    padding: 0 !important;
}

.menu-item:hover .submenu {
    visibility: visible; /* Show submenu on hover */
    opacity: 1;
}

.submenu a {
    color: black; /* Ensure submenu links are visible */
    padding: 12px 16px; /* Padding for the links */
    text-decoration: none; /* Remove underline from links */
    display: block; /* Make the links block level for better click area */
}

.submenu a:hover {
    background-color: #ddd; /* Light grey background on hover */
}

#header .socials {
    display: flex;
    justify-content: end;
    padding-right: 12px;
    gap: 10px;
    align-items: center;
}
#header .socials .newsletter {
    align-items: center;
    display: flex;
    gap: 10px;
    padding: 10px 20px;
    background-color: var(--primary-color);
    /* font-weight: bold; */
    text-align: center;
    text-decoration: none;
    /* border-radius: 5px; */
    transition: background-color 0.3s ease;
    border: 1px solid var(--primary-color);
}
#header .socials .languages {
    display: flex;
    align-items: center;
    text-transform: uppercase;
    background: black;
}
#header .socials .languages a {
    text-decoration: none;
    color: white;
    padding: 10px 20px;
    border: 1px solid black;
}
#header .socials a svg {
    width: 16px;
    height: 16px;
}


/* home */
.home #hero {
    /* background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important; */
    width: 100%;
    height: 100%;
}
.home #hero img {
    width: 100%;
    height: 100%;
}
.home #title {
    text-align: center;
    gap: var(--standardgap);
    display: grid;
}
.home #title > iframe {
    width: 100%;
    height: 400px;
}
.home #infoImage {
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    width: 100%;
    height: 400px;
}
.home #agenda h2 {
    text-align: center;
}
.home #contact {
    display: grid;
    gap: var(--standardgap);
    background: var(--primary-color);
    margin: 0;
    width: 100%;
    text-align: center;
    padding: 0;
    max-width: 100%;
    padding-top: 40px;
}
.home #agenda {
    background-color: var(--background-accent);
    margin: 0;
    width: 100%;
}
.home #agenda .more-agenda {
    display: flex;
    justify-content: center;
}
.home #agenda .itemcontainer {
    display: grid;
    grid-template-columns: 33% 1fr 33%;
}
.home #agenda .itemcontainer article {
    margin: 20px;
    display: flex;
    flex-direction: column;
}
.home #agenda .itemcontainer article .top {
    display: grid;
    gap: var(--standardgap);
    margin-bottom: 10px;
}
.home #agenda .itemcontainer article .top .title {
    font-size: var(--font-size-big);
}
.home #agenda .itemcontainer article .featured-image img {
    width: 100%;
    margin-top: 10px;
}
.home #members .leden {
    margin-bottom: 20px;
}
.home #members .leden h2 {
    margin-bottom: 20px;
}
.home #members .leden .leden-grid-home {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-auto-flow: column;
    grid-template-rows: repeat(24, 1fr);
}
/* .home #members .leden .leden-grid-home .member {
    grid-column: span 1;
} */
.home #air {
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 0;
    width: 100%;
    max-width: 100%;
}
.home #air .air-home-img {
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    height: 400px;
}
.home #air .air-home-text {
    display: flex;
    gap: var(--standardgap);
    flex-direction: column;
    padding: 40px;
    justify-content: center;
    background-color: var(--primary-color);
}
/* .home #air .air-home-text a {
    color: white;
} */
.home #history {
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 0;
    width: 100%;
    max-width: 100%;
}
.home #history .history-home-img {
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    height: 400px;
}
.home #history .history-home-text {
    display: flex;
    gap: var(--standardgap);
    flex-direction: column;
    padding: 40px;
    justify-content: center;
}

/* about */
.about #title {
    display: grid;
    grid-template-columns: 80% 20%;
}
.about .block-type-text {
    width: 80%;
}

/* agenda */
.agenda #agenda h2 {
    margin-bottom: 20px;
    font-size: var(--font-size-bigger);
    text-align: center;
}
.agenda #agenda .itemcontainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;    
}
.agenda #agenda .itemcontainer article {
    display: flex;
    flex-direction: column;
}
.agenda #agenda .itemcontainer article .top {
    display: grid;
    gap: var(--standardgap);
    margin-bottom: 10px;
}
.agenda #agenda .itemcontainer article .top .title {
    font-size: var(--font-size-big);
    text-decoration: none;
    font-weight: bold;
}
.agenda #agenda .itemcontainer article .featured-image img {
    width: 100%;
    margin-top: 10px;
}
.clickable-article {
    cursor: pointer;
}

/* agenda item */
.agendaitem .related-posts h3 {
    margin-bottom: 20px;   
}
.agendaitem .related-posts .article-container {
    display: grid;
    grid-template-columns: repeat(3, calc((100% - 40px) / 3));
    gap: 20px;     
}
.agendaitem .related-posts .article-container article {
    display: flex;
    flex-direction: column;
}
.agendaitem .related-posts .article-container article .top {
    display: grid;
    gap: var(--standardgap);
    margin-bottom: 10px;
}
.agendaitem .related-posts .article-container article .top .title {
    font-size: var(--font-size-regular);
}
.agendaitem .related-posts .article-container article .featured-image img {
    width: 100%;
    margin-top: 10px;
}
.agendaitem .grid .blocks img {
    width: 100%;
}

/* leden */
.leden #members {
    padding-top: 0;
}
.leden #members .img-title {
    display: grid;
    gap: 10px;
}
.leden #members .lid {
    display: grid;
    gap: 80px;
}
.leden #members .lid .member img {
    width: 100%;
}
.leden #members .lid .member {
    display: grid;
    grid-template-columns: repeat(2, calc((100% - 20px) / 2));
    gap: 20px;  
}
.leden #members .lid .member .bio {
    display: flex;
    gap: 20px;
    flex-direction: column;
}
.leden #members .lid .member .bio .name {
    font-size: var(--font-size-bigsmall);
    font-weight: bold;
}
.leden #members .lid .member .social-icons svg {
    width: 20px;
}
.leden .email-link {
    text-decoration: none; /* Removes underline from link */
    display: inline-block; /* Prevents unintended characters and allows size control */
    font-size: 0; /* Removes space for text, preventing underscores */
}
.leden .email-link svg {
    display: block; /* Ensures SVG fills the container without extra space */
}
.leden #members-overview {
    padding-top: 0;
}
.leden #members-overview .leden .leden-grid-home {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-flow: column;
    grid-template-rows: repeat(32, 1fr);
    gap: 6px;
}

/* newsletters */
.newsletters .overzicht h1 {
    margin-bottom: 20px;
}

/* subscribe */
.subscribe .formulier h1 {
    margin-bottom: 20px;
}
#mc_embed_signup {
    background-color: #f0f0f0; /* Light grey background */
    padding: 20px;
    border-radius: 5px;
    max-width: 400px; /* Set a max-width for the form */
    margin: 20px 0; /* Center the form on the page */
    font-family: Helvetica, Arial, sans-serif; /* Helvetica as the primary font */
}

#mc_embed_signup form {
    display: grid;
    grid-gap: 15px; /* Spacing between form elements */
}

#mc_embed_signup_scroll {
    overflow: hidden;
}

.mc-field-group {
    display: flex;
    flex-direction: column; /* Stack the label and input vertically */
}

.mc-field-group label {
    font-weight: bold;
    margin-bottom: 5px; /* Space between label and input */
}

.mc-field-group input {
    padding: 10px;
    border: 1px solid var(--background-accent); /* Light grey border */
    border-radius: 4px; /* Rounded corners for inputs */
}

#mc_embed_signup .button {
    background-color: var(--color-text); /* Bootstrap primary color */
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px; /* Slightly larger font size for the button */
}

#mc_embed_signup .button:hover {
    background-color: #0056b3; /* Darker shade for hover effect */
}

.indicates-required {
    margin-bottom: 20px;
}

.indicates-required .asterisk {
    color: #ff0000; /* Red asterisk for required fields */
}

#mce-responses {
    margin-top: 10px;
}

.response {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid transparent;
    border-radius: 4px;
}

#mce-error-response {
    color: #ff0000; /* Red text for errors */
    background-color: #f8d7da; /* Light red background */
    border-color: #f5c6cb; /* Light red border */
}

#mce-success-response {
    color: #155724; /* Dark green text for success */
    background-color: #d4edda; /* Light green background */
    border-color: #c3e6cb; /* Light green border */
}

/* footer */
.footer {
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.footer p {
    display: flex;
    align-items: end;
}
.footer p .colofon {
    margin-left: 6px;
    margin-right: 6px;
    margin-bottom: 1px;
}
.footer img {
    width: 100%;
}
.footer .social-icons {
    display: flex;
    justify-content: end;
    align-items: end;
    gap: 10px;
}
.footer .social-icons a {
    width: 20px;
}

/* blocks */
.blocks {
    display: grid;
    gap: 20px;
}

/* swiperjs */
.swiper {
    padding: 40px;
    margin: auto;
}
.block-type-gallery {
    width: var(--standardwidth);
}
.swiper .swiper-slide img {
    width: 100%;
}
.swiper-button-next, .swiper-button-prev {
    color: black !important;
}

.swiper-button-next {
    right: var(--swiper-navigation-sides-offset, -40px) !important;
}
.swiper-button-prev {
    left: var(--swiper-navigation-sides-offset, -40px) !important;
}

/* youtube iframe */
.home #title > iframe {
    border: none !important;
}
/* vimeo iframe */
.blocks iframe {
    width: 100%;
    border: none !important;
    display: block;
    margin: 0 auto;
    height: 27vw;
}

/* search form and page */

.search-form {
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-input {
    flex: 1;
    padding: 10px 15px;
    border: 2px solid #e0e0e0;
    border-right: none;
    outline: none;
    color: #333;
    font-size: 16px;
}

input[type="search"], input[type="submit"] {
    border-radius: 0;
    -webkit-appearance: none; /* This line is for iOS Safari and Android Chrome */
}

.search-button {
    padding: 10px 20px;
    background-color: var(--background-accent);
    color: black;
    border: 2px solid var(--background-accent);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.zoeken {
    width: 420px;
    margin: auto;
    padding: 240px;
}

/* hamburger menu */
#menu-mobile-icon {
    display: none;
    margin-left: auto;
    margin-right: 12px;
    cursor: pointer;
    z-index: 99999;
}

@media only screen and (max-width: 1400px) {
    #header {
        display: flex;
        flex-direction: column;
        padding-bottom: 10px;
    }
    #header .menu nav ul li {
        padding: 10px;
    }
    .block-type-gallery {
        width: calc(100vw - 480px);
        margin: auto;
    }
}

@media only screen and (max-width: 1040px) {
    #header {
        display: flex;
        flex-direction: column;
        padding-bottom: 10px;
    }
    #header .menu nav ul li {
        padding: 10px;
    }
    .block-type-gallery {
        width: calc(100vw - 180px);
    }
}

/* used to be 840px */
@media only screen and (max-width: 1100px) {
    .search-button, .search-input {
        border: 1px solid grey;
    }
    .search-input {
        border-right: 0;
    }
    .zoeken {
        width: unset;
        padding: 20px;
    }
    .blockSection {
        padding: 20px;
        width: unset;
        max-width: unset;
    }
    h1{
        font-size: var(--font-size-big);
    }
    h2 {
        font-size: var(--font-size-bigsmall);
    }
    .footer {
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }
    #menu-mobile-icon {
        display: block;
    }
    .menu-socials-container {
        display: none !important;
        position: absolute;
        flex-direction: column;
        height: 100vh;
        width: 100vw;
        top: 0;
        left: 0;
        justify-content: center;
        background-color: var(--background-accent);
    }
    #header {
        display: grid;
        padding-bottom: 0;
    }
    #header .menu-socials-container.active {
        display: flex !important;
    }
    #header .menu-socials-container ul {
        display: flex;
        flex-direction: column;
    }
    #header .socials {
        justify-content: start;
        padding-left: 10px;
        flex-direction: column;
        align-items: start;
    }
    #header .menu-socials-container .submenu {
        background: white;
        z-index: 99999;
        margin-left: 8px;
        margin-top: 8px !important;
    }
    #header .menu-socials-container .socials > * {
        width: fit-content;
    }
    .home #history, .home #air, .leden #members .lid .member, .about #title {
        grid-template-columns: 1fr;
    }
    .home #agenda {
        width: auto;
    }
    .home #agenda .itemcontainer, .agenda #agenda .itemcontainer {
        grid-template-columns: 1fr;
    }
    .home .leden-grid-home, .leden #members-overview .leden .leden-grid-home {
        grid-template-columns: 50% 50% !important;
        grid-template-rows: repeat(56, 1fr) !important;
    }
    #header .header-logo {
        width: 90%;
    }
}

/* cookie banner */
/* Cookie Banner Styles with Animation */
#cookie_banner-wrapper {
    position: fixed;
    bottom: 20px;
    right: 20px;
    margin-left: 20px;
    background: var(--background-accent); /* Light background for the banner */
    color: var(--color-text); /* Text color */
    padding: 15px;
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    z-index: 1000; /* Ensure it's above other elements */
    display: flex;
    flex-direction: column;
    max-width: 340px;
    font-size: var(--font-size-regular);
    font-family: var(--font-main); /* Using the main font for consistency */
    animation: fadeInRight 0.8s both; /* Apply the fadeInRight animation */
}

@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

#cookie_banner-wrapper .cookie_message {
    margin-bottom: 15px; /* Space between message and button */
}

#cookie_banner-wrapper .cookie_message a {
    color: black; /* Use primary color for links */
    text-decoration: underline; /* Underlined links for clarity */
}

#cookie_banner-wrapper .cookie_message a:hover,
#cookie_banner-wrapper .cookie_message a:focus {
    color: var(--secondary-color); /* Secondary color on hover/focus */
}

#cookie_banner-wrapper .cookie_btn {
    background-color: #ffea02; /* Yellow background for the button */
    color: #222; /* Black text on the button */
    border: none; /* No border */
    padding: 10px 15px; /* Padding for touch targets */
    border-radius: 5px; /* Consistent rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    text-transform: uppercase; /* Uppercase text for emphasis */
    font-weight: bold; /* Bold font for button text */
    text-align: center; /* Centered text */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

#cookie_banner-wrapper .cookie_btn:hover,
#cookie_banner-wrapper .cookie_btn:focus {
    background-color: darken(#ffea02, 10%); /* Slightly darker yellow on hover/focus */
}

/* Hide the banner when printing the page */
@media print {
    #cookie_banner-wrapper {
        display: none;
    }
}