:root{
  --bg: #ffffff;
  --text: #111111;
  --muted: #6c757d;
  --line: #e5e7eb;
}

/* Reset & base */
*{ box-sizing:border-box }
html,body{ scroll-behavior:smooth }
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}
a{ transition: color .2s ease, opacity .2s ease }
.navbar .nav-link{ font-weight:500 }
.letter-spacing-1{ letter-spacing:.02em }

/* Brand marks */
.brand-mark{
  display:inline-grid; place-items:center;
  width:36px; height:36px; border-radius:10px;
  background:#111; color:#fff; font-weight:700;
}
.brand-mark-sm{
  width:28px; height:28px; border-radius:8px;
  background:#fff; color:#111;
}
footer .brand-mark{ background:#fff; color:#111 }

/* Buttons */
.btn-dark{
  --bs-btn-bg:#111; --bs-btn-border-color:#111;
  --bs-btn-hover-bg:#000; --bs-btn-hover-border-color:#000;
}
.btn-outline-dark{
  --bs-btn-hover-bg:#111; --bs-btn-hover-border-color:#111;
  --bs-btn-color:#111;
}

/* Forms */
.form-control:focus{ box-shadow:none; border-color:#111 }

/* Utilities */
.benefit{
  padding:.75rem 1rem; border:1px solid var(--line); border-radius:.75rem;
}
.object-fit-cover{ object-fit:cover; object-position:center }

/* ------------------------------------------------------------------
   HERO
-------------------------------------------------------------------*/

/* Pozadina hero-a i gradient helper (ako se koristi) */
.hero{ background: transparent !important; min-height:75vh; display:flex; align-items:center; position:relative; overflow:hidden; }
.hero-bg{
  position:absolute; inset:0;
  background:linear-gradient(135deg,#f8f9fa 0%,#ffffff 40%,#f3f4f6 100%);
  mask-image: radial-gradient(60% 60% at 70% 30%, rgba(0,0,0,.15), transparent 60%);
}

/* Slika */
.hero img{ object-fit:cover; filter:none !important; mix-blend-mode:normal !important; }
.hero::before, .hero::after{ content:none !important; }

/* Ako ikad treba exact-fit bez cropa */
.hero-img-exact{ object-fit:contain !important; mix-blend-mode:normal !important; opacity:1 !important; filter:none !important; }

/* Naslovi u hero bloku */
.hero .title{ font-size:2.5rem; line-height:1.2; }

/* Desktop logo u captionu */
.hero-caption .brandmark{ height:38px; width:auto; display:block; }

/* Kartice usluga (zadržano) */
.service-card{ background-color:#333; color:#fff; }
.service-card h5,
.service-card p,
.service-card ul,
.service-card li,
.service-card i{ color:#fff !important; }
#usluge .service-card{ font-size:1.1em; }
#usluge .service-card h5{ font-size:1.3em; }
#usluge .service-card p{ font-size:1.1em; }
#usluge .service-card ul{ font-size:1.1em; }
#usluge .service-card .service-icon{ font-size:2em; }

/* ------------------------------------------------------------------
   RESPONSIVE
-------------------------------------------------------------------*/

/* Tablet / mobilni naslov */
@media (max-width: 768px){
  .hero .title{ font-size:1.8rem !important; }
}
@media (max-width: 576px){
  .hero .title{ font-size:1.6rem !important; }
}

/* ===== MOBILE OVERLAY FIX (<=768px) ===== */
@media (max-width: 767.98px){
  .hero{ min-height:70vh; }

  /* Slika zauzima cijeli hero; ukloni centriranje pomoćnih klasa */
  .hero .hero-media{
    position:absolute !important;
    top:0; left:0; right:0; bottom:0;
    width:100% !important; height:100% !important;
    transform:none !important;
  }
  .hero .hero-media picture,
  .hero .hero-media img{
    display:block; width:100% !important; height:100% !important;
    object-fit:cover;
  }

  /* Caption kao overlay NA slici (dolje) */
  .hero .hero-caption{
    position:absolute !important;
    left:0; right:0; bottom:0;
    margin:0; padding:1rem !important;
    background:rgba(0,0,0,.55);
    z-index:2; text-align:center;
    border-radius:0;
  }

  /* LOGO u hero captionu — MALI */
  .hero .brandmark{
    height:24px !important;
    width:auto !important;
    display:block !important;
    margin:0 auto 6px auto;
    object-fit:contain;
  }

  /* Tipografija u captionu */
  .hero .hero-title{ font-size:1.2rem; line-height:1.35; }
  .hero .hero-subtitle{ font-size:.95rem; }
}




/* === HERO: LP logo — mobile size fix (force override) === */
@media (max-width: 767.98px){
  /* ciljano na onaj <img alt="Legalis Projekt Logo" u captionu */
  .hero .hero-caption img[alt="Legalis Projekt Logo"]{
    height: 22px !important;
    width: auto !important;
    display: block !important;
    margin: 0 8px 0 0 !important;
  }

  /* poravnaj header reda uz manji razmak */
  .hero .hero-caption .cap-head{
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
}









/* === HERO — mobile fix: slika cijela + tekst ispod === */
@media (max-width: 767.98px){

  /* 1) Slika: nikakav cover/crop, samo cijela slika */
  .hero .hero-media,
  .hero img.hero-img,
  .hero .hero-media img,
  .hero .hero-media picture,
  .hero .hero-media picture > img{
    position: relative !important;
    top:auto !important; left:auto !important; transform:none !important;
    width: 100% !important;
    height: auto !important;           /* ukida h-100 i slične visine */
    max-height: none !important;
    object-fit: contain !important;    /* ključ: vidi se cijela slika */
    object-position: center !important;
    display: block !important;
  }

  /* Ako postoji overlay preko slike – makni ga na mobitelu */
  .hero .overlay{ display:none !important; }

  /* 2) Tekst/CTA: ispod slike (bez preklapanja) */
  .hero .hero-caption{
    position: static !important;
    margin-top: .75rem !important;
    padding: 0 1rem !important;
    text-align: center !important;     /* po želji; možeš staviti left */
    background: transparent !important;
    color: var(--text, #111) !important;
  }

  /* Sitno tipografsko poravnanje za mobitel */
  .hero .hero-title{
    font-size: clamp(1.1rem, 4.5vw, 1.35rem) !important;
    line-height: 1.35 !important;
    margin: 0 0 .25rem 0 !important;
  }
  .hero .hero-caption p{
    font-size: clamp(.95rem, 3.8vw, 1.05rem) !important;
    line-height: 1.45 !important;
    margin: 0 0 .75rem 0 !important;
  }

  /* Ako su gumbi u flexu, neka se lijepo prelamaju ispod */
  .hero .hero-caption .d-flex,
  .hero .hero-caption .btn-group{
    gap: .5rem !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
}