/* Zoppo: the look of the WordPress (Oxygen) site. Lato for text, Nunito for headings, orange #ff7f11, red #ff1b1c
   and beige #beb7a4.
   Sections: 1. Tokens  2. Base  3. Layout (container, header, menus, footer, post column)
   4. Components (byline, author box, contents, article rows, pagination, contact cards, team)
   5. Content (the article text and tables)  6. Pages (post, titles, archives, text pages, author, home, 404) */

/* 1. Tokens */

:root {
    --white: white;                            /* the keyword: white text in oklch() renders with different edges */
    --black: oklch(0% 0 none);
    --text: oklch(37.15% 0 none);              /* #404040 */
    --heading: oklch(32.11% 0 none);           /* #333: headings and dark text */
    --link: oklch(56.36% 0.1798 254.1);        /* #0074db */
    --muted: oklch(69.93% 0 none);             /* #9e9e9e: menu, byline, roles */
    --pale: oklch(89.14% 0 none);              /* #dbdbdb: footer text, row lines */
    --category-link: oklch(75.4% 0 none);      /* #afafaf */
    --cite: oklch(54.86% 0 none);              /* #717171 */
    --gray-1: oklch(97.91% 0 none);            /* #f8f8f8: contents box */
    --gray-2: oklch(96.42% 0 none);            /* #f3f3f3: striped rows */
    --gray-3: oklch(94.91% 0 none);            /* #eee: phone menu, internal link pills */
    --gray-3-hover: color-mix(in oklch, var(--gray-3), var(--black) 5.44%); /* #ddd */
    --gray-4: oklch(93.7% 0 none);             /* #eaeaea: home bands and waves */
    --menu-button: oklch(90.06% 0 none);       /* #dedede */
    --menu-button-hover: color-mix(in oklch, var(--menu-button), var(--black) 4.43%); /* #d1d1d1 */
    --line: var(--gray-3-hover);               /* #ddd: table and contents borders */
    --orange: oklch(73.07% 0.1848 51.7);       /* #ff7f11 */
    --red: oklch(63.51% 0.2504 28.3);          /* #ff1b1c */
    --beige: oklch(78% 0.0274 90.1);           /* #beb7a4 */
    --current: red;                            /* #f00: the page you are on, in the phone menu (oklch renders it 1 off) */
    --close-hover: oklch(71.45% 0.1788 22.7);  /* #ff6d6d */
    --table-head: oklch(67.93% 0.2148 39.3);   /* #ff5805 */
    --table-hover: oklch(93.98% 0.0329 46.4);  /* #ffe5d9 */
    --author-border: oklch(61.89% 0.0995 185.4 / 39%); /* rgba(38, 153, 142, .39) */
    --linkedin: oklch(51.37% 0.164 255.3);     /* #0d65c2 */
    --team-role: oklch(84.76% 0.151 127.2);    /* #b2df6d */

    --font-text: Lato, sans-serif;
    --font-heading: Nunito, sans-serif;

    --text-2xs: .7rem;      /* 11.2px */
    --text-xs: .75rem;      /* 12px */
    --text-s: .875rem;      /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-m: 1.125rem;     /* 18px */
    --text-post: 1.1875rem; /* 19px: post text */
    --text-l: 1.25rem;      /* 20px */
    --text-xl: 1.3125rem;   /* 21px */
    --text-2xl: 1.375rem;   /* 22px */
    --text-3xl: 1.5rem;     /* 24px */
    --text-4xl: 1.875rem;   /* 30px */
    --text-5xl: 2.25rem;    /* 36px */

    --space-2xs: 8px;
    --space-xs: 10px;
    --space-s: 12px;
    --space-m: 16px;
    --space-l: 20px;
    --space-xl: 30px;
    --space-2xl: 40px;
    --space-section: 75px;  /* WordPress's section padding */
    --space-flow: 25.6px;   /* WordPress's empty line between paragraphs */

    --width-page: 1120px;
    --gutter: 20px;
    --logo: 200px;

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

    --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 30px color-mix(in oklch, var(--black) 10%, transparent);

    --duration-fast: .1s;
    --duration: .2s;
    --duration-slow: .3s;
}

/* 2. Base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-text); font-size: var(--text-base); line-height: 1.6; color: var(--text); background: var(--white); overflow-x: clip; }
img { max-inline-size: 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(--heading); margin: 0; overflow-wrap: normal; }
h1, h2 { font-size: var(--text-5xl); }
h3, h4 { font-size: var(--text-3xl); }
h5, h6 { font-size: var(--text-m); }

:focus-visible { outline: max(2px, .08em) solid currentColor; outline-offset: .25em; }
/* Press feedback: links and menu buttons dim while pressed. */
a:active, summary:active { opacity: .8; }

/* 3. Layout */

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

