/* Stil statične početne stranice (`index.html` u korijenu projekta).

   Stranica ne prolazi kroz Vite, pa nosi vlastite tokene i vlastiti @font-face. Vrijednosti su
   prepisane iz `DESIGN.md` i `front/src/index.css` i **moraju se mijenjati u oba stila**, inače
   se početna i aplikacija raziđu u boji. Font se poslužuje iz aplikacije (`/app/fonts/`), pa
   datoteke postoje samo jednom. */

/* Sofia Sans, isti varijabilni rezovi koje koristi i aplikacija. */
@font-face {
  font-family: 'Sofia Sans';
  font-style: normal;
  font-weight: 1 1000;
  font-display: swap;
  src: url('/app/fonts/SofiaSans-VariableFont_wght.ttf') format('truetype');
}

@font-face {
  font-family: 'Sofia Sans';
  font-style: italic;
  font-weight: 1 1000;
  font-display: swap;
  src: url('/app/fonts/SofiaSans-Italic-VariableFont_wght.ttf') format('truetype');
}

:root {
  /* Svijetla shema (dokumentirana paleta iz DESIGN.md). Tamna ispod re-pointa ista imena. */
  --canvas-cream: #f3f0ee;
  --lifted-cream: #fcfbfa;
  --surface: #ffffff;
  --ink-text: #141413;
  --text-secondary: #696969;
  --border: rgba(20, 20, 19, 0.12);
  --surface-border: transparent;
  --accent-dot: #cf4500;
  --interactive-accent: #224480;
  /* Ispuna i natpis primarnog gumba: Power Blue s natpisom u Canvas Creamu, nikad u bijelom. */
  --primary-surface: #224480;
  --primary-contrast: #f3f0ee;
  --shadow-1: rgba(0, 0, 0, 0.04) 0 0.25rem 1.5rem 0;
  --hover-tint: rgba(20, 20, 19, 0.06);

  font-size: 112.5%; /* ~18px, isti tipografski raster kao aplikacija */
  color-scheme: light dark;
  /* Poveznice na odsjeke klize umjesto da skoče. */
  scroll-behavior: smooth;
  color: var(--ink-text);
  background: var(--canvas-cream);
  font-family: 'Sofia Sans', Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Tamna shema: krema prelazi u topli gotovo crni niz, naglasci ostaju. Atribut postavlja
   skripta u `index.html`, po istom ključu po kojem ga postavlja i aplikacija. */
:root[data-mantine-color-scheme='dark'] {
  --canvas-cream: #0e0e0d;
  --lifted-cream: #232322;
  --surface: #1a1a19;
  --ink-text: #ffffff;
  --text-secondary: #9f9f9e;
  --border: rgba(255, 255, 255, 0.16);
  --surface-border: var(--border);
  /* Light Signal Orange: tamnija #cf4500 gubi signal na gotovo crnoj podlozi. */
  --accent-dot: #f37338;
  --interactive-accent: #6078a4;
  /* Primarni gumb je na tamnoj shemi gotovo bijel, pa mu natpis prelazi u tintu. */
  --primary-surface: #edf0f5;
  --primary-contrast: #141413;
  --shadow-1: rgba(0, 0, 0, 0.5) 0 0.25rem 1.5rem 0;
  --hover-tint: rgba(255, 255, 255, 0.08);
}

/* Isti dvostupanjski raster kao aplikacija (`front/src/index.css`): od tableta naniže korijen
   pada na 16px, inače bi početna stranica ispisivala krupniji tekst od aplikacije. */
@media (max-width: 64rem) {
  :root {
    font-size: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    scroll-behavior: auto;
  }
}

* {
  box-sizing: border-box;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 500;
  color: var(--ink-text);
}

p {
  margin: 0;
  color: var(--ink-text);
}

:focus-visible {
  outline: 0.125rem solid var(--interactive-accent);
  outline-offset: 0.125rem;
}

/* Stupac stoji na `body`, a ne na `#root` kao u aplikaciji: ova stranica nema React, pa nema
   ni Mantineovih modala koje bi flex `body` odgurao izvan zaslona. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
}

/* Zaglavlje: ista lebdeća pilula kao u aplikaciji. Tamo pilula stoji izvan dijela koji skrola,
   a ovdje je na mjestu drži `sticky`, pa poveznice na odsjeke ostaju nadohvat cijelim skrolom.
   Podloga je boje platna jer sadržaj inače klizi kroz razmak iznad pilule. */
.zaglavlje {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  padding: 1.5rem 1rem 0;
  background: var(--canvas-cream);
}

.pilula {
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  max-width: 75rem;
  padding: 0.75rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--surface-border);
  box-shadow: var(--shadow-1);
  flex-wrap: wrap;
}

