/* Praktijkhuis Olea */

/* Baloo 2 (github.com/EkType/Baloo2) with only its Latin letters, a third of the full font, which also
   has Devanagari. To cut a new weight the same way:
   pyftsubset baloo2-400.woff2 --flavor=woff2 --layout-features='*' --name-IDs='*' --unicodes="U+0000-02FF,
     U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2000-206F,U+20A0-20C0,U+2113,U+2122,
     U+2191,U+2193,U+2212,U+2215,U+2C60-2C7F,U+A720-A7FF,U+FEFF,U+FFFD" */
@font-face {
  font-family: "Baloo 2";
  font-weight: 400;
  font-display: fallback;
  src: url("../fonts/baloo2-400.woff2") format("woff2");
}
@font-face {
  font-family: "Baloo 2";
  font-weight: 500;
  font-display: fallback;
  src: url("../fonts/baloo2-500.woff2") format("woff2");
}
@font-face {
  font-family: "Baloo 2";
  font-weight: 600;
  font-display: fallback;
  src: url("../fonts/baloo2-600.woff2") format("woff2");
}
@font-face {
  font-family: "Baloo 2";
  font-weight: 700;
  font-display: fallback;
  src: url("../fonts/baloo2-700.woff2") format("woff2");
}

:root {
  --cream: #f9f7f5; /* page surface */
  --sand: #f2f0e9; /* bands, cards */
  --frame: #dad8b1; /* frame around the page */
  --green: #bab86c; /* headings */
  --olive: #aba35e;
  --khaki: #9d8d50; /* links */
  --bronze: #8f7842; /* buttons, menu */
  --brown: #806234; /* body text */
  --dark: #554630;
  --blue: #4682b4; /* "Maak een afspraak" */
  --blue-dark: #0056cc;
  --closed: #c0574f; /* the dot before "Voorlopig geen nieuwe intakes" */

  --space-30: clamp(1.5rem, 5vw, 2rem);
  --space-40: clamp(1.8rem, 0.415rem + 2.885vw, 3rem);
  --space-50: clamp(2.5rem, 8vw, 4.5rem);
  --gap: 1.5rem;

  --text-small: clamp(0.875rem, 0.83rem + 0.227vw, 1rem);
  --text-medium: clamp(1rem, 0.955rem + 0.227vw, 1.125rem);
  --text-large: clamp(1.75rem, 1.705rem + 0.227vw, 1.875rem);
  --text-x-large: 2.25rem;

  /* Side padding that keeps content at most 1000px wide and centred. */
  --content: 1000px;
  --gutter: max(var(--space-30), calc((100% - var(--content)) / 2));

  /* The sticky header is as tall as these two together: the logo is taller than the menu at every width,
     and on phones the menu opens over the page. Once the page scrolls, the logo shrinks to its small
     height (see .site-header below). */
  --header-padding: 14px; /* above and below the logo */
  --logo-height: 120px;
  --logo-height-small: 64px;

  interpolate-size: allow-keywords;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-padding-top: calc(2 * var(--header-padding) + var(--logo-height)); /* anchor targets start right under the sticky header */
}
/* Where the header shrinks on scrolling, a jump to an anchor lands under the shrunken header, in which
   the menu (on a computer) is a little taller than the small logo */
@supports (animation-timeline: scroll()) {
  html {
    scroll-padding-top: calc(2 * var(--header-padding) + var(--logo-height-small) + 12px);
  }
}
/* A jump within the page (such as the Aanbod page's cards and buttons back up) glides there */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  padding: 5px;
  background: var(--frame);
  color: var(--brown);
  font-family: "Baloo 2", system-ui, sans-serif;
  /* Text grows with the height of the window, within limits: never tiny in a short window or on a phone
     held sideways, never huge on a tall monitor. */
  font-size: clamp(0.9375rem, 2vh, 1.375rem);
  line-height: 1.6;
}

img {
  max-width: 100%;
  height: auto;
}

picture {
  display: contents;
}
/* Without this, a <source> counts as an (empty) item in flex and grid layouts and adds a gap. */
source {
  display: none;
}

a {
  color: var(--khaki);
  text-decoration: none;
}
a:hover {
  color: #000;
}
a:focus-visible {
  text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--green);
  font-weight: 600;
  line-height: 1.4;
}
/* Page title, section, sub-head */
h1 {
  font-size: var(--text-x-large);
}
h2 {
  font-size: var(--text-large);
}
h3,
h4,
h5,
h6 {
  font-size: var(--text-medium);
  font-weight: 700;
  text-transform: uppercase;
}

