body,
html {
    margin: 0;
    padding: 0;
    font-optical-sizing: auto;
    scroll-behavior: smooth;
}

body {
    overflow: auto;
    position: relative;
    height: 100dvh;

    & :target {
        scroll-margin-top: 30px;
    }
}

* {
    box-sizing: border-box;
}

a {
    transition: all .2s;

    &:hover {
        /* text-decoration: underline; */
    }
}

/* Accessibility */
.skip-link {
    z-index: 999;
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    padding: 1em;
    font-size: var(--wp--preset--font-size--default);
    background-color: var(--wp--preset--color--white);
    border: 2px solid var(--wp--preset--color--white);
    transform: translateX(-101%) translateY(50px);
    transition: transform .3s ease !important;
}

.skip-link:active,
.skip-link:focus {
    transform: translateX(50px) translateY(50px);
}

button:focus,
input:focus,
a:focus {
    outline: 2px dashed #000;
    z-index: 1010;
    outline-offset: 0;
    -webkit-box-shadow: 0 0 0 2px #fff;
    box-shadow: 0 0 0 2px #fff;
}

main a:hover,
footer a:hover {
    text-decoration: underline;
}


a:not([href]) {
    pointer-events: none;
}

/* Gutenberg width */
body>main {
    /* padding-top: 2em; */
    display: flex;
    flex-direction: column;

    &>* {
        margin-inline: max(calc((100% - var(--wp--style--global--content-size)) / 2), 12px);
    }

    &>.alignfull {
        margin-inline: 0;
    }

    &>.aligncenter {
        margin-inline: auto;
    }

    &>.alignwide,
    &>.rank-math-breadcrumb {
        margin-inline: max(calc((100% - var(--wp--style--global--wide-size)) / 2), 12px);
    }

    & .paginate {
        text-align: center;
        padding: 1em;

        & .page-numbers {
            padding: 0.25em 0.5em;
            border: 1px solid var(--wp--preset--color--blauw);
            text-decoration: none;
            color: var(--wp--preset--color--blauw);

            &:hover {
                color: var(--wp--preset--color--wit);
                background-color: var(--wp--preset--color--oranje);
                border: 1px solid var(--wp--preset--color--oranje);
            }
        }

        & .page-numbers.current {
            color: var(--wp--preset--color--wit);
            background-color: var(--wp--preset--color--oranje);
            border: 1px solid var(--wp--preset--color--oranje);
        }
    }
}

body>header {
    position: absolute;
    z-index: 1001;
    top: 1.5rem;
    width:min(var(--wp--style--global--wide-size), calc(100% - 24px));
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-inline: max(calc((100% - var(--wp--style--global--wide-size)) / 2), 12px);

    & span {
        display:none;
    }
    .button{
        margin-left: auto;
        border:3px solid var(--wp--preset--color--white);
        border-radius:4px;
        text-decoration: none;
        padding:0.6rem 0.6rem;
        text-transform: uppercase;
        &:hover{
            background-color: white;
            color:black;;
        }
    }
}

/* Gutenberg width */

footer .alignwide {
    margin-inline: max(calc((100% - var(--wp--style--global--wide-size)) / 2), 12px);
}