/* Blog frontend audit fixes: mobile navigation, keyboard focus, and static article utility fallbacks. */
.skip-link {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 1000;
  transform: translateY(-140%);
  background: #0f172a;
  color: #fff;
  border-radius: .65rem;
  padding: .7rem .95rem;
  font-weight: 900;
  text-decoration: none;
  transition: transform .16s ease;
}

.skip-link:focus-visible {
  transform: translateY(0);
}

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

.nav-links a:focus-visible,
.brand:focus-visible,
.card a:focus-visible,
.topic-link:focus-visible,
.path-row a:focus-visible,
.footer a:focus-visible,
.btn:focus-visible,
.faq summary:focus-visible {
  outline: 3px solid #38bdf8;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(56, 189, 248, .22);
}

.card:focus-within,
.topic-link:focus-visible {
  border-color: rgba(37, 99, 235, .42);
  box-shadow: 0 24px 60px rgba(15, 23, 42, .12);
}

@media (max-width: 900px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  .blog-hero {
    width: 100% !important;
    margin-left: 0 !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .nav-inner {
    height: auto !important;
    min-height: 82px;
    align-items: flex-start !important;
    flex-wrap: wrap;
    padding-top: .85rem !important;
    padding-bottom: .85rem !important;
  }

  .nav-links {
    width: 100%;
    display: flex !important;
    gap: .55rem !important;
    overflow-x: auto;
    padding-bottom: .15rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .nav-links a,
  .nav-links a:not(.nav-cta) {
    display: inline-flex !important;
    flex: 0 0 auto;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: .72rem .9rem;
    background: #fff;
    border: 1px solid #dbe7f3;
    white-space: nowrap;
  }

  .nav-links .nav-cta {
    border-color: transparent;
  }

  .hero h1,
  .blog-hero h1,
  .article h1 {
    max-width: 22ch !important;
    font-size: clamp(2rem, 9vw, 3rem) !important;
    line-height: 1.06 !important;
    text-wrap: balance;
  }
}