/* ==========================================================================
   MkDocs Material - extra.css (starter)
   Putanja: docs/styles/extra.css
   Aktivacija u mkdocs.yml:
   extra_css:
     - styles/extra.css
   ========================================================================== */

/* ---------- 1) Global typography & spacing ---------- */

:root {
  /* Malo širi sadržaj i bolji “reading width” */
  --md-content-max-width: 1200px;

  /* Zaobljenja i sjene (suptilno) */
  --radius-sm: 8px;
  --radius-md: 12px;

  /* Code block tweaks */
  --code-radius: 12px;

  /* Smoother scroll */
  scroll-behavior: smooth;
}

/* Bolja čitljivost teksta */
.md-typeset {
  line-height: 1.65;
  font-size: 0.78rem;
}

/* Naslovi malo zategnuti */
.md-typeset h1 { letter-spacing: -0.02em; }
.md-typeset h2, .md-typeset h3 { letter-spacing: -0.01em; }

/* Više “zraka” između sekcija */
.md-typeset h2 { margin-top: 1.6em; }
.md-typeset h3 { margin-top: 1.2em; }

/* Linkovi: malo “premium” underline */
.md-typeset a {
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* ---------- 2) Header / top nav polish ---------- */

/* Lagano “glass” zaglavlje (radi i u light/dark) */
.md-header {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Naslov u headeru malo naglašen */
.md-header__title {
  letter-spacing: 0.2px;
}

/* Logo malo uredniji (ako je prevelik) */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 30px;
  width: auto;
}

/* Po želji: i header title malo manji */
.md-header__title {
  font-size: 0.95rem;
}

/* Header logo sizing */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 34px;   /* mijenjaj po želji */
  width: auto;
}

/* ---------- 3) Sidebar / navigation ---------- */

/* Sidebar font i spacing */
.md-nav {
  font-size: 0.80rem;
}

/* Aktivna stavka jasnije */
.md-nav__link--active,
.md-nav__item .md-nav__link--active {
  font-weight: 700;
}

/* Malo više prostora između grupa */
.md-nav__item--section > .md-nav__link {
  margin-top: 0.35rem;
}

/* “Caps” izgled za glavne sekcije (suptilno) */
.md-nav__item--section > .md-nav__link .md-ellipsis {
  letter-spacing: 0.02em;
}

/* Hover effect */
.md-nav__link:hover {
  opacity: 0.95;
}

/* ---------- 4) Content elements (admonitions, tables, code) ---------- */

/* Admonitions / callouts - zaobljenja */
.md-typeset .admonition,
.md-typeset details {
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Tablice: zaobljene, uredne */
.md-typeset table:not([class]) {
  border-radius: var(--radius-md);
  overflow: hidden;
  display: block;
}

/* Cell padding */
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  padding: 0.65em 0.85em;
}

/* Code inline */
.md-typeset code {
  border-radius: 6px;
  padding: 0.15em 0.35em;
}

/* Code blocks */
.md-typeset pre > code {
  border-radius: var(--code-radius);
  padding: 1.1em 1.15em;
}

/* Copy button: malo veći klik target */
.md-clipboard {
  border-radius: 10px;
}

/* ---------- 5) Images ---------- */

/* Slike: zaobljenja + blaga sjena */
.md-typeset img {
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* Ako ne želiš sjenu na ikonama/logu u contentu, možeš ciljano ugasiti:
   img.no-shadow { box-shadow: none; }
*/

/* ---------- 6) Footer / "back to top" ---------- */

/* Footer malo mirniji */
.md-footer {
  opacity: 0.98;
}

/* ---------- 7) Optional: collapsible nav behavior (CSS-only attempt) ---------- */
/* Ovo ne može 100% zamijeniti JS/feature flags, ali može pomoći da
   podsekcije izgledaju “sklopivo” i manje “razvijeno”.

   Napomena: Material nav koristi checkbox/label mehanizam; CSS samo
   dotjeruje ponašanje i izgled.
*/

/* Sakrij podnav dok sekcija nije otvorena (radi za većinu layouta) */
.md-nav__item--nested > .md-nav__list {
  display: none;
}

/* Prikaži podnav kad je item aktivan ili “expanded” (Material dodaje klase) */
.md-nav__item--nested.md-nav__item--active > .md-nav__list,
.md-nav__item--nested.md-nav__item--expanded > .md-nav__list {
  display: block;
}

/* Strelica za nested iteme malo jasnija */
.md-nav__item--nested > .md-nav__link .md-nav__icon {
  opacity: 0.85;
}

/* ---------- 8) Print-friendly (bonus) ---------- */
@media print {
  .md-header, .md-sidebar, .md-footer, .md-top { display: none !important; }
  .md-content { margin: 0 !important; }
  .md-typeset a { text-decoration: none; }
  .md-typeset img { box-shadow: none; }
}