/* Header: two links left and right of the logo in an orange diamond. Gradients say "in srgb": between oklch colors
   the browser would blend in oklab, a different shade than the old hex gradient. */
.site-header { position: relative; z-index: 10; background: var(--white); }
.main-nav { display: grid; grid-template-columns: 1fr var(--logo) 1fr; align-items: center; max-inline-size: var(--width-page); block-size: 67px; margin-inline: auto; }
.nav-side { display: flex; align-items: center; block-size: 100%; }
.nav-left { justify-content: flex-end; padding-inline-end: 32px; }
.nav-right { justify-content: flex-start; padding-inline-start: 68px; }
.nav-link { font-family: var(--font-heading); font-size: var(--text-base); font-weight: 700; color: var(--muted); cursor: pointer; transition: color var(--duration); }
.nav-dropdown[open] > .nav-link { color: var(--beige); }
.nav-line { inline-size: 2px; block-size: 24px; margin-inline: 35px; }
.nav-left .nav-line { margin-inline: 32px 6px; }
.nav-dropdown { position: relative; padding-inline: 30px; }
.nav-dropdown > summary { list-style: none; }
.nav-dropdown > summary::-webkit-details-marker { display: none; }
.nav-dropdown-panel { position: absolute; z-index: 2; inset-block-start: 100%; inset-inline-start: 30px; display: flex; flex-direction: column; padding-block: 4px var(--space-xs); background: var(--white); box-shadow: var(--shadow-menu); white-space: nowrap; }
.nav-dropdown-panel a { padding-block: var(--space-xs) 0; padding-inline: var(--space-m); font-size: var(--text-base); color: var(--muted); }
.logo { position: relative; justify-self: center; align-self: start; inline-size: var(--logo); block-size: 67px; }
.logo::before { content: ''; position: absolute; inset-inline-start: 0; inset-block-start: -100px; inline-size: var(--logo); block-size: var(--logo); transform: rotate(45deg); background: linear-gradient(90deg in srgb, var(--beige), var(--orange)); border: 10px solid; border-block-color: var(--beige) var(--orange); border-inline-color: var(--beige) var(--orange); }
.logo img { position: absolute; inset-inline-start: 60px; inset-block-start: 16px; inline-size: 80px; opacity: .7; transition: opacity var(--duration); }
@media (hover: hover) and (pointer: fine) {
    .nav-link:hover, .nav-dropdown-panel a:hover { color: var(--beige); }
    .logo:hover::before { transform: scale(1.05) rotate(45deg); }
    .logo:hover img { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
    .logo::before { transition: transform var(--duration); }
}

/* Phones and tablets: a grey menu button at the top right. Open, the menu covers the screen in grey, centred, in
   spaced capitals; the button becomes a red cross a little lower down, as on WordPress. Equal padding above and below
   keeps the items in the middle of the screen; a menu taller than the screen starts below the cross and scrolls. */
.mobile-menu { display: none; }
@media (width <= 991px) {
    .main-nav { display: none; }
    .site-header { block-size: 60px; }
    .mobile-menu { display: block; position: absolute; inset-block-start: 0; inset-inline-end: 0; }
    .mobile-menu > summary { list-style: none; display: flex; align-items: center; justify-content: center; inline-size: 60px; block-size: 60px; background: var(--menu-button); cursor: pointer; transition: background-color var(--duration); }
    .mobile-menu > summary::-webkit-details-marker { display: none; }
    .mobile-menu-open, .mobile-menu[open] .mobile-menu-close { display: flex; }
    .mobile-menu-close, .mobile-menu[open] .mobile-menu-open { display: none; }
    .mobile-menu > summary svg { inline-size: 28px; block-size: 28px; fill: var(--black); }
    .mobile-menu[open] > summary { position: fixed; z-index: 31; inset-block-start: 20px; inset-inline-end: 0; }
    .mobile-menu > summary .mobile-menu-close svg { fill: var(--orange); transition: fill var(--duration); }
    .mobile-menu-panel { position: fixed; z-index: 30; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; justify-content: safe center; padding-block: 90px; padding-inline: var(--gutter); overflow: auto; background: var(--gray-3); }
    .mobile-menu-panel a, .mobile-menu-panel summary { display: block; padding-block: var(--space-2xs); padding-inline: var(--space-s); font-family: var(--font-text); font-size: var(--text-base); font-weight: 900; line-height: 2; letter-spacing: 2px; text-transform: uppercase; text-align: center; color: var(--heading); cursor: pointer; transition: color var(--duration), background-color var(--duration); }
    .mobile-menu-panel details { min-inline-size: 193px; }
    .mobile-menu-panel details[open] { background: var(--gray-3-hover); }
    .mobile-menu-panel details summary { list-style: none; }
    .mobile-menu-panel details summary::-webkit-details-marker { display: none; }
    .mobile-menu-panel details summary svg { inline-size: 22px; block-size: 22px; margin-inline-start: 2px; vertical-align: -4px; fill: var(--heading); }
    .mobile-menu-panel details[open] summary svg { transform: rotate(180deg); }
}
@media (hover: hover) and (pointer: fine) {
    .mobile-menu > summary:hover { background: var(--menu-button-hover); }
    .mobile-menu > summary:hover .mobile-menu-close svg { fill: var(--close-hover); }
    .mobile-menu-panel a:hover, .mobile-menu-panel summary:hover { background: var(--gray-3-hover); color: var(--orange); }
}
/* After the hover rule: the page you are on stays red. */
.mobile-menu-panel a[aria-current="page"] { color: var(--current); }
@media (prefers-reduced-motion: no-preference) {
    .mobile-menu-panel details summary svg { transition: transform var(--duration); }
}

/* Footer: orange-to-red gradient, four columns, small legal links (Oxygen template 59). */
.site-footer { margin-block-start: 60px; padding-block-start: var(--space-l); background-image: linear-gradient(50deg in srgb, var(--orange), var(--red)); color: var(--pale); }
.footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.footer-grid > div { display: flex; flex-direction: column; align-items: flex-start; padding: var(--space-l); }
.footer-grid p { margin-block: 0 4px; margin-inline: 0; }
.footer-grid a { margin-block-end: var(--space-s); color: var(--pale); transition: color var(--duration); }
.footer-grid .footer-brand { margin-block-end: 5px; font-family: var(--font-heading); font-size: var(--text-4xl); font-weight: 700; line-height: 1.1; color: var(--white); }
.footer-grid .footer-title { margin-block-end: var(--space-s); font-family: var(--font-heading); font-size: var(--text-l); font-weight: 700; line-height: 1.1; color: var(--white); }
.site-footer address { font-style: normal; }
.site-footer address a { display: inline; margin: 0; }
.socials { display: flex; gap: var(--space-xs); margin-block: 0; margin-inline: calc(-1 * var(--space-xs)) 0; }
.socials a { display: flex; inline-size: 40px; block-size: 40px; margin: 0; align-items: center; justify-content: center; }
.socials svg { inline-size: 20px; block-size: 20px; fill: var(--pale); transition: fill var(--duration); }
.footer-bottom { padding-block: var(--space-l); padding-inline: var(--space-2xl); }
.footer-bottom nav { display: flex; padding-block-start: 5px; }
.footer-bottom nav a { margin-block: 0; margin-inline: 0 var(--space-m); font-size: var(--text-xs); line-height: 1.6; color: var(--pale); transition: color var(--duration); }
.footer-bottom p { margin-block: var(--space-2xs) var(--space-s); font-size: var(--text-xs); color: var(--white); }
@media (hover: hover) and (pointer: fine) {
    .footer-grid a:hover, .footer-bottom nav a:hover { color: var(--white); text-decoration: underline; }
    .socials a:hover svg { fill: var(--white); }
}
@media (width <= 767px) {
    .footer-grid { grid-template-columns: 1fr; }
    .footer-grid > div { align-items: center; text-align: center; }
    .footer-grid > div > p:not([class]) { text-align: start; }
    .footer-bottom nav { align-items: center; justify-content: center; text-align: center; }
    .footer-bottom p { text-align: center; }
}

/* Posts: the article in a 65% column, slightly left of centre, as on WordPress; 40px on each side on phones.
   The empty space under the author box is WordPress's: its post section's padding and an empty section (295px). */
.post-layout { max-inline-size: var(--width-page); margin-inline: auto; padding-block: 95px 185px; padding-inline: var(--gutter); }
.post { inline-size: 65%; margin-inline-start: 20%; padding-inline: var(--gutter); }
@media (width <= 991px) {
    .post-layout { padding-block: 115px 225px; }
    .post { inline-size: 100%; margin-inline-start: 0; }
}

/* 4. Components */

/* Byline under a post's title: photo, then "Geschreven door". */
.byline { display: flex; align-items: center; gap: 0; padding-block: 5px; }
.byline img { inline-size: 60px; block-size: 60px; margin-inline-end: calc(10% - 60px); border-radius: var(--radius-round); object-fit: fill; }
.byline p { margin: 0; padding-inline-start: var(--space-m); font-size: var(--text-s); color: var(--muted); }
.byline a { font-weight: 600; color: var(--muted); display: inline; transition: color var(--duration-fast) ease-in-out; }
@media (hover: hover) and (pointer: fine) {
    .byline a:hover { color: var(--orange); }
}
@media (width <= 479px) {
    .byline { flex-direction: column; align-items: flex-start; }
    .byline p { margin-block-start: 9px; inline-size: calc(90% - 24px); text-align: center; }
    .byline img { margin-inline-end: 15px; }
}

/* The author box under each post. */
.author-box { display: flex; gap: 15px; margin-block: 0 50px; margin-inline: 0; padding: var(--space-xl); border: .5px solid var(--author-border); border-radius: var(--radius-2xl); }
.author-box-photo { display: flex; flex-direction: column; align-items: center; flex: 0 0 168px; }
.author-box-photo img { inline-size: 168px; block-size: 168px; margin-block-end: 15px; border-radius: var(--radius-round); object-fit: fill; }
.author-box-photo svg { inline-size: 29px; block-size: 34px; fill: var(--linkedin); }
.author-box-role { inline-size: fit-content; margin-block: 0 4px; margin-inline: 0; font-size: var(--text-s); color: var(--muted); border-block-end: 1px solid var(--orange); }
.author-box-name { display: block; }
.author-box-name h4 { font-size: var(--text-4xl); line-height: 1.6; color: var(--heading); transition: color var(--duration); }
.author-box-bio { margin-block: var(--space-m); font-size: var(--text-base); line-height: 1.6; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
    .author-box-name:hover h4 { color: var(--orange); }
}
@media (width <= 479px) {
    .author-box { flex-direction: column; gap: 0; }
    .author-box-photo { flex-direction: row; flex-basis: auto; align-items: center; }
    .author-box-photo img { inline-size: 200px; block-size: 200px; margin-block: 0 15px; margin-inline: 0 var(--space-2xl); }
}

/* Table of contents: grey box, "1 -" numbers and "a." letters. */
.toc { margin-block-end: var(--space-l); padding: var(--space-l); border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--gray-1); }
.toc h2 { margin-block: 0 var(--space-s); margin-inline: 0; font-size: var(--text-4xl); line-height: 1.65; }
.toc ol { list-style: none; counter-reset: item; margin: 0; padding-inline-start: var(--space-2xl); }
.toc > ol { margin-block: 1em; margin-inline: 0; }
.toc li { position: relative; margin-block-end: .6em; font-size: .9em; }
.toc > ol > li::before { counter-increment: item; content: counter(item) "  -"; position: absolute; inset-inline-start: -.8em; font-weight: 800; }
.toc ol ol { counter-reset: subitem; margin-block-start: 6px; }
.toc ol ol > li::before { counter-increment: subitem; content: counter(subitem, lower-alpha) ". "; position: absolute; inset-inline-start: -.4em; }
.toc a { padding-inline-start: .9em; color: var(--heading); }
.toc a:focus { text-decoration: underline; }
@media (hover: hover) and (pointer: fine) {
    .toc a:hover { text-decoration: underline; }
}

