/**
 * Site-wide mobile layout fixes (all pages using style.css or legal .wrap pages).
 */

/* Legal / policy standalone pages */
.legal-page .wrap,
.wrap.legal-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(88px, 16vw, 100px) clamp(16px, 5vw, 32px) clamp(40px, 8vw, 60px);
  box-sizing: border-box;
}

.legal-page .card,
.wrap .card {
  padding: clamp(20px, 5vw, 28px);
  box-sizing: border-box;
}

/* Marketing / content heroes */
.page-hero,
.about-hero,
.contact-hero,
.checkout-hero,
.account-hero,
.tools-header,
.app-hero {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  flex-direction: column !important;
  align-items: stretch !important;
  padding-left: clamp(16px, 5vw, 60px);
  padding-right: clamp(16px, 5vw, 60px);
}

.page-hero h1,
.page-hero p,
.about-hero h1,
.about-hero p,
.contact-hero h1,
.contact-hero p,
.checkout-hero h1,
.checkout-hero p,
.app-hero h1,
.app-hero p {
  max-width: 100%;
  width: 100%;
  hyphens: none;
}

.content-section,
.help-wrapper,
.checkout-container,
.account-main,
.documentation-wrapper,
.careers-wrapper {
  max-width: 100%;
  box-sizing: border-box;
  padding-left: clamp(16px, 5vw, 40px);
  padding-right: clamp(16px, 5vw, 40px);
}

.content-grid,
.help-grid,
.docs-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
}

/* Tables scroll instead of breaking layout */
table {
  max-width: 100%;
}

.legal-page .card {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.legal-page table {
  min-width: 280px;
}

.table-scroll,
.content-card-content {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* All standard headers: logo + menu button, no squeezed inline nav */
  header .header-content {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
    box-sizing: border-box !important;
  }

  header .logo {
    flex: 1 1 auto;
    min-width: 0;
    font-size: clamp(1.2rem, 5vw, 1.8rem) !important;
  }

  header .header-right {
    flex-shrink: 0;
  }

  header .header-right .signin-btn {
    padding: 8px 14px !important;
    font-size: 0.85rem !important;
    white-space: nowrap;
  }

  .page-hero,
  .about-hero,
  .contact-hero,
  .checkout-hero,
  .account-hero,
  .app-hero {
    padding-top: clamp(88px, 20vw, 120px) !important;
    padding-bottom: 48px !important;
    text-align: center;
  }

  .page-hero h1,
  .about-hero h1,
  .contact-hero h1,
  .checkout-hero h1,
  .app-hero h1 {
    font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
  }

  .page-hero p,
  .about-hero p,
  .contact-hero p,
  .checkout-hero p,
  .app-hero p {
    font-size: 1.05rem !important;
    padding: 0;
  }

  .about-content,
  .contact-content,
  .account-content {
    padding-left: clamp(16px, 5vw, 24px) !important;
    padding-right: clamp(16px, 5vw, 24px) !important;
    box-sizing: border-box;
  }

  .about-grid,
  .content-grid {
    grid-template-columns: 1fr !important;
  }

  footer .footer-content {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .content-section {
    padding: 40px 16px !important;
  }

  .content-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .help-wrapper {
    padding: 88px 16px 32px !important;
  }

  .help-header {
    padding: 20px 16px !important;
  }

  .help-header h1 {
    font-size: 1.5rem !important;
  }

  .help-categories,
  .help-topics {
    grid-template-columns: 1fr !important;
  }

  /* Prevent aggressive hyphenation on readable copy */
  h1, h2, h3, p, li,
  .app-hero h1, .app-hero p,
  .page-hero h1, .page-hero p,
  .about-hero h1, .about-hero p {
    hyphens: manual;
    word-break: normal;
    overflow-wrap: break-word;
  }

  pre, code {
    overflow-x: auto;
    max-width: 100%;
    white-space: pre-wrap;
    word-break: break-word;
  }

  iframe {
    max-width: 100%;
  }
}

@media (max-width: 600px) {
  .content-grid {
    grid-template-columns: 1fr !important;
  }
}