/* ===================================================================
   BuzzBij.nl — frontpage.css
   Minimale stylesheet voor index.php: CTA-knoppen.
   =================================================================== */

:root{
  --bb-text: #1a1a1a;
}

/* Basisknoppen (zoals je desktop) */
.bb-btn-1, .bb-btn-2{
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none; border-radius:999px; padding:11px 18px;
  font-size:16px; font-weight:800; letter-spacing:.02em;
  transition: transform .12s ease, background-color .12s ease,
             border-color .12s ease, color .12s ease, box-shadow .12s ease;
}

/* Donker (primaire) — "Bekijk mijn plannen" */
.bb-btn-1{
  color:#f2f6f4;
  background: linear-gradient(180deg, #4b6156, #3d5148);
  -webkit-backdrop-filter: blur(2px) saturate(1.04);
  backdrop-filter: blur(2px) saturate(1.04);
  border:1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 6px 20px rgba(0,0,0,.20);
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.bb-btn-1:hover{
  transform:translateY(-1px);
  background: linear-gradient(180deg, #577567, #475d53);
  border-color: rgba(255,255,255,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 26px rgba(0,0,0,.25);
}
.bb-btn-1:focus-visible{ outline:2px solid rgba(255,255,255,.45); outline-offset:2px; }

/* Goud (accent) — "Steun het voedselbos" */
.bb-btn-2{
  color:#2f2202;
  background: linear-gradient(180deg, #f3cd6b, #e2b552);
  border:1px solid #d29f3a;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 8px 24px rgba(210,159,58,.25);
}
.bb-btn-2:hover{
  transform:translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 10px 28px rgba(210,159,58,.30);
}
.bb-btn-2:focus-visible{ outline:2px solid rgba(210,159,58,.45); outline-offset:2px; }

/* ================================================================
   Frontpage — mobiele layout tweaks (alleen kleine schermen)
   Desktop blijft 100% onaangeroerd.
   ================================================================ */
@media (max-width: 480px){
  /* Veilige verticale ruimte + extra bodemruimte zodat CTA's boven de footer blijven */
  main.bb-front{
    min-height: calc(100svh - var(--bb-safe-top));
    padding-left: 18px;
    padding-right: 18px;
    padding-bottom: calc(env(safe-area-inset-bottom, 0) + 72px); /* ↑ meer lucht boven footer */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 16px;
  }

  /* Hero-typografie: compacter, zodat CTA's hoger komen */
  .bb-front .hero{ text-align:center; max-width: 30ch; margin-inline:auto; }
  .bb-front .hero h1{ font-size: clamp(26px, 5.4vw, 33px); line-height: 1.15; }
  .bb-front .hero p{ font-size: clamp(14px, 3.4vw, 16px); line-height: 1.45; }

  /* CTA’s exact gecentreerd, zelfde maat */
  .bb-front .cta-row{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin-inline: auto;
  }
  .bb-front .cta-row > a{
    display:flex; justify-content:center; align-items:center;
    width: min(86vw, 320px) !important;  /* compacter + hard centreren */
    min-height: 44px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}