/*
 * Osnova — stil.
 *
 * Boje NE stoje ovdje nego dolaze kao promjenljive iz `inc/postavke.php`,
 * pa se sajt prefarba mijenjanjem jednog reda.
 *
 * Bez okvira, bez jQueryja. Sve što treba klijentskom sajtu staje u jedan
 * fajl koji se učita odjednom.
 */

/* --------------------------------------------------------------- osnovno -- */

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

body {
  margin: 0;
  background: var(--podloga);
  color: var(--tekst);
  font: 16px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: var(--akcenat); }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.02em; }
h1 { font-size: clamp(28px, 4.5vw, 44px); }
h2 { font-size: clamp(22px, 3vw, 30px); }
h3 { font-size: 19px; }

p { margin: 0 0 1em; }

.tiho { color: var(--tiho); }
.sredina { text-align: center; }

/* Klavijaturi mora da se vidi gdje je. */
:focus-visible { outline: 2px solid var(--akcenat); outline-offset: 3px; }

.preskoci {
  position: absolute; left: -9999px;
  background: var(--akcenat); color: #10131a;
  padding: 10px 16px; border-radius: 0 0 8px 0; z-index: 100;
}
.preskoci:focus { left: 0; top: 0; }

/* ---------------------------------------------------------------- okvir -- */

.okvir { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.okvir--usko { max-width: 780px; }

.strana { padding: 42px 0 64px; }
.strana__naslov { margin-bottom: 24px; }

/* ------------------------------------------------------------- zaglavlje -- */

.zaglavlje {
  border-bottom: 1px solid var(--ivica);
  background: var(--podloga);
  position: sticky; top: 0; z-index: 20;
}
.zaglavlje__unutra {
  display: flex; align-items: center; gap: 20px;
  min-height: 68px;
}
.zaglavlje__logo {
  font-weight: 800; font-size: 18px; text-decoration: none; color: var(--tekst);
}
.zaglavlje__logo img { max-height: 40px; width: auto; }

.zaglavlje__meni { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.meni { list-style: none; display: flex; gap: 22px; margin: 0; padding: 0; }
.meni a { color: var(--tekst); text-decoration: none; font-size: 15px; }
.meni a:hover, .meni .current-menu-item > a { color: var(--akcenat); }

.zaglavlje__dugme {
  display: none; margin-left: auto;
  background: none; border: 0; padding: 10px; cursor: pointer;
}
.zaglavlje__dugme span {
  display: block; width: 22px; height: 2px; background: var(--tekst);
  margin: 4px 0; border-radius: 2px;
}

/* ---------------------------------------------------------------- dugme -- */

.dug {
  display: inline-block; padding: 13px 22px; border-radius: 10px;
  border: 1px solid var(--ivica); color: var(--tekst);
  text-decoration: none; font-weight: 600; font-size: 15px;
}
.dug:hover { border-color: var(--akcenat); color: var(--akcenat); }

.dug--glavno {
  background: var(--akcenat); border-color: var(--akcenat);
  /* Tamno slovo na jarkoj podlozi — bijelo bi imalo slab kontrast. */
  color: #10131a;
}
.dug--glavno:hover { filter: brightness(1.08); color: #10131a; }
.dug--malo { padding: 9px 15px; font-size: 14px; }

.dugmad { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* ---------------------------------------------------------------- hero -- */

.hero { padding: 68px 0 52px; }
.hero__naslov { max-width: 18ch; }
.hero__tekst { color: var(--tiho); font-size: 17px; max-width: 60ch; margin-bottom: 26px; }
.hero__dugmad { display: flex; gap: 10px; flex-wrap: wrap; }

/* --------------------------------------------------------------- redovi -- */

/*
 * Usluge kao veliki redovi, ne kao tri iste kartice — tako se lakše čita i
 * ne izgleda kao svaki drugi sajt.
 */
.red {
  display: flex; gap: 24px; align-items: baseline;
  padding: 26px 0; border-top: 1px solid var(--ivica);
}
.red__broj { color: var(--tiho); font-size: 14px; min-width: 34px; }
.red__ime { font-size: clamp(20px, 2.6vw, 26px); margin: 0 0 6px; }
.red__opis { color: var(--tiho); margin: 0; max-width: 62ch; }

/* -------------------------------------------------------------- kartice -- */

.mreza {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.kartica {
  background: var(--kartica); border: 1px solid var(--ivica);
  border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 8px;
}
.kartica__slika img { border-radius: 10px; }
.kartica__naslov { font-size: 18px; margin: 0; }
.kartica__naslov a { color: var(--tekst); text-decoration: none; }
.kartica__naslov a:hover { color: var(--akcenat); }
.kartica__izvod { color: var(--tiho); font-size: 14.5px; margin: 0; }

/* --------------------------------------------------------------- članak -- */

.clanak__naslov { margin-bottom: 12px; }
.clanak__podaci { color: var(--tiho); font-size: 14px; margin-bottom: 20px; }
.clanak__slika { margin: 0 0 24px; }
.clanak__slika img { border-radius: 14px; }
.clanak__tekst { font-size: 17px; }
.clanak__tekst h2 { margin-top: 1.6em; }
.clanak__tekst ul, .clanak__tekst ol { padding-left: 22px; }
.clanak__tekst li { margin-bottom: .4em; }
.clanak__tekst blockquote {
  margin: 1.5em 0; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--akcenat); color: var(--tiho);
}
/* Široka tabela ne smije da razvuče cijelu stranu. */
.clanak__tekst table { display: block; overflow-x: auto; width: 100%; }

/* ------------------------------------------------------------- podnožje -- */

.podnozje { border-top: 1px solid var(--ivica); background: var(--dno); margin-top: 60px; }
.podnozje__unutra {
  display: grid; gap: 28px; padding-top: 40px; padding-bottom: 28px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.podnozje__ime { display: block; margin-bottom: 8px; font-size: 17px; }
.podnozje strong { display: block; margin-bottom: 10px; }
.spisak { list-style: none; margin: 0; padding: 0; }
.spisak li { margin-bottom: 7px; color: var(--tiho); font-size: 14.5px; }
.spisak a { color: var(--tiho); text-decoration: none; }
.spisak a:hover { color: var(--akcenat); }
.podnozje__mreze { display: flex; gap: 14px; margin-top: 12px; }
.podnozje__dno {
  border-top: 1px solid var(--ivica); padding-top: 18px; padding-bottom: 24px;
  color: var(--tiho); font-size: 13.5px;
}

/* ------------------------------------------------------------- paginacija -- */

.pagination { margin-top: 32px; }
.page-numbers {
  display: inline-block; padding: 8px 13px; margin-right: 6px;
  border: 1px solid var(--ivica); border-radius: 9px;
  color: var(--tekst); text-decoration: none; font-size: 14px;
}
.page-numbers.current { background: var(--akcenat); border-color: var(--akcenat); color: #10131a; }

/* ---------------------------------------------------------------- telefon -- */

@media (max-width: 820px) {
  .zaglavlje__dugme { display: block; }
  .zaglavlje__meni {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: flex-start; gap: 4px;
    background: var(--podloga); border-bottom: 1px solid var(--ivica);
    padding: 14px 20px 20px;
  }
  .zaglavlje__meni.otvoren { display: flex; }
  .meni { flex-direction: column; gap: 4px; width: 100%; }
  .meni a { display: block; padding: 10px 0; }
  .zaglavlje__unutra { position: relative; }
  .red { flex-direction: column; gap: 6px; }
}

/* Ko je isključio animacije, njemu se ništa ne pomjera. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}