/* ==========================================================================
   40 dana za život – Mostar · modern.css  (v2 – redesign)
   Samo prezentacijski sloj. Ne dira PHP, bazu, ID-ove ni JS funkcije.
   Fontovi: originalni Montserrat (naslovi/tekst) + Inter (.font-body).
   Boje dolaze iz aktivne teme preko --c-* varijabli (ispisuje ih svaka stranica).
   Tailwind CDN ubacuje svoj <style> nakon ovog filea, zato su na ključnim
   mjestima ID-selektori i !important.

   Ideja dizajna: svijetao, topao prostor poput akvarela s plakata; jedan
   istaknuti element – LUK (prozor/apsida) kao okvir slike; uredničke liste
   s tankim linijama umjesto niza identičnih kartica.
   ========================================================================== */

:root {
  --c-deep:   #27120B;
  --c-dark:   #5C2415;
  --c-soft:   #E7D4CC;
  --c-paper:  #F7F4F1;
  --c-accent: #C2410C;
  --c-bg:     #FCFAF8;

  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-pill: 999px;
  --arch: 999px 999px 28px 28px;

  --ink:   color-mix(in srgb, var(--c-deep) 92%, #fff);
  --muted: color-mix(in srgb, var(--c-deep) 62%, #fff);
  --line:  color-mix(in srgb, var(--c-soft) 75%, transparent);
  --lift:  0 22px 44px -24px color-mix(in srgb, var(--c-deep) 50%, transparent);
  --section-y: clamp(4rem, 8vw, 7rem);
}

/* ---------- Osnova ---------- */
html { scroll-padding-top: 6rem; }
html body { color: var(--ink); line-height: 1.65; -webkit-font-smoothing: antialiased; }
::selection { background: var(--c-dark); color: #fff; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 6px; }

/* Naslovi: originalni font, ali tiši i gušći */
html body h1, html body h2 { text-wrap: balance; }
html body h2 {
  font-size: clamp(1.875rem, 3.8vw, 2.875rem) !important;
  font-weight: 800 !important; line-height: 1.1 !important; letter-spacing: -0.025em !important;
}
html body h3 { letter-spacing: -0.01em !important; }
html body em, html body i.italic, html body .italic { font-style: normal !important; }

/* Mali natpisi: rečenični zapis, ne VELIKA SLOVA */
html body .uppercase { text-transform: none !important; letter-spacing: 0 !important; }
html body [class*="tracking-wider"], html body [class*="tracking-wide"],
html body [class*="tracking-["] { letter-spacing: 0 !important; }

/* Natpis iznad naslova sekcije (eyebrow) */
html body section p.text-brand-gold, html body section span.text-brand-gold.block {
  font-size: .9375rem !important; font-weight: 700 !important; color: var(--c-accent) !important;
}

/* ---------- Ritam sekcija ---------- */
html body section.py-20 { padding-block: var(--section-y) !important; }
html body section.py-16 { padding-block: calc(var(--section-y) * .8) !important; }
html body section.py-12 { padding-block: calc(var(--section-y) * .6) !important; }
html body section { border-color: var(--line) !important; }

/* ---------- Gornja traka ---------- */
body > div.bg-brand-deepNavy { font-size: .8125rem; padding-block: .45rem; border: 0; }
/* Crveni istaknuti bedž spašenih beba u gornjoj traci */
body > div.bg-brand-deepNavy a.bg-rose-600 {
  background: #D6202F !important; color: #fff !important; font-weight: 700;
  padding: .3rem .95rem !important; box-shadow: 0 0 0 3px rgba(214, 32, 47, .28) !important;
}
body > div.bg-brand-deepNavy a.bg-rose-600:hover { background: #B91C2B !important; }
body > div.bg-brand-deepNavy a.text-rose-300 { color: var(--c-soft) !important; }

/* ---------- Zaglavlje ---------- */
header.sticky {
  background: color-mix(in srgb, var(--c-bg) 90%, transparent) !important;
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line) !important; box-shadow: none !important;
}
header.sticky > div > div { height: 4.5rem !important; }
header.sticky img { height: 2.75rem !important; width: auto; }

header.sticky nav { font-size: .8125rem; font-weight: 600; }
header.sticky nav a {
  position: relative; background: none !important; border-radius: 0 !important;
  padding: .5rem .7rem !important; color: var(--ink) !important;
}
header.sticky nav a::after {
  content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .2rem; height: 2px;
  background: var(--c-accent); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
header.sticky nav a:hover { color: var(--c-dark) !important; }
header.sticky nav a:hover::after { transform: scaleX(1); }
#mobileMenu { background: var(--c-bg) !important; }
#mobileMenu a { border-radius: var(--r-sm) !important; padding: .75rem .9rem !important; }

/* ---------- Primarni gumbi ---------- */
button[onclick^="otvoriPrijavuBdjenjaModal"] {
  border-radius: var(--r-pill) !important; font-weight: 700 !important; letter-spacing: 0 !important;
  box-shadow: none !important; transition: background-color .2s, transform .2s;
}
button[onclick^="otvoriPrijavuBdjenjaModal"]:active { transform: scale(.98); }
header.sticky nav button { padding: .65rem 1.25rem !important; }

/* ---------- Hero ---------- */
#pocetna {
  min-height: min(82vh, 52rem);
  padding-top: clamp(3.5rem, 8vw, 7rem) !important;
  padding-bottom: clamp(8rem, 13vw, 11rem) !important;
  display: flex; align-items: center;
}
#pocetna > .max-w-7xl { width: 100%; }
#pocetna h1 {
  font-size: clamp(2.5rem, 6.4vw, 4.875rem) !important;
  font-weight: 800 !important; line-height: 1.03 !important; letter-spacing: -0.03em !important;
  margin-bottom: 1.25rem !important;
}
#pocetna h1 span { font-weight: 300 !important; font-style: normal !important; }
#pocetna .lang-hr > p, #pocetna .lang-en > p.text-base {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem) !important; font-weight: 500 !important;
  line-height: 1.6; max-width: 36rem;
}
#pocetna .rounded-full.border {
  font-size: .8125rem !important; font-weight: 700 !important; padding: .4rem .95rem !important; box-shadow: none !important;
}
#pocetna .animate-ping { animation: none !important; }

