/* Mobile layout corrections.
   Loaded last on every page so it overrides each post's inline <style>.
   The site header was a single flex row with the logo and five links; below
   about 700px that row is wider than the screen, which pushed the whole page
   sideways. Here the header stacks instead of overflowing. */

@media (max-width: 720px) {

  /* --- header --- */
  nav, .nav {
    position: static;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 1rem 1.1rem;
    text-align: center;
  }

  .nav-logo {
    font-size: 0.92rem;
    letter-spacing: 0.14em;
    white-space: nowrap;
  }

  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.1rem;
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 100%;
  }

  .nav-links a {
    font-size: 0.82rem;
    white-space: nowrap;
  }

  /* --- nothing should force sideways scrolling --- */
  body { overflow-x: hidden; }

  img, video, iframe, table, pre { max-width: 100%; }

  h1, h2, h3, p, li, blockquote { overflow-wrap: break-word; }

  /* --- readable gutters on a phone --- */
  .post, .blog-list { margin: 2.5rem auto; padding: 0 1.2rem; }

  .post-header h1 { font-size: 1.7rem; }
  .blog-list h1 { font-size: 1.9rem; }
}