/* ============================================
   In-between style, site-wide: tokens and shared blocks
   (status cards, FAQ). Loaded after upgrade.css on every page.
   Homepage-only parts live in components/home-tussen.css.
   ============================================ */

:root {
  --r-card: 5px;
  --shadow-card: 0 22px 44px -22px rgba(43, 58, 66, .38), 0 0 0 1px rgba(43, 58, 66, .04);
  --tint: #FFF4EB;
  --line-soft: #EEE6DE;

  --i-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
  --i-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
  --i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
  --i-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.5-1.5 3-3.2 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.8 0-3 .5-4.5 2-1.5-1.5-2.7-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4 3 5.5l7 7Z'/%3E%3C/svg%3E");
  --i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 5-8 12-8 12s-8-7-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
  --i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
  --i-check: 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='m5 12 5 5 9-10'/%3E%3C/svg%3E");
  --i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --i-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

/* --------------------------------------------
   Mededelingen + aanmeldinformatie as two cards
   -------------------------------------------- */
@media (min-width: 768px) {
  .news__inner { align-items: stretch; gap: 24px; }
}

.mededelingen,
.aanmeldinfo {
  height: 100%;
  padding: 36px;
  border-radius: var(--r-card);
}

.mededelingen {
  min-height: 0;
  border: 0;
  background-color: var(--tint);
}

.aanmeldinfo {
  border: 1px solid var(--line-soft);
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
}

.aanmeldinfo__intro { background: transparent; }
.aanmeldinfo__table { padding: 0; }

.mededelingen__title,
.aanmeldinfo__title { width: auto; max-width: none; font-size: 34px; }

.mededelingen__text ul { padding-left: 0; list-style: none; }
.mededelingen__text li { position: relative; padding-left: 28px; }
.mededelingen__text li + li { margin-top: 14px; }
.mededelingen__text li::before {
  content: "";
  position: absolute;
  top: .55em;
  left: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-primary);
}

/* --------------------------------------------
   FAQ: light cards with an orange plus/minus
   -------------------------------------------- */
.faq__title { font-size: 44px; }

.acc--faq:not(:last-child) { margin-bottom: 12px; }

.acc--faq .acc__title {
  padding: 20px 24px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background-color: var(--color-white);
  color: var(--color-text);
  transition: border-color .25s, box-shadow .25s;
}

.acc--faq .acc__text { font-size: 21px; }

.acc--faq .acc__icon {
  order: 2;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: auto;
  border-radius: 50%;
  background-color: var(--tint);
}

/* Replace the chevrons with plus/minus */
.acc--faq .acc__icon > span,
.acc--faq[open] > .acc__title .acc__icon > span { display: none !important; }
.acc--faq .acc__icon::after {
  content: "";
  width: 16px;
  height: 16px;
  background-color: var(--color-primary-deep);
  -webkit-mask: var(--i-plus) center / contain no-repeat;
  mask: var(--i-plus) center / contain no-repeat;
}

.acc--faq[open] .acc__icon { background-color: var(--color-primary); }
.acc--faq[open] .acc__icon::after {
  background-color: var(--color-text);
  -webkit-mask-image: var(--i-minus);
  mask-image: var(--i-minus);
}

.acc--faq[open] > .acc__title {
  border-color: var(--color-primary);
  border-bottom-color: transparent;
  border-radius: 5px 5px 0 0;
}

.acc--faq .acc__panel {
  padding: 0 24px 20px;
  border: 1px solid var(--color-primary);
  border-top: 0;
  border-radius: 0 0 5px 5px;
  background-color: var(--color-white);
}

