/* Vučna služba Gavrić — brand override
   Ova datoteka NE dira postojeću Sitejet/webcard strukturu (.ed-element, itd.)
   Samo prepisuje boje teme i sitne detalje preko postojećeg custom.*.css.
   Učitava se NAKON custom.*.css u <head>. */

:root{
  --color-primary: 210, 31, 47;    /* crvena - samo gumbi/telefon, NE velike površine */
  --color-accent: 255, 77, 94;     /* svjetlija crvena - sitni naglasci (aktivan jezik, badge) */
  --color-secondary: 235, 237, 240;
  --color-background: 12, 14, 17;  /* graphite/gotovo crna */
  --color-text: 246, 247, 248;
  --color-user-1: 199, 203, 209;
  --color-user-2: 138, 144, 153;
  /* dodatni tonovi tamnih kartica, isti sustav kao na acgavric.hr (sestrinska stranica) */
  --card-bg: 20, 23, 27;
  --card-bg-2: 28, 33, 38;
  --card-line: 255, 255, 255;
}

/* ===========================================================================
   Platformski (webcard) theme boji naslove i .active/.color-primary elemente
   TVRDO KODIRANIM heksom (#FF6F61, narančasto-koralna) s !important, potpuno
   zaobilazeći gornje CSS varijable. Zbog toga je narančasta bila puno
   prisutnija nego što je "namjeravano" kroz brand override. Ovim se preuzima
   kontrola natrag na CSS varijable (crvena accent, svijetli naslovi).
   =========================================================================== */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
  color:rgb(var(--color-text)) !important;
  font-family:'Lora',Georgia,serif !important;
}
.color-primary{ color:rgb(var(--color-accent)) !important; }
.bg-primary{ background:rgb(var(--color-primary)) !important; }
.fill-primary{ fill:rgb(var(--color-primary)) !important; }
.stroke-primary{ stroke:rgb(var(--color-primary)) !important; }
.border-color-primary{ border-color:rgb(var(--color-primary)) !important; }
.accordion-trigger a.active{ color:#fff !important; background:rgb(var(--color-primary)) !important; border-color:rgb(var(--color-primary)) !important; }

/* Platforma (webcard) koristi BIJELE "kartice" za više komponenti (kontakt
   kartice, slider stavke "Kada vam treba vučna služba?", tekst+slika sekcija).
   Previše bijelih površina na tamnoj stranici djeluje neujednačeno, pa su
   pretvorene u tamne kartice - isti pristup kao na acgavric.hr (sestrinska
   stranica): tamna kartica, suptilan rub, akcent na hover. */
.boxes-box,
.preset-slider-content-v3-wide-dots .slick-track > *,
.text-with-image-box{
  background:rgb(var(--card-bg)) !important;
  border-width:1px !important;
  border-style:solid !important;
  border-color:rgba(var(--card-line),.1) !important;
  border-radius:14px !important;
  transition:border-color .15s ease, transform .15s ease;
}
.boxes-box:hover,
.preset-slider-content-v3-wide-dots .slick-track > *:hover,
.text-with-image-box:hover{
  border-color:rgb(var(--color-accent)) !important;
}
.boxes-box h1, .boxes-box h2, .boxes-box h3, .boxes-box h4,
.preset-slider-content-v3-wide-dots .slick-track > * h1,
.preset-slider-content-v3-wide-dots .slick-track > * h2,
.preset-slider-content-v3-wide-dots .slick-track > * h3,
.text-with-image-box h1, .text-with-image-box h2, .text-with-image-box h3{
  color:rgb(var(--color-text)) !important;
}
.boxes-box p, .boxes-box a:not(.button),
.preset-slider-content-v3-wide-dots .slick-track > * p,
.text-with-image-box p, .text-with-image-box span{
  color:rgb(var(--color-user-1)) !important;
}
.boxes-box a:not(.button),
.text-with-image-box a:not(.button){ color:rgb(var(--color-accent)) !important; }

/* CTA i "Nazovi" gumbi - crvena pilula (isti oblik kao na acgavric.hr) */
.custom-theme .button, .ed-form-button button, .vsg-hero-cta .button, .vsg-phone-btn{
  background:rgb(var(--color-primary)) !important; color:#fff !important;
  border-radius:999px !important; border:none !important;
}
.custom-theme .button:hover, .ed-form-button button:hover, .vsg-phone-btn:hover{
  background:rgb(168,18,31) !important;
}

/* malo jači kontrast na CTA gumbima */
.custom-theme .button,
.ed-form-button button{
  font-weight:700;
  letter-spacing:.2px;
}

/* hero overlay malo tamniji za bolju čitljivost teksta preko fotografije */
.banner.preset-banner-v3-home-hero-logo-nav-h1-slogan > .overlay{
  background: linear-gradient(180deg, rgba(12,14,17,.55) 0%, rgba(12,14,17,.92) 100%) !important;
}

/* telefon ikona u headeru - naglasak bojom */
#ed-3688918834 svg path{ fill:rgb(var(--color-primary)); }

/* kartice usluga - tamna kartica s rubom, isti stil kao acg-service-card */
.icon-list-box{
  background:rgb(var(--card-bg)) !important;
  border:1px solid rgba(var(--card-line),.1) !important;
  border-radius:14px !important;
  padding:24px !important;
  transition:transform .15s ease, border-color .15s ease;
}
.icon-list-box:hover{ transform:translateY(-3px); border-color:rgb(var(--color-accent)) !important; }
.icon-list-icon{ background:rgba(var(--color-primary),.12) !important; }
.icon-list-icon svg{ fill:rgb(var(--color-accent)) !important; }

/* FAQ i accordion naglasci */
.accordion-trigger a{ font-weight:600; }

/* footer link boja */
footer a:hover{ color:rgb(var(--color-primary)); text-decoration:underline; }

/* footer (preset-footer-bragi-v3-default) je platformski SVIJETLE boje - vraćeno
   na tamnu, dosljedno ostatku stranice (isti pristup kao acg-footer). */
.ed-element.footer{ background:rgb(var(--card-bg)) !important; }
footer h1, footer h2, footer h3, footer h4{ color:rgb(var(--color-text)) !important; }
footer p, footer span{ color:rgb(var(--color-user-1)) !important; }
footer a{ color:rgb(var(--color-accent)) !important; }
footer svg path{ fill:rgb(var(--color-accent)) !important; }

/* linkovi unutar teksta (npr. e-mail u impresumu/pravilima privatnosti) su
   nasljeđivali tamnu (skoro nevidljivu) boju na tamnoj pozadini stranice */
.ed-text a, .ed-privacy a, #main-content a:not(.button):not(.vsg-phone-btn){
  color:rgb(var(--color-accent)) !important;
}
.ed-text a:hover, .ed-privacy a:hover, #main-content a:not(.button):not(.vsg-phone-btn):hover{
  text-decoration:underline;
}