.znak {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.02rem;
  color: var(--ink-text);
  text-decoration: none;
  white-space: nowrap;
}

.poveznice {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

.poveznica {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.03rem;
  color: var(--ink-text);
  text-decoration: none;
}

.poveznica:hover {
  background: var(--hover-tint);
}

.akcije {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Prekidač teme. Ikone su maske, pa se crtaju u boji teksta i prate shemu. */
.prekidac {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink-text);
  cursor: pointer;
}

.prekidac:hover {
  background: var(--lifted-cream);
}

.ikona {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

/* Prikazana je ikona sheme na koju klik prebacuje, kao i u aplikaciji: na svijetloj shemi
   mjesec, na tamnoj sunce. */
.ikona-sunce {
  display: none;
}

:root[data-mantine-color-scheme='dark'] .ikona-mjesec {
  display: none;
}

:root[data-mantine-color-scheme='dark'] .ikona-sunce {
  display: block;
}

/* Gumbi: puni oblik pilule, isti kao Mantineovi u aplikaciji. */
.gumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.375rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.02rem;
  text-decoration: none;
  white-space: nowrap;
}

.gumb-ispunjen {
  background: var(--primary-surface);
  color: var(--primary-contrast);
}

.gumb-ispunjen:hover {
  opacity: 0.9;
}

.gumb-obrub {
  background: transparent;
  border-color: var(--ink-text);
  color: var(--ink-text);
}

.gumb-obrub:hover {
  background: var(--hover-tint);
}

/* Uvodni zaslon. */
.uvod {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 4rem 1.5rem 6rem;
}

.sadrzaj {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  width: 100%;
  /* Ista širina kao `.sadrzaj-odsjeka`, inače se lijevi rub uvoda i odsjeka ne poklapaju. */
  max-width: 45rem;
  margin: 0 auto;
  padding-top: 3rem;
}

.nadnaslov {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.035rem;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.tocka {
  display: flex;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent-dot);
}

.naslov {
  font-size: 4rem;
  font-weight: 500;
  letter-spacing: -0.08rem;
  line-height: 1;
}

.uvodni-tekst {
  font-size: 1.125rem;
  font-weight: 450;
  line-height: 1.4;
  color: var(--text-secondary);
}

.gumbi {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Odsjeci. */
.odsjek {
  display: flex;
  flex-direction: column;
  padding: 6rem 1.5rem;
  /* Zaglavlje lebdi iznad sadržaja, pa se usidreni odsjek zaustavi ispod njega. */
  scroll-margin-block-start: 6rem;
}

.tonirano {
  background: var(--lifted-cream);
}

.sadrzaj-odsjeka {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  max-width: 45rem;
  margin: 0 auto;
}

.naslov-odsjeka {
  font-size: 2.25rem;
  font-weight: 500;
  letter-spacing: -0.045rem;
  line-height: 1.2;
}

.tekst {
  font-size: 1rem;
  font-weight: 450;
  line-height: 1.4;
  color: var(--text-secondary);
}

.naslov-kartice {
  margin-bottom: 0.5rem;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.02rem;
}

.koraci {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  width: 100%;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.korak {
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  background: var(--surface);
}

.pojmovi {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  width: 100%;
  margin: 1rem 0;
}

.pojam {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.naziv-pojma {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.02rem;
  color: var(--ink-text);
}

.pojam dd {
  margin: 0;
}

.popis {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0.5rem 0;
  padding-left: 1.25rem;
}

.stavka {
  font-size: 1rem;
  font-weight: 450;
  line-height: 1.4;
  color: var(--text-secondary);
}

.kod {
  padding: 0.125rem 0.375rem;
  border-radius: 0.375rem;
  background: var(--hover-tint);
  font-size: 0.9375rem;
}

/* Podnožje. */
.podnozje {
  margin-top: auto;
  padding: 2.5rem 1.5rem;
  border-top: 1px solid var(--border);
}

.sadrzaj-podnozja {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  max-width: 75rem;
  margin: 0 auto;
  flex-wrap: wrap;
}

.poveznice-podnozja {
  display: flex;
  align-items: center;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

@media (max-width: 64rem) {
  .koraci {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 48rem) {
  /* Ispod ove širine popis poveznica ne stane u pilulu; ostaju znak, prekidač i prijava, a
     odsjeci se i dalje dohvaćaju iz podnožja. */
  .poveznice {
    display: none;
  }

  .pojmovi {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 40rem) {
  .naslov {
    font-size: 2.5rem;
  }

  .odsjek {
    padding: 3rem 1.5rem;
  }
}