/* Site-wide mobile & iPad responsive fixes */

html {
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: clip;
}

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

/* Mobile: comfortable side padding */
@media (max-width: 47.99rem) {
  .container {
    padding-inline: 20px;
  }

  #footer {
    margin-top: 32px;
  }

  .h2,
  .h3,
  .h4,
  .h5,
  .h6 {
    overflow-wrap: break-word;
    word-wrap: break-word;
    max-width: 100%;
  }
}

/* Footer brand block — mobile & iPad */
@media (max-width: 63.99rem) {
  #footer .bg-infrared > .flex.w-full.flex-col.items-start h2.h6 {
    font-size: 1.1rem;
    line-height: 1.15;
  }

  #footer .bg-infrared > .flex.w-full.flex-col.items-start > .p2-mono {
    font-size: 0.675rem;
    line-height: 0.95rem;
  }
}

@media (min-width: 48rem) and (max-width: 63.99rem) {
  #footer .bg-infrared > .flex.w-full.flex-col.items-start h2.h6 {
    font-size: 1.25rem;
  }

  #footer .bg-infrared > .flex.w-full.flex-col.items-start > .p2-mono {
    font-size: 0.9rem;
    line-height: 1.25rem;
  }
}

/* iPad & tablet */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .container {
    padding-inline: 32px;
  }

  .h2,
  .h3,
  .h4,
  .h5,
  .h6 {
    overflow-wrap: break-word;
    word-wrap: break-word;
    max-width: 100%;
  }
}

/* Desktop header — prevent nav text wrapping & logo squeezing links */
@media (min-width: 64rem) {
  .layout--header nav {
    flex-shrink: 0;
  }

  .layout--header nav > ul {
    flex-wrap: nowrap;
  }

  .layout--header nav > ul > li {
    flex-shrink: 0;
  }

  .layout--header nav .p2-mono,
  .layout--header nav .p2-mono span {
    white-space: nowrap;
  }

  a.logo-heder {
    width: auto;
    max-width: 220px;
    flex-shrink: 0;
  }

  .logo-heder img {
    width: auto;
    max-width: 200px;
    height: auto;
  }
}