/* =====================================================================
   Stecky — Stijl-kit (helpers)
   ---------------------------------------------------------------------
   Laadt als laatste op elke variant (desktop, mobiel, app). De kit-
   waarden (tokens, knoppen, invoervelden, kaarten, schakelaars) zitten
   nu in style.css/ios-2026.css zelf — één bron van waarheid. Dit bestand
   bevat alleen nog herbruikbare helpers zodat nieuwe UI meteen in stijl
   staat, exact volgens de stijl-kit.
   ===================================================================== */

/* Knoppen dragen nooit een schaduw (vlak, twee types: oranje + grijs) */
.btn{ box-shadow:none; }

/* Sectielabel in kapitalen */
.kit-label{
  font-size:12px; font-weight:500; letter-spacing:.02em;
  text-transform:none; color:var(--ink-3);
  margin:22px 2px 10px;
}

/* Kaart-oppervlak */
.kit-card{
  background:var(--paneel); border-radius:var(--radius);
  padding:18px; box-shadow:var(--schaduw);
}

/* Segmented control (witte baan, actief = accent) */
.kit-seg{
  display:flex; gap:4px; background:var(--paneel);
  border-radius:var(--radius-pill); padding:4px; box-shadow:var(--schaduw);
}
.kit-seg > *{
  flex:1; text-align:center; padding:11px 0; border:none;
  border-radius:var(--radius-pill); background:none; cursor:pointer;
  font:inherit; font-size:14px; font-weight:500; color:var(--ink-2);
}
.kit-seg > .actief{ background:var(--indigo); color:#fff; font-weight:500; }

/* Ronde icoonknop (46px) + accent-variant */
.kit-ico{
  width:46px; height:46px; border-radius:50%;
  background:var(--paneel); display:grid; place-items:center;
  box-shadow:var(--schaduw); border:none; cursor:pointer; color:var(--ink);
}
.kit-ico.accent{ background:var(--indigo); color:#fff; }

/* Icoon-tegel binnen een kaart (52px, zacht-oranje) */
.kit-tile{
  width:52px; height:52px; border-radius:15px;
  background:var(--indigo-soft); color:var(--indigo);
  display:grid; place-items:center; flex:none;
}

/* Knop */
.kit-btn{
  border:none; cursor:pointer; font:inherit; line-height:1;
  border-radius:var(--radius-pill); font-size:15px; font-weight:500;
  padding:14px 22px; background:#e6e6e6; color:var(--ink);
}
.kit-btn.primary{ background:var(--indigo); color:#fff; }

/* Invoerveld met icoon */
.kit-input{
  display:flex; align-items:center; gap:10px;
  background:var(--paneel); border:1px solid var(--lijn);
  border-radius:16px; padding:13px 16px; box-shadow:var(--schaduw);
  color:var(--ink-3);
}
.kit-input input{
  border:none; outline:none; background:none; box-shadow:none;
  padding:0; flex:1; font:inherit; font-size:15px; color:var(--ink);
}

/* Schakelaar (kit-maat: 56×32 baan, 26px knop, power-icoon) */
.kit-toggle{ position:relative; width:56px; height:32px; flex:none; display:inline-block; }
.kit-toggle input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; z-index:1; }
.kit-toggle .baan{ position:absolute; inset:0; border-radius:var(--radius-pill); background:var(--lijn-2); transition:.2s; }
.kit-toggle .baan::after{
  content:""; position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%;
  background:#fff center/15px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%238e8e93%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M12%203v9%27/%3E%3Cpath%20d%3D%27M6.5%207a8%208%200%201%200%2011%200%27/%3E%3C/svg%3E");
  box-shadow:0 1px 3px rgba(0,0,0,.2); transition:.2s;
}
.kit-toggle input:checked + .baan{ background:var(--indigo); }
.kit-toggle input:checked + .baan::after{
  transform:translateX(24px);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23ff7200%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M12%203v9%27/%3E%3Cpath%20d%3D%27M6.5%207a8%208%200%201%200%2011%200%27/%3E%3C/svg%3E");
}

/* =====================================================================
   Paginakop — één bron van waarheid
   ===================================================================== */

/* Pagina-titel + subtitel overal verbergen (elke pagina, web én mobiel).
   De topbar-groet en de mobiele header tonen de context al. */
.paginakop h1,
.content > h1,
.paginakop .sub,
.content > .sub{ display:none; }

/* Kop-actieknoppen netjes uitgelijnd op mobiel:
   losse knop = volle breedte · groep knoppen = gelijk verdeeld naast elkaar */
@media (max-width:820px){
  .paginakop{ display:flex; flex-direction:column; align-items:stretch; gap:12px; }
  .paginakop > .btn{ width:auto; justify-content:center; margin-top:0; }
  .paginakop > div:last-child{ width:100%; }
  .paginakop > div:last-child > .btn{
    flex:1 1 0; min-width:0; width:auto; margin-top:0; justify-content:center;
  }
}