/* Shared responsive navigation and layout safety rules.
   CSS-first: without the "js" class on <html>, every link stays visible. */

img {
  max-width: 100%;
  height: auto;
}

/* Keep alt text of failed images inside the viewport (Req 5.8). */
img,
table,
iframe,
video,
pre {
  max-width: 100%;
}

body,
main,
header,
footer,
nav,
li,
td,
th {
  min-width: 0;
  overflow-wrap: anywhere;
}

table {
  display: block;
  overflow-x: auto;
}

.nav-toggle {
  display: none;
  min-height: 44px;
  min-width: 44px;
  cursor: pointer;
  transition: background-color 150ms ease;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav a {
  display: inline-block;
  transition: color 150ms ease;
}

@media (max-width: 767.98px) {
  nav a,
  nav button {
    min-height: 44px;
    min-width: 44px;
    box-sizing: border-box;
  }

  nav a {
    display: flex;
    align-items: center;
  }

  /* Toggle is shown, and the list collapsed, only when JavaScript is active. */
  .js .nav-toggle {
    display: inline-block;
  }

  .js nav ul {
    display: none;
  }

  .js nav ul.is-open,
  .js .nav-toggle.is-open + ul {
    display: block;
  }
}

@media (min-width: 768px) {
  .nav-toggle,
  .js .nav-toggle {
    display: none;
  }

  nav ul,
  .js nav ul {
    display: flex;
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-toggle,
  nav a {
    transition: none;
  }
}