p,
ul,
ol,
table,
figure {
  margin: 0;
}

/* Text helpers used in page content */
.center {
  text-align: center;
}
.small {
  font-size: var(--text-small);
}
.medium {
  font-size: var(--text-medium);
}
.large {
  font-size: var(--text-large);
}
.x-large {
  font-size: var(--text-x-large);
}
.lead {
  font-size: clamp(0.984rem, 0.796rem + 0.938vw, 1.5rem);
  line-height: 1.1;
}
.lead-medium {
  font-size: clamp(1.039rem, 0.835rem + 1.02vw, 1.6rem);
}
.lead-large {
  font-size: clamp(1.146rem, 0.908rem + 1.189vw, 1.8rem);
}
.note {
  font-style: italic;
}

/* An icon at the start of a link (partials/icons.njk), as big as the letters */
.icon {
  width: 1em;
  height: 1em;
  margin-inline-end: 0.5em;
  vertical-align: -0.125em;
}
/* Read by screen readers and search engines, not shown */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0 !important;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The skip link (layouts/base.njk) sits off-screen; with focus it appears as a pill in the page's top left
   corner, above the header. Absolutely positioned, so it never shifts the layout. */
.skip-link {
  position: absolute;
  top: 1rem;
  left: -9999px;
  z-index: 20;
  padding: 0.5em 1.25em;
  background: var(--sand);
  border-radius: 9999px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
  color: var(--brown);
  font-weight: 500;
}
.skip-link:focus {
  left: 1.5rem;
}
.skip-link:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
  text-decoration: none;
}

/* ---------- Page frame, header, footer ---------- */

.page {
  position: relative; /* the skip link is placed within the page's frame */
  max-width: 1200px;
  margin-inline: auto;
  background: var(--cream);
  border-radius: 25px;
  overflow-x: clip;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: var(--header-padding) 25px var(--header-padding) 22px;
  background: var(--cream);
  border-radius: 25px 25px 0 0;
}
/* While the page scrolls its first 160px, the logo shrinks and the header gets a faint shadow, so it takes
   less of the screen once it sticks. Driven by the scroll position itself, without a script; a browser
   without scroll-driven animations keeps the full header. The menu is not touched. Only the logo's box
   is animated in size: the image and the header's height follow from it, so they can't fall out of step.
   The header keeps its place in the page all the same: a margin under it grows by what the logo loses,
   so what follows doesn't move up by itself. An anchor's place on the page then doesn't depend on how
   far the page was scrolled, and a gliding jump to it, which works out where to go when it starts, lands
   under the shrunken header. (Where the menu is a little taller than the small logo, the header loses a
   little less, and what follows moves down those few pixels instead: never up under the header.) */
@supports (animation-timeline: scroll()) {
  .site-header,
  .site-logo {
    animation: linear both;
    animation-timeline: scroll(root);
    animation-range: 0 160px;
  }
  .site-header {
    animation-name: shrink-header;
  }
  .site-logo {
    animation-name: shrink-logo;
  }
}
@keyframes shrink-header {
  to {
    margin-bottom: calc(var(--logo-height) - var(--logo-height-small));
    box-shadow: 0 10px 14px -12px rgb(0 0 0 / 0.25);
  }
}
@keyframes shrink-logo {
  to {
    height: var(--logo-height-small);
  }
}
.site-header-inner {
  display: flex;
  align-items: center; /* the menu centred on the logo, whatever the logo's height */
  justify-content: space-between;
  gap: 1rem;
}
/* The logo's box sets the header's height; the image fills the box. The box keeps the full logo's
   width even when the image shrinks (see below), so the menu never gains room. Where the window is
   too narrow for both, the box gives way and the image shrinks inside it: the menu never wraps. */
.site-logo {
  flex: 0 1 auto;
  width: calc(var(--logo-height) * 3335 / 1061); /* the logo's proportions */
  min-width: 0;
  height: var(--logo-height);
}
.site-logo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The menu stays on one line and keeps its width; the button is simply its last item. Short of room,
   the logo gives way, not the menu. */
