/* === Design tokens === */
:root{
  --brand:#6a5acd;        /* paars van de iconen/tiles */
  --text:#222;
  --muted:#6b7280;
  --shadow-lg:0 6px 18px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.05);
  --shadow-lg-hover:0 8px 22px rgba(0,0,0,.11), 0 3px 8px rgba(0,0,0,.06);
}

/* --- Plain header with tagline --- */
.brand-row { display:flex; align-items:center; gap:12px; padding:8px 16px; }
.site-tagline { font-size:1.2rem; font-weight:600; color:#333; }

/* --- No underlines anywhere --- */
a { text-decoration:none; }
a:hover { text-decoration:none; }
a:focus-visible { outline:2px solid #1e88e5; outline-offset:2px; }

/* --- iOS-style tiles --- */
.tile-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap:18px;
  padding:24px 16px 40px;
  max-width:1100px;
  margin:0 auto;
}
.tile {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#fff; border-radius:22px;
  box-shadow:var(--shadow-lg);
  padding:18px 10px; text-align:center;
  transition:transform .12s ease, box-shadow .12s ease;
}
.tile:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg-hover); }
.tile .icon, .tile svg { width:48px; height:48px; display:block; color:var(--brand); }
.tile .label { font-weight:600; font-size:.98rem; color:var(--text); }
.tile small { color:var(--muted); display:block; margin-top:4px; font-size:.78rem; }

@media (max-width:640px){
  .tile-grid { grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
}

/* --- Weer temperatuur mini (van index.html) --- */
.wx-temp { display:inline-flex; align-items:baseline; gap:2px; font-weight:800; font-size:16px; line-height:1; }
.wx-temp small { font-weight:700; font-size:12px; opacity:.9; }

/* === DIALOG (conform tegel-stijl) === */
.dialog-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  display:flex; justify-content:center; align-items:center;
  z-index:2000;
  visibility:hidden; opacity:0;
  transition: visibility 0s, opacity .3s ease;
}
.dialog-overlay.visible { visibility:visible; opacity:1; }

.dialog-content{
  background:#fff;
  padding:24px 28px;
  border-radius:16px;                   /* zelfde ronding als tegels */
  box-shadow:var(--shadow-lg);
  max-width:420px; width:90%;
  text-align:center;
  transform:translateY(-20px);
  transition:transform .3s ease-out;
}
.dialog-overlay.visible .dialog-content{ transform:translateY(0); }

.dialog-title{
  font-size:1.4em; font-weight:700;
  color:var(--brand);
  margin:0 0 .6em 0;
}
.dialog-message{
  font-size:1em; color:#444; line-height:1.5; margin:0 0 1.2em 0;
}

/* Error-variant via class i.p.v. inline styles */
.dialog-content.is-error .dialog-title{ color:#c0392b; }

/* Knop in site-stijl */
#dialog-ok-button{
  background:var(--brand); color:#fff; font-weight:600;
  border:none; border-radius:999px; padding:10px 24px; cursor:pointer;
  transition:background .2s;
}
#dialog-ok-button:hover{ background:#5544b3; }

/* Respecteer gebruikers die animatie beperken */
@media (prefers-reduced-motion: reduce){
  .dialog-overlay, .dialog-content{ transition:none }
}