/* ═══════════════════════════════════════════════════════════════
   Biroplast Solutions — V2 osnove (reset, tipografija, ogrodje)
   ═══════════════════════════════════════════════════════════════ */

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  font-family:var(--fb);
  font-size:var(--fs-body);
  line-height:1.55;
  color:var(--ink);
  background:var(--surface);
  -webkit-font-smoothing:antialiased;
}

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

h1,h2,h3,h4{
  font-family:var(--fh);
  margin:0;
  line-height:1.08;
  letter-spacing:-.02em;
  color:inherit;
}
h1{ font-size:var(--fs-hero); font-weight:700; letter-spacing:-.025em; }
h2{ font-size:var(--fs-h2); font-weight:700; }
h3{ font-size:var(--fs-h3); font-weight:600; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }

/* ── dostopnost ────────────────────────────────────────────── */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:12px 20px; border-radius:0 0 var(--r-sm) 0;
  font-family:var(--fh); font-weight:600;
}
.skip:focus{ left:0; }

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:4px;
}

[id]{ scroll-margin-top:96px; }

/* ── ogrodje ───────────────────────────────────────────────── */
.wrap{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--gutter);
}
.wrap-narrow{ max-width:var(--container-narrow); }

.eyebrow{
  font-family:var(--fh); font-weight:700; font-size:var(--fs-micro);
  letter-spacing:.08em; text-transform:uppercase; color:var(--green);
  margin-bottom:var(--sp-1);
  display:inline-block;
}
/* "background:none" tu je namerno (september 2026, popravek): brez
   njega ".eyebrow.on-navy" podeduje "background:var(--navy)" iz
   spodnjega splošnega ".on-navy" pravila (namenjenega OVOJNIM
   elementom/sekcijam, ne besedilu) — ker je ".eyebrow" "display:
   inline-block", se to pozna kot rahel, neujemajoč pravokotnik za
   besedilom (temna gradientna ozadja herojev niso enobarvna, zato
   "var(--navy)" izstopa iz gradienta). Isti popravek spodaj za
   ".lead.on-navy". Hrošč je bil na tej strani neopažen na VSEH
   dosedanjih temnih herojih (tudi na `index.html`, ki v tej seji ni
   bil dotaknjen) — glej dnevnik. */
.eyebrow.on-navy{ color:var(--lime); background:none; }

.lead{
  font-size:var(--fs-lead); color:var(--muted); line-height:1.5;
  max-width:640px;
}
.on-navy .lead, .lead.on-navy{ color:var(--muted-on-navy); background:none; }

.section{ padding:var(--sp-7) 0; }
@media (max-width:760px){ .section{ padding:var(--sp-5) 0; } }

.section-head{ margin-bottom:var(--sp-5); max-width:680px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

.on-navy{ background:var(--navy); color:#fff; }
.on-navy h2,.on-navy h3{ color:#fff; }
.on-surface-alt{ background:var(--surface-alt); }

@media (max-width:760px){
  h1{ line-height:1.05; }
  .section-head{ margin-bottom:var(--sp-4); }
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.no-scroll-x{ overflow-x:clip; }