/*
 * Inline SVG ikone (zamjena za Font Awesome) — currentColor tako da
 * nasljeđuju boju roditeljskog linka (--lm-accent / --lm-ink-2 itd.).
 */
.icon-svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentColor;
}

/*
 * Zamjena za Bootstrap CSS — koristile su se samo utility klase (nema
 * grid sustava/komponenti), pa je cijeli framework (156KB) zamijenjen
 * ovim ekvivalentnim pravilima. Vrijednosti kopirane iz Bootstrap 5.0.2
 * da vizual ostane identičan. main.css (tema) već postavlja
 * .container { max-width; padding }, ovdje samo dopunjujemo ono što je
 * Bootstrap davao a main.css ne postavlja (width/margin auto).
 */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}
.d-flex { display: flex !important; }
.d-block { display: block !important; }
.flex-column { flex-direction: column !important; }
@media (min-width: 768px) {
  .flex-md-row { flex-direction: row !important; }
}
.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.mt-3 { margin-top: 1rem !important; }
.mx-auto { margin-right: auto !important; margin-left: auto !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }
.rounded-circle { border-radius: 50% !important; }
.img-fluid { max-width: 100%; height: auto; }
/* Mora doći nakon .img-fluid: njegov height:auto inače pregazi visinu
 * (ista specifičnost) i portretna slika postane elipsa. */
.headshot {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border: 1px solid var(--lm-hairline);
}
.text-center { text-align: center !important; }
.text-start { text-align: left !important; }
.text-end { text-align: right !important; }
.pagination { display: flex; padding-left: 0; list-style: none; }

/* --------------------------------------------------------------------------
 * Self-hosted brand fontovi (privacy-first, bez Google Fonts CDN-a).
 * Font-family imena se poklapaju s --lm-font-heading/body/serif u tokens.css.
 * -------------------------------------------------------------------------- */
