/* ============================================
   Homepage, calmer variant: less orange, more white space, a second
   colour (the green from the original theme) and a soft sand tone.
   Loaded last, only on the homepage.
   ============================================ */

.site-main {
  --green: #1B7A5E;          /* from the original theme accent, darkened for contrast */
  --green-tint: #EAF3EF;
  --sand: #FAF4EC;
  --slate: var(--color-slate);
  --slate-tint: #E9EEF0;
}

/* --------------------------------------------
   Hero: same orange, quieter points
   -------------------------------------------- */
.hero__points { font-size: 18px; }
.hero__points li strong { font-weight: 500; }
.hero__points li + li { margin-top: 8px; }

/* --------------------------------------------
   Intro cards: each card its own colour, no heavy shadow
   -------------------------------------------- */
.intro-card {
  --c: var(--color-primary-deep);
  --c-tint: var(--tint);
  border-top: 4px solid var(--c);
  box-shadow: 0 18px 40px -28px rgba(43, 58, 66, .45);
}
.intro-card:nth-child(2) { --c: var(--green); --c-tint: var(--green-tint); }
.intro-card:nth-child(3) { --c: var(--slate); --c-tint: var(--slate-tint); }
.intro-card:nth-child(4) { --c: var(--green); --c-tint: var(--green-tint); }

.intro-card__body::before { background-color: var(--c-tint); }
.intro-card__body::after { background-color: var(--c); }
.intro-card .acc--more .acc__title { background-color: var(--c-tint); }
.intro-card .acc--more .acc__icon { color: var(--c); }
.intro-card .acc--more[open] > .acc__title { background-color: var(--c); color: var(--color-white); }
.intro-card .acc--more[open] .acc__icon { color: var(--color-white); }
@media (hover: hover) {
  .intro-card .acc--more:not([open]):hover > .acc__title { background-color: var(--c-tint); filter: brightness(.96); }
}

/* --------------------------------------------
   Notices + status: no stretched empty box
   -------------------------------------------- */
.news { padding-bottom: 40px; }
.news__inner { align-items: flex-start; }
.mededelingen,
.aanmeldinfo { height: auto; }
.mededelingen { background-color: var(--green-tint); }
.mededelingen__text li::before { background-color: var(--green); }

/* --------------------------------------------
   Wie zijn wij: sand instead of a full orange band
   -------------------------------------------- */
.about { background-color: var(--sand); }
.about__inner { padding-block: 110px; gap: 60px; }
.about__title { color: var(--color-text); }
.about__body { color: var(--color-body); font-size: 18px; font-weight: 400; }
.about__body p + p { margin-top: 14px; }
.about__links-title { color: var(--color-text); }

.about .link-list a { border-color: rgba(43, 58, 66, .25); background-color: var(--color-white); }
.about .link-list__text { color: var(--color-text); }
.about .link-list__icon svg { fill: var(--color-primary-deep); }
@media (hover: hover) {
  .about .link-list a:hover { border-color: var(--slate); background-color: var(--slate); }
  .about .link-list a:hover .link-list__text { color: var(--color-white); }
  .about .link-list a:hover .link-list__icon svg { fill: var(--color-white); }
}

/* --------------------------------------------
   Location + tiles: more air, shorter tiles
   -------------------------------------------- */
.location { padding-block: 90px 40px; }

.tiles__inner { padding-block: 40px 100px; }
.tile { min-height: 320px; }
.tile--ervaringen { min-height: 320px; }
.tile__title { font-size: 30px; }
.tile__text { font-size: 17px; font-weight: 400; line-height: 1.6; }
.tile:nth-child(2)::before,
.tile:nth-child(3)::before {
  background: linear-gradient(to top, rgba(18, 74, 58, .94) 0%, rgba(18, 74, 58, .7) 45%, rgba(18, 74, 58, .2) 100%);
}

/* --------------------------------------------
   FAQ: soft green band, green accents
   -------------------------------------------- */
.faq { background-color: var(--green-tint); }
.faq__inner { padding-block: 100px 110px; }
.faq .acc--faq .acc__title { border-color: transparent; }
.faq .acc--faq .acc__icon { background-color: var(--green-tint); }
.faq .acc--faq .acc__icon::after { background-color: var(--green); }
.faq .acc--faq[open] .acc__icon { background-color: var(--green); }
.faq .acc--faq[open] .acc__icon::after { background-color: var(--color-white); }
.faq .acc--faq[open] > .acc__title,
.faq .acc--faq .acc__panel { border-color: transparent; }
.faq .acc--faq[open] { box-shadow: 0 14px 30px -22px rgba(18, 74, 58, .5); border-radius: 5px; }
@media (hover: hover) {
  .faq .acc--faq:not([open]):hover > .acc__title { border-color: rgba(27, 122, 94, .35); }
}
.faq__more { font-size: 22px; }

/* The footer wave cuts into the FAQ band: fill it with the same green */
.site-footer .wave path { fill: #EAF3EF; }

/* --------------------------------------------
   Tablet and mobile
   -------------------------------------------- */
@media (max-width: 1024px) {
  .about__inner { padding-block: 80px; gap: 30px; }
}

@media (max-width: 767px) {
  .news { padding-bottom: 20px; }
  .about__inner { padding-block: 56px; }
  .about__body { font-size: 17px; }
  .location { padding-block: 50px 20px; }
  .tiles__inner { padding-block: 20px 60px; }
  .tile { min-height: 280px; }
  .tile__title { font-size: 25px; }
  .faq__inner { padding-block: 56px 64px; }
}