/* Eet Team Nijverdal — statische site
   Kleuren en layout overgenomen uit de oorspronkelijke app.css. Mobiel eerst. */

/* Lettertypes zoals op de oude site (Mali 700 en Roboto 300, via Google Fonts),
   nu zelf gehost in /fonts. Beide vallen onder de SIL Open Font License. */
@font-face {
  font-family: "Mali";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/mali-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Mali";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/mali-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/roboto-300-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/fonts/roboto-300-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --color-cream: #faf2e9;
  --color-ergo: #aa015c;
  --color-fysio: #60766f;
  --color-logo: #96c044;
  --color-dietist: #f7a516;
  --color-rose: #d69c8c;
  --color-bg-1: #ced4c4;
  --color-white: #fff;
  --color-black: #000;
  --color-text: #111;
  --color-muted: #595959;
  --color-required: #c00000;

  --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Mali", "Comic Neue", "Chalkboard SE", "Comic Sans MS", "Segoe Print", cursive;

  --header-height: 100px;
  --radius: 6px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .site-header.is-fixed { animation: none; }
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--color-white);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
}

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

p {
  line-height: 22px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 10;
  padding: 10px 16px;
  background: var(--color-black);
  color: var(--color-white);
}

.skip-link:focus {
  top: 16px;
}

:focus-visible {
  outline: 3px solid var(--color-black);
  outline-offset: 2px;
}

/* ---------- Header ---------- */

/* Bovenaan hoort de header bij de welkomstsectie en scrolt hij mee weg.
   Voorbij de welkomstsectie schuift een vaste balk van boven in beeld. */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header.is-fixed {
  position: fixed;
  background-color: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.08);
  animation: header-in 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.site-header.is-fixed.is-leaving {
  animation: header-out 0.25s ease-in forwards;
}

@keyframes header-in {
  from { transform: translateY(-100%); }
}

@keyframes header-out {
  to { transform: translateY(-100%); }
}

.btn-aanmelden {
  display: inline-block;
  margin: 0 20px;
  padding: 15px 20px;
  border-radius: 40px;
  background: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
}

.header-logo {
  display: none;
  width: 80px;
  height: 100px;
  margin-left: 30px;
  background: url("/images/logo-eetteam-nijverdal.png") center / contain no-repeat;
}

.site-header.is-fixed > .btn-aanmelden {
  display: none;
}

.site-header.is-fixed .header-logo {
  display: block;
  margin-right: auto;
}

.burger {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 2rem;
  height: 2rem;
  margin: 20px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.burger-line {
  display: block;
  height: 2px;
  background: var(--color-black);
  transition: transform 0.5s, opacity 0.5s;
}

.burger[aria-expanded="true"] .burger-line:nth-of-type(2) {
  transform: translateY(15px) rotate(45deg);
}

.burger[aria-expanded="true"] .burger-line:nth-of-type(3) {
  opacity: 0;
}

.burger[aria-expanded="true"] .burger-line:nth-of-type(4) {
  transform: translateY(-15px) rotate(-45deg);
}

.menu {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  padding-top: 86px;
  background: var(--color-rose);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.5s, visibility 0.5s;
}

.menu.is-open {
  transform: translateX(0);
  visibility: visible;
}

.menu a {
  display: block;
  width: 100%;
  padding: 10px 40px;
  border-bottom: 1px dotted var(--color-black);
  color: var(--color-black);
  font-size: 24px;
  text-decoration: none;
}

.menu a.btn-aanmelden {
  width: max-content;
  margin: 30px 0 0 16px;
  padding: 15px 20px;
  border-bottom: 0;
  color: var(--color-white);
  font-size: 20px;
}

/* ---------- Welkom: logo + vier praktijktegels ---------- */

.welcome {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 60vh 20vh 20vh;
  grid-template-areas:
    "logo logo"
    "ergo fysio"
    "logopedie dietist";
}

.welcome-logo {
  grid-area: logo;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-cream);
}

