/* ===== Mobile layout (iPhone 11 en kleiner) ===== */

/* ---------- Header ---------- */

/* Header blijft 1-rijig op mobiel */
.site-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto;
  gap: 8px;
  padding: 8px 10px;
}

/* Links logo: rij 1, kolom 1 */
.header-left {
  grid-column: 1;
  grid-row: 1;
}

/* Midden logo: rij 1, kolom 2 */
.header-center {
  grid-column: 2;
  grid-row: 1;
  justify-content: center;
}

/* Rechter logo: rij 1, kolom 3 */
.header-right {
  grid-column: 3;
  grid-row: 1;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
}

/* Logo’s mobiel passend */
.logo-left {
  height: 32px;
}

.logo-center {
  height: 22px;
}

.header-logo-right {
  height: 26px;
}

/* Knoppen mobiel */
.nav-btn {
  font-size: 0.85rem;
  padding: 6px 8px;
  border-radius: 8px;
}

/* ---------- Content ---------- */

/* Compactere main spacing */
.site-main {
  padding: 12px;
}

/* Kaarten zijn leidend op mobiel */
.card,
section,
.article,
.block {
  display: block;
  border: 1px solid #ddd;
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 12px;
  background: #F2C66A;
}

/* Typografie mobiel */
h1 {
  font-size: 1.25rem;
  margin: 0 0 8px 0;
}

h2 {
  font-size: 1.1rem;
  margin: 0 0 6px 0;
}

p {
  margin: 0 0 8px 0;
  font-size: 0.95rem;
}

/* Tabellen op mobiel altijd scrollbaar */
table {
  display: block;
  width: 100%;
  overflow-x: auto;
}

/* Performance: disable expensive mobile backdrop blur on fixed header */
.site-header {
  backdrop-filter: none;
}