.site-nav {
  flex: none;
}
.site-nav ul {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
  padding: 0 10px 0 0;
  list-style: none;
}
.site-nav a:not(.cta) {
  display: block;
  padding: 0 10px;
  color: var(--bronze);
  font-size: 16px;
  line-height: 40px;
  text-transform: uppercase;
}
.site-nav li + li {
  margin-left: 10px;
}
/* The button has no inner padding like the links, so it gets that 10px as margin: text to button is
   then as wide a gap as text to text */
.site-nav li + .site-nav-cta {
  margin-left: 20px;
}
.site-nav a:not(.cta):hover,
.site-nav a[aria-current="page"] {
  color: var(--dark);
  text-decoration: none;
}
.site-nav-cta .cta {
  margin-block: 8px;
  padding: 16px 18px;
  line-height: 1;
}
.nav-toggle {
  display: none;
}

/* Top to bottom: two columns (where, how to reach us) as wide as their text, spread over the width
   with the same room on the outside as between them; then, centred, the crisis strip and the fine
   print */
.site-footer {
  padding: var(--space-30) var(--gutter);
  line-height: 1.5;
}
.site-footer-columns {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: space-around;
  gap: var(--space-30) var(--space-50);
}
.site-footer-heading {
  margin-bottom: 0.5em;
  font-weight: 700;
}
.site-footer address {
  font-style: normal;
}
.site-footer-links {
  padding: 0;
  list-style: none;
}
.site-footer address + .site-footer-links {
  margin-top: 1em;
}
/* A compact strip under the columns, for someone who can't wait for an appointment: the question,
   then the numbers, separated by dots */
.site-footer-crisis {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: fit-content;
  column-gap: 0.5em;
  margin: var(--space-50) auto 0;
  padding: 0.5em 1.25em;
  background: var(--sand);
  border-radius: 9999px;
  font-size: var(--text-small);
}
.site-footer-crisis > a + a::before,
.site-footer-legal > * + *::before {
  content: "·";
  margin-right: 0.5em;
  color: var(--brown);
}
/* The practice's name, its VAT number and the privacy link, in one small line */
.site-footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 0.5em;
  margin-top: var(--space-30);
  font-size: var(--text-small);
  text-align: center;
}

