/*
 * Koffiemanie: the look of the WordPress (Oxygen) site. Headings in Nunito, text in Lato, coffee browns.
 * Sections: 1 tokens, 2 base, 3 layout (container, header with the logo diamond, phone menu, footer, post and page
 * columns), 4 components (post header, "Lees ook" pills, table of contents, author box, video and product blocks,
 * page title, post rows, pagination), 5 content (the Markdown in .content and .page-content, tables),
 * 6 pages (text pages, author, het team, contact, home).
 * Breakpoints, as on WordPress: 1120px (home grid), 991px (phone menu, one column), 767px, 600px (tables), 479px (phones).
 */

/* 1. Tokens */

:root {
    --brown: oklch(36.60% 0.0706 36.66);          /* #5e3023 */
    --brown-light: oklch(49.68% 0.0857 46.69);    /* #8a5236: the logo diamond's lit edges */
    --caramel: oklch(66.52% 0.0990 60.70);        /* #c08552 */
    --ink: oklch(32.11% 0 none);                  /* #333: headings */
    --text: oklch(37.15% 0 none);                 /* #404040 */
    --grey: oklch(69.93% 0 none);                 /* #9e9e9e: menu links, byline */
    --line: oklch(89.14% 0 none);                 /* #dbdbdb: rules, footer text */
    --rule: oklch(89.75% 0 none);                 /* #ddd: table lines, pill hover, open phone sub-menu */
    --mist: oklch(93.70% 0 none);                 /* #eaeaea: home blocks */
    --smoke: oklch(94.91% 0 none);                /* #eee: "Lees ook" pills, phone menu */
    --stripe: oklch(96.42% 0 none);               /* #f3f3f3: even table rows */
    --snow: oklch(97.91% 0 none);                 /* #f8f8f8: table of contents */
    --menu-button: oklch(90.06% 0 none);          /* #dedede */
    --menu-button-hover: color-mix(in oklch, var(--menu-button), black 4.43%); /* #d1d1d1 */
    --link: oklch(56.36% 0.1798 254.06);          /* #0074db */
    --orange: oklch(67.93% 0.2148 39.28);         /* #ff5805: table header row */
    --orange-tint: oklch(93.98% 0.0329 46.40);    /* #ffe5d9: table row on hover */
    --close-hover: oklch(71.45% 0.1788 22.70);    /* #ff6d6d */
    --teal: oklch(61.89% 0.0995 185.36);          /* #26998e: author box border, at 39% */
    --white: white;
    --black: black;

    /* Interpolated in sRGB, as the hex gradients were; oklch stops would otherwise mix in oklab. */
    --gradient-footer: linear-gradient(50deg in srgb, var(--brown), var(--caramel));
    --gradient-logo: linear-gradient(90deg in srgb, var(--caramel), var(--brown));

    --font-heading: 'Nunito', system-ui, sans-serif;
    --font-body: 'Lato', system-ui, sans-serif;
    --text-3xs: 0.6875rem;  /* 11px */
    --text-2xs: 0.75rem;    /* 12px */
    --text-xs: 0.875rem;    /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-s: 1.125rem;     /* 18px */
    --text-body: 1.1875rem; /* 19px: post text */
    --text-m: 1.25rem;      /* 20px */
    --text-l: 1.3125rem;    /* 21px */
    --text-xl: 1.375rem;    /* 22px */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: 1.875rem;   /* 30px */
    --text-4xl: 2rem;       /* 32px */
    --text-5xl: 2.25rem;    /* 36px */
    --text-6xl: 2.5rem;     /* 40px */
    --text-post-title: 2.875rem; /* 46px */
    --text-page-title: 3rem;     /* 48px */
    --text-hero: 3.3125rem;      /* 53px */
    --text-display: 3.4375rem;   /* 55px */
    --leading: 1.6;
    --leading-content: 1.65;
    --leading-tight: 1.2;

    --space-3xs: 4px;
    --space-2xs: 8px;
    --space-xs: 10px;
    --space-s: 12px;
    --space-m: 16px;
    --space-l: 20px;
    --space-xl: 24px;
    --space-2xl: 30px;
    --space-3xl: 40px;
    --space-section: 75px; /* WordPress's section padding */

    --gutter: var(--space-l);
    --width-page: 1120px;
    --header-height: 64px;
    --mobile-bar-height: 60px;

    --radius-s: 8px;
    --radius-m: 10px;
    --radius-l: 12px;
    --radius-xl: 20px;
    --radius-2xl: 30px;
    --radius-3xl: 50px;

    --shadow-menu: 0 8px 24px color-mix(in oklch, var(--black) 8%, transparent);
    --shadow-table: 0 4px 8px color-mix(in oklch, var(--black) 10%, transparent);
    --shadow-card: 0 10px 40px color-mix(in oklch, var(--black) 10%, transparent);

    --duration-fast: 0.1s;
    --duration: 0.2s;
    --duration-slow: 0.3s;
}

