@layer colors-resets {
    :root {
        --text-color: hsl(0, 0%, 10%);
        --zwart-t: hsla(0, 0%, 10%, 0.9);
        --background-color: hsla(0, 0%, 98%, 1);
        --background-color-transparent: hsla(0, 0%, 98%, 0.7);
        --rood: hsl(358, 100%, 41%);
        --drood: oklch(47.366% 0.17734 29.15);
        --rood-transparent: hsla(358, 100%, 41%, 0.85);
        --grijs: hsl(0, 0%, 75%);
        --grijs-t: hsl(0, 0%, 75%, 0.5);
        --dgrijs: hsl(0, 0%, 60%);
        --blauw: rgb(53, 110, 179);
        --dblauw: rgb(16, 50, 245);
        --geel: hsl(54, 99%, 63%);
        --dgeel: hsl(54, 99%, 35%);
        --schaduw: 0px 4px 6px -2px var(--text-color);
        --warning: var(--geel);
        --wit: var(--background-color);
        /* dark mode  */
/*         
        --text-color: hsla(0, 0%, 98%, 1);
        --background-color:  #1a1a1a;
        --background-color-transparent: hsla(0, 0%, 98%, 0.2);
        --rood: var(var(--dgeel))
        */
    
    }
    :focus-visible{
        outline: 3px solid var(--blauw);
        outline-offset: 2px;
    }

    *,
    *::before,
    *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        position: relative;
    }

    img {
        max-width: 100%;
    }

    html {
        scroll-behavior: smooth;
        scroll-padding: 4rem;
    }
    html.contrast{
        --font: normal normal 700 normal 1.2em/1.6em ubuntu-bold, system-ui, -apple-system, 'Segoe UI', 'Helvetica'; 
        --rood:var(--drood);
        --blauw:var(--dblauw)    
    }
    a {
        color: inherit
    }

    .error-message {
        color: var(--rood);
    }

    .verberg {
        display: none;
    }

    ul,
    li,
    ol {
        list-style: none;
    }

    summary {
        list-style: none;
        cursor: pointer;
        padding-inline-start: 1.2em;
    }

    summary::marker {
        display: none;
    }

    main summary::before {
        content: url(../images/icon-plus.svg);
        position: absolute;
        inset-inline-start: 0;
        inset-block-start: 0;
        font-size: 1.5em;
        line-height: 1.2em;
        transform: translateY(0.05em);
    }

    main details[open] summary::before {
        content: url(../images/icon-min.svg);
    }

    /* screen reader only */
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        overflow: hidden;
        white-space: nowrap;
    }

}

@layer typografie {
    @font-face {
        font-family: alike;
        src: url(../fonts/alike_latin_400.woff2) format('woff2');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: ubuntu;
        src: url(../fonts/ubuntu_latin_400.woff2) format('woff2');
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: ubuntu-bold;
        src: url(../fonts/ubuntu_latin_700.woff2) format('woff2');
        font-weight: 700;
        font-style: normal;
        font-display: swap;
    }

    html{
        --font: normal normal 400 normal 1em/1.6em ubuntu system-ui, -apple-system, 'Segoe UI', 'Helvetica'; 
    }
    body {
          font: var(--font);
        /* font-family: 'ubuntu'; */
        /* font-weight: 400; */
        /* font-size: 1em; */
        /* line-height: 1.6; */
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: 'alike', 'Times New Roman', Times, serif;
        letter-spacing: 0.05em;
        color: var(--text-color);
    }

    .h2-style {
        font-size: 1.5em;
        font-weight: 100;
        margin-block: 1rem;
        padding: 0.5rem 1rem;
        text-align: center;
        background-color: var(--rood);
        color: var(--background-color);
        text-align: start;
    }
    .home h2{

        margin-inline: -1rem;
    }

    p {
        margin-block: 0.5lh;
    }

    .klein {
        font-size: 0.7em
    }

    a {
        color: inherit;
        text-decoration: none;
    }

    a:hover,
    a:focus {
        color: var(--geel);
    }
    main a:hover,
    main a:focus {
        color: var(--blauw);
        text-decoration: underline;
    }
}
@layer menu {
    nav {
        inline-size: 100cqw;
        position: fixed;
        z-index: 10;
        inset-block-start: 0;
        background-color: var(--rood);
        box-shadow:var(--schaduw);
    }

    .menu ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 1rem;
        padding: 0.5rem 1rem;
        /* background-color: var(--rood); */
        color: var(--wit);
        inset-inline-end: 0;
    }
    .menu-items a[aria-current="page"] {
            color: var(--geel);
            &:focus, 
            &:hover{
                color: var(--geel);
                cursor: default;
            }
    }
    .menu-items a{
        &:focus-visible {
            outline: 2px solid var(--wit);
            outline-offset: 4px;
        }
    }
    /* .menu-knop {
        inline-size: 30px;
        block-size: 30px;
        position: absolute;
        inset-inline-end: 15px;
        inset-block-start: 10px;
        z-index: 11;
        background-color: var(--rood);
    } */
    @media (max-width: 810px) {

        /* nav naar mobiel */
        nav {
            padding-top: 3rem;
            inline-size: fit-content;
            min-inline-size: 50px;
            block-size: fit-content;
            min-block-size: 45px;
            inset-inline-end: 0;
            background-color: var(--rood);
        }

        nav ul {
            flex-direction: column;
            align-items: flex-end;
            gap: 0.5em;
            /* inset-block-start: 0rem; */
            /* padding: 3rem 15px 15rem 2rem; */
            & li{
                margin-top: -0.5rem;
            }
        }


        nav summary::before {
            content: "";
            position: absolute;
            inset-inline-end: 8px;
            margin-block-start: -2.6rem;
            inline-size: 34px;
            block-size: 34px;
            background: url(../images/menu-gat.svg) no-repeat center/cover;
        }

        .menu-knop:hover{
            opacity: 0.7;
        }

        nav details[open] summary::before {
            /* content: url(../images/close-gat.svg); */
            background: url(../images/close-gat.svg) no-repeat center/cover;
            ;
        }
    }
}

