/* ─────────────────────────────────────────────────────────────
   Auto Škola Trijumf 2005 — base
   Reset, tijelo dokumenta, kontejner, pomoćne klase.
   Ništa specifično za sekcije — to ide u sections.css.
   ───────────────────────────────────────────────────────────── */

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

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

body{
  margin:0;
  background:var(--t-ground);
  color:var(--t-text);
  font-family:var(--t-font-body);
  font-size:var(--t-size-body);
  line-height:var(--t-lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,
svg,
video{ max-width:100%; }

/* ── Kontejner ────────────────────────────────────────────── */
.t-container{
  width:100%;
  max-width:var(--t-container);
  margin-inline:auto;
  padding-inline:var(--t-container-pad);
}

/* ── Fokus — vidljiv svuda, isti oblik kroz cijeli sajt ─────
   Komponente na tamnoj pozadini samo prebace --t-focus.      */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{
  outline:2px solid var(--t-focus);
  outline-offset:2px;
  border-radius:var(--t-r-xs);
}

/* ── Samo za čitače ekrana ────────────────────────────────── */
.t-sr{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* ── Preskoči na sadržaj ──────────────────────────────────── */
.t-skip{
  position:fixed;
  z-index:200;
  top:var(--t-2);
  left:var(--t-2);
  padding:var(--t-2) var(--t-4);
  background:var(--t-surface-dark);
  color:var(--t-text-on-dark);
  font-size:var(--t-size-small);
  font-weight:700;
  text-decoration:none;
  border-radius:var(--t-r-sm);
  transform:translateY(calc(-100% - var(--t-4)));
  transition:transform var(--t-m-base) var(--t-ease);
}
/* Boja i na hover — inače je roditeljsko `a:hover{color:#336}`
   obori na 1.42 preko navy podloge. Isto pravilo važi za svako
   dugme na sajtu: hover blok bez `color` je bug, ne stil. */
.t-skip:hover,
.t-skip:focus,
.t-skip:active{ color:var(--t-text-on-dark); }
.t-skip:focus{ transform:translateY(0); }

/* ── Prelamanje po rečenicama ─────────────────────────────────
   Kratak uvodni pasus koji se prelomi USRED druge rečenice i ostavi
   rep od tri riječi izgleda kao greška. Isti taj pasus prelomljen
   IZMEĐU rečenica izgleda kao odluka.

   Zato svaka rečenica u takvom bloku ide u svoj `.recenica`: na
   desktopu je blok, dakle rečenica po red, a ispod toga običan
   inline tekst — telefon nema širine za tu igru i tamo je normalan
   tok jedini ispravan.

   Mjera se na desktopu skida sa cijelog bloka. Sa njom bi
   `max-width` prelomio dugu rečenicu na pola i vratio tačno onaj
   rep zbog kojeg se ovo i radi. Ispod 1024px mjera OSTAJE, jer tamo
   tekst stvarno teče kroz više redova i granica reda mu treba.

   Razmak između rečenica nestaje sam kad postanu blokovi — nema
   praznog `margin`, redovi sjedaju jedan pod drugi.             */
.recenica{ display:inline; }

/* `p.` nije ukras nego nužnost. base.css se učitava PRIJE sections.css
   i footer.css, pa bi gola klasa imala istu specifičnost kao
   `.obuka__uvod` i izgubila po redoslijedu — mjera bi ostala i pasus bi
   se i dalje lomio usred rečenice. Element + klasa je najmanji korak
   koji to rješava bez `!important`. */
@media (min-width:1024px){
  .recenica{ display:block; }
  p.t-po-recenicama{ max-width:none; }
}

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