/* 2. Base */

*, *::before, *::after { box-sizing: border-box; }

:root {
    overflow-wrap: break-word;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading);
    color: var(--text);
    background: var(--white);
}

img { max-width: 100%; height: auto; }

a { color: var(--link); text-decoration: none; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; color: var(--ink); }
h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-m); }

:focus-visible {
    outline: max(2px, 0.08em) solid currentColor;
    outline-offset: 0.25em;
}

:is(a, summary):active { opacity: 0.8; }

main { min-height: 50vh; }

/* 3. Layout */

.container { max-width: var(--width-page); margin-inline: auto; padding-inline: var(--gutter); }

/* Header, wide screens: links either side of the logo in a brown diamond. */
.site-header { position: relative; z-index: 10; background: var(--white); }
.main-nav { position: relative; max-width: var(--width-page); height: var(--header-height); margin-inline: auto; display: flex; align-items: center; }
.main-nav-side { width: 40%; display: flex; align-items: center; }
.main-nav-side:first-child { justify-content: flex-end; padding-inline-end: var(--space-l); }
.main-nav-side:last-child { margin-inline-start: auto; padding-inline-start: var(--space-l); }
.nav-link {
    display: block;
    padding-block: var(--space-s);
    padding-inline: 36px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--text-base);
    color: var(--grey);
    cursor: pointer;
    list-style: none;
    transition: color var(--duration);
}
.nav-link::-webkit-details-marker { display: none; }
.menu[open] > .nav-link { color: var(--caramel); }
.menu { position: relative; z-index: 2; }
.menu-panel {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: var(--space-2xl);
    min-width: 220px;
    padding-block: 6px var(--space-xs);
    background: var(--white);
    box-shadow: var(--shadow-menu);
}
.menu-panel a { display: block; padding-block: var(--space-xs) 0; padding-inline: var(--space-m); color: var(--grey); white-space: nowrap; }
/* A 200px square turned 45deg, hanging 100px above the header, so only its lower half shows. */
.logo {
    position: absolute;
    z-index: 1;
    inset-inline-start: 50%;
    inset-block-start: -100px;
    width: 200px;
    height: 200px;
    margin-inline-start: -100px;
    transform: rotate(45deg);
    background: var(--gradient-logo);
    border: 10px solid;
    border-color: var(--brown-light) var(--brown) var(--brown) var(--brown-light);
    box-shadow: inset 0 0 0 2px color-mix(in oklch, var(--white) 25%, transparent);
}
.logo img { position: absolute; inset-inline-end: var(--space-s); inset-block-end: var(--space-s); width: 80px; transform: rotate(-45deg); opacity: 0.7; transition: opacity var(--duration); }
.mobile-bar { display: none; }

@media (hover: hover) and (pointer: fine) {
    .nav-link:hover, .menu-panel a:hover { color: var(--caramel); }
    .logo:hover { transform: scale(1.05) rotate(45deg); }
    .logo:hover img { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
    .logo { transition: transform var(--duration); }
}

/* Header, tablets and phones: one menu button that opens a full-screen menu. */
@media (width <= 991px) {
    .main-nav { display: none; }
    .mobile-bar { display: flex; align-items: center; justify-content: space-between; height: var(--mobile-bar-height); padding-inline-start: var(--gutter); }
    .mobile-logo img { display: block; width: 44px; height: 44px; border-radius: 50%; }
    /* The menu button (a grey square with three bars); while the menu is open it is the close cross, 20px from the top. */
    .mobile-menu > summary {
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--mobile-bar-height);
        height: var(--mobile-bar-height);
        background: var(--menu-button);
        cursor: pointer;
        list-style: none;
        transition: background-color var(--duration);
    }
    .mobile-menu > summary::-webkit-details-marker, .mobile-sub > summary::-webkit-details-marker { display: none; }
    .mobile-menu > summary svg { width: 28px; height: 28px; fill: var(--black); transition: fill var(--duration); }
    .mobile-menu .icon-close, .mobile-menu[open] .icon-open { display: none; }
    .mobile-menu[open] .icon-close { display: block; fill: var(--brown); }
    .mobile-menu[open] > summary { position: fixed; z-index: 2; inset-block-start: var(--space-l); inset-inline-start: 88%; }
    /* The open menu covers the screen: light grey, the links in a centred column (scrolls if the screen is too low). */
    .mobile-menu-panel { position: fixed; z-index: 1; inset: 0; display: flex; overflow-y: auto; background: var(--smoke); }
    .mobile-menu:not([open]) .mobile-menu-panel { display: none; }
    .mobile-menu-panel > div { display: flex; flex-direction: column; width: max-content; margin: auto; padding-block: 90px; }
    .mobile-menu-panel a, .mobile-sub > summary {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-3xs);
        min-height: 48px;
        padding-block: var(--space-2xs);
        padding-inline: var(--space-s);
        color: var(--ink);
        font-size: var(--text-base);
        font-weight: 900;
        letter-spacing: 2px;
        text-transform: uppercase;
        text-align: center;
        cursor: pointer;
        list-style: none;
        transition: background-color var(--duration), color var(--duration);
    }
    /* "Categorieën ↓" folds open in a darker grey block; the arrow turns up. */
    .mobile-sub[open] { background: var(--rule); }
    .mobile-sub > summary svg { width: 24px; height: 24px; fill: currentColor; }
    .mobile-sub[open] > summary svg { transform: rotate(180deg); }
}

