/* Huizelijk.nl theme: purple hero with the menu on top, white article sheet, lavender page, cloud footer. */

:root {
    --purple: #8874d2;
    --purple-light: #aca7eb;
    --purple-dark: #4831b0;
    --pink: rgba(222, 165, 207, .81);
    --lavender: #f4f5ff;
    --text: #676767;
    --radial: radial-gradient(41.17% 81.32% at 59.45% 51.34%, #bb73d4 0%, rgba(136, 115, 212, 0) 100%);
    --shadow-text: 0 2px 0 rgba(0, 0, 0, .24);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Poppins, system-ui, sans-serif; font-size: 16px; line-height: 1.6; color: #404040; background: var(--lavender); }
img { max-width: 100%; height: auto; }
a { color: var(--purple); text-decoration: none; }
h1, h2, h3, h4, h5, h6 { font-family: Poppins, system-ui, sans-serif; font-weight: 700; color: var(--text); }
.container { width: 100%; max-width: 1170px; margin: 0 auto; padding: 0 20px; }

/* ---------- Header (lies on top of each page's purple hero) ---------- */

.site-header { position: absolute; top: 26px; left: 0; right: 0; z-index: 50; }
.header-row { display: flex; align-items: center; justify-content: space-between; min-height: 56px; }
.logo img { display: block; width: 202px; height: 40px; }
.main-nav { display: flex; align-items: center; }
.main-nav > a { color: #fff; font-size: 18px; margin: 0 20px; }
.main-nav > a:hover { text-decoration: underline; }
.rooms-menu { margin-left: 15px; }
.rooms-menu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 4px; padding: 8px 12px; border-radius: 40px;
    background: rgba(136, 116, 210, .9); box-shadow: 0 0 22px rgba(255, 255, 255, .35), inset 0 0 12px rgba(72, 49, 176, .25); }
.rooms-menu > summary::-webkit-details-marker { display: none; }
.rooms-menu .dot { width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: inset 0 3px 4px rgba(0, 0, 0, .25); }
.rooms-label { font-family: Pacifico, cursive; font-size: 20px; line-height: 35px; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); margin: 0 18px 0 22px; }
.rooms-label::after { content: ""; display: inline-block; margin-left: 6px; border: 5px solid transparent; border-top-color: #fff; border-bottom: 0; vertical-align: middle; }
.rooms-panel { position: absolute; left: 0; right: 0; top: 80px; padding: 50px 0 20px; background: var(--purple); background-image: var(--radial); box-shadow: 0 30px 60px rgba(25, 29, 48, .2); }
.rooms-grid { display: flex; flex-wrap: wrap; justify-content: space-between; }
.room-card { display: flex; flex-direction: column; align-items: center; width: 221px; height: 160px; margin-bottom: 40px; background: url(/wp-content/uploads/2021/08/desktop-menu-bck-r1.svg) no-repeat center / 100% 100%;
    color: #fff; font-weight: 700; font-size: 18px; line-height: 1.3; text-align: center; letter-spacing: .02em; text-shadow: var(--shadow-text); }
.room-card:hover { background-image: url(/wp-content/uploads/2021/08/transparent-category-bck-hover.svg); }
.room-art { display: flex; justify-content: center; height: 138px; margin-top: -30px; }
.room-art img { width: auto; height: 138px; }
.room-card:hover .room-art img { margin-top: -10px; }

.mobile-menu { display: none; }
.mobile-menu > summary { list-style: none; cursor: pointer; position: relative; z-index: 3; }
.mobile-menu > summary::-webkit-details-marker { display: none; }
.mobile-menu .close-icon, .mobile-menu[open] .open-icon { display: none; }
.mobile-menu[open] .close-icon { display: block; margin-right: -5px; }
/* The phone menu as on WordPress: a see-through purple panel on the right that starts under the header bar (its
   rounded top corner hides behind the bar), the rooms with small pictures, then the pages. */
.mobile-panel { position: fixed; top: 18px; right: 0; z-index: 0; width: 50%; min-width: 261px; height: 100vh; overflow-y: auto; padding: 40px 0 30px; text-align: right;
    background: linear-gradient(120.37deg, #8874d2 14.06%, rgba(137, 115, 210, .7) 80.42%); border-left: 1px solid rgba(255, 255, 255, .5); border-radius: 20px 0 0 20px;
    box-shadow: 0 1px 24px -1px rgba(148, 92, 133, .15); }
.mobile-title { margin: 0 0 10px; padding-right: 15px; font-family: Pacifico, cursive; font-size: 20px; line-height: 35px; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.mobile-rooms { border-top: 1px solid rgba(255, 255, 255, .7); border-bottom: 1px solid rgba(255, 255, 255, .69); }
.mobile-room { display: flex; justify-content: flex-end; align-items: center; height: 44px; border-bottom: 1px solid rgba(255, 255, 255, .8); color: #fff; font-weight: 700; font-size: 12px; letter-spacing: .02em; text-shadow: var(--shadow-text); }
.mobile-room:last-child { border-bottom: 0; }
.mobile-room span { margin-right: 13px; }
.mobile-room img { width: 28px; height: auto; margin-right: 17px; }
.mobile-links { display: flex; flex-direction: column; align-items: flex-end; padding-right: 20px; }
.mobile-links a { color: #fff; font-size: 16px; line-height: 2.675; text-shadow: var(--shadow-text); }

/* ---------- Hero (purple, every page) ---------- */

.hero { position: relative; overflow: hidden; background: var(--purple); color: #fff; }
.hero::before { content: ""; position: absolute; inset: 0; background: var(--radial); pointer-events: none; }
.hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero h1 { margin: 24px 0 0; font-family: Pacifico, cursive; font-weight: 400; font-size: 62px; line-height: 1.4; color: #fff; text-shadow: 0 4px 0 rgba(0, 0, 0, .24); }
.breadcrumb { font-size: 14px; color: #fff; }
.breadcrumb a { color: rgba(255, 255, 255, .6); }
.breadcrumb .sep { margin: 0 8px; color: rgba(255, 255, 255, .6); }
/* Section titles at WordPress's sizes: 78px, 40px on tablets, 29px on phones. */
.section-title { display: flex; align-items: center; justify-content: center; gap: 25px; margin: 0; font-family: Pacifico, cursive; font-weight: 400; font-size: 78px; line-height: 137px; color: var(--text); }
.section-title img { width: 50px; height: auto; }
.hero .section-title { color: #fff; text-shadow: 0 4px 0 rgba(0, 0, 0, .24); }

/* Post hero: title, room label between two lines, author photo and byline. */
.post-hero { padding: 150px 0 330px; }
.post-category { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 34px; }
/* The lines beside the room label shrink on small screens and disappear on phones, as on WordPress. */
.post-category .line { flex: 0 1 250px; height: 1px; background: rgba(255, 255, 255, .5); }
.pill { display: inline-block; margin: 0 15px; padding: 2px 12px; border: 1px solid #fff; border-radius: 26px; background: var(--pink); color: #fff; font-size: 12px; line-height: 1.6; letter-spacing: .02em; }
.byline { display: flex; flex-direction: column; align-items: center; color: #fff; }
.byline .avatar { width: 62px; height: 62px; margin-top: 25px; border: 2px solid #fff; border-radius: 50%; object-fit: cover; background: #fff; }
.byline strong { margin-top: 10px; font-size: 20px; line-height: 1.6; letter-spacing: .02em; }
.byline span { font-size: 16px; letter-spacing: .02em; }
.hero-wave { position: absolute; left: 0; bottom: -2px; z-index: 1; width: 100%; height: auto; }
.hero-bubbles { position: absolute; right: 0; bottom: 30px; z-index: 1; width: 120px; }
.hero-mobile { display: none; }

/* ---------- Post: white sheet with share buttons, text and contents ---------- */

.post-sheet { position: relative; z-index: 3; margin-top: -300px; }
.is-post main { background: linear-gradient(#fff, #fff) no-repeat 0 300px / 100% calc(100% - 300px); }
.featured img { display: block; width: 100%; height: 496px; object-fit: cover; border-radius: 18px; }
.post-layout { display: flex; align-items: stretch; margin-top: 40px; }
/* The share buttons stay in view, the first one 10px from the top of the window, while you read (as on WordPress). */
.share-side { position: sticky; top: 0; align-self: flex-start; flex: 0 0 63px; display: flex; flex-direction: column; align-items: center; padding-top: 10px; }
.share-side > a, .share-bottom > a { display: inline-flex; width: 38px; height: 38px; margin-bottom: 20px; border-radius: 50%; background: #dedede; align-items: center; justify-content: center; }
.share a svg { width: 22px; height: 22px; fill: #fff; }
.share a:hover { background: var(--purple); }
.share-bottom { display: none; }
.post-main { flex: 0 1 783px; min-width: 0; padding: 0 10px 120px 0; border-right: 1px solid rgba(103, 103, 103, .2); }
.post-toc { flex: 1 1 0; position: sticky; top: 0; align-self: flex-start; display: flex; flex-direction: column; gap: 24px; padding: 10px 0 16px 18px; }
.post-toc a { color: rgba(136, 116, 210, .54); font-weight: 700; font-size: 16px; line-height: 1.6; }
.post-toc a:hover, .post-toc a.is-current { color: var(--purple); }
.post-toc a.is-current::before { content: url(/wp-content/uploads/2021/08/pawpaw.png); margin-right: 15px; }
.toc-title { display: none; }
.sheet-end { height: 120px; background: #fff; }
.is-post .sheet-end { background: url(/wp-content/uploads/2021/09/helpfull-bck.svg) no-repeat center top / 100% auto, #fff; height: 200px; }

/* The author under the article. */
.author-clouds { display: flex; justify-content: space-between; margin: 40px 0 -19px; }
.author-clouds img { width: 98px; height: 98px; }
.author-box { display: flex; align-items: flex-start; padding: 28px; border: 1px solid var(--purple-light); border-radius: 20px; background: var(--purple); color: #fff; text-shadow: var(--shadow-text); }
.author-photo img { display: block; width: 178px; min-width: 178px; height: 124px; border-radius: 10px; object-fit: cover; }
.author-text { display: flex; flex-direction: column; align-items: center; width: 100%; margin-left: 25px; color: #fff; text-align: center; }
.author-role { font-size: 14px; letter-spacing: .02em; }
.author-name { width: 100%; padding-bottom: 5px; border-bottom: 1px solid #fff; font-size: 18px; letter-spacing: .02em; }
.author-bio { font-size: 14px; line-height: 1.8; letter-spacing: .02em; }

/* ---------- Article text ---------- */

.content { font-size: 18px; line-height: 1.82; letter-spacing: .02em; color: var(--text); overflow-wrap: break-word; }
.content > :first-child { margin-top: 0; }
/* Headings have no margins and paragraphs 1em above and below, as on WordPress. */
.content h2 { font-size: 36px; line-height: 1.5; margin: 0; }
.content h3 { font-size: 32px; line-height: 1.45; margin: 0; }
.content h4 { font-size: 28px; line-height: 1.45; margin: 0; }
.content h5 { font-size: 24px; line-height: 1.45; margin: 0; }
.content h6 { font-size: 20px; line-height: 1.8; margin: 0; color: var(--purple); }
.content p { margin: 1em 0; }
.content a { color: var(--purple); }
.post-main .content a { color: #0074db; }
.post-main .content a[href^="/"]:not([href^="//"]) { position: relative; display: inline-flex; align-items: baseline; gap: 6px; padding: 2px 25px 2px 8px; border-radius: 8px;
    background: #eee; color: #000; font-weight: 700; }
.post-main .content a[href^="/"]:not([href^="//"])::before { content: ""; position: absolute; right: 6px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6'/%3E%3Cpath d='m21 3-9 9'/%3E%3Cpath d='M15 3h6v6'/%3E%3C/svg%3E") no-repeat center / contain; }
.post-main .content a[href^="/"]:not([href^="//"]):hover { background: #ddd; }
.post-main .content .wp-block-button__link { color: #fff; }
.content strong { font-weight: 700; }
.content img { border-radius: 18px; }
.content figure { margin: 0 0 1em; }
.content > p > img:only-child { display: block; margin: 0 auto; }
/* Photos fill the text width, except one an editor resized: that keeps its size (at most the column's width), in the
   middle when WordPress centred it. */
.content figure:not(.is-resized) img, .content .column figure:not(.aligncenter) img { width: 100%; }
.content figure.aligncenter { display: table; margin-left: auto; margin-right: auto; }
.content figcaption { font-size: 14px; text-align: center; }
.content > ul { list-style: none; padding-left: 30px; text-indent: -15px; }
.content > ul > li { line-height: 1.8; }
/* The paw inherits the item's -15px indent, as on WordPress: it hangs at the list's left edge and the text after it
   lines up with the wrapped lines below. */
.content > ul > li::before { content: url(/wp-content/uploads/2021/08/pawpaw.png); display: inline-block; margin: -5px 10px 0 0; vertical-align: middle; }
.content ul ul { padding-left: 15px; text-indent: 0; list-style: disc; }
.content > ol { list-style: none; counter-reset: item; padding-left: 10px; }
.content > ol > li { counter-increment: item; line-height: 1.8; margin-bottom: 10px; }
.content > ol > li::before { content: counter(item); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: 10px;
    border-radius: 50%; background: rgba(172, 167, 235, .29); color: var(--purple); font-family: Pacifico, cursive; font-size: 18px; line-height: 1; }
/* Tables as WordPress's table block drew them: thin lines in the text colour, a thick line under the header, equal
   columns; "stripes" tables have grey bands instead of lines. */
.content table { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 0 0 1em; font-size: 18px; line-height: 32.76px; }
.content th, .content td { padding: .5em; border: 1px solid; text-align: left; vertical-align: middle; overflow-wrap: break-word; }
/* A column WordPress centred or right-aligned (|:-:| in Markdown, align="center" in an HTML table). */
.content th[align=center], .content td[align=center] { text-align: center; }
.content th[align=right], .content td[align=right] { text-align: right; }
.content thead { border-bottom: 3px solid; }
/* Tables WordPress let size their columns to the text (the cookie tables). */
.content table.auto { table-layout: auto; }
.content table.auto th { text-align: center; }
@media (max-width: 767px) { .content table.auto { display: block; overflow-x: auto; } }
.content table.stripes { border-bottom: 1px solid #f0f0f0; }
.content table.stripes th, .content table.stripes td { border-color: transparent; }
.content table.stripes tbody tr:nth-child(odd) { background: #f0f0f0; }
.content blockquote { margin: 0 0 1em; padding: 10px 24px; border-left: 4px solid var(--purple-light); background: rgba(172, 167, 235, .12); border-radius: 0 12px 12px 0; }
/* WordPress's separator block: a solid 2px grey line. */
.content hr { margin: .5em 0; border: 0; border-top: 2px solid #808080; }
.content iframe { max-width: 100%; }
.content .video iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 18px; }

/* WordPress columns (photos side by side): touching, as on WordPress. */
.content .columns { display: flex; margin: 0 0 1.75em; }
.content .has-text-align-center { text-align: center; }
.content .column { flex: 1 1 0; min-width: 0; }
.content .column > :last-child { margin-bottom: 0; }

/* Boxes (site.yaml legacy.boxes). The theme draws their ornaments: WordPress had them as images in the content. */

/* Info box (lilac) and "Let op!" box (pink): a corner illustration that sticks out at the top left, a round
   "screw" in the bottom left and top right corner, and a big "i" beside the text or a "!" above it. */
.info-box, .warning-box { position: relative; display: flex; flex-direction: column; justify-content: center; max-width: 773px; min-height: 159px; margin: 60px auto 0;
    border-radius: 120px 5px 120px 5px; color: var(--text); font-size: 18px; line-height: 32.76px;
    background: url(/wp-content/uploads/2021/08/block-corner-dot.webp) no-repeat left 12px bottom 12px / 30px 30px,
                url(/wp-content/uploads/2021/08/block-corner-dot.webp) no-repeat right 12px top 12px / 30px 30px, #e7e5f9; }
.info-box::before, .warning-box::before { content: ""; position: absolute; left: 0; top: -50px; width: 168px; height: 117px;
    background: url(/wp-content/uploads/2021/08/block-corner-info.webp) no-repeat left top / contain; pointer-events: none; }
.info-box::after, .warning-box::after { content: ""; position: absolute; pointer-events: none; }
.info-box { padding: 39px 42px 0 150px; }
.info-box::after { left: 93px; top: calc(50% + 12px); width: 27px; height: 54px; transform: translateY(-50%); background: url(/wp-content/uploads/2021/08/info-block.webp) no-repeat center / contain; }
.warning-box { justify-content: flex-start; padding: 111px 42px 49px 93px; text-align: center; background-color: rgba(222, 165, 207, .25); }
.warning-box::before { background-image: url(/wp-content/uploads/2021/08/block-corner-warning.webp); }
.warning-box::after { left: calc(50% + 13px); top: 25px; width: 25px; height: 63px; background: url(/wp-content/uploads/2021/09/warning-block.webp) no-repeat center / contain; }
/* The "Let op!" box is a copy of the info box. WordPress loaded the info box's stylesheet only on pages that have an
   info box, and there the "Let op!" box took the info box's layout: the "!" left of left-aligned text. On pages
   without an info box the "!" sits above centred text (the rules above). */
.content:has(.info-box) .warning-box { justify-content: center; padding: 39px 42px 0 148px; text-align: left; }
.content:has(.info-box) .warning-box::after { left: 93px; top: calc(50% + 12px); transform: translateY(-50%); }
@media (max-width: 991px) { .info-box, .content:has(.info-box) .warning-box { padding-bottom: 20px; } }
.info-box > :first-child, .warning-box > :first-child, .quote-box > :first-child, .content .column > :first-child { margin-top: 0; }
.info-box > :last-child, .warning-box > :last-child, .quote-box > :last-child { margin-bottom: 0; }

/* Quote box (yellow): a quote mark above the text, screws in two corners and a cat in the bottom right. */
.quote-box { position: relative; max-width: 773px; margin: 40px auto; padding: 87px 10% 104px; border-radius: 120px 0 120px 0; color: var(--text); line-height: 32.76px; text-align: center;
    background: url(/wp-content/uploads/2021/09/blockquote-block.png) no-repeat center top 40px / 47px 34px,
                url(/wp-content/uploads/2021/08/block-corner-dot.png) no-repeat right 12px top 12px / 30px 30px,
                url(/wp-content/uploads/2021/08/block-corner-dot.png) no-repeat left 12px bottom 12px / 30px 30px, #ffecce; }
.quote-box::after { content: ""; position: absolute; right: 0; bottom: -40px; width: 224px; height: 104px; background: url(/wp-content/uploads/2021/08/block-corner-blockquote.png) no-repeat right bottom / contain; pointer-events: none; }

/* Pros and cons side by side: a green "Voordelen" and a red "Nadelen" box. */
.pros-cons { display: flex; justify-content: space-between; gap: 20px; max-width: 773px; margin: 25px auto; padding-bottom: 20px; }
.pros, .cons { flex: 1 1 0; min-width: 0; padding: 24px; border: 1px solid; border-radius: 20px; }
.pros { background: rgba(220, 240, 218, .5); border-color: #83ba4d; }
.cons { background: rgba(246, 232, 232, .5); border-color: #eeb7b7; }
.content .pros h4, .content .cons h4 { margin: 0 0 15px; font-size: 20px; line-height: 1.45; }
.content .pros h4 { color: #83ba4d; }
.content .cons h4 { color: #dc9595; }
.pros ul, .cons ul { list-style: none; margin: 0; padding: 0; }
.pros li, .cons li { margin-bottom: 15px; font-size: 18px; line-height: 1.4; color: var(--text); }
.pros li::before { content: url(/wp-content/uploads/2021/09/block-plus.svg); margin-right: 10px; }
.cons li::before { content: url(/wp-content/uploads/2021/09/block-minus.svg); margin-right: 10px; position: relative; bottom: 5px; }

@media (max-width: 767px) {
    .info-box, .warning-box, .quote-box { font-size: 16px; }
    .pros-cons { flex-direction: column; margin-bottom: 20px; padding-bottom: 0; }
    .pros { padding-left: 20px; }
    .content .pros h4, .content .cons h4 { font-size: 18px; }
}
@media (max-width: 479px) {
    .info-box, .warning-box { background-size: 12px 12px, 12px 12px, auto; font-size: 14px; }
    .info-box { padding: 81px 6px 81px 67px; }
    .info-box::after { left: 23px; width: 14px; height: 27px; }
    .warning-box { padding: 100px 10px 52px 25px; }
    .warning-box::after { left: calc(50% + 4px); width: 18px; height: 46px; }
    .content:has(.info-box) .warning-box { padding: 81px 6px 81px 64px; }
    .content:has(.info-box) .warning-box::after { left: 23px; width: 11px; height: 27px; }
    .quote-box { padding: 70px 8% 80px; font-size: 14px; background-size: 25px auto, 12px 12px, 12px 12px, auto; }
    .quote-box::after { right: 50px; bottom: -20px; width: 150px; height: 68px; }
}
/* The pros and cons keep 18px down to 481px, as WordPress's own breakpoint for them. */
@media (max-width: 480px) { .pros li, .cons li { font-size: 14px; } }

/* ---------- Cards (category, author, home, blog) ---------- */

/* Cards as WordPress sized them: 350 x 320 side by side, centred, with 20px between them (the row reaches into the
   container's padding, so three fit from 1110px); one 450 x 360 card from 767px; 95% of the screen on phones. A card
   with a long title grows; the writer stays at the bottom. */
.cards { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 -20px; }
.card { display: flex; flex-direction: column; width: 350px; min-height: 320px; margin: 0 10px 40px; overflow: hidden; border: 2px solid #fff; border-radius: 18px;
    background: rgba(255, 255, 255, .72); box-shadow: -7px -7px 40px #fff, 7px 7px 40px rgba(55, 84, 170, .12); color: var(--text); }
@media (max-width: 767px) { .card { width: 450px; min-height: 360px; margin-bottom: 30px; } }
@media (max-width: 479px) { .card { width: 95%; min-height: 320px; margin: 0 0 20px; } }
/* The blog's later articles, until its script shows them (12 at a time). */
.card[hidden] { display: none; }
.card-photo { position: relative; display: block; height: 147px; background: #e7e5f9; }
.card-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-photo .pill { position: absolute; top: 20px; left: 0; font-size: 12px; }
.card-body { display: flex; flex-direction: column; flex: 1; padding: 0 10px 12px; }
.card h3, .card h4 { margin: 10px 0; font-size: 16px; line-height: 1.6; letter-spacing: .02em; }
.card h3 a, .card h4 a { color: var(--text); }
.card-date { margin: 0 0 5px; font-size: 14px; letter-spacing: .02em; }
.card-author { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 6px; border-top: 1px solid rgba(103, 103, 103, .2); line-height: 1.2; }
.card-author img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.card-author strong { display: block; font-size: 16px; }
.card-author small { font-size: 14px; }
.card .card-author { align-items: flex-start; min-height: 52px; padding-top: 10px; }
.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0 0; }
.pagination a, .pagination span { min-width: 42px; padding: 8px 14px; border: 1px solid #fff; border-radius: 5px; background: #fcfdff; color: var(--text); font-weight: 700; text-align: center;
    box-shadow: 7px 7px 40px rgba(55, 84, 170, .15); }
.pagination [aria-current] { background: var(--purple-light); color: #fff; }
/* "…" between the page numbers: plain text, as WordPress printed it. */
.pagination .dots { min-width: 0; padding: 8px 2px; border: 0; background: none; box-shadow: none; }

/* ---------- Category and author pages ---------- */

.archive-hero { padding: 150px 0 200px; min-height: 520px; }
.archive-hero .hero-wave { bottom: -2px; }
/* A room's hero: the title, then the room's picture on its bubbles at the right edge of the screen, as large as on
   WordPress at each width (WordPress squeezed the picture on small screens; here it keeps its proportions). */
.archive-hero.room-hero { overflow: visible; min-height: 650px; padding: 150px 0 0; }
.archive-art { position: absolute; right: 0; top: 136px; z-index: 2; display: flex; align-items: flex-end; justify-content: center; width: 575px; height: 500px;
    background: url(/wp-content/uploads/2021/09/category-page-icon-container-r1-pichi.png) no-repeat left top / contain; }
.archive-art img { width: 426px; height: 385px; object-fit: contain; object-position: center bottom; }
@media (max-width: 1120px) {
    .archive-hero.room-hero { min-height: 486px; }
    .archive-art { width: 350px; height: 350px; }
    .archive-art img { width: 350px; height: 250px; }
}
@media (max-width: 991px) {
    .archive-hero.room-hero { min-height: 494px; padding-top: 110px; }
    .archive-art { top: 144px; }
}
@media (max-width: 767px) {
    .archive-hero.room-hero { min-height: 0; padding: 157px 0 0; }
    .archive-art { position: relative; top: auto; display: flex; width: 250px; height: 250px; margin: 20px 0 0 auto; }
    .archive-art img { width: 250px; height: 200px; }
}
@media (max-width: 479px) {
    .archive-hero.room-hero { padding-top: 80px; }
    .archive-art { height: 200px; margin: 21px 0 -50px auto; }
    .archive-art img { height: 150px; }
}
.listing { padding: 60px 20px 120px; }
.listing-empty { text-align: center; color: var(--text); }
.author-hero { padding-bottom: 230px; }
.author-hero .author-clouds { width: 100%; max-width: 780px; margin: 30px auto -19px; }
.author-hero .author-box { width: 100%; max-width: 780px; background: rgba(136, 116, 210, .5); }
.author-hero .author-text { align-items: flex-start; text-align: left; }
.author-hero .author-name { border-bottom-width: 2px; }
/* Phones: WordPress hid the page title, so the name only shows in the box. Screen readers still read the title. */
@media (max-width: 767px) { .author-hero h1 { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }

/* ---------- Plain pages (privacy, cookies) and designed pages ---------- */

.page-text { padding: 40px 20px 120px; }
.page-text .content { max-width: 1170px; }
.page-text .content a { color: #0074db; }

/* ---------- Footer ---------- */

.site-footer { color: #fff; }
.footer-clouds { min-height: 180px; background: url(/wp-content/uploads/2021/08/Footer.svg) no-repeat center top / cover, var(--lavender); }
.footer-main { background: var(--purple) url(/wp-content/uploads/2021/08/bottom-right-corner-r1-pichi.png) no-repeat right bottom / auto 300px; }
.footer-grid { display: flex; flex-wrap: wrap; justify-content: space-between; padding-bottom: 20px; }
.footer-grid h2 { margin: 0; padding-bottom: 2px; border-bottom: 2px solid #fff; color: #fff; font-size: 28px; line-height: 42px; font-weight: 700; }
.footer-rooms { width: 50%; }
.footer-rooms > div { display: flex; flex-wrap: wrap; margin-top: 15px; }
.footer-rooms a { width: 50%; margin-bottom: 5px; color: #fff; font-size: 18px; line-height: 2; }
.footer-pages, .footer-contact { width: 20%; display: flex; flex-direction: column; }
.footer-pages h2 { margin-bottom: 15px; }
.footer-pages a { color: #fff; font-size: 18px; line-height: 2.3; }
.footer-grid a:hover { font-weight: 700; }
.footer-contact b { margin-top: 20px; font-size: 18px; }
.footer-contact b + a, .footer-contact p { margin: 0; color: #fff; font-size: 18px; }
.footer-contact b:nth-of-type(2) { margin-top: 40px; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 30px 0 20px; }
.footer-bottom p { margin: 0; font-size: 18px; line-height: 2; font-weight: 300; }
.socials { display: flex; gap: 6px; }
.socials a { display: inline-flex; width: 31px; height: 31px; border-radius: 50%; background: #f4f4f4; align-items: center; justify-content: center; }
.socials svg { width: 22px; height: 22px; fill: var(--purple); }

/* ---------- Tablets and phones ---------- */

@media (max-width: 1120px) {
    .post-layout { flex-direction: column-reverse; }
    .post-toc { position: static; padding: 0 0 20px; }
    /* The text column keeps its 10px right padding, as on WordPress at every width. */
    .post-main { flex: 1 1 auto; border-right: 0; }
    .share-side { flex-direction: row; justify-content: flex-start; gap: 15px; }
    .rooms-grid { justify-content: center; gap: 0 20px; }
}

@media (max-width: 991px) {
    .main-nav { display: none; }
    .mobile-menu { display: block; }
    /* Phones and tablets: the header is a purple bar with a scalloped lower edge at the very top, with a smaller logo.
       It stays at the top of the screen while the menu is open. The bar is drawn behind the logo and the menu button,
       but over the menu panel. */
    .site-header { top: 0; }
    .site-header::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: 58px; pointer-events: none;
        background: url(/wp-content/uploads/2021/08/mobile-bck-full-width-r3.svg) repeat-x left top / auto 100%; }
    .site-header:has(.mobile-menu[open]) { position: fixed; }
    .header-row { align-items: flex-start; min-height: 58px; padding-top: 12px; }
    .logo { position: relative; z-index: 2; }
    .logo img { width: auto; height: 27px; }
    .mobile-menu > summary { margin-top: 2px; }
    .hero h1 { font-size: 55px; }
    .post-hero { padding-top: 120px; }
    .footer-rooms { width: 100%; }
    .footer-pages, .footer-contact { width: 48%; margin-top: 30px; }
}

@media (max-width: 767px) {
    .mobile-panel { width: 70%; }
    .hero h1 { font-size: 32px; }
    .section-title { font-size: 40px; line-height: 1.5; gap: 10px; }
    .section-title img { width: 30px; }
    .post-hero { padding: 110px 0 120px; }
    .hero-bubbles { display: none; }
    .hero-mobile { display: block; position: absolute; left: 0; bottom: 0; width: 100%; z-index: 1; }
    .post-hero .hero-wave { display: none; }
    /* Phones: the photo starts below the hero's wave, as tall as on computers (WordPress crops it to fit). */
    .post-sheet { margin-top: 0; padding-top: 70px; }
    .is-post main { background-position: 0 0; background-size: 100% 100%; }
    .share-side { display: none; }
    .toc-title { display: flex; align-items: center; justify-content: center; margin: 0; color: var(--text); font-family: Pacifico, cursive; font-size: 26px; line-height: 1.6; }
    .toc-title span { margin: 0 10px; }
    .toc-title img { width: 50px; height: 6px; }
    .post-toc { padding: 20px 18px 40px; }
    /* Under the article on phones: "Share :" and four purple buttons in one row, as on WordPress. */
    .share-bottom { display: flex; align-items: flex-end; justify-content: space-around; margin: 20px 0 0 10px; }
    .share-bottom span { margin-bottom: 20px; color: var(--text); font-weight: 700; }
    .share-bottom > a { margin: 0 15px 20px 0; background: var(--purple); }
    .share-bottom > a svg { width: 28px; height: 28px; }
    .share-bottom + .author-clouds { margin-top: 10px; }
    .content .columns { flex-direction: column; }
    .author-box { flex-direction: column; align-items: center; }
    .author-photo { width: 100%; }
    .author-photo img { width: 100%; min-width: 0; height: 250px; }
    .author-text { margin: 15px 0 0; }
    .archive-hero { padding: 110px 0 120px; min-height: 0; }
    /* Phone footer as on WordPress: centred titles, rooms and pages as boxed buttons in two columns, centred contact
       details, large social icons, a small copyright line beside the plant. */
    .footer-grid h2 { border-bottom: 0; text-align: center; }
    .footer-rooms > div { justify-content: space-between; margin-top: 15px; padding: 0 4px; }
    .footer-rooms a, .footer-pages a { display: flex; align-items: center; justify-content: center; width: calc(50% - 4px); height: 55px; margin: 0 0 16px; padding: 0 10px;
        border: 1px solid #fff; border-radius: 3px; font-size: 12px; line-height: 1.3; text-align: center; }
    .footer-pages { flex-direction: row; flex-wrap: wrap; justify-content: space-between; width: 100%; margin-top: 10px; }
    .footer-pages h2 { width: 100%; margin-bottom: 20px; }
    .footer-pages a { width: calc(50% - 7px); }
    .footer-contact { width: 100%; align-items: center; margin-top: 10px; text-align: center; }
    .footer-contact b { margin-top: 15px; font-size: 16px; }
    .footer-contact b:nth-of-type(2) { margin-top: 20px; }
    .footer-contact b + a, .footer-contact p { font-size: 16px; }
    .footer-bottom { flex-direction: column-reverse; align-items: center; gap: 70px; margin: 40px 0 30px; }
    .footer-bottom p { align-self: flex-start; font-size: 12px; font-weight: 400; }
    .socials { gap: 14px; }
    .socials a { width: 42px; height: 42px; }
    .socials svg { width: 26px; height: 26px; }
    .footer-main { background-size: auto 150px; }
}

@media (max-width: 479px) {
    .mobile-panel { width: 90%; max-height: 714px; }
    .mobile-menu .open-icon { width: 31px; }
    .toc-title { font-size: 29px; }
    .section-title { font-size: 29px; }
    .post-category .line { display: none; }
    .toc-title span { margin: 0; }
    .toc-title img { height: 8px; }
}
/* Article text keeps the computer sizes down to 481px, then jumps to the phone sizes (WordPress's own breakpoint for
   the text, one pixel wider than the theme's 479px). Only the text's own paragraphs, lists and headings shrink. */
@media (max-width: 480px) {
    .content > p, .content > ul > li, .content > ol > li { font-size: 14px; line-height: 1.8; }
    .content > h2 { font-size: 24px; }
    .content > h3 { font-size: 18px; }
    .content > h4, .content > h5, .content > h6 { font-size: 16px; }
}
.card-author small { display: block; }

/* ---------- Designed pages: section titles and pill buttons ---------- */

.pill-button { display: inline-flex; align-items: center; gap: 4px; margin: 30px auto 0; padding: 8px 12px; border-radius: 40px; background: var(--purple);
    box-shadow: 0 4px 30px rgba(115, 97, 180, .44), inset 0 4px 20px rgba(0, 0, 0, .15); color: #fff; font-family: Pacifico, cursive; font-size: 20px; line-height: 35px; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.pill-button span:nth-child(2) { margin: 0 20px; }
.pill-button .dot { width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: inset 0 3px 4px rgba(0, 0, 0, .25); }
.pill-button:hover { background: #a473d4; }
.home-intro { max-width: 770px; margin: 15px auto 0; font-size: 18px; line-height: 1.8218; letter-spacing: .02em; color: var(--text); text-align: center; }
.on-color { color: #fff; text-shadow: var(--shadow-text); }
.section-title.on-color { color: #fff; text-shadow: 0 4px 0 rgba(0, 0, 0, .24); }

/* ---------- Home ---------- */

/* The hero: the room illustration lies behind the text as WordPress's section background did (its natural size,
   80% across and 50px down; scaled to fit on tablets; a separate square picture under the text on phones). */
.home-hero { min-height: 0; padding: 0 0 399px; }
.home-hero-inner { position: relative; z-index: 2; padding-top: 286px; }
.home-hero-text { display: flex; flex-direction: column; align-items: flex-end; width: 46%; }
.home-kicker { align-self: stretch; margin-top: 62px; font-family: Pacifico, cursive; font-size: 78px; line-height: 1.6; text-shadow: 0 5px 0 rgba(0, 0, 0, .24); }
.home-tagline { display: flex; flex-direction: column; align-items: center; }
.home-hero h1 { margin: 21px 0 0; font-size: 36px; line-height: 2; }
.home-underline { margin: -15px 0 0 -20px; }
.home-hero .hero-room { position: absolute; inset: 0; z-index: 1; width: 100%; max-width: none; height: 100%; object-fit: none; object-position: 80% 50px; pointer-events: none; }
.home-hero .hero-mobile { display: none; }
@media (max-width: 1120px) {
    .home-hero { padding-bottom: 216px; }
    .home-hero .hero-room { object-fit: contain; object-position: 150px 25px; }
}
@media (max-width: 991px) {
    .home-hero-inner { padding-top: 219px; }
    .home-hero .hero-room { object-position: 110px 85px; }
}
@media (max-width: 767px) {
    .home-hero { padding-bottom: 341px; }
    .home-hero-inner { padding-top: 153px; }
    .home-hero-text { width: 100%; align-items: center; }
    .home-kicker { align-self: center; margin-top: 0; }
    .home-tagline { width: 100%; margin-bottom: 33px; }
    .home-hero h1 { margin-bottom: 3px; }
    .home-hero .hero-room { object-position: -50px 100%; }
}
@media (max-width: 479px) {
    .home-hero { padding-bottom: 125px; }
    .home-hero-inner { padding: 0; }
    .home-hero-text { align-items: stretch; margin-top: 125px; }
    .home-kicker { align-self: stretch; margin-top: 16px; padding-left: 25px; font-size: 44px; }
    .home-tagline { width: 100%; margin: -5px 0 0; padding-left: 80px; }
    .home-hero h1 { margin-top: 5px; font-size: 20px; line-height: 35px; }
    .home-underline { width: 35px; margin-top: -5px; }
    .home-hero .hero-room { display: none; }
    .home-hero .hero-mobile { position: relative; z-index: 2; display: block; width: 100%; }
}
/* Text pages (privacy, cookies) have the home page's hero, with the page title (the slogan's script font, bold, at its
   size) in place of the slogan, and 56px more room under it. */
.page-hero.home-hero { padding-bottom: 455px; }
.page-hero .home-kicker { margin-top: 0; font-weight: 700; font-size: 78px; line-height: 1.4; }
@media (max-width: 1120px) { .page-hero.home-hero { padding-bottom: 272px; } }
@media (max-width: 767px) { .page-hero.home-hero { padding-bottom: 397px; } .page-hero .home-kicker { text-align: center; } }
@media (max-width: 479px) {
    .page-hero.home-hero { padding-bottom: 148px; }
    .page-hero .home-kicker { margin-top: 16px; font-size: 44px; text-align: left; }
}
.home-about { padding: 0 0 160px; background: #fff; text-align: center; }
.home-rooms { padding-top: 44px; background: #fff; }
.home-rooms-band { position: relative; padding: 35px 0 50px; background: var(--purple-light); text-align: center; }
/* Its scalloped top edge: lilac bumps on the white section above. */
.home-rooms-band::before { content: ""; position: absolute; left: 0; right: 0; top: -44px; height: 44px; background: url(/wp-content/uploads/2021/09/category-divider-pichi-1.png) no-repeat left bottom / auto 44px; }
/* The room cards as WordPress drew them: 221 x 160 (40% of the screen on phones), the picture always at its full
   138px height, rising out of the top of the card, with the name over its lower part on smaller screens. Balloons lie
   behind the cards at the left, and hang over the bottom edge of the band at the right. */
.home-rooms { overflow-x: clip; }
.home-rooms-grid { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 65px -20px 0; }
.home-rooms-grid .room-card { position: relative; z-index: 3; margin: 0 0 30px; }
.home-rooms-grid .room-card > span:last-child { padding: 0 10px; }
.home-rooms-bubbles { position: absolute; left: -180px; top: -115px; width: 357px; max-width: none; pointer-events: none; }
.home-rooms-bottom { position: relative; background: var(--lavender) url(/wp-content/uploads/2021/09/category-divider-bottom-pichi-1.png) repeat-x left top / auto 44px; height: 60px; }
.home-rooms-bottom img:first-child { display: none; }
.home-rooms-bubbles-right { position: absolute; right: 0; top: -180px; z-index: 2; width: 211px; }
@media (max-width: 1199px) {
    .home-rooms-grid .room-card { margin: 10px 10px 30px; }
    .home-rooms-grid .room-art { height: 120px; margin-top: -40px; }
    .home-rooms-grid .room-card > span:last-child { padding-top: 20px; }
}
@media (max-width: 1170px) { .home-rooms-grid { justify-content: center; margin: 65px 0 0; } .home-rooms-bubbles { left: -200px; } }
@media (max-width: 991px) { .home-rooms-grid .room-card > span:last-child { padding-top: 10px; } }
@media (max-width: 767px) {
    .home-rooms-grid .room-card { margin: 5px 5px 20px; font-size: 16px; }
    .home-rooms-grid .room-art { margin-top: -30px; }
    .home-rooms-grid .room-card > span:last-child { padding-top: 0; }
    /* Phones: half of the scalloped top edge shows, and a cloud edge ends the band instead of the scallops. */
    .home-rooms { padding-top: 22px; }
    .home-rooms-band::before { top: -22px; height: 22px; background-position: left top; }
    .home-rooms-bottom { height: auto; background-image: none; }
    .home-rooms-bottom img:first-child { display: block; position: relative; z-index: 1; width: 100%; margin-top: -75px; }
    .home-rooms-bubbles-right { top: -42px; width: 106px; }
}
@media (max-width: 575px) {
    .home-rooms-grid .room-card { width: 40vw; height: 32vw; font-size: 14px; }
    .home-rooms-grid .room-art { height: 100px; }
}
@media (max-width: 479px) { .home-rooms { margin-top: 78px; } }
.home-blog { padding: 120px 0 80px; text-align: center; }
.home-blog .cards { margin-top: 60px; text-align: left; }
.home-blog .pill-button { margin-top: 40px; }
/* The home sections' titles and intros at WordPress's sizes for each screen width. */
.home-about .section-title, .home-blog .section-title { font-size: 78px; line-height: 1.6; }
.home-rooms .section-title { font-size: 78px; line-height: 137px; }
.home-about .home-intro { max-width: 791px; font-size: 16px; }
.home-rooms .home-intro { max-width: 770px; margin-top: 20px; font-size: 20px; }
.home-blog .home-intro { max-width: 819px; font-size: 20px; }
@media (max-width: 991px) {
    .home-about .home-intro { max-width: 67%; }
    .home-rooms .home-intro { max-width: 90%; }
    .home-blog .home-intro { max-width: 70%; }
}
@media (max-width: 767px) {
    .home-about .section-title, .home-blog .section-title, .home-rooms .section-title { font-size: 40px; line-height: 1.6; }
    .home-rooms .section-title { line-height: 1.5; }
    .home-about .home-intro, .home-rooms .home-intro { font-size: 18px; }
    .home-about .home-intro { max-width: none; }
    .home-blog .home-intro { max-width: none; margin-left: -20px; margin-right: -20px; font-size: 14px; }
}
@media (max-width: 479px) {
    .home-about .section-title, .home-blog .section-title, .home-rooms .section-title { font-size: 29px; }
    .home-about .home-intro, .home-rooms .home-intro { font-size: 14px; }
}

/* ---------- Blog ---------- */

.blog-hero { padding: 150px 0 260px; }
.blog-hero .section-title { margin-top: 19px; }
@media (max-width: 767px) { .blog-hero { padding-top: 100px; } .blog-hero .section-title { margin-top: 0; } }
@media (max-width: 479px) { .blog-hero { padding-top: 78px; } }
/* The two balloons hang beside the title, their strings ending on the featured article's frame. */
.blog-clouds { position: relative; z-index: 3; width: 100%; margin: -42px 0 -25px; }
.blog-clouds img { width: 200px; height: 200px; margin: 0 -50px; }
@media (max-width: 1120px) { .blog-clouds img { margin: 0; } }
.blog-featured { position: relative; z-index: 2; display: flex; gap: 24px; width: 100%; padding: 31px; border: 2px solid var(--purple-light); border-radius: 20px; background: var(--purple); text-align: left; }
.blog-featured-photo { flex: 0 0 337px; }
.blog-featured-photo img { display: block; width: 100%; height: 262px; border-radius: 18px; object-fit: cover; }
.blog-featured-text { flex: 1; color: #fff; text-shadow: var(--shadow-text); }
.blog-featured-text .pill { margin: 0; }
.blog-featured-date { margin: 0 0 10px; font-size: 14px; }
.blog-featured h1 { margin: 10px 0; font-family: Poppins, sans-serif; font-weight: 700; font-size: 22px; line-height: 1.6; text-shadow: var(--shadow-text); }
.blog-featured h1 a { color: #fff; }
.blog-featured-text > p:not(.blog-featured-date) { font-size: 16px; line-height: 1.9; }
.blog-featured .card-author { border-top-color: rgba(255, 255, 255, .8); }
.blog-featured .card-author img { background: rgba(255, 255, 255, .81); }

/* ---------- Over ons ---------- */

/* Hero: the title, then the office illustration with bubbles behind it and the hand-written note beside it (above it
   on phones), and the paw button on the wave, at WordPress's sizes for each screen width. */
.about-hero { overflow: visible; padding: 189px 0 0; }
.about-hero .section-title h1 { margin: 0; font-size: 78px; }
.about-art { display: flex; align-items: flex-start; width: 100%; margin-top: 68px; }
.about-picture { position: relative; flex: none; width: 800px; margin-left: 70px; }
.about-room { position: relative; display: block; width: 100%; max-width: none; }
.about-bubbles { position: absolute; left: 30px; top: 0; width: auto; height: 250px; }
.about-note { position: relative; z-index: 2; flex: none; display: flex; flex-direction: column; align-items: center; width: 330px; margin-left: -70px; color: #fff; text-shadow: var(--shadow-text); text-align: center; }
.about-note-small { font-size: 18px; line-height: 1.8218; }
.about-note-big { margin-top: 19px; font-family: Pacifico, cursive; font-size: 31px; line-height: 1.465; }
.about-note img { align-self: flex-start; width: 278px; margin-left: -10px; }
.about-paw { position: relative; z-index: 3; width: 94px; margin: -80px auto -70px; }
@media (max-width: 1120px) {
    .about-picture { width: 650px; margin-left: 127px; }
    .about-bubbles { left: -27px; width: 357px; }
    .about-paw { margin-bottom: 146px; }
}
@media (max-width: 991px) {
    .about-hero { padding-top: 114px; }
    /* The picture moves left when the note would run off the screen (WordPress's page was wider than the screen there). */
    .about-picture { width: 550px; margin-left: clamp(-60px, calc(100% - 770px), 90px); }
    .about-bubbles { left: -90px; width: 270px; height: 150px; }
    .about-note { width: 290px; }
    .about-note-big { font-size: 18px; }
    .about-note img { width: auto; height: 130px; margin: 9px 0 0 20px; }
    .about-paw { margin-bottom: 246px; }
}
@media (max-width: 767px) {
    .about-hero { padding-top: 120px; }
    .about-art { flex-direction: column-reverse; align-items: center; margin-top: 44px; }
    .about-picture { width: 550px; max-width: 100%; margin: 40px 0 0; }
    .about-bubbles { left: -15%; top: 25%; width: 357px; }
    .about-note { width: 80%; margin: 0; }
    .about-note-small { font-size: 14px; }
    .about-note img { display: none; }
    .about-paw { margin: -70px auto 30px; }
}
@media (max-width: 479px) {
    .about-art { margin-left: -20px; margin-right: -20px; width: auto; align-self: stretch; }
    .about-picture { width: 100%; }
    .about-bubbles { left: -25%; top: 14%; }
    .about-paw { margin-bottom: 76px; }
}
/* The three promises lie on the lavender page, as on WordPress. */
.about-promises { padding: 155px 0 75px; }
.about-promises .container { display: flex; justify-content: space-between; gap: 30px; }
.promise { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; }
.promise img { width: 105px; }
.promise-title { font-family: Pacifico, cursive; font-size: 26px; line-height: 46px; color: var(--text); }
.promise p { max-width: 350px; margin: 0; font-size: 18px; line-height: 1.8218; letter-spacing: .02em; color: var(--text); }
@media (max-width: 1120px) { .promise p { max-width: none; } }
@media (max-width: 991px) {
    .about-promises .container { flex-wrap: wrap; gap: 0; }
    .promise { flex: none; width: 48%; }
    .promise:last-child { width: 50%; margin: 0 auto; padding-top: 22px; }
}
@media (max-width: 767px) {
    .promise, .promise:last-child { width: 90%; margin: 0 auto; padding-top: 0; }
    .promise + .promise { margin-top: 10px; }
    /* Phones: the title on its own line, the two balloons under it at the sides. */
    .about-team-title { flex-wrap: wrap; margin-bottom: 5px; }
    .about-team-title .section-title { order: -1; width: 100%; margin-bottom: 6px; }
}
@media (max-width: 479px) {
    .promise img { width: auto; height: 62px; }
    .promise p { font-size: 14px; }
}
.about-team { background: none; }
.about-team-top, .about-team-bottom > img:first-child { display: block; width: 100%; height: auto; }
.about-team-band { padding: 76px 0 80px; background: var(--purple); }
@media (max-width: 767px) { .about-team-band { padding-top: 69px; } }
.about-team-title { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 40px; }
.about-team-title > img { width: 200px; }
.about-team .section-title { font-size: 78px; line-height: 137px; }
.team-card { display: flex; margin-bottom: 20px; padding: 31px; border: 2px solid var(--purple-light); border-radius: 20px; background: var(--purple);
    box-shadow: -30px -30px 80px #9680e7, 30px 30px 80px rgba(25, 29, 48, .1), inset 4px 4px 20px #8874d2; color: #fff; text-shadow: var(--shadow-text); }
.team-photo { flex: none; align-self: flex-start; width: 300px; max-width: 30%; height: auto; margin-right: 40px; border-radius: 15px; }
.team-text { flex: 1; }
.team-role { font-size: 16px; letter-spacing: .02em; }
.team-name { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #fff; font-size: 24px; font-weight: 700; letter-spacing: .02em; }
.team-name svg { width: 30px; height: 30px; fill: #fff; }
.team-text p { margin: 0; font-size: 18px; line-height: 1.8218; letter-spacing: .02em; }
.about-team-bottom { position: relative; background: var(--lavender); }
.about-team-bubbles { position: absolute; right: 0; top: -120px; width: 140px; }
.about-contact { padding: 74px 0 80px; text-align: center; }
.about-contact .section-title { font-size: 78px; line-height: 1.6; }
.about-contact .home-intro { max-width: 791px; font-size: 16px; }
@media (max-width: 767px) {
    .about-team .section-title { font-size: 40px; line-height: 1.5; }
    .about-contact { padding-top: 144px; }
    .about-contact .section-title { font-size: 35px; }
    .about-contact .home-intro { font-size: 18px; }
}
@media (max-width: 479px) {
    .about-team .section-title, .about-contact .section-title { font-size: 29px; }
    .about-contact .home-intro { font-size: 14px; }
    .team-name { font-size: 14px; }
}

/* ---------- Contact ---------- */

/* Contact: the hero's spacing, the wave pulled up over its bottom and the balloons at the right as WordPress had them
   at each screen width. The facts stay above the balloons, which cover the social icons on WordPress's phone page. */
.contact-hero { padding: 175px 0 344px; }
.contact-hero .section-title { font-size: 78px; line-height: 137px; }
.contact-facts { display: flex; margin-top: 80px; }
.contact-facts > div { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 0 20px; border-right: 1px solid #fff; text-shadow: var(--shadow-text); }
.contact-facts > div:last-child { border-right: 0; }
.contact-facts b { font-size: 20px; line-height: 1.5; }
.contact-facts > div:last-child b { margin-bottom: 15px; }
.contact-facts a, .contact-facts span { color: #fff; font-size: 15px; }
.contact-facts .socials { margin-top: 0; }
@media (max-width: 1120px) {
    .contact-hero { padding: 129px 0 216px; }
    .contact-facts a, .contact-facts span { font-size: 16px; }
}
@media (max-width: 991px) { .contact-hero { padding-top: 121px; } }
.contact-sheet { position: relative; margin-top: -26vh; }
.contact-wave { height: 250px; background: url(/wp-content/uploads/2021/08/contact-top-bck.svg) no-repeat left bottom / cover; }
.contact-cloud { position: absolute; right: 0; top: -130px; z-index: 1; width: 244px; }
.contact-question { min-height: 200px; padding: 0 20px 60px; background: #fff; text-align: center; }
.contact-question h1 { margin: 40px 0 0; font-size: 36px; color: var(--text); }
/* In place of WordPress's contact form (as wide as its send button, in its colour). */
.contact-mail { display: inline-block; margin-top: 30px; padding: 8px 36px; border-radius: 40px; background: var(--purple); color: #fff; font-size: 16px; line-height: 1.6; }
.contact-mail:hover { background: #a473d4; }
.contact-sheet { background: linear-gradient(transparent 250px, #fff 250px); }

@media (max-width: 991px) {
    .team-card { flex-direction: column; }
    .team-photo { max-width: 100%; margin: 0 0 15px; }
}

@media (max-width: 767px) {
    .home-about { padding: 60px 0 160px; }
    .home-blog { padding: 60px 0; }
    .blog-featured { flex-direction: column; padding: 16px; }
    .blog-featured-photo { flex: none; }
    .blog-clouds { margin-top: 0; }
    .blog-clouds img { width: 120px; height: 120px; }
    .about-hero .section-title h1 { font-size: 40px; }
    .about-promises { padding-top: 35px; }
    .about-promises .container { flex-direction: column; }
    .about-team-title > img { width: auto; height: 80px; }
    .team-card { padding: 13px; }
    /* Phones: role and name centred above two short lines, with the LinkedIn button between them. */
    .team-role { display: block; text-align: center; }
    .team-name { position: relative; flex-direction: column; margin-bottom: 0; padding-bottom: 0; border-bottom: 0; font-size: 16px; text-align: center; }
    .team-name::after { content: ""; width: 152px; height: 1px; margin: 32px auto 30px; background: linear-gradient(90deg, #fff 40px, transparent 40px 112px, #fff 112px); }
    .team-name a { position: absolute; left: 50%; bottom: 13px; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; transform: translateX(-50%); }
    .team-name svg { width: 22px; height: 22px; fill: var(--purple); }
    .team-text p { font-size: 14px; }
    .contact-hero { padding: 132px 0 309px; }
    .contact-hero .section-title { font-size: 40px; line-height: 1.5; }
    .contact-facts { flex-direction: column; }
    .contact-facts > div { margin-bottom: 30px; border-right: 0; }
    .contact-facts > div:last-child { margin-bottom: 0; }
    .contact-question h1 { font-size: 30px; }
    .page-sheet, .is-page .page-text { background: #fff; }
}
.page-sheet { background: #fff; }
@media (max-width: 479px) {
    .home-about { padding-top: 68px; }
    /* The blog's featured article, as on WordPress: the frame nearly as wide as the screen, a smaller excerpt, and no
       date or title (the title stays readable for screen readers). */
    .blog-featured { width: calc(100% + 30px); margin: 0 -15px; padding: 34px 10px; }
    .blog-featured-photo img { height: 267px; }
    .blog-featured-date { display: none; }
    .blog-featured h1 { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .blog-featured-text > p:not(.blog-featured-date) { font-size: 14px; line-height: 1.82; }
    .contact-hero { padding: 86px 0 270px; }
    .contact-hero .section-title { font-size: 29px; }
    .contact-facts { margin-top: 37px; }
    .contact-facts > div:not(:last-child) > :nth-child(2) { margin-bottom: 32px; }
    .contact-facts .socials { margin-top: 11px; }
    .contact-facts > div:nth-child(2) { margin-bottom: 0; }
}

/* WordPress button blocks (shop links on /inductie-of-keramisch/): WordPress's default dark grey pill, half as wide as
   the text, on the left. Their "centre" and purple colour settings had no effect on WordPress, so they have none here. */
.content .wp-block-buttons { margin: 0 0 1em; }
.content .wp-block-button { display: inline-block; width: calc(50% - .25em); font-size: 18px; }
.content .wp-block-button__link { display: block; padding: calc(.667em + 2px) calc(1.333em + 2px); border-radius: 9999px; background: #32373c; color: #fff;
    font-size: 1.125em; line-height: 32.76px; text-align: center; }