/* Extracted from templates/landing.html */
/* VARS */
:root{
  --overlay: rgba(0,0,0,.35);           /* malo tamniji overlay da tekst “iskoči” */
  --hero-max: 1200px;
}

/* LOGO – jedini izvor istine za visinu */
.site-nav .brand img.style-234-image{
  display:block;
  height:80px;           /* requested logo height */
  max-height:none;
  width:auto;            /* preserve aspect ratio */
  /* Approximate tint to #dee1e3 for raster logo */
  filter: brightness(0) saturate(100%) invert(90%) sepia(4%) saturate(250%) hue-rotate(171deg) brightness(98%) contrast(90%);
}

/* NAV preko videa */
.site-nav{
  position:absolute;
  top:10px; left:0; right:0;
  z-index:10;
}
.site-nav__inner{
  margin:0 auto;
  padding-top:12px; padding-bottom:12px; /* horizontal padding comes from .container */
  display:flex; align-items:center; gap:24px;
}
.brand{ display:flex; align-items:center; gap:14px; color:var(--text); text-decoration:none; }
.menu{ margin:0; padding:0; list-style:none; display:flex; gap:24px; }
.menu a{ color:#fff; text-decoration:none; font-weight:600; text-transform:uppercase; font-size:14px; }
.menu a:hover{ color:rgb(247,215,172); }
.site-nav.is-sticky{ background:var(--nav-bg); box-shadow:0 0 10px 2px rgba(0,0,0,.2); }
@media (min-width:1024px){
  /* Shift only the menu 50px left; keep logo position */
  .site-nav__inner .menu{ transform: translateX(-50px); }
}

/* HERO */
.hero{ position:relative; min-height:calc(52vh - 25px); display:flex; align-items:flex-start; justify-content:center; overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg video, .hero__bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero__overlay{ position:absolute; inset:0; background:var(--overlay); z-index:1; }

.hero__container{
  position:relative; z-index:2;
  margin:0 auto;
  padding-top: calc(var(--nav-h) + 32px); /* gurni naslov još dole u odnosu na nav */
}
.hero__title{
  padding-top: 30px;
  margin:0 0 14px 0;
  font-weight:800;                       /* WP look: very bold */
  line-height:1.08;                      /* zbijen */
  letter-spacing:.2px;
  font-size:clamp(2.2rem, 3.2vw + 1.6rem, 3.8em); /* ~72px na širokim ekranima */
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.hero__lead{
  max-width:760px;
  font-size:1.125rem;                    /* ~18px */
  font-weight:400;
  color:#e6edf3;
  margin:0 0 18px 0;
  padding-top: 30px;
}

/* BODY */
*{ box-sizing:border-box }
html,body{ height:100% }
body{ margin:0; font-family:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; background:#000; color:#fff; }
main{ background:#fff; color:#1f2937; }

/* HAMBURGER + MOBILE MENU */
.hamburger{ display:none; width:40px; height:40px; border:none; cursor:pointer; background:#fff; border-radius:999px; padding:0; }
/* Three-bar hamburger icon */
.hamburger span{ display:block; width:24px; height:2px; background:#dee1e3; border-radius:2px; }
.hamburger span + span{ margin-top:5px; }

@media (max-width:1024px){
  .menu{ display:none; }            /* sakrij linijski meni */
  .hamburger{ display:inline-flex; align-items:center; justify-content:center; flex-direction:column; }
}
@media (min-width: 1200px){
  .hero{ min-height:calc(56vh - 25px); }
  .hero__container{ padding-top: calc(var(--nav-h) + 40px); }
}

/* Narrow overall layout by extra 60px on both sides (desktop only) */
@media (min-width: 992px){
  .container{ padding-left:70px; padding-right:70px; }
}

/* Offcanvas (tvoji stilovi) */
.ba-offcanvas{ position:fixed; top:0; right:0; bottom:0; width:300px; background:#222B34; color:#fff;
  transform:translateX(100%); transition:transform .25s ease; z-index:1000; padding:18px; }
.ba-offcanvas.open{ transform:none }
.ba-offcanvas a{ color:#fff; text-decoration:none }
.ba-offcanvas ul{ list-style:none; margin:18px 0 0; padding:0 }
.ba-offcanvas li{ border-bottom:1px solid rgba(23,37,42,.2) }
.ba-offcanvas li a{ display:block; padding:12px 20px }
.ba-offcanvas-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:999; }
.ba-offcanvas-overlay.open{ opacity:1; pointer-events:auto }

/* Helpers */
.lead-muted{ color:#4b5563 }
.section-muted{ background:#f7fafc }
.card{ border:1px solid #e5e7eb; border-radius:8px; box-shadow:0 10px 24px rgba(0,0,0,.06) }
.pill{ display:inline-block; padding:.35rem .6rem; border-radius:999px; background:#eaf6fe; color:#0369a1; font-weight:600; font-size:.8rem }
.coming{ background:linear-gradient(135deg,#f8fafc 0%,#eef2f7 100%); border:1px dashed #cbd5e1; border-radius:8px }
footer a{ color:inherit; text-decoration:none }
footer a:hover{ color:#0ea5e9 }
.btn{ 
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 22px; border-radius:6px; font-weight:700;
  text-transform:uppercase; letter-spacing:.5px; border:2px solid transparent;
}
.btn-primary{ background:#03a9f4; color:#fff; border-color:#03a9f4; }
.btn-primary:hover{ background:#f79007; border-color:#f79007; }
.btn-outline-light{ background:transparent; color:#fff; border-color:#fff; }
.btn-outline-light:hover{ background:#f79007; border-color:#f79007; color:#fff; }

/* Aspect-ratio helpers */
.aspect-3x2{ width:100%; aspect-ratio:3 / 2; overflow:hidden; position:relative; }
.aspect-3x2 img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center; }

/* On md+ screens, allow the media to fill the full column height (center crop) */
@media (min-width: 768px){
  .aspect-3x2.media-fill-md{ aspect-ratio:auto; height:100%; }
  .aspect-3x2.media-fill-md img{ width:100%; height:100%; object-fit:cover; object-position:center; }
}

/* Feature grid */
.feature-grid{ position:relative; overflow:hidden; }
.feature-grid::before{
  content:"";
  position:absolute;
  top:24px; bottom:24px;
  left:50%; width:1px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(148,163,184,.4) 18%, rgba(148,163,184,.4) 82%, rgba(0,0,0,0) 100%);
  transform:translateX(-0.5px);
  pointer-events:none;
}
.feature-thumb{
  width:100%;
  max-width:100%;
  padding:0;
  border:none;
  background:transparent;
  box-shadow:none;
}
.feature-thumb img{
  width:100%;
  height:240px;
  display:block;
  object-fit:cover;
  object-position:center;
  border-radius:10px;
}
.feature-grid .card-body{ padding-top:10px; }
.feature-grid h3{ font-size:1.4rem; }
@media (max-width: 991.98px){
  .feature-grid::before{ display:none; }
  .feature-thumb img{ height:210px; }
  .feature-grid h3{ text-align:center; }
}
.language-chip .language-flag{ font-size:1.1rem; line-height:1; }
.language-chip .language-name{ font-weight:600; }