/* podaci o kampanji: bez bijele kartice, samo tri stupca s linijom */
#pocetna .lang-hr > .mt-6 {
  display: flex !important; background: none !important; backdrop-filter: none !important;
  border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  padding: 0 !important; margin-top: 1.75rem !important; gap: 1.25rem 2.25rem !important;
}
#pocetna .lang-hr > .mt-6 > div:not(.w-px) { border-left: 2px solid var(--c-accent); padding-left: .9rem; }
#pocetna .lang-hr > .mt-6 .w-px { display: none !important; }
#pocetna .lang-hr > .mt-6 .text-slate-400 {
  color: var(--c-accent) !important; font-size: .75rem !important; font-weight: 700 !important; margin-bottom: .15rem;
}
#pocetna .lang-hr > .mt-6 strong, #pocetna .lang-hr > .mt-6 a { font-weight: 700 !important; font-size: 1rem; }

#pocetna a[href="#gradovi"] {
  background: transparent !important; border: 2px solid var(--c-dark) !important;
  border-radius: var(--r-pill) !important; font-weight: 700 !important; box-shadow: none !important;
}
#pocetna a[href="#gradovi"]:hover { background: var(--c-dark) !important; color: #fff !important; }

/* ---------- Brojke: svijetla ploča preko ruba herojа ---------- */
#plodovi-bdjenja { margin-bottom: 0 !important; }
#plodovi-bdjenja > div > div {
  background: #fff !important; color: var(--ink) !important;
  border: 1px solid var(--line) !important; border-radius: var(--r-lg) !important;
  box-shadow: 0 34px 60px -34px color-mix(in srgb, var(--c-deep) 55%, transparent) !important;
}
#plodovi-bdjenja .divide-white\/10 > * { border-color: var(--line) !important; }
#plodovi-bdjenja .text-3xl {
  color: var(--c-dark) !important; font-weight: 800 !important; letter-spacing: -0.03em !important;
  font-size: clamp(2rem, 4.2vw, 3.25rem) !important; line-height: 1 !important; font-variant-numeric: tabular-nums;
}
#plodovi-bdjenja .text-xs.font-bold, #plodovi-bdjenja .sm\:text-sm {
  color: var(--ink) !important; font-size: .9375rem !important; font-weight: 700 !important; margin-top: .6rem !important;
}
#plodovi-bdjenja .text-white\/60 { color: var(--muted) !important; font-size: .8125rem !important; }

