/* Audiotic theme: brown and grey, Nunito headings, Lato text (as the WordPress site) */
:root {
    --brown: #5b3000;
    --brown-light: #66462c;
    --text: #404040;
    --heading: #333;
    --grey: #9e9e9e;
    --light: #eaeaea;
    --blue: #0074db;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Lato, system-ui, sans-serif; font-size: 16px; line-height: 1.6; color: var(--text); overflow-wrap: break-word; }
h1, h2, h3, h4, h5, h6 { font-family: Nunito, system-ui, sans-serif; font-weight: 700; color: var(--heading); overflow-wrap: normal; }
/* Headings never break inside a word, as on WordPress. Only a word wider than its column (a long Dutch compound on a phone,
   where WordPress made the page wider than the screen) is hyphenated: the script at the end of base.html.twig wraps
   such a word in span.hyphenate. */
.hyphenate { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: auto 4 4; overflow-wrap: break-word; }
img { max-width: 100%; height: auto; }
a { color: var(--blue); text-decoration: none; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* Header: links left and right of a brown diamond with the logo */
.site-header { position: relative; z-index: 5; background: #fff; }
.header-row { position: relative; display: flex; align-items: center; justify-content: center; min-height: 67px; }
.header-nav { display: flex; align-items: center; width: 40%; }
.header-left { justify-content: flex-end; padding-right: 20px; }
.header-right { justify-content: flex-start; padding-left: 20px; margin-left: 20%; }
.header-nav > a, .menu summary { display: block; padding: 20px 36px; font-family: Nunito, sans-serif; font-weight: 700; color: var(--grey); cursor: pointer; transition: color .2s; }
.header-nav > a:hover, .menu summary:hover { color: var(--brown-light); }
.menu { position: relative; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; z-index: 10; top: 100%; left: 36px; display: flex; flex-direction: column; min-width: 220px; padding: 4px 0 12px; background: #fff; box-shadow: 0 10px 24px rgba(0, 0, 0, .08); }
.menu-panel a { padding: 10px 16px 0; color: var(--grey); white-space: nowrap; }
.menu-panel a:hover { color: var(--brown-light); }
.logo { position: absolute; top: -100px; left: calc(50% - 100px); display: flex; align-items: flex-end; justify-content: flex-end; width: 200px; height: 200px; border: 10px solid; border-color: #7a5a3c var(--brown) var(--brown) #7a5a3c; background: linear-gradient(90deg, var(--brown-light), var(--brown)); transform: rotate(45deg); transition: transform .2s; }
.logo:hover { transform: scale(1.05) rotate(45deg); }
.logo img { width: 80px; margin: 0 8px 12px 0; opacity: .7; transform: rotate(-45deg); transition: opacity .2s; }
.logo:hover img { opacity: 1; }
.mobile-menu { display: none; }

/* Phones and tablets: only the grey menu button, as on WordPress. Open, the menu fills the screen (grey, items centred,
   uppercase); the button becomes a brown X near the top right (WordPress put it at 88% of the width). */
@media (max-width: 991px) {
    .header-nav, .logo { display: none; }
    .header-row { justify-content: flex-end; min-height: 60px; padding: 0; }
    .mobile-menu { display: block; }
    .mobile-menu summary { list-style: none; cursor: pointer; }
    .mobile-menu summary::-webkit-details-marker { display: none; }
    .mobile-menu > summary { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; background: #dedede; transition: background-color .2s; }
    .mobile-menu > summary:hover { background: #d1d1d1; }
    .mobile-menu > summary svg { width: 28px; height: 28px; fill: #000; transition: fill .2s; }
    .mobile-menu-close { display: none; }
    .mobile-menu[open] > summary { position: fixed; z-index: 101; top: 20px; left: 88%; }
    .mobile-menu[open] .mobile-menu-open { display: none; }
    .mobile-menu[open] .mobile-menu-close { display: block; fill: var(--brown); }
    .mobile-menu[open] > summary:hover .mobile-menu-close { fill: #ff6d6d; }
    body:has(.mobile-menu[open]) { overflow: hidden; }
    /* A closed <details> still lays out its content (Chrome only hides it), so the panel is taken out entirely */
    .mobile-menu:not([open]) .mobile-menu-panel { display: none; }
    .mobile-menu-panel { position: fixed; z-index: 100; inset: 0; display: flex; align-items: center; justify-content: center; overflow: auto; background: #eee; }
    .mobile-menu-list { display: flex; flex-direction: column; }
    .mobile-menu-list a, .mobile-sub > summary { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 12px; color: #333; font-size: 16px; font-weight: 900; letter-spacing: 2px; line-height: 1.6; text-align: center; text-transform: uppercase; transition: color .2s; }
    .mobile-menu-list a:hover, .mobile-sub > summary:hover { color: var(--brown); }
    .mobile-menu-list a[aria-current] { color: #f00; }
    /* WordPress's item was 9px wider than its text and arrow (whitespace in the link); the list takes its width from it */
    .mobile-sub > summary { padding: 8px 16.4px; }
    .mobile-sub > summary svg { flex: none; width: 24px; height: 24px; margin-left: 4px; fill: currentColor; transition: transform .2s; }
    .mobile-sub[open] { background: #ddd; }
    .mobile-sub[open] > summary svg { transform: rotate(180deg); }
    /* The sub-items take the list's width (set by the main items) and wrap inside it */
    .mobile-sub-list { display: flex; flex-direction: column; contain: inline-size; }
    /* WordPress fitted "SLIMME FUNCTIES" (its last letter's spacing hanging past the edge) on one line */
    .mobile-sub-list a { padding: 8px 11px; }
}

main { display: block; min-height: 50vh; }

/* Footer: four columns of a quarter (20px padding each); one column on phones */
.site-footer { margin-top: 80px; padding: 20px 0 8px; background: linear-gradient(50deg, var(--brown), var(--brown-light)); color: #dbdbdb; }
.home ~ .site-footer, main:has(.home) + .site-footer { margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 20px; padding-bottom: 20px; }
.footer-grid > div { display: flex; flex-direction: column; align-items: flex-start; padding: 0 20px; }
.footer-title { margin: 0 0 12px; font-family: Nunito, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.1; color: #fff; }
.footer-brand { margin-bottom: 5px; font-size: 30px; }
.footer-grid p { margin: 0 0 4px; }
.footer-grid .footer-title { margin-bottom: 12px; }
.footer-grid .footer-brand { margin-bottom: 5px; }
.footer-grid a { margin-bottom: 12px; color: #dbdbdb; }
.footer-grid a:hover { color: #fff; text-decoration: underline; }
.footer-grid address { font-style: normal; }
.footer-grid address a { margin: 0; }
/* Facebook and LinkedIn: 20px icons in 40px round buttons, 10px apart */
.socials { display: flex; margin: 0 -10px -10px; }
.footer-grid .socials a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 10px 10px 0; border-radius: 50%; }
.socials svg { width: 20px; height: 20px; fill: #dbdbdb; }
.socials a:hover svg { fill: #fff; }
.footer-bottom { padding-top: 25px; padding-bottom: 12px; }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 0 20px; }
.footer-bottom nav a { color: #dbdbdb; font-size: 12px; }
.footer-bottom nav a:hover { color: #fff; text-decoration: underline; }
/* Lato Regular, as on WordPress */
.copyright { margin: 8px 0 12px; padding: 0 20px; color: #fff; font-size: 12px; }
@media (max-width: 1120px) { .copyright { margin-top: 12px; } }
/* Phones: the columns stacked and centred (the site text stays left-aligned); the legal links on one line, wrapping
   inside a link when they do not fit ("Cookie / Policy"), as on WordPress */
@media (max-width: 767px) {
    .footer-grid { grid-template-columns: 1fr; padding-top: 0; padding-bottom: 0; }
    .footer-grid > div { align-items: center; padding: 20px; text-align: center; }
    .footer-grid p { text-align: left; }
    .footer-grid .footer-title, .footer-grid address { text-align: center; }
    .footer-bottom { padding-top: 5px; }
    .footer-bottom nav { flex-wrap: nowrap; align-items: center; justify-content: center; gap: 0; padding: 20px 20px 0; text-align: center; }
    .footer-bottom nav a { margin-right: 16px; }
    .copyright { text-align: center; }
}

/* Post: a column of 65% with 20% space on its left, as the WordPress template */
/* Under the writer's box WordPress left 75px and an empty 150px section before the footer */
.post-layout { padding-top: 95px; padding-bottom: 164px; }
.post { width: calc(65% - 40px); margin-left: calc(20% + 20px); }
/* Phones and tablets: one column, 115px under the menu bar and 20px extra space on each side, as on WordPress */
@media (max-width: 991px) { .post { width: 100%; margin-left: 0; padding: 0 20px; } .post-layout { padding-top: 115px; padding-bottom: 205px; } }
.post-categories { margin: 0; font-size: 12px; color: #dbdbdb; }
.post-categories a { color: var(--grey); }
.post-categories a:hover { color: var(--brown); }
.post h1 { margin: 0 0 18px; font-size: 46px; font-weight: 800; line-height: 1.1; text-transform: capitalize; }
/* Phones and tablets: on WordPress the title box grew to fit its longest word ("Koptelefoons?" is 313px in a 310px column);
   the title may use 10px of the column's padding for that. */
@media (max-width: 991px) { .post h1 { margin-right: -10px; } }
.byline { display: flex; align-items: center; padding: 5px 0; }
.byline img { width: 60px; height: 60px; margin-right: 15px; border-radius: 50%; object-fit: cover; }
.byline p { margin: 0; padding-left: 16px; font-size: 14px; color: var(--grey); }
.byline a { font-weight: 600; color: var(--grey); }
.byline a:hover { color: var(--brown); }
.kicker { margin: 22px 0 10px; font-family: Nunito, sans-serif; font-size: 24px; font-weight: 700; line-height: 1.5; color: var(--heading); }
.featured { display: block; width: 725px; border-radius: 20px; }
.affiliate-note { margin: 0; font-size: 12px; font-style: italic; color: var(--grey); }
@media (max-width: 479px) {
    .byline { flex-direction: column; align-items: flex-start; }
    .byline p { margin-top: 9px; }
}

/* Article text */
.content { font-size: 19px; line-height: 1.65; }
.post .content { margin-top: 19px; }
.content p { margin: 19px 0; }
.content h2 { margin: 0; font-size: 30px; line-height: 1.65; }
.content h3 { margin: 0; font-size: 24px; line-height: 1.65; }
.content h4 { font-size: 20px; }
.content a { color: var(--blue); }
.content img { display: block; }
/* A picture on its own line was a centred WordPress image block */
.content p > img:only-child { margin: 0 auto; }
.content ul { padding-left: 20px; list-style: none; }
.content ul > li { position: relative; margin: 0 0 20px; padding-left: 30px; }
.content ul > li::before { content: ""; position: absolute; left: 0; top: .83em; width: 8px; height: 8px; background: var(--brown); }
.content ol { padding-left: 40px; }
.content ol > li { margin-bottom: 0; }
/* "Lees ook" lists (box `related`, WordPress ul.related-pages-list): each link a grey pill with a link icon */
.related a { position: relative; display: inline-flex; align-items: baseline; padding: 2px 25px 2px 8px; border-radius: 8px; background: #eee; color: #000; font-weight: 700; }
.related a::after { content: ""; position: absolute; top: 50%; right: 6px; 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") 0 0 / contain no-repeat; }
.related a:hover { background-color: #ddd; }
/* Tables: orange header row, striped rows (the rounded corners only show on the shadow, as on live) */
.content table { width: 100%; margin: 0 0 20px; border-collapse: separate; border-spacing: 0; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, .1); }
.content thead th { padding: 12px 15px; background: #ff5805; color: #fff; font-weight: 700; text-align: left; }
.content tbody td, .content tbody th { padding: 12px 15px; border-bottom: 1px solid #ddd; text-align: left; }
.content tbody tr:nth-child(even) { background: #f3f3f3; }
.content tbody tr:hover { background: #ffe5d9; }
/* A table whose first row WordPress kept in the body ({.no-head}): that row plain, bold and centred, with the browser's
   1px cell padding and the text size at every width, and the stripes starting on the first data row, as on live */
.content .no-head thead th { padding: 1px; background: none; color: inherit; font-size: inherit; text-align: center; }
.content .no-head tbody tr:nth-child(odd) { background: #f3f3f3; }
.content .no-head tbody tr:nth-child(even) { background: none; }
.content .no-head thead tr:hover, .content .no-head tbody tr:hover { background: #ffe5d9; }
.content blockquote { margin: 24px 0; padding: 4px 20px; border-left: 4px solid var(--brown); }
/* Tablets and phones: each table sits in a box (.table-scroll, the wrapper _toc.html.twig puts around every table).
   A narrower table fills the column, as on WordPress. A wider one may run into the 40px right margin, up to the
   screen edge, as on WordPress, so it still shows whole; only a table wider than that scrolls sideways inside its
   box (on WordPress it ran off the screen). The box takes the table's shadow (its own overflow would cut it off);
   its corners stay square. */
@media (max-width: 767px) {
    .table-scroll { width: fit-content; min-width: 100%; max-width: calc(100% + 40px); margin: 0 0 20px; overflow-x: auto; box-shadow: 0 4px 8px rgba(0, 0, 0, .1); }
    .table-scroll > table { margin: 0; border-radius: 0; box-shadow: none; }
}
@media (max-width: 600px) {
    .content thead th, .content tbody td, .content tbody th { padding: 8px 10px; font-size: 14px; }
}

/* Table of contents (after the first paragraph): "1 -" before each h2, "a." before each h3 under it, as on live */
.toc { margin: 0 0 20px; padding: 20px; border: 1px solid #ddd; border-radius: 12px; background: #f8f8f8; }
.toc h2 { margin: 0 0 12px; }
.toc ol { margin: 1em 0; padding-left: 40px; list-style: none; counter-reset: item; }
.toc ol > li { position: relative; margin-bottom: .6em; font-size: .9em; }
.toc > ol > li::before { counter-increment: item; content: counters(item, ".") "  -"; position: absolute; left: -.8em; font-weight: 800; }
.toc ol ol { margin: 6px 0 0; counter-reset: subitem; }
.toc ol ol > li::before { counter-increment: subitem; content: counter(subitem, lower-alpha) ". "; position: absolute; left: -.4em; }
.toc a { padding-left: .9em; color: #333; }
.toc a:hover { text-decoration: underline; }

/* Writer's box under a post */
/* Photo 168px (200px when stacked on phones) left of role, name and bio, as on WordPress */
.author-box { display: flex; margin: 0 0 50px; padding: 30px; border: 1px solid rgba(38, 153, 142, .39); border-radius: 30px; text-align: left; }
.author-box > img { flex: none; width: 168px; height: 168px; margin: 0 15px 15px 0; border-radius: 50%; object-fit: cover; }
.author-box > div { display: flex; flex-direction: column; align-items: flex-start; }
.author-box-role { margin: 0 0 4px; border-bottom: 1px solid var(--brown); color: var(--grey); font-size: 14px; }
.author-box h4 { margin: 0; font-size: 30px; font-weight: 600; color: var(--heading); transition: color .2s; }
.author-box a:hover h4 { color: var(--brown); }
.author-box-bio { margin: 16px 0; color: var(--grey); }
@media (max-width: 767px) { .author-box { flex-direction: column; } .author-box > img { width: 200px; height: 200px; } }

/* Pages, category and author pages: a title with a thin brown line under it, 75px under the menu at every width */
.page, .archive { padding-top: 75px; padding-bottom: 20px; }
/* Pages: WordPress's content section ended with 75px of padding, right above the footer */
.page:not(.archive) { padding-bottom: 75px; }
main:has(> .page:not(.archive)) + .site-footer { margin-top: 0; }
.page-title { display: inline-block; max-width: 100%; margin: 0 0 14px; border-bottom: 1px solid var(--brown); font-size: 48px; font-weight: 600; line-height: 1.6; }
.archive .page-title { margin-bottom: 0; text-align: center; }
/* Phones: as on WordPress the title may use the right-hand padding, so "Toegankelijkheid" stays whole */
@media (max-width: 767px) { .page-title { max-width: calc(100% + 20px); margin-right: -20px; } }
.page-intro { margin: 0 0 11px; font-size: 22px; line-height: 1.6; color: var(--heading); }
/* These WordPress pages had 22px more space above their intro line */
.page-het-team .page-intro, .page-disclaimer .page-intro, .page-redactionele-richtlijnen-en-publicatieprincipes .page-intro { margin-top: 22px; }
.page-het-team .page-intro { margin-bottom: 0; }
/* A heading right under the intro line follows it without space, as on WordPress */
.page-intro:has(+ .content > h2:first-child) { margin-bottom: 0; }
.page .content { font-size: 16px; line-height: 1.6; }
/* WordPress's text blocks: 16px above and below, paragraphs a blank line apart (they were one block with <br><br>) */
.page .content p { margin: 16px 0; }
.page .content p + p { margin-top: 1.6em; }
.page .content h2 { margin: 0; line-height: 1.6; }
.page .content ul > li { margin-bottom: 8px; }
.page .content img { width: 100%; }
.page .content p:has(> img:only-child) { margin: 0 0 9px; }
/* Privacy policy: one text block without margins; the cookie policy's text block ended with an empty line */
.page-privacy-policy .content > p:first-child { margin-top: 0; }
.page-privacy-policy .content > p:last-child { margin-bottom: 0; }
.page-cookie-policy .content > p:last-child { margin-bottom: calc(16px + 1.6em); }
/* Over ons: the list's intro line starts right under its heading (a rich text block) */
.page-over-ons .content h2 + p:has(+ ol) { margin-top: 0; }
.page-over-ons .content ol { margin: 16px 0; }

/* Het team: the card a third of the row, centred (WordPress's section: 120px of padding under it, 60px on tablets,
   20px on phones; on tablets 80px above the intro line). The card's social icons linked to the bare facebook.com,
   instagram.com and twitter.com and are left out. */
.page.page-het-team { padding-bottom: 0; }
.team-member { width: 33.34%; margin: 0 auto 140px; padding: 20px; }
.team-member img { display: block; width: 300px; height: 300px; margin-bottom: 12px; object-fit: cover; }
.team-member h3 { margin: 0; font-size: 30px; font-weight: 500; line-height: 1; color: #333; transition: color .2s; }
.team-member a:hover h3 { color: var(--brown); }
.team-role { margin: 12px 0; font-size: 12px; line-height: 1.4; color: #726953; }
.team-member p:not(.team-role) { margin: 0; font-weight: 500; line-height: 1.4; color: var(--heading); }
/* Tablets: the intro further down, the card the full width; phones: both centred */
@media (max-width: 991px) {
    .page-het-team .page-intro { margin-top: 103px; }
    .team-member { width: auto; margin: 0 0 80px; }
}
@media (max-width: 767px) {
    .page-het-team .page-intro { text-align: center; }
    .team-member { margin-bottom: 40px; text-align: center; }
    .team-member img { margin: 0 auto 12px; }
}

/* Contact */
/* Three equal columns with 20px padding (40px between cards), 105px above the footer; stacked on phones, as on WordPress */
.contact-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin: 20px 20px 30px; }
.contact-card { display: flex; flex-direction: column; align-items: center; padding: 48px 36px; box-shadow: 0 10px 40px rgba(0, 0, 0, .1); text-align: center; }
.contact-card .icon { width: 36px; height: 36px; margin-bottom: 12px; fill: var(--brown); }
.contact-card h2 { margin: 0 0 8px; font-family: Lato, sans-serif; font-size: 24px; line-height: 1; color: var(--brown); text-transform: uppercase; }
.contact-card address, .contact-card a { font-size: 14px; font-weight: 700; font-style: normal; color: #333; }
.contact-card a { letter-spacing: 2px; }
.contact-card a:hover { text-decoration: underline; }
@media (max-width: 767px) { .contact-cards { grid-template-columns: 1fr; } }

/* Lists of posts (category, author and Populair pages) */
.listing-title { margin: 0 0 5px; font-size: 24px; }
.post-rows { margin-top: 6px; }
/* Populair (/blog/): the list started in its own section, 90px under the title */
.populair .post-rows { margin-top: 90px; }
.post-row { display: flex; align-items: center; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 2px solid #ddd; }
.post-row > a:first-child { flex: none; margin-right: 20px; }
.post-row img { display: block; width: 222px; height: 125px; border-radius: 10px; object-fit: cover; }
.post-row h3 { margin: 0; font-size: 22px; line-height: 1.6; color: #333; }
.post-row a:hover h3 { color: var(--brown); }
.post-row p { margin: 0 0 12px; color: var(--text); }
/* The writer's name and the date do not break (WordPress's spans were inline blocks) */
.post-row p span { display: inline-block; }
/* Category pages on tablets and phones: the photo (same size) above the title, centred; on phones on the left with a
   smaller byline. The Populair and author lists keep the photo beside the title; it shrinks with the title's column. */
@media (max-width: 767px) {
    .listing-title { margin-bottom: 25px; }
    .category-archive .post-row { flex-direction: column; align-items: stretch; }
    .category-archive .post-row > a:first-child { align-self: center; margin: 0 0 15px; }
}
/* As on WordPress the photo itself is the row's item: it shrinks with a long title, down to its 4:3 width at 125px high */
.populair .post-row > a:first-child, .author-archive .post-row > a:first-child { display: contents; }
.populair .post-row img, .author-archive .post-row img { margin-right: 20px; aspect-ratio: 4 / 3; }
/* A title word wider than its column is hyphenated instead of pushing the page wider (as WordPress did) */
.populair .post-row > div, .author-archive .post-row > div { min-width: 0; }
@media (max-width: 479px) {
    .category-archive .post-row > a:first-child { align-self: flex-start; }
    .category-archive .post-row p { font-size: 14px; }
}
/* Pagination: small plain links as on live (12px, blue); the current page and the dots (…) in the text colour.
   Live printed them without any space ("123…38Volgende »"); a small gap keeps the numbers apart. */
.pagination { display: flex; flex-wrap: wrap; gap: 2px 6px; margin: 8px 0 24px; font-size: 12px; line-height: 1.6; }
.pagination [aria-current], .pagination .dots { color: var(--text); }

/* Author page: photo and facts, 75px of space, then "Over <name>" with round bullets (as on WordPress) */
.author-hero { display: flex; align-items: center; gap: 37px; margin-bottom: 75px; }
.author-hero img { flex: none; width: 200px; height: 200px; border-radius: 50%; object-fit: cover; }
.author-hero h1 { margin: 0; font-size: 36px; font-weight: 700; line-height: 1.2; }
.author-hero p { margin: 0 0 8px; font-size: 16px; color: var(--heading); }
.author-hero h1 + p { margin-bottom: 15px; font-weight: 500; }
.author-about { font-size: 16px; line-height: 1.6; }
.author-about h2, .author-more { margin: 0 0 16px; font-size: 30px; font-weight: 700; line-height: 1.6; }
.author-more { margin-top: 50px; }
/* The name does not break (WordPress's span was an inline block) */
.author-more span { display: inline-block; }
.author-about p { margin: 0 0 1.6em; }
.author-about ul { padding-left: 40px; list-style: disc; }
.author-about ul > li { margin: 0; padding-left: 0; }
.author-about ul > li::before { content: none; }
@media (max-width: 600px) { .author-hero { flex-direction: column; align-items: flex-start; } }

/* Home (WordPress breakpoints: 1120, 991, 767 and 479px) */
/* Hero: 75px + the welcome line's 97px margin above it, 75px below it; its grey then flows into the next section as a wave */
.home-hero { padding: 172px 0 75px; background: var(--light); text-align: center; }
/* Its third line is 1080.1px in a 1080px column; WordPress still fitted it, so the line may use 1px of the padding */
.home-hero h2 { margin: 0 -1px; font-size: 53px; font-weight: 800; line-height: 1.6; }
.home-section { position: relative; padding: 75px 0; text-align: center; }
/* Shape dividers: a wave drawn from the top of a section, upside down (and mirrored) as WordPress drew them */
.divider { position: absolute; top: -1px; left: 0; width: 100%; height: 100px; fill: var(--light); transform: scaleY(-1); }
.divider-hero-edge { height: 110px; fill: var(--brown); }
.divider-about { height: 70px; transform: scale(-1, -1); }
.home-kicker { margin: 0; font-size: 22px; color: var(--heading); }
/* A section title: centred on its line; when it wraps (phones) its text starts on the left, as on WordPress */
.home-title { display: inline-block; margin: 0 0 16px; border-bottom: 1px solid var(--brown); font-size: 40px; font-weight: 700; line-height: 1.6; text-align: left; }
/* Uitgelichte artikelen: the article takes 60% of the row (the whole row on tablets and phones), its photo 4:3 */
.home-featured { padding: 165px 0 138px; }
.home-featured-list { width: 60%; margin-bottom: 35px; padding: 20px; }
.home-featured-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 50px; object-fit: cover; }
.home-featured-card h3 { margin: 22px 0 0; font-size: 30px; line-height: 1.6; }
/* Over Audiotic: the text and the three blocks side by side (each half; a block 60% wide on the right). On tablets the
   blocks' column asks for the whole row and both shrink, as on WordPress: the text keeps half, or its longest word. */
.home-about { padding: 75px 0 0; background: var(--light); }
.home-about-row { display: flex; }
.home-about-text { width: 50%; color: var(--heading); }
.home-about-text h2 { margin: 0; border-bottom: 4px solid var(--brown); font-size: 55px; font-weight: 800; line-height: 1.6; }
/* WordPress's text block: 99% wide, its paragraphs a blank line apart, an empty line at the end */
.home-about-text p { margin: 24px 1% 0 0; }
.home-about-text p + p { margin-top: 1.6em; }
.home-about-text p:last-child { margin-bottom: 1.6em; }
.home-about-blocks { display: flex; width: 50%; flex-direction: column; align-items: flex-end; color: var(--heading); }
.home-about-blocks > div { width: 60%; margin-bottom: 30px; }
.home-about-blocks h4 { display: inline-block; margin: 0; border-bottom: 1px solid var(--brown); font-size: 21px; }
.home-about-blocks p { margin: 9px 0 10px; }
.home-about-blocks > div > a { font-weight: 700; text-decoration: underline; }
.home-about-blocks p a { color: inherit; }
/* Categorieën: three buttons of a fifth of the row; stacked at full width on tablets */
.home-categories { padding-top: 160px; }
.home-category-row { display: flex; flex-wrap: wrap; justify-content: center; }
.home-category-row a { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 20%; height: 150px; margin: 20px 15px; border: 3px solid var(--brown); border-radius: 50px; color: var(--brown); font-family: Nunito, sans-serif; font-size: 18px; transition: transform .2s; }
.home-category-row a:hover { transform: scale(1.04); }
.home-category-row .icon { width: 60px; height: 60px; fill: var(--brown); }
/* Onze laatste artikelen: three columns, two up to 1120px, one on phones */
.home-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 0; text-align: left; }
/* A card: photo at the top, title at the bottom; above 1120px WordPress added an empty line under the title, so there the
   title sits halfway down the free space */
.home-card { display: flex; flex-direction: column; justify-content: space-between; padding: 10px; margin-bottom: 48px; }
@media (min-width: 1121px) { .home-card::after { content: ""; margin-top: 6.4px; } }
.home-card-image { position: relative; display: block; margin-bottom: 16px; }
.home-card-image img { display: block; width: 100%; aspect-ratio: 1; border-radius: 15px; object-fit: cover; }
.home-card-date { position: absolute; top: 12px; right: 12px; padding: 8px 11px; border-radius: 30px; background: rgba(0, 0, 0, .5); color: #fff; font-size: 11px; font-weight: 700; }
.home-card-title { display: block; color: #000; font-size: 20px; font-weight: 600; line-height: 1.2; text-transform: capitalize; }
.home-card-title:hover { color: var(--brown); }
@media (max-width: 1120px) {
    .home-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991px) {
    .home-featured-list { width: auto; margin-bottom: 75px; }
    .home-category-row { flex-direction: column; }
    .home-category-row a { width: auto; }
    .home-about-blocks { width: 100%; }
}
@media (max-width: 767px) {
    .home-grid { grid-template-columns: 1fr; }
}
/* Phones: the text above the blocks; the buttons as wide as the widest one, centred */
@media (max-width: 479px) {
    /* The welcome line's box grows to its longest word, as on WordPress ('Koptelefoons,' is 349px, wider than the
       column below 390px), so its lines break the same. WordPress let it grow to the right, past a 360px screen; here
       it stays centred and at most as wide as the screen. A word wider than the screen is hyphenated by the script in
       base.html.twig. (A flex item's minimum width is its longest word, capped by its max-width.) */
    .home-hero .container { display: flex; justify-content: center; }
    .home-hero h2 { max-width: calc(100% + 40px); }
    .home-featured-list { padding-bottom: 0; }
    .home-featured-card h3 { font-size: 20px; }
    .home-about-row { flex-direction: column; }
    .home-about-text, .home-about-blocks { width: auto; }
    .home-about-text h2 { font-size: 32px; }
    .home-about-text p:first-of-type { margin-top: 16px; }
    .home-about-blocks { align-items: stretch; margin-top: 41px; }
    .home-about-blocks > div { width: auto; }
    .home-category-row { align-content: center; }
}