/* AUD-002: the persistent site navigation (task 13.3). Loaded by
   `partials/head.html` only while AUD-002 is accepted.

   Not sticky on purpose: Requirement 8.2 wants the focus indicator never
   obscured by a `position: fixed` or `sticky` element, and a sticky bar is the
   usual way that goes wrong. The list wraps rather than scrolls, so at 320px
   every destination stays reachable with no horizontal scrollbar and no
   clipped text (Requirement 11.10). */

.tkc-nav {
  position: relative;
  z-index: 2;
  color: var(--tkc-color-text);
  background-color: var(--tkc-color-surface);
  border-bottom: thin solid var(--tkc-color-border);
  box-shadow: var(--tkc-shadow-sm);
}

.tkc-nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tkc-space-1) var(--tkc-space-2);
  max-width: 110rem;
  margin: 0 auto;
  padding: var(--tkc-space-2) var(--tkc-space-4);
  list-style: none;
}

.tkc-nav-list li {
  margin: 0;
}

.tkc-nav-link {
  display: inline-block;
  padding: var(--tkc-space-2) var(--tkc-space-4);
  color: var(--tkc-color-text);
  border-radius: var(--tkc-radius-pill);
  font-family: var(--tkc-font-text);
  font-size: var(--tkc-size-100);
  font-weight: var(--tkc-weight-medium);
  line-height: var(--tkc-leading-tight);
  text-decoration: none;
  transition:
    color var(--tkc-motion-fast) ease,
    background-color var(--tkc-motion-fast) ease;
}

.tkc-nav-link:hover {
  color: var(--tkc-color-accent-strong);
  background-color: color-mix(in srgb, var(--tkc-color-accent) 12%, transparent);
}

.tkc-nav-link.is-current {
  color: var(--tkc-color-bg);
  background-color: var(--tkc-color-text);
  font-weight: var(--tkc-weight-bold);
}

.tkc-nav-link:focus-visible {
  outline: medium solid var(--tkc-color-focus);
  outline-offset: var(--tkc-space-1);
}

@media (prefers-reduced-motion: reduce) {
  .tkc-nav-link {
    transition-duration: 0s;
  }
}

/* Requirement 11.10 asks for no horizontal scroll at 320px on any page. The one
   thing that broke it is the theme's hero title: `.btn-bootstrap-2` carries
   `white-space: nowrap`, so "THY KINGDOM COME" at the theme's size runs past a
   phone viewport (it does on the current site too). Let it wrap and keep it
   inside its container; the theme rule itself is left untouched. */
.main-header .page-title .btn-bootstrap-2 {
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  white-space: normal;
}