/* ---------- Općenito: kartice ---------- */
html body section .rounded-2xl { border-radius: var(--r-md) !important; }
html body section .rounded-xl  { border-radius: var(--r-sm) !important; }
html body section .shadow-sm, html body section .shadow-md { box-shadow: none !important; }
html body section .hover\:shadow-md:hover, html body section .hover\:shadow-xl:hover { box-shadow: var(--lift) !important; }

/* ---------- O inicijativi: uredničke linije + LUK ---------- */
#o-inicijativi .lg\:col-span-7 .space-y-3\.5 { border-bottom: 1px solid var(--line); }
#o-inicijativi .space-y-3\.5 > div {
  background: transparent !important; border: 0 !important; border-top: 1px solid var(--line) !important;
  border-radius: 0 !important; box-shadow: none !important; padding: 1.5rem 0 !important; gap: 1.25rem !important;
}
#o-inicijativi .space-y-3\.5 > div > div:first-child {
  background: transparent !important; color: var(--c-accent) !important; box-shadow: none !important;
  border: 1.5px solid var(--c-accent); border-radius: 50% !important; width: 3rem !important; height: 3rem !important;
}
#o-inicijativi .space-y-3\.5 h3 { font-size: 1.125rem !important; font-weight: 700 !important; }
#o-inicijativi .lg\:col-span-5 > div {
  background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important;
}
#o-inicijativi .lg\:col-span-5 .rounded-xl.overflow-hidden { border-radius: var(--arch) !important; }
#o-inicijativi blockquote { font-style: normal !important; font-weight: 500; }

/* ---------- SOS podrška ---------- */
#sos-podrska .rounded-2xl, #sos-podrska .rounded-3xl { border-radius: var(--r-lg) !important; }
#sos-podrska h3 { font-size: clamp(1.5rem, 2.8vw, 2.25rem) !important; font-weight: 800 !important; line-height: 1.15 !important; }
#sos-podrska a { border-radius: var(--r-pill) !important; box-shadow: none !important; font-weight: 700 !important; }
#sos-podrska a.bg-amber-500 { background: var(--c-soft) !important; color: var(--c-deep) !important; }
#sos-podrska a.bg-amber-500:hover { background: #fff !important; }

/* ---------- Gradovi ---------- */
.grad-tab-btn { border-radius: var(--r-pill) !important; font-weight: 700 !important; }
#gradovi .lg\:col-span-8, #gradovi .lg\:col-span-4 { border-radius: var(--r-lg) !important; }
#gradovi .lg\:col-span-8 { border: 1px solid var(--line) !important; border-top: 1px solid var(--line) !important; }
#gradovi .lg\:col-span-8 h3 { font-size: clamp(1.75rem, 3.2vw, 2.5rem) !important; font-weight: 800 !important; }
#gradovi a[href^="#kontakt"].inline-block { text-decoration: underline; text-underline-offset: 3px; }
#gradovi .leaflet-container, #kontakt .leaflet-container { border-radius: var(--r-md); }

/* ---------- Izdvojeno svjedočanstvo ---------- */
body section > .max-w-6xl > .bg-white { border-radius: var(--r-lg) !important; border-color: var(--line) !important; }
body section > .max-w-6xl blockquote { font-weight: 700 !important; letter-spacing: -0.015em; }

/* ---------- Vijesti ---------- */
#vijesti article, article.group {
  background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
}
#vijesti article:hover, article.group:hover { box-shadow: none !important; }
#vijesti article > a.block, article.group > a.block { border-radius: var(--r-md); }
#vijesti article a.h-52 { height: auto !important; aspect-ratio: 4 / 3; }
#vijesti article > div.p-6 { padding: 1.25rem .25rem 0 !important; }
#vijesti article h3, article.group h3 { font-size: 1.1875rem !important; font-weight: 700 !important; line-height: 1.3 !important; color: var(--c-deep) !important; }
#vijesti article .border-t { border-color: var(--line) !important; }
#vijesti a.bg-brand-darkBlue { border-radius: var(--r-pill) !important; box-shadow: none !important; font-weight: 700; padding-inline: 1.25rem; }

