/* Izgled kakosepise.com.hr: „rječnik”. Bijeli papir, crna tinta i jedna crvena kao olovka za ispravak, knjiški serif za natuknice,
   male kapitalke za oznake, dvostruke crte kao u tiskanom rječniku. Dvojba je natuknica („podaci ili podatci”), naslovnica ima kazalo od A do Ž.
   Bez web fontova i slika; učitava se poslije osnova.css. */
:root {
  --papir: #ffffff;
  --tinta: #141414;
  --siva: #6d6a66;
  --crta: #e6e3de;
  --crvena: #cf2128;
  --crvena-blago: #fdeeee;
  --serif: "Hoefler Text", "Baskerville", "Cambria", "Noto Serif", Georgia, serif;
  --tekstni: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --stup: var(--crvena);
}
body.izgled-kakosepise { background: var(--papir); color: var(--tinta); font: 1.0625rem/1.65 var(--tekstni); }
.izgled-kakosepise a { color: var(--tinta); text-decoration-color: var(--crvena); text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
.izgled-kakosepise a:hover { color: var(--crvena); }
.izgled-kakosepise h1, .izgled-kakosepise h2, .izgled-kakosepise h3 { font-family: var(--serif); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; color: var(--tinta); }
:focus-visible { outline: 2px solid var(--crvena); outline-offset: 2px; }
.glavno { padding-top: .6rem; padding-bottom: 3rem; }
.nadnaslov, .male-kapitalke { margin: 0 0 .25rem; font: 700 .8rem var(--tekstni); font-variant: all-small-caps; letter-spacing: .12em; color: var(--crvena); }
.naslov-sekcije { font-size: 1.55rem; margin: 2.6rem 0 .8rem; padding-top: .6rem; border-top: 3px double var(--tinta); }

/* ---------- zaglavlje: logotip u knjiškom serifu, dvostruka crta ---------- */
.zaglavlje { background: var(--papir); border-bottom: 3px double var(--tinta); }
.zaglavlje__unutra { max-width: 72rem; margin: 0 auto; padding: .8rem 1rem .5rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1.2rem; }
.logo, .logo a { margin: 0; font: 700 1.65rem/1 var(--serif); text-transform: lowercase; letter-spacing: -.02em; color: var(--tinta); text-decoration: none; }
.logo a::after { content: "?"; color: var(--crvena); }
.zaglavlje__moto { margin: 0; font: 600 .78rem var(--tekstni); font-variant: all-small-caps; letter-spacing: .1em; color: var(--siva); }
.zaglavlje nav { flex: 1 1 100%; }
.izbornik { gap: 1.1rem; }
.izbornik a { display: inline-flex; align-items: center; min-height: 40px; color: var(--tinta); font: 700 .88rem var(--tekstni); font-variant: all-small-caps; letter-spacing: .1em; text-decoration: none; border-bottom: 2px solid transparent; }
.izbornik a:hover { color: var(--crvena); }
.izbornik a[aria-current] { border-bottom-color: var(--crvena); }

/* ---------- hero: veliko pitanje, pretraga kao crta, slova s kvačicama u pozadini ---------- */
.hero { position: relative; overflow: hidden; padding: 2rem 1rem 1.8rem; border-bottom: 1px solid var(--crta); }
.hero::after { content: "č ć dž đ š ž"; position: absolute; right: -1rem; bottom: -2.2rem; font: italic 700 6.5rem/1 var(--serif); color: #f3f1ee; white-space: nowrap; pointer-events: none; }
.hero__unutra { position: relative; z-index: 1; max-width: 44rem; margin: 0 auto; }
.hero__nadnaslov { margin: 0 0 .5rem; font: 700 .82rem var(--tekstni); font-variant: all-small-caps; letter-spacing: .12em; color: var(--crvena); }
.hero__nadnaslov .ikona { display: none; }
.hero__naslov { margin: 0 0 .6rem; font-size: clamp(2.8rem, 2rem + 5vw, 4.6rem); line-height: .98; letter-spacing: -.03em; }
.hero__naslov span { font-style: italic; color: var(--crvena); }
.hero__podnaslov { margin: 0 0 1.3rem; max-width: 30rem; font: 1.12rem/1.55 var(--serif); color: var(--siva); }
.hero__trazi { max-width: 34rem; border-bottom: 2px solid var(--tinta); padding: .2rem 0 .2rem .1rem; color: var(--siva); background: rgb(255 255 255 / 85%); }
.hero__trazi:focus-within { border-bottom-color: var(--crvena); }
.hero__trazi input { padding: .6rem .2rem; font: 1.15rem var(--serif); color: var(--tinta); }
.hero__trazi button { border: 0; border-radius: 0; background: var(--tinta); color: #fff; font: 700 .9rem var(--tekstni); font-variant: all-small-caps; letter-spacing: .1em; padding: .55rem 1rem; }
.hero__trazi button:hover { background: var(--crvena); }
.hero__brzo { display: flex; flex-wrap: wrap; gap: .4rem .5rem; margin: 1.1rem 0 0; max-width: 34rem; }
.hero__brzo span { flex-basis: 100%; font: 700 .78rem var(--tekstni); font-variant: all-small-caps; letter-spacing: .1em; color: var(--siva); }
.hero__brzo a { padding: .3rem .7rem; border: 1px solid var(--tinta); font: italic 1rem var(--serif); text-decoration: none; background: #fff; }
.hero__brzo a:hover { border-color: var(--crvena); background: var(--crvena-blago); }
.hero__ukras { display: none; }

/* ---------- najtraženije dvojbe: brojevi u crvenom serifu ---------- */
.popularno { margin: 2rem 0 0; }
.popularno h2 { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .5rem; font-size: 1.55rem; padding-top: .6rem; border-top: 3px double var(--tinta); }
.popularno h2 .ikona { display: none; }
.popularno ol { counter-reset: none; }
.popularno li { display: grid; grid-template-columns: 2.2rem 1fr; align-items: baseline; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--crta); }
.popularno__br { font: italic 700 1.5rem/1 var(--serif); color: var(--crvena); }
.popularno a { font: 600 1.08rem/1.35 var(--serif); text-decoration: none; }
.popularno .znacka { display: none; }

/* ---------- pravilo dana: okvir iz gramatike ---------- */
.savjet { display: block; margin: 2rem 0; padding: 1rem 1.1rem 1rem 1.25rem; border: 1px solid var(--tinta); border-left: 5px solid var(--crvena); background: #fff; }
.savjet__ikona { display: none; }
.savjet strong { display: block; margin-bottom: .25rem; font: 700 .82rem var(--tekstni); font-variant: all-small-caps; letter-spacing: .12em; color: var(--crvena); }
.savjet p { margin: 0; font: 1.12rem/1.55 var(--serif); }

/* ---------- kazalo od A do Ž ---------- */
.rjecnik { margin: 2.6rem 0 0; scroll-margin-top: 1rem; }
.rjecnik h2 { margin: 0 0 .8rem; font-size: 1.55rem; padding-top: .6rem; border-top: 3px double var(--tinta); }
.rjecnik__slova { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.rjecnik__slova a { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 .4rem; border: 1px solid var(--tinta); font: 700 1rem var(--serif); text-decoration: none; }
.rjecnik__slova a:hover { background: var(--tinta); color: #fff; }
.rjecnik__slovo { display: grid; grid-template-columns: 3rem 1fr; gap: 0 .8rem; padding: .7rem 0; border-top: 1px solid var(--crta); scroll-margin-top: 1rem; }
.rjecnik__slovo h3 { margin: 0; font: 700 2.1rem/1 var(--serif); color: var(--crvena); }
.rjecnik__slovo ul { list-style: none; margin: 0; padding: 0; columns: 2 9rem; column-gap: 1.2rem; }
.rjecnik__slovo li { break-inside: avoid; padding: .15rem 0; font: 1.02rem/1.4 var(--serif); }
.rjecnik__slovo a { text-decoration: none; }
.rjecnik__slovo a:hover { text-decoration: underline; text-decoration-color: var(--crvena); }

/* ---------- nove dvojbe ---------- */
.popis-objava { display: grid; }
.popis-objava li { padding: .55rem 0; border-bottom: 1px solid var(--crta); }
.popis-objava h3 { margin: 0; font: 600 1.05rem/1.35 var(--serif); }
.popis-objava h3 a { text-decoration: none; }

/* ---------- natuknica (zaglavlje dvojbe) ---------- */
.pojas { padding: 1.2rem 1rem 1.2rem; border-bottom: 3px double var(--tinta); margin-bottom: 1.3rem; }
.mrvice { margin: 0; font: 600 .78rem var(--tekstni); font-variant: all-small-caps; letter-spacing: .08em; color: var(--siva); }
.mrvice a { color: var(--siva); text-decoration: none; }
.dvojba { margin: 1rem 0 .4rem; }
.dvojba__oznaka { font: 700 .8rem var(--tekstni); font-variant: all-small-caps; letter-spacing: .14em; color: var(--crvena); }
.dvojba__oblici { margin: .1rem 0 0; font: 700 clamp(2.3rem, 1.6rem + 4vw, 3.6rem)/1.08 var(--serif); letter-spacing: -.02em; }
.dvojba__ili { font-style: italic; font-weight: 400; font-size: .55em; color: var(--crvena); }
.dvojba__zarez { color: var(--crvena); }
.pojas h1 { margin: .5rem 0 .4rem; font-size: clamp(2rem, 1.5rem + 3vw, 3rem); }
.format-dvojba .pojas h1 { font: 600 1.15rem/1.35 var(--serif); color: var(--siva); }
.meta { margin: 0; font: 600 .78rem var(--tekstni); font-variant: all-small-caps; letter-spacing: .08em; color: var(--siva); }
.oznaka { display: none; }

/* ---------- pravilo i tekst ---------- */
.odgovor { margin: 0 0 1.6rem; padding: .9rem 1rem .9rem 1.2rem; border-left: 5px solid var(--crvena); background: var(--crvena-blago); font: 1.18rem/1.55 var(--serif); }
.odgovor__oznaka { display: block; margin-bottom: .3rem; font: 700 .82rem var(--tekstni); font-variant: all-small-caps; letter-spacing: .12em; color: var(--crvena); }
.odgovor__oznaka .ikona { display: none; }
.odgovor p:last-child { margin-bottom: 0; }
.tekst { font: 1.12rem/1.7 var(--serif); }
.tekst h2, .glavno > h2:not(.naslov-sekcije) { margin: 2rem 0 .5rem; padding-top: .5rem; border-top: 1px solid var(--crta); font-size: 1.35rem; }
.tekst h3 { font-size: 1.15rem; margin: 1.4rem 0 .3rem; }
.tekst strong { font-weight: 700; }
.tekst em { color: var(--crvena); }
.tekst ul { padding-left: 1.2rem; }
.tekst li::marker { color: var(--crvena); }
.tekst blockquote { margin: 1rem 0; padding: .3rem 0 .3rem 1rem; border-left: 2px solid var(--tinta); font-style: italic; }
.toc { margin: 0 0 1.5rem; padding: .8rem 1rem; border: 1px solid var(--crta); }
.toc strong { font: 700 .8rem var(--tekstni); font-variant: all-small-caps; letter-spacing: .12em; color: var(--crvena); }
.toc ol { margin: .3rem 0 0; padding-left: 1.3rem; font-family: var(--serif); }

/* ---------- susjedne dvojbe, dijeljenje, autor, oglas, podnožje ---------- */
.srodno h2 { font-size: 1.35rem; margin: 2.4rem 0 .7rem; padding-top: .6rem; border-top: 3px double var(--tinta); }
.kartice { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.kartica { padding: .55rem .7rem; border: 1px solid var(--tinta); font: 1rem/1.35 var(--serif); }
.kartica a { text-decoration: none; }
.kartica:hover { border-color: var(--crvena); background: var(--crvena-blago); }
.stavka { padding: .9rem 0; border-bottom: 1px solid var(--crta); }
.gumb { padding: .4rem .8rem; border: 1px solid var(--tinta); background: #fff; color: var(--tinta); font: 700 .85rem var(--tekstni); }
.dijeli { margin: 2rem 0 0; padding: .8rem 0; border-top: 1px solid var(--crta); border-bottom: 1px solid var(--crta); }
.dijeli > span { display: inline-flex; align-items: center; gap: .35rem; margin-right: .3rem; font: 700 .8rem var(--tekstni); font-variant: all-small-caps; letter-spacing: .1em; }
.dijeli a { padding: .35rem .8rem; color: #fff; font: 700 .85rem var(--tekstni); }
.izgled-kakosepise .dijeli a { color: #fff; }
.dijeli__wa { background: #1fa855; } .dijeli__fb { background: #1877f2; } .dijeli__vi { background: #7360f2; }
.autor { margin-top: 1rem; padding: .8rem 0; font-size: .95rem; color: var(--siva); }
.autor strong { color: var(--tinta); }
.autor__slika { width: 46px; height: 46px; border: 1px solid var(--tinta); font: 700 1.3rem var(--serif); color: var(--crvena); }
.oglas { margin: 2rem 0; color: #a7a39d; border: 1px dashed var(--crta); }
.podnozje { margin-top: 3rem; border-top: 3px double var(--tinta); }
.podnozje__unutra { max-width: 72rem; margin: 0 auto; padding: 1.6rem 1rem 2.2rem; font-size: .95rem; color: var(--siva); }
.podnozje__ime { margin: 0 0 .3rem; font: 700 1.5rem var(--serif); color: var(--tinta); }
.podnozje__ime span { color: var(--crvena); }
.podnozje p { margin: .3rem 0; }
.podnozje ul { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin-top: .8rem; }
.podnozje a { color: var(--tinta); }

/* ---------- stranica „Brzi odgovori” (natuknice iz kakosepise.mojblog.hr) ---------- */
.brzi__uvod { font: 1.12rem/1.6 var(--serif); color: var(--siva); margin: 0 0 1rem; }
.brzi__slova { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 1.2rem; padding: 0; list-style: none; }
.brzi__slova a { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 .4rem; border: 1px solid var(--tinta); font: 700 1rem var(--serif); text-decoration: none; }
.brzi__slova a:hover { background: var(--tinta); color: #fff; }
.brzi__slovo { display: grid; grid-template-columns: 3rem 1fr; gap: 0 .8rem; padding: .7rem 0; border-top: 1px solid var(--crta); scroll-margin-top: 1rem; }
.brzi .brzi__slovo h2 { margin: 0; padding: 0; border: 0; font: 700 2.1rem/1 var(--serif); color: var(--crvena); }
.brzi__slovo ul { list-style: none; margin: 0; padding: 0; }
.brzi__slovo li { padding: .35rem 0; border-bottom: 1px dotted var(--crta); font: 1.05rem/1.45 var(--serif); scroll-margin-top: 1rem; }
.brzi__slovo li:last-child { border-bottom: 0; }
.brzi__slovo li:target { background: var(--crvena-blago); }
.brzi__ne { font-style: italic; color: var(--siva); }
.brzi__napomena { font-size: .92rem; color: var(--siva); }
.brzi__clanak { margin-left: .3rem; font: 700 .8rem var(--tekstni); font-variant: all-small-caps; letter-spacing: .08em; color: var(--crvena); }
.izgled-kakosepise .wp-block-post-title { margin: 1.4rem 0 .6rem; padding-top: .5rem; font-size: clamp(2.2rem, 1.6rem + 3vw, 3.2rem); }