/* Mobile-specific overrides for ICS Analyzer (loaded conditionally via media query)
   Goal: eliminate horizontal overflow and ensure single-column layout.
*/

:root {
  --mobile-safe-padding: 1rem;
}

@media screen and (max-width: 1024px), screen and (max-device-width: 1024px) {
  /* Make sure no element can force horizontal scrolling */
  html, body {
    width: 100%;
    overflow-x: hidden;
  }

  /* Header: stack and center safely */
  header .container,
  .header-top,
  .header-flex {
    width: 100%;
    max-width: 100%;
  }

  .header-flex,
  .header-top {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
  }

  .brand {
    width: 100%;
    max-width: 100%;
  }

  .brand > div {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .nav,
  .nav-main {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Manual page uses a plain <nav> (no .nav class) */
  body.manual-page header nav {
    width: 100%;
    max-width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  body.manual-page header nav a {
    flex: 1 1 auto;
    text-align: center;
  }

  /* Landing page specific: let main be full width; sections handle containers */
  .main-embrapa {
    max-width: none;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  /* Avoid “overlap” causing side overflow on narrow screens */
  .features-section {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--mobile-safe-padding);
    padding-right: var(--mobile-safe-padding);
  }

  .features-grid {
    grid-template-columns: 1fr !important;
  }

  .content-section {
    padding-left: var(--mobile-safe-padding);
    padding-right: var(--mobile-safe-padding);
  }

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

  .team-grid {
    grid-template-columns: 1fr !important;
  }

  /* Wrap long text safely */
  h1, h2, h3, h4, p, a {
    overflow-wrap: anywhere;
  }

  /* Manual page: force single-column navigation blocks and CTAs */
  body.manual-page .manual-toc {
    grid-template-columns: 1fr !important;
  }

  body.manual-page .button-group {
    flex-direction: column;
    align-items: stretch;
  }

  body.manual-page .button-group .btn {
    width: 100%;
    max-width: none;
  }

  body.manual-page .manual-print-header {
    grid-template-columns: 1fr !important;
  }

  body.manual-page .manual-print-grid {
    grid-template-columns: 1fr !important;
  }

  body.manual-page .manual-figure.manual-figure--photo img {
    max-height: 320px;
  }
}

/* Phone-sized navigation: stack links vertically for true mobile UX */
@media screen and (max-width: 640px), screen and (max-device-width: 640px) {
  header nav,
  .header nav,
  .nav-main {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.35rem;
  }

  header nav a,
  .header nav a,
  .nav-main a,
  header .nav-link,
  .header .nav-link {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.6rem 0.75rem;
  }

  /* Manual: reduce “desktop” spacing and avoid fixed-looking blocks */
  body.manual-page main.container {
    width: 100%;
    max-width: 100%;
  }

  body.manual-page .card,
  body.manual-page .manual-figure,
  body.manual-page .manual-print-sheet {
    padding: 1rem;
  }

  body.manual-page .manual-figure.manual-figure--photo {
    max-width: 100%;
  }

  body.manual-page .manual-figure.manual-figure--photo img {
    max-height: 60vh;
  }
}