/* =========================================================== */
/* ======================= THEME LIGHT ======================= */
/* =========================================================== */
:root {
    /* Font sizes */
    --font-size-h1:    3rem;
    --font-size-h3:    2rem;
    --font-size-body:  .95rem;
    --font-size-lead:  2.5rem;
    --line-height-h1:  1;

    /* Labels (h2 in een sectie) */
    --label-font-weight: 400;
    --label-line-height: var(--line-height-regular);
    --label-padding-bottom: .4rem;
    --label-margin-bottom: 3.5rem;

    /* Widths */
    --gutter-side: 3.25rem;
    --max-width: 93.5rem;
    --max-width-medium: 73.5rem;
    --header-gutter-side: 2.25rem;
    --header-max-width: 95.5rem;

    /* Margins */
    --section-padding-top: 4rem;
    --header-padding-block: 1.1rem .75rem;
    --nav-gap: 2rem;

    /* Borders */

    /* Logos */
    --logo-width: calc(2rem * 178 / 60);
    --footer-logo-width: calc(3.75rem * 178 / 60);

    /* Footer */
    --footer-color: var(--my-soft-white);
    --footer-font-size: .85rem;
    --footer-large-font-size: 3rem;
    --footer-large-font-weight: 400;
    --footer-large-padding: 3rem 8.5rem 3rem 3rem;
    --postfooter-padding-block: 2rem;
    --postfooter-font-size: .8rem;
}

/* =========================================================== */
/* ========================= GENERAL ========================= */
/* =========================================================== */
:is(ul,ol,p) a { text-decoration-color: var(--my-black-20); }
img { max-width: 100%; display: block; }

h1 { margin-bottom: 2rem; }
h3 { margin-block: 4rem 1.5rem; }
.reveal.visible h2 { border-color: var(--my-black-20); }

/* Bullets '>' op alle lijsten uit de content. */
main ul:not([class], nav ul) { position: relative; margin-bottom: 1.6em; }
main ul:not([class], nav ul) > li { padding-block: .25rem; padding-left: 1.1rem; }
main ul:not([class], nav ul) > li::before { content: '>'; position: absolute; margin-left: -1.1rem; }

/* --------------- LOGO --------------- */
.logo :is(img, svg) { margin-block: .2rem; }

/* --------------- BUTTONS --------------- */
:is(a, .news-more button, .deliveries-more button, form button).btn { display: inline-flex; align-items: center; padding: .5em 1.5em .5em 0; border-radius: 0; text-decoration: none; position: relative; font-size: 1rem; font-weight: 400; text-align: left; isolation: isolate; }
:is(a, .news-more button, .deliveries-more button).btn, :is(a, .news-more button, .deliveries-more button).btn:hover, :is(a, .news-more button, .deliveries-more button).btn.reversed:not(:hover) { background: transparent; color: inherit; }
:is(a, .news-more button, .deliveries-more button, form button).btn::after { content: ""; position: absolute; right: 0; display: inline-flex; width: 1rem; height: 1rem; background: url('/img/arrow-right-small-black.svg') 51% 50% / .9rem auto no-repeat; }
.deliveries-more .btn.plus::after { background-image: url('/img/plus-black.svg'); }
:is(section.overlay, section.dark) a.btn::after { background-image: url('/img/arrow-right-small-white.svg'); }

/* --------------- SECTIONS --------------- */
section { overflow: clip; }
section:first-of-type { padding-top: var(--section-padding-top); }
section.white { background: var(--my-white); }

/* Lead: de eerste alinea van een sectie. */
section .container > p:first-child:not(:has(img)) { max-width: 20em; margin-bottom: 1.75em; font-size: var(--font-size-lead); font-weight: var(--font-medium); line-height: var(--line-height-small); }
section .container > p:only-child:not(:has(img)) { margin-bottom: 0; }

/* Kop links, tekst rechts (brick side-heading). */
section.side-heading .container {
    & > h3:first-child { position: absolute; max-width: calc(50% - 6.5rem); margin: 0; }
    & > h3:first-child ~ * { padding-left: 50%; }

    @media only screen and (max-width: 1000px) {
        & > h3:first-child { position: relative; max-width: 100%; margin-bottom: .3em; }
        & > h3:first-child ~ * { padding-left: 0; }
    }
}

