/* Recepti — skupen slog. Ena datoteka za vse recepte in kazalo.
   Barve povzete po originalnem "Broadsheet" izvozu, poenostavljeno.
   Temni nacin: samodejno po sistemu, gumb zgoraj desno ga povozi. */

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/SourceSerif4-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/SourceSerif4-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/SourceSerif4-italic-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("fonts/SourceSerif4-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- barvni zetoni ---------- */
:root {
  color-scheme: light;
  --bg: #f3f2f2;
  --paper: #ffffff;
  --text: #201e1d;
  --muted: #444141;
  --line: #201e1d;
  --line-soft: #d7d3d3;
  --accent: #006786;
  --accent-kontrast: #ffffff;
  --napaka: #b0281a;
  --zelena: #3f9a43;
  --font: "Source Serif 4", Georgia, "Times New Roman", serif;
  --s1: 5px; --s2: 10px; --s3: 15px; --s4: 20px; --s6: 30px; --s8: 40px;
}

/* Temni nacin po sistemu, razen ce je uporabnik rocno izbral svetlega. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="svetlo"]) {
    color-scheme: dark;
    --bg: #191817;
    --paper: #211f1e;
    --text: #eae7e4;
    --muted: #a9a3a0;
    --line: #565150;
    --line-soft: #3a3635;
    --accent: #55c2e6;
    --accent-kontrast: #10201f;
    --napaka: #ff8a80;
    --zelena: #6ccf70;
  }
}
/* Rocna izbira povozi sistem v obe smeri. */
:root[data-tema="temno"] {
  color-scheme: dark;
  --bg: #191817;
  --paper: #211f1e;
  --text: #eae7e4;
  --muted: #a9a3a0;
  --line: #565150;
  --line-soft: #3a3635;
  --accent: #55c2e6;
  --accent-kontrast: #10201f;
  --napaka: #ff8a80;
  --zelena: #6ccf70;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  padding: var(--s8) var(--s4);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
}
.stran { max-width: 940px; margin: 0 auto; }

/* ---------- vrstica z naslovom in gumbi ----------
   Posodo .orodja zgradi _assets/tema.js (RECEPTI_ORODJA), vanjo pa gresta
   gumb "nazaj" (levo) in preklop teme (desno). */
.naslovna-vrstica {
  display: flex; align-items: center; gap: var(--s4);
  margin: 0 0 var(--s4);
}
.naslovna-vrstica h1 { flex: 1 1 auto; margin: 0; min-width: 0; }
.orodja { display: flex; align-items: center; gap: var(--s2); flex: 0 0 auto; }

.tema-gumb, .budnost-gumb, .jezik-gumb {
  font: inherit; font-size: 1rem; line-height: 1;
  width: 38px; height: 38px; padding: 0; cursor: pointer;
  border: 1px solid var(--line-soft); border-radius: 50%;
  background: var(--paper); color: var(--text);
  opacity: .65;
}
.tema-gumb:hover, .tema-gumb:focus-visible,
.budnost-gumb:hover, .budnost-gumb:focus-visible,
.jezik-gumb:hover, .jezik-gumb:focus-visible { opacity: 1; }
/* jezik: na gumbu je koda jezika, v katerega preklopi */
.jezik-gumb { font-size: .78rem; font-weight: 600; letter-spacing: .06em; }
/* zaslon ostane prizgan: skodelica v barvi poudarka, izklop je siv */
.budnost-gumb { display: inline-flex; align-items: center; justify-content: center; }
.budnost-gumb svg { width: 18px; height: 18px; }
.budnost-gumb[aria-pressed="true"] { color: var(--accent); }

/* ---------- gumb nazaj v HA ----------
   Doda ga _assets/ha-nazaj.js, in to samo, kadar je stran vgrajena v
   dashboard. Oblikovan po mushroom badgeu iz dashboarda: pilula z zelenim
   krogcem in oznako. */
.ha-nazaj {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 4px 14px 4px 4px; cursor: pointer;
  border: 1px solid var(--line-soft); border-radius: 999px;
  background: var(--paper); color: var(--text);
  font: inherit; font-size: .95rem; line-height: 1;
}
.ha-nazaj .ikona {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: color-mix(in srgb, var(--zelena) 20%, transparent);
  color: var(--zelena);
}
.ha-nazaj:hover, .ha-nazaj:focus-visible { border-color: var(--zelena); }

/* Zasilno: ce brskalnik iz predpomnilnika potegne staro skripto, ki gumb doda
   naravnost v <body> namesto v .orodja, naj vsaj ne obvisi na dnu strani.
   Gumbov v .orodja to ne zadeva - tam niso neposredni otroci telesa. */
body > .ha-nazaj { position: fixed; top: 10px; left: 10px; z-index: 10; }
body > .tema-gumb { position: fixed; top: 10px; right: 10px; z-index: 10; }

/* ---------- glava ---------- */
.kicker {
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin-bottom: var(--s3);
}
h1 {
  font-size: clamp(2.2rem, 7vw, 4.6rem);
  line-height: .98; font-weight: 600; letter-spacing: -.02em;
  margin: 0 0 var(--s4);
}
.lead { font-size: 1.05rem; max-width: 34em; margin: 0 0 var(--s6); color: var(--muted); }
.nazaj { display: inline-block; margin-bottom: var(--s4); color: var(--accent); text-decoration: none; font-size: .9rem; }
.nazaj:hover { text-decoration: underline; }

/* ---------- izbira kolicine ---------- */
.kolicina { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-bottom: var(--s6); }
.kolicina .oznaka { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-right: var(--s2); }
.kolicina button {
  font: inherit; font-weight: 600; font-size: .95rem;
  padding: var(--s2) var(--s4); cursor: pointer;
  border: 1px solid var(--line); border-radius: 2px;
  background: transparent; color: var(--text);
}
.kolicina button[aria-pressed="true"] { background: var(--text); color: var(--bg); }

/* ---------- tabela recepta ---------- */
.tabela-ovoj { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.recept {
  width: 100%; border-collapse: collapse; border: 2px solid var(--line);
  background: var(--paper); font-size: 1rem; line-height: 1.35;
}
table.recept td { border: 1px solid var(--line); padding: var(--s3) var(--s4); vertical-align: middle; }
table.recept td.predgretje { text-align: center; font-weight: 600; }
table.recept td.sestavina { width: 34%; }
table.recept td.korak { text-align: center; font-weight: 600; color: var(--accent); }
table.recept td.korak.tih { color: var(--text); font-weight: 400; }
table.recept td.korak.zakljucek { color: var(--text); font-weight: 600; }
.kol { font-variant-numeric: tabular-nums; }

/* ---------- odkljukano med kuhanjem ----------
   Stanje je v brskalniku (localStorage), torej po napravi. Klik na sestavino
   ali korak ga preklopi; "Prični od začetka" ga pobrise. */
table.recept td[data-s], table.recept td[data-k],
.zlozeno ul.sestavine li[data-s], .zlozeno ol.koraki li[data-k] { cursor: pointer; }
.opravljeno { text-decoration: line-through; opacity: .42; }
table.recept td.opravljeno { background: color-mix(in srgb, var(--text) 6%, transparent); }
/* Druga mera v oklepaju - pomozen podatek, ne sme tekmovati s kolicino.
   nowrap drzi "(4,5 cups)" skupaj, lomi pa se lahko pred oklepajem. */
.merica { color: var(--muted); font-size: .9em; white-space: nowrap; }

/* ---------- zlozen prikaz za telefon ---------- */
.zlozeno { display: none; }
.zlozeno h2 { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: var(--s6) 0 var(--s2); font-weight: 600; }
.zlozeno .predgretje-box { border: 2px solid var(--line); background: var(--paper); padding: var(--s3) var(--s4); font-weight: 600; text-align: center; }
.zlozeno ul.sestavine { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); background: var(--paper); }
.zlozeno ul.sestavine li { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line-soft); }
.zlozeno ul.sestavine li:last-child { border-bottom: 0; }
.zlozeno ol.koraki { margin: 0; padding-left: 1.4em; }
.zlozeno ol.koraki li { margin-bottom: var(--s3); }
.zlozeno ol.koraki li b { color: var(--accent); }

