/* ========================================
   MOBILNI FIX - Sprečava horizontalni scroll
   Dodaj ovaj CSS NAKON master-styles.css
   ======================================== */

/* Spriječi horizontalni scroll na cijeloj stranici */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* Osiguravanje da svi containeri ne prelaze širinu ekrana */
* {
  box-sizing: border-box;
}

/* Fix za sve containere */
.container,
.navbar-container,
.hero-container,
.footer-container {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Fix za hero sekciju na mobitelu */
@media (max-width: 768px) {
  .hero {
    overflow-x: hidden !important;
  }
  
  .hero-container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    max-width: 100% !important;
  }
  
  .hero-visual {
    max-width: 100% !important;
    overflow: hidden !important;
  }
  
  #hero-image {
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* Fix za EU Quality Badge - može biti problem */
  .eu-quality-badge {
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    max-width: calc(100vw - 40px) !important;
  }
  
  /* Fix za navbar akcije */
  .navbar-actions {
    max-width: none !important;
    overflow: visible !important;
  }
  
  /* Fix za grid kolone */
  .grid-3-cols,
  .grid-2-cols,
  .feature-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  /* Fix za slike koje mogu biti preširoке */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Fix za kartice */
  .card,
  .feature-card {
    max-width: 100% !important;
  }
  
  /* Fix za formu */
  .form-input,
  .form-textarea {
    max-width: 100% !important;
    width: 100% !important;
  }
  
  /* Osiguraj da section padding ne stvara probleme */
  .section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .section .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* Mali mobitel ekrani */
@media (max-width: 480px) {
  .hero-container,
  .container,
  .navbar-container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  
  /* Dodatno smanjenje za jako male ekrane */
  .btn {
    font-size: 0.875rem !important;
    padding: 0.75rem 1rem !important;
  }
}

/* HERO image: mobile vertical screens fix */
@media (max-width: 768px) {
  /* Ako ti master-styles drži hero u dvije kolone, ovo ga “prebaci” u normalan mobile stack */
  .hero-container{
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
  }

  .hero-content,
  .hero-visual{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Makni fiksnu visinu (500px) i daj “mobile-friendly” omjer */
  #hero-image{
    height: auto !important;
    aspect-ratio: 4 / 5; /* vertikalniji kadar */
    width: 100% !important;
  }

  /* Zadrži cover, ali pomakni kadar malo gore (da logo i strojevi ne završe odrezani) */
  #hero-image img{
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    object-position: 50% 35% !important; /* po potrebi 25–45% */
  }

  /* EU badge ti je fixed i zna smetati layoutu/vidljivosti na mobu */
  .eu-quality-badge{
    position: absolute !important;
    bottom: 12px !important;
    left: 12px !important;
  }
}

/* CONTRAST_FIX_V1: hamburger visibility */
.menu-toggle { color: inherit; }                 /* naslijedi boju navbara */
.menu-toggle span { background: currentColor !important; }  /* crtice = trenutna boja teksta */

/* ========================================
   NAVBAR OVERLAY FIX (works even if main/section selectors don't match)
   ======================================== */
@media (max-width: 768px) {

  /* 1) Globalni offset: gura SVE ispod fiksnog/sticky headera */
  body {
    padding-top: 86px !important; /* prilagodi: 70–110px ovisno o visini navbara */
  }

  /* 2) Ako prva sekcija/hero ima negativni margin ili transform, ovo ga vraća */
  .hero,
  .page-hero,
  .section:first-of-type {
    margin-top: 0 !important;
    transform: none !important;
  }

  /* 3) Ako je navbar proziran pa "vizualno" djeluje kao da prekriva tekst */
  header,
  .navbar,
  .site-header {
    background: rgba(255, 255, 255, 0.96) !important;
  }
}

/* ========================================
   RESELLER PARTNER LOGOS — mobile fix
   ======================================== */
@media (max-width: 768px) {

  /* Svaki reseller blok: prebaci u kolonu umjesto reda */
  .reseller-section .container {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* Logo wrapper: centriran, ograničen */
  .reseller-section .container > div[style*="flex: 0"] {
    flex: 0 0 auto !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* Sam logo: manji, proporcionalan */
  .reseller-section img {
    max-width: 216px !important;
    width: 60vw !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
    height: auto !important;
  }

  /* Tekstualni blok: puna širina */
  .reseller-section .container > div[style*="flex: 1"] {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    width: 100% !important;
    text-align: center !important;
  }

  /* Naslovi i paragrafi u reseller sekcijama */
  .reseller-section h2 {
    font-size: 1.4rem !important;
  }

  .reseller-section p {
    font-size: 0.9rem !important;
  }
}

@media (max-width: 480px) {
  .reseller-section img {
    max-width: 168px !important;
    width: 54vw !important;
  }

  .reseller-section h2 {
    font-size: 1.2rem !important;
  }
}