@layer layout {

    body {
        font-family: 'ubuntu', 'system-ui', -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;
        color: var(--text-color);
        background-color: var(--background-color);
        min-inline-size: 100vw;
        min-inline-size: 100dvw;
        min-block-size: 100vh;
        min-block-size: 100dvh;
        background-image: url(../images/shantykoor-maritiem-bg.jpg);
        background-size: cover;
        background-position: top left;
        background-repeat: no-repeat;
    }

    header,
    footer,
    main,
    .content {
        max-inline-size: 1200px;
        background-color: var(--background-color);
        margin-inline: auto;
        padding: 1rem;
    }

    header {
        container: header / inline-size;
        padding-inline: 0rem;
        padding-block-end:  3rem;
        background-color: var(--rood-transparent);
    }

    .logo {
        position: absolute;
        inset-inline-start: 4%;
        inset-block-end: 0.5rem;
        inline-size: 17%;
        z-index: 5;
    }

    .hero-img {
        margin-block-start: 2rem;
        width: 90%;
        inset-inline-start: 5%;
    }

    .tekst-blok {
        max-inline-size: 80ch;
        margin: auto;
        padding: 0 1%;
    }

    .content {
        display: grid;
        grid-template-columns: 1fr 19rem;
        grid-template-areas:
            "main aside";
        gap: 2rem;
        padding-inline: 2rem;
    }

    main {
        grid-area: main;
        background-color: var(--background-color-transparent);
        /* background-color: var(--wit); */
    }

    .main-content-welkom,
    .main-content-nieuws, 
    .main-content-video {
        margin-block-start: 2rem;
    }

    .iframe-wrapper {
        inline-size: 90%;
        margin-inline: 5%;
        border-radius: 8px;
        position: relative; 
    }

    .iframe-wrapper iframe {
        inline-size: 100%;
        aspect-ratio: 16 / 9;
        border-radius: 8px;
    }

    .iframe-wrapper:focus-visible,
    .iframe-wrapper:hover {
        outline: 3px solid var(--blauw);   
        outline-offset: 3px;
        border-radius: 8px;            
    }

    .main-content-sidebar {
        grid-area: aside;
        margin-inline-start: 0.5rem;
        margin-block-start: 2rem;
    }
    .logos-vrienden{
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
    }
    /* Focus zaken 
        Zorg dat img zelf geen focus-outline krijgt */
    .logos-vrienden img:focus,
    .logos-vrienden img:focus-visible {
        outline: none;
    }
    /* Outline op de a, met display inline-block zodat de box klopt */
    .logos-vrienden a{
        display: inline-block;        /* belangrijk voor juiste outline */
    }
    /* Focus / keyboard navigatie */
    .logos-vrienden a:focus-visible {
        outline: 3px solid var(--blauw); 
    }
    /* Hover voor muisgebruik */
    .logos-vrienden a:hover {
        outline: 3px solid var(--blauw);
    }

    .tekst-blok ul{
        margin-block: 1rem;
        & li{
            list-style:disc;
            margin-inline-start: 4ch;
        }
    }
    .main-content-sidebar img {
        width: 142px;
    }

    footer {
        display: flex;
        justify-content: space-between;
        align-items:center;
        font-size: 0.8rem;
        padding: 0.5rem 1.5rem;
        background-color: var(--rood);
        color: var(--wit);

        & img {
            inline-size: 30px;
            vertical-align: middle;
            margin-inline-end: 0.5rem;
        }

        & .counter {
            /* position */
            inset-inline: 0;
            margin-inline: auto;
            /* border: 1px solid red; */
            color: white;
            background-color: black;
            inline-size: 60px;
            font-size: 0.9em;
            font-weight: bold;
            text-align: right;
            letter-spacing: 0.9px;
        }
        & a {
            &:focus-visible {
            outline: 3px solid var(--wit);
            outline-offset: 3px;
            text-decoration: none;
            }
        }
    }
    

    
    @media (max-width: 810px) {

        .content, footer {
            display: flex;
            flex-direction: column;
        }

        .main-content-sidebar .logos-vrienden {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1rem;
        }
    }
}

