/* .nav__item — styles for src/lib/expand.mjs's `x-header` (its phone/contact
   links). Load AFTER tokens.css. See public/components/README.md for load
   order and the split rationale.

   .nav itself (the flex container below) has no current consumer: the
   industries switcher is still built by render.mjs's buildNavHtml directly
   into a bare <nav id="industries-nav"> with no class, not through this
   component — src/lib/components/nav.mjs, which used to wrap it in .nav, was
   retired in the 2026-08 component consolidation as fully superseded. Kept
   here rather than deleted since .nav__item still depends on rules this file
   owns (see the comment on that class below) and a future industries-switcher
   x-tag would likely want this wrapper back. */

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}

/* background-color/font-family/cursor were originally here so .nav__item
   also worked on a <button> (the old plain-text theme toggle) as cleanly as
   it did on an <a> — that button is gone (see theme-toggle.css), but every
   current .nav__item usage is still an <a>, which never carries browser UA
   chrome to reset anyway, so these three properties are inert rather than
   load-bearing today. Left in place rather than trimmed: harmless on an
   anchor, and removing them now is exactly the kind of "looks unused, isn't
   worth the diff" cleanup that's cheaper to skip than to get wrong. */
.nav__item {
  display: inline-block;
  padding: var(--nav-item-padding-block) var(--nav-item-padding-inline);
  background-color: transparent;
  border: var(--border-width-hairline) solid transparent;
  border-radius: var(--radius-default);
  color: var(--color-text-primary);
  text-decoration: none;
  font-family: inherit;
  font-size: var(--size-200);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing-standard),
    border-color var(--duration-fast) var(--easing-standard);
}

.nav__item:hover,
.nav__item:focus-visible {
  background-color: var(--color-surface-hover);
}

.nav__item[aria-current="page"] {
  background-color: var(--color-surface-hover);
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-nav-current);
  font-weight: var(--weight-semibold);
}

/* Split from .btn's identical rule in button.css so each file only lists the
   selectors it owns — see public/components/README.md on why load order
   between the two does not matter. */
.nav__item:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}