/* Mobile ergonomics.
   Loaded on every page. Only touches things the 360px audit flagged:
   tap targets under ~44px and body text under 12px. */

/* Nav and social links are text-only anchors, so their hit area was the text
   height (15-24px). Padding makes them thumb-sized without moving the layout. */
header nav a,
.social-links a,
footer a {
  display: inline-block;
  padding: 0.6rem 0.4rem;
  line-height: 1.2;
}

header nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.4rem;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.5rem;
  align-items: center;
}

/* The footer set 0.7rem inline (11.2px), under the readable floor. */
footer p {
  font-size: 0.78rem !important;
  line-height: 1.5;
}

/* Language toggle: keep both halves comfortably tappable. */
[data-lang-switcher] a,
[data-lang-switcher] span {
  min-height: 40px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

@media (max-width: 480px) {
  header nav a,
  .social-links a {
    padding: 0.65rem 0.45rem;
  }

  /* Never let a long word force a sideways scroll on a narrow screen. */
  h1, h2, h3, p, li {
    overflow-wrap: break-word;
  }
}

/* The header is position:fixed and wraps to two rows on narrow screens
   (~148px tall), which was covering the top of the hero photo. Give the
   hero enough clearance on mobile. */
@media (max-width: 768px) {
  .hero {
    padding-top: 168px !important;
  }
}