/* Article rows (category, author and "Populair" pages): photo left, title and byline right, grey line under. */
.post-row { display: flex; align-items: center; margin-block-end: var(--space-l); padding-block-end: var(--space-l); border-block-end: 2px solid var(--pale); }
.post-row img { display: block; inline-size: 222px; block-size: 125px; margin-inline-end: var(--space-l); border-radius: var(--radius-s); object-fit: fill; }
.post-row h3 { margin: 0; font-size: var(--text-2xl); line-height: 1.6; color: var(--heading); transition: color var(--duration-slow); }
.post-rows .post-row-meta { margin-block: 0 var(--space-s); margin-inline: 0; font-size: var(--text-base); color: var(--text); }
/* The author's name and the date each stay on one line in a narrow column, as on WordPress. */
.post-row-meta span { white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
    .post-row a:hover h3 { color: var(--beige); }
}
@media (width <= 767px) {
    /* Category pages put the photo above the title. */
    .post-row { flex-direction: column; align-items: flex-start; }
    .post-row img { margin-block: 0 15px; margin-inline: 0; }
    /* "Populair" and the author page keep a 167px photo beside the title, as WordPress did. */
    :is(.page-content, .author-list) .post-row { flex-direction: row; align-items: center; }
    :is(.page-content, .author-list) .post-row > a { flex: 0 0 167px; margin-inline-end: var(--space-l); }
    :is(.page-content, .author-list) .post-row > div { flex: 1 1 0; min-inline-size: 0; }
    :is(.page-content, .author-list) .post-row img { inline-size: 100%; margin: 0; }
}
@media (width <= 479px) {
    /* Category pages use smaller author and date lines on phones; "Populair" and the author page do not. */
    .post-rows .post-row-meta { font-size: var(--text-s); }
    :is(.page-content, .author-list) .post-rows .post-row-meta { font-size: var(--text-base); }
}

