/* ===== Tokens ===== */
:root{
  /* Brand */
  --brand-yellow:#FFE33C;         /* hero top / theme-color */
  --brand-yellow-deep:#FCC702;    /* hero bottom */

  /* Text */
  --ink:#111111;                  /* primary text */
  --muted:#333333;                /* secondary text */
  --placeholder:#8C8C8C;         /* input placeholder */
  --icon: var(--ink);             /* icon color */

  /* Accents */
  --brand-blue:#2E6EEB;           /* CTA button */

  /* Effects */
  --wave-shadow: rgba(0,0,0,.06); /* wave edge */
  --shadow-elev-2: rgba(0,0,0,.16); /* input/button drop-shadow */

  /* Radius */
  --radius-2:12px;
  --radius-3:16px;

  /* Koppeling met Bootstrap (via CSS custom properties) */
  --bs-body-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  --bs-body-color: var(--ink);
  --bs-primary: var(--brand-blue);
}

/* ===== Typografie ===== */
h1{
  font-family:"Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:800;
  text-transform:uppercase;
  font-size: clamp(40px, 12vw, 56px);
}

/* ===== Hero ===== */
.hero{
  position:relative;
  min-height:100vh;       /* fallback */
  min-height:100svh;      /* moderne mobile viewport */
  display:flex; align-items:flex-start;
  background: linear-gradient(to bottom, var(--brand-yellow) 0%, var(--brand-yellow-deep) 100%);
  color:var(--ink);
  overflow:hidden;
}
.content-constraint{
  max-width: 880px;       /* adviesbreedte */
  margin-inline:auto;
  padding-bottom: 96px;   /* ruimte voor inline footer boven de golf */
}

/* Mobile overrides */
@media (max-width: 575.98px) {
  .hero.py-5 {
    padding-top: 5px !important;   /* verwijdert de extra gele ruimte boven */
  }
  .content-constraint {
    padding-bottom: 5px;           /* haalt de extra ruimte onderaan weg */
  }
}

/* Subkop */
.lead { color:var(--muted); opacity:.9; }

/* Bullets */
.feature{ display:flex; gap:.75rem; align-items:flex-start; line-height: 1.3; }
.feature i{
  font-size:1.15rem; line-height:1; color:var(--icon); opacity:.9;
  transform: translateY(0.04em); /* mobiel: optisch op baseline */
}


/* ===== Signup ===== */

.signup { position: relative; }

.signup .form-control,
.signup .btn {
  filter: drop-shadow(0 10px 18px var(--shadow-elev-2)); /* optioneel op input */
}

.signup .form-control{
  width: 100%;
  margin-bottom: .6rem;
  border: 0; border-radius: var(--radius-3);
  padding: .9rem 1rem;
  box-shadow: none !important;
}
.signup .form-control::placeholder{ color: var(--placeholder); }

.signup .btn{
  border-radius: var(--radius-3);
  padding: .9rem 1.1rem;
  font-weight: 600;
  width: 100%;
}

/* reCAPTCHA onder het e-mailveld */
.signup .recaptcha { display:block; margin-bottom: .6rem; }
.signup .recaptcha > div { display:inline-block; } /* Google widget */

/* Optioneel: compacte max-breedte voor rust op desktop */
.signup .signup-stack { max-width: 520px; }




/* Toegankelijk focus */
.btn:focus-visible, .form-control:focus-visible{
  outline:3px solid var(--ink); outline-offset:2px;
}

/* ===== Wave ===== */
.hero-wave{
  position:absolute; left:0; right:0; bottom:-1px; line-height:0; pointer-events:none;
}
.hero-wave svg{ display:block; width:100%; height:auto; }
.hero-wave path{ fill: var(--wave-shadow); } /* subtiele schaduw */

/* Inline footer boven de golf (veilig met iOS safe-area) */
.hero-footer{
  position:absolute; left:0; right:0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  text-align:center;
}
.hero-footer a { color:inherit; text-decoration: underline; }

/* Desktop: content bovenaan, niet verticaal gecentreerd */
@media (min-width: 992px){
  .hero{ align-items: flex-start; }
}

/* Mobile: iets meer zijpadding in de hero */
@media (max-width: 575.98px){
  .hero .container{
    padding-left:clamp(16px,5vw,24px);
    padding-right:clamp(16px,5vw,24px);
  }
}