@media (width <= 991px) and (hover: hover) and (pointer: fine) {
    .mobile-menu > summary:hover { background: var(--menu-button-hover); }
    .mobile-menu[open] > summary:hover .icon-close { fill: var(--close-hover); }
    .mobile-menu-panel a:hover, .mobile-sub > summary:hover { background: var(--rule); color: var(--brown); }
}

@media (width <= 991px) and (prefers-reduced-motion: no-preference) {
    .mobile-sub > summary svg { transition: transform var(--duration); }
}

/* Footer: a content grid; the four columns and the legal line sit in its middle track. */
.site-footer {
    --content: calc(var(--width-page) - 2 * var(--gutter));
    display: grid;
    grid-template-columns:
        [full-width-start] minmax(var(--gutter), 1fr)
        [content-start] min(100% - var(--gutter) * 2, var(--content)) [content-end]
        minmax(var(--gutter), 1fr) [full-width-end];
    padding-block: var(--space-3xl) var(--space-2xs);
    background: var(--gradient-footer);
    color: var(--line);
}
.site-footer > * { grid-column: content; }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.footer-grid > div { padding-block: 0 var(--space-l); padding-inline: var(--space-l); }
.footer-name { margin: 0 0 5px; font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 700; color: var(--white); line-height: var(--leading-tight); }
.footer-about p:not(.footer-name) { margin: 0 0 var(--space-3xs); }
.footer-title { margin: 0 0 var(--space-s); font-family: var(--font-heading); font-size: var(--text-m); font-weight: 700; color: var(--white); }
.footer-grid a { display: block; margin-block-end: var(--space-s); color: var(--line); }
.footer-grid address { font-style: normal; }
.footer-grid address a { display: inline; }
.socials { display: flex; gap: var(--space-2xl); margin-block-start: var(--space-m); }
.socials a { display: inline-flex; margin: 0; }
.socials svg { width: 20px; height: 20px; fill: var(--line); }
.footer-bottom { margin-block-start: 35px; padding-inline: var(--space-l); }
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-3xs) var(--space-m); }
.footer-legal a { font-size: var(--text-2xs); color: var(--line); }
.copyright { margin-block: var(--space-2xs) 25px; font-size: var(--text-2xs); color: var(--white); }

@media (hover: hover) and (pointer: fine) {
    .footer-grid a:hover, .footer-legal a:hover { color: var(--white); text-decoration: underline; }
    .socials a:hover svg { fill: var(--white); }
}

