/* ============================================================================
   home.css - homepage rustmomentindeklas.nl (07-09-2026)
   Alleen de onderdelen die Elementor niet native kan. Kleuren uit tokens.css.
   ========================================================================= */

/* ---------- accentwoord in een kop ---------- */
.hp-blue { color: var(--ridk-blue); }

/* ---------- genummerde regels, sectie 4 ---------- */
.hp-numdot .elementor-heading-title {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--ridk-yellow);
  color: var(--ridk-teal);
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}

/* ---------- badges van de vier pijlers, sectie 6 ---------- */
.hp-badge .elementor-heading-title {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: #ffffff;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
}
.hp-badge-blue  .elementor-heading-title { background: var(--ridk-blue); }
.hp-badge-teal  .elementor-heading-title { background: var(--ridk-teal); }
.hp-badge-sage  .elementor-heading-title { background: var(--ridk-sage-700); }
.hp-badge-coral .elementor-heading-title { background: var(--ridk-coral); }

/* ---------- knopblok onderaan een kaart, sectie 5 ---------- */
.hp-push { margin-top: auto !important; }

/* ---------- naam onder een quote, sectie 7 ---------- */
.hp-quote-name { border-top: 1px solid var(--ridk-line); padding-top: 12px; }

/* ---------- scheidingslijn boven de genummerde regels, sectie 4 ---------- */
.hp-rule { border-top: 1px solid var(--ridk-line); }

/* ---------- accordion, sectie 10 ---------- */
.hp-faq .elementor-accordion .elementor-accordion-item {
  border: 0 !important;
  border-bottom: 1px solid var(--ridk-line) !important;
}
.hp-faq .elementor-accordion .elementor-accordion-item:first-child {
  border-top: 1px solid var(--ridk-line) !important;
}
.hp-faq .elementor-tab-title {
  display: flex !important;
  align-items: center !important;
  gap: 20px;
  padding: 15px 0 !important;
  background: transparent !important;
}
.hp-faq .elementor-accordion-title {
  flex: 1 1 auto;
  order: 1;
}
/* Elementor laat het icoon rechts zweven; dat centreert niet in een rondje */
.hp-faq .elementor-accordion-icon {
  order: 2;
  float: none !important;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px;
  background: var(--ridk-blue-100);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0;
}
.hp-faq .elementor-accordion-icon > span {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.hp-faq .elementor-accordion-icon svg {
  width: 11px;
  height: 11px;
  margin: 0;
  fill: var(--ridk-blue);
}
.hp-faq .elementor-tab-content {
  padding: 0 46px 18px 0 !important;
  border: 0 !important;
}

/* ---------- mobiel ---------- */
@media (max-width: 767px) {
  .hp-mob-hide { display: none !important; }
  .hp-mob-first { order: -1; }
  .hp-btn-full .elementor-button { width: 100%; }
  .hp-btn-full.elementor-element { align-self: stretch; }
  /* gestapelde kaarten hun eigen hoogte laten houden in plaats van allemaal
     de hoogte van de langste, dat scheelt loze witruimte */
  .hp-grid { --e-con-grid-template-rows: none; }
  /* de twee routes-tabs passen niet naast elkaar op een telefoon:
     onder elkaar zetten in plaats van de tekst laten afbreken */
  .hp-page .e-n-tabs-heading {
    flex-direction: column !important;
    width: 100% !important;
    border-radius: 26px !important;
  }
  .hp-page .e-n-tab-title {
    width: 100% !important;
    padding: 12px 18px !important;
  }
}