/* Projekt 41 — stil.
 *
 * Bez Tailwinda, bez CDN-a, bez vanjskih fontova: svaki vanjski request odaje
 * IP korisnika trecoj strani, a to je u ovoj aplikaciji nedopustivo (CLAUDE.md).
 * Sistemski font stack izgleda nativno na svakom uredaju i ne kosta nista.
 *
 * Citanje je uvecer, na telefonu, cesto u polumraku — zato tamna podloga,
 * topla nebijela boja teksta, velik prored i sirina retka ~65 znakova.
 * Sudionici su 20-60+ god., dio njih nije digitalno vjest: velika tipografija,
 * vidljivi gumbi, nikakvih skrivenih gesti.
 */

:root {
  --pozadina: #14161a;
  --povrsina: #1c1f25;
  --povrsina-2: #23272f;
  --tekst: #e8e4dc;
  --tekst-tiho: #9aa0ab;
  --akcent: #c9a227;         /* prigusena zlatna — sv. Josip / liturgijski ton */
  --akcent-tamni: #8f731b;
  --obrub: #2e333c;
  --greska: #e0796b;
  --uspjeh: #7fb069;
  --radijus: 10px;
  --mjera: 34rem;            /* ~65 znakova */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--pozadina);
  color: var(--tekst);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* ---------- pristupacnost ---------- */
.preskoci {
  position: absolute; left: -9999px;
  background: var(--akcent); color: #14161a; padding: .6rem 1rem; z-index: 10;
}
.preskoci:focus { left: 1rem; top: 1rem; }

:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }

/* ---------- vrh / dno ---------- */
.vrh {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .9rem 1.25rem;
  border-bottom: 1px solid var(--obrub);
  background: var(--povrsina);
}
.marka {
  font-weight: 700; letter-spacing: .16em; font-size: 1.05rem;
  color: var(--akcent); text-decoration: none;
}
.vrh nav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.vrh nav a { color: var(--tekst); text-decoration: none; }
.vrh nav a:hover { color: var(--akcent); }
.nadimak {
  color: var(--tekst-tiho); font-size: .9rem;
  padding: .15rem .6rem; border: 1px solid var(--obrub); border-radius: 99px;
}
.uredno { display: inline; margin: 0; }

.dno {
  margin-top: 4rem; padding: 2rem 1.25rem 3rem;
  border-top: 1px solid var(--obrub);
  color: var(--tekst-tiho); font-size: .9rem;
}
.dno p { max-width: var(--mjera); margin: .35rem auto; text-align: center; }

/* ---------- glavni okvir ---------- */
main { padding: 2rem 1.25rem; }
/* Specificnost 0-0-2 namjerno: `h1 { margin: ... }` dolazi kasnije u fileu i s
 * 0-0-1 bi inace pregazio `margin-inline: auto`, pa bi se sadrzaj zalijepio uz
 * lijevi rub na stranicama gdje je naslov DIREKTNO dijete maina (npr. /dani/).
 * Na /dan/N/ se to nije vidjelo jer je tamo h1 unutar <article> koji se centrira. */
main > :is(h1, h2, p, ol, ul, section, article, nav, form, div) {
  max-width: var(--mjera);
  margin-inline: auto;
}

h1 { font-size: 1.65rem; line-height: 1.3; margin: 0 0 .75rem; }
h2 { font-size: 1.1rem; letter-spacing: .04em; text-transform: uppercase;
     color: var(--tekst-tiho); margin: 2rem 0 .5rem; }
p { margin: 0 0 1rem; }
a { color: var(--akcent); }

.nadnaslov { color: var(--tekst-tiho); font-size: .85rem;
             letter-spacing: .1em; text-transform: uppercase; margin-bottom: .4rem; }
.vodeci { font-size: 1.15rem; color: var(--tekst); }
.tiho { color: var(--tekst-tiho); font-size: .92rem; }

