/* ==========================================================================
   René Goedhart — Componenten & micro-animaties
   Deze classes plak je in Elementor via "Advanced -> CSS Classes" op het
   betreffende element (container, knop, afbeelding, kop). Zie
   HANDLEIDING.md voor het overzicht per sectie.
   ========================================================================== */

/* ---------- Basis ---------- */
body.rg-site {
  font-family: var(--rg-font-body);
  color: var(--rg-body);
  background-color: var(--rg-cream);
  -webkit-font-smoothing: antialiased;
}

.rg-site h1, .rg-site h2, .rg-site h3,
.rg-site .elementor-heading-title {
  font-family: var(--rg-font-heading);
  color: var(--rg-navy);
  font-weight: 500;
  line-height: 1.15;
}

.rg-site a {
  color: inherit;
  text-decoration: none;
  transition: color var(--rg-speed-fast) var(--rg-ease);
}

*:focus-visible {
  outline: 2px solid var(--rg-navy);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Eyebrow label ---------- */
.rg-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rg-muted);
  margin-bottom: 12px;
}
.rg-eyebrow--on-dark { color: rgba(255, 255, 255, 0.55); }

/* ---------- Italic underline accent (bv. "specialistisch") ---------- */
.rg-accent-italic {
  font-style: italic;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 8px;
  text-decoration-color: var(--rg-navy);
}

/* ==========================================================================
   Knoppen
   ========================================================================== */
.rg-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  border-radius: var(--rg-radius-pill) !important;
  font-family: var(--rg-font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  border: 1px solid transparent;
  transition: transform var(--rg-speed-fast) var(--rg-ease),
              box-shadow var(--rg-speed-fast) var(--rg-ease),
              background-color var(--rg-speed-fast) var(--rg-ease),
              color var(--rg-speed-fast) var(--rg-ease);
}
.rg-btn .rg-btn-arrow,
.rg-btn svg {
  display: inline-flex;
  transition: transform var(--rg-speed-fast) var(--rg-ease);
}
.rg-btn:hover { transform: translateY(-2px); }
.rg-btn:hover .rg-btn-arrow,
.rg-btn:hover svg { transform: translateX(3px); }
.rg-btn:active { transform: translateY(0); }

/* Primair — tan (bv. hero "Lees verder") */
.rg-btn--tan,
.rg-btn--tan.elementor-button {
  background-color: var(--rg-tan) !important;
  color: var(--rg-navy) !important;
  box-shadow: 0 10px 22px -10px rgba(164, 128, 100, 0.55);
}
.rg-btn--tan:hover {
  background-color: var(--rg-tan-dark) !important;
  box-shadow: 0 14px 26px -8px rgba(164, 128, 100, 0.6);
}

/* Donker — bv. header "Contact" */
.rg-btn--dark,
.rg-btn--dark.elementor-button {
  background-color: var(--rg-navy-dark) !important;
  color: #FFFFFF !important;
  box-shadow: var(--rg-shadow-btn);
}
.rg-btn--dark:hover {
  background-color: #241247 !important;
  box-shadow: var(--rg-shadow-btn-hover);
}

/* Outline — navy rand, transparante vulling die on hover subtiel vult */
.rg-btn--outline,
.rg-btn--outline.elementor-button {
  background-color: transparent !important;
  color: var(--rg-navy-dark) !important;
  border: 1px solid rgba(25, 14, 57, 0.35) !important;
}
.rg-btn--outline:hover {
  background-color: rgba(25, 14, 57, 0.05) !important;
  border-color: var(--rg-navy-dark) !important;
}

/* Op donkere achtergrond (footer) — outline wit */
.rg-btn--on-dark {
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #FFFFFF !important;
  background: transparent !important;
}
.rg-btn--on-dark:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: #FFFFFF !important;
}

/* Elementor's "Knop" (button) widget places custom CSS-classes on the
   *wrapper* div (.elementor-widget-button), not on the inner <a
   class="elementor-button"> itself. So .rg-btn/.rg-btn--* paint the wrapper
   correctly, but the real link keeps Elementor's own default button skin
   (green background) unless we explicitly neutralise it and let it inherit
   from the wrapper. */
