/* base.css
   Shared responsive/layout fixes across all pages.
   Loaded AFTER page-specific CSS so it can safely override layout issues.
*/

/* Safer defaults */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

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

/* Prevent long strings (URLs, long words) from breaking layouts */
p,
h1,
h2,
h3,
h4,
h5,
h6,
li,
a {
  overflow-wrap: anywhere;
}

/* Header: prevent nav overflow on small screens */
.header {
  flex-wrap: wrap;
  gap: 12px;
}

.header nav ul {
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.header nav ul li {
  width: auto !important; /* overrides fixed widths in some pages */
}

.header nav ul li a {
  margin: 0 !important; /* overrides large margins in some pages */
}

#contact-us {
  white-space: nowrap;
}

/* Footer: allow wrapping instead of overflow */
footer {
  flex-wrap: wrap;
  gap: 24px;
}

.footer-links,
.hyperlinks {
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li,
.hyperlinks li {
  width: auto !important;
}

.footer-links a,
.hyperlinks a {
  white-space: nowrap;
}

/* Home page: prevent huge fixed spacing on small screens */
@media (max-width: 720px) {
  body {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .banner-content {
    margin-top: clamp(64px, 10vh, 120px) !important;
    height: auto !important;
    font-size: clamp(18px, 4.5vw, 28px) !important;
    line-height: 1.4 !important;
  }

  #greeting {
    font-size: clamp(32px, 10vw, 48px) !important;
  }

  .banner-content .info {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  #work-grid {
    gap: 72px !important;
  }

  .project-title {
    flex-direction: column;
    gap: 12px;
  }
}

/* Case study pages: reduce overly wide side-by-side layouts */
@media (max-width: 720px) {
  .project-container {
    width: 100% !important;
  }

  .details,
  .context-wrapper,
  .prob-sol,
  .key-metrics,
  .solution1 {
    flex-direction: column !important;
    gap: 24px !important;
  }

  .gif {
    width: 100% !important;
    height: auto !important;
  }

  iframe {
    width: 100% !important;
  }
}