@media (width <= 991px) {
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (width <= 767px) {
    .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .footer-about p:not(.footer-name) { text-align: start; }
    .socials { justify-content: center; }
    .footer-bottom { text-align: center; }
    .footer-legal { justify-content: center; }
}

/* Post column. Under the post WordPress left 245px before the footer: 20px under the article, its 75px section
   padding and an empty 150px section. */
.post-layout { padding-block: 99px 245px; }
/* The middle 65% column of WordPress's 20% / 65% / 15% layout, with its 20px padding. */
.post { width: 65%; margin-inline-start: 20%; padding-inline: var(--space-l); }

/* WordPress kept its 75px section spacing under the phone header (posts: 40px more, from the empty side column).
   Its other empty side column (40px) stacks under the post. */
@media (width <= 991px) {
    .post-layout { padding-block: 115px 285px; }
    .post { width: 100%; margin-inline-start: 0; }
}

/* Page, category and author columns. WordPress put the title 75px under its 67px header; this header is 64px high. */
.page-head { padding-block: 78px 15px; }
.page-body { padding-block-end: var(--space-section); }
.listing-page { padding-block: var(--space-section); }
.author-page { padding-block: 78px var(--space-section); }

@media (width <= 991px) {
    .listing-page, .author-page, .page-head { padding-block-start: var(--space-section); }
}

/* 4. Components */

/* Post header: category links, title, byline, subtitle, featured image, affiliate note. */
.post-categories { margin: 0; font-size: var(--text-2xs); color: var(--line); }
.post-categories a { color: var(--grey); }
.post h1 { margin: 0 0 18px; font-size: var(--text-post-title); font-weight: 800; line-height: 1.1; text-transform: capitalize; }
.byline { display: flex; align-items: center; gap: var(--space-m); padding-block: 5px; }
.byline .avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; }
.byline p { margin: 0; font-size: var(--text-xs); color: var(--grey); }
.byline a { font-weight: 600; color: var(--grey); transition: color var(--duration-fast); }
.kicker { margin-block: 22px var(--space-xs); font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700; line-height: 1.5; color: var(--ink); }
.featured { display: block; width: 725px; border-radius: var(--radius-xl); }
.affiliate-note { margin-block: var(--space-s) 28px; font-size: var(--text-2xs); font-style: italic; color: var(--grey); }

@media (hover: hover) and (pointer: fine) {
    .post-categories a:hover { color: var(--brown); font-weight: 600; }
    .byline a:hover { color: var(--brown); }
}

@media (width <= 479px) {
    /* Post titles keep WordPress's 46px; a word too long for the screen ("Halfautomatische") is hyphenated instead
       of running off it. Only words of 12 letters or more are split, so short titles wrap exactly as on WordPress. */
    .post h1 { hyphens: auto; hyphenate-limit-chars: 12 5 5; }
    .byline { align-items: flex-start; flex-direction: column; gap: 9px; }
    .byline p { padding-inline-start: var(--space-m); }
}

/* "Lees ook" lists (the related box, after the intro and at the end of a post): each link to another article
   is a grey pill with an "open" icon. (WordPress styled every link to its own domain this way; in posts those
   links are only in these lists.) */
.related a {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    padding-block: 2px;
    padding-inline: var(--space-2xs) 25px;
    border-radius: var(--radius-s);
    background: var(--smoke);
    color: var(--black);
    font-weight: 700;
}
.related a::after {
    content: '';
    position: absolute;
    inset-inline-end: 6px;
    inset-block-start: 50%;
    width: 15px;
    height: 15px;
    transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6'/%3E%3Cpath d='m21 3-9 9'/%3E%3Cpath d='M15 3h6v6'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (hover: hover) and (pointer: fine) {
    .related a:hover { background: var(--rule); }
}

/* Table of contents: a light grey box, numbered "1 -", sub-headings "a." */
.toc { margin: 0 0 var(--space-l); padding: var(--space-l); border: 1px solid var(--rule); border-radius: var(--radius-l); background: var(--snow); }
.toc h2 { margin: 0 0 var(--space-s); }
.toc ol { list-style: none; margin-block: 1em; margin-inline: 0; padding-inline-start: var(--space-3xl); counter-reset: item; }
.toc li { position: relative; margin-block-end: 0.6em; font-size: 0.9em; }
.toc > ol > li::before { counter-increment: item; content: counter(item) " -"; position: absolute; inset-inline-start: -0.8em; font-weight: 800; }
.toc ol ol { margin: 6px 0 0; padding-inline-start: var(--space-3xl); counter-reset: subitem; }
.toc ol ol > li::before { counter-increment: subitem; content: counter(subitem, lower-alpha) ". "; position: absolute; inset-inline-start: -0.4em; }
.toc a { padding-inline-start: 0.9em; color: var(--ink); }
.toc a:focus { text-decoration: underline; }

@media (hover: hover) and (pointer: fine) {
    .toc a:hover { text-decoration: underline; }
}

/* Author box under a post. The photo and the text shrink together as WordPress let them: the photo from 240px
   (200px plus a 40px margin), the text from 99% of the box. The photo is 168px at 1280px, 153px at 600px. */
