/* Shared navigation for every language. Keep layout rules in this file;
   labels come from the locale registry, never a CSS language allowlist. */
.mobile-quick-nav { display: none; }

/* The open header menu must stay above the guide's sticky category controls. */
.site-header { position: relative; z-index: 40; }
.site-header .resource-dropdown {
  white-space: normal;
  overflow-wrap: anywhere;
}

@container site (max-width: 1000px) {
  .mobile-quick-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 4px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    background: #fff;
  }

  .mobile-quick-nav a {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
    padding: 9px 12px;
    border-radius: 7px;
    font-size: 15px;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
    text-wrap: balance;
  }

  .mobile-quick-nav a:is(.current, [aria-current="page"]) {
    color: var(--accent);
    background: #eef1ff;
    font-weight: 600;
    box-shadow: none;
  }

  .mobile-quick-nav a:hover { background: #f3f5fa; }
  .mobile-quick-nav a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
  }
}

@container site (max-width: 600px) {
  /* Three actions followed by two; text may wrap inside its own touch target.
     This prevents a lone last action creating an unnecessary third row. */
  .mobile-quick-nav a {
    flex-basis: calc(33.333% - 4px);
    padding-inline: 6px;
  }
}