/* responsive.css - autogenerated best-effort mobile styles */

/* Global box-sizing */
*, *::before, *::after { box-sizing: border-box; }

/* Make body and main containers adapt */
html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.3;
}

/* Images and videos scale */
.responsive-img, .responsive-video {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Make wrappers fluid */
.container, .site-wrapper, #main, .content {
  max-width: 100%;
  width: 100%;
  padding-left: 16px;
  padding-right: 16px;
}

/* Force buttons and inputs to be tappable */
button, .btn, input[type="button"], input[type="submit"], a.button {
  min-height: 44px;
  min-width: 48px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 16px;
}

/* Make text readable */
h1, h2, h3, h4 { word-break: break-word; }

/* Navigation: collapse to hamburger */
.navbar, nav {
  width: 100%;
}
.navbar .menu, nav .menu {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hamburger { display: none; cursor: pointer; }

/* Carousel fallback: ensure visible and not overflowing */
.carousel, .photo-sequence {
  overflow: hidden;
  position: relative;
}
.carousel img { width: 100%; height: auto; display:block; }

/* Payments icon row */
.payment-icons { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }

/* Media queries for small screens */
@media (max-width: 768px) {
  .hamburger { display: block; }
  .navbar .menu, nav .menu { display: none; flex-direction: column; }
  .navbar .menu.open, nav .menu.open { display: flex; }
  header, .hero { padding: 12px; }
  .two-column, .columns { display: block; }
  .column { width: 100%; }
  .logo { max-width: 160px; height: auto; }
}

/* Larger phones landscape */
@media (min-width: 769px) and (max-width: 1024px) {
  .container { padding-left: 20px; padding-right: 20px; }
}