.elementor-widget-button.rg-btn {
  display: inline-flex !important;
  width: auto !important;
}
.rg-btn .elementor-button {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: inherit !important;
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.rg-btn .elementor-button-text,
.rg-btn .elementor-button-icon,
.rg-btn .elementor-button-icon i {
  color: inherit !important;
}

/* ==========================================================================
   Kaarten & foto's
   ========================================================================== */
.rg-card {
  border-radius: var(--rg-radius-card) !important;
  overflow: hidden;
  background: var(--rg-white);
  box-shadow: var(--rg-shadow-card);
}

.rg-photo-frame {
  position: relative;
  border-radius: var(--rg-radius-card) !important;
  overflow: hidden;
  isolation: isolate;
}
.rg-photo-frame img {
  transition: transform var(--rg-speed-medium) var(--rg-ease);
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rg-photo-frame:hover img { transform: scale(1.02); }

/* Ronde RG-badge overlay rechtsonder op foto's */
.rg-badge-circle {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(11, 44, 86, 0.55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  transition: transform var(--rg-speed-medium) var(--rg-ease);
  z-index: 2;
}
.rg-photo-frame:hover .rg-badge-circle { transform: rotate(12deg) scale(1.05); }
.rg-badge-circle svg,
.rg-badge-circle img,
.rg-badge-circle .elementor-widget-image,
.rg-badge-circle .elementor-widget-image img { width: 26px; height: 26px; }

/* ==========================================================================
   Beroepsverenigingen logo-strip
   ========================================================================== */
.rg-logo-strip img,
.rg-logo-strip .elementor-widget-image img {
  filter: grayscale(100%);
  opacity: 0.55;
  transition: opacity var(--rg-speed-fast) var(--rg-ease),
              filter var(--rg-speed-fast) var(--rg-ease);
}
.rg-logo-strip img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* ==========================================================================
   Decoratieve squiggle
   ========================================================================== */
.rg-squiggle { pointer-events: none; }
.rg-squiggle img { filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }

/* ==========================================================================
   Icoon-badges (Systeemtherapie / Gestalttherapie)
   ========================================================================== */
.rg-therapy-badge { display: flex; align-items: center; gap: 10px; }
.rg-therapy-badge img { width: 34px; height: 34px; }
.rg-therapy-badge span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rg-navy);
}

/* ==========================================================================
   Footer
   ========================================================================== */
.rg-footer {
  background-color: var(--rg-navy) !important;
  color: rgba(255, 255, 255, 0.78);
}
.rg-footer h3, .rg-footer .elementor-heading-title {
  color: var(--rg-tan);
  font-size: 20px;
}
.rg-footer a { color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.rg-footer a:hover { color: var(--rg-tan); }

.rg-newsletter-form {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--rg-radius-pill);
  padding: 6px 6px 6px 20px;
  max-width: 380px;
  transition: border-color var(--rg-speed-fast) var(--rg-ease);
}
.rg-newsletter-form:focus-within { border-color: var(--rg-tan); }
.rg-newsletter-form input[type="email"] {
  flex: 1;
  background: transparent;
  border: none;
  color: #FFFFFF;
  font-size: 14px;
  outline: none;
}
.rg-newsletter-form input::placeholder { color: rgba(255,255,255,0.5); }
.rg-newsletter-form button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--rg-tan);
  color: var(--rg-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--rg-speed-fast) var(--rg-ease), transform var(--rg-speed-fast) var(--rg-ease);
}
.rg-newsletter-form button:hover { background: #FFFFFF; transform: translateX(2px); }

.rg-social-icons { display: flex; gap: 10px; }
.rg-social-icons a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--rg-speed-fast) var(--rg-ease), border-color var(--rg-speed-fast) var(--rg-ease), transform var(--rg-speed-fast) var(--rg-ease);
}
.rg-social-icons a:hover {
  background: var(--rg-tan);
  border-color: var(--rg-tan);
  transform: translateY(-2px);
}
.rg-social-icons svg { width: 16px; height: 16px; fill: #FFFFFF; }

/* Back to top */
.rg-back-to-top {
  width: 48px;
  height: 48px;
  border-radius: var(--rg-radius-card-sm);
  background: var(--rg-tan);
  color: var(--rg-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  transition: transform var(--rg-speed-fast) var(--rg-ease), background var(--rg-speed-fast) var(--rg-ease);
}
.rg-back-to-top:hover { transform: translateY(-4px); background: #FFFFFF; }

/* ==========================================================================
   Header / navigatie
   ========================================================================== */
.rg-header { background: transparent; }
.rg-header .rg-nav a {
  color: var(--rg-navy);
  font-weight: 500;
  font-size: 15px;
  position: relative;
}
.rg-header .rg-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 0%; height: 1.5px;
  background: var(--rg-tan);
  transition: width var(--rg-speed-fast) var(--rg-ease);
}
.rg-header .rg-nav a:hover::after { width: 100%; }
.rg-header .rg-route-link {
  text-decoration: underline;
  text-underline-offset: 4px;
  color: var(--rg-navy);
  font-size: 14px;
}

/* ==========================================================================
   Scroll-reveal animatie
   ========================================================================== */
.rg-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--rg-speed-slow) var(--rg-ease),
              transform var(--rg-speed-slow) var(--rg-ease);
}
.rg-reveal.rg-in-view {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .rg-reveal { opacity: 1; transform: none; transition: none; }
  .rg-btn, .rg-photo-frame img, .rg-badge-circle { transition: none; }
}