/* The menu folds behind a button where the logo would have to give way too much */
@media (max-width: 1079px) {
  .nav-toggle {
    display: block;
    width: 40px;
    height: 40px;
    margin-right: 12px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
  }
  .nav-toggle span,
  .nav-toggle span::before,
  .nav-toggle span::after {
    display: block;
    width: 26px;
    height: 2px;
    margin-inline: auto;
    background: var(--khaki);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }
  .nav-toggle span {
    position: relative;
  }
  .nav-toggle span::before,
  .nav-toggle span::after {
    content: "";
    position: absolute;
    left: 0;
  }
  .nav-toggle span::before {
    top: -8px;
  }
  .nav-toggle span::after {
    top: 8px;
  }
  .nav-toggle[aria-expanded="true"] span {
    background: transparent;
  }
  .nav-toggle[aria-expanded="true"] span::before {
    transform: translateY(8px) rotate(45deg);
  }
  .nav-toggle[aria-expanded="true"] span::after {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* The menu fades in and out, its items sliding in from the left as it opens and back out to the
     left as it closes. Closing, the menu itself fades only once its items are on their way, or they
     would vanish with it before their slide shows. Hidden, its links also leave the tab order;
     visibility waits for the fade-out to finish. */
  .site-nav {
    position: absolute;
    /* Starts at the bottom of the logo's box, taking over the header's bottom padding; the logo's image
       has whitespace under its tagline, so with this little padding the first link sits as far below
       the logo as the links are apart. */
    top: calc(100% - var(--header-padding));
    left: 0;
    right: 0;
    padding: 4px 25px 1rem;
    background: var(--cream);
    box-shadow: 0 12px 16px -12px rgb(0 0 0 / 0.25);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease 0.1s, visibility 0s 0.3s;
  }
  .site-nav.is-open {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }
  .site-nav li {
    opacity: 0;
    transform: translateX(-1.5rem);
    transition: opacity 0.2s ease-in, transform 0.2s ease-in;
  }
  .site-nav.is-open li {
    opacity: 1;
    transform: none;
    transition: opacity 0.35s ease-out, transform 0.35s ease-out;
  }
  @media (prefers-reduced-motion: reduce) {
    .site-nav,
    .site-nav li,
    .site-nav.is-open li {
      transition: none;
    }
  }
  .site-nav ul {
    display: block;
    padding: 0;
    text-align: right;
  }
  .site-nav li + li {
    margin-left: 0;
  }
  /* Under each other, the button needs more room above it than beside the links: the gap from the
     last link's text to the button then matches the gap between the links' texts */
  .site-nav-cta .cta {
    margin-top: 14px;
  }
}
@media (max-width: 768px) {
  .site-footer-columns {
    grid-template-columns: 1fr;
  }
  .site-footer-crisis {
    border-radius: 1.25rem;
  }
  /* The question on a line of its own, the numbers together under it; likewise the privacy link
     under the name and VAT number, so no line starts with a dot */
  .site-footer-crisis > strong:first-child,
  .site-footer-legal > a {
    flex-basis: 100%;
    text-align: center;
  }
  .site-footer-legal > a::before {
    content: none;
  }
}

/* ---------- Content blocks ---------- */

main {
  padding-top: 0.625rem; /* the header already ends with its own padding */
}
main > * {
  padding-inline: var(--gutter);
}
main > :not(.band) {
  padding-block: var(--space-30);
}
main > .reveal + .reveal {
  padding-top: 0.625rem;
}
main > section:not(.band) {
  padding-block: var(--space-50) var(--space-30);
}
/* Plain sections (Aanbod) are set a little wider apart than the bands between them */
main > section:not(.band) > .reveal > * + * {
  margin-block-start: var(--space-30);
}

/* Consistent vertical rhythm between sibling blocks */
main :is(.reveal, section, .vacancy, .inset, .profile-bio) > * + * {
  margin-block-start: var(--gap);
}
/* Opening block of a page: more room under its heading */
main .intro > h1 + * {
  margin-block-start: var(--space-40);
}
/* A band with a little less room inside (lists of vacancies, the Aanbod page) */
.band.compact {
  padding-block: calc(50px + var(--space-30));
}
/* List of vacancies: a heading with its button, well apart from the next one */
main .reveal > .vacancy + .vacancy {
  margin-block-start: calc(2 * var(--space-30));
}
main .vacancy > .buttons {
  margin-block-start: 10px;
}
/* A vacancy page's heading opens with the job it is for, on a line of its own */
.vacancy-label {
  display: block;
  color: var(--bronze);
  font-size: var(--text-medium);
  font-weight: 700;
  text-transform: uppercase;
}
/* Indented group of blocks */
.inset {
  padding-inline: var(--space-30);
}
main .reveal > div.inset {
  margin-block: var(--space-30);
}

/* Sand-coloured band with a wavy top and bottom edge */
.band {
  --wave-top: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 49' preserveAspectRatio='none'%3E%3Cpath fill='%23f2f0e9' d='M0 22Q50 39.125 100 22V50H0Z'/%3E%3C/svg%3E");
  --wave-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 51' preserveAspectRatio='none'%3E%3Cpath fill='%23f2f0e9' d='M0 28Q50 7.375 100 28V0H0Z'/%3E%3C/svg%3E");
  padding-block: calc(50px + var(--space-40));
  background:
    var(--wave-top) top / 100% 50px no-repeat,
    var(--wave-bottom) bottom / 100% 50px no-repeat,
    linear-gradient(var(--sand), var(--sand)) center / 100% calc(100% - 98px) no-repeat;
}

.button {
  display: inline-block;
  padding: calc(0.667em + 2px) calc(1.333em + 2px);
  background: var(--bronze);
  border-radius: 9999px;
  color: var(--cream);
  font-weight: 500;
}
.button:hover,
.button:focus-visible {
  background: #000;
  color: var(--sand);
  text-decoration: none;
}
.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}
.buttons.center {
  justify-content: center;
}
/* A row of buttons that closes a block stands a little further from the text above it */
main .reveal > .buttons {
  margin-block-start: var(--space-30);
}
/* Overview at the top of the Aanbod page: a grid of cards, one per service, each linking to its section
   further down; the activities, in a second grid, carry a small label above them, the core services
   none. The cards share the team cards' look. On a phone they stand two
   abreast with only the service's name and an arrow beside it, so the whole overview fits on the first
   screen; from 480px they also carry a line about the service, centred like the team cards' text, with
   the arrow in a round spot under it, and from 768px stand four abreast. */
.offer-label {
  font-size: var(--text-medium);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}