.acc--faq .acc__panel .prose { color: #4A4A4A; }

@media (hover: hover) {
  .acc--faq:not([open]):hover > .acc__title { border-color: #F2C9A8; color: var(--color-text); box-shadow: 0 10px 24px -16px rgba(43, 58, 66, .35); }
}

/* --------------------------------------------
   Mobile
   -------------------------------------------- */
@media (max-width: 767px) {

  .news__inner { gap: 16px; }
  .mededelingen,
  .aanmeldinfo { padding: 24px 18px; border-bottom: 0; }
  .mededelingen__title,
  .aanmeldinfo__title { font-size: 26px; }
  .aanmeldinfo__intro { padding: 0; }

  .faq__title { font-size: 30px; }
  .acc--faq .acc__title { padding: 16px 16px 16px 18px; }
  .acc--faq .acc__text { font-size: 18px; }
  .acc--faq .acc__panel { padding: 0 18px 16px; }
}

/* Long e-mail addresses must wrap inside cards */
.mededelingen__text a { overflow-wrap: anywhere; }

/* ============================================
   Subpages: same finish as the homepage
   ============================================ */

/* Photos next to text get the soft shadow */
.werken-photo img,
.mv-row__img img,
.ervaringen-photo img {
  border-radius: var(--r-card);
  box-shadow: 0 30px 50px -26px rgba(43, 58, 66, .45);
}

/* Every remaining rounded corner on 5px */
.ervaringen-score,
.kwal-badge__img img,
.team-card,
.team-dialog,
.team-dialog__message,
.sw-card { border-radius: var(--r-card); }

/* --------------------------------------------
   Aanmelden: closing text as a tinted card
   -------------------------------------------- */
.am-main__outro {
  padding: 32px 36px;
  border-radius: var(--r-card);
  background-color: var(--tint);
}

/* --------------------------------------------
   Dark call-to-action bands become cards (hoe wij werken, missie en visie)
   -------------------------------------------- */
.werken-cta,
.mv-cta {
  max-width: var(--content-max);
  margin: 60px auto;
  border-radius: var(--r-card);
  border-left: 6px solid var(--color-primary);
  box-shadow: var(--shadow-card);
}

@media (max-width: 1180px) {
  .werken-cta,
  .mv-cta { margin-inline: var(--gutter); }
}

/* --------------------------------------------
   Tarieven: the three blocks as white cards
   -------------------------------------------- */
.tv-block,
.tv-block--18plus { background-color: #FAF7F4; }
.tv-block { padding-inline: var(--gutter); }
.tv-block--tot18 { padding-top: 60px; }
.tv-block--zelf { padding-bottom: 60px; }

.tv-block__inner,
.tv-block--zelf .tv-block__inner {
  min-height: 0;
  margin-block: 12px;
  padding: 44px 48px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
}

@media (max-width: 767px) {
  .tv-block__inner,
  .tv-block--18plus .tv-block__inner,
  .tv-block--zelf .tv-block__inner { min-height: 0; padding: 24px 18px; }
}

/* --------------------------------------------
   Samenwerking: partner cards
   -------------------------------------------- */
.sw-card { box-shadow: var(--shadow-card); }

/* --------------------------------------------
   Kwaliteitsbeleid: text blocks as cards
   -------------------------------------------- */
.kwal-sec--duo .kwal-sec__col {
  padding: 32px;
  border-radius: var(--r-card);
  background-color: var(--tint);
}

.kwal-sec--statuut .kwal-sec__inner {
  padding: 36px 40px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
}

@media (max-width: 767px) {
  .kwal-sec--duo .kwal-sec__col,
  .kwal-sec--statuut .kwal-sec__inner { padding: 24px 18px; }
}

/* --------------------------------------------
   Cliëntervaringen
   -------------------------------------------- */
.ervaringen-score { box-shadow: 0 24px 44px -20px rgba(0, 0, 0, .45); }

/* --------------------------------------------
   Medewerkers: grid on the content width, softer cards
   -------------------------------------------- */
@media (min-width: 1025px) {
  .team-grid__inner { max-width: var(--content-max); gap: 24px; }
  .team-card { width: auto; }
}

.team-card { box-shadow: var(--shadow-card); }

/* --------------------------------------------
   Contact: form in a card, fields like the footer
   -------------------------------------------- */
.contact__col--form {
  padding: 36px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
}

.form--light .form__field {
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-card);
  background-color: #FAF7F4;
  font-size: 17px;
}

.form--light .form__field--area { min-height: 120px; }
.form--light .form__field:focus { border-color: var(--color-primary); background-color: var(--color-white); box-shadow: 0 0 0 3px rgba(255, 108, 4, .2); }
.form--light .form__submit { padding: 14px 28px; font-size: 18px; }

@media (max-width: 767px) {
  .contact__col--form { padding: 24px 18px; }
  .am-main__outro { padding: 24px 18px; }
}

.kwal-sec--statuut { padding-top: 50px; }
.contact__col--form { align-self: flex-start; }

/* Tablet: no horizontal scrolling on Medewerkers and Missie en visie */
@media (min-width: 768px) and (max-width: 1024px) {
  .team-grid__inner { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; gap: 24px; max-width: 100%; padding-inline: var(--gutter); }
  .team-card { width: auto; }
}

.mv-row,
.mv-values { overflow-x: clip; }