.author-box {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin: 0 0 50px;
    padding: var(--space-2xl);
    border: 0.5px solid color-mix(in oklch, var(--teal) 39%, transparent);
    border-radius: var(--radius-2xl);
}
.author-box img { flex: 0 1 240px; min-width: 0; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.author-box > div { display: flex; flex-direction: column; align-items: flex-start; width: 99%; }
.author-box-role { margin: 0 0 var(--space-3xs); font-size: var(--text-xs); color: var(--grey); border-block-end: 1px solid var(--brown); }
.author-box-name { display: block; font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 700; color: var(--ink); transition: color var(--duration); }
.author-box-bio { margin-block: var(--space-m); color: var(--grey); }

@media (hover: hover) and (pointer: fine) {
    .author-box-name:hover { color: var(--brown); }
}

/* The photo above the text at its full 200px, as on WordPress. */
@media (width <= 479px) {
    .author-box { flex-direction: column; }
    .author-box img { flex: none; width: 200px; }
}

/* Content blocks (templates/blocks/): YouTube video and product box. */
.video { margin: 0 0 var(--space-l); }
.video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius-l); }
.product { margin-block: var(--space-xl); padding: var(--space-xl); border: 1px solid var(--line); border-radius: var(--radius-xl); }
.product-grid { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-l); }
.button { display: inline-block; padding-block: var(--space-xs); padding-inline: var(--space-xl); border-radius: var(--radius-s); background: var(--brown); color: var(--white); font-weight: 700; }
.button:focus-visible { outline-color: var(--brown); }
.product-cta { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.product-more a { text-decoration: underline; }

@media (width <= 767px) {
    .product-grid { grid-template-columns: 1fr; }
}

/* Page title (pages, categories, 404): 48px at every width, as on WordPress; a long word
   ("Kwaliteitscontrolesystemen") is hyphenated on phones instead of running off the screen. */
.page-title { display: inline-block; max-width: 100%; margin: 0; font-size: var(--text-page-title); font-weight: 600; line-height: var(--leading); border-block-end: 1px solid var(--brown); hyphens: auto; }

/* Post rows (_cards.html.twig): category, author and "Populair" listings. */
.listing-title { margin: 0 0 5px; font-size: var(--text-2xl); }
.post-list { margin-block-start: var(--space-xs); }
.post-row { display: flex; align-items: center; padding-block-end: var(--space-l); margin-block-end: var(--space-l); border-block-end: 2px solid var(--line); }
/* The photo keeps its size next to a long title (WordPress let the title squeeze it). */
.post-row > a { flex: none; margin-inline-end: var(--space-l); }
.post-row img { display: block; width: 222px; height: 125px; margin: 0; border-radius: var(--radius-m); object-fit: cover; }
.post-row h3 { margin: 0; font-size: var(--text-xl); line-height: var(--leading); }
.post-row h3 a { color: var(--ink); transition: color var(--duration-slow); }
.post-row-meta { margin: 0 0 var(--space-s); }

@media (hover: hover) and (pointer: fine) {
    .post-row h3 a:hover { color: var(--caramel); }
}

@media (width <= 767px) {
    .listing-title { margin-block-end: 25px; }
    /* Category pages put the photo above the title, both centred (from 479px down: on the left, 15px apart).
       "Populair" and author pages keep a 167px photo beside the title, as WordPress did; a word too long for the
       title column ("Oplosmiddelgebaseerde") narrows the photo instead of running off the screen. */
    .post-row { flex-direction: column; }
    .post-list-rows .post-row { flex-direction: row; }
    .post-list-rows .post-row > a { flex: 0 1 167px; min-width: 0; }
    .post-list-rows .post-row > div { flex: 1 1 0; }
    .post-list-rows .post-row img { width: 100%; }
}

@media (width <= 479px) {
    .post-row > a, .post-row > div { align-self: flex-start; }
    .post-row img { margin-block-end: 15px; }
    .post-list-rows .post-row > a, .post-list-rows .post-row > div { align-self: auto; }
    .post-list-rows .post-row img { margin-block-end: 0; }
    .post-row-meta { font-size: var(--text-xs); }
    .post-list-rows .post-row-meta { font-size: var(--text-base); }
}

/* Page links as on WordPress: small and all in link blue, the current page and the dots too.
   (WordPress set them without any space between, "1234…33"; a small gap keeps the numbers apart.) */
.pagination { display: flex; flex-wrap: wrap; gap: 2px 5px; font-size: var(--text-2xs); color: var(--link); }

/* 5. Content */

/* Post text. Margins sit in :where() so components inside it (table of contents, product box) win without order tricks. */
.content { font-size: var(--text-body); line-height: var(--leading-content); }
/* Headings without margins, in the text's line height, as on WordPress: the paragraph, image or table around them
   sets the space. */
.content :where(h2, h3) { margin: 0; }
.content :where(h4) { margin-block: 1em 0.4em; margin-inline: 0; }
/* A photo on its own line is centred, as WordPress centred its image blocks. CSS cannot see text, so an image
   inside a sentence ("klik op het <img> icoon") would be centred too; no page on this site has one. */
.content :where(p > img:only-child, figure > img) { display: block; margin: 0 auto var(--space-l); }
.content :where(figure) { margin: 0 0 var(--space-l); }
.content :where(blockquote) { margin-block: 1em; margin-inline: 0; padding-inline-start: var(--space-l); border-inline-start: 3px solid var(--line); }
/* Lists with small brown squares, as on WordPress. */
.post ul { list-style: none; padding-inline-start: var(--space-l); }
.post ul li { position: relative; padding-inline-start: var(--space-2xl); margin-block-end: var(--space-l); }
.post ul li::before { content: ''; position: absolute; inset-inline-start: 0; inset-block-start: calc(0.825em - 4px); width: 8px; height: 8px; background: var(--brown); }

/* Tables: orange header row with square corners, striped rows, soft shadow with rounded corners (WordPress rounded
   the table, but the header row was never cut to that shape). A table wider than the text spills into the empty
   column on its right, as on WordPress; tablets and phones scroll it (below). */
.content table { width: 100%; margin-block-end: var(--space-l); border-collapse: separate; border-spacing: 0; border-radius: var(--radius-m); box-shadow: var(--shadow-table); }
.content thead th { padding-block: var(--space-s); padding-inline: 15px; background: var(--orange); color: var(--white); font-weight: 700; text-align: start; }
.content td { padding-block: var(--space-s); padding-inline: 15px; border-block-end: 1px solid var(--rule); }
.content tbody tr:nth-child(even) { background: var(--stripe); }

@media (hover: hover) and (pointer: fine) {
    .content tbody tr:hover { background: var(--orange-tint); }
}

@media (width <= 991px) {
    /* Each table sits in a .table-scroll box (post.html.twig): a table wider than the screen scrolls sideways inside it
       instead of widening the page. The box reaches 8px past the column and 12px under the table, so the table's own
       shadow fits inside it: only the shadow is round, the rows keep square corners, as on WordPress. The text under
       it still starts 20px below the table. */
    .table-scroll { margin-block: -4px var(--space-2xs); margin-inline: calc(-1 * var(--space-2xs)); padding-block: var(--space-3xs) var(--space-s); padding-inline: var(--space-2xs); overflow-x: auto; }
    .table-scroll + * { margin-block-start: 0; }
    .content table { margin-block-end: 0; }
}

@media (width <= 600px) {
    .content thead th, .content td { padding-block: var(--space-2xs); padding-inline: var(--space-xs); font-size: var(--text-xs); }
}

/* Page text (pages, 404): the body size, paragraphs an empty line apart. */
.page-content { font-size: var(--text-base); line-height: var(--leading); }
.page-content > :first-child { margin-block-start: 0; }
/* WordPress separated these paragraphs with an empty line (<br><br>), a little more than a paragraph margin. */
.page-content > p { margin: 0 0 1.6em; }
.page-content > p:has(> img:only-child) { margin-block-end: 0; }
.page-content h2 { margin-block: 0.4em 0.5em; margin-inline: 0; line-height: 1.3; }
/* In :where(), so the photos of the post rows (on /blog/) and of the team keep their own size. */
.page-content :where(img) { width: 100%; margin-block-end: var(--space-2xs); }

/* 6. Pages */

/* Text pages. The intro line sits right on what follows, as on WordPress, except on two pages where WordPress left a gap. */
.page-intro { margin: 0; font-size: var(--text-xl); color: var(--ink); }
.page-over-ons .page-intro { margin-block-end: 11px; }
.page-toegankelijkheid .page-content > p:first-child { margin-block-start: 1em; }
.page-blog .post-list { margin-block-start: var(--space-section); }

/* Author page: photo, name and facts; the "Over ..." text; their posts. */
.author-hero { display: flex; align-items: center; padding-block-end: var(--space-section); }
.author-hero img { flex: 0 0 200px; width: 200px; height: 200px; margin-inline-end: 37px; border-radius: 50%; object-fit: cover; }
.author-hero h1 { margin: 0 0 var(--space-3xs); line-height: var(--leading-tight); }
.author-hero p { margin: 0 0 var(--space-2xs); color: var(--ink); }
.author-hero .author-role { margin-block-end: 15px; font-weight: 500; }
.author-bio { font-size: var(--text-base); line-height: var(--leading); padding-block-end: 60px; }
.author-bio h2 { margin: 0 0 0.5em; }
.author-page .listing-title { font-size: var(--text-3xl); margin-block-end: var(--space-l); }

@media (width <= 479px) {
    .author-hero { flex-direction: column; align-items: flex-start; }
    .author-hero img { margin: 0 0 var(--space-l); }
}

/* Het team: one card per person, a third of the width and centred (the full width below 992px); on phones
   everything is centred, as on WordPress. */
.page-het-team { padding-block-end: 120px; }
.team { display: flex; justify-content: center; }
.team-member { width: 33.34%; padding: var(--space-l); }
.team-member img { display: block; width: 300px; max-width: 100%; height: 300px; margin: 0 0 var(--space-s); object-fit: cover; }
.team-member h3 { margin: 0; font-size: var(--text-3xl); font-weight: 500; line-height: 1; }
.team-member h3 a { color: var(--ink); }
/* The role in caramel. WordPress set it in a near-white beige (#f3e9dc) that is almost invisible on white. */
.team-role { margin-block: var(--space-s); font-size: var(--text-2xs); color: var(--caramel); }
.team-member p:not(.team-role) { margin: 0; font-weight: 500; line-height: 1.4; color: var(--ink); }

@media (hover: hover) and (pointer: fine) {
    .team-member h3 a:hover { color: var(--brown); }
}

@media (width <= 991px) {
    .page-het-team { padding-block: 80px 60px; }
    .team-member { width: 100%; }
}

@media (width <= 767px) {
    .page-het-team { padding-block-end: var(--space-l); text-align: center; }
    .team-member { text-align: center; }
    .team-member img { margin: 0 auto var(--space-s); }
}

/* Contact: three equal white cards, also when "TELEFOONNUMMER" is wider than its card on tablets (it then sticks
   out on both sides, as on WordPress). */
.page-contact { padding-block-end: 85px; }
.contact-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3xl); padding: var(--space-l); }
.contact-card { display: flex; flex-direction: column; align-items: center; padding-block: 48px; padding-inline: 36px; text-align: center; background: var(--white); box-shadow: var(--shadow-card); }
.contact-card svg { width: 36px; height: 36px; margin-block-end: var(--space-s); fill: none; stroke: var(--brown); stroke-width: 1.5; stroke-linejoin: round; color: var(--brown); }
.contact-card h2 { margin: 0 0 var(--space-2xs); font-family: var(--font-body); font-size: var(--text-2xl); line-height: 1; text-transform: uppercase; color: var(--brown); }
.contact-card address, .contact-card a { font-size: var(--text-xs); font-weight: 700; font-style: normal; color: var(--ink); }
.contact-card a { letter-spacing: 2px; }

