/* Repertio, toestanden die eerder door het componentsysteem werden gezet.
 *
 * Wat support.js tijdens het draaien in het stijlmodel injecteerde (.scp0 tot
 * .scp4) staat hier gewoon als CSS. De rest zijn de open- en dichttoestanden
 * die eerst als losse inline-stijlen per render werden berekend.
 */

/* --- hover en focus, letterlijk overgenomen uit het stijlmodel -------- */

.scp0:hover { color: #BE7A28 !important; border-bottom: 1px solid #BE7A28 !important; }
.scp1:hover { background: #BE7A28 !important; }
.scp2:focus { border-color: #BE7A28 !important; outline: none !important; box-shadow: 0 0 0 3px rgba(190, 122, 40, 0.14) !important; }
.scp3:hover { background: #E4B876 !important; }
.scp4:hover { color: #F4F1E9 !important; }

/* --- navigatiebalk ---------------------------------------------------- */

.rp-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(228, 225, 216, 0);
  transition: background .25s ease, border-color .25s ease;
}
.rp-nav.is-gescrold {
  background: rgba(255, 255, 255, .92);
  border-bottom-color: #E4E1D8;
}

/* Mobiel of desktop was eerst een JavaScript-beslissing op vensterbreedte.
   Een mediaquery doet hetzelfde, maar dan zonder JavaScript en zonder dat de
   balk bij het laden zichtbaar omklapt. */
.rp-alleen-mobiel { display: none; }
.rp-alleen-desktop { display: flex; }
@media (max-width: 879px) {
  .rp-alleen-mobiel { display: flex; }
  .rp-alleen-desktop { display: none; }
}

/* --- mobiel menu ------------------------------------------------------ */

.rp-mobielmenu {
  position: fixed; inset: 0; z-index: 100;
  background: #FFFFFF;
  display: flex; flex-direction: column;
  padding: 18px clamp(20px, 6vw, 48px) 32px;
  opacity: 0; transform: translateY(-8px);
  pointer-events: none; visibility: hidden;
  transition: opacity .2s ease, transform .2s cubic-bezier(.4, 0, 1, 1), visibility .2s;
}
.rp-mobielmenu.is-open {
  opacity: 1; transform: none;
  pointer-events: auto; visibility: visible;
  transition: opacity .22s ease, transform .22s cubic-bezier(.16, 1, .3, 1);
}

/* --- FAQ-accordeon ---------------------------------------------------- */

/* Let op: overflow staat op de rasterlaag zelf en de <p> erbinnen heeft
   min-height:0. Zo werkt de 0fr-naar-1fr-overgang; met overflow op een
   binnenlaag klapt het antwoord open zonder animatie. */
.rp-faq-antwoord {
  display: grid; overflow: hidden;
  grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .3s cubic-bezier(.16, 1, .3, 1), opacity .2s ease;
}
.rp-faq-antwoord.is-open {
  grid-template-rows: 1fr; opacity: 1;
  transition: grid-template-rows .35s cubic-bezier(.16, 1, .3, 1), opacity .3s ease;
}
.rp-faq-antwoord > p { min-height: 0; }
.rp-faq-teken { transition: transform .3s cubic-bezier(.16, 1, .3, 1); }

/* --- Reppy ------------------------------------------------------------ */

.rp-teaser {
  max-width: 240px; background: #FFFFFF; border: 1px solid #E4E1D8;
  border-radius: 14px 14px 4px 14px;
  box-shadow: 0 16px 40px -16px rgba(23, 20, 15, .28);
  padding: 14px 16px; display: flex; align-items: flex-start; gap: 10px;
  cursor: pointer;
  opacity: 0; transform: translateY(6px); pointer-events: none; visibility: hidden;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.rp-teaser.is-open {
  opacity: 1; transform: none; pointer-events: auto; visibility: visible;
  animation: teaserPop .4s cubic-bezier(.16, 1, .3, 1) both;
}

.rp-chat {
  width: min(340px, calc(100vw - 32px));
  background: #FFFFFF; border: 1px solid #E4E1D8; border-radius: 14px;
  box-shadow: 0 24px 56px -20px rgba(23, 20, 15, .32);
  overflow: hidden; transform-origin: bottom right;
  opacity: 0; transform: translateY(10px) scale(.98);
  pointer-events: none; visibility: hidden;
  transition: opacity .18s ease, transform .18s cubic-bezier(.4, 0, 1, 1), visibility .18s;
}
.rp-chat.is-open {
  opacity: 1; transform: none; pointer-events: auto; visibility: visible;
  transition: opacity .2s ease, transform .22s cubic-bezier(.16, 1, .3, 1);
}

/* --- respect voor de systeeminstelling "minder beweging" -------------- */

@media (prefers-reduced-motion: reduce) {
  .rp-nav, .rp-mobielmenu, .rp-faq-antwoord, .rp-faq-teken, .rp-teaser, .rp-chat {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}