@view-transition {navigation: auto;}

:root {
    --blue: #4565ad;
    --lightgreen: #d7ede6;
    --green: #82c7b1;
}

*, ::after, ::before {margin: 0; padding: 0; font-weight: 500; box-sizing: border-box;}
html {font-size: 15px; overflow: hidden; overflow-y: scroll; scroll-behavior: smooth;}
body {color: var(--blue); font-family: 'Libre Franklin', serif; background: white; font-size: 1.15rem; line-height: 1.5;}
a {color: var(--blue); text-decoration: none;}
a:hover {text-decoration: underline;}
li {list-style: none;}
img {width: 11.85rem; display: block; max-width: 100%; height: auto;}
h1 {font-size: 3.25rem; line-height: 1.2;}
h2 {font-size: 1.55rem; font-weight: 700; text-transform: lowercase; line-height: 1.25;}
h3 {font-weight: 700;}
p:not(:last-child) {margin-bottom: 1.35em;}
blockquote {font-style: italic; font-size: 1.2rem; margin-top: -1.5rem; line-height: 1.3;}
blockquote p {font-weight: 300;}
strong {font-weight: 700;}

section, .footer, .header {padding-inline: 2rem;}

.container {max-width: 67.5rem; margin-inline: auto; width: 100%; position: relative;} 
.container {padding-left: 19rem;}
.content .container > * {max-width: 39rem;}
.content .container.single h2 {font-size: 1.1rem; text-transform: none; margin: 0 0 0.15rem;}
.content .container.single h2:not(:first-child) {margin-top: 3rem;}
.content ul {margin-left: 1rem; margin-bottom: 1.35em;}
.content li {list-style: disc;}
.content section {padding-block: 3rem 3.5rem; position: relative;}

.header {padding-block: 0.65rem; border-top: 0.35rem solid var(--green);}
.header a:hover {text-decoration: none;}
.header .container {min-height: 6.25rem; display: flex; flex-direction: column; justify-content: flex-end;}
.header ul {display: flex; font-size: 1.25rem; justify-content: space-between;}
.header ul li a {font-weight: 600; text-transform: lowercase;}
.header .container > *:nth-child(1) {position: absolute; left: 0; margin-bottom: 0.4rem;}
.header .button {width: 3rem; position: absolute; height: 3rem; right: 0; top: 2rem; display: none; background: url(/img/menu.svg) center center / 80% auto no-repeat;}
body.menuopen .header .button {background-image: url(/img/close.svg);}

section:nth-child(1), .footer {background: var(--blue); color: white;}
.header {background: white;}
section:nth-child(2) {background: #f0f8fd url(/img/logo.svg) calc(50% + 20rem) -5rem / auto 250rem no-repeat;}
section:nth-child(3), section:nth-child(5) {background: var(--lightgreen);}
section#avond--en-weekenddienst {border-top: 2rem solid var(--blue); padding-block: 10rem;}

section#links {border-top: 2rem solid var(--blue); }

body.home section:nth-child(4)::before,
body.home section:nth-child(4)::after,
section:nth-child(3)::before,
section:nth-child(1)::before {
    content: "";
    background: url(/img/shape.svg) left center / auto 19rem no-repeat; 
    position: absolute; 
    pointer-events: none;
    left: 0;
    width: 100%;
    height: 100%;
    top: 0;
}
section:nth-child(1)::before {transform: scaleX(-1); background-size: auto 19rem;}
section:nth-child(3)::before {background-size: auto 27rem; background-position: left top;}
body.home section:nth-child(4)::before {background-image: url(/img/shape_blue.svg); background-size: auto 37rem; }
body.home section:nth-child(4)::after {background-image: url(/img/shape_blue2.svg); background-position: calc(50% + 15rem) bottom; background-size: auto 41rem; z-index: -1;}
section:nth-child(1) .container {min-height: 13rem; display: flex; flex-direction: column; justify-content: center;}
body.home section:nth-child(2) .container > blockquote,
section:nth-child(1) .container > :nth-child(1),
body.home section .container > h2 {position: absolute; left: 0; max-width: 11rem!important;}
section:nth-child(2) .container > blockquote,
section .container.small > h2 {margin-left: 5.5rem;}
section#links, section#het-team {padding-block: 3.5rem 3rem;}

section#het-team, section#het-team h3 {font-size: 0.9rem;} 
section#het-team .container {display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); grid-gap: 1.75rem 3rem;}
section#het-team div.person {list-style: none; text-align: center; position: relative; padding-bottom: 1rem;}
section#het-team div.person img {
    width: 100%; 
    border-radius: 100%; 
    overflow: hidden; 
    border: 0.3rem solid white; 
    aspect-ratio: 1; 
    object-fit: cover; 
    margin-bottom: 0.75rem;
}
section#het-team div.person > * {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
section#het-team blockquote {display: flex; flex-direction: column; justify-content: center;}