@media (hover: hover) and (pointer: fine) {
    .contact-card a:hover { text-decoration: underline; }
}

@media (width <= 767px) {
    .contact-cards { grid-template-columns: 1fr; }
}

/* Home */
/* The welcome line sits 172px under the header at every width, as on WordPress. */
.home-hero { position: relative; padding-block: 172px 78px; background: var(--mist); text-align: center; }
.home-hero h2 { max-width: 1080px; margin-block: 0; margin-inline: auto; font-size: var(--text-hero); font-weight: 800; line-height: var(--leading); }
.home-section { padding-block: var(--space-section); }
.home-kicker { margin: 0; font-size: var(--text-xl); text-align: center; color: var(--ink); }
.home-title { display: table; margin-block: 0 var(--space-m); margin-inline: auto; font-size: var(--text-6xl); border-block-end: 1px solid var(--brown); }

@media (width <= 479px) {
    /* The welcome line keeps WordPress's 53px until its longest word ("Koffiemanie.nl,") would no longer fit. */
    .home-hero h2 { font-size: min(var(--text-hero), calc((100vw - 2 * var(--gutter)) / 7.2)); }
}

/* Featured posts: two big photos. */
.home-featured { display: flex; }
.home-featured-card { width: 60%; padding: var(--space-l); }
.home-featured-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-3xl); }
.home-featured-card h3 { margin-block: var(--space-l) 0; margin-inline: 0; font-size: var(--text-3xl); text-align: center; line-height: var(--leading); }
.home-featured-card h3 a { color: var(--ink); transition: color var(--duration); }
.home-featured-section { padding-block: 165px 173px; }