/* ---------- diagram plasti ----------
   Vsebina, ne kontrola: vidi se v obeh prikazih in se tudi natisne.
   Postavitev se drzi tabele recepta - 1 px okvir, ime levo, barvni
   vzorec desno. */
.plasti { margin-top: var(--s6); max-width: 34em; break-inside: avoid; }
.plasti h2 {
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 var(--s2); font-weight: 600;
}
.plasti-seznam { border: 1px solid var(--line); background: var(--paper); }
.plast { display: flex; align-items: stretch; border-bottom: 1px solid var(--line); }
.plast:last-child { border-bottom: 0; }
.plast .ime { flex: 1 1 auto; padding: var(--s2) var(--s4); }
.plast .vzorec {
  flex: 0 0 60px; width: 60px; min-height: 1.9em;
  border-left: 1px solid var(--line);
  background: var(--line-soft);
}

/* ---------- hranilna vrednost ----------
   Na koncu recepta. Stevilke desno in tabelarno, da se enice poravnajo. */
.hranila { margin-top: var(--s6); max-width: 34em; break-inside: avoid; }
.hranila h2 {
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 var(--s2); font-weight: 600;
}
.hranila h2 .pribl { color: var(--muted); font-weight: 400; margin-left: var(--s1); }
.hranila table {
  width: 100%; border-collapse: collapse; border: 1px solid var(--line);
  background: var(--paper); font-size: .95rem; line-height: 1.35;
}
.hranila th, .hranila td {
  border: 1px solid var(--line); padding: var(--s1) var(--s3);
  text-align: right; font-variant-numeric: tabular-nums;
}
.hranila tr > :first-child { text-align: left; }
.hranila tbody th { font-weight: 400; }
.hranila tbody th .enota { color: var(--muted); font-size: .85em; white-space: nowrap; }
.hranila thead th {
  font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.hranila table.povzetek td { font-weight: 600; }
/* overflow: ce je ime sestavine dolgo, se premika tabela, ne cela stran */
.po-sestavinah { margin-top: var(--s2); overflow-x: auto; }
.po-sestavinah summary { cursor: pointer; font-size: .9rem; color: var(--accent); padding: var(--s1) 0; }
.po-sestavinah table { font-size: .88rem; }
.hranila .opomba { margin: var(--s2) 0 0; font-size: .85rem; color: var(--muted); }

/* ---------- kosarica ---------- */
.akcije { margin-top: var(--s4); display: flex; flex-wrap: wrap; gap: var(--s2); }
button.glavni, a.glavni {
  font: inherit; font-weight: 600; font-size: .95rem;
  padding: var(--s2) var(--s4); cursor: pointer;
  border: 1px solid var(--accent); border-radius: 2px;
  background: var(--accent); color: var(--accent-kontrast);
}
button.glavni[disabled] { opacity: .5; cursor: default; }
button.tanki, a.tanki {
  font: inherit; font-size: .95rem; padding: var(--s2) var(--s4); cursor: pointer;
  border: 1px solid var(--line); border-radius: 2px; background: transparent; color: var(--text);
}
button.tanki[disabled] { opacity: .5; cursor: default; }
/* povezava, ki mora biti <a> (download, target) - izgleda kot gumb */
a.glavni, a.tanki { display: inline-block; text-decoration: none; line-height: normal; }
.kosarica {
  border: 1px solid var(--line); background: var(--paper);
  padding: var(--s3) var(--s4); margin-top: var(--s3); max-width: 34em;
}
.kosarica h2 { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 var(--s2); font-weight: 600; }
.kosarica label { display: flex; gap: var(--s2); align-items: baseline; padding: var(--s1) 0; cursor: pointer; }
.kosarica label input { margin: 0; accent-color: var(--accent); }
.kosarica label .enota { color: var(--muted); font-size: .9rem; }
.kosarica .gumbi { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s3); }
.obvestilo { margin-top: var(--s3); font-size: .95rem; min-height: 1.4em; }
.obvestilo.ok { color: var(--accent); }
.obvestilo.napaka { color: var(--napaka); }