.welcome-logo img {
  max-height: 30%;
  width: auto;
}

/* Tegels klappen bij hover om, elk vanuit de hoek die naar het midden van het blok wijst
   (zoals op de oude site). De achterkant is iets donkerder en toont het logo ook. */
.tile {
  position: relative;
  perspective: 1200px;
}

.tile--ergo { grid-area: ergo; background: var(--color-ergo); }
.tile--fysio { grid-area: fysio; background: var(--color-fysio); }
.tile--logopedie { grid-area: logopedie; background: var(--color-logo); }
.tile--dietist { grid-area: dietist; background: var(--color-dietist); }

.tile-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 0.8s cubic-bezier(0.45, 0.05, 0.25, 1);
  will-change: transform;
}

.tile--ergo .tile-face { transform-origin: right bottom; }
.tile--fysio .tile-face { transform-origin: left bottom; }
.tile--logopedie .tile-face { transform-origin: right top; }
.tile--dietist .tile-face { transform-origin: left top; }

.tile-front {
  transform: rotateX(0deg);
}

.tile-back {
  background: rgba(0, 0, 0, 0.25);
  transform: rotateX(180deg);
}

.tile img {
  width: 75%;
  max-height: 100px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

@media (hover: hover) {
  .tile:hover .tile-front { transform: rotateX(-180deg); }
  .tile:hover .tile-back { transform: rotateX(0deg); }
}

/* Minder beweging: rustig overvloeien in plaats van omklappen */
@media (prefers-reduced-motion: reduce) {
  .tile-front,
  .tile-back,
  .tile:hover .tile-front,
  .tile:hover .tile-back { transform: none; }
  .tile-back { opacity: 0; }
  .tile:hover .tile-back { opacity: 1; }
}

/* ---------- Tekstsecties ---------- */

section.text,
.team {
  position: relative;
  min-height: 100vh;
}

.text {
  padding: 10px 30px 30px;
}

.text h2 {
  margin: 0.67em 0;
  padding-top: 100px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2em;
}

.text ul {
  padding-left: 16px;
  list-style: square;
}

.text li {
  line-height: 1.4;
}

.bg1 {
  background-color: var(--color-bg-1);
}

/* ---------- Het team ---------- */

.team {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: max-content 50vw 50vw;
  grid-template-areas:
    "intro intro"
    "ergo fysio"
    "logopedie dietist";
  padding-bottom: 50px;
}

.team-intro { grid-area: intro; }
.partner--ergo { grid-area: ergo; }
.partner--fysio { grid-area: fysio; }
.partner--logopedie { grid-area: logopedie; }
.partner--dietist { grid-area: dietist; }

.partner {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.portrait {
  width: 77%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-color: var(--color-rose);
  background-repeat: no-repeat;
}

.partner--ergo .portrait,
.partner--logopedie .portrait {
  margin-left: 20px;
  margin-right: 10px;
}

.partner--fysio .portrait,
.partner--dietist .portrait {
  margin-left: 10px;
  margin-right: 20px;
}

.partner--ergo .portrait {
  background-image: url("/images/Internet_0148-removebg-preview.png");
  background-image: image-set(url("/images/Internet_0148-removebg-preview.webp") type("image/webp"), url("/images/Internet_0148-removebg-preview.png") type("image/png"));
  background-size: contain;
}

.partner--fysio .portrait {
  background-image: url("/images/lisanne_1-removebg-preview.png");
  background-image: image-set(url("/images/lisanne_1-removebg-preview.webp") type("image/webp"), url("/images/lisanne_1-removebg-preview.png") type("image/png"));
  background-size: 170%;
  background-position: 56% -10px;
}

.partner--logopedie .portrait {
  background-image: url("/images/silhoutte-martine.png");
  background-image: image-set(url("/images/silhoutte-martine.webp") type("image/webp"), url("/images/silhoutte-martine.png") type("image/png"));
  background-size: cover;
  background-position: center;
}

.partner--dietist .portrait {
  background-image: url("/images/pasfoto.png");
  background-size: cover;
  background-position: center;
}

.portrait svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.portrait text {
  font-family: var(--font-body);
  font-size: 11.2px;
  fill: var(--color-black);
}

/* ---------- Aanmeldformulier ---------- */

.form {
  margin: 0 -15px;
  padding: 10px 0;
}

.field {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.field input,
.field textarea {
  width: 100%;
  padding: 13px 16px;
  border: 2px solid var(--color-rose);
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--color-text);
  font: 16px var(--font-body);
  outline: none;
}

.field textarea {
  min-height: 4em;
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  border-color: var(--color-black);
}

.field label {
  position: absolute;
  top: 15px;
  left: 12px;
  padding: 0 4px;
  background: var(--color-white);
  color: var(--color-muted);
  line-height: 20px;
  pointer-events: none;
  transition: all 0.2s ease-in;
}

.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field--file label {
  top: -10px;
  font-size: 14px;
  color: var(--color-black);
}

.field .required {
  position: absolute;
  right: 0;
  padding: 16px;
  color: var(--color-required);
  font-size: 11px;
  transition: opacity 0.2s ease-in-out;
}

.field input:focus ~ .required,
.field input:valid ~ .required {
  opacity: 0;
}

.field input[type="file"] {
  padding: 13px 16px;
  color: var(--color-muted);
}

.field input::file-selector-button {
  float: right;
  margin: -5px 0 -5px 10px;
  padding: 6px 10px;
  border: 0;
  border-radius: 3px;
  background: var(--color-rose);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-size: 12px;
  cursor: pointer;
}

.form button[type="submit"] {
  width: 100%;
  padding: 18px 10px;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-rose);
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease-in;
}

.form button[type="submit"]:hover,
.form button[type="submit"]:focus-visible {
  background: var(--color-black);
  color: var(--color-white);
}

/* ---------- 404 ---------- */

.not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 30px;
  background: var(--color-cream);
  text-align: center;
}

