/* Topaya theme */
:root {
    --purple: #3f1758;
    --purple-light: #5c2586;
    --indigo: #6772e5;
    --pink: #ed798c;
    --dark: #1c1c25;
    --darker: #16161d;
    --rose: #fff7f7;
    --grey: #757575;
    --heading: Nunito, "omnes-pro", system-ui, sans-serif;
    --text-font: Figtree, "proxima-nova", system-ui, sans-serif;
    --page: 1088px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 500 18px/1.7 var(--text-font); color: #000; background: #fff; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
/* WordPress ended every page with 50px of white above the footer (on top of the last paragraph's own margin). */
main { display: flow-root; padding-bottom: 50px; }
a { color: var(--indigo); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--heading); font-weight: 900; }
.container { max-width: calc(var(--page) + 48px); margin: 0 auto; padding: 0 24px; }

/* Header and mega menu */
.site-header { background: var(--purple); position: relative; z-index: 20; }
.header-row { display: flex; align-items: center; min-height: 75px; max-width: 1048px; }
.logo { font: 800 32px/1 var(--heading); letter-spacing: 1px; color: #fff; margin-right: 90px; }
.logo:hover { text-decoration: none; }
.nav-toggle, .nav-burger, .nav-close { display: none; }
.main-nav { flex: 1; }
.nav-items { list-style: none; margin: 0; padding: 0; display: flex; }
.nav-item { position: relative; }
.nav-link { font: 900 20px/75px var(--heading); color: #fff; background: none; border: 0; padding: 0 31px; cursor: pointer; }
.nav-panel { display: none; position: absolute; left: 50%; top: 65px; transform: translateX(-50%); background: var(--dark); border-radius: 15px; box-shadow: 4px 5px 15px rgba(0, 0, 0, .25); overflow: hidden; }
.nav-panel::before { content: ""; position: absolute; top: -6px; left: calc(50% - 6px); width: 12px; height: 12px; background: var(--dark); transform: rotate(45deg); }
.nav-item:hover .nav-panel, .nav-item:focus-within .nav-panel { display: block; }
.nav-item:hover .nav-link, .nav-item:focus-within .nav-link { color: #c9b7d6; }
.nav-grid { display: grid; grid-template-columns: repeat(var(--columns, 2), auto); gap: 10px; padding: 35px 20px 20px; }
.nav-col-title { margin: 0 0 12px 15px; color: #b7b7b7; font: 800 16px/1.5 var(--heading); text-transform: uppercase; }
.nav-col ul { list-style: none; margin: 0 0 25px; padding: 0; }
.nav-col li { margin: 0 0 10px; }
.nav-col a { display: flex; align-items: center; gap: 12px; padding: 5px 15px; border-radius: 30px; color: #f8f9fe; font-size: 16px; line-height: 27px; white-space: nowrap; }
.nav-col a:hover { background: #2d2d38; color: var(--pink); text-decoration: none; }
.nav-icon { flex: none; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.nav-col a:not(:hover) .nav-icon { background: #f8f9fe; }
.nav-more { margin: 0; padding: 12px 40px 18px; background: var(--darker); display: flex; flex-direction: column; }
.nav-more a { color: #b7b7b7; font: 800 14px/24px var(--heading); margin: 10px 0 0; }

/* Footer: a purple gradient under a wave */
.site-footer { position: relative; color: #fff; background: linear-gradient(var(--purple), var(--purple-light)); }
.footer-wave { position: absolute; top: -1px; left: 0; width: 100%; height: 70px; fill: #fff; transform: scaleY(-1); }
.footer-body { position: relative; padding: 90px 0 70px; }
.footer-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr 0.9fr; gap: 40px; }
.footer-about p { max-width: 260px; margin: 15px 0; font-size: 15px; line-height: 1.7; }
.footer-brand { color: #fff; font: 900 32px/1 var(--heading); letter-spacing: 1px; }
.footer-brand:hover { text-decoration: none; }
.footer-col h4 { margin: 0 0 19px; font-size: 18px; line-height: 1.7; }
.footer-col a, .footer-col span { display: block; color: #fff; font-size: 15px; line-height: 1.9; }
.socials { display: flex; gap: 14px; }
.footer-about .socials { margin-top: 39px; }
.site-footer .socials a { width: 30px; height: 30px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; }
.socials svg { width: 16px; height: 16px; fill: var(--dark); }
.copyright { color: #cbcbcb; font-size: 14px; font-weight: 400; margin: 5px auto 0; }

/* Post header: a purple band with a shallow point at the bottom, behind the title and the featured image */
.post { position: relative; }
.post-header { position: relative; max-width: 724px; margin: 0 auto; padding: 0 0 0; color: #fff; }
.post-header::before { content: ""; position: absolute; z-index: -1; top: -75px; left: 50%; width: 100vw; height: 600px; transform: translateX(-50%); background: var(--purple); clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%); }
.post-category { margin: 0; padding-top: 2px; font-size: 12px; line-height: 20px; }
.post h1 { font-size: 48px; line-height: 1.2; font-weight: 900; margin: 0; padding-bottom: 8px; text-transform: capitalize; overflow-wrap: break-word; }
.byline { display: flex; align-items: center; gap: 22px; margin: 8px 0 0; font-size: 14px; line-height: 1.7; }
.byline-text { padding: 14px 0; }
.byline-photo { width: 65px; height: 65px; border-radius: 50%; object-fit: cover; flex: none; }
.byline p { margin: 0 0 1px; }
.byline time i, .reading-time { font-style: italic; }
.reading-time { padding-left: 4px; }
.kicker { margin: 16px 0 8px; font-size: 20px; line-height: 30px; font-weight: 700; }
.featured { display: block; width: 100%; height: 350px; object-fit: cover; border-radius: 20px; margin-top: 54px; }
.kicker + .featured { margin-top: 0; }
.post-content { max-width: 724px; margin: 0 auto; padding: 20px 25px 20px 20px; }

/* Content */
/* Long words ("Vaatwasserprogrammasymbolen", words joined by a non-breaking space) break rather than widen the page, as on WordPress. */
.content { overflow-wrap: break-word; }
.content p, .content ul, .content ol { margin: 18px 0; }
.content ul, .content ol { padding-left: 40px; }
.content h2 { font-size: 32px; line-height: 1.7; margin: 18px 0 0; }
.content h3 { font-size: 26px; line-height: 1.7; margin: 18px 0 0; }
.content h4 { font-size: 22px; line-height: 1.7; margin: 18px 0 0; }
.content h2 + p, .content h3 + p, .content h4 + p { margin-top: 10px; }
.content img { border-radius: 15px; }
/* An image alone in its paragraph is centred, as WordPress's "aligncenter" did (an image in a line of text stays inline). */
.content p > img:only-child, .content p > a:only-child > img:only-child { display: block; margin: 0 auto; }
.content blockquote p > img:only-child { display: inline; margin: 0; }
.content figure { margin: 20px 0; }
/* WordPress image blocks (kept as HTML in columns): no space around them, the image sits on the bottom edge. */
.content figure.wp-block-image, .content figure.aligncenter { margin-top: 0; margin-bottom: 0; }
.content figure img { vertical-align: bottom; }
.content figcaption { font-size: 16px; font-style: italic; color: var(--grey); text-align: center; }
.content .aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.content hr { width: 25%; margin: 9px auto; border: 0; border-top: 2px solid #808080; }
.content blockquote { max-width: 670px; margin: 20px auto; padding-left: 15px; border-left: 3px solid var(--indigo); font-size: 20px; font-style: italic; }
.content blockquote cite { display: block; font-size: 16px; }
.content sup { font-size: 70%; line-height: 0; padding: 0 1px; }
/* The sources list at the end of a post ("Bronnen"): small, numbered, no bullets. */
.content ul:has(> li > .source-number) { list-style: none; padding-left: 0; font-size: 14.4px; line-height: 1.7; }
.content ul:has(> li > .source-number) li { display: flex; margin-bottom: 4px; }
.content .source-number { flex: none; color: #777; margin-right: 21px; }
/* Links to other Topaya pages: a grey pill with an "open" icon, as on WordPress. */
.post-content a[href^="/"]:not(.button-primary) { display: inline-flex; align-items: baseline; position: relative; padding: 2px 25px 2px 8px; border-radius: 8px; background: #eee; color: #000; font-weight: 700; line-height: 1.5; }
.post-content a[href^="/"]:not(.button-primary)::after { content: ""; position: absolute; right: 6px; top: 50%; width: 13px; height: 13px; 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; }
.post-content a[href^="/"]:not(.button-primary):hover { background: #ddd; text-decoration: none; }
.post-content a:has(img) { display: inline; padding: 0; background: none; }
.post-content a:has(img)::after { display: none; }
/* Tables. A plain table as the WordPress theme drew one (the cookie tables): Arial, a grey header band, no lines,
   every second body row light grey; on phones a wide one scrolls sideways. */
.content table { width: 100%; margin: 0 0 20px; border-collapse: collapse; font: 18px/1.7 Arial, sans-serif; text-align: left; }
.content thead { background: #f5f5f5; }
.content th, .content td { padding: 12px 15px; }
.content th { font-weight: 700; }
.content tbody tr:nth-child(even) { background: #fafafa; }
/* WordPress's table block (site.yaml boxes give each one of three frames): 40px in from each side, a wide table
   scrolls inside the frame, 9px around the text, a thick black line under the header row. */
.table-header, .table-plain, .table-stripes { margin: 18px 40px; overflow-x: auto; }
.content :is(.table-header, .table-plain, .table-stripes) :is(th, td) { padding: 9px; }
.content :is(.table-header, .table-stripes) thead { border-bottom: 3px solid #000; }
/* "Stripes" tables: every other body row a darker grey, a light line under the table. */
.table-stripes { border-bottom: 1px solid #f0f0f0; }
.content .table-stripes tbody tr:nth-child(odd) { background: #f0f0f0; }
/* Tables whose first row WordPress kept in the body: that row bold, without the grey band. */
.content .table-plain thead { background: none; }
.content .table-plain tbody tr:nth-child(odd) { background: #fafafa; }
.content .table-plain tbody tr:nth-child(even) { background: none; }
.content .has-text-align-center { text-align: center; }
/* Videos */
/* Videos: 16:9 with square corners, 40px in from each side, as WordPress's embed block. */
.content .video { position: relative; aspect-ratio: 16 / 9; margin: 18px 40px; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.content iframe { max-width: 100%; }

/* WordPress columns kept as HTML (images or text side by side) */
/* As on WordPress: no space between the columns, 31.5px below them; a heading at the top of a column has no space above. */
.columns { display: flex; margin: 0 0 31.5px; }
.column { flex: 1 1 0; min-width: 0; }
.column > :is(h2, h3, h4):first-child { margin-top: 0; }

/* WordPress "media and text" blocks (one post, kept as HTML): text and image side by side; stacked on phones. */
.wp-block-media-text { display: grid; grid-template-columns: 50% 1fr; align-items: center; margin: 20px 0; }
.wp-block-media-text__content { padding: 0 8%; }
.wp-block-media-text__media { margin: 0; }
.wp-block-media-text__media img { display: block; border-radius: 0; }
/* On phones the photo comes first, as wide as the text. */
@media (max-width: 600px) {
    .wp-block-media-text.is-stacked-on-mobile { grid-template-columns: 100% !important; }
    .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media { grid-row: 1; }
    .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content { grid-row: 2; }
    .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media img { width: 100%; }
}

/* Boxes (site.yaml legacy.boxes): a <div class="..."> around Markdown content. */
/* An info box with a bold title ("De koopgids"). */
.callout { margin: 20px 0; padding: 30px 30px 50px; background: var(--rose); border-left: 4px solid rgba(63, 23, 88, .6); border-radius: 1px 30px 30px 1px; }
.callout-title p { margin: 0 0 5px; font: 800 26px/1.7 var(--heading); }
.content .callout-title + * { margin-top: 0; }
.content .callout > :last-child { margin-bottom: 0; }
/* The short answer near the top of a post, on purple. */
.answer { margin: 20px 0; padding: 20px; background: var(--purple); color: #fff; border-radius: 20px; font: 800 24px/1.7 var(--heading); }
.content .answer p { margin: 0; }
.answer a { color: #fff; }
.answer h3 { margin: 0; }
/* "Belangrijkste punten:" and a list. */
.key-takeaways { margin: 20px 0; padding: 20px; background: var(--rose); border: 1px solid #e0e0e0; border-radius: 15px; box-shadow: 0 2px 4px rgba(0, 0, 0, .1); }
.content .key-takeaways h3 { margin: 0; }
/* Pros and cons side by side in one purple box; on phones one below the other. */
.pros-cons { display: flex; flex-wrap: wrap; margin: 20px 0; padding: 20px; background: var(--purple-light); color: #fff; border-radius: 20px; }
.pros, .cons { flex: 1 1 280px; min-width: 0; padding: 20px; }
.content .pros h4, .content .cons h4 { margin: 0; font-size: 24px; line-height: 1.7; font-weight: 800; }
.content .pros ul, .content .cons ul { list-style: none; padding-left: 0; margin: 18px 0; }
.content .pros p, .content .cons p { margin: 18px 0; }
.pros li::before, .cons li::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 9px; vertical-align: -2px; background: left center / contain no-repeat; }
.pros li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='green' d='M173.9 439.4 7.5 273c-10-10-10-26.2 0-36.2l36.2-36.2c10-10 26.2-10 36.2 0L192 312.7 432.1 72.6c10-10 26.2-10 36.2 0l36.2 36.2c10 10 10 26.2 0 36.2L210.1 439.4c-10 10-26.2 10-36.2 0z'/%3E%3C/svg%3E"); }
.cons li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 352 512'%3E%3Cpath fill='red' d='m242.7 256 100.1-100.1c12.3-12.3 12.3-32.2 0-44.5l-22.2-22.2c-12.3-12.3-32.2-12.3-44.5 0L176 189.3 75.9 89.2c-12.3-12.3-32.2-12.3-44.5 0L9.2 111.5c-12.3 12.3-12.3 32.2 0 44.5L109.3 256 9.2 356.1c-12.3 12.3-12.3 32.2 0 44.5l22.2 22.2c12.3 12.3 32.2 12.3 44.5 0L176 322.7l100.1 100.1c12.3 12.3 32.2 12.3 44.5 0l22.2-22.2c12.3-12.3 12.3-32.2 0-44.5z'/%3E%3C/svg%3E"); }
/* Green shop buttons ("Check op Bol.com ->"), one or two side by side, each as wide as its column. */
.shop-buttons { display: flex; flex-wrap: wrap; margin: 0 0 31.5px; }
.shop-button { flex: 1 1 0; min-width: 0; }
.content .shop-button p { margin: 0; }
.shop-button a, .column > .button-primary { display: block; margin: 10px 3.5%; padding: 9px 20px; border: 1px solid #305817; border-radius: 14px; background: #305817; color: #fafdfe; font-weight: 700; line-height: 1.7; text-align: center; }
.shop-button a:hover, .column > .button-primary:hover { background: #264612; text-decoration: none; }
.button-primary, .wp-block-button__link { display: inline-block; padding: 9px 20px; border-radius: 14px; background: #305817; color: #fafdfe; font-size: 18px; font-weight: 700; line-height: 1.5; }
.button-primary:hover, .wp-block-button__link:hover { background: #264612; color: #fafdfe; text-decoration: none; }

/* Footnotes (sources) */
.modern-footnotes-list-heading { font-size: 26px; }
.modern-footnotes-list { list-style: none; padding-left: 0; font-size: 16px; }
.modern-footnotes-list li { margin-bottom: 6px; overflow-wrap: anywhere; }

/* Table of contents */
.toc { background: #f8f8f8; border: 1px solid #ddd; border-radius: 12px; padding: 20px; margin: 0 0 20px; }
.content .toc h2 { margin: 0 0 12px; }
.toc ol { margin: 18px 0; padding-left: 40px; list-style: none; counter-reset: toc; }
.toc li { position: relative; counter-increment: toc; margin-bottom: .6em; font-size: 16.2px; }
.toc li::before { content: counter(toc) " -"; position: absolute; left: -.8em; font-weight: 800; white-space: nowrap; }
.toc a { color: #333; padding-left: .9em; }
.toc ol ol { margin: 6px 0 0; padding-left: 40px; counter-reset: sub; }
.toc ol ol li { counter-increment: sub; font-size: 14.6px; }
.toc ol ol li::before { content: counter(sub, lower-alpha) ". "; left: -.4em; font-weight: 500; }

/* Author box under a post */
.author-box-wrap { margin: 70px auto 50px; }
.author-box { max-width: var(--page); margin: 0 auto; padding: 30px; border-radius: 30px; text-align: center; box-shadow: 10px 10px 20px #d9d9d9, -10px -10px 20px #fff; }
/* Without a bio WordPress shrank the box to the name and kept an empty line under the role. */
.author-box.is-compact { width: fit-content; margin: 0; padding-bottom: 57px; }
.author-box img { display: block; width: 100px; height: 100px; margin: 0 auto 15px; border-radius: 50%; object-fit: cover; }
.author-box h2 { margin: 0; font-size: 24px; line-height: 1.3; }
.author-box h2 a { color: #000; }
.author-box-role { margin: 0; color: var(--pink); font-weight: 700; }
.author-box-bio { margin: 0; font-size: 16px; }

/* Content block: product */
.product { border-radius: 30px; padding: 30px; margin: 32px 0; box-shadow: 10px 10px 20px #d9d9d9, -10px -10px 20px #fff; }
.content .product .product-name { margin: 0 0 4px; }
.product-badge { color: var(--pink); font-size: 17px; }
.product-score span { font-weight: 800; color: var(--indigo); }
.product-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 28px; align-items: start; }
.product-specs { list-style: none; padding: 0; margin: 0; font-size: 15px; }
.product-cta { text-align: center; }

/* Category and author pages */
.archive-hero { text-align: center; padding-top: 70px; }
.archive-hero h1 { font-size: 60px; line-height: 1; font-weight: 900; margin: 0 0 137px; }
.archive-intro p { margin: 18px 0 54px; }
.post-list { list-style: none; margin: 0; padding: 0; }
.post-list li { display: flex; align-items: center; gap: 20px; margin: 0 0 20px; padding: 0 0 20px; border-bottom: 2px solid #afafaf; }
.post-list-image { flex: none; width: 222px; }
.post-list-image img { display: block; width: 222px; height: 125px; object-fit: cover; border-radius: 15px; }
.post-list h3 { margin: 0 0 10px; font-size: 22px; line-height: 1; }
.post-list h3 a { color: #000; }
.post-list p { margin: 0 0 12px; font-size: 18px; line-height: 1.7; }
/* Page numbers as on WordPress: plain blue links, the current page and the "…" in black. */
.pagination { display: flex; flex-wrap: wrap; justify-content: center; margin: 40px 0 0; }
.pagination a, .pagination span { margin: 0 10px; color: var(--indigo); }
.pagination span[aria-current], .pagination .dots { color: #000; }
.pagination > :first-child { margin-left: 0; }
.author-hero { display: flex; gap: 20px; align-items: flex-start; padding-top: 50px; margin-bottom: 95px; }
.author-avatar { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; flex: none; }
.author-hero h1 { font-size: 36px; line-height: 1.2; margin: 0; }
.author-hero p { margin: 0 0 8px; font-size: 18px; line-height: 1.7; font-weight: 700; }
.author-hero .author-role { font-size: 16px; }
.linkedin { color: #0a66c2; display: inline-block; line-height: 0; }
.archive .author-about h2 { font-size: 32px; line-height: 1.7; margin: 0; }
.archive .author-about h2 + p { margin-top: 18px; }
.archive-title { font-size: 32px; line-height: 1.7; margin: 75px 0 25px; }

/* Pages */
.page-hero { position: relative; padding: 70px 0 36px; }
.page-hero h1 { margin: 0; font-size: 60px; line-height: 1; color: var(--purple); font-weight: 900; overflow-wrap: break-word; }
.page-hero.hero-purple { background: var(--purple); color: #fff; padding: 111px 0 200px; margin-bottom: 50px; }
/* WordPress's wave: the white page rising 100px into the purple band, mirrored (Over ons, Disclaimer). */
.wave-bottom { position: absolute; left: 0; bottom: -1px; width: 100%; height: 100px; fill: #fff; transform: scaleX(-1); }
/* `hero: purple tight` (Redactie): the kicker right under the menu, less purple under the intro, the wave not mirrored. */
.page-hero.hero-tight { padding-top: 51px; padding-bottom: 170px; }
.hero-tight .wave-bottom { transform: none; }
.hero-purple h1 { margin-bottom: 49px; font-size: 64px; color: #fff; }
.hero-kicker { margin: 0; color: var(--pink); font: 700 17px/1.7 var(--text-font); }
.hero-intro p { margin: 0 0 18px; }
.page.content h2 { font-size: 32px; line-height: 1.7; margin: 0; }
.page.content h3 { font-size: 26px; line-height: 1.7; margin: 0; }
/* As on WordPress: 18px under a heading, and one empty line between paragraphs (there <br><br> inside one text block). */
.page.content :is(h2, h3) + p { margin-top: 18px; }
.page.content p + p, .hero-intro p + p { margin-top: 1.7em; }
/* A part of a page on a purple band with wavy edges, as "Hoe gaan we te werk?" on Over ons. */
/* Its waves are WordPress's, 100px high at every width: mirrored above the band, upside down below it. */
.band { position: relative; background: var(--purple-light); color: #fff; margin: 168px calc(50% - 50vw) 0; padding: 29px calc(50vw - 50%) 50px; }
.band::before, .band::after { content: ""; position: absolute; left: 0; width: 100%; height: 100px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%235c2586' d='M0,224L48,240C96,256,192,288,288,256C384,224,480,128,576,80C672,32,768,32,864,69.3C960,107,1056,181,1152,176C1248,171,1344,85,1392,42.7L1440,0L1440,320L0,320Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.band::before { bottom: 100%; transform: scaleX(-1); }
.band::after { top: 100%; transform: scaleY(-1); }
.has-contact .band:last-child { margin-bottom: 130px; }
.band a { color: #fff; text-decoration: underline; }
.band > :first-child { margin-top: 0; }
/* The closing "Contact opnemen?" block of Over ons and Ons team, as on WordPress: in the left half of the page */
/* (20px kept free on its right), body-size text at most 440px wide; centred from 991px down, full width from 767px down. */
.page-contact { display: grid; grid-template-columns: calc(50% - 20px); justify-items: start; padding-top: 90px; padding-bottom: 20px; }
.page-contact h2 { margin: 0 0 8px; font-size: 32px; }
.page-contact p { max-width: 440px; margin: 0 0 16px; }
.page-contact p:last-child { margin-bottom: 0; }
/* WordPress's button has 8px padding plus a 1px border of its own colour. */
.page-contact .button { border-radius: 8px; padding: 9px 21px; font-size: 16px; font-weight: 500; }
@media (max-width: 991px) { .page-contact { justify-items: center; text-align: center; padding-bottom: 30px; } }
@media (max-width: 767px) { .page-contact { grid-template-columns: calc(100% - 20px); } }
.button { display: inline-block; padding: 9px 20px; border-radius: 14px; background: var(--pink); color: #fff; font-weight: 700; }
.button:hover { opacity: .9; text-decoration: none; }

/* 404 and the HTML sitemap: a plain black title, as on WordPress */
.not-found, .sitemap { padding-top: 50px; }
.not-found h1, .sitemap h1 { margin: 0; font-size: 36px; line-height: 1.7; }

/* Contact */
.contact-page { padding-top: 90px; }
.contact-page > * { margin-left: 20px; margin-right: 20px; }
.contact-page h1 { margin-top: 0; margin-bottom: 15px; font-size: 60px; line-height: 1; color: var(--purple); }
.contact-page .content p { margin: 0 0 20px; }
.contact-page h2 { margin-top: 0; margin-bottom: 15px; font-size: 38px; line-height: 1.7; }
.contact-socials { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 0; margin-bottom: 60px; }
.contact-socials a { display: block; color: var(--purple-light); line-height: 0; }
.contact-socials svg { width: 40px; height: 40px; fill: currentColor; }
.contact-cards { display: flex; flex-wrap: wrap; gap: 49px; padding: 0 25px; margin-bottom: 20px; }
.contact-card { display: flex; flex-direction: column; justify-content: center; width: 300px; padding: 30px; border-radius: 30px; box-shadow: 10px 10px 20px #d9d9d9, -10px -10px 20px #fff; color: #000; }
.contact-card:hover { text-decoration: none; }
.contact-card svg { flex: none; width: var(--size, 55px); height: var(--size, 55px); margin-bottom: 20px; fill: var(--pink); }
.contact-page .contact-card h2 { margin: 0 0 12px; font-size: 36px; line-height: 1; }
.contact-card p { margin: 0 0 7px; color: var(--grey); }
/* WordPress ended the address and phone text with an empty line. */
.contact-card p:last-child { padding-bottom: 1.7em; }
.contact-more { display: block; color: var(--indigo); text-decoration: underline; }

/* Alle categorieën: the rooms panel above the list of posts */
.all-posts { padding-top: 0; }
.rooms-panel { background: var(--darker); border-radius: 0 0 10px 10px; margin-bottom: 60px; }
.rooms-panel .nav-grid { justify-content: start; gap: 10px 120px; padding: 30px 20px 10px; }

/* Team page */
.team-intro { padding: 50px 24px 40px; }
.team-kicker { margin: 0; color: var(--pink); font-weight: 700; }
/* 48px instead of WordPress's 50px: the wider look-alike font would push the heart onto its own line. */
.team-intro h2 { margin: 0; font-size: 48px; line-height: 1.7; }
.team-band { position: relative; background: var(--purple); color: #fff; padding: 170px 0 80px; }
.team-edge { position: absolute; top: -1px; left: 0; width: 100%; height: 100px; fill: #fff; }
.team-network .team-edge { fill: var(--purple); }
.team-network { background: #773aa6; padding-top: 170px; }
.team-network h1 { margin: 0; font-size: 36px; line-height: 1.7; }
.team-network-text { max-width: 1088px; }
.team-network-text p + p { margin-top: 30.6px; }
/* The "Jouw naam" placeholder: further from the text, its text centred next to the photo. */
.team-network .team-member { margin-top: 58px; align-items: center; }
/* A member: text at the top beside the photo (centred next to a longer text), 40px between members; on phones one below the other. */
.team-member { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
.team-member + .team-member { margin-top: 40px; }
.team-member > div { padding: 20px; }
.team-member img { width: 100%; max-width: 403px; margin: 20px 0; border-radius: 15px; justify-self: center; align-self: center; }
.team-member.flip img { order: 2; }
.team-member h3 { margin: 0; font-size: 35px; line-height: 1.7; }
.team-role { margin: 0; color: var(--pink); font-weight: 700; }
.team-linkedin { margin: 8px 0 0; }
.team-linkedin a { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; }
.team-linkedin svg { fill: var(--dark); }
.team-member p { margin: 18px 0; }
.team-member .team-role, .team-member .team-linkedin { margin-top: 0; margin-bottom: 0; }
/* WordPress separated a member's paragraphs with an empty line. */
.team-member p:not(.team-role, .team-linkedin) + p { margin-top: 30.6px; }
.team-band a:not(.button) { color: var(--indigo); }
.team-contact { position: relative; padding: 100px 0 0; }
.team-contact .team-edge { fill: #773aa6; }

/* Home */
.home-hero { position: relative; background: linear-gradient(var(--purple), var(--purple-light)); color: #fff; text-align: center; padding: 120px 0 268px; }
.home-kicker { margin: 0; color: var(--pink); font-size: 18px; line-height: 1.3; font-weight: 800; }
.home-hero h1 { margin: 0 auto; max-width: 840px; font-size: 60px; line-height: 1.3; font-weight: 900; }
.home-hero-edge { position: absolute; left: 0; bottom: -1px; width: 100%; height: 50px; fill: #fafdfe; transform: scaleX(-1); }
.home-press { background: #fff; padding: 40px 0 10px; }
.press-logos { display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; justify-items: center; gap: 30px; }
.press-logos img { max-height: 60px; width: auto; max-width: 112px; border-radius: 0; opacity: .7; }
.home-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; max-width: 1096px; padding-top: 79px; }
.home-intro + .home-intro { padding-top: 47px; padding-bottom: 69px; }
.home-intro.image-first img { order: -1; width: 90%; }
.home-intro h2 { margin: 0; font-size: 36px; line-height: 1.7; }
.home-intro p { margin: 0 0 18px; }
.home-intro-text > :last-child { margin-bottom: 0; }
.home-intro .button { margin-top: 12px; border-radius: 8px; padding: 10px 20px; font-size: 16px; font-weight: 500; }
.home-intro img { border-radius: 15px; }
.home-room { position: relative; background: var(--room); color: #fff; padding: 90px 0 50px; }
.home-room-edge { position: absolute; top: -1px; left: 0; width: 100%; height: 60px; fill: var(--above); }
.home-room-edge.flip { transform: scaleX(-1); }
.home-room .container { position: relative; }
.home-room-title { margin: 0 0 10px; text-align: center; font-size: 42px; line-height: 1.7; }
.home-room-grid { display: grid; grid-template-columns: 1fr 352px; gap: 40px; max-width: 940px; margin: 0 auto; padding: 20px 0; }
.home-room-grid > div { display: flex; flex-direction: column; }
.home-room-grid .home-card { margin: 4px; }
/* WordPress gave the rooms from the fourth on 20px more room above their title. */
.home-room ~ .home-room ~ .home-room ~ .home-room .home-room-title { margin-top: 20px; }
.home-room-grid h3 { margin: 0 0 18px; font-size: 26px; line-height: 1.7; }
.home-room-links { list-style: none; margin: 0; padding: 0; }
.home-room-links a { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; color: #f2f2fc; font-size: 18px; }
.home-room-links a::after { content: ""; width: 9px; height: 9px; margin-right: 6px; border: solid currentColor; border-width: 3px 3px 0 0; transform: rotate(45deg); }
.home-card { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 20px; background: #333; }
.home-card-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.home-card time { position: absolute; z-index: 2; top: 12px; right: 12px; padding: 4px 12px; border-radius: 18px; background: rgba(0, 0, 0, .5); color: #fff; font-size: 12.6px; font-weight: 700; line-height: 1.7; }
/* The title sits at the bottom of the card; the excerpt follows it just past the card's edge, cut off as on WordPress. */
.home-card-text { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 140px 36px 36px; background: linear-gradient(rgba(0, 0, 0, 0), #000 70%); pointer-events: none; }
.home-card-title { display: block; margin-bottom: 13.5px; color: #fff; font: 900 27px/1.2 var(--heading); pointer-events: auto; }
.home-card-text p { position: absolute; top: 100%; margin: 0; padding: 0 36px; color: #fff; }
.home-latest { position: relative; padding: 150px 0 18px; text-align: center; }
.home-latest .home-room-edge { fill: var(--above); }
/* The heading and the line below it are centred blocks; a heading too wide for a phone wraps left-aligned. */
.home-latest .container { display: flex; flex-direction: column; align-items: center; }
.home-latest h2 { margin: 0 0 10px; font-size: 48px; line-height: 1; text-align: left; }
.home-latest-text { margin: 0 0 25px; color: var(--grey); }
.home-latest-grid { align-self: stretch; display: grid; grid-template-columns: repeat(2, minmax(0, 400px)); justify-content: center; gap: 36px; text-align: left; }

/* Phones and tablets */
@media (max-width: 781px) {
    .shop-button { flex-basis: 100%; }
}
/* Category and author pages on phones: each post as a full-width photo with its title and byline below. */
@media (max-width: 767px) {
    .post-list li { flex-direction: column; align-items: stretch; gap: 20px; }
    .post-list-image, .post-list-image img { width: 100%; height: 200px; }
    .post-list p { text-align: center; }
}
@media (max-width: 1000px) {
    .header-row { justify-content: space-between; }
    .logo { margin-right: 0; }
    .nav-burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 80px; height: 35px; padding: 0 30px; border-radius: 30px; background: var(--dark); cursor: pointer; }
    .nav-burger span { display: block; height: 3px; background: #f8f9fe; border-radius: 15px; }
    /* The open menu: a dark panel over the header with a close button, every section below the other. */
    .main-nav { display: none; position: absolute; z-index: 30; top: 8px; left: 10px; right: 10px; flex: none; background: var(--dark); border-radius: 15px; box-shadow: 4px 5px 15px rgba(0, 0, 0, .25); overflow: hidden; }
    .nav-toggle:checked ~ .main-nav { display: block; }
    .nav-close { display: block; width: 25px; height: 25px; margin: 20px 0 20px 35px; cursor: pointer; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8.7' fill='%23b7b7b7'/%3E%3Cpath d='m5.6 5.6 6.8 6.8m0-6.8-6.8 6.8' stroke='%231c1c25' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
    .nav-items { flex-direction: column; }
    .nav-link { display: none; }
    .nav-panel { display: block; position: static; transform: none; background: none; box-shadow: none; border-radius: 0; }
    .nav-panel::before { display: none; }
    .nav-panel:not(:has(.nav-more))::after { content: ""; display: block; height: 40px; background: var(--darker); }
    .nav-grid { grid-template-columns: 1fr; padding: 0 20px 20px; gap: 0; }
    .nav-col-title { margin: 12px 0 12px 15px; font-size: 12px; line-height: 1.7; }
    .nav-col a { gap: 12.5px; font-size: 14px; line-height: 1.7; white-space: normal; }
    .nav-col + .nav-col .nav-col-title { margin-top: 22px; }
    .nav-more a { margin-top: 22px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
    .footer-about { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
    .container { padding-left: 16px; padding-right: 16px; }
    .post-header { padding: 0 8px; }
    .post-header::before { height: 550px; }
    .post-category { padding-bottom: 10px; }
    .post h1 { font-size: 26px; line-height: 1.2; padding: 0 10px 10px; }
    .byline { gap: 22px; }
    .featured { height: auto; }
    .post-content { padding: 20px 12px; }
    .content > table { display: block; overflow-x: auto; }
    .columns { flex-direction: column; gap: 0; }
    .product-grid { grid-template-columns: 1fr; }
    .archive-hero h1 { font-size: 40px; }
    .hero-purple h1 { margin-bottom: 38px; font-size: 48px; }
    .footer-grid { grid-template-columns: 1fr; gap: 21px; }
    .footer-body { padding-bottom: 27px; }
    .copyright { margin-top: 23px; }
    .footer-about p { max-width: none; }
    .footer-col-more { margin-top: -21px; }
    .footer-col-more h4 { display: none; }
    .team-member { grid-template-columns: 1fr; }
    .team-member img { max-width: 254px; }
    .author-box h2 { font-size: 20px; }
    .contact-cards { padding: 0; gap: 20px; }
    .contact-card { max-width: 100%; }
    .home-hero { padding: 80px 0 110px; }
    /* On phones WordPress showed the pink line as large as the title, and the press logos one per row. */
    .home-hero { padding: 39px 0 96px; }
    .home-hero .container { padding-left: 25px; padding-right: 25px; }
    .home-kicker, .home-hero h1 { font-size: 30px; line-height: 1.3; }
    .press-logos { grid-template-columns: 1fr; gap: 40px; }
    .press-logos img { max-width: 140px; max-height: 75px; }
    .home-intro { grid-template-columns: 1fr; padding: 39px 36px 0; }
    .home-intro + .home-intro { padding: 47px 36px 87px; }
    .home-room-grid { grid-template-columns: 1fr; padding: 20px 38px; }
    .home-latest-grid { grid-template-columns: 1fr; padding: 0 54px; }
}
/* Below 387px two long words no longer fit at full size and were cut off at the screen edge (on WordPress too):
   "productexperts!" in the team title (371px at 48px) and "Leeuwenberg" beside the photo on her author page. */
@media (max-width: 386px) {
    .team-intro h2 { font-size: 42px; }
    .author-hero h1 { font-size: 31px; }
}