/* generičke sekcije na novogeneriranim podstranicama i en/de stranicama */
.ed-plain-list{ margin:0; padding-left:20px; }
.ed-plain-list li{ margin-bottom:8px; }

/* ===========================================================================
   VSG custom navigacija — zamjenjuje platformski (webcard) preset izbornik.
   Platformski .ed-menu ul postaje flex tek iznad 976px i ovisi o JS hidraciji
   koja na ručno uređenim stranicama ne radi ispravno (prikazuje se kao goli
   popisi). Ova traka je samostalna, ne ovisi o webcard JS-u ni o preset
   klasama, i identično radi na svim stranicama (hr/en/de).
   =========================================================================== */
.vsg-announce{
  background:rgb(var(--color-primary)); color:#fff; text-align:center;
  font-size:14px; font-weight:700; letter-spacing:.2px; padding:8px 16px;
}
.vsg-announce a{ color:#fff; text-decoration:underline; }

.vsg-topbar{
  position:sticky; top:0; z-index:1000;
  background:rgb(var(--color-background));
  border-bottom:1px solid rgba(var(--color-user-1),.15);
}
.vsg-topbar-inner{
  max-width:1180px; margin:0 auto; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.vsg-logo{
  font-family:'Lora',Georgia,serif; font-weight:700; font-size:19px;
  color:rgb(var(--color-text)); text-decoration:none; letter-spacing:.2px; flex-shrink:0;
  display:flex; flex-direction:column; align-items:center; gap:3px; line-height:1.15;
}
.vsg-logo img{ height:24px; width:auto; display:block; margin-top:2px; }
@media screen and (max-width: 480px){ .vsg-logo img{ height:19px; } }
.vsg-nav{ display:flex; align-items:center; gap:22px; }
.vsg-nav-list{ display:flex; gap:26px; list-style:none; margin:0; padding:0; }
.vsg-nav-list a{
  font-family:'Roboto',Helvetica,sans-serif; font-size:14px; font-weight:500;
  color:rgb(var(--color-user-1)); text-decoration:none; white-space:nowrap; transition:color .15s ease;
}
.vsg-nav-list a:hover, .vsg-nav-list a.active{ color:rgb(var(--color-accent)); }
.vsg-nav-right{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.vsg-phone-btn{
  display:inline-flex; align-items:center; gap:7px; background:rgb(var(--color-primary));
  color:#fff; font-family:'Roboto',Helvetica,sans-serif; font-weight:700; font-size:14px;
  padding:9px 16px; border-radius:6px; text-decoration:none; white-space:nowrap; transition:filter .15s ease;
}
.vsg-phone-btn:hover{ filter:brightness(1.1); color:#fff; text-decoration:none; }
.vsg-phone-btn svg{ width:14px; height:14px; fill:#fff; flex-shrink:0; }
.vsg-lang-switch{ display:flex; gap:6px; }
.vsg-lang-switch a{
  font-family:'Roboto',Helvetica,sans-serif; font-size:12px; font-weight:700; letter-spacing:.4px;
  color:rgb(var(--color-user-2)); text-decoration:none; padding:5px 8px; border-radius:3px;
  border:1px solid transparent; transition:all .15s ease;
}
.vsg-lang-switch a:hover{ color:rgb(var(--color-accent)); text-decoration:none; }
.vsg-lang-switch a.active{ color:rgb(var(--color-accent)); }
.vsg-burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:34px; height:34px; background:none; border:none; cursor:pointer; padding:0; flex-shrink:0;
}
.vsg-burger span{ width:22px; height:2px; background:rgb(var(--color-text)); display:block; transition:all .2s ease; }
.vsg-nav.open + .vsg-nav-right .vsg-burger span:nth-child(1),
.vsg-burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.vsg-burger.open span:nth-child(2){ opacity:0; }
.vsg-burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

@media screen and (max-width: 860px){
  .vsg-nav{
    position:fixed; inset:61px 0 0 0; background:rgb(var(--color-background));
    transform:translateY(-10px); opacity:0; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease; overflow-y:auto; z-index:999;
  }
  .vsg-nav.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .vsg-nav{ flex-direction:column; align-items:stretch; gap:0; }
  .vsg-nav-list{ flex-direction:column; gap:0; padding:8px 20px 20px; }
  .vsg-nav-list li{ border-bottom:1px solid rgba(var(--color-user-1),.12); }
  .vsg-nav-list a{ display:block; padding:15px 0; font-size:16px; }
  .vsg-burger{ display:flex; }
  .vsg-topbar-inner{ padding:12px 16px; }
  .vsg-nav .vsg-lang-switch{ padding:4px 20px 20px; }
}

/* hero (bez ugrađenog izbornika — izbornik je sada u .vsg-topbar iznad) */
.vsg-hero{
  position:relative; min-height:44vh; display:flex; align-items:center; justify-content:center;
  text-align:center; background-size:cover; background-position:center; overflow:hidden;
}
.vsg-hero::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(12,14,17,.55) 0%, rgba(12,14,17,.92) 100%);
}
.vsg-hero-inner{ position:relative; z-index:1; padding:60px 20px; max-width:820px; }
.vsg-hero-sub{ color:rgb(var(--color-secondary)); font-family:'Roboto',Helvetica,sans-serif; font-size:16px; margin:0 0 10px; }
.vsg-hero h1{ margin:0 0 22px; font-size:clamp(28px,5vw,46px); line-height:1.15; }
.vsg-hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* slim topbar varijanta za legal-notice/privacy (bez hero slike) */
.vsg-slimhead{ background:rgb(var(--color-background)); }

/* checkbox oznaka "Pročitao/la sam..." u kontakt formi je crna (platformski
   default za link unutar labela) - nevidljivo na tamnoj pozadini stranice */
.ed-form-checkbox label, .ed-form-checkbox label a, .ed-form-checkbox label p{
  color:rgb(var(--color-user-1)) !important;
}
.ed-form-checkbox label a{ text-decoration:underline; }

/* Karta u footeru je na HR početnoj imala visinu preko ID-specifičnog stila
   koji postoji samo u tom jednom fajlu. Generirane podstranice (HR/EN/DE)
   i EN/DE početna nemaju taj ID, pa je karta bila bez visine - slomljen
   izgled (crna praznina, karta odrezana pri rubu). Klasno pravilo radi svugdje. */
.footer-bragi-map{ min-height:250px !important; flex-basis:auto !important; flex-grow:1 !important; }
.footer-bragi-map .map-canvas{ height:250px !important; }

/* CAPTCHA slika se gubila na tamnoj pozadini stranice - okvir + kontrast da se istakne */
.ed-form-captcha .image{
  background:#fff; padding:8px 10px; border-radius:4px;
  border:1px solid rgba(var(--color-user-1),.4);
}
.ed-form-captcha img{ filter:contrast(1.3) brightness(0.95); }