/* styles.css — PoC „Obrázkové návody". Témata přes CSS proměnné (data-theme).
 * Brand barvy/fonty se po dokončení brandu synchronizují z brand/config.json. */

:root {
  --bg: #f7f5f0;
  --card: #ffffff;
  --text: #2b2b2b;
  --muted: #6b6b6b;
  --border: #e6e2da;
  --radius: 16px;
  --shadow: 0 4px 18px rgba(0,0,0,.06);
  --font-head: "Baloo 2", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, sans-serif;
}
/* Brand barvy synchronizované z brand/config.json (2026-06-26). */
/* Značka A — „zabal.si" (cestovní modrá + tyrkys + oranžová) */
[data-theme="baleni"]  { --primary:#2E6E8E; --primary-dark:#234F66; --accent:#F4A23B; --soft:#E6F0F4; --bg:#F4F8FA; --text:#1E2D3B; }
/* Značka B — „Šéfkuchtík" (zelená nať + rajčatová + máslová) */
[data-theme="recepty"] { --primary:#3E8E5A; --primary-dark:#2F6B44; --accent:#E5673B; --soft:#ECF4E6; --bg:#FBF7EF; --text:#33271C; }

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); line-height: 1.45;
}
h1,h2,h3 { font-family: var(--font-head); margin: 0 0 .4em; }
button { font-family: var(--font-body); cursor: pointer; }

.app { max-width: 1080px; margin: 0 auto; padding: 16px; }

header.top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 10px 4px 18px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand .logo { font-size: 34px; }
.brand .name { font-family: var(--font-head); font-weight: 700; font-size: 24px; color: var(--primary-dark); }
.brand .tag { color: var(--muted); font-size: 13px; }

.modes { display: flex; gap: 6px; background: var(--soft); padding: 5px; border-radius: 999px; }
.modes button {
  border: 0; background: transparent; padding: 8px 16px; border-radius: 999px;
  font-weight: 700; color: var(--primary-dark); font-size: 14px;
}
.modes button.active { background: var(--primary); color: #fff; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 860px){ .grid { grid-template-columns: 1fr; } }

.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.card h2 { font-size: 18px; color: var(--primary-dark); }
.hint { color: var(--muted); font-size: 13px; margin: 2px 0 12px; }

label { display:block; font-weight:700; font-size: 13px; margin: 12px 0 4px; }
textarea, input[type="text"], input[type="number"], select {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  font-family: var(--font-body); font-size: 15px; background: #fff; color: var(--text);
}
textarea { min-height: 74px; resize: vertical; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chip {
  border: 1px solid var(--border); background:#fff; border-radius: 999px;
  padding: 6px 12px; font-size: 13px; font-weight: 700; color: var(--muted);
}
.chip.on { background: var(--primary); color:#fff; border-color: var(--primary); }

.btn { border: 0; border-radius: 12px; padding: 12px 18px; font-weight: 800; font-size: 15px; }
.btn.primary { background: var(--primary); color:#fff; }
.btn.primary:hover { background: var(--primary-dark); }
.btn.ghost { background: var(--soft); color: var(--primary-dark); }
.btn.block { width: 100%; margin-top: 14px; }
.btn-row { display:flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* Editovatelný seznam (iterace) */
.items { list-style:none; margin: 6px 0 0; padding: 0; }
.items li {
  display:flex; align-items:center; gap:10px; padding: 8px; border:1px solid var(--border);
  border-radius: 10px; margin-bottom: 8px; background:#fff;
}
.items .ic { font-size: 24px; width: 32px; text-align:center; }
.items .nm { flex:1; }
.items .x { border:0; background:transparent; color:#c0392b; font-size:18px; font-weight:900; }
.add { display:flex; gap:8px; margin-top:10px; }
.add select { max-width: 84px; }

/* Náhled pro dítě */
.preview-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sheet { background:#fff; border:2px dashed var(--border); border-radius: 14px; padding: 14px; margin-top: 10px; }
.sheet h3 { text-align:center; color: var(--primary-dark); }
.tiles { display:grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width:520px){ .tiles { grid-template-columns: repeat(2,1fr); } }
.tile { border:1px solid var(--border); border-radius: 12px; padding: 12px 6px; text-align:center; background: var(--soft); }
.tile .em { font-size: 40px; display:block; }
.tile .lb { font-weight: 800; font-size: 14px; margin-top: 4px; }
.steps { counter-reset: krok; }
.steps .tile { position: relative; }
.steps .tile::before {
  counter-increment: krok; content: counter(krok);
  position:absolute; top:6px; left:8px; background: var(--accent); color:#fff;
  width: 22px; height:22px; border-radius:50%; font-weight:900; font-size:13px;
  display:flex; align-items:center; justify-content:center;
}

.fav { display:flex; align-items:center; gap:10px; padding:10px; border:1px solid var(--border); border-radius:10px; margin-bottom:8px; }
.fav .meta { flex:1; }
.fav .meta b { display:block; }
.fav .meta small { color: var(--muted); }
.empty { color: var(--muted); font-style: italic; padding: 8px 0; }

footer { text-align:center; color: var(--muted); font-size: 12px; padding: 20px; }
.badge { display:inline-block; background: var(--soft); color: var(--primary-dark); border-radius:999px; padding:2px 10px; font-size:12px; font-weight:800; }

/* TISK / PDF — vytiskne se jen náhled pro dítě */
@media print {
  body { background:#fff; }
  .app > header.top, .panel-input, .panel-fav, .preview-head .btn-row, footer, .no-print { display:none !important; }
  .grid { display:block; }
  .card { box-shadow:none; border:0; padding:0; }
  .sheet { border:0; }
  .tile { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tiles { grid-template-columns: repeat(3,1fr); }
}