/* ---------- izvoz kot slika ----------
   Predogled PNG-ja; deljenje gre sele z gumba v njem, ker ga brskalnik
   dovoli le takoj po kliku. Okvir se centrira z margin: auto, da pri
   nizkem zaslonu ne odreze vrha. */
.izvoz-okno {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100;
  display: flex; overflow-y: auto; padding: var(--s3);
  background: rgba(0, 0, 0, .6);
}
.izvoz-okno .okvir {
  margin: auto; max-width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: var(--s3);
  padding: var(--s3); background: var(--paper); border: 1px solid var(--line-soft);
}
.izvoz-okno img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: calc(100vh - 10rem);
  border: 1px solid var(--line-soft);
}
.izvoz-okno .gumbi { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
.izvoz-okno .namig { margin: 0; font-size: .9rem; color: var(--napaka); }
.izvoz-okno .namig:empty { display: none; }

/* ---------- noga (samo javna stran, doda jo jezik.js) ---------- */
.noga {
  margin-top: var(--s8); padding-top: var(--s3);
  border-top: 1px solid var(--line-soft);
  font-size: .85rem; color: var(--muted);
}
.noga a { color: inherit; }
.noga a:hover { color: var(--accent); }

/* ---------- opombe ---------- */
.opombe { display: flex; flex-wrap: wrap; gap: var(--s6) var(--s8); margin-top: var(--s6); max-width: 46em; }
.opombe p { margin: 0; font-size: .95rem; color: var(--muted); flex: 1 1 14em; }

/* ---------- kazalo ---------- */
#iskanje {
  font: inherit; width: 100%; max-width: 28em; padding: var(--s2) var(--s3);
  border: 1px solid var(--line); border-radius: 2px; background: var(--paper);
  color: var(--text); margin-bottom: var(--s6);
}
/* filter po sestavinah v kazalu */
.sestavine-filter { margin-bottom: var(--s6); }
.sestavine-filter > button { padding: var(--s2) var(--s3); font-size: .9rem; }
.sestavine-filter .telo {
  margin-top: var(--s3); padding: var(--s3);
  border: 1px solid var(--line-soft); border-radius: 2px;
}
.sestavine-filter .glava {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s2); margin-bottom: var(--s2);
}
.sestavine-filter .glava .kicker { margin: 0; }
#iskanje-sestavin {
  font: inherit; font-size: .9rem; width: 12em; padding: var(--s1) var(--s2);
  border: 1px solid var(--line-soft); border-radius: 2px;
  background: var(--paper); color: var(--text);
}
.sestavine-filter .glava button { padding: var(--s1) var(--s3); font-size: .85rem; }
.filter-sestavin { display: flex; flex-wrap: wrap; gap: var(--s1); }