/* Page links (templates/pagination.html.twig). */
.pagination { display: flex; flex-wrap: wrap; margin: 0; font-size: var(--text-xs); }

/* Contact cards (block contact-cards): white cards with an orange icon and title. */
.contact-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xl); margin-block: 47px var(--space-xl); margin-inline: var(--gutter); }
.contact-card { display: flex; flex-direction: column; align-items: center; padding-block: 48px; padding-inline: 36px; background: var(--white); box-shadow: var(--shadow-card); text-align: center; }
.contact-card svg { inline-size: 36px; block-size: 36px; margin-block-end: var(--space-s); fill: var(--orange); }
.contact-card h2 { margin-block: 0 var(--space-2xs); margin-inline: 0; font-family: var(--font-text); font-size: var(--text-3xl); font-weight: 700; line-height: 1; color: var(--orange); text-transform: uppercase; }
.contact-card address { font-style: normal; font-size: var(--text-s); font-weight: 700; color: var(--heading); }
.contact-card a { font-size: var(--text-s); font-weight: 700; color: var(--heading); letter-spacing: .15em; }
@media (width <= 767px) {
    .contact-cards { grid-template-columns: minmax(0, 1fr); }
}

/* The team (block team): photo, name, role, bio, a "read more" link and social links. */
.team { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2xl); margin-block: 47px 64px; margin-inline: 0; }
.team-member { inline-size: 320px; }
.team-member img { display: block; inline-size: 300px; block-size: 300px; margin-block: 0 var(--space-s); margin-inline: 0; object-fit: fill; }
.team-member h3 { margin-block: 0 var(--space-s); margin-inline: 0; font-size: var(--text-4xl); font-weight: 500; line-height: 1; }
.team-member h3 a { color: var(--heading); transition: color var(--duration); }
/* The role: small and pale green, as on WordPress. */
.team-role { font-size: var(--text-xs); line-height: 1.4; color: var(--team-role); }
.page-content .team-member p { margin-block: 0 var(--space-s); margin-inline: 0; }
.page-content .team-member p:not([class]) { margin: 0; font-weight: 500; line-height: 1.4; color: var(--heading); }
.team-member > a { display: block; }
.team-socials { display: flex; gap: var(--space-2xs); }
.team-social { display: inline-flex; inline-size: 24px; block-size: 24px; margin-block-start: var(--space-s); align-items: center; justify-content: center; border-radius: var(--radius-round); background: var(--orange); }
.team-social svg { inline-size: 12px; block-size: 12px; fill: var(--white); }
@media (hover: hover) and (pointer: fine) {
    .team-member h3 a:hover { color: var(--orange); }
}
@media (width <= 991px) {
    /* The member takes the full width (WordPress's section padding). */
    .team { margin-block-end: 6px; }
    .team-member { inline-size: 100%; padding-inline: var(--gutter); }
}
@media (width <= 767px) {
    .team-member { text-align: center; }
    .team-member img { margin-inline: auto; }
    .team { margin-block-end: -34px; }
}