@layer agenda {
    .agenda-item {
        max-inline-size: 95%;
        margin-block-start: 1rem;
        margin-inline-start: 5%;
        display: flex;
        flex-wrap: wrap;
        gap: 4%;
    }

    .agenda-details {
        inline-size: calc(90% - 3.5rem);
        min-inline-size: 280px;
        border: 1px solid var(--grijs);
        background-color: var(--background-color-transparent);
        border-radius: 8px;
        padding-inline: 10px;
        overflow: hidden;
        min-block-size: 4.3rem;
    }

    .datesign {
        display: flex;
        flex-direction: column;
        /* inline-size: 5%; */
        min-inline-size: 3.5rem;
        block-size: 4.5rem;
        block-size: fit-content;
        /* margin: 2px; */
        border-radius: 8px;
        /* outline: var(--grijs) 1px solid  ; */
        overflow: hidden;
        font-family: sans-serif;
        text-align: center;

        &.datesign .maand {
            background: var(--rood);
            color: var(--background-color);
            font-weight: bold;
            text-transform: uppercase;
            padding: 1px 0;
            font-size: 0.8rem;
        }
        &.datesign .dag {
            background: linear-gradient(180deg, hsl(0, 0%, 98%), hsl(0, 0%, 90%));
            color: var(--text-color);
            font-size: 1.5em;
            /* line-height: 1em; */
            font-weight: bold;
            /* padding-block: 5px; */
            overflow: hidden;
        }
        &.datesign .tijd {
            background: linear-gradient(180deg, hsl(0, 0%, 90%), hsl(0, 0%, 75%));
            color: var(--text-color);
            font-size: 0.8rem;
            font-weight: bold;
            /* padding: 1px 0; */
        }
    }
    @media (max-width: 407px) {
        .agenda-details{
            margin-block-start: 0.5rem;
            inline-size: 100%;
        }
    }
}

@layer bestuur {
    .card-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: start;
        gap: 1rem;
        margin-block: 2rem;
    }

    .card {
        border: 1px solid var(--grijs);
        box-shadow: 2px 2px 5px var(--grijs);
        background-color: var(--background-color-transparent);
        padding: 1rem;
        inline-size: 13rem;
        border-radius: 5px;
    }

}

@layer formulier {

    .formulier {
        border: 4px solid var(--grijs);
        inline-size: 100%;
        padding: 5%;
        background-color: var(--background-color-transparent);
    }

    input,
    textarea {
        position: relative;
        border: 1px solid #7D7D7D;
        background: #EFEFEF;
        margin-block-end: 1rem;
        width: 96%;
        height: 1lh;
        font: inherit;
        padding-inline-start: 0.5rem;
    }

    textarea {
        width: 96%;
        height: 3lh;
    }

    .verzendknop {
        background-color: var(--rood);
        color: var(--background-color);
        font-size: 1rem;
        block-size: 2rem;
        border: none;
    }
}