/* ==========================================================================
   Layout — deze classes dragen de opmaak van de secties zelf (los van
   Elementor's eigen container-instellingen), zodat je vrij kunt slepen
   zonder de opmaak te breken.
   ========================================================================== */
.rg-container {
  width: 100%;
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box;
}

.rg-section { padding-top: 72px; padding-bottom: 72px; }
.rg-section--tight { padding-top: 40px; padding-bottom: 40px; }

/* Header */
.rg-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 28px;
  padding-bottom: 28px;
  flex-wrap: wrap;
}
.rg-nav { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.rg-nav li { list-style: none; }
.rg-header-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

/* Hero */
.rg-hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 32px;
  align-items: stretch;
}
.rg-hero-card { padding: 56px 48px; display: flex; flex-direction: column; justify-content: center; }
.rg-hero-photo { min-height: 460px; }
@media (max-width: 900px) {
  .rg-hero { grid-template-columns: 1fr; }
  .rg-hero-card { padding: 40px 28px; }
}

/* Logo strip */
.rg-logo-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.rg-logo-strip-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--rg-muted);
  white-space: nowrap;
}
.rg-logo-strip-marks { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; }

/* Section heading met squiggle */
.rg-section-heading { position: relative; text-align: center; padding-bottom: 40px; }
.rg-section-heading .elementor-heading-title,
.rg-section-heading-text {
  font-family: var(--rg-font-heading);
  color: var(--rg-navy);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.2;
  margin: 0;
}
.rg-squiggle { max-width: 420px; margin: 8px auto 0; opacity: 0.9; }

/* Twee-koloms content sectie */
.rg-two-col {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 56px;
  align-items: center;
}
.rg-two-col--reverse { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.rg-two-col--reverse .rg-two-col-media { order: 1; }
.rg-two-col--reverse .rg-two-col-content { order: 2; }
@media (max-width: 900px) {
  .rg-two-col, .rg-two-col--reverse { grid-template-columns: 1fr; }
  .rg-two-col--reverse .rg-two-col-media,
  .rg-two-col--reverse .rg-two-col-content { order: initial; }
}
.rg-therapy-badges { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 28px; }

/* Footer */
.rg-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
}
@media (max-width: 900px) {
  .rg-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .rg-footer-grid { grid-template-columns: 1fr; }
}
.rg-footer ul { list-style: none; margin: 0; padding: 0; }
.rg-footer li { margin-bottom: 12px; font-size: 15px; }
.rg-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 13px;
  color: rgba(255,255,255,0.55);
}

/* ==========================================================================
   Responsive fine-tuning
   ========================================================================== */
@media (max-width: 768px) {
  .rg-badge-circle { width: 48px; height: 48px; right: 12px; bottom: 12px; }
  .rg-badge-circle svg,
  .rg-badge-circle img,
  .rg-badge-circle .elementor-widget-image,
  .rg-badge-circle .elementor-widget-image img { width: 20px; height: 20px; }
}