@font-face {
  font-family: "Aileron";
  src: url("../fonts/aileron-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aileron";
  src: url("../fonts/aileron-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aileron";
  src: url("../fonts/aileron-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("../fonts/spectral-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Spectral";
  src: url("../fonts/spectral-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* GLOBAL – pozadina i tekst iz brand tokena (papir + tinta) */
body {
  background-color: var(--lm-paper) !important;
  color: var(--lm-ink) !important;
  font-size: 18px !important;
  line-height: 1.65 !important;
  font-weight: 400;
  font-family: var(--lm-font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Osnovni tekst */
body,
p,
li {
  color: var(--lm-ink) !important;
  font-weight: 400;
}

/* Sekundarni tekst / meta info, kicker stil (mala kategorijska oznaka) */
.text-muted,
.meta,
small {
  color: var(--lm-ink-muted) !important;
  font-size: 0.9em;
  letter-spacing: 0.04em;
}

/* Čitljiv paragrafni tekst u člancima */
.post p,
.post li {
  font-size: 18px;
  line-height: 1.65;
}

/*
 * Uži stupac za čitljivost članaka. Napomena: ovo je preimenovano iz
 * "article" u ".post" — theme (Goa) uopće ne koristi <article> tag, pa
 * su ta pravila prije bila mrtav kod koji se nikad nije primjenjivao.
 * ".post" je wrapper koji sad dodaje i layouts/partials/content.html
 * override, isti onaj koji nosi .tema-cyber/.tema-ops klasu.
 */
.post {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Citati – serif, po brand-guideu ("eseji, citati") */
blockquote {
  font-family: var(--lm-font-serif);
  font-style: italic;
  color: var(--lm-ink-2);
  border-left: 3px solid var(--lm-hairline);
  padding-left: 1.2rem;
  margin-left: 0;
}

/* NASLOVI – jasna hijerarhija */
h1, h2, h3, h4, h5, h6 {
  color: var(--lm-ink) !important;
  font-family: var(--lm-font-heading);
  font-weight: 600;
  line-height: 1.2;
  margin-top: 1.4em;
  margin-bottom: 0.6em;
}

h1 { font-size: 44px !important; }
h2 { font-size: 32px !important; }
h3 { font-size: 26px !important; }
h4 { font-size: 22px !important; }

/* NAVIGACIJA – malo jača i čitljivija */
nav a,
.header a,
.menu a {
  font-family: var(--lm-font-heading);
  font-size: 18px !important;
  /* 600 jer Aileron 500 ne postoji kao rez */
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/*
 * Tema (main.css) postavlja font-family na svojim vlastitim, specifičnijim
 * klasama (.intro, .description, .menu-item, .author h1 itd.), pa naši
 * generički "h1..h6"/"body" selektori iznad ne stignu do njih. Isti
 * selektori iz teme ovdje se ponavljaju da preuzmu brand fontove.
 */
.author h1,
.author h2,
.author h3,
.author h4,
.author h5,
.author h6,
.title,
.intro,
.list-entry,
.menu-item {
  font-family: var(--lm-font-heading);
}

.description,
div.content,
.excerpt,
.list,
.copyright,
.meta,
h6.meta,
.powered,
.error {
  font-family: var(--lm-font-body);
}

/* Global links – brand akcent umjesto zadane teme */
a {
  color: var(--lm-accent) !important;
  text-decoration: underline;
}

a:hover {
  color: var(--lm-ink) !important;
}

/*
 * Tema (main.css) hardkodira svoju vlastitu crvenu (rgb(153 27 27), #966)
 * na nekoliko mjesta s !important, pa selektor "a" iznad ne pobjeđuje.
 * Ista mjesta ovdje svjesno preusmjeravamo na --lm-accent da linkovi svugdje
 * budu dosljedni brand tokenu.
 */
.content a,
.error a,
.menu-item,
a.meta,
.category {
  color: var(--lm-accent) !important;
}

/* FOOTER – generički (fallback) */
footer {
  font-size: 15px !important;
  color: var(--lm-ink-muted) !important;
}

footer a {
  color: var(--lm-ink-2) !important;
  text-decoration: underline;
}

/* CTA – jači, tamni gumb */
.post a.btn-luka,
.content a.btn-luka {
  display: inline-block;
  padding: 0.75rem 1.4rem;
  border-radius: 6px;

  background-color: var(--lm-dark);
  color: var(--lm-on-dark) !important;
  text-decoration: none !important;

  font-weight: 700;
  font-size: 1rem;

  border: 1px solid var(--lm-dark);
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.post a.btn-luka:hover,
.content a.btn-luka:hover {
  background-color: var(--lm-ink);
  transform: translateY(-1px);
}

/* RAZMAK IZMEĐU SEKCIJA / ČLANAKA */
section,
.post {
  margin-bottom: 3rem;
}

/* MOBILNA PRILAGODBA */
@media (max-width: 768px) {
  body {
    font-size: 17px !important;
    line-height: 1.7 !important;
  }

  h1 { font-size: 32px !important; }
  h2 { font-size: 26px !important; }
  h3 { font-size: 22px !important; }

  .post {
    padding: 0 1.2rem;
  }
}

/* FOOTER – tanka hairline linija kao separator, bez pozadinske "kutije" */
.footer-luka {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--lm-hairline);
}

.footer-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  color: var(--lm-ink-muted);
  font-size: 15px;
  line-height: 1.6;
}

.footer-row {
  margin-bottom: 0.6rem;
}

.footer-links a,
.footer-credits a {
  color: var(--lm-ink-2) !important;
  text-decoration: underline;
  font-weight: 500;
}

.footer-links span {
  margin: 0 0.4rem;
  color: var(--lm-ink-muted);
}

.footer-credits {
  color: var(--lm-ink-muted);
}

.footer-credits a {
  color: var(--lm-ink-2) !important;
  font-weight: 400;
}

@media (max-width: 768px) {
  .footer-luka {
    padding: 2rem 0;
  }
  .footer-inner {
    padding: 0 1rem;
  }
}

/* highlight.js: pozadina code blokova u brand paleti umjesto sivog
 * defaulta iz vendor/highlightjs/default.min.css (učitava se prije). */
.hljs,
pre code.hljs {
  background: var(--lm-paper-2);
  color: var(--lm-ink);
}
pre {
  border: 1px solid var(--lm-hairline);
  border-radius: 4px;
}