main > .reveal:has(> h1) + .reveal:has(> .offer-grid) {
  padding-top: var(--space-30); /* on the Aanbod page, the cards a little further under the heading */
}
/* The activities stand well apart from the core services and from the band below them; the label
   belongs to its grid. On a desktop the room grows less than the fluid spacing would have it, so it
   keeps the phone's proportions to the room under the heading. */
main .reveal > .offer-grid + .offer-label {
  margin-block-start: calc(1.5 * var(--space-50));
}
main > .reveal:has(> .offer-label) {
  padding-bottom: var(--space-50);
}
main .reveal > .offer-label + .offer-grid {
  margin-block-start: 1rem;
}
@media (min-width: 768px) {
  main .reveal > .offer-grid + .offer-label {
    margin-block-start: 5rem;
  }
  main > .reveal:has(> .offer-label) {
    padding-bottom: 3.5rem;
  }
  main .reveal > .offer-label + .offer-grid {
    margin-block-start: 1.25rem;
  }
}
.offer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
}
@media (min-width: 768px) {
  .offer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
  }
}
.offer-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem 0.75rem 0.75rem 1.125rem; /* the name well clear of the rounded left edge */
  background: var(--sand);
  border-radius: 30px;
  color: var(--brown);
  overflow-wrap: anywhere;
  hyphens: auto; /* a name too long for its card on a narrow phone breaks at a syllable, when it must */
  transition: transform 0.3s ease, color 0.3s ease;
}
.offer-card:hover,
.offer-card:focus-visible {
  transform: scale(1.04);
  color: #000;
  text-decoration: none;
}
.offer-card > strong {
  color: var(--dark);
  font-size: 0.9rem; /* on a phone a touch smaller, so the longest name fits beside the arrow */
  font-weight: 600;
  line-height: 1.3;
}
.offer-card:hover > strong,
.offer-card:focus-visible > strong {
  color: #000;
}
.offer-card > span {
  display: none;
  font-size: var(--text-small);
}
/* The arrow: a chevron in the to-top button's colour. On a phone it points right, beside the name;
   wider, it points down from a round spot under the text, and on hover is cut out of a green circle,
   like the to-top button's arrow. A card that leads to another page rather than to a section below
   (the home page's, to the Aanbod page) keeps the arrow pointing right there too. */
.offer-card::after {
  content: "";
  width: 0.5rem;
  height: 0.75rem;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath fill='none' stroke='%23bab86c' stroke-width='2' d='M1.5 1l5 5-5 5'/%3E%3C/svg%3E")
      center / 0.5rem 0.75rem no-repeat;
}
@media (min-width: 480px) {
  .offer-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.25rem 1.125rem 1rem;
    text-align: center;
  }
  .offer-card > strong {
    font-size: var(--text-medium);
  }
  .offer-card > span {
    display: block;
    flex: 1; /* the arrow sits at the bottom of every card in a row */
  }
  .offer-card::after {
    flex: none;
    width: 2rem;
    height: 2rem;
    margin-top: 0.25rem;
    border-radius: 9999px;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23bab86c' stroke-width='2' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E")
        center / 0.75rem no-repeat;
    transition: background-color 0.3s ease;
  }
  .offer-card:hover::after,
  .offer-card:focus-visible::after {
    background-color: var(--green);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23f9f7f5' stroke-width='2' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  }
  .offer-card:not([href^="#"])::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath fill='none' stroke='%23bab86c' stroke-width='2' d='M1.5 1l5 5-5 5'/%3E%3C/svg%3E");
    background-size: 0.5rem 0.75rem;
  }
  .offer-card:not([href^="#"]):hover::after,
  .offer-card:not([href^="#"]):focus-visible::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath fill='none' stroke='%23f9f7f5' stroke-width='2' d='M1.5 1l5 5-5 5'/%3E%3C/svg%3E");
  }
}
/* A section's title with a small round button back to the top of the page (Aanbod) */
.section-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.to-top {
  display: grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin-top: calc((var(--text-large) * 1.4 - 2rem) / 2); /* centred on the title's first line */
  border-radius: 9999px;
  color: var(--green);
  transition: background 0.3s ease, color 0.3s ease;
}
/* The arrow: two sides of a square, turned to point up */
.to-top::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.25rem;
  border-top: 2px solid;
  border-left: 2px solid;
  transform: rotate(45deg);
}
/* On hover the arrow is cut out of a circle in the title's colour */
.to-top:hover,
.to-top:focus-visible {
  background: var(--green);
  color: var(--cream);
}