/* Label met een grote kop eronder (bricks heading en has-team). */
section:is(.heading, .has-team) {
    & .container { max-width: var(--max-width-medium); }
    & h3 { position: relative; font-size: 2.5rem; margin-bottom: 1rem; }
    & h3 ~ :not(ul.team) { max-width: 40rem; color: var(--my-body); }

    @media only screen and (max-width: 1000px) {
        & h3 { font-size: var(--font-size-h3); }
    }
}

/* Foto in de tekst: vaste verhouding, of onder de kop links als de sectie met een h3 begint. */
img.parallax { --parallax-ratio: 2.5; }
p:has(> img.parallax) { margin-bottom: 3rem; }
section.with-image .container { display: flow-root;
    & > h3:first-child { position: relative; float: left; width: calc(50% - 6.5rem); }
    & > p:has(> img.parallax) { float: left; clear: left; width: calc(50% - 6.5rem); margin-top: 2rem; padding-left: 0; }
    & img.parallax { aspect-ratio: auto; }

    @media only screen and (max-width: 1000px) {
        & > :is(h3:first-child, p:has(> img.parallax)) { float: none; width: auto; }
    }
}

:where(main > section:first-of-type:not(.page):has(h1)) .container { max-width: var(--max-width-medium); }
section:not(.page) h1 + p:not(:has(img)) { max-width: 45.5rem; }
h1 + p + h2 { padding-top: 1rem; }

/* --------------- DARK SECTIONS --------------- */
section.dark a:not(.btn) { color: var(--my-soft-white); text-decoration-color: var(--my-white-40); }

/* =========================================================== */
/* ========================= HEADER ========================== */
/* =========================================================== */
header { font-size: .85rem; }

@media (max-width: 1000px) {
    header .container nav ul { top: 3.1rem; bottom: auto; height: 0; opacity: 0; transform: none; z-index: auto; transition: height .15s ease-in-out; }
    header .container nav ul li a { font-size: 1.25rem; }
    body.menuopen header .container nav ul { height: 21rem; transform: none; }
    body.menuopen header .container nav ul li { transition: opacity .3s ease-in-out .15s; }

    body::after { content: ""; position: fixed; inset: 0; z-index: 5; background: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; }
    body.menuopen::after { opacity: 1; pointer-events: all; transition: opacity .25s ease-in-out; }
}

/* =========================================================== */
/* ========================= FOOTER ========================== */
/* =========================================================== */
footer { background: var(--my-full-black); border-top: 1px solid var(--my-white-40); }
/* Rand op zwart, het bovenste deel over de hele breedte #1c1c1c. */
footer > .container { background: var(--my-black); box-shadow: 0 0 0 100vmax var(--my-black); clip-path: inset(0 -100vmax); }
footer .left { padding: 3rem 3rem 4rem 0; justify-content: space-between; line-height: 2; max-width: unset; }
footer .left .logo { filter: invert(1) brightness(1.1); }
footer .left address { padding-top: .25rem; line-height: 1.6; }
footer .left > ul { padding-right: 6rem; }
footer .left > ul > li { margin-bottom: 0; }
footer .left > ul > li:first-of-type { font-size: 110%; }

footer a.large { display: block; }
footer a.large::after { position: absolute; top: 3rem; right: 3.25rem; width: 4rem; height: 3.5rem; }

footer .postfooter ul { gap: 1rem 2rem; }