/* 5. Content: the HTML that Markdown makes, in posts (.post-content), pages (.page-content) and the author's
   biography (.author-about). The elements sit in :where() so a component inside the text (contents, rows, cards)
   wins with a plain class selector. */

.content :where(h2) { margin: 0; font-size: var(--text-4xl); line-height: 1.6; }
.content :where(h3) { margin-block: 18px var(--space-xs); margin-inline: 0; font-size: var(--text-3xl); line-height: 1.5; }
.content :where(h4) { margin-block: var(--space-m) var(--space-2xs); margin-inline: 0; font-size: var(--text-xl); }
/* A long web address in the text breaks instead of widening the page on narrow phones. */
.content :where(p, li) { overflow-wrap: break-word; }
/* An image on its own line is centred, like WordPress's aligncenter; an image inside a line of text stays inline. */
.content :where(p > img:only-child), .content > :where(img) { display: block; margin-block: 0 var(--space-l); margin-inline: auto; }
.content :where(blockquote) { margin-block: 1em; margin-inline: 0; padding-block: 4px; padding-inline: var(--space-l); border-inline-start: 4px solid var(--orange); }
.content :where(blockquote cite) { font-size: .9375rem; color: var(--cite); }

/* Posts use the browser's spacing as WordPress did: 1em around paragraphs and lists, none around headings. */
.post-content :where(p) { margin-block: 1em; margin-inline: 0; }
.post-content :where(h2, h3) { margin: 0; line-height: 1.65; }
.post-content :where(ol) { margin-block: 1em; margin-inline: 0; padding-inline-start: var(--space-2xl); }
.post-content :where(ul) { margin-block: 1em; margin-inline: 0; list-style: none; padding-inline-start: var(--space-l); }
.post-content :where(ul li) { position: relative; padding-inline-start: var(--space-xl); margin-block-end: var(--space-l); }
.post-content :where(ul li)::before { content: ''; position: absolute; inset-inline-start: 0; inset-block-start: .8333em; inline-size: 8px; block-size: 8px; background: var(--orange); }
/* Links to other articles: a grey pill with a small "open" icon. */
.post-content :where(a[href^="/"]:not(.toc a)) { position: relative; display: inline-flex; align-items: baseline; padding-block: 2px; padding-inline: var(--space-2xs) 25px; border-radius: var(--radius-xs); background: var(--gray-3); color: var(--black); font-weight: 700; }
.post-content :where(a[href^="/"]:not(.toc a))::before { content: ''; position: absolute; inset-inline-end: 6px; inset-block-start: 50%; inline-size: 15px; block-size: 15px; transform: translateY(-50%); background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXNxdWFyZS1hcnJvdy1vdXQtdXAtcmlnaHQiPjxwYXRoIGQ9Ik0yMSAxM3Y2YTIgMiAwIDAgMS0yIDJINWEyIDIgMCAwIDEtMi0yVjVhMiAyIDAgMCAxIDItMmg2Ii8+PHBhdGggZD0ibTIxIDMtOSA5Ii8+PHBhdGggZD0iTTE1IDNoNnY2Ii8+PC9zdmc+') center / contain no-repeat; }
@media (hover: hover) and (pointer: fine) {
    .post-content :where(a[href^="/"]:not(.toc a)):hover { background: var(--gray-3-hover); }
}

/* Pages: WordPress separated their paragraphs with blank lines, with 16px around each text block and none around
   the headings. */
.page-content :where(p) { margin-block: var(--space-m); margin-inline: 0; }
.page-content :where(p + p) { margin-block-start: var(--space-flow); }
.page-content :where(ul, ol) { padding-inline-start: var(--space-2xl); }

/* Tables: white card with an orange header row, striped rows. A table wider than the column (long words in many
   columns) scrolls sideways in its own frame (div.table-scroll, added in _toc.html.twig) instead of widening the
   page; the frame leaves room for the table's shadow. From 1120px up such a table runs into the empty space right of
   the column, as on WordPress (the widest, 856px, still ends 88px before the edge of a 1280px screen). */
.table-scroll { overflow-x: auto; margin-block: 0 var(--space-2xs); margin-inline: calc(-1 * var(--space-xs)); padding-block: 0 var(--space-s); padding-inline: var(--space-xs); }
@media (width >= 1120px) { .table-scroll { overflow-x: visible; } }
/* 20px after a table, as on WordPress: the frame's padding and margin make the gap, so the next paragraph or list
   adds no margin of its own (it could not fold into the padding). */
.post-content .table-scroll + * { margin-block-start: 0; }
.content :where(table) { inline-size: 100%; margin: 0; border-collapse: separate; border-spacing: 0; border-radius: var(--radius-s); box-shadow: var(--shadow-table); }
.content :where(th) { padding-block: var(--space-s); padding-inline: 15px; background: var(--table-head); color: var(--white); font-weight: 700; text-align: start; }
.content :where(td) { padding-block: var(--space-s); padding-inline: 15px; border-block-end: 1px solid var(--line); }
.content :where(tbody tr:nth-child(even)) { background: var(--gray-2); }
@media (hover: hover) and (pointer: fine) {
    .content :where(tbody tr):hover { background: var(--table-hover); }
}
@media (width <= 767px) {
    .content :where(th, td) { padding-block: var(--space-2xs); padding-inline: var(--space-xs); font-size: var(--text-s); }
}

/* 6. Pages */

/* Post: categories, title, subtitle, featured image and the affiliate notice above the text. */
.post-categories { white-space: nowrap; margin: 0; font-size: var(--text-xs); color: var(--pale); }
.post-categories a { color: var(--category-link); }
.post h1 { margin-block: 0 18px; margin-inline: 0; font-size: 2.875rem; font-weight: 800; line-height: 1.1; text-transform: capitalize; }
.kicker { margin-block: 22px var(--space-xs); margin-inline: 0; font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 700; line-height: 1.5; color: var(--heading); }
.featured { display: block; inline-size: 725px; border-radius: var(--radius-xl); }
.affiliate-note { margin-block: var(--space-s); margin-inline: 0; font-size: var(--text-xs); font-style: italic; color: var(--muted); }
.post-content { display: flow-root; font-size: var(--text-post); line-height: 1.65; }
@media (hover: hover) and (pointer: fine) {
    .post-categories a:hover { color: var(--orange); }
}

/* Titles of pages, category pages and the author page: large, with a thin orange line under it.
   On WordPress a title as wide as its longest word could run into the page's side margin ("Toegankelijkheid" is
   367px on a 390px phone); here it may use that 20px too. */
.page-title { display: inline-block; max-inline-size: calc(100% + var(--gutter)); margin-block: 0 18px; margin-inline: 0; padding-block-end: 0; font-size: 3rem; font-weight: 600; line-height: 1.6; border-block-end: 1px solid var(--orange); }

/* Lists of articles: category and author pages. A category name that wraps (on phones) is centred, as on WordPress. */
.archive, .page { padding-block-start: var(--space-section); }
.archive { padding-block-end: 15px; }
.archive .page-title { text-align: center; margin-block-end: 0; }
.list-title { margin-block: 0 5px; margin-inline: 0; font-size: var(--text-3xl); }
@media (width <= 767px) {
    .list-title { margin-block-end: 25px; }
}

/* Text pages. */
.page { padding-block-end: 15px; }
.page .page-title { margin-block-end: 14px; }
.page-content { font-size: var(--text-base); line-height: 1.6; }
.page-content .page-intro { margin-block: 0 13px; margin-inline: 0; font-size: var(--text-2xl); line-height: 1.6; color: var(--heading); }
.page-content > p:first-child:not(.page-intro) { margin-block-start: 0; }
/* A photo on a page (Over ons) sits 12px under the intro and 8px above the next heading. */
.page-content p:has(> img:only-child) { margin-block: 0 var(--space-2xs); margin-inline: 0; }
.page-content p > img:only-child { margin-block-end: 0; }
/* The Populair page: its list starts 75px under the title, as on WordPress. */
.page-content > .post-rows:first-child { margin-block-start: var(--space-section); }
@media (width <= 991px) {
    /* The team page: the intro moves 80px down (WordPress's section padding). */
    .page-intro:has(+ .team) { margin-block-start: 81px; }
}
@media (width <= 767px) {
    /* Phones centre the team page, as WordPress did. */
    .page-intro:has(+ .team) { text-align: center; }
}

/* Author page (Oxygen template 63): photo and name, the biography, then the author's articles. */
.author-hero { display: flex; align-items: center; padding-block: var(--space-section); }
.author-hero img { flex: 0 0 auto; inline-size: 200px; block-size: 200px; margin-inline-end: 37px; border-radius: var(--radius-round); object-fit: fill; }
.author-hero h1 { font-size: var(--text-5xl); font-weight: 700; line-height: 1.2; }
.author-hero p { margin: 0; color: var(--heading); }
.author-hero .author-role { margin-block-end: 15px; font-weight: 500; }
.author-hero .author-expertise { margin-block-end: var(--space-2xs); }
/* Oxygen stacked the biography blocks without collapsing their margins. */
.author-about { display: flex; flex-direction: column; align-items: flex-start; }
.author-about h2 span, .author-expertise span, .author-hero p:last-child span { display: inline-block; }
.author-about > p:has(> strong:only-child):not(:nth-of-type(2)) { margin: 0; }
/* The closing sentence and its link were separate flex items in Oxygen. */
.author-about > p:last-child { display: contents; }
.author-about h2 { margin: 0; font-size: var(--text-4xl); line-height: 1.6; }
.author-about p { margin-block: var(--space-m); margin-inline: 0; }
/* WordPress put the biography's paragraphs straight under their headings, after an empty line under the intro. */
.author-about h3 { margin: 0; font-size: var(--text-3xl); line-height: 1.6; }
.author-about h3 + p { margin: 0; }
.author-about h2 + p + h3 { margin-block-start: 73px; }
.author-list { padding-block-start: 57px; }
.author-hero + .author-list { padding-block-start: 0; }
.author-more { margin: 0; font-size: var(--text-4xl); line-height: 1.6; }

/* Home page: the sizes and spacing of the WordPress home (Oxygen page 17). */
.home-hero { padding-block: var(--space-section); background: var(--gray-4); text-align: center; }
.home-hero h2 { min-inline-size: min-content; margin-block-start: 97px; font-size: 3.3125rem; font-weight: 800; line-height: 1.6; }
.home-section { position: relative; padding-block: var(--space-section); }
/* The section titles are centred as blocks; a title that wraps (on phones) reads from the left, as on WordPress. */
.home-section > .container { display: flex; flex-direction: column; align-items: center; }
.home-wave { position: absolute; inset-inline-start: 0; inset-block-start: -2px; inline-size: 100%; transform: scaleY(-1); }
.home-wave-red { block-size: 110px; color: var(--orange); }
.home-wave-grey { inset-block-start: -3px; block-size: 100px; color: var(--gray-4); }
.home-wave-about { block-size: 70px; color: var(--gray-4); transform: scale(-1, -1); }
.home-kicker { margin-block: 0 27px; margin-inline: 0; font-size: var(--text-2xl); line-height: 1.6; color: var(--heading); }
.home-title { margin-block: 0 var(--space-m); margin-inline: 0; font-size: 2.5rem; font-weight: 700; line-height: 1.6; border-block-end: 1px solid var(--orange); }
.home-featured-section { padding-block: 165px 138px; }
.home-featured { display: flex; inline-size: 100%; }
.home-featured-card { inline-size: 60%; margin-block-end: 35px; padding: var(--space-l); }
.home-featured-card img { display: block; inline-size: 100%; border-radius: var(--radius-3xl); }
.home-featured-card h3 { margin-block-start: 22px; text-align: center; font-size: var(--text-4xl); font-weight: 700; line-height: 1.6; color: var(--heading); transition: color var(--duration); }
.home-about { padding-block-start: var(--space-section); background: var(--gray-4); }
.home-about-row { display: flex; }
.home-about-intro { inline-size: 50%; text-align: start; }
.home-about-intro h2 { margin: 0; font-size: 3.4375rem; font-weight: 800; line-height: 1.6; border-block-end: 4px solid var(--orange); }
.home-about-intro p { inline-size: 99%; margin-block: 24px 0; margin-inline: 0; color: var(--heading); }
.home-about-intro p + p { margin-block-start: var(--space-flow); }
.home-about-intro p:last-child { margin-block-end: var(--space-flow); }
.home-about-items { display: flex; flex-direction: column; align-items: flex-end; inline-size: 50%; }
.home-about-items > div { display: flex; flex-direction: column; align-items: flex-start; inline-size: 60%; margin-block-end: var(--space-xl); }
.home-about-items h4 { font-size: var(--text-xl); line-height: 1.6; color: var(--heading); border-block-end: 1px solid var(--orange); }
.home-about-items p { margin-block: 9px var(--space-xs); margin-inline: 0; color: var(--heading); }
.home-about-items a { font-weight: 700; text-decoration: underline; }
.home-categories-section { padding-block-start: 160px; }
.home-categories-section .home-kicker { margin-block-end: 0; }
.home-categories { display: flex; flex-wrap: wrap; justify-content: center; inline-size: 100%; }
.home-categories a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-inline-size: 20%; block-size: 150px; margin-block: var(--space-l); margin-inline: 15px; padding-block: 0; padding-inline: var(--space-xs); border: 3px solid var(--orange); border-radius: var(--radius-3xl); color: var(--orange); font-family: var(--font-heading); font-size: var(--text-m); line-height: 1.6; text-align: center; transition: border-width var(--duration-slow); }
.home-categories svg { inline-size: 60px; block-size: 60px; fill: var(--orange); }
.home-latest { display: flex; flex-wrap: wrap; inline-size: 100%; }
.home-latest-card { inline-size: 33.33%; margin-block-end: 48px; padding: var(--space-xs); }
.home-latest-image { position: relative; display: block; margin-block-end: var(--space-m); }
.home-latest-image img { display: block; inline-size: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-l); }
.home-latest-date { position: absolute; inset-block-start: 1em; inset-inline-end: 1em; padding-block: .7em; padding-inline: 1em; border-radius: var(--radius-2xl); background: color-mix(in oklch, var(--black) 50%, transparent); color: var(--white); font-size: var(--text-2xs); font-weight: 700; line-height: 1.6; }
/* The 6.4px under the title is WordPress's empty meta line, which it hid from 1120px down. */
.home-latest-title { display: block; margin-block-end: 6.4px; font-size: var(--text-l); font-weight: 600; line-height: 1.2; color: var(--black); text-transform: capitalize; }
/* The footer follows the last list directly, as on WordPress. */
main:has(.home-latest-section) + .site-footer { margin-block-start: 0; }
@media (hover: hover) and (pointer: fine) {
    .home-featured-card a:hover h3, .home-latest-title:hover { color: var(--orange); }
    .home-categories a:hover { transform: scale(1.05); border-width: 4px; }
}
@media (prefers-reduced-motion: no-preference) {
    .home-categories a { transition: transform var(--duration-slow), border-width var(--duration-slow); }
}
@media (width <= 1120px) {
    .home-latest-card { inline-size: 50%; }
    .home-latest-title { margin-block-end: 0; }
}
@media (width <= 991px) {
    /* WordPress's empty second column then sits under the article and adds its padding (40px). */
    .home-featured-section { padding-block-end: 178px; }
    .home-featured { flex-direction: column; align-items: center; }
    .home-featured-card { inline-size: 100%; }
    /* The category buttons stack, full width. */
    .home-categories { flex-direction: column; }
}
@media (width <= 767px) {
    .home-about-row { flex-direction: column; }
    .home-about-intro, .home-about-items { inline-size: 100%; }
    .home-about-items { align-items: flex-start; margin-block-start: 41px; }
    .home-about-items > div { inline-size: 100%; }
    .home-latest-card { inline-size: 100%; }
}
@media (width <= 479px) {
    .home-featured-card { padding-block-end: 0; }
    .home-featured-card h3 { font-size: var(--text-l); }
    .home-about-intro h2 { font-size: 2rem; }
    .home-about-intro p:first-of-type { margin-block-start: var(--space-m); }
    .home-categories a { inline-size: 237px; max-inline-size: 100%; margin-block: var(--space-l); margin-inline: auto; }
}

/* 404: one centred line (the footer's own 60px margin makes up WordPress's 75px under it). */
.not-found { padding-block: 175px 15px; text-align: center; }
.not-found h1 { inline-size: max-content; max-inline-size: 100%; margin: auto; text-align: start; font-size: var(--text-5xl); line-height: 1.6; }