/* "Maak een afspraak" */
.cta {
  display: inline-block;
  padding: 12px 18px;
  background: var(--blue);
  border-radius: 5px;
  color: #fff;
  font-weight: bold;
  transition: background 0.3s ease;
}
.cta:hover,
.cta:focus-visible {
  background: var(--blue-dark);
  color: #fff;
  text-decoration: none;
}
/* The button opens Calendly in its popup (site.js), 900 to 1000px wide on a desktop by Calendly's own
   stylesheet. Calendly's page in it, the choice of appointment type, lays itself out badly in a window
   between 1000 and about 1100px wide: the names come in a narrow column, a few letters per line (seen
   October 2026). Just under 1000px it is fine, as it is on a phone and as the calendar after a choice is,
   so the popup is kept under that. "html" outranks Calendly's rule, whichever stylesheet comes last. */
html .calendly-overlay .calendly-popup {
  max-width: 960px;
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
td,
th {
  padding: 0.5em;
  border: 1px solid;
}

/* Elements slide/fade in when scrolled into view (see site.js) */
.js .reveal {
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.js .reveal-left {
  transform: translateX(-1.5rem);
}
.js .reveal-right {
  transform: translateX(1.5rem);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

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

/* The team's photos as one link to the team page: rows of circles that overlap a little sideways,
   each in a cream ring. The ring is a cream disc on the photo's <picture>, with the round photo on
   top. Not a box-shadow, nor a border with a background on the <img> itself: a browser skips the
   background behind an opaque image, so the photo's anti-aliased edge let the photo it overlaps show
   through as a grey line. */
main > .photo-row {
  --photo: 150px;
  --overlap: 14px;
  --ring: 5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: calc(760px + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--space-30) calc(var(--gutter) + var(--overlap)); /* room for the first and last ring */
  transition: transform 0.3s ease;
}
main > .reveal + .photo-row {
  padding-top: calc(var(--space-50) - var(--space-30));
}
.photo-row picture {
  display: block;
  margin: 0 calc(-1 * (var(--overlap) + var(--ring)));
  padding: var(--ring);
  border-radius: 50%;
  background: var(--cream);
}
.photo-row img {
  display: block;
  width: var(--photo);
  height: var(--photo);
  border-radius: 50%;
  object-fit: cover;
}
.photo-row:hover,
.photo-row:focus-visible {
  transform: scale(1.02);
}
@media (prefers-reduced-motion: reduce) {
  .photo-row {
    transition: none;
  }
}
@media (max-width: 600px) {
  main > .photo-row {
    --photo: 80px;
    --overlap: 8px;
    --ring: 3px;
  }
}

/* ---------- Team ---------- */

main > .wide {
  padding-inline: var(--space-30);
}

/* Doelgroep above the team grid: a dropdown, drawn as a soft pill in the cards' sand colour with a small
   chevron; its label is for screen readers. Only with JavaScript. */
.team-filter {
  display: none;
}
.js .team-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  font-size: var(--text-small);
}
/* The dropdown shares the grid's block (they slide in together); the grid keeps its full distance
   from it, and without JavaScript, when there is no dropdown, keeps none */
main .wide > .team-filter + .team-grid {
  margin-block-start: 0;
}
.js main .wide > .team-filter + .team-grid {
  margin-block-start: var(--space-30);
}
main .team-filter > * {
  margin: 0; /* spaced by the gap, not by the general rhythm between blocks */
}
.team-filter select {
  appearance: none;
  padding: 0.5em 2.4em 0.5em 1.2em;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238f7842' stroke-width='1.5' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E")
      right 1.1em center / 0.75em no-repeat,
    var(--sand);
  border: 0;
  border-radius: 9999px;
  color: var(--dark);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
/* Only where a pointer can hover: on a touch screen the tint would stay after a tap */
@media (hover: hover) {
  .team-filter select:hover {
    background-color: var(--frame);
  }
}
.team-filter select:focus-visible {
  outline: 2px solid var(--bronze);
  outline-offset: 2px;
}
.team-card[hidden] {
  display: none;
}
main .wide > .team-filter-empty {
  margin-block-start: var(--gap);
}

/* Columns of equal width: with plain 1fr, a long word in a card would widen its column */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  align-items: start;
}
@media (min-width: 768px) {
  .team-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 24px;
  }
}
@media (min-width: 1024px) {
  .team-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.team-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 10px 20px;
  background: var(--sand);
  border-radius: 60px;
  color: var(--brown);
  text-align: center;
  overflow-wrap: anywhere; /* a word too long for the card wraps instead of sticking out */
  transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s ease, color 0.3s ease;
}
/* A card also fades in as a .reveal block, whose 1.2s transitions would otherwise slow down the hover */
@media (prefers-reduced-motion: no-preference) {
  .js .team-card {
    transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s ease, color 0.3s ease;
  }
}
.team-card:hover {
  transform: scale(1.05) !important;
  color: #000;
  text-decoration: none;
}
.team-card img {
  width: 100%;
  aspect-ratio: 1;
  margin-bottom: 10px;
  border-radius: 50px;
  object-fit: cover;
}
/* On a phone the cards are narrow, and such round corners would take too much of them: there
   they have the corners of the profile pages' cards */
@media (max-width: 767px) {
  .team-card {
    border-radius: 30px;
  }
  .team-card img {
    border-radius: 22px;
  }
}
main .team-grid .team-card > * {
  margin: 0;
}
.team-card-name {
  font-weight: 600;
}
.team-card-titles {
  font-size: var(--text-medium);
}
.team-card-note {
  font-size: var(--text-small);
  font-style: italic;
}
.team-card-audience {
  color: var(--olive);
  font-size: var(--text-small);
}
.team-card:hover .team-card-audience {
  color: var(--brown);
}

/* ---------- "Voorlopig geen nieuwe intakes" (partials/intake.njk) ---------- */

/* A red dot before the line */
.intake {
  font-size: var(--text-small);
}
.intake::before {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-inline-end: 0.5em;
  border-radius: 50%;
  background: var(--closed);
  vertical-align: 0.05em;
}
.team-card .intake {
  font-weight: 600;
}

/* ---------- Therapist profile ---------- */

/* Two blocks under each other: a sand card with the photo beside who they are and how to reach them,
   then their story with a smaller card beside it for an appointment: the working hours, whether they
   take new clients, and the button. */
main > .profile {
  padding-block: var(--space-30) var(--space-50);
}
main .profile > * + * {
  margin-block-start: var(--space-40);
}
/* The columns of both blocks sit side by side, spaced by their grid's gap, not by the general rhythm
   between blocks (which would push the second column down) */
main :is(.profile-hero, .profile-columns) > * {
  margin-block-start: 0;
}

/* The card's edge is as wide as the appointment card's, so the two cards match; the room that saves
   goes to the photo. The card's corners curve around the photo's, at the same distance all along:
   the photo's radius plus the edge between them. */
.profile-hero {
  display: grid;
  grid-template-columns: minmax(0, 330px) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-40) var(--space-50);
  padding: var(--space-30);
  background: var(--sand);
  border-radius: calc(30px + var(--space-30));
}
/* The photo fills a tall rounded frame; a square photo loses a little of its sides, a tall one a
   little of its top and bottom. */
