/* Technerds theme */
:root {
    --purple: #110a53;
    --orange: #f97316;
    --blue: #1f8fe5;
    --text: #333;
    --radius: 16px;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: "Open Sans", system-ui, sans-serif; color: var(--text); line-height: 1.8; font-size: 18px; }
img { max-width: 100%; height: auto; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { max-width: 1170px; margin: 0 auto; padding: 0 20px; }

/* Header: sits on the purple hero below it */
.site-header { background: var(--purple); color: #fff; }
/* As on WordPress the header row is narrower than the page (1080px), the logo sticks out 30px on the left on wide screens */
.header-row { display: flex; align-items: center; justify-content: space-between; min-height: 100px; max-width: 1120px; }
@media (min-width: 1121px) { .header-row > a:first-child { margin-left: -30px; } }
.main-nav { display: flex; gap: 20px; align-items: center; margin-right: 10px; font-size: 20px; font-weight: 400; }
.main-nav .menu { margin-right: 10px; }
.main-nav a, .menu summary { color: #fff; cursor: pointer; }
.menu { position: relative; }
.menu summary { list-style: none; }
.menu summary::after { content: " ⌄"; font-size: 14px; }
.menu summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; top: 48px; right: -180px; display: grid; grid-template-columns: repeat(5, 185px); gap: 12px; background: #0b0635; border: 1px solid rgba(0, 200, 255, .25); border-radius: 8px; padding: 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, .4); z-index: 10; }
.menu-panel a { display: flex; flex-direction: column; align-items: center; color: #fff; font-size: 15px; font-weight: 800; line-height: 1.4; text-align: center; padding-bottom: 10px; border-radius: 6px; }
.menu-panel a:hover { background: rgba(255, 255, 255, .06); text-decoration: none; }
.menu-panel img { width: 185px; height: 113px; object-fit: contain; }

/* Hero for posts and pages */
.post-hero { background: var(--purple) no-repeat right bottom/496px 336px; color: #fff; padding: 40px 0 80px; }
.post-hero:has(.byline) { padding-bottom: 90px; }
.breadcrumb { font-size: 16px; margin-bottom: 8px; }
.breadcrumb a { color: #fff; }
.post-hero h1 { font-size: 60px; line-height: 1.33; font-weight: 800; margin: 0 0 56px; }
.post-hero h1 + .byline { margin-top: 95px; }
.hero-intro { font-size: 20px; margin: -32px 0 0; }
.byline { display: flex; align-items: flex-start; gap: 14px; color: #fff; }
.byline a { color: #fff; }
.byline strong { display: block; font-size: 24px; font-weight: 400; line-height: 1.4; }
.byline small { display: block; color: #a8a5c7; font-size: 16px; line-height: 1.9; }
.byline .reviewer::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%2300c8ff'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' stroke='%23110a53' stroke-width='2.4' fill='none'/%3E%3C/svg%3E") center/18px no-repeat; }
.byline .reviewer a { color: #0f76ff; }
.byline .reading-time { font-size: 12px; }
.avatar { width: 60px; height: 60px; border-radius: 50%; border: 3px solid #fff; object-fit: cover; }

/* Post body */
.post { max-width: 888px; padding-top: 64px; }
.featured { border-radius: var(--radius); display: block; margin: 0 auto 40px; width: 100%; }
.content h2 { font-size: 30px; line-height: 1.5; margin: 48px 0 16px; font-weight: 700; }
.content h3 { font-size: 24px; line-height: 1.5; margin: 32px 0 12px; font-weight: 700; }
.content h4 { font-size: 20px; line-height: 1.2; margin: 24px 0 0; }
.content img { border-radius: 12px; }
/* Tables as on the live site: no cell borders, centred header above a dark rule */
.content table { width: 100%; border-collapse: collapse; margin: 24px 0; }
/* A plain table sits 40px in from both sides of the column, as on WordPress (the browser's figure margin around it) */
.content table:not(.stripes) { width: calc(100% - 80px); margin: 18px 40px; }
.content th, .content td { padding: .5em; text-align: left; vertical-align: middle; }
.content thead { border-bottom: 3px solid currentColor; }
.content thead th { text-align: center; }
/* A plain table keeps the column alignment WordPress gave it (live centres those cells); a striped table does not */
.content table:not(.stripes) :is(th, td)[align="center"] { text-align: center; }
.content table:not(.stripes) :is(th, td)[align="right"] { text-align: right; }
.content table:not(.stripes) :is(th, td)[align="left"] { text-align: left; }
/* Striped tables (WordPress "stripes" style), as on the live site: every cell a grey rounded tile, the header darker,
   everything left-aligned, in the system font, 18px also on phones */
.content table.stripes { margin: 25px 0; border-bottom: 1px solid #f0f0f0; box-shadow: 0 4px 8px rgba(0, 0, 0, .05); font-family: "Segoe UI", Roboto, Oxygen, sans-serif; font-size: 18px; }
.content table.stripes :is(th, td) { padding: 20px; border-radius: 5px; color: #333; text-align: left; }
.content table.stripes th { background: linear-gradient(145deg, #f6f6f6, #eaeaea); font-weight: 600; letter-spacing: .05em; }
.content table.stripes tr:nth-child(odd) td { background: linear-gradient(145deg, #fafafa, #f5f5f5); }
.content table.stripes tr:nth-child(even) td { background: linear-gradient(145deg, #f5f5f5, #f0f0f0); }
.content table.stripes tr:hover td { background: linear-gradient(145deg, #e9e9e9, #dedede); box-shadow: 0 2px 4px rgba(0, 0, 0, .1); }
.content table.stripes td strong { font-weight: 600; color: #000; }
/* An HTML table in a WordPress table figure: the figure takes the table's margins, the table fills it */
.content figure.wp-block-table { overflow-x: auto; margin: 18px 40px; }
.content figure.wp-block-table.is-style-stripes { margin: 25px 0; }
.content figure.wp-block-table table { width: 100%; margin: 0; }
@media (max-width: 800px) {
    /* On a phone a table scrolls sideways inside its own frame, never the whole page (as on WordPress). */
    .content table { display: block; overflow-x: auto; }
}
@media (max-width: 767px) {
    /* Phones, as on WordPress: tables keep 18px text. In a post (whose text column runs to the screen edges there)
       a plain table stays 40px from the screen edges and a striped table runs from edge to edge. */
    .content table { font-size: 18px; }
    .post .content > table:not(.stripes) { width: auto; margin: 18px 20px; }
    .post .content > table.stripes { width: calc(100% + 40px); margin: 25px -20px; }
    .post .content > figure.wp-block-table { margin: 18px 20px; }
    .post .content > figure.wp-block-table.is-style-stripes { margin: 25px -20px; }
}
/* Table of contents as on WordPress: 18px text at every width, items .9em, sub-items .9em of that and 40px further in */
.toc { background: #f8f8f8; border: 1px solid #ddd; border-radius: 12px; padding: 20px; margin: 0 0 20px; font-size: 18px; line-height: 1.8; }
.content .toc h2 { font-size: 30px; line-height: 1.8; margin: 0 0 12px; }
.toc ol { list-style: none; margin: 18px 0; padding: 0 0 0 40px; }
.toc li { position: relative; margin-bottom: .6em; font-size: .9em; }
.toc li a { color: #333; padding-left: .9em; }
.toc .toc-h2 { counter-increment: toc-item; counter-reset: toc-sub; }
.toc .toc-h2::before { content: counter(toc-item) " -"; position: absolute; left: -.8em; font-weight: 800; }
.toc .toc-h3 { counter-increment: toc-sub; margin-left: 40px; font-size: .81em; }
/* WordPress nests the sub-items in their item: 6px above the first one, the item's own spacing under the last one */
.toc .toc-h2:has(+ .toc-h3) { margin-bottom: 0; }
.toc .toc-h2 + .toc-h3 { margin-top: 6px; }
.toc .toc-h3:has(+ .toc-h2), .toc .toc-h3:last-child { margin-bottom: 9.72px; }
@media (max-width: 767px) {
    /* Phones: 24px heading; in a post the box runs from edge to edge and the heading sits 20px further in */
    .content .toc h2 { margin: 0 0 12px; font-size: 24px; line-height: 1.5; }
    .post .toc { margin: 0 -20px 20px; }
    .post .content .toc h2 { padding: 0 20px; }
}
.toc .toc-h3::before { content: counter(toc-sub, lower-alpha) "."; position: absolute; left: -.4em; }
.page { max-width: 888px; padding-top: 48px; }

/* Home */
.home-hero { background: url(/wp-content/uploads/2021/05/nonoise_background.png) right bottom/auto 630px no-repeat, url(/wp-content/uploads/2021/05/nonoise_foreground.png) right bottom/auto 630px no-repeat, var(--purple); color: #fff; padding: 92px 0 512px; }
.home-hero h1 { font-size: 60px; font-weight: 800; text-transform: uppercase; margin: 0; line-height: 1.5; }
.home-hero h2 { font-size: 20px; font-weight: 400; line-height: 1.8; letter-spacing: .02em; margin: 0; }
.home-section { padding: 80px 0 100px; text-align: center; }
.home-title { font-size: 60px; font-weight: 800; line-height: 1.5; margin: 0; color: #333; }
.home-intro { font-size: 20px; line-height: 1.8; letter-spacing: .02em; color: #333; margin: 0 auto 40px; max-width: 770px; }
.home-about .home-intro { font-size: 18px; }
.home-about-row { display: flex; gap: 40px; align-items: center; justify-content: space-between; text-align: left; font-size: 18px; line-height: 1.8; color: #333; }
.home-about-row > img { width: 36%; max-width: 420px; }
.home-about-row > div { width: 60%; }
.home-button { display: inline-flex; align-items: center; justify-content: center; width: 270px; height: 60px; margin-top: 8px; background: #00c8ff; border-radius: 3px; color: #fff; font-size: 18px; font-weight: 800; }
.home-button:hover { background: #00addc; text-decoration: none; }
.home-research { background: radial-gradient(50% 51.26% at 50% 51.26%, #110a53 0%, #0b0635 100%); padding-bottom: 200px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 85px), 50% 100%, 0 calc(100% - 60px)); }
.home-research .home-title { color: #f2f2f2; }
.home-research .home-intro { color: #c6c6c6; }
/* Cards in a row are equally high, the text at the bottom of the card, as on WordPress */
.home-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px 56px; align-items: stretch; }
.home-card { display: flex; flex-direction: column; justify-content: space-between; background: #fff; border-radius: 5px; overflow: hidden; text-align: left; box-shadow: 0 0 50px rgba(52, 89, 147, .15); }
.home-card > a img { display: block; width: 100%; height: 238px; object-fit: cover; }
.home-card-body { padding: 10px; }
.home-card h3 { font-size: 18px; font-weight: 800; line-height: 1.6; color: #333; margin: 0; }
.home-card-body > p { font-size: 16px; line-height: 1.8; color: #333; margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid #cecdd7; }
.home-card-meta { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 24px; color: #333; }
.home-card-meta img { width: 31px; height: 31px; border-radius: 50%; object-fit: cover; }
.home-card-meta span { display: block; }
.home-articles-row { display: flex; gap: 22px; align-items: flex-start; }
.home-popular { width: 32%; flex-shrink: 0; }
.home-popular h3 { font-size: 36px; font-weight: 800; line-height: 1.8; color: #333; margin: 0; }
.home-popular a { display: flex; align-items: center; gap: 30px; height: 116px; margin-top: 14px; padding: 0 10px 0 20px; background: rgba(49, 168, 255, .06); border-radius: 3px; color: #333; font-size: 18px; line-height: 1.6; text-align: left; }
.home-popular a:hover { background: rgba(49, 168, 255, .2); text-decoration: none; }
.home-popular-number { font-size: 32px; font-weight: 700; }
.home-articles .home-cards { flex: 1; grid-template-columns: repeat(2, 1fr); gap: 15px 30px; }
.home-categories { background: radial-gradient(50% 51.26% at 50% 51.26%, #110a53 0%, #0b0635 100%); padding-bottom: 115px; }
.home-categories .home-title { color: #fff; margin-bottom: 42px; }
.home-category-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 16px; }
.home-category-grid a { display: flex; flex-direction: column; align-items: center; justify-content: center; width: calc((100% - 32px) / 3); max-width: 375px; height: 350px; border: 1px solid; border-image: radial-gradient(98.88% 66.76% at 50% 50%, #00c8ff 0%, rgba(54, 209, 251, 0) 100%) 1; color: #fff; font-size: 24px; font-weight: 800; line-height: 1.5; }
.home-category-grid a:hover { background: rgba(12, 6, 59, .67); text-decoration: none; }
.home-category-grid img { width: 333px; max-width: 100%; height: 204px; margin-bottom: 10px; object-fit: contain; }
@media (max-width: 991px) {
    .home-about-row, .home-articles-row { flex-direction: column; text-align: center; }
    .home-about-row > img, .home-about-row > div, .home-popular { width: 100%; }
    .home-about-row > img { max-width: 320px; margin: 0 auto; }
    .home-cards, .home-articles .home-cards { grid-template-columns: 1fr 1fr; }
    .home-category-grid a { width: calc(50% - 8px); max-width: none; height: auto; padding: 30px; }
    .home-category-grid img { width: 200px; height: auto; }
}
@media (max-width: 767px) {
    .home-title { font-size: 32px; }
    .home-intro, .home-about .home-intro, .home-about-row { font-size: 16px; }
    .home-cards, .home-articles .home-cards { grid-template-columns: 1fr; }
    .home-popular h3 { font-size: 24px; }
    /* Phones: the tiles 40px from the screen edges, the picture as wide as the tile allows, as on WordPress */
    .home-category-grid a { width: calc(100% - 40px); font-size: 16px; }
    .home-category-grid img { width: 100%; margin-bottom: 16px; }
}

/* Footer */
.site-footer { background: radial-gradient(50% 51.26% at 50% 51.26%, #110a53 0%, #0b0635 100%); color: #fff; margin-top: 80px; padding: 72px 0 40px; font-size: 16px; }
.footer-grid { display: grid; grid-template-columns: 1.25fr 1fr 1.2fr 1.2fr; gap: 32px; }
.footer-logo { display: block; width: 230px; margin-bottom: 20px; }
.site-footer p { margin: 0; line-height: 1.7; font-size: 18px; }
.site-footer a { color: #fff; display: block; line-height: 1.6; margin-bottom: 14px; font-size: 18px; }
.site-footer .footer-contact a { margin-bottom: 4px; }
.site-footer a:hover, .site-footer a[aria-current] { color: #00c8ff; text-decoration: none; }
.site-footer h3 { margin: 0 0 24px; font-size: 28px; font-weight: 800; line-height: 1.3; }
.site-footer b { display: block; font-size: 18px; margin: 10px 0 4px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 80px; }
.socials { display: flex; gap: 15px; }
.socials a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0; border-radius: 50%; background: #00c8ff; }
.socials a:hover { background: #00addc; }
.socials svg { width: 24px; height: 24px; fill: #fff; }
.socials a[aria-label="Facebook"] svg { width: 30px; height: 30px; margin-top: 5px; } /* WordPress drew the "f" larger, cut off by the circle */
.site-footer .copyright { font-size: 18px; margin: 0; }
/* The home page ends with the dark categories block: the footer joins it without a gap. */
main:has(.home-categories:last-child) + .site-footer { margin-top: 0; }

@media (max-width: 800px) {
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    .post-hero h1 { font-size: 36px; }
    .main-nav { font-size: 16px; }
}
@media (min-width: 768px) and (max-width: 1120px) {
    /* Tablet home hero as on WordPress: 640px high including the header, the title 192px from the top of the page,
       the illustration as wide as the screen; the bottom padding keeps the room of the search form (203px) */
    .home-hero { padding: 92px 0 322px; background-size: contain, contain; }
}
@media (min-width: 768px) and (max-width: 800px) { .home-hero { padding-top: 132px; } } /* the header is 60px here */
@media (max-width: 767px) {
    /* Phone home hero as on WordPress: the title 135px from the top of the page, the illustration 45% as high as the
       hero including the 60px header (the hero starts below the header here, so 45% + 27px). The bottom padding keeps
       the room of the search form WordPress showed (50px margin, 53px form, 100px margin) above its own 306px. */
    .home-hero { text-align: center; padding: 75px 0 509px; background-size: auto calc(45% + 27px), auto calc(45% + 27px); background-position: 75% bottom, 75% bottom; }
    .home-hero h1 { font-size: 48px; line-height: 1.2; }
    .home-hero h2 { font-size: 18px; margin-top: 28px; }
}
@media (max-width: 479px) {
    /* Below 480px: smaller text, the form without its top margin, 31px under the subtitle, 268px below */
    .home-hero { padding-bottom: 452px; }
    .home-hero h1 { font-size: 32px; }
    .home-hero h2 { font-size: 16px; }
}
@media (max-width: 767px) {
    /* Footer on phones, as on WordPress: everything centred and smaller, pages and categories as two columns of outlined buttons */
    .site-footer { padding: 110px 0 20px; }
    .footer-grid { gap: 0; text-align: center; }
    .footer-logo { margin: -5px auto 0; }
    .site-footer .footer-about p { margin: 41px 0 54px; font-size: 12px; line-height: 1.5; }
    .site-footer h3 { margin: 0; font-size: 18px; line-height: 38px; }
    .footer-menu { display: grid; grid-template-columns: 48% 48%; justify-content: space-between; align-content: start; }
    .footer-menu + .footer-menu { margin-top: 35px; }
    .site-footer .footer-menu h3 { grid-column: 1 / -1; margin-bottom: 20px; }
    .site-footer .footer-menu a { display: flex; align-items: center; justify-content: center; margin: 0 0 20px; padding: 15px 5px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 2px; font-size: 12px; line-height: 2.3; }
    .site-footer .footer-menu + .footer-menu a { margin-bottom: 24px; }
    .footer-contact { display: flex; flex-direction: column; align-items: center; margin-top: 29px; padding-left: 10px; }
    .site-footer .footer-contact b { margin: 20px 0 0; font-size: 14px; line-height: 1.8; }
    .site-footer .footer-contact a, .site-footer .footer-contact p { width: 50%; margin: 0; font-size: 14px; line-height: 1.8; text-align: center; }
    .footer-bottom { margin-top: 74px; gap: 0; align-items: center; }
    .socials { justify-content: center; }
    .site-footer .copyright { align-self: stretch; margin-top: 19px; padding-top: 14px; border-top: 1px solid rgba(0, 200, 255, .28); font-size: 12px; line-height: 27px; text-align: center; }
}

/* Author box under a post: photo, name, LinkedIn between two lines, bio (stacked and centred on a phone) */
.author-box { display: flex; gap: 31px; padding: 45px; margin-top: 48px; }
.author-box > img { width: 163px; height: 209px; object-fit: cover; border-radius: 5px; flex-shrink: 0; }
.author-box > div { flex: 1; }
.author-box-name { display: block; font-size: 28px; font-weight: 800; line-height: 1.5; color: var(--text); }
.author-box-role { margin: 0; font-size: 20px; opacity: .8; }
.author-box-divider { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 2px; margin: 14px 0; }
.author-box-divider::before, .author-box-divider::after { content: ""; flex: 1; height: 2px; background: #def1ff; }
.author-box-divider a { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: #00c8ff; }
.author-box-divider svg { width: 22px; height: 22px; fill: #fff; }
.author-box p:last-child { margin: 0; }
@media (max-width: 767px) {
    .author-box { flex-direction: column; align-items: center; text-align: center; padding: 45px 0; gap: 26px; }
    .author-box > img { width: 209px; }
    .author-box-name { font-size: 20px; }
    .author-box-divider { margin-left: -20px; margin-right: -20px; }
    .author-box p:last-child { font-size: 16px; }
}

/* Archives: categories and authors */
.listing { padding-top: 48px; }
.author-band { background: url(/wp-content/uploads/2021/05/nonoise_background.png) right bottom/auto 300px no-repeat, url(/wp-content/uploads/2021/05/nonoise_foreground.png) right bottom/auto 300px no-repeat, var(--purple); padding-bottom: 0; }
.author-hero { display: flex; gap: 30px; align-items: flex-end; margin-top: 56px; }
.author-photo { flex-shrink: 0; background: #fff; padding: 23px; margin-bottom: -184px; position: relative; }
.author-photo img { display: block; width: 324px; height: 324px; object-fit: cover; border-radius: 5px; }
.post-hero .author-hero h1 { margin: 0 0 80px; font-size: 60px; }
.author-intro { padding-left: 420px; min-height: 200px; }
.author-social { display: flex; gap: 22px; margin: 16px 0 0; }
.author-social a { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: #00c8ff; border: 4px solid #fff; box-shadow: 0 0 0 1px #00c8ff; }
.author-social svg { width: 28px; height: 28px; fill: #fff; }
.author-bio { font-size: 18px; line-height: 1.9; }
.facts { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin: 32px 0 0; padding-bottom: 4px; border-bottom: 3px solid #5a6268; font-size: 18px; }
.listing .listing-title { font-size: 60px; line-height: 1.4; text-align: center; margin: 56px 0 0; }
.listing-intro { text-align: center; margin: 0 0 32px; }
.author-intro ~ .listing > h2:first-child { font-size: 60px; line-height: 1.3; margin-top: 16px; }
@media (max-width: 767px) { .listing .listing-title, .author-intro ~ .listing > h2:first-child { font-size: 32px; } }
.pagination { display: flex; gap: 8px; flex-wrap: wrap; margin: 40px 0; }
.pagination a, .pagination span { padding: 6px 14px; border-radius: 10px; background: #f4f3fb; }
.pagination span[aria-current] { background: var(--purple); color: #fff; }
.pagination .dots { padding: 6px 4px; background: none; } /* "…" is no page: plain text */

/* Content block: YouTube video, 40px in from both sides of the column as on WordPress (its default figure margin) */
.content .video { margin: 18px 40px; }
@media (max-width: 767px) { .content .video { margin: 18px 20px; } } /* 40px from the screen edges, as on WordPress */
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; display: block; }

/* Post and page content: patterns the WordPress pages brought along */
.content a { color: #0f76ff; }
/* Links to other Technerds articles: a grey label with an "opens page" icon, as on the live site */
.post .content :is(p, li) > a[href^="/"], .post .content :is(p, li) > strong > a[href^="/"] { position: relative; display: inline; padding: 2px 25px 2px 8px; border-radius: 8px; background: #eee no-repeat right 6px center/15px 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"); color: #000; font-weight: 700; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.post .content :is(p, li) > a[href^="/"]:hover { background-color: #ddd; text-decoration: none; }
.content hr { border: 0; border-top: 2px solid #777; margin: 24px 0; }
.content figure { margin: 24px 0; }
.content figcaption { margin-top: 9px; }
/* A centred image: the caption keeps the image's width and starts at its left edge */
.content .aligncenter { display: table; margin-left: auto; margin-right: auto; }
.content .aligncenter > figcaption { display: table-caption; caption-side: bottom; }
/* A quote sits 40px in from both sides of the column, as on WordPress (the browser's blockquote margin) */
.content blockquote { margin: 18px 40px; padding-left: 10px; border-left: 5px solid var(--purple); font-style: italic; }
@media (max-width: 767px) { .content blockquote { margin: 18px 20px; padding: 0 20px; } }

/* Lists: cyan numbers and dots, as on the live site */
.content > ol, .content > ul { list-style: none; padding-left: 30px; }
.content > ol > li, .content > ul > li { position: relative; }
.content > ol > li::before { content: counter(list-item); position: absolute; left: -26px; width: 18px; color: #00c6fd; font-weight: 700; }
.content > ul > li::before { content: ""; position: absolute; left: -25px; top: .65em; width: 10px; height: 10px; border-radius: 50%; background: #00c8ff; }

/* Footnotes: separate blue numbers in the text; the sources list (a smaller list with the cyan dots) shows the number
   in grey next to the dot, the source below it, as on WordPress; 16px on phones */
.content sup { padding: 0 2px; color: #0f76ff; font-size: .75em; }
.post .content > h3:not([id]) + ul { font-size: 14.4px; }
.post .content > h3:not([id]) + ul > li { margin-bottom: .3em; }
.post .content > h3:not([id]) + ul > li > a { display: block; }
@media (max-width: 767px) { .post .content > h3:not([id]) + ul > li { font-size: 16px; } }

/* "Waarom Technerds vertrouwen?": a framed note between two cyan lines */
.content > p:has(> strong:first-child):has(> a[href="/redactionele-richtlijnen-publicatieprincipes/"]) { border-top: 1px solid #00c8ff; border-bottom: 1px solid #00c8ff; padding: 12px; margin: 6px 0; font-size: 16px; }
@media (max-width: 767px) { .content > p:has(> strong:first-child):has(> a[href="/redactionele-richtlijnen-publicatieprincipes/"]) { margin: 6px -20px; } } /* edge to edge, as on WordPress */

/* A heading whose product widget was dropped has nothing under it: hide it (the table of contents skips it too) */
.post .content > h2:has(+ h2) { display: none; }

/* Product in a buying guide: linked h3, label, specs (lines with breaks) next to the product photo. As on WordPress the
   product sits in a 772px band in the middle of the column (38px in at 1280), the specs 60% of it, the photo 40%. */
.content h3:has(> a) a { color: #0b76d6; }
.content h3:has(> a), .content h3:has(> a) + p:has(+ p > br) { max-width: 772px; margin-left: auto; margin-right: auto; }
.content h3:has(> a) + p:has(+ p > br) { margin-top: -8px; color: #00c8ff; font-size: 18px; font-weight: 700; }
.content h3:has(> a) + p + p:has(> br):has(+ p > img:only-child) { float: left; width: calc(min(100%, 772px) * .6); margin: 0 0 18px max(0px, (100% - 772px) / 2); }
.content h3:has(> a) + p + p:has(> br) + p:has(> img:only-child) { float: right; width: calc(min(100%, 772px) * .4); margin: 0 max(0px, (100% - 772px) / 2) 18px 0; padding: 0 15px; }
.content h3:has(> a) + p + p:has(> br) + p:has(> img:only-child) + * { clear: both; }

/* Columns, and the shop buttons in them under a product ("Check op Bol.com"): as on WordPress the columns touch, and a
   button is 93% of its column, at most 772px, in the middle */
.content .columns { display: flex; gap: 0; margin: 0 0 1.75em; }
.content .column { flex: 1; }
.content .column > a { display: block; width: 93%; max-width: 772px; margin: 10px auto; padding: 10px 16px; border: 1px solid #4c530a; border-radius: 3px; background: #4c530a; color: #fff; font-size: 18px; text-align: center; }
.content .column > a:hover { background: #3d4208; border-color: #3d4208; text-decoration: none; }

/* Pros and cons, as on WordPress: one grey box at most 772px wide in the middle of the column (20px padding, 20px
   corners), the two halves side by side from 992px, one above the other below; each half has 20px padding of its own.
   The check and cross marks sit in the text line (no hanging indent). */
.content .voordelen, .content .nadelen { background: #f2f2f2; font-size: 18px; }
.content .voordelen h4, .content .nadelen h4 { font-size: 24px; line-height: 1.8; font-weight: 600; margin: 0; color: #333; }
.content .voordelen ul, .content .nadelen ul { list-style: none; padding: 0; margin: 18px 0; }
.content .voordelen li::before, .content .nadelen li::before { content: ''; display: inline-block; width: 1.5em; height: 1em; background: no-repeat left top/auto 1em; }
.content .voordelen li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E%3C/svg%3E"); }
.content .nadelen li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 352 512'%3E%3Cpath d='M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z'/%3E%3C/svg%3E"); }
@media (min-width: 992px) {
    /* Two neighbouring table cells share one anonymous table row: equal heights without a wrapper element. The row
       cannot have a margin, so the cells (half of 772px each) shift 38px right, to the middle of the 848px column. */
    .content .voordelen:has(+ .nadelen), .content .voordelen + .nadelen { display: table-cell; width: 386px; translate: 38px; }
    .content .voordelen:has(+ .nadelen) { border-radius: 20px 0 0 20px; padding: 40px 20px 40px 40px; }
    .content .voordelen + .nadelen { border-radius: 0 20px 20px 0; padding: 40px 40px 40px 20px; }
}
@media (max-width: 991px) {
    .content .voordelen:has(+ .nadelen) { max-width: 772px; margin: 20px auto 0; padding: 40px 40px 20px; border-radius: 20px 20px 0 0; }
    .content .voordelen + .nadelen { max-width: 772px; margin: 0 auto 20px; padding: 20px 40px 40px; border-radius: 0 0 20px 20px; }
}
@media (max-width: 767px) {
    /* Phones: the box runs from edge to edge, the headings 20px further in than the lists */
    .content .voordelen:has(+ .nadelen), .content .voordelen + .nadelen { margin-left: -20px; margin-right: -20px; }
    .content .voordelen h4, .content .nadelen h4 { padding: 0 20px; }
}

/* Key takeaways box; on phones it runs from edge to edge with 18px list text, the heading 20px further in, as on WordPress */
.content .key-takeaways { background: #ebfbff; border: 1px solid #e0e0e0; border-radius: 5px; padding: 20px; margin: 20px 0; box-shadow: 0 2px 4px rgba(0, 0, 0, .1); }
.content .key-takeaways p { margin-top: 0; }
.content .key-takeaways h3 { margin-top: 0; line-height: 1.8; }
@media (max-width: 767px) {
    .content .key-takeaways { margin: 20px -20px; font-size: 18px; }
    .content .key-takeaways h3 { margin: 0; padding: 0 20px; font-size: 16px; }
    .content .key-takeaways p { padding: 0 20px; font-size: 16px; }
}

/* Gutenberg buttons */
.content .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 24px 0; }
.content .wp-block-buttons.is-vertical { flex-direction: column; align-items: center; }
.content .wp-block-button__link { display: inline-block; padding: 12px 24px; border-radius: 3px; background: #1e73be; color: #fff; font-weight: 600; text-align: center; }
.content .wp-block-button__width-50 { width: calc(50% - 6px); }
.content .wp-block-button__width-50 .wp-block-button__link { width: 100%; }
.content .wp-block-button__link:hover { text-decoration: none; filter: brightness(.92); }

@media (max-width: 991px) {
    /* Below 992px the product photo goes under the specs, as on WordPress */
    .content h3:has(> a) + p + p:has(> br):has(+ p > img:only-child),
    .content h3:has(> a) + p + p:has(> br) + p:has(> img:only-child) { float: none; width: auto; max-width: 772px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 781px) { .content .columns { flex-direction: column; } } /* WordPress stacks columns below 782px */
@media (max-width: 767px) {
    /* Phones: the photo 15px from the screen edges, a row of shop buttons from edge to edge (each button 93% wide), as on WordPress */
    .content h3:has(> a) + p + p:has(> br) + p:has(> img:only-child) { margin-left: -20px; margin-right: -20px; }
    .content .columns:not(:has(> .column > :not(a))) { margin-left: -20px; margin-right: -20px; }
}

/* Plain pages (privacy, cookies, disclaimer): a short hero with the illustration on the right, a wide text column */
.page-plain .post-hero { display: flex; align-items: center; min-height: 250px; padding: 0; background: var(--purple) url(/wp-content/uploads/2021/05/over-ons-hero.png) no-repeat right top/contain; }
.page-plain .post-hero > .container { width: 100%; }
.page-plain .post-hero h1 { font-size: 36px; font-weight: 700; margin: 0; }
.page-plain .page { max-width: 1170px; }
@media (max-width: 767px) {
    /* The illustration gets its own band above the title, so a long (3-line) title never runs over it */
    .page-plain .post-hero { align-items: flex-end; min-height: 0; padding: 150px 0 24px; background-position: center 16px; background-size: auto 120px; }
}

/* 404 as on WordPress: the header lies over a 350px dark band (330px on phones) with the illustration at the top right
   (on phones across the width), no title in it; under it the ufo at its own size and one large line */
body:has(.page-404) .site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 2; }
@media (min-width: 801px) { body:has(.page-404) .site-header { background: none; } } /* on phones the header keeps its own dark strip */
.not-found-band { height: 350px; background: var(--purple) url(/wp-content/uploads/2021/05/over-ons-hero.png) no-repeat right top/contain; }
.not-found { padding-top: 115px; padding-bottom: 75px; text-align: center; }
.not-found img { display: block; margin: 0 auto; }
.not-found h1 { margin: 41px 0 0; color: var(--purple); font-size: 60px; font-weight: 800; line-height: 1.8; text-transform: uppercase; }
@media (max-width: 767px) {
    .not-found-band { height: 330px; background-position: left 30px; background-size: 100% auto; }
    .not-found img { width: calc(100% - 40px); }
    .not-found h1 { font-size: 35px; }
}
@media (max-width: 479px) { .not-found h1 { font-size: 25px; } }

/* Over ons: hero illustration, "Technerds.nl is" gears with hotspots, three columns, a dark band, White Citadel */
.page-over-ons .post-hero, .page-het-team .post-hero { background: var(--purple) url(/wp-content/uploads/2021/05/over-ons-hero.png) no-repeat center bottom; min-height: 760px; text-align: center; }
.page-over-ons .post-hero h1, .page-het-team .post-hero h1 { margin: 24px auto 8px; }
.page-over-ons .post-hero .breadcrumb, .page-het-team .post-hero .breadcrumb { text-align: left; }
.page-over-ons .hero-intro, .page-het-team .hero-intro { margin: 0 auto; max-width: 780px; }
.page-over-ons .page { max-width: 1170px; }
.page-over-ons .content > h2 { font-size: 60px; font-weight: 800; line-height: 1.4; text-align: center; margin: 64px 0 24px; }
.page-over-ons .content > p { text-align: center; }
.page-over-ons .content img { display: block; margin: 0 auto; max-width: min(420px, 100%); border-radius: 0; }
.page-over-ons .content img[src$="Vector.webp"] { max-width: 200px; margin-top: 80px; }
/* The gears with three "+" hotspots; hovering one shows its text */
.mechanic { position: relative; width: 410px; max-width: 100%; margin: 0 auto 48px; }
.mechanic p { margin: 0; }
.mechanic .pulsar { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: #00c8ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5v10M5 10h10' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center/16px no-repeat; box-shadow: 0 0 0 4px rgba(0, 200, 255, .25); cursor: pointer; }
#tooltipbtn1 { left: 83%; top: -4%; }
#tooltipbtn2 { left: 80%; top: 85%; }
#tooltipbtn3 { left: 0; top: 37%; }
.mechanic [id^="tooltip"]:not(.pulsar) { display: none; position: absolute; z-index: 2; width: 360px; padding: 12px 16px; background: #fff; border-left: 3px solid #00c8ff; box-shadow: 0 4px 20px rgba(17, 10, 83, .15); text-align: left; font-size: 17px; }
#tooltip1 { left: 90%; top: 0; }
#tooltip2 { left: 87%; top: 72%; }
#tooltip3 { right: 103%; top: 30%; }
.mechanic:has(#tooltipbtn1:is(:hover, :focus)) #tooltip1, .mechanic:has(#tooltipbtn2:is(:hover, :focus)) #tooltip2, .mechanic:has(#tooltipbtn3:is(:hover, :focus)) #tooltip3 { display: block; }
.over-ons-columns { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; grid-auto-flow: column; column-gap: 24px; margin-bottom: 80px; }
.content .over-ons-columns h3 { font-size: 32px; font-weight: 800; text-align: center; margin: 0 0 16px; }
.over-ons-columns p { text-align: left; margin: 0; }
/* The dark band: full width, white text, the gears illustration on its lower edge */
.dark-band { position: relative; margin: 0 calc(50% - 50vw); padding: 64px calc(50vw - 50%) 260px; background: var(--purple); color: #fff; }
.dark-band > p { max-width: 960px; }
.page-over-ons .dark-band > h2 { font-size: 60px; font-weight: 800; line-height: 1.4; margin: 24px 0 16px; text-align: left; }
.page-over-ons .dark-band > p { text-align: left; }
.dark-band a { color: #0f76ff; }
.page-over-ons .dark-band > p:has(> img[src*="author-subitem"]) { position: absolute; left: 0; bottom: -170px; margin: 0; }
.page-over-ons .dark-band img[src*="author-subitem"] { max-width: 440px; margin: 0; }
main:has(.dark-band) { overflow-x: clip; }
.page-over-ons .content > p:last-child { text-align: center; }
@media (max-width: 767px) {
    .page-over-ons .post-hero, .page-het-team .post-hero { min-height: 560px; background-size: 100% auto; }
    .page-over-ons .content > h2, .page-over-ons .dark-band > h2 { font-size: 32px; }
    .over-ons-columns { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; row-gap: 12px; }
    .content .over-ons-columns h3 { margin-top: 24px; padding: 0 20px; font-size: 20px; line-height: 1.2; text-align: left; }
    /* The gears keep their three "+" hotspots: a tap shows the text in a white card across the gears, as on WordPress */
    .page-over-ons .content > h2:has(+ .mechanic) { font-size: 28px; }
    .mechanic { width: 280px; margin: 70px auto 244px; } /* room above and below for the cards, as on WordPress */
    .mechanic .pulsar { width: 20px; height: 20px; }
    /* The card lies over its own "+": it lets taps through, so the "+" keeps focus and the card stays open */
    .mechanic [id^="tooltip"]:not(.pulsar) { padding: 10px 0 0 15px; border-left: 0; box-shadow: 0 0 9px rgba(11, 41, 148, .2); font-size: 20px; line-height: 1.8; pointer-events: none; }
    #tooltip1, #tooltip2, #tooltip3 { left: 50%; right: auto; width: calc((100vw - 40px) * .95); transform: translateX(-50%); }
    #tooltip1 { top: -40px; }
    #tooltip2 { top: 110px; }
    #tooltip3 { top: 240px; }
    .page-over-ons .content img[src$="Vector.webp"] { margin-top: 130px; max-width: 140px; }
    .dark-band { padding-bottom: 180px; }
    .page-over-ons .dark-band img[src*="author-subitem"] { max-width: 260px; }
    .page-over-ons .dark-band > p:has(> img[src*="author-subitem"]) { bottom: -100px; }
}

/* Contact: dark like the WordPress page, labels in bold */
.page-contact { background: url(/wp-content/uploads/2021/05/world-map.png) center 60px/min(1619px, 100%) auto no-repeat, radial-gradient(50% 51.26% at 50% 51.26%, #110a53 0%, #0b0635 100%); color: #fff; }
.page-contact .post-hero { background: transparent; padding-bottom: 40px; }
.page-contact .page { max-width: 1170px; padding: 0 20px 120px; font-size: 20px; }
/* Email and address: an icon, a thin vertical line, label in bold above the value */
.page-contact .content p { position: relative; margin: 0 0 0 44px; padding-left: 10px; border-left: 1px solid #fff; }
.page-contact .content p:nth-of-type(odd) { font-weight: 800; margin-top: 24px; padding-top: 6px; }
.page-contact .content p:nth-of-type(even) { padding-bottom: 6px; }
.page-contact .content p:nth-of-type(odd)::before { content: ""; position: absolute; left: -44px; top: 32px; width: 24px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fff' d='M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z'/%3E%3C/svg%3E") center/contain no-repeat; }
.page-contact .content p:nth-of-type(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='%23fff' d='M172.3 501.7C27 291 0 269.4 0 192 0 86 86 0 192 0s192 86 192 192c0 77.4-27 99-172.3 309.7-9.5 13.8-29.9 13.8-39.5 0zM192 272c44.2 0 80-35.8 80-80s-35.8-80-80-80-80 35.8-80 80 35.8 80 80 80z'/%3E%3C/svg%3E"); }
.page-contact .content p:first-child { margin-top: 0; }
.page-contact .content a { color: #fff; }
main:has(.page-contact) + .site-footer { margin-top: 0; }
body:has(.page-contact) .site-header { background: #0b0635; }

/* Article cards on category and author pages (same card as the home page) */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: start; margin-top: 24px; }
.cards .home-card h3 { margin: 0; }
.cards .home-card-body > .card-teaser { margin: 0 0 10px; padding: 0; border: 0; }
.cards .home-card-meta { padding-top: 10px; border-top: 1px solid #cecdd7; }
/* The newest post of a category: a wide card, photo left, title, author and teaser right */
.featured-card { display: flex; gap: 40px; align-items: flex-start; margin: 24px 0 56px; }
.featured-card > a { flex: 0 0 50%; }
.featured-card > a img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 5px; }
.featured-card h3 { font-size: 20px; font-weight: 800; line-height: 1.8; color: #333; margin: 8px 0 10px; }
.featured-card .home-card-meta { padding-bottom: 16px; border-bottom: 1px solid #cecdd7; }
.featured-card p { font-size: 20px; line-height: 1.8; }
@media (max-width: 767px) {
    .featured-card { flex-direction: column; gap: 0; background: #fff; border-radius: 5px; overflow: hidden; box-shadow: 0 0 50px rgba(52, 89, 147, .15); }
    .featured-card > div { padding: 0 10px 10px; }
    .featured-card h3 { font-size: 18px; }
    .featured-card p { font-size: 16px; margin-bottom: 0; }
}
.cards .home-card > a img { height: 236px; } /* as on WordPress, at every width */
.listing > h2 { font-size: 32px; }
@media (max-width: 991px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }

/* Header on small screens: the logo and one "Menu" button that opens a drawer from the right over the blurred page,
   as on the live site: a cross, the categories one per row (picture and name), and below a line the pages in bold */
.main-nav a, .menu summary { white-space: nowrap; }
.mobile-menu-button { display: none; }
@media (max-width: 800px) {
    .header-row { min-height: 60px; }
    .header-row > a img { width: 155px; }
    .main-nav { display: none; }
    .mobile-menu-button { display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; color: #fff; font: inherit; font-size: 14px; cursor: pointer; }
    .mobile-menu-button svg { width: 22px; height: 22px; fill: #00c8ff; }
}
.mobile-menu { inset: 0 0 0 auto; width: 70%; min-width: 261px; height: auto; max-height: none; margin: 0; padding: 0 0 20px; border: 0; overflow-y: auto; background: radial-gradient(50% 33.81% at 50% 51.26%, #110a53 0%, #0b0635 100%); color: #fff; font-size: 18px; line-height: 1.5; text-align: left; }
.mobile-menu::backdrop { background: rgba(255, 255, 255, .01); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.mobile-menu-close { display: flex; align-items: center; justify-content: center; width: 24px; height: 36px; margin: 7px 15px 3px auto; padding: 0; border: 0; background: none; color: #00c8ff; cursor: pointer; }
.mobile-menu-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.mobile-menu p { margin: 0 0 20px 25px; font-weight: 800; text-align: center; }
.mobile-menu-categories { margin-left: 25px; }
.mobile-menu-categories a { display: flex; align-items: center; height: 51px; border-bottom: 1px solid rgba(255, 255, 255, .1); color: #fff; font-size: 12px; line-height: 1.8; }
.mobile-menu-categories img { width: 66px; height: 45px; margin-bottom: 4px; object-fit: contain; }
.mobile-menu-categories span { margin-left: 24px; }
.mobile-menu hr { margin: 50px 0 20px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .5); }
.mobile-menu > a { display: block; width: fit-content; margin: 0 0 20px 25px; color: #fff; font-size: 14px; font-weight: 800; }
.mobile-menu a:hover { color: #00c8ff; text-decoration: none; }

/* Team members ("Het team"): photo next to name, role, social icons and short bio */
.content .authorcontainerClass { display: flex; gap: 30px; align-items: flex-start; margin: 0; padding: 64px 0; border-bottom: 1px solid rgba(255, 255, 255, .15); }
.content .authorcontainerClass > img { width: 270px; aspect-ratio: 270 / 404; height: auto; object-fit: cover; border-radius: 5px; flex-shrink: 0; }
.content .authorcontainerClassRightBlock { flex: 1; }
.content .about-us-author-title, .content .about-us-author-title a { display: block; font-size: 36px; font-weight: 800; line-height: 1.4; color: #fff; }
.content .about-us-author-position { display: block; color: #c6c6c6; font-size: 18px; margin-bottom: 14px; }
.content .about-us-author-social-container { display: flex; gap: 20px; }
.content .social-icon-div a { display: block; width: 46px; height: 46px; border-radius: 50%; background: #00c8ff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M6.9 21H3.2V9h3.7v12zM5 7.4a2.2 2.2 0 1 1 0-4.3 2.2 2.2 0 0 1 0 4.3zM21 21h-3.7v-5.8c0-1.4 0-3.2-2-3.2s-2.2 1.5-2.2 3.1V21H9.4V9H13v1.6c.5-.9 1.7-1.9 3.5-1.9 3.7 0 4.4 2.5 4.4 5.6V21z'/%3E%3C/svg%3E") center/22px no-repeat; }
.content .social-icon-div a[href*="facebook"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M14 8.5V6.8c0-.8.2-1.3 1.4-1.3H17V2.6c-.3 0-1.3-.1-2.4-.1-2.4 0-4 1.4-4 4.1v1.9H8v3.2h2.6V21H14v-9.3h2.7l.4-3.2H14z'/%3E%3C/svg%3E"); }
.content .social-icon-div a[href*="twitter"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M21.5 6.2c-.7.3-1.4.5-2.2.6.8-.5 1.4-1.2 1.7-2.1-.7.4-1.6.8-2.4.9a3.8 3.8 0 0 0-6.6 3.5C8.8 9 6 7.5 4.1 5.2c-1 1.8-.5 4 1.2 5.1-.6 0-1.2-.2-1.7-.5 0 1.9 1.3 3.5 3.1 3.8-.6.2-1.2.2-1.7.1.5 1.5 2 2.6 3.6 2.7A7.7 7.7 0 0 1 3 18c1.7 1.1 3.7 1.7 5.9 1.7 7.1 0 11.1-6 10.9-11.4.7-.5 1.3-1.2 1.7-2.1z'/%3E%3C/svg%3E"); }
.content .socialhr { display: none; }
.content .shortbiocontainer { margin-top: 20px; font-size: 18px; color: #fff; }
@media (max-width: 767px) {
    .content .authorcontainerClass { flex-direction: column; align-items: center; text-align: center; padding: 40px 0; }
    .content .authorcontainerClass > img { width: 220px; }
    .content .about-us-author-title, .content .about-us-author-title a { font-size: 28px; }
    .content .about-us-author-social-container { justify-content: center; }
}

/* Het team: hero as Over ons, a dark band with the team members, a Contact button */
.page-het-team .page { max-width: 1170px; }
.page-het-team .content > h3:first-child, .page-het-team .content > h3:first-child ~ p, .page-het-team .content > h2, .page-het-team .content > h2 + p { text-align: center; }
.page-het-team .content > h3:first-child { font-size: 36px; font-weight: 800; margin-top: 32px; }
.team-band { margin: 80px calc(50% - 50vw) 0; padding: 60px calc(50vw - 50%) 40px; background: var(--purple); color: #fff; }
.content .team-band > h2 { font-size: 60px; font-weight: 800; text-align: center; margin: 0; }
.team-band > h2 + p { max-width: 790px; margin: 0 auto 16px; text-align: center; }
.team-band > .authorcontainerClass:last-child { border-bottom: 0; }
main:has(.team-band) { overflow-x: clip; }
.page-het-team .content > p:has(> img[src*="author-subitem"]) { display: none; }
.page-het-team .content > h2:last-of-type { font-size: 60px; font-weight: 800; margin-top: 80px; }
.page-het-team .content > p:last-child { text-align: center; }
.page-het-team .content > p:last-child > a:only-child, .page-over-ons .content > p:last-child > a:only-child { display: inline-flex; align-items: center; justify-content: center; width: 270px; height: 60px; background: #00c8ff; border-radius: 3px; color: #fff; font-weight: 800; }
.page-het-team .content > p:last-child > a:only-child:hover, .page-over-ons .content > p:last-child > a:only-child:hover { background: #00addc; text-decoration: none; }
@media (max-width: 767px) {
    .content .team-band > h2, .page-het-team .content > h2:last-of-type { font-size: 36px; }
}
.content video { display: block; max-width: 100%; height: auto; margin: 0 auto; max-height: 80vh; }
.content video:not([src]):not(:has(source)) { display: none; } /* a video whose file was not imported: no empty player */

/* Code blocks: long terminal commands wrap instead of running out of the column */
/* Content block: callout (tip or warning) on the WordPress site's dark illustrated background */
.callout { display: flex; align-items: center; min-height: 364px; margin: 24px 0; padding: 84px 10px 20px 0; background: url(/wp-content/uploads/2021/05/info-block-bg.png) center/100% 100% no-repeat; color: #fff; font-size: 20px; font-style: italic; font-weight: 300; line-height: 1.8; }
.callout-warning { min-height: 420px; padding-top: 97px; background-image: url(/wp-content/uploads/2021/05/error.png); }
.callout p { max-width: 781px; margin: 0; padding: 0 40px 0 74px; }
.callout-warning p { padding-left: 84px; }
.callout strong { font-weight: 700; }
.callout a { color: #fff; text-decoration: underline; }
@media (max-width: 767px) {
    .callout, .callout-warning { min-height: 480px; padding: 120px 0 40px; background-image: url(/wp-content/uploads/2021/06/block-info-mobile-bck.png); font-size: 14px; }
    .callout-warning { background-image: url(/wp-content/uploads/2021/06/block-error-mobile-bck.png); }
    .callout p, .callout-warning p { padding: 0 20px 0 60px; }
}

/* Content block: call-to-action button */
.cta-button a { display: block; padding: 12px 16px; border-radius: 3px; background: #4c530a; color: #fff; font-weight: 600; text-align: center; }
.cta-button a:hover { background: #3d4208; text-decoration: none; }

/* Phones: smaller headings and text, a centred post hero (as on the live site) */
@media (max-width: 767px) {
    body { font-size: 16px; }
    .content h2 { font-size: 24px; margin-top: 36px; }
    .content h3 { font-size: 16px; line-height: 1.8; margin-top: 24px; }
    .content h4 { font-size: 16px; line-height: 1.8; margin-top: 19.2px; }
    .post-hero, .post-hero:has(.byline) { padding: 32px 0 48px; }
    .post-hero:has(.byline) { text-align: center; }
    .post-hero h1, .post-hero .author-hero h1 { font-size: 28px; line-height: 1.5; margin-bottom: 32px; }
    .post-hero h1 + .byline { margin-top: 32px; }
    .byline { flex-direction: column; align-items: center; gap: 8px; }
}

.content pre { background: #f4f3fb; border-radius: 12px; padding: 16px 20px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; }

/* The number of a source sits on its own line above it */
.content .source-number { display: block; color: #777; }

/* Long bare URLs wrap instead of pushing the page sideways on phones */
.content { overflow-wrap: break-word; }
@media (max-width: 800px) {
    /* An internal-link pill wraps as a whole, so its icon padding never sticks out past the column */
    .post .content :is(p, li) > a[href^="/"], .post .content :is(p, li) > strong > a[href^="/"] { display: inline-block; max-width: 100%; }
}

/* Category heroes as on WordPress: 396px high including the header, the category illustration 280px high at the bottom right */
.post-hero.category-hero { min-height: 296px; padding: 28px 0 0; background-size: auto 280px; }
.category-hero .breadcrumb { margin-bottom: 0; }
.post-hero.category-hero h1 { margin: 54px 0 0; line-height: 1.5; }
@media (max-width: 800px) { .post-hero.category-hero { min-height: 336px; padding-top: 68px; } }
@media (max-width: 767px) {
    .category-hero .breadcrumb { font-size: 14px; line-height: 1.8; }
    .post-hero.category-hero h1 { margin-top: 0; }
}

/* Post heroes on phones as on WordPress: the same height and spacing, so the category illustration sits behind the byline as there */
@media (max-width: 767px) {
    .post-hero:has(.byline) { padding: 43px 0 40px; }
    .post-hero:has(.byline) > .container { padding: 0 10px; }
    .post-hero:has(.byline) .breadcrumb { margin: 0; font-size: 14px; line-height: 1.8; }
    .post-hero:has(.byline) .breadcrumb span { display: inline-block; }
    .post-hero h1 + .byline { margin-top: 95px; }
    .byline { gap: 0; }
    .byline .avatar { display: block; }
    .byline strong { font-size: 20px; line-height: 1.7; }
    .byline .reviewer { margin: 16px 0; }
    .byline .reading-time { margin: 28px 0 32px; line-height: 1.8; } /* WordPress: 16px under the reviewer line plus 12px, 12px plus 20px below */
}

/* A word longer than the screen is wide ("Publicatieprincipes" at 360px) breaks instead of pushing the page sideways */
.page-plain .post-hero h1 { overflow-wrap: break-word; }

/* Author pages below 992px, as on WordPress: the dark band ends 396px from the top of the page; the photo, the name in
   dark blue, the social icons and the bio are centred below it, the facts in three columns */
@media (max-width: 991px) {
    .post-hero.author-band { --band: 296px; padding: 19px 0 0; color: var(--text); background: url(/wp-content/uploads/2021/05/nonoise_background.png) right 0 top calc(var(--band) - 300px)/auto 300px no-repeat, url(/wp-content/uploads/2021/05/nonoise_foreground.png) right 0 top calc(var(--band) - 300px)/auto 300px no-repeat, linear-gradient(var(--purple), var(--purple)) 0 0/100% var(--band) no-repeat; }
    .author-band .breadcrumb { margin: 0; color: #fff; }
    .author-hero { flex-direction: column; align-items: center; gap: 0; margin-top: 84px; }
    .author-photo { margin-bottom: 0; padding: 23px 23px 32px; border-radius: 5px; }
    .post-hero .author-hero h1 { margin: 0 0 13px; color: var(--purple); font-size: 60px; line-height: 1.5; text-align: center; }
    .author-intro { min-height: 0; padding-left: 20px; text-align: center; }
    .author-social { justify-content: center; margin: 0; }
    .author-bio { margin: 19px 0 0; }
    .facts { flex-wrap: nowrap; gap: 12px; margin: 0; }
    .facts > span > span { display: inline-block; }
}
@media (max-width: 800px) { .post-hero.author-band { --band: 336px; padding-top: 59px; } }
@media (max-width: 767px) {
    .author-band .breadcrumb { font-size: 14px; line-height: 1.8; }
    .author-hero { margin-top: 87px; }
    .author-photo img { width: 278px; height: 278px; }
    .post-hero .author-hero h1 { margin-bottom: 13px; font-size: 32px; line-height: 1.2; }
    /* The facts one below the other: WordPress's three narrow columns run off the screen on two author pages */
    .facts { flex-direction: column; gap: 4px; }
    .facts > span > span { display: inline; }
    .author-bio { font-size: 14px; }
}