/* ---------- gumbi ---------- */
.gumb {
  display: inline-block; padding: .7rem 1.4rem;
  background: var(--akcent); color: #14161a;
  border: 1px solid var(--akcent); border-radius: var(--radijus);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.gumb:hover { background: var(--akcent-tamni); border-color: var(--akcent-tamni); }
.gumb.obrub { background: transparent; color: var(--akcent); }
.gumb.malen { padding: .35rem .8rem; font-size: .9rem; }
.veza { background: none; border: 0; color: var(--akcent); cursor: pointer;
        font: inherit; padding: 0; text-decoration: underline; }
.akcije { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1.5rem 0; }

/* ---------- poruke i greske ---------- */
.poruke { list-style: none; max-width: var(--mjera); margin: 1rem auto 0;
          padding: 0 1.25rem; }
.poruke li { padding: .7rem 1rem; border-radius: var(--radijus);
             border: 1px solid var(--obrub); background: var(--povrsina); }
.poruke li.success { border-color: var(--uspjeh); }
.poruke li.error { border-color: var(--greska); }
.greske { list-style: none; padding: 0; margin: .4rem 0 0; color: var(--greska);
          font-size: .9rem; }

/* ---------- pocetna ---------- */
.uvodna { text-align: center; }
.uvodna .vodeci, .uvodna .ciklus-info { max-width: var(--mjera); margin-inline: auto; }
.uvodna .akcije { justify-content: center; }
.ciklus-info { padding: 1rem; border: 1px solid var(--obrub);
               border-radius: var(--radijus); background: var(--povrsina); }
.kartice { display: grid; gap: 1rem; margin-top: 2.5rem; text-align: left; }
.kartica { padding: 1.1rem 1.25rem; background: var(--povrsina);
           border: 1px solid var(--obrub); border-radius: var(--radijus); }
.kartica h2 { margin-top: 0; color: var(--akcent); text-transform: none;
              letter-spacing: 0; font-size: 1rem; }
.kartica p { margin: 0; color: var(--tekst-tiho); }

/* ---------- obrasci ---------- */
.obrazac-stranica { max-width: 26rem; }
.polje { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.1rem; }
.polje label { font-weight: 600; font-size: .95rem; }
.pomoc { color: var(--tekst-tiho); font-size: .85rem; }
input[type=text], input[type=email], input[type=password], textarea {
  width: 100%; padding: .65rem .8rem;
  background: var(--povrsina-2); color: var(--tekst);
  border: 1px solid var(--obrub); border-radius: var(--radijus);
  font: inherit;
}
textarea { resize: vertical; min-height: 5.5rem; }
input:focus, textarea:focus { border-color: var(--akcent); }
ul.errorlist { list-style: none; padding: 0; margin: .3rem 0 0;
               color: var(--greska); font-size: .9rem; }

/* ---------- popis dana ---------- */
/* `auto` u inline osi, ne 0: skraceni `margin` s nulama gazi `margin-inline:auto`
 * iz `main > :is(...)` jer klasa ima vecu specificnost. Isti propust je vec
 * jednom zalijepio cijeli popis uz lijevi rub. */
.popis-dana {
  list-style: none;
  padding: 0;
  margin: 1.5rem auto 0;
  max-width: var(--mjera);
}
.zaglavlje-cjeline {
  margin: 1.75rem 0 .5rem; padding-bottom: .3rem;
  border-bottom: 1px solid var(--obrub);
  color: var(--tekst-tiho); font-size: .8rem;
  letter-spacing: .12em; text-transform: uppercase;
}
.red-dana {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  padding: .6rem .2rem; border-bottom: 1px solid var(--obrub);
}
.red-dana a { display: flex; gap: .6rem; align-items: baseline;
              text-decoration: none; color: var(--tekst); flex: 1 1 auto; }
.red-dana a:hover .naslov-dana { color: var(--akcent); }
.red-dana.zatvoren { color: var(--tekst-tiho); }
.oznaka { flex: 0 0 4.5rem; color: var(--akcent); font-variant-numeric: tabular-nums;
          font-size: .9rem; font-weight: 600; }
.oznaka.velika { display: block; flex: none; font-size: .85rem; margin-bottom: .2rem; }
.naslov-dana { flex: 1 1 auto; }
.naslov-dana.zakljucan { color: var(--tekst-tiho); font-style: italic; }
.znak { font-size: .72rem; padding: .1rem .5rem; border-radius: 99px;
        border: 1px solid var(--obrub); color: var(--tekst-tiho); white-space: nowrap; }
.znak.buduci { border-color: var(--akcent-tamni); color: var(--akcent); }
.dim-duhovna { color: #b79bd6; }
.dim-fizicka { color: #7fb069; }
.dim-socijalna { color: #6fa8c9; }
.dim-intelektualna { color: #d6a86f; }

.pregled-traka {
  padding: .6rem 1rem; border: 1px dashed var(--akcent);
  border-radius: var(--radijus); color: var(--akcent); font-size: .9rem;
}

/* ---------- dan ---------- */
.citat {
  margin: 1.5rem 0; padding: 1rem 1.25rem;
  background: var(--povrsina); border-left: 3px solid var(--akcent);
  border-radius: 0 var(--radijus) var(--radijus) 0;
  font-size: 1.1rem; font-style: italic;
}
.odsjek { margin-bottom: 2rem; }
.odsjek.poticaj, .odsjek.molitva {
  padding: 1rem 1.25rem; background: var(--povrsina);
  border: 1px solid var(--obrub); border-radius: var(--radijus);
}
.odsjek.molitva p { font-style: italic; }
.odsjek.molitva h2, .odsjek.poticaj h2 { margin-top: 0; }
ol.pitanja { padding-left: 1.4rem; }
ol.pitanja li { margin-bottom: .6rem; }

.kroz-dane {
  display: flex; justify-content: space-between; gap: 1rem;
  margin: 2.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--obrub);
  font-size: .95rem;
}

/* ---------- komentari ---------- */
.komentari { margin-top: 3rem; }
.obrazac-komentara { margin: 1rem 0 2rem; }
.obrazac-komentara button { margin-top: .6rem; }
.popis-komentara { list-style: none; padding: 0; margin: 0; }
.komentar { padding: .9rem 1rem; margin-bottom: .75rem;
            background: var(--povrsina); border: 1px solid var(--obrub);
            border-radius: var(--radijus); }
.komentar .meta { display: flex; gap: .6rem; align-items: baseline;
                  margin: 0 0 .35rem; font-size: .85rem; color: var(--tekst-tiho); }
.komentar .meta strong { color: var(--akcent); }
.komentar .meta form { margin-left: auto; }
.komentar .tekst { margin: 0; white-space: pre-wrap; }
.prazno { padding: 1rem 0; }

/* ---------- sire zaslone ---------- */
@media (min-width: 42rem) {
  body { font-size: 1.125rem; }
  h1 { font-size: 2rem; }
  main { padding: 3rem 1.5rem; }
  /* Kartice smiju izaci iz mjere za citanje (34rem): tri stupca unutar nje daju
   * ~180px po kartici i tekst se lomi na svaku rijec. Mjera vrijedi za tekst
   * koji se cita u kontinuitetu, ne za kratke blokove jedan uz drugi. */
  .kartice {
    grid-template-columns: repeat(3, 1fr);
    max-width: 52rem;
    margin-inline: auto;
  }
}

/* Svijetla tema: dio starijih korisnika cita danju i preferira svijetlo. */
@media (prefers-color-scheme: light) {
  :root {
    --pozadina: #faf8f4;
    --povrsina: #fff;
    --povrsina-2: #fff;
    --tekst: #23262b;
    --tekst-tiho: #5f6670;
    --akcent: #8f731b;
    --akcent-tamni: #6d5713;
    --obrub: #e2ddd2;
  }
  .gumb { color: #fff; }
  .preskoci { color: #fff; }
}