/*
Theme Name: Toiletbesoeg
Theme URI: https://toiletbesoeg.dk
Author: Rasmus
Description: Simpelt ét-formåls tema: Toiletbesøg – Beregner (Comic Neue, brun palette).
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: toiletbesoeg
*/

:root{
  --brown-950:#2a1d15;
  --brown-900:#3a281e;
  --brown-800:#4b3325;
  --brown-700:#5c3e2c;
  --brown-600:#6e4a33;
  --brown-500:#845a3d;
  --brown-400:#a47352;
  --brown-300:#c3916b;
  --beige-200:#efe4d5;
  --beige-150:#f6ede3;
  --ink:#140c08;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:'Comic Neue', cursive;
  color:#f7f2ec;
  background:linear-gradient(180deg, var(--brown-800), var(--brown-950));
  min-height:100svh;
}

header.site-header{
  padding:32px 16px 18px;
  text-align:center;
  background:var(--brown-900);
}
header.site-header h1{
  margin:0 0 6px;
  font-size:clamp(24px,4.3vw,40px);
  color:#fff1da;
}
header.site-header p{
  margin:0;
  color:#f3e0c9;
  font-size:18px;
}

.wrap{
  max-width:920px;
  margin:16px auto 32px;
  padding:0 16px;
}
.card{
  background:var(--brown-700);
  border:2px solid var(--brown-900);
  border-radius:16px;
  padding:18px;
  margin-bottom:16px;
}
label{
  display:block;
  font-weight:bold;
  margin:10px 0 6px;
  color:#fff1da;
}
input[type="number"]{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--brown-900);
  background:var(--brown-900);
  color:#f7efe5;
  font-family:'Comic Neue', cursive;
}

.row{display:flex; gap:10px; flex-wrap:wrap}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  background:var(--brown-600);
  border:1px solid var(--brown-900);
  color:#fff1da;
}
.pill input{accent-color: var(--brown-300)}

.grid{display:grid; gap:12px; grid-template-columns:repeat(12,1fr)}
.col-6{grid-column:span 6}
.col-12{grid-column:span 12}
@media (max-width:860px){.col-6{grid-column:span 12}}

.kpis{display:grid; gap:12px; grid-template-columns:repeat(12,1fr)}
.kpi{
  grid-column:span 4;
  border-radius:14px;
  padding:12px;
  background:var(--brown-600);
  border:1px solid var(--brown-900);
}
.kpi h3{
  margin:0 0 6px;
  font-size:14px;
  color:#f0dfc8;
}
.kpi .v{
  font-weight:bold;
  font-size:22px;
  color:#fff1da;
}
@media (max-width:860px){.kpi{grid-column:span 12}}

.muted{color:#e7d7c0; font-size:12px}
.hr{height:2px; background:var(--brown-900); margin:10px 0}

.btn{
  padding:12px 16px;
  border-radius:12px;
  border:2px solid var(--brown-900);
  background:var(--brown-500);
  color:#2a160c;
  font-weight:bold;
  cursor:pointer;
  font-family:'Comic Neue', cursive;
}
.btn.ghost{
  background:var(--brown-300);
  color:#2a160c;
}