/* Stop nasilju — dopune na Bootstrap + Industry design system.
   Sve boje, fontovi i razmaci dolaze iz ds-industry.css (var(--color-*), var(--font-*)). */

/* Slike u blueprint okviru popunjavaju okvir; odnos stranica dolazi iz style="aspect-ratio". */
figure.blueprint { margin:0; }
.media { display:block; width:100%; height:100%; object-fit:cover; }

/* Ikonica: mask URL se postavlja inline u HTML-u (putanja je relativna u odnosu na stranu). */
.ico { display:inline-block; flex:none; background:currentColor; }

.emergency { background:var(--color-accent-900); color:#f2f2f3; font-size:13px; padding-block:8px; }
.emergency a { color:#fff; }
.emergency-label { display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-heading); text-transform:uppercase; letter-spacing:0.1em; }

.site-header { position:sticky; top:0; z-index:20; background:var(--color-bg);
  border-bottom:1px solid var(--color-divider); }
.brand { text-decoration:none; color:inherit; margin-right:auto; }
.brand-name { font-family:var(--font-heading); font-size:22px; line-height:1.05; letter-spacing:0.01em; }
.brand-sub { font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--color-neutral-700); }
.main-nav a { color:inherit; text-decoration:none; font-size:14px; }
.main-nav a:hover, .main-nav a[aria-current="page"] { color:var(--color-accent); }
.cta { text-transform:uppercase; letter-spacing:0.06em; gap:8px; }
/* Prekidač jezika. Uokviren je da se ne čita kao još jedna stavka menija. */
.lang-switch { font-family:var(--font-heading); font-size:12px; letter-spacing:0.1em;
  text-transform:uppercase; text-decoration:none; color:inherit; white-space:nowrap;
  border:1px solid var(--color-divider); border-radius:var(--radius-sm); padding:3px 8px; }
.lang-switch:hover { color:var(--color-accent); border-color:var(--color-accent); }
.cta-lg { font-size:16px; padding:14px 26px; }

.kicker { font-family:var(--font-heading); font-size:12px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--color-accent-700); margin-bottom:14px; }
.hero-title { font-size:clamp(40px,6vw,68px); line-height:1.02; margin-bottom:18px; text-wrap:balance; }
.lead-text { font-size:18px; color:var(--color-neutral-800); max-width:46ch; }
.measure { max-width:62ch; }
.section-line { border-bottom:1px solid var(--color-divider); }
.section-eyebrow { font-size:14px; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--color-neutral-700); margin-bottom:24px; }

.card-body-text { font-size:13.5px; color:var(--color-neutral-800); flex:1; }
.topic-card { text-decoration:none; color:inherit; padding:20px; }
.topic-card:hover { background:color-mix(in srgb, var(--color-accent) 7%, transparent); }
.topic-icon { opacity:0.5; }
.tinted { background:color-mix(in srgb, var(--color-accent) 8%, transparent); }
.border-hair { border:1px solid var(--color-divider); }

