/* ==========================================================================
   WOW — custom overrides (safe to edit)
   Loaded after wow-main.css, so rules here win. Keep site-specific tweaks
   and hot-fixes in this file rather than in wow-main.css.
   ========================================================================== */

/* Mobilni popravek — prevents horizontal overflow and stacks the hero,
   demo and slider rows cleanly on small phones. (Originally added in cPanel;
   now part of the theme so a theme upload no longer overwrites it.) */
@media (max-width: 640px) {
  *, *::before, *::after {
    box-sizing: border-box !important;
  }

  html, body, #hero, section, main, .page-hero {
    max-width: 100% !important;
    width: 100% !important;
    overflow-x: hidden !important;
  }

  #hero, .page-hero, section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .hero-grid, .demo-grid, .cta-band, .factgrid {
    display: block !important;
    width: 100% !important;
  }

  #hero {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .hero-left, .hero-right, .hero-bg-text, .hero-demo-wrap {
    min-width: 0 !important;
    width: 100% !important;
  }

  p, h1, h2, h3 {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  img, iframe, .report-frame, .report-frame-full {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .hd-sliders, .sl-row {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .sl-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
  }

  .sl-row .sl {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
  }

  .sl-lbl {
    flex: 0 0 auto !important;
    font-size: 14px !important;
  }

  .sl-val {
    flex: 0 0 auto !important;
    min-width: 32px !important;
    text-align: right !important;
  }
}

/* Mobile nav alignment — logo left, hamburger right (matches the hamburger breakpoint) */
@media (max-width: 900px) {
  nav { justify-content: space-between !important; }
  .nav-brand { margin-right: auto !important; }
  .nav-toggle { margin-left: auto !important; order: 2 !important; }
}