/* ============================================================================
   IGW-NET Users' Manual — Mobile Responsiveness Patch
   Purpose: loaded AFTER chapter inline CSS to prevent phone-width overflow.
   ============================================================================ */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.page-wrap,
.nav,
.hero,
.layout,
.content,
.footer,
.quick-read,
.callout,
.see-also,
.steps,
.step,
figure,
.chapter-footer {
  max-width: 100%;
  box-sizing: border-box;
}

.content,
.layout,
.layout > *,
.quick-read,
.callout,
.see-also,
.step,
.chapter-footer,
.hero,
.nav {
  min-width: 0;
}

img,
svg,
video,
canvas,
iframe {
  max-width: 100%;
  height: auto;
}

pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.content code,
code,
.content .nav-path,
.content .ui,
.hero h1,
h2.section,
h3.subsection,
figcaption,
li,
p {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* The original .ui rule uses white-space: nowrap; this is a common phone overflow source. */
.content .ui {
  white-space: normal !important;
}

.content .nav-path {
  display: inline;
  white-space: normal !important;
}

/* Keep tables usable on phones without forcing the whole page wider. */
table,
.decision-table {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.decision-table thead,
.decision-table tbody {
  min-width: 0 !important;
}

@media (max-width: 760px) {
  body {
    padding: 0 !important;
    background: #fff !important;
  }

  .page-wrap {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .nav {
    padding: 12px 16px !important;
    gap: 8px 12px !important;
    flex-wrap: wrap !important;
  }

  .nav .breadcrumb {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }

  .hero {
    padding: 28px 18px 24px !important;
  }

  .hero h1 {
    font-size: clamp(25px, 8vw, 34px) !important;
    line-height: 1.15 !important;
  }

  .hero .lead {
    font-size: 16px !important;
    max-width: 100% !important;
  }

  .hero .chapter-meta {
    gap: 12px 18px !important;
  }

  .layout {
    display: block !important;
    width: 100% !important;
  }

  .sidebar {
    display: none !important;
  }

  .content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 28px 18px 48px !important;
    margin: 0 !important;
  }

  .quick-read {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 16px 14px 20px !important;
  }

  .content ul,
  .content ol {
    margin-left: 20px !important;
  }

  .content li {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  h2.section {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }

  h2.section .section-num,
  h3.subsection .section-num {
    display: inline-block !important;
    margin-bottom: 4px !important;
  }

  figure {
    margin: 20px 0 !important;
    padding: 10px !important;
  }

  figcaption {
    padding: 0 !important;
  }

  .step {
    padding: 16px 16px 16px 52px !important;
  }

  .chapter-footer {
    flex-direction: column !important;
    gap: 12px !important;
  }

  .chapter-footer a,
  .chapter-footer a.next {
    text-align: left !important;
  }

  th,
  td,
  .decision-table th,
  .decision-table td {
    padding: 9px 12px !important;
    font-size: 13px !important;
  }

  .footer {
    padding: 20px 16px !important;
  }
}

@media (max-width: 400px) {
  .nav,
  .hero,
  .content,
  .footer {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .hero .chapter-marker {
    max-width: 100% !important;
    white-space: normal !important;
  }
}