@media only screen and (min-width: 1001px) {
    footer .container { grid-template-columns: calc((100% + 3rem + 1px + var(--gutter-side)) / 2) 1fr; grid-template-rows: auto 1fr; }
    footer .large { margin-right: calc(var(--gutter-side) * -1); }
    footer .large:nth-child(2) { border-bottom: 1px solid var(--my-white-40); }
    footer .large:nth-child(2)::before { bottom: -1px; left: 100%; width: max(0px, calc(50vw - 50rem)); }
}
@media only screen and (max-width: 1100px) {
    footer a.large { font-size: 2.25rem; }
}
@media only screen and (max-width: 1000px) {
    footer .left { grid-template-columns: auto auto; }
    footer .left .logo { margin-top: 2rem; }
    footer .left > ul { padding-right: 0; }
    footer a.large { margin-inline: calc(var(--gutter-side) * -1); padding: 3rem var(--gutter-side) 4rem; }
    footer a.large:last-child { margin-bottom: 3rem; }
    footer a.large:nth-child(2) { border-block: 1px solid var(--my-white-40); }
    footer a.large:nth-child(2)::before { content: none; }
    footer a.large::after { right: var(--gutter-side); }
}
@media only screen and (max-width: 900px) {
    footer .postfooter .container { flex-direction: column-reverse; align-items: flex-start; gap: 1rem; }
    footer .postfooter ul { order: 0; justify-content: flex-start; margin-bottom: 0; }
}
@media only screen and (max-width: 600px) {
    footer .postfooter ul { gap: 1rem; }
}
@media only screen and (max-width: 500px) {
    footer .left { padding-right: 0; }
}

/* =========================================================== */
/* ====================== HEADER-BRICK ======================== */
/* =========================================================== */
section:is(.video-header, .image-header) { padding-block: 0; background: var(--my-white);
    & .container { width: calc(100% - var(--header-gutter-side) * 2); max-width: var(--header-max-width); }
    & .media { position: relative; margin-bottom: 2.5rem; }
    & :is(video, .media img) { height: 100%; aspect-ratio: 1.85; object-fit: cover; animation: header-parallax linear; animation-timeline: view(); }

    @media (max-width: 1000px) {
        & .media { margin-bottom: 1.65rem; }
        & :is(video, .media img) { aspect-ratio: 1.9; }
    }
    @media (max-width: 600px) {
        & :is(video, .media img) { aspect-ratio: .9; }
    }
}
/* Header met kop en tekst onder de foto; de sectie erna zet zijn inhoud rechts. */
section.image-header { padding-bottom: 5rem;
    & h1 { margin-block: 5rem 2rem; }
    & .container > h1 ~ p { max-width: 30em; }
}
section.image-header + section .container > * { max-width: 40rem; margin-left: auto; }
/* Op mobiel wordt de eerste alinea na een label groot, zoals Helsinki doet (niet in posts en juridische pagina's). */
@media only screen and (max-width: 1000px) {
    body:not(.posts) section:not(.page) .container > h2 + p:not(:has(img)) { font-size: 1.5rem; line-height: var(--line-height-regular); }
}
@keyframes header-parallax { from { object-position: center bottom; } to { object-position: center top; } }

/* =========================================================== */
/* ====================== FEATURED IMAGE ===================== */
/* =========================================================== */
section.featured-image {
    & h1 { margin-block: 1rem 4rem; line-height: var(--line-height-h1); }
    & .container:last-child > div:first-child { padding-right: 6.5rem; }
    & .container:last-child > div:last-child { overflow: hidden; }
    & .container:last-child > div:last-child > p:first-child { max-width: 33.5em; margin-bottom: 1.2em; font-size: var(--font-size-lead); font-weight: var(--font-medium); line-height: var(--line-height-small); }
    & img.parallax { aspect-ratio: auto; }

    @media (max-width: 1200px) {
        & .container:last-child { flex-direction: column-reverse; }
        & .container:last-child > div:first-child { padding: 4rem 0 0; }
    }
    @media (max-width: 1000px) {
        & h1 { margin-bottom: var(--label-margin-bottom); }
    }
}

/* =========================================================== */
/* ========================== PAGE =========================== */
/* =========================================================== */
body:has(section.page) :is(header .logo svg, header button) { filter: invert(1) brightness(1.08); }
section.page .container { max-width: calc(52rem - var(--gutter-side) * 2); padding-block: 0 3rem; }
section.page h1 { margin-block: 3rem 4rem; }
section.page h1 + p { font-size: 1.5rem; font-weight: var(--font-medium); line-height: 1.4; }
main section.page h2 { margin-block: 5rem 1.5rem; padding-bottom: 0; border: 0; font-family: var(--header-font); font-size: 1.7rem; font-weight: var(--font-medium); line-height: var(--line-height-small); text-transform: none; }
main section.page h1 + h2 { margin-top: 0; }
section.page h3 { position: relative; max-width: 100%; margin-block: 3rem .5rem; font-size: 1.15rem; }