.not-found h1 {
  font-family: var(--font-heading);
}

.not-found a:not(.btn-aanmelden) {
  color: var(--color-text);
}

/* ---------- Tablet en groter ---------- */

@media (min-width: 768px) {
  .welcome {
    grid-template-columns: 50% 25% 25%;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
      "logo ergo fysio"
      "logo logopedie dietist";
  }

  .welcome-logo img {
    max-height: none;
  }

  .tile img {
    width: calc(100% - 40px);
    max-height: 158px;
  }

  .team {
    grid-template-columns: 50% 25% 25%;
    grid-template-rows: 1fr 1fr;
    grid-template-areas:
      "intro ergo fysio"
      "intro logopedie dietist";
  }

  .site-header:not(.is-fixed) {
    width: 50%;
    justify-content: flex-start;
  }

  .site-header:not(.is-fixed) .burger {
    margin-left: auto;
  }

  .btn-aanmelden {
    margin: 0 24px;
    padding: 15px 30px;
  }
}

/* ---------- Desktop: volledig menu in de header (past pas naast de knop vanaf ~1500px) ---------- */

@media (min-width: 1500px) {
  .burger {
    display: none;
  }

  .site-header.is-fixed {
    flex-direction: row-reverse;
  }

  .site-header.is-fixed > .btn-aanmelden {
    display: inline-block;
  }

  .site-header.is-fixed .header-logo {
    order: 1;
  }

  .menu {
    position: static;
    flex-direction: row;
    width: auto;
    height: auto;
    padding: 0;
    background: none;
    transform: none;
    visibility: visible;
    transition: none;
  }

  .menu a {
    width: auto;
    white-space: nowrap;
    margin: 5px;
    padding: 5px;
    border: 0;
    font-size: 16px;
  }

  .menu a.btn-aanmelden {
    display: none;
  }
}

/* backdrop-filter maakt van de header het containing block voor het fixed menu;
   zet het uit zolang het mobiele menu open is. */
.site-header.menu-open {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}