/* ==========================================================================
   Terms & Privacy Pages - Responsive Overrides
   ========================================================================== */

/* CSS Variables */
:root {
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
}

/* Remove fixed width constraints */
html.responsive {
  min-width: 0 !important;
}

@media (max-width: 767px) {
  html.responsive {
    background-size: cover !important;
    background-position: center !important;
  }

  /* Page title */
  .responsive h1 {
    min-width: 0 !important;
    width: 100% !important;
    font-size: clamp(1.25rem, 5vw, 2.5rem) !important;
    padding: 0 var(--space-md);
    margin-top: var(--space-lg) !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
  }

  /* Content wrapper */
  .responsive .wrapper {
    width: 95% !important;
    max-width: 100% !important;
    margin: var(--space-md) auto !important;
    border-radius: 8px !important;
  }

  .responsive .container {
    max-width: 100% !important;
    padding: var(--space-md) !important;
    font-size: 14px !important;
  }

  /* Section headings */
  .responsive .container h2 {
    font-size: 16px !important;
    margin-top: var(--space-md) !important;
  }

  /* Highlight text */
  .responsive .container .highlight {
    font-size: 15px !important;
  }

  /* Better readability on small screens */
  .responsive .container p {
    margin-bottom: var(--space-sm) !important;
  }
}