.profile-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 30px;
  object-fit: cover;
}
.profile-intro > * + * {
  margin-block-start: 1rem;
}
/* On the sand card the usual green would be faint, so the name and titles are bronze */
.profile h1 {
  color: var(--bronze);
  font-size: clamp(2.25rem, 1.5rem + 2.5vw, 3rem);
  line-height: 1.15;
}
.profile-titles {
  color: var(--bronze);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  font-weight: 600;
  line-height: 1.35;
}
/* One soft pill per doelgroep, in the page's colour on the card */
.profile-audience {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-block-start: 1.25rem;
}
.profile-chip {
  padding: 0.2em 0.9em;
  background: var(--cream);
  border-radius: 9999px;
  color: var(--dark);
  font-size: var(--text-small);
  font-weight: 500;
  line-height: 1.5;
}

/* The appointment card is wide enough for the longest mail address on one line from about 1000px */
.profile-columns {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 3fr);
  align-items: start;
  gap: var(--space-40) var(--space-50);
}
main .profile-bio > h2 + * {
  margin-block-start: 1rem;
}
.profile-bio ul,
.profile-bio ol {
  padding-inline-start: 1.5em;
}
/* The appointment card keeps the reader company while they scroll the story, under the sticky header */
.profile-booking {
  position: sticky;
  top: calc(2 * var(--header-padding) + var(--logo-height) + 1rem);
  padding: var(--space-30);
  background: var(--sand);
  border-radius: 30px;
}
@supports (animation-timeline: scroll()) {
  .profile-booking {
    top: calc(2 * var(--header-padding) + var(--logo-height-small) + 12px + 1rem);
  }
}
.profile-card-title {
  color: var(--bronze);
  font-size: var(--text-small);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* The days close together, as one block */
.profile-booking ul {
  margin-block-start: 0.5rem;
  padding: 0;
  list-style: none;
}
.profile-hours {
  line-height: 1.45;
}
.profile-hours li + li {
  margin-block-start: 0.15rem;
}
.profile-booking .note {
  margin-block-start: 0.5rem;
}
/* The button across the top of the card, with the line about new clients above it when it shows */
.profile-booking .intake {
  margin-block-end: 0.75rem;
  font-weight: 600;
}
.profile-booking .cta {
  display: block;
  text-align: center;
}
.profile-booking .cta + .profile-card-title {
  margin-block-start: 1.5rem;
}
/* Mail, phone and website last, each on a line of its own, set like the footer's links (the same
   line height, nothing between the lines), in the titles' bronze */
.profile-booking :is(ul, .note) + .profile-card-title {
  margin-block-start: 1.5rem;
}
.profile-booking .profile-contact {
  margin-block-start: 0.5rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
/* The icon stays on the line with its text, which wraps beside it when it must */
.profile-contact a {
  display: flex;
  align-items: center;
  color: var(--bronze);
}
/* The bronze above outweighs the plain a:hover, so the hover is restated to match the footer's */
.profile-contact a:hover {
  color: #000;
}
.profile-contact .icon {
  flex: none;
}
@media (max-width: 1023px) {
  .profile-hero {
    gap: var(--space-40);
  }
}
@media (max-width: 781px) {
  .profile-hero {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .profile-photo {
    max-width: 360px;
  }
  .profile-audience {
    justify-content: center;
  }
  /* The appointment card right under the profile card, before the story */
  .profile-columns {
    grid-template-columns: 1fr;
  }
  .profile-booking {
    position: static;
    order: -1;
  }
}

/* ---------- Forms ---------- */

.form {
  color: rgb(0 0 0 / 0.85);
  font-size: 16px;
}
main > .reveal:has(> .form) {
  padding-bottom: 1.5rem;
}
.field {
  margin: 0;
  padding: 15px 0;
  border: 0;
}
.field > label,
.field > legend {
  display: block;
  margin-bottom: 15px;
  padding: 0;
  font-weight: 700;
  line-height: 19px;
}
.field input:not([type="radio"]),
.field select,
.field textarea {
  display: block;
  width: 60%;
  height: 43px;
  padding: 0 14px;
  background: #fff;
  border: 1px solid rgb(0 0 0 / 0.25);
  border-radius: 3px;
  color: rgb(0 0 0 / 0.7);
  font: inherit;
}
.field textarea {
  width: 100%;
  height: 120px;
  padding-block: 10px;
  resize: vertical;
}
/* Radio buttons. A legend ignores its fieldset's top padding, hence the margin. */
fieldset.field {
  margin-top: 15px;
  padding-top: 0;
}
fieldset.field label {
  margin-bottom: 0;
  font-weight: 400;
  line-height: 21px;
}
fieldset.field label + label {
  margin-top: 15px;
}
fieldset.field input[type="radio"] {
  width: 16px;
  height: 16px;
  margin: 0 10px 0 1px;
  vertical-align: -3px;
}
.required {
  color: #d63637;
}
.hint {
  margin-top: 5px;
  color: rgb(0 0 0 / 0.55);
  font-size: 14px;
  line-height: 17px;
}
.form button {
  height: 41px;
  margin-top: 10px;
  padding: 0 15px;
  background: var(--khaki);
  border: 0;
  border-radius: 3px;
  color: #fff;
  font: inherit;
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
}
/* Spam trap: kept off-screen so only bots fill it in */
.form-extra {
  position: absolute;
  left: -9999px;
}
.form-notice {
  padding: 1rem 1.25rem;
  background: var(--sand);
  border-radius: 12px;
}
@media (max-width: 600px) {
  .field input:not([type="radio"]),
  .field select {
    width: 100%;
  }
}