/* 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, button text */
  --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;

  --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. */
  --header-padding-top: 25px;
  --logo-height: 120px;

  interpolate-size: allow-keywords;
}

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

html {
  scroll-padding-top: calc(var(--header-padding-top) + var(--logo-height)); /* anchor targets start right under the sticky header */
}

body {
  margin: 0;
  padding: 5px;
  background: var(--frame);
  color: var(--brown);
  font-family: "Baloo 2", system-ui, sans-serif;
  font-size: 2vh;
  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;
  text-decoration: underline dashed;
}
a:focus-visible {
  text-decoration: underline dashed;
}

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;
}
/* A row of links to the practice's pages elsewhere, each just its icon. Exactly one line of text tall
   (icon plus the room above it), so the footer's two columns end level. */
.social {
  display: inline-flex;
  gap: 0.75em;
  margin-block-start: 0.25em;
  vertical-align: top;
}
.social .icon {
  display: block;
  width: 1.25em;
  height: 1.25em;
  margin: 0;
}

/* 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;
}

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 20;
  padding: 0.5rem 1rem;
  background: var(--cream);
}

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

.page {
  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-top) 25px 0 22px;
  background: var(--cream);
  border-radius: 25px 25px 0 0;
}
.site-header-inner {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
/* On narrow screens the logo shrinks inside a box that keeps the header's full height */
.site-logo {
  flex: 0 1 auto;
  min-width: 0;
}
.site-logo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: var(--logo-height);
  object-fit: contain;
}

/* The menu wraps where it runs out of room; the button is simply its last item */
.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
  padding: 4px 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;
}
.site-nav a:not(.cta):hover,
.site-nav a[aria-current="page"] {
  color: var(--dark);
  text-decoration: none;
}
.site-nav-cta .cta {
  margin-block: 12px;
  padding: 16px 18px;
  line-height: 1;
}
.nav-toggle {
  display: none;
}

.site-footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: var(--space-30) var(--gutter);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .site-header-inner {
    align-items: center;
  }
  .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. Hidden, its links also leave the tab order;
     visibility waits for the fade-out to finish. */
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: 0.5rem 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, visibility 0s 0.2s;
  }
  .site-nav.is-open {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }
  @media (prefers-reduced-motion: reduce) {
    .site-nav {
      transition: none;
    }
  }
  .site-nav ul {
    display: block;
    padding: 0;
    text-align: right;
  }
  .site-nav li + li {
    margin-left: 0;
  }

  .site-footer {
    grid-template-columns: 1fr;
    row-gap: var(--space-50);
  }
}

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

main {
  padding-top: 1.25rem;
}
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);
}
main > .reveal:has(> .jump-links) {
  padding-bottom: 0;
}
main .reveal > .jump-links + h2 {
  margin-block-start: var(--space-30);
}
main .reveal > h2:has(+ .jump-links) {
  line-height: 1.2;
}

/* Consistent vertical rhythm between sibling blocks */
main :is(.reveal, section, .vacancy, .inset, .profile-main, .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(--frame);
  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;
}
/* Row of in-page links at the top of a long page */
main .reveal > .jump-links {
  margin-top: 0;
  padding-block: var(--space-30);
}

/* 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;
}

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.3s cubic-bezier(0.4, 0, 0.2, 1), transform 1.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.js .reveal-left {
  transform: translateX(-2rem);
}
.js .reveal-right {
  transform: translateX(2rem);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

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

/* Announcement banner: unfolds a few seconds after the page loads */
.banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 0 var(--gutter) 0.625rem;
  padding: 0 !important;
  overflow: hidden;
  height: 0;
  opacity: 0;
  background: var(--olive);
  border-radius: 20px;
  text-align: center;
  animation: banner-unfold 1s ease-out 3s forwards;
}
@keyframes banner-unfold {
  to {
    height: auto;
    opacity: 1;
  }
}
.banner-item {
  padding: 10px 20px;
  color: var(--sand);
  font-size: var(--text-small);
}
.banner-label {
  color: var(--cream);
  font-size: var(--text-medium);
  font-weight: 500;
}
.banner .button {
  margin: 10px var(--space-50);
  border-radius: 20px;
  font-size: var(--text-medium);
}

/* The page opens with more room above its heading, which may use the full width */
main > .banner + .reveal {
  padding-top: calc(2 * var(--space-30));
}
main > .banner + .reveal,
main > .banner + .reveal + .reveal {
  padding-inline: 0;
}
main > .photo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 25px;
  padding: var(--space-30) var(--space-40);
}
main > .reveal + .photo-row {
  padding-top: calc(var(--space-50) - var(--space-30));
}
/* The photos are spaced by the gap above, not by the general rhythm between blocks */
main > .photo-row > a {
  margin: 0;
}
.photo-row a {
  display: flex;
  flex: none;
}
.photo-row img {
  width: auto;
  max-height: 150px;
  border-radius: 9999px;
  object-fit: contain;
}
@media (max-width: 600px) {
  main > .photo-row {
    gap: 5px;
  }
  .photo-row img {
    max-height: 75px;
  }
}

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

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

/* 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.3s 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.3s transitions would otherwise slow down the hover */
@media (prefers-reduced-motion: no-preference) {
  .js .team-card {
    transition: opacity 1.3s 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;
}
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);
}

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

main > .profile {
  padding-inline: var(--space-40);
  padding-bottom: var(--space-40);
}
.profile h1 {
  font-size: clamp(2.625rem, -1.413rem + 8.4135vw, 3.25rem);
  line-height: 1.2;
}
.profile-titles {
  color: var(--green);
  font-size: var(--text-large);
  font-weight: 600;
  line-height: 1.4;
}
.profile-columns {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--gap);
}
.profile-bio {
  padding: var(--space-30);
  background: var(--sand);
  border-radius: 25px;
}
.profile-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
}
.profile-photo {
  width: 400px;
  border-radius: 9999px;
}
@media (max-width: 781px) {
  .profile-columns {
    grid-template-columns: 1fr;
  }
}
/* On phones the photo comes before the text */
@media (max-width: 600px) {
  .profile-side {
    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%;
  }
}