/* ---------- Video ---------- */
#video .rounded-2xl { border-radius: var(--r-md) !important; }

/* ---------- Podrži / Mreže / Kontakt ---------- */
#podrzi .rounded-2xl, #drustvene-mreze .rounded-2xl { border-color: var(--line) !important; }
#podrzi h3 { font-weight: 800 !important; }
#kontakt .rounded-2xl, #kontakt .rounded-3xl { border-radius: var(--r-lg) !important; }

/* ---------- Forme ---------- */
html body input[type="text"], html body input[type="email"], html body input[type="tel"],
html body input[type="date"], html body input[type="number"], html body textarea, html body select {
  border-radius: var(--r-sm) !important;
  border: 1px solid color-mix(in srgb, var(--c-dark) 28%, #fff) !important;
  background: #fff; padding: .75rem .95rem !important; font-size: 1rem; transition: border-color .15s, box-shadow .15s;
}
html body input:focus, html body textarea:focus, html body select:focus {
  outline: none !important; border-color: var(--c-accent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 18%, transparent) !important;
}
html body label { font-weight: 600; font-size: .9375rem; }
html body form button[type="submit"] { border-radius: var(--r-pill) !important; font-weight: 700 !important; }

/* ---------- Modali ---------- */
#prijavaBdjenjaModal > div, #vijestModal > div { border-radius: var(--r-lg) !important; }
#videoModal > div { border-radius: var(--r-md) !important; overflow: hidden; }

/* ---------- Podnožje ---------- */
footer { background: var(--c-deep) !important; }
footer h5 {
  font-size: 1rem !important; font-weight: 700 !important; border-bottom: 0 !important;
  padding-bottom: 0 !important; margin-bottom: 1rem !important; color: var(--c-soft) !important;
}
footer button, footer a.rounded-lg { border-radius: var(--r-pill) !important; font-weight: 700 !important; }

/* ---------- Mobilni ---------- */
@media (max-width: 640px) {
  #pocetna { min-height: 0; display: block; }
  #pocetna .lang-hr > .mt-6 { flex-direction: column; align-items: flex-start; justify-content: flex-start; }
  #pocetna h1 { font-size: clamp(2.25rem, 11vw, 3rem) !important; }
}

/* ---------- Pokret ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .reveal-up { opacity: 1 !important; transform: none !important; }
}

/* ---------- Društvene mreže: samo zaglavlja + strelica ---------- */
#drustvene-mreze .lg\:col-span-5, #drustvene-mreze .lg\:col-span-7, #drustvene-mreze .lg\:col-span-12 {
  border-radius: var(--r-lg) !important; box-shadow: none !important; border-color: var(--line) !important;
}
#drustvene-mreze .mb-14 { margin-bottom: 2.5rem !important; }
#drustvene-mreze button[aria-controls] { border-top: 1px solid var(--line); background: #fff; }

/* ---------- Napredak kampanje: Dan X od 40 ---------- */
.napredak-traka { height: .5rem; border-radius: var(--r-pill); background: color-mix(in srgb, var(--c-dark) 14%, transparent); overflow: hidden; }
.napredak-ispuna { height: 100%; border-radius: var(--r-pill); background: var(--c-accent); transition: width 1s ease; }

/* ---------- Fiksna traka na mobitelu + plutajući WhatsApp ---------- */
#mobilnaTraka {
  padding-bottom: max(.75rem, env(safe-area-inset-bottom));
  background: linear-gradient(to top, color-mix(in srgb, var(--c-bg) 96%, transparent) 55%, transparent);
  pointer-events: none;
}
#mobilnaTraka > * { pointer-events: auto; }
@media (max-width: 1023px) { body:has(#mobilnaTraka) { padding-bottom: 5.25rem; } }

/* ---------- Izravna podrška (IBAN) ---------- */
#izravnaPodrska { border-radius: var(--r-lg) !important; border-color: var(--line) !important; }
#izravnaPodrska h3 { font-weight: 800 !important; }
#izravnaPodrska dd { overflow-wrap: anywhere; }