/* ============================================
   KLAR World — Global Responsive Utilities
   ============================================
   This file provides responsive behavior for ALL pages.
   It does NOT change the desktop layout — only ensures
   proper adaptation on smaller/larger screens.
   ============================================ */

/* ---------- Ultrawide Screen Containment ---------- */
@media (min-width: 1920px) {
  .main-section,
  .hero-section,
  .kk-hero-section,
  section,
  .footer {
    /* Images and full-width backgrounds still stretch */
  }
}

/* ---------- Tablet Portrait (577px – 768px) ---------- */
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }
}

/* ---------- Mobile (≤ 576px) ---------- */
@media (max-width: 576px) {
  body {
    overflow-x: hidden;
  }
}

/* ---------- Fluid Utility Classes ---------- */
.fluid-section-padding {
  padding-left: clamp(20px, 5vw, 163px);
  padding-right: clamp(20px, 5vw, 163px);
  padding-top: clamp(40px, 6vw, 128px);
  padding-bottom: clamp(40px, 6vw, 128px);
}

.fluid-container {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 4vw, 80px);
  padding-right: clamp(16px, 4vw, 80px);
}

/* ---------- Prevent Common Overflow Sources ---------- */
pre, code, table {
  max-width: 100%;
  overflow-x: auto;
}

iframe, video, embed, object {
  max-width: 100%;
}

/* ---------- Footer Responsive Safety Net ---------- */
@media (max-width: 768px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
  .footer-middle {
    flex-direction: column;
    text-align: center;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .footer-top {
    grid-template-columns: 1fr;
  }
  .footer-subscribe {
    flex-direction: column;
  }
  .footer-subscribe input {
    width: 100%;
  }
}

/* ---------- Form Responsive Safety Net ---------- */
@media (max-width: 576px) {
  input, textarea, select {
    max-width: 100%;
    box-sizing: border-box;
  }
  button {
    max-width: 100%;
  }
}

/* ---------- Large Text Scaling on Small Screens ---------- */
@media (max-width: 576px) {
  h1 {
    font-size: clamp(1.75rem, 8vw, 4rem);
    word-break: break-word;
  }
  h2 {
    font-size: clamp(1.5rem, 6vw, 3rem);
  }
}