@media (hover: hover) and (pointer: fine) {
    .home-featured-card h3 a:hover { color: var(--brown); }
}

@media (width <= 991px) {
    .home-featured-section { padding-block-end: 213px; }
    .home-featured-card { width: 100%; }
}

@media (width <= 479px) {
    .home-featured-section { padding-block-end: 193px; }
    .home-featured-card h3 { font-size: var(--text-m); }
}

/* About block: the grey block with "Alles om een betere keuze" and three points. */
.home-about { position: relative; padding-block: var(--space-section) 0; background: var(--mist); }
.home-about + .home-section { padding-block-start: 160px; }
/* The wavy edges hang upside down from the bottom of the grey block over the section under it, as Oxygen drew them. */
.wave { position: absolute; inset-block-start: calc(100% - 1px); inset-inline-start: 0; width: 100%; height: 100px; fill: var(--mist); transform: scaleY(-1); pointer-events: none; }
.wave-hero-line { height: 110px; fill: var(--brown); }
.wave-about { height: 70px; transform: scale(-1); }
.home-about-row { display: flex; }
.home-about-intro { width: 50%; color: var(--ink); }
.home-about-intro h2 { margin: 0; font-size: var(--text-display); font-weight: 800; line-height: var(--leading); border-block-end: 4px solid var(--brown); }
.home-about-intro p { width: 99%; margin-block: var(--space-xl) 0; margin-inline: 0; }
/* WordPress put an empty line between the two paragraphs and after the last one. */
.home-about-intro p + p { margin-block-start: 1.6em; }
.home-about-intro p:last-child { margin-block-end: 1.6em; }
.home-about-points { width: 50%; display: flex; flex-direction: column; align-items: flex-end; }
.home-about-points > div { width: 60%; margin-block-end: var(--space-2xl); color: var(--ink); }
.home-about-points h4 { display: inline-block; margin: 0; font-size: var(--text-l); border-block-end: 1px solid var(--brown); }
.home-about-points p { margin-block: 9px var(--space-xs); margin-inline: 0; }
/* The e-mail address in the text is a link in the text's own colour, as on WordPress. */
.home-about-points p a { color: inherit; }
.home-about-points > div > a { font-weight: 700; text-decoration: underline; }

