/* Izgled savjetnica.com. Šareniji sustav: svaki stup ima svoje boje (--stup*), ikone su inline SVG, bez web fontova i slika. */
:root {
  --pozadina: #fffaf4;
  --povrsina: #ffffff;
  --tekst: #23201d;
  --tekst-blago: #5f5750;
  --rub: #efe3d6;
  --brend: #d9482b;
  --brend-2: #f39a3d;
  --brend-blago: #fff0e6;
  --poveznica: #1f6f5c;
  --zuto: #fff4cc;
  --sjena: 0 1px 2px rgb(35 32 29 / 6%), 0 8px 24px rgb(35 32 29 / 8%);
  --sjena-jaca: 0 4px 10px rgb(35 32 29 / 8%), 0 18px 40px rgb(35 32 29 / 12%);
  --naslovni: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --tekstni: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r: 18px;
  --siroko: 72rem;
  /* zadani stup = brend */
  --stup: var(--brend); --stup-2: var(--brend-2); --stup-blago: var(--brend-blago); --stup-tamno: #8f2a15;
}
.stup-sanjarica { --stup: #5b3fd1; --stup-2: #9b6bff; --stup-blago: #f0ebff; --stup-tamno: #1d1747; }
.stup-sati { --stup: #0e8a8c; --stup-2: #33c3b5; --stup-blago: #e2f6f3; --stup-tamno: #0b4f50; }
.stup-recepti { --stup: #e04a26; --stup-2: #f7a23c; --stup-blago: #fff0e7; --stup-tamno: #8a2a12; }
.stup-dom { --stup: #2c8a55; --stup-2: #8fcf4f; --stup-blago: #e7f6ea; --stup-tamno: #1b5534; }
.stup-citati { --stup: #1f6fb8; --stup-2: #4cc0e8; --stup-blago: #e5f2fb; --stup-tamno: #123f69; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--pozadina); color: var(--tekst); font: 1.125rem/1.65 var(--tekstni); }
img { max-width: 100%; height: auto; border-radius: var(--r); }
a { color: var(--poveznica); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { color: var(--stup); }
h1, h2, h3 { font-family: var(--naslovni); line-height: 1.18; letter-spacing: -.012em; text-wrap: balance; }
h2 { margin: 2.2rem 0 .8rem; }
:focus-visible { outline: 3px solid var(--stup); outline-offset: 2px; border-radius: 6px; }
.skok { position: absolute; left: -999px; }
.ikona { flex: none; vertical-align: -.15em; }
.wp-site-blocks { padding: 0; }
.glavno { padding-top: 1.25rem; padding-bottom: 3rem; }

/* ---------- zaglavlje ---------- */
.zaglavlje { background: rgb(255 255 255 / 92%); border-bottom: 1px solid var(--rub); position: sticky; top: 0; z-index: 5; backdrop-filter: saturate(1.4) blur(8px); }
.zaglavlje__unutra { max-width: var(--siroko); margin: 0 auto; padding: .6rem 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.25rem; }
.zaglavlje nav { flex: 1 1 auto; min-width: 0; max-width: 100%; }
.logo, .logo a { font: 800 1.6rem/1 var(--naslovni); text-decoration: none; margin: 0; background: linear-gradient(90deg, var(--brend), var(--brend-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.izbornik { display: flex; gap: .4rem; overflow-x: auto; margin: 0; padding: 0 0 2px; list-style: none; scrollbar-width: none; }
.izbornik a { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; min-height: 44px; border-radius: 999px; background: var(--pozadina); color: var(--tekst); text-decoration: none; font-size: .95rem; font-weight: 600; white-space: nowrap; border: 1px solid var(--rub); }
.izbornik a::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--stup); }
.izbornik a:hover, .izbornik a[aria-current] { background: #fff; border-color: var(--stup); color: var(--tekst); }

/* ---------- hero (početna) ---------- */
.hero { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 0% 0%, #ffe3d3 0%, transparent 55%), radial-gradient(90% 80% at 100% 10%, #e8e1ff 0%, transparent 55%), radial-gradient(80% 70% at 60% 100%, #d9f3ee 0%, transparent 60%), #fff8f1; padding: 2.5rem 1rem 2.25rem; }
.hero__unutra { position: relative; z-index: 1; max-width: 44rem; margin: 0 auto; text-align: center; }
.hero__nadnaslov { display: inline-flex; align-items: center; gap: .4rem; background: #fff; border: 1px solid var(--rub); border-radius: 999px; padding: .3rem .8rem; font-size: .85rem; font-weight: 700; color: var(--brend); margin: 0 0 .9rem; box-shadow: var(--sjena); }
.hero__naslov { font-size: clamp(2.1rem, 1.3rem + 4vw, 3.6rem); margin: 0 0 .7rem; }
.hero__naslov span { background: linear-gradient(90deg, #5b3fd1, #b45cf0 45%, #e04a26); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__podnaslov { color: var(--tekst-blago); font-size: 1.15rem; margin: 0 auto 1.4rem; max-width: 34rem; }
.hero__trazi { display: flex; align-items: center; gap: .5rem; background: #fff; border-radius: 999px; padding: .35rem .35rem .35rem 1rem; box-shadow: var(--sjena-jaca); border: 2px solid #fff; color: var(--tekst-blago); }
.hero__trazi:focus-within { border-color: var(--brend-2); }
.hero__trazi input { flex: 1; min-width: 0; border: 0; font: inherit; padding: .6rem .2rem; background: transparent; outline: none; }
.hero__trazi button { font: 700 1rem var(--tekstni); color: #fff; border: 0; border-radius: 999px; padding: .75rem 1.3rem; min-height: 44px; cursor: pointer; background: linear-gradient(90deg, var(--brend), var(--brend-2)); }
.hero__brzo { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 1rem 0 0; font-size: .92rem; }
.hero__brzo span { color: var(--tekst-blago); align-self: center; margin-right: .2rem; }
.hero__brzo a { background: rgb(255 255 255 / 75%); border: 1px solid #fff; border-radius: 999px; padding: .3rem .75rem; text-decoration: none; color: #4a32b8; font-weight: 600; }
.hero__ukras span { position: absolute; opacity: .9; }
.hero__ukras .u1 { color: #7b5be6; top: 1.2rem; left: 4%; transform: rotate(-12deg); }
.hero__ukras .u2 { color: #f08a3a; bottom: 1rem; left: 8%; transform: rotate(8deg); }
.hero__ukras .u3 { color: #2c9a62; top: 1.5rem; right: 5%; transform: rotate(10deg); }
.hero__ukras .u4 { color: #f2b632; bottom: 2.5rem; right: 12%; }
.hero__ukras .u5 { color: #9b6bff; top: 45%; right: 3%; }
@media (max-width: 40rem) { .hero__ukras .u1, .hero__ukras .u2, .hero__ukras .u3 { opacity: .22; } }

.naslov-sekcije { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); display: flex; align-items: center; gap: .6rem; }
.naslov-sekcije::after { content: ""; flex: 1; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--brend-2), transparent); }

/* ---------- stupovi ---------- */
.stupovi-mreza { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); margin: 0 0 2rem; }
.stup-kartica { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: 1.25rem 1.25rem 1.1rem; border-radius: var(--r); text-decoration: none; color: var(--tekst); background: linear-gradient(160deg, var(--stup-blago), #fff 70%); border: 1px solid color-mix(in srgb, var(--stup) 18%, #fff); box-shadow: var(--sjena); transition: transform .15s ease, box-shadow .15s ease; overflow: hidden; }
.stup-kartica::after { content: ""; position: absolute; right: -2.5rem; top: -2.5rem; width: 7rem; height: 7rem; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--stup-2) 35%, transparent), transparent 70%); }
.stup-kartica:hover { transform: translateY(-3px); box-shadow: var(--sjena-jaca); color: var(--tekst); }
.stup-kartica__ikona { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--stup), var(--stup-2)); box-shadow: 0 6px 16px color-mix(in srgb, var(--stup) 35%, transparent); margin-bottom: .35rem; }
.stup-kartica strong { font: 700 1.3rem/1.2 var(--naslovni); }
.stup-kartica__opis { color: var(--tekst-blago); font-size: 1rem; }
.stup-kartica__broj { margin-top: auto; padding-top: .5rem; font-weight: 700; font-size: .95rem; color: var(--stup); }

/* ---------- sezonsko, najčitanije, savjet ---------- */
.sezonsko { display: grid; gap: 1rem; align-items: center; background: linear-gradient(100deg, #ff7a45, #ffb547); color: #fff; border-radius: var(--r); padding: 1.1rem 1.25rem; box-shadow: var(--sjena); margin: 0 0 2rem; }
@media (min-width: 48rem) { .sezonsko { grid-template-columns: auto 1fr; } }
.sezonsko__naslov { display: flex; gap: .7rem; align-items: center; }
.sezonsko__naslov strong { display: block; font: 700 1.25rem var(--naslovni); }
.sezonsko__naslov span { font-size: .9rem; opacity: .92; }
.sezonsko ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.sezonsko a { display: inline-flex; align-items: center; gap: .45rem; background: #fff; color: var(--tekst); text-decoration: none; border-radius: 999px; padding: .45rem .85rem; font-weight: 600; font-size: .95rem; min-height: 44px; }
.stup-tocka { width: .6rem; height: .6rem; border-radius: 50%; background: var(--stup); }
.dvostupac { display: grid; gap: 1.25rem; margin-bottom: 2rem; }
@media (min-width: 48rem) { .dvostupac { grid-template-columns: 1.6fr 1fr; align-items: start; } }
.popularno { background: var(--povrsina); border-radius: var(--r); padding: 1.1rem 1.25rem; box-shadow: var(--sjena); border: 1px solid var(--rub); }
.popularno h2 { margin: 0 0 .6rem; font-size: 1.4rem; display: flex; gap: .5rem; align-items: center; color: var(--brend); }
.popularno ol { list-style: none; margin: 0; padding: 0; }
.popularno li { display: grid; grid-template-columns: 2.6rem 1fr; gap: .2rem .6rem; align-items: center; padding: .6rem 0; border-top: 1px dashed var(--rub); }
.popularno li:first-child { border-top: 0; }
.popularno__br { grid-row: span 2; font: 800 2rem/1 var(--naslovni); background: linear-gradient(135deg, var(--stup), var(--stup-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.popularno a { font-weight: 700; color: var(--tekst); text-decoration: none; }
.popularno a:hover { color: var(--stup); }
.znacka { display: inline-flex; align-items: center; gap: .3rem; width: fit-content; font-size: .78rem; font-weight: 700; letter-spacing: .02em; color: var(--stup); background: var(--stup-blago); border-radius: 999px; padding: .15rem .6rem; text-decoration: none; }
.savjet { display: flex; gap: .9rem; background: linear-gradient(160deg, #fff6cf, #fffaf0); border: 1px solid #f6e3a1; border-radius: var(--r); padding: 1.1rem 1.25rem; box-shadow: var(--sjena); margin: 1.5rem 0; }
.savjet__ikona { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: #f5b731; color: #fff; flex: none; }
.savjet strong { font: 700 1.15rem var(--naslovni); }
.savjet p { margin: .2rem 0 0; }

/* ---------- mini sanjarica (noćno nebo) ---------- */
.abeceda, .stup-sanjarica .pojas { --nebo: radial-gradient(1.5px 1.5px at 12% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 28% 68%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 46% 18%, #ffe9a8 50%, transparent 51%), radial-gradient(1px 1px at 63% 52%, #fff 50%, transparent 51%), radial-gradient(2px 2px at 82% 26%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 90% 74%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 6% 86%, #ffe9a8 50%, transparent 51%), radial-gradient(1px 1px at 72% 88%, #fff 50%, transparent 51%); }
.abeceda { display: grid; gap: 1.25rem; color: #fff; border-radius: var(--r); padding: 1.5rem 1.25rem; margin: 0 0 2rem; background: var(--nebo), linear-gradient(135deg, #1d1747, #3d2b8f 60%, #6a3fc4); box-shadow: var(--sjena-jaca); }
@media (min-width: 52rem) { .abeceda { grid-template-columns: 1fr 1.3fr; align-items: center; padding: 2rem; } }
.abeceda h2 { margin: .5rem 0 .3rem; color: #fff; }
.abeceda p { color: #d9d3ff; margin: 0 0 1rem; }
.abeceda__ikona { color: #ffd76a; }
.abeceda__slova { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.9rem, 1fr)); gap: .4rem; list-style: none; padding: 0; margin: 0; }
.abeceda__slova a { display: grid; place-items: center; height: 2.9rem; border-radius: 12px; text-decoration: none; font-weight: 800; color: #fff; background: rgb(255 255 255 / 12%); border: 1px solid rgb(255 255 255 / 22%); }
.abeceda__slova a:hover { background: #ffd76a; color: #1d1747; }
.gumb { display: inline-flex; align-items: center; gap: .4rem; font: 700 .95rem var(--tekstni); padding: .6rem 1.1rem; min-height: 44px; border-radius: 999px; border: 2px solid var(--stup); background: #fff; color: var(--stup); cursor: pointer; text-decoration: none; }
.gumb:hover, .gumb[data-kopirano] { background: var(--stup); color: #fff; }
.gumb--svijetli { background: #ffd76a; border-color: #ffd76a; color: #1d1747; }
.gumb--svijetli:hover { background: #fff; border-color: #fff; color: #1d1747; }

/* ---------- pojas (zaglavlje članka i kategorije) ---------- */
.pojas { position: relative; padding: 1.25rem 1rem 1.5rem; background: linear-gradient(170deg, var(--stup-blago), var(--pozadina) 85%); border-bottom: 1px solid color-mix(in srgb, var(--stup) 14%, transparent); overflow: hidden; }
.pojas::after { content: ""; position: absolute; right: -4rem; top: -4rem; width: 14rem; height: 14rem; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--stup-2) 28%, transparent), transparent 70%); pointer-events: none; }
.pojas h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3rem); margin: .35rem 0 .5rem; position: relative; z-index: 1; }
.stup-sanjarica .pojas { background: var(--nebo), linear-gradient(150deg, #1d1747, #3d2b8f 65%, #6a3fc4); color: #fff; border: 0; }
.stup-sanjarica .pojas h1, .stup-sanjarica .pojas .meta, .stup-sanjarica .pojas .mrvice, .stup-sanjarica .pojas .mrvice a, .stup-sanjarica .pojas .oznaka__min { color: #fff; }
.stup-sanjarica .pojas .meta { color: #d9d3ff; }
.stup-sanjarica .pojas .znacka--stup { background: #ffd76a; color: #1d1747; }
.stup-sanjarica .pojas .slova a { background: rgb(255 255 255 / 12%); color: #fff; border-color: rgb(255 255 255 / 25%); }
.mrvice { font-size: .88rem; color: var(--tekst-blago); margin: 0; position: relative; z-index: 1; }
.mrvice ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
.mrvice li:not(:last-child)::after { content: "›"; margin-left: .35rem; opacity: .7; }
.oznaka { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin: .8rem 0 0; position: relative; z-index: 1; }
.znacka--stup { font-size: .85rem; padding: .3rem .75rem; color: #fff; background: linear-gradient(90deg, var(--stup), var(--stup-2)); }
.znacka--stup:hover { color: #fff; }
.oznaka__min { display: inline-flex; align-items: center; gap: .3rem; font-size: .88rem; color: var(--tekst-blago); }
.meta { color: var(--tekst-blago); font-size: .95rem; margin: 0; position: relative; z-index: 1; }

/* ---------- okvir odgovora, sadržaj ---------- */
.odgovor { position: relative; background: #fff; border-radius: var(--r); padding: 1.1rem 1.2rem 1.1rem 1.35rem; margin: 0 0 1.5rem; font-size: 1.18rem; box-shadow: var(--sjena); border: 1px solid color-mix(in srgb, var(--stup) 20%, #fff); overflow: hidden; }
.odgovor::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: linear-gradient(180deg, var(--stup), var(--stup-2)); }
.odgovor p:last-child { margin: 0; }
.odgovor__oznaka { display: inline-flex; align-items: center; gap: .35rem; font: 800 .75rem/1 var(--tekstni); letter-spacing: .1em; text-transform: uppercase; color: var(--stup); background: var(--stup-blago); padding: .35rem .6rem; border-radius: 999px; margin-bottom: .6rem; }
.toc { background: var(--stup-blago); border-radius: var(--r); padding: .9rem 1.15rem; margin: 0 0 1.5rem; }
.toc strong { display: block; margin-bottom: .3rem; color: var(--stup-tamno); }
.toc ol { margin: 0; padding-left: 1.2rem; }
.tekst h2 { padding-left: .8rem; border-left: 5px solid var(--stup-2); }

/* ---------- kartice, slova, indeks ---------- */
.kartice { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); padding: 0; list-style: none; }
.kartica { background: #fff; border-radius: 14px; padding: .8rem 1rem; box-shadow: var(--sjena); border-top: 4px solid var(--stup-2); }
.kartica a { text-decoration: none; font-weight: 700; color: var(--tekst); }
.kartica a:hover { color: var(--stup); }
.slova { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; margin: 1rem 0; list-style: none; position: relative; z-index: 1; }
.slova a { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .5rem; border-radius: 12px; background: #fff; border: 1px solid var(--rub); text-decoration: none; font-weight: 800; color: var(--tekst); }
.slova a:hover, .slova a[aria-current] { background: linear-gradient(135deg, var(--stup), var(--stup-2)); border-color: transparent; color: #fff; }
.pretraga { width: 100%; font: inherit; padding: .8rem 1.1rem; border: 2px solid var(--rub); border-radius: 999px; background: #fff; box-shadow: var(--sjena); margin-bottom: .5rem; }
.pretraga:focus { border-color: var(--stup); outline: none; }
.indeks-slovo { scroll-margin-top: 5rem; background: #fff; border-radius: var(--r); padding: .4rem 1.1rem .6rem; margin: 1rem 0; box-shadow: var(--sjena); }
.indeks-slovo h2 { display: flex; align-items: baseline; gap: .6rem; margin: .8rem 0 .4rem; color: var(--stup); }
.indeks-slovo h2 small { font: 600 .85rem var(--tekstni); color: var(--tekst-blago); background: var(--stup-blago); border-radius: 999px; padding: .1rem .55rem; }
.indeks-popis { columns: 2 9rem; column-gap: 1.5rem; padding: 0; list-style: none; margin: 0; }
.indeks-popis li { break-inside: avoid; padding: .18rem 0; }
.indeks-slovo > p { margin: .4rem 0 .6rem; font-weight: 700; }
.indeks-slovo > .indeks-slovo__opis { margin: -.2rem 0 .5rem; font-weight: 600; font-size: .9rem; color: var(--tekst-blago); }
[hidden] { display: none !important; }
.popis-objava { list-style: none; padding: 0; display: grid; gap: .6rem; }
.popis-objava li { background: #fff; border-radius: 14px; padding: .7rem 1rem; box-shadow: var(--sjena); border-left: 5px solid var(--stup-2); }
.popis-objava h3 { margin: 0; font-size: 1.1rem; }
.popis-objava a { color: var(--tekst); text-decoration: none; }

/* ---------- zbirka ---------- */
.stavke { list-style: none; padding: 0; margin: 0; counter-reset: s; }
.stavka { counter-increment: s; position: relative; background: #fff; border-radius: var(--r); padding: 1.3rem 1.25rem 1rem; margin: 0 0 1rem; box-shadow: var(--sjena); overflow: hidden; }
.stavka:nth-child(3n+2) { background: linear-gradient(160deg, var(--stup-blago), #fff 60%); }
.stavka::before { content: "\201C"; position: absolute; right: .6rem; top: -1.2rem; font: 700 7rem/1 var(--naslovni); color: color-mix(in srgb, var(--stup-2) 30%, transparent); }
.stavka blockquote { position: relative; margin: 0; font: 1.32rem/1.45 var(--naslovni); }
.stavka blockquote::before { content: counter(s); display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; margin: 0 0 .6rem; font: 800 .85rem var(--tekstni); color: #fff; background: linear-gradient(135deg, var(--stup), var(--stup-2)); }
.stavka blockquote::before { display: grid; }
.stavka cite { display: block; margin-top: .5rem; font: normal 700 .95rem var(--tekstni); color: var(--stup); }
.stavka cite::before { content: "~ "; }
.stavka__gumbi { display: flex; gap: .5rem; margin-top: .85rem; }
details { margin-top: .6rem; }
summary { cursor: pointer; color: var(--stup); font-weight: 700; min-height: 44px; display: flex; align-items: center; }
details .komentar { font-size: 1rem; color: var(--tekst-blago); }

/* ---------- recept ---------- */
.recept { background: #fff; border-radius: var(--r); padding: 0 1.25rem 1.25rem; box-shadow: var(--sjena-jaca); margin: 1.5rem 0; scroll-margin-top: 5rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--stup) 18%, #fff); }
.recept h2 { margin: 0 -1.25rem 1rem; padding: 1rem 1.25rem; color: #fff; background: linear-gradient(100deg, var(--stup), var(--stup-2)); font-size: 1.5rem; }
.recept h3 { color: var(--stup-tamno); display: flex; align-items: center; gap: .5rem; }
.sastojci { padding: 0; list-style: none; display: grid; gap: .1rem; }
.sastojci li { padding: .5rem .6rem; border-radius: 10px; }
.sastojci li:nth-child(odd) { background: var(--stup-blago); }
.sastojci label { display: flex; gap: .65rem; align-items: flex-start; cursor: pointer; }
.sastojci input { width: 1.25rem; height: 1.25rem; margin-top: .3rem; accent-color: var(--stup); flex: none; }
.sastojci input:checked + span { text-decoration: line-through; color: var(--tekst-blago); }
.koraci { padding-left: 0; list-style: none; counter-reset: k; }
.koraci li { counter-increment: k; position: relative; padding: 0 0 1rem 3rem; margin: 0; border-left: 2px dashed color-mix(in srgb, var(--stup) 25%, transparent); margin-left: 1rem; padding-left: 2.2rem; }
.koraci li:last-child { border-color: transparent; }
.koraci li::before { content: counter(k); position: absolute; left: -1.05rem; top: 0; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: linear-gradient(135deg, var(--stup), var(--stup-2)); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .95rem; box-shadow: 0 0 0 4px #fff; }
.skok-na-recept { margin: 0 .4rem .5rem 0; }

/* ---------- dijeljenje, autor, oglas, podnožje ---------- */
.dijeli { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 2rem 0 0; padding: 1rem; border-radius: var(--r); background: var(--stup-blago); }
.dijeli > span { display: inline-flex; gap: .4rem; align-items: center; font-weight: 700; margin-right: .3rem; }
.dijeli a { color: #fff; text-decoration: none; font-weight: 700; font-size: .9rem; padding: .55rem .95rem; border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center; }
.dijeli__wa { background: #1fa855; } .dijeli__fb { background: #1877f2; } .dijeli__vi { background: #7360f2; }
.dijeli a:hover { filter: brightness(1.08); color: #fff; }
.autor { display: flex; gap: 1rem; align-items: center; background: #fff; border-radius: var(--r); box-shadow: var(--sjena); margin-top: 1.25rem; padding: 1rem 1.15rem; font-size: 1rem; }
.autor__slika { width: 56px; height: 56px; border-radius: 50%; color: #fff; display: grid; place-items: center; font: 800 1.3rem var(--naslovni); flex: none; background: linear-gradient(135deg, var(--stup), var(--stup-2)); }
.oglas { min-height: 280px; margin: 1.75rem 0; border-radius: var(--r); display: grid; place-items: center; color: #b3a79b; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; background: repeating-linear-gradient(45deg, #fff 0 12px, #fbf4ec 12px 24px); border: 1px dashed var(--rub); }
.srodno h2 { display: flex; align-items: center; gap: .5rem; }
.podnozje { position: relative; background: linear-gradient(160deg, #241f35, #2f2440); color: #ebe5f5; margin-top: 3rem; }
.podnozje::before { content: ""; display: block; height: 6px; background: linear-gradient(90deg, #5b3fd1, #0e8a8c, #e04a26, #f7a23c, #2c8a55, #1f6fb8); }
.podnozje__unutra { max-width: var(--siroko); margin: 0 auto; padding: 2.2rem 1rem; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); font-size: .95rem; }
.podnozje a { color: #ffd2b8; }
.podnozje ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.podnozje strong { font: 800 1.4rem var(--naslovni); background: linear-gradient(90deg, #ff9d6e, #ffd76a); -webkit-background-clip: text; background-clip: text; color: transparent; }

@media print {
  .zaglavlje, .podnozje, .oglas, .gumb, .izbornik, .mrvice, .srodno, .autor, .dijeli, .savjet { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .pojas { background: none !important; color: #000 !important; }
  .recept { box-shadow: none; border: 0; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { .stup-kartica { transition: none; } }

/* ---------- dodaci: čipovi, skupine, opis, odgovor, kalendar prigoda ---------- */
.cipovi { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.cipovi a { display: inline-flex; align-items: center; padding: .45rem .9rem; min-height: 44px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--stup) 30%, #fff); background: #fff; text-decoration: none; font-size: .95rem; font-weight: 700; color: var(--stup); }
.cipovi a:hover { background: var(--stup); color: #fff; }
.stavke__skupina { list-style: none; margin: 1.6rem 0 .6rem; }
.stavke__skupina h2 { margin: 0; font-size: 1.45rem; color: var(--stup-tamno); }
.stavka__opis { margin: .5rem 0 0; color: var(--tekst-blago); font-size: 1rem; }
.stavka__odgovor { margin-top: .8rem; }
.stavka__odgovor summary { display: inline-flex; gap: .4rem; align-items: center; padding: .45rem 1rem; border-radius: 999px; color: #fff; background: linear-gradient(90deg, var(--stup), var(--stup-2)); width: fit-content; }
.stavka__odgovor p { margin: .7rem 0 0; font: 700 1.2rem var(--naslovni); color: var(--stup-tamno); }
.prigode { background: #fff; border-radius: var(--r); padding: 1.2rem 1.25rem; box-shadow: var(--sjena); margin: 0 0 2rem; border: 1px solid var(--rub); }
.prigode h2 { margin: 0 0 .3rem; display: flex; gap: .5rem; align-items: center; color: var(--brend); font-size: 1.45rem; }
.prigode > p { margin: 0 0 1rem; color: var(--tekst-blago); }
.prigode ul { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); list-style: none; padding: 0; margin: 0; }
.prigode li > a, .prigode li > div { display: grid; gap: .1rem; height: 100%; padding: .8rem .9rem; border-radius: 14px; background: linear-gradient(160deg, var(--brend-blago), #fff); border: 1px solid var(--rub); text-decoration: none; color: var(--tekst); }
.prigode li > a:hover { border-color: var(--brend); }
.prigode strong { font: 700 1.08rem var(--naslovni); }
.prigode span:not(.prigode__broj) { font-size: .88rem; color: var(--tekst-blago); }
.prigode__broj { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; color: #fff; font-weight: 800; font-size: .8rem; background: linear-gradient(135deg, var(--brend), var(--brend-2)); margin-bottom: .3rem; }