/* ==========================================================================
   Responsive Rules & Media Queries
   ========================================================================== */

/* Strict prevention of horizontal overflow */
html, body {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
  position: relative;
}

/* ==========================================================================
   Mobile Devices (< 640px)
   ========================================================================== */
@media (max-width: 640px) {
  html {
    font-size: 15px;
  }

  /* Responsive Headings */
  h1, .heading-1 {
    font-size: 1.625rem; /* ~24-26px on mobile */
    line-height: 1.2;
  }

  h2, .heading-2 {
    font-size: 1.125rem; /* 18px */
    line-height: 1.25;
  }

  h3, .heading-3 {
    font-size: 1rem; /* 16px */
  }

  /* Container */
  .container-custom {
    padding-left: var(--container-padding-mobile);
    padding-right: var(--container-padding-mobile);
  }

  /* Minimum touch target size for mobile buttons & inputs */
  button, 
  input[type="button"], 
  input[type="submit"], 
  input[type="reset"] {
    min-height: 2.75rem; /* 44px */
  }

  /* Text inputs on mobile */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  select {
    min-height: 2.75rem;
    font-size: 1rem; /* Prevent iOS zoom */
  }

  /* Smooth scroll for code / tables */
  pre, code, table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ==========================================================================
   Tablet Devices (641px - 1024px)
   ========================================================================== */
@media (min-width: 641px) and (max-width: 1024px) {
  h1, .heading-1 {
    font-size: 1.875rem; /* 30px */
  }

  h2, .heading-2 {
    font-size: 1.2rem;
  }

  .container-custom {
    padding-left: var(--container-padding-tablet);
    padding-right: var(--container-padding-tablet);
  }
}

/* ==========================================================================
   Desktop Devices (1025px+)
   ========================================================================== */
@media (min-width: 1025px) {
  .container-custom {
    padding-left: var(--container-padding-desktop);
    padding-right: var(--container-padding-desktop);
  }
}