@media (width <= 991px) {
    /* "Alles om een betere keuze" stays beside its three points down to 480px, as on WordPress: the points take the
       room the heading leaves. */
    .home-about-points { width: 100%; }
}

@media (width <= 767px) {
    /* WordPress let "Onderbouwd." run out of its half of the screen here; it shrinks just enough to fit. */
    .home-about-intro h2 { font-size: min(var(--text-display), calc((100vw - 2 * var(--gutter)) / 13)); }
}

/* Phones: below 480px WordPress stacked the about block, and its big heading ran off the screen. */
@media (width <= 479px) {
    .home-about-row { flex-direction: column; }
    .home-about-intro, .home-about-points { width: 100%; }
    .home-about-intro h2 { font-size: var(--text-4xl); }
    .home-about-intro p { margin-block-start: var(--space-m); }
    .home-about-points { align-items: flex-start; margin-block-start: 41px; }
    .home-about-points > div { width: 100%; }
}

/* Topics: three rounded boxes with an icon. */
.home-topics { display: flex; flex-wrap: wrap; justify-content: center; }
.home-topics a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 20%;
    height: 150px;
    margin-block: var(--space-l);
    margin-inline: 15px;
    padding-inline: var(--space-l);
    border: 3px solid var(--brown);
    border-radius: var(--radius-3xl);
    color: var(--brown);
    font-family: var(--font-heading);
    font-size: var(--text-s);
}
.home-topics svg { width: 60px; height: 60px; fill: var(--brown); }

@media (hover: hover) and (pointer: fine) {
    .home-topics a:hover { transform: scale(1.05); border-width: 4px; }
}

@media (prefers-reduced-motion: no-preference) {
    .home-topics a { transition: transform var(--duration-slow); }
}

/* The three category boxes stack, as wide as the screen (on phones: as wide as the longest name). */
@media (width <= 991px) {
    .home-topics { flex-direction: column; }
}

@media (width <= 479px) {
    .home-topics { width: max-content; max-width: 100%; margin-inline: auto; }
    .home-topics a { padding-inline: 50px; }
}

/* Latest posts: three cards a row; as on WordPress, a short title sits halfway between the photo and the card's bottom. */
.home-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.home-grid-card { display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-xs); margin-block-end: 48px; }
.home-grid-card::after { content: ''; margin-block-start: var(--space-2xs); }
.home-grid-image { position: relative; display: block; margin-block-end: var(--space-m); }
.home-grid-image img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 15px; }
.home-grid-date {
    position: absolute;
    inset-block-start: var(--space-m);
    inset-inline-end: var(--space-m);
    padding-block: var(--space-2xs);
    padding-inline: 11px;
    border-radius: var(--radius-2xl);
    background: color-mix(in oklch, var(--black) 50%, transparent);
    color: var(--white);
    font-size: var(--text-3xs);
    font-weight: 700;
    line-height: var(--leading);
}
.home-grid-title { display: block; font-size: var(--text-m); font-weight: 700; line-height: var(--leading-tight); color: var(--black); text-transform: capitalize; }

@media (hover: hover) and (pointer: fine) {
    .home-grid-title:hover { color: var(--brown); }
}

@media (width <= 1120px) {
    .home-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (width <= 767px) {
    .home-grid { grid-template-columns: 1fr; }
}