/* Site-brede layout — geldt voor alle PHP-pagina's via header.php / index.php */

:root {
  --rr-content-max: min(1680px, 94vw);
  --rr-content-pad: clamp(18px, 2.8vw, 48px);
  --rr-copy-max: min(1320px, 100%);
}

.main .container,
.page-title .container,
.site-footer .container,
.gate-main .container,
.header .header-container.container-xl {
  width: 100%;
  max-width: var(--rr-content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--rr-content-pad) !important;
  padding-right: var(--rr-content-pad) !important;
}

@media (min-width: 1400px) {
  :root {
    --rr-copy-max: min(1440px, 100%);
  }
}

/* Hero: gecentreerd over volle contentkolom (1920px en breder) */
.hub-hero > .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hub-hero h1,
.hub-hero .hub-subtitle,
.hub-hero .hub-lead,
.hub-hero .hub-cta-row,
.hub-hero .hub-hero-badge {
  width: 100%;
  max-width: var(--rr-copy-max);
  margin-left: auto;
  margin-right: auto;
}

.hub-cta-row {
  justify-content: center;
}

.hub-section > .container {
  width: 100%;
}

.hub-section-title,
.hub-section-lead {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--rr-copy-max);
}

.page-title .container {
  text-align: center;
}

.page-title h1,
.page-title p {
  max-width: var(--rr-copy-max);
  margin-left: auto;
  margin-right: auto;
}

.main .section > .container,
.contact.section > .container {
  width: 100%;
}

.links-hero,
.coming-soon,
.creator-panel {
  width: 100%;
}

@media (max-width: 767px) {
  .hub-hero > .container {
    align-items: stretch;
    text-align: left;
  }

  .hub-cta-row {
    justify-content: flex-start;
  }

  .hub-section-title,
  .hub-section-lead {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
}