/* 404: het theme zet de titel in een eigen intro-sectie boven de pagina. */
main > section.intro:has(+ section.page) { padding-block: var(--section-padding-top) 4rem; background: var(--my-black);
    & .container { max-width: calc(52rem - var(--gutter-side) * 2); }
    & h1 { margin-block: 3rem 0; }
    & + section.page { padding-top: 0; }
    & + section.page .container > p:first-child { max-width: none; margin-bottom: 1.6em; font-size: 1.5rem; line-height: 1.4; }
}

@media (max-width: 600px) {
    section.page { padding-top: 2.5rem; }
    section.page h1 { margin-block: .5rem 2.5rem; }
    main > section.intro:has(+ section.page) { padding-block: 2.5rem; }
    main > section.intro:has(+ section.page) h1 { margin-top: .5rem; }
}

/* --------------- NUMBERS --------------- */
/* Getallen doen mee met de grijs/wit-afwisseling. */
section.has-numbers:nth-of-type(even) { background: var(--my-soft-white); }
section.has-numbers:last-child .container { max-width: var(--max-width-medium); }
ul.numbers {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin: 0 1px 0 0; 
    & > li { container-type: inline-size; padding: 2rem; background: var(--my-white-40); color: inherit; }
    & h3 { margin: 0; font-size: min(3.5rem, 30cqi); line-height: 1.1; }
    & p { max-width: 11em; margin: 0; color: var(--my-dark-gray); }

    @media only screen and (max-width: 1100px) {
        & > li { padding: 1.5rem; }
        & h3 { font-size: min(2.75rem, 30cqi); }
    }
    @media only screen and (max-width: 768px) {
        grid-template-columns: 1fr 1fr;
        & > li { padding: 2rem 1rem; }
        & > li:last-of-type:nth-of-type(odd) { grid-column: -1 / 1; }
        & > li:last-of-type:nth-of-type(odd) p { max-width: 12em; }
        & h3 { font-size: min(2.5rem, 30cqi); }
    }
}


/* --------------- FACILITY --------------- */
section.has-facility { background: var(--my-full-black);}
section.has-facility > .container { max-width: var(--max-width-medium);  padding: 3rem 0 0 0;}
section.has-facility > .container > h2:first-child { margin-bottom: 3rem;}

/* --------------- OVERLAY --------------- */
section.overlay > img {
    @media only screen and (max-width: 1000px) { --parallax-ratio: 1.9; }
    @media only screen and (max-width: 600px) { --parallax-ratio: 1; }
}

/* --------------- TIMELINE --------------- */
@media only screen and (max-width: 1000px) {
    .timeline h3 { font-size: 1.5rem; }
}

/* --------------- STEPS --------------- */
section.steps { padding-top: 0; }
@media only screen and (max-width: 1000px) {
    section.steps .container ol h3 { font-size: 1.5rem; }
}

/* --------------- ACCORDION --------------- */
ul.accordion > li > div > :first-child { padding-bottom: .75rem; }
ul.team > li > div > div { color: var(--my-body); }

/* --------------- CONTACT ACCORDIONS --------------- */
section.has-contact-accordions .container { max-width: var(--max-width-medium); }
@media only screen and (max-width: 1000px) {
    ul.accordion.contact-accordion .h1 { font-size: 1.5rem; }
}