ul.links {margin: 0 0 1.5rem;}
ul.links a {font-weight: 700;}
ul.links li {list-style: none; position: relative; padding-left: 5.25rem; padding-bottom: 1.5rem;}
ul.links li:last-child {padding-bottom: 0;}
ul.links li img {width: 3.5rem; position: absolute; left: 0;}

.footer {padding-block: 2rem;}
.footer a {color: white;}
.footer a:hover {text-decoration: underline;}
.footer .container {padding-left: 0; display: flex; font-size: 0.95rem;}
.footer .container > div {flex: 4; border-left: 1px solid white; padding-left: 1.25rem; padding-bottom: 1.5rem;}
.footer .container > div:nth-child(1) {font-size: 1.25rem; flex: 6; border-left: 0; padding-left: 0;}
.footer .container > div:nth-child(2) {flex: 6;}
.footer .container > div:last-child {flex: auto}

@media only screen and (max-width:1100px) {
    section:first-child .container {padding-left: 15rem;}
    .header .container, section:not(:first-child) .container {padding-left: 0;}
    .header .container > :nth-child(1) {position: relative; margin-block: 1.5rem;}
    section::before {content: none!important;}
    body.home section:nth-child(2) .container > blockquote, body.home section .container > h2 {
        position: relative;
        max-width: 100%!important;
        margin-left: 0;
        margin-bottom: 1.5rem;
    }
    .content .container > * {max-width: 100%!important;}
    section#het-team {padding-top: 7.5rem;}
    section#het-team h2 {position: absolute; margin-top: -4rem;}
    .footer .container {display: block; columns: 2; padding-bottom: 1rem;}
    .footer .container > div {border: 0; padding: 1rem 0; break-inside: avoid-column;}
    blockquote {margin-top: 0;}
}

@media only screen and (max-width: 700px) {
    section#het-team, section#het-team h3 {font-size: 1rem;}
    .footer .container {font-size: 1.1rem;}
    .footer .container > div {padding: 1.35rem 0;}
    .footer .container > div:nth-child(1) {font-size: 1.5rem;}
    section, .footer, .header {padding-inline: 5vw;}
    .header ul li a {display: block; padding-block: 0.35rem;}
    .header .container > :nth-child(1) {margin-block: .5rem;}
    section:nth-child(1) .container {min-height: 0;}
    section:first-child .container {padding-left: 0;}
    section:nth-child(1) .container > :nth-child(1) {position: relative; margin-bottom: 1.5rem;}
    section:nth-child(1) .container > :nth-child(1) img {width: 7rem;}
    h1 {font-size: 2.5rem;}
    .content section:not(:first-child), section#avond--en-weekenddienst,
    section#links, section#het-team {padding-block: 4rem 4.5rem!important;}
    section#het-team {padding-top: 3.5rem;}
    section#het-team h2 {position: relative; margin-top: 0; margin-bottom: 2rem;}
    section#het-team .container {display: block; overflow: auto;}
    section#het-team .container div.person {float: left; max-width: 45%!important; padding-bottom: 2rem;}
    section#het-team .container div.person:nth-child(even) {margin-right: 5%;}
    section#het-team .container div.person:nth-child(odd) {margin-left: 5%;}
    section#het-team .container blockquote {float: left; padding-top: 1rem;}   
    .footer .container {columns: 1;} 
    .header ul {
        display: none; 
        position: absolute; 
        background: white; 
        width: calc(100% + 10vw); 
        z-index: 2;
        margin-inline: -5vw; 
        padding-inline: 5vw;
        padding-block: 1.5rem 3.25rem;
    }
    body.menuopen .header ul,
    .header .button {display: block;}
}