/* The public pages: the front door and the feedback page. It loads after app.css. The green of
   the course, and the yellow of the pin flag for the one thing to do here. The card in the page
   is the app's own markup, so it keeps its rules from app.css. */
body.voorkant {
  --baan: var(--accent);
  --inkt: #15201b;
  --zacht: #5d6b63;
  --rand: #d5ddd6;
  --onderpar: #c8102e;
  --kolom: min(1160px, 100% - 32px);

  padding: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--inkt);
  background: #fff;
}
.voorkant main { padding: 0; }
.voorkant h1, .voorkant h2 {
  font-family: "Barlow Condensed", "Outfit", sans-serif;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  margin: 0;
}
.voorkant h2 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); }
.voorkant p { margin: 0; }
.held, body.voorkant.op-gras { --ring: var(--vlag); }
.kolom { width: var(--kolom); margin: 0 auto; }

/* The logo reads LIVE scoring: the favicon's red LIVE bug is its first word, so both words
   share a baseline. Equal padding centres the capitals in the red within half a pixel at
   every pixel density from 1 to 3; any other split is a pixel off at one of them. */
.logo { display: inline-flex; align-items: baseline; gap: 0.4rem; text-decoration: none; font-weight: 600; }
.bug {
  font: 700 0.95rem/1 "Barlow Condensed", sans-serif;
  letter-spacing: 0.06em;
  background: var(--onderpar);
  color: #fff;
  padding: 0.25rem 0.4rem;
}

.voorkant header.balk { display: block; padding: 0; background: var(--baan); }
.balk .kolom { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; }

.held { background: var(--baan); color: #fff; padding: 2.5rem 0 4.5rem; }
.held, .beloftes { text-align: center; }
.voorkant .held h1 { font-size: clamp(3rem, 6.6vw, 5.2rem); line-height: 0.92; letter-spacing: -0.01em; }
.held .onder { margin-top: 1.2rem; font-size: 1.35rem; line-height: 1.35; color: #d7e4da; }

/* One button starts a competition; the name follows in the setup step. */
.start { margin-top: 2rem; }
/* The one thing to do on a public page, in the yellow of the pin flag. */
.vlagknop {
  min-height: 56px;
  padding: 0 1.3rem;
  border-radius: 8px;
  background: var(--vlag);
  color: var(--baan);
  white-space: nowrap;
}
.vlagknop:hover { background: #ffee4d; }

.beloftes { border-top: 1px solid var(--rand); }
.beloftes .kolom { display: grid; grid-template-columns: repeat(3, 1fr); }
.belofte { padding: 2rem 1.8rem 2.1rem; }
.belofte + .belofte { border-left: 1px solid var(--rand); }
.voorkant .belofte h2 { font-size: 1.9rem; }
.belofte p { margin-top: 0.4rem; color: var(--zacht); }

.voorkant .lead { margin-top: 1rem; font-size: 1.12rem; max-width: 32rem; }

/* A screenshot of a real board, as wide as the column. */
.bordfoto { padding: 3.5rem 0; }
.bordfoto img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rand);
  border-radius: 8px;
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.45);
}

/* The feedback page: the form on the green, as on the front door. */
body.voorkant.op-gras { background: var(--baan); color: #fff; }
.bericht { padding: 2.5rem 0 6rem; }
.bericht .kolom > * { max-width: 36rem; }
.voorkant .bericht h1 { font-size: clamp(3rem, 7vw, 4.6rem); line-height: 0.92; letter-spacing: -0.01em; }
.voorkant .bericht .lead { color: #d7e4da; }
.bericht .lead a { color: #fff; }
.bericht form { margin-top: 2rem; }
.bericht textarea {
  display: block;
  width: 100%;
  min-height: 11rem;
  margin: 0;
  padding: 0.9rem 1rem;
  border: 0;
  border-radius: 8px;
  background: #fff;
  color: var(--inkt);
  font: inherit;
  resize: vertical;
}
.bericht .vlagknop { margin-top: 1rem; }
.voorkant .bericht .fout {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: #fee2e2;
  color: #b91c1c;
  font-weight: 500;
}

@media (max-width: 860px) {
  .held { padding: 1.5rem 0 3rem; }
  .beloftes .kolom { grid-template-columns: minmax(0, 1fr); }
  .belofte, .belofte + .belofte { padding: 1.1rem 0; border-left: 0; }
  .belofte + .belofte { border-top: 1px solid var(--rand); }
  .voorkant .belofte h2 { font-size: 1.5rem; }
  .belofte p { font-size: 1rem; }
  .bordfoto { padding: 2rem 0; }
}
@media (max-width: 480px) {
  .start .vlagknop { width: 100%; }
}

.balk nav { display: flex; align-items: center; gap: 1.1rem; }