/* --------------- NEWS --------------- */
ul.news {
    grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr)); margin-top: 0;
    & > li { display: flex; flex-direction: column; gap: 0; color: var(--my-black); transition: all .25s ease-in-out; }
    & > li:hover { background: rgba(0, 0, 0, .1); }
    & .author, & .md { display: none; }
    & .meta { align-self: flex-start; line-height: inherit; }
    & .more { height: 0; }
    & :is(.type, time) { font-size: .85rem; font-weight: 400; letter-spacing: .025em; }
    & .type { display: block; text-transform: capitalize; }
    & .more::before { content: ""; position: absolute; right: 1.75rem; bottom: 1.75rem; width: 2.5rem; height: 2.5rem; border-radius: 100%; background: var(--my-white) url(/img/news-arrow-right.svg) 53% center / .9rem auto no-repeat; }
    & .title { display: -webkit-box; margin: 0 0 3rem; padding-top: 1.4rem; font-size: 1.75rem; overflow: hidden; overflow-wrap: break-word; hyphens: auto; -webkit-box-orient: vertical; -webkit-line-clamp: 5; }
}

/* --------------- NEWS LIST --------------- */
section.has-news:first-child .container { max-width: var(--max-width-medium); }
section.has-news h1 + p { max-width: 48rem; margin-top: 1.25rem; font-size: 1.25rem; line-height: 1.5; opacity: .8; }
section.has-news h1 ~ h2 { margin-top: 2.5rem; }
ul.news[data-show] > li { aspect-ratio: 1; }
ul.news.careers .title { font-size: 1.5rem; }
ul.news .location { font-size: .85rem; font-weight: 400; letter-spacing: .025em; }

/* --------------- POST --------------- */
body.posts main section .container { max-width: calc(58rem - 2 * var(--gutter-side)); }
body.posts section.intro { padding-top: var(--section-padding-top); }
body.posts section.intro + section { padding-block: 0; }
body.posts section.intro p:has(img) { margin-bottom: 3rem; }
body.posts section.intro p:first-child { display: flex; flex-direction: column; max-width: none; margin-bottom: 4rem; padding-bottom: 1rem; border-bottom: 1px solid var(--my-black-40); font-size: .85rem; font-weight: 400; line-height: inherit; letter-spacing: .025em; }
body.posts section.intro .type { text-transform: capitalize; }
body.posts section.intro time { font-family: inherit; color: inherit; opacity: .5; }
body.posts section.intro h1 { margin-bottom: 3rem; }
body.posts section:not(.intro) .container > p:first-child { max-width: none; margin-bottom: 1.6em; font: inherit; }
body.posts section.intro + section:last-child { padding-bottom: 5rem; }
body.posts main section:not(.h2-normal) :is(h2, h3) { position: relative; max-width: none; margin-block: 3rem .5rem; padding-bottom: 0; border: 0; font-family: var(--header-font); font-size: 1.15rem; font-weight: var(--font-medium); line-height: var(--line-height-small); letter-spacing: 0; text-transform: none; }
body.posts main section:not(.h2-normal) h2 { margin-block: 4rem 1rem; font-size: 1.7rem; }
body.posts main strong { font-weight: 400; }
@media only screen and (max-width: 1000px) {
    body.posts main section:not(.h2-normal) h3 { font-size: 1.5rem; }
}
.post-author { margin-block: 4rem 9rem; padding-block: 0; font-size: .85rem; font-weight: 400; letter-spacing: .025em;
    & img { display: block; width: 4.5rem; margin-bottom: 1rem; border-radius: 100%; }
    & .author-info { opacity: .5; }
}

/* --------------- PROJECTS --------------- */
:is(section.has-projects, section.has-deliveries) .container { max-width: var(--max-width-medium); }

/* --------------- MEDIA QUERIES --------------- */
/* MAX */
@media only screen and (max-width: 1000px) {
    :root {
        --gutter-side: 1.25rem;
        --header-gutter-side: 1.25rem;

        --font-size-h1:    2.5rem;
        --font-size-h3:    1.5rem;
        --font-size-lead:  1.5rem;
        --label-font-size: 1rem;
        --label-margin-bottom: 2rem;
    }

    h3 { margin-bottom: 2rem; }
    section.page h3 { font-size: var(--font-size-h3); }
    nav.pages h3 { font-size: 1rem; }
    img.parallax { --parallax-ratio: 1.9; }
}
@media only screen and (max-width: 450px) {
    :root { --root-font-size: 4vw; }
}