/* filter po kategorijah - stalno viden, ker je kategorij malo */
.filter-kategorij { display: flex; flex-wrap: wrap; gap: var(--s1); margin-bottom: var(--s4); }
#iskanje + .filter-kategorij { margin-top: calc(var(--s3) * -1); }
.filter-kategorij button.chip { padding: var(--s2) var(--s3); font-size: .95rem; }
button.chip {
  font: inherit; font-size: .9rem; cursor: pointer;
  padding: var(--s1) var(--s2);
  border: 1px solid var(--line-soft); border-radius: 2px;
  background: var(--paper); color: var(--text);
}
button.chip:hover { border-color: var(--line); }
button.chip .n { color: var(--muted); font-size: .8em; }
button.chip[aria-pressed="true"] {
  background: var(--text); color: var(--bg); border-color: var(--text);
}
button.chip[aria-pressed="true"] .n { color: var(--bg); opacity: .7; }

ul.kazalo { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
ul.kazalo li.locnica {
  font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); padding: var(--s4) var(--s1) var(--s2);
  border-bottom: 1px solid var(--line);
}
ul.kazalo .ujema, ul.kazalo .manjka { font-size: .8rem; }
ul.kazalo .ujema { color: var(--accent); }
ul.kazalo .manjka { color: var(--muted); font-style: italic; }
ul.kazalo li { border-bottom: 1px solid var(--line); }
ul.kazalo a { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s3); padding: var(--s4) var(--s1); text-decoration: none; color: inherit; }
ul.kazalo a:hover { background: var(--paper); }
ul.kazalo .ime { font-size: 1.3rem; font-weight: 600; }
ul.kazalo .kat { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
ul.kazalo .opis { flex: 1 1 100%; font-size: .95rem; color: var(--muted); }
.prazno { color: var(--muted); font-style: italic; padding: var(--s4) 0; }

@media (max-width: 700px) {
  body { padding: var(--s6) var(--s3); font-size: 16px; }
  .tabela-ovoj { display: none; }
  .zlozeno { display: block; }
  .kosarica { max-width: none; }
  .hranila th, .hranila td { padding: var(--s1) var(--s2); }
  .hranila thead th { letter-spacing: .04em; }
  .po-sestavinah table { font-size: .82rem; }
}

/* Ozek telefon (360 px): tri kolone hranil z dolgimi slovenskimi naslovi
   (»Na 100 g surovega«, »Za 4 ciabatte«) z velikimi crkami ne gredo v 330 px. */
@media (max-width: 420px) {
  .hranila table.povzetek th, .hranila table.povzetek td { padding: var(--s1) 6px; }
  .hranila table.povzetek thead th { text-transform: none; letter-spacing: 0; font-size: .78rem; }
}

@media print {
  body { background: #fff; color: #000; padding: 0; font-size: 11pt; }
  .kolicina, .nazaj, .akcije, .kosarica, .obvestilo, .tema-gumb, .budnost-gumb, .jezik-gumb, .ha-nazaj, .izvoz-okno, .noga { display: none; }
  /* natisnjen izvod je cist: kar je bilo odkljukano med kuhanjem, se ne vidi */
  .opravljeno { text-decoration: none; opacity: 1; background: none; }
  .tabela-ovoj { display: block; overflow: visible; }
  .zlozeno { display: none; }
  table.recept { background: #fff; }
  table.recept td { border-color: #000; }
  /* diagram plasti je vsebina - natisne se, in to na eni strani */
  .plasti { break-inside: avoid; page-break-inside: avoid; }
  .plasti-seznam { background: #fff; border-color: #000; }
  .plast, .plast .vzorec { border-color: #000; }
  .plast .vzorec { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .hranila table { background: #fff; border-color: #000; }
  .hranila th, .hranila td { border-color: #000; }
  .po-sestavinah:not([open]) { display: none; }
  a { color: inherit; text-decoration: none; }
}