body > nav,
[aria-label~="navbar"],
.navbar {
  padding-inline: var(--nav-padding-inline, 1rem);
  min-height: var(--nav-height, fit-content);

  @media (max-width: 580px) {
    flex-direction: column;
    height: fit-content;
    min-height: fit-content;
    padding-block: unset;
    gap: 0.5rem;
  }
  ul {
    > li {
      display: flex;
      align-items: center;
      list-style: none;
      margin: 0;
      padding: 0;
      min-height: 100%;
      padding-inline: var(--nav-padding-inline, 0.75rem);

      &:hover {
        background-color: var(--nav-hover-bg, var(--color-surface-secondary));
      }
      &:hover:has(img, button) {
        background-color: transparent;
      }
    }
  }
}

nav {
  // Focus Indicator Variables (WCAG 2.4.7 - 3:1 contrast minimum)
  --nav-focus-color: currentColor;
  --nav-focus-width: 0.125rem; // 2px
  --nav-focus-offset: 0.125rem; // 2px
  --nav-focus-style: solid;

  display: var(--nav-display, flex);
  flex-direction: var(--nav-direction, row);
  width: var(--nav-width, auto);
  place-items: var(--nav-align, center);
  justify-content: var(--nav-justify, space-between);
  margin-inline: var(--nav-margin-inline, 0);
  background-color: var(--nav-bg, initial);

  > section,
  > ul {
    --nav-display: flex;
    flex-direction: var(--nav-direction, row);
    display: var(--nav-display, flex);
    gap: var(--nav-gap, 0);
    font-size: var(--nav-fs, 0.9rem);
    align-items: var(--nav-align, center);
    padding-inline: var(--nav-padding-inline, 1rem);
    padding-block: var(--nav-padding-block, 0);
    margin-block-end: var(--nav-margin-block-end, 0);
    height: 100%;
    &[data-list~="block"] {
      --nav-direction: column;
    }
  }

  > section {
    > div {
      --nav-padding-block: 0;
    }
  }

  ul {
    > li {
      display: flex;
      align-items: center;
      list-style: none;
      margin: 0;
      padding: 0;
      min-height: 100%;
      padding-inline: var(--nav-padding-inline, 1rem);
    }
  }

  img[alt] {
    --nav-img-padding-inline: 0 var(--s1);
    --nav-img-width: var(--brand-w, 3.6rem);
  }

  &[data-variant] {
    background-color: var(--nav-bg);
    color: var(--nav-color);
    font-size: var(--nav-fs, 0.9rem);
  }

  > div {
    margin-block-start: 0;
  }

  // Focus indicators for links and buttons (WCAG 2.4.7)
  a:focus {
    outline: var(--nav-focus-width) var(--nav-focus-style)
      var(--nav-focus-color);
    outline-offset: var(--nav-focus-offset);
  }

  a:focus-visible {
    outline: var(--nav-focus-width) var(--nav-focus-style)
      var(--nav-focus-color);
    outline-offset: var(--nav-focus-offset);
  }

  button:focus {
    outline: var(--nav-focus-width) var(--nav-focus-style)
      var(--nav-focus-color);
    outline-offset: var(--nav-focus-offset);
  }

  button:focus-visible {
    outline: var(--nav-focus-width) var(--nav-focus-style)
      var(--nav-focus-color);
    outline-offset: var(--nav-focus-offset);
  }
}