.band-dark { background:var(--color-accent-900); color:#f2f2f3; }
.band-dark .band-text, .band-dark p { color:var(--color-accent-200); }
.step-num { font-family:var(--font-heading); font-size:46px; line-height:1;
  color:var(--color-accent-300); margin-bottom:8px; }

.ph { background-image:repeating-linear-gradient(135deg,
  color-mix(in srgb, var(--color-text) 7%, transparent) 0 6px, transparent 6px 12px);
  display:grid; place-items:center; }
.ph-label { font-family:ui-monospace, monospace; font-size:11px; letter-spacing:0.08em;
  text-align:center; color:var(--color-neutral-700); background:var(--color-bg); padding:8px 12px; }
.ratio-32 { aspect-ratio:3/2; }

/* Logo partnera. Prikazuje se u izvornoj veličini (281px) — iznad toga bi se
   uvećavao i zamutio. max-width ga skuplja na uskim ekranima. */
.partner-logo { max-width:100%; height:auto; }

.seg { flex-wrap:wrap; max-width:100%; }

/* Mamac za botove. Ne koristi display:none jer ga dio botova prepoznaje i preskace. */
.mamac { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Validacija forme — crveno/zeleno u duhu Bootstrapa, ali na klasama dizajn sistema.
   Boje se pale tek kad korak dobije .was-validated, da polja ne budu crvena prije
   nego što je korisnik i pokušao da ih popuni. */
:root { --color-invalid:#b3261e; --color-valid:#2e7d4f; }

.opciono { color:var(--color-neutral-600); font-weight:400; }

.field-error { display:none; font-size:12px; line-height:1.35; margin:6px 0 0;
  color:var(--color-invalid); }
.field.is-invalid > .field-error { display:block; }

/* .field > label je blok od 12px; checkbox saglasnosti je .radio i mora ostati inline-flex. */
.field > label.radio { display:inline-flex; font-size:14px; margin-bottom:0;
  color:inherit; }
.field.is-invalid > label { color:var(--color-invalid); }
.field.is-invalid .input,
.field.is-invalid .seg { border-color:var(--color-invalid); }
.field.is-invalid .input:focus-visible { border-color:var(--color-invalid);
  outline:2px solid color-mix(in srgb, var(--color-invalid) 40%, transparent); }
.field.is-invalid .radio .dot { border-color:var(--color-invalid); }

.field.is-valid .input,
.field.is-valid .seg { border-color:var(--color-valid); }
.field.is-valid .radio input:checked + .dot { border-color:var(--color-valid);
  background:var(--color-valid); }

.stepbar { flex:1 1 140px; border-top:3px solid var(--color-divider); padding-top:8px; }
.stepbar span { font-family:var(--font-heading); font-size:11px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--color-neutral-700); }
.stepbar.active { border-top-color:var(--color-accent); }
.stepbar.active span { color:var(--color-text); }
.alert-urgent { background:var(--color-accent-900); color:#fff; padding:12px 14px; font-size:14px; }

.site-footer { border-top:1px solid var(--color-divider); margin-top:40px; }
.footer-note { font-size:12px; color:var(--color-neutral-700); }
.footer-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; font-size:13.5px; }
.footer-list a { color:inherit; text-decoration:none; }
.footer-list a:hover { color:var(--color-accent); }
/* Donji red podnožja: autorska prava lijevo, izvođač desno. Na telefonu se
   prelama jedno ispod drugog, pa nema stiskanja teksta uz logo. */
.footer-bottom { display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:12px 24px; }

/* Sadržaj dugog dokumenta (Obavještenje o obradi podataka). Prati skrol na
   širokim ekranima; na uskim se ne prikazuje, da se između uvoda i prvog
   poglavlja ne ispriječi spisak od trinaest stavki. */
.doc h2 { scroll-margin-top:96px; }
.doc-toc { position:sticky; top:88px; font-size:13.5px; }
.doc-toc p { font-family:var(--font-heading); font-size:12px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--color-neutral-700); margin-bottom:12px; }
.doc-toc ol { list-style:none; padding:0; margin:0; }
.doc-toc li { margin-bottom:7px; }
.doc-toc a { display:block; color:var(--color-neutral-800); text-decoration:none;
  border-left:2px solid var(--color-divider); padding:1px 0 1px 12px; }
.doc-toc a:hover { color:var(--color-accent); border-color:var(--color-accent); }

/* Traka partnera iznad podnožja. Redoslijed traži Fondacija Metamorphosis:
   CIVICUS, Metamorphosis, TechSoup, Digital Activism Program. DDI ovdje ne
   učestvuje — on je vodeći i stoji u zaglavlju (.brand-ddi), a logo Instituta
   je u podnožju ispod.

   Veličine, centriranje i poravnanje po sredini prepisani su sa
   ddidigitalspark.org (mjereno na 1440px). Traka je jedini centrirani blok na
   sajtu — sve ostalo je poravnato lijevo — ali tako traži davalac sredstava.

   Visina se zadaje u CSS-u, a ne atributom, da se na užim ekranima
   cijela grupa smanji zajedno. Njihov sajt na telefonu pušta Metamorphosis preko
   desne ivice; ovdje se umjesto toga sva četiri srazmjerno smanje.

   Pečat Instituta je peti i posljednji, desno od partnera — tako traže. Na
   širokim ekranima svih pet stane u jedan red; ispod 992px se prelama, jer
   Metamorphosis ni sam ne stane u širinu telefona.

   Traka nosi svoju gornju liniju, a podnožju ostaje njegova; razdvojene su
   visinom trake, pa se ne čitaju kao dvije crte zaredom. */
.donor-band { border-top:1px solid var(--color-divider); margin-top:40px; }
.donor-band + .site-footer { margin-top:0; }
.donor-logos { display:flex; flex-wrap:wrap; align-items:center;
  justify-content:center; gap:20px 36px; }
.donor-logos img { display:block; width:auto; max-width:100%; object-fit:contain; }

.l-civicus  { height:87px; }
.l-meta     { height:70px; }
.l-techsoup { height:34px; }
.l-dap      { height:70px; }
.l-nas      { height:72px; }
/* Ispod 1200px Bootstrap-ov container je uži od pune širine reda logotipa. */
@media (max-width: 1199.98px) {
  .l-civicus { height:70px; } .l-meta { height:56px; }
  .l-techsoup { height:27px; } .l-dap { height:56px; } .l-nas { height:60px; }
}
@media (max-width: 575.98px) {
  .l-civicus { height:67px; } .l-meta { height:50px; }
  .l-techsoup { height:25px; } .l-dap { height:65px; } .l-nas { height:56px; }
}

/* DDI logo u zaglavlju, na mjestu gdje je ranije stajao znak platforme.
   Metamorphosis traži da u gornjem lijevom uglu stoji samo on — bez natpisa
   „uz podršku“ i bez pečata Instituta.

   margin-right:auto preuzima ulogu koju je imala .brand: gura meni, prekidač
   jezika i dugme na desnu stranu. Visina 40px drži istu visinu zaglavlja kao
   raniji znak platforme, pa se ništa drugo nije pomjerilo. */
.brand-ddi { display:block; height:40px; width:auto; margin-right:auto; }
@media (max-width: 575.98px) { .brand-ddi { height:32px; } }

/* Osigurač za vrlo uske ekrane: ako logo i dugme ne stanu u jedan red,
   red se prelama umjesto da dugme „Prijavi nasilje“ izađe preko ivice.
   Na 360px i šire sve staje u jedan red, pa ovo pravilo tamo ništa ne mijenja. */
.site-header > .container { flex-wrap:wrap; }