/*
  Wortic macOS UI Kit — Nav Header
  wm-nav-header — navegação de cabeçalho para apps e sites: logo à
  esquerda, links de destino, busca, ações à direita. Material glass
  sticky no topo, versão compacta ao rolar (is-compact) e submenu
  dropdown por item. O comportamento (compact + submenu) vive em
  nav-header.js.
*/

@layer components {
  .wm-nav-header {
    position: sticky;
    top: 0;
    z-index: var(--wm-z-toolbar);
    display: flex;
    align-items: center;
    gap: var(--wm-space-8);
    height: var(--wm-nav-header-height);
    padding-inline: var(--wm-space-9);
    background: var(--wm-material-toolbar-bg);
    backdrop-filter: blur(var(--wm-material-blur))
      saturate(var(--wm-material-saturate));
    -webkit-backdrop-filter: blur(var(--wm-material-blur))
      saturate(var(--wm-material-saturate));
    border-bottom: var(--wm-border-width-hairline) solid
      color-mix(in srgb, var(--wm-separator) 85%, transparent);
    transition: height var(--wm-duration-normal) var(--wm-ease-standard),
      box-shadow var(--wm-duration-normal) var(--wm-ease-standard);
  }

  .wm-nav-header--inline {
    position: static;
  }

  /* Compacta ao rolar: menos altura + sombra de descolamento. */
  .wm-nav-header.is-compact {
    height: var(--wm-nav-header-height-compact);
    box-shadow: var(--wm-shadow-2);
  }
  .wm-nav-header.is-compact .wm-nav-header__brand-mark {
    width: var(--wm-control-height-sm);
    height: var(--wm-control-height-sm);
  }
  .wm-nav-header.is-compact .wm-nav-header__brand-sub {
    display: none;
  }

  /* ---------- Marca ---------- */

  .wm-nav-header__brand {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--wm-space-4);
    text-decoration: none;
    color: var(--wm-label-primary);
    border-radius: var(--wm-radius-md);
  }
  .wm-nav-header__brand:focus-visible {
    outline: var(--wm-focus-ring-width) solid var(--wm-accent);
    outline-offset: var(--wm-focus-ring-offset);
  }

  .wm-nav-header__brand-mark {
    width: var(--wm-control-height-md);
    height: var(--wm-control-height-md);
    border-radius: var(--wm-radius-settings-icon);
    flex: none;
    box-shadow: 0 0 0 0.5px var(--wm-separator),
      0 1px 2px hsl(var(--wm-shadow-color) / 0.14);
    transition: width var(--wm-duration-normal) var(--wm-ease-standard),
      height var(--wm-duration-normal) var(--wm-ease-standard);
  }

  .wm-nav-header__brand-name {
    font-size: var(--wm-font-size-headline);
    font-weight: var(--wm-font-weight-semibold);
    letter-spacing: var(--wm-tracking-headline);
    line-height: var(--wm-line-height-tight);
    white-space: nowrap;
  }
  .wm-nav-header__brand-sub {
    font-size: var(--wm-font-size-caption);
    letter-spacing: var(--wm-tracking-caption);
    color: var(--wm-label-tertiary);
    line-height: var(--wm-line-height-tight);
    white-space: nowrap;
  }

  /* ---------- Links de navegação ---------- */

  .wm-nav-header__nav {
    display: flex;
    align-items: center;
    gap: var(--wm-space-2);
    min-width: 0;
  }

  .wm-nav-header__item {
    position: relative;
  }

  .wm-nav-header__link {
    display: inline-flex;
    align-items: center;
    gap: var(--wm-space-3);
    height: var(--wm-control-height-md);
    padding-inline: var(--wm-space-6);
    border: none;
    background: transparent;
    border-radius: var(--wm-radius-md);
    font-size: var(--wm-font-size-body);
    font-weight: var(--wm-font-weight-medium);
    letter-spacing: var(--wm-tracking-body);
    color: var(--wm-label-secondary);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--wm-duration-fast) var(--wm-ease-standard),
      background-color var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-nav-header__link:hover {
    color: var(--wm-label-primary);
    background: var(--wm-fill-quaternary);
  }
  .wm-nav-header__link:active {
    background: var(--wm-fill-secondary);
  }
  .wm-nav-header__link[aria-current="page"] {
    color: var(--wm-label-primary);
    background: var(--wm-fill-secondary);
  }
  .wm-nav-header__link:focus-visible {
    outline: var(--wm-focus-ring-width) solid var(--wm-accent);
    outline-offset: var(--wm-focus-ring-offset);
    box-shadow: 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
  }

  .wm-nav-header__link-caret {
    flex: none;
    color: var(--wm-label-quaternary);
    transition: transform var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-nav-header__item.is-open .wm-nav-header__link-caret {
    transform: rotate(180deg);
  }
  .wm-nav-header__item.is-open > .wm-nav-header__link {
    color: var(--wm-label-primary);
    background: var(--wm-fill-secondary);
  }

  /* ---------- Submenu (dropdown por item) ---------- */

  .wm-nav-header__submenu {
    position: absolute;
    top: calc(100% + var(--wm-space-3));
    inset-inline-start: 0;
    min-width: var(--wm-nav-submenu-min-width);
    padding: var(--wm-space-2);
    margin: 0;
    list-style: none;
    background: var(--wm-material-popover-bg);
    backdrop-filter: blur(var(--wm-material-blur-strong))
      saturate(var(--wm-material-saturate-strong));
    -webkit-backdrop-filter: blur(var(--wm-material-blur-strong))
      saturate(var(--wm-material-saturate-strong));
    border-radius: var(--wm-radius-lg);
    box-shadow: var(--wm-shadow-floating), var(--wm-shadow-inner-hairline);
    z-index: var(--wm-z-dropdown);
    display: none;
  }
  .wm-nav-header__item.is-open > .wm-nav-header__submenu {
    display: block;
    animation: wm-nav-header-submenu-in var(--wm-duration-fast)
      var(--wm-ease-decelerate);
  }

  @keyframes wm-nav-header-submenu-in {
    from {
      opacity: 0;
      transform: translateY(calc(-1 * var(--wm-space-2)));
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .wm-nav-header__submenu-link {
    display: flex;
    align-items: flex-start;
    gap: var(--wm-space-4);
    padding: var(--wm-space-3) var(--wm-space-5);
    border-radius: var(--wm-radius-sm);
    color: var(--wm-label-primary);
    font-size: var(--wm-font-size-body);
    letter-spacing: var(--wm-tracking-body);
    text-decoration: none;
    transition: background-color var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-nav-header__submenu-link:hover {
    background: var(--wm-fill-secondary);
  }
  .wm-nav-header__submenu-link:focus-visible {
    outline: var(--wm-focus-ring-width) solid var(--wm-accent);
    outline-offset: calc(-1 * var(--wm-focus-ring-offset));
  }
  .wm-nav-header__submenu-icon {
    flex: none;
    margin-top: var(--wm-space-1);
    color: var(--wm-accent-text);
  }
  .wm-nav-header__submenu-title {
    font-weight: var(--wm-font-weight-medium);
    line-height: var(--wm-leading-body);
  }
  .wm-nav-header__submenu-desc {
    font-size: var(--wm-font-size-caption);
    letter-spacing: var(--wm-tracking-caption);
    line-height: var(--wm-leading-caption);
    color: var(--wm-label-tertiary);
  }
  .wm-nav-header__submenu-separator {
    height: var(--wm-border-width-hairline);
    background: color-mix(in srgb, var(--wm-separator) 85%, transparent);
    margin: var(--wm-space-2) var(--wm-space-4);
  }

  /* ---------- Busca ---------- */

  .wm-nav-header__search {
    flex: 1 1 auto;
    max-width: var(--wm-nav-search-width);
    min-width: 0;
  }
  .wm-nav-header__search .wm-field {
    height: var(--wm-control-height-md);
    background: var(--wm-fill-secondary);
    border-color: transparent;
  }

  .wm-nav-header__spacer {
    flex: 1 1 auto;
  }

  /* ---------- Ações à direita ---------- */

  .wm-nav-header__actions {
    flex: none;
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: var(--wm-space-3);
  }

  .wm-nav-header__icon-button {
    position: relative;
    width: var(--wm-control-height-md);
    height: var(--wm-control-height-md);
    display: inline-grid;
    place-items: center;
    border: none;
    background: transparent;
    border-radius: var(--wm-radius-md);
    color: var(--wm-label-secondary);
    cursor: pointer;
    transition: color var(--wm-duration-fast) var(--wm-ease-standard),
      background-color var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-nav-header__icon-button:hover {
    color: var(--wm-label-primary);
    background: var(--wm-fill-secondary);
  }
  .wm-nav-header__icon-button:active {
    background: var(--wm-fill-primary);
  }
  .wm-nav-header__icon-button:focus-visible {
    outline: var(--wm-focus-ring-width) solid var(--wm-accent);
    outline-offset: var(--wm-focus-ring-offset);
    box-shadow: 0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
  }

  .wm-nav-header__icon-dot {
    position: absolute;
    top: var(--wm-space-1);
    inset-inline-end: var(--wm-space-1);
    width: var(--wm-space-4);
    height: var(--wm-space-4);
    border-radius: var(--wm-radius-pill);
    background: var(--wm-error-solid);
    box-shadow: 0 0 0 var(--wm-border-width-thick) var(--wm-surface-overlay);
  }

  .wm-nav-header__avatar {
    width: var(--wm-control-height-md);
    height: var(--wm-control-height-md);
    flex: none;
    display: inline-grid;
    place-items: center;
    border-radius: var(--wm-radius-pill);
    background: var(--wm-accent-fill);
    color: var(--wm-accent-text);
    font-size: var(--wm-font-size-caption);
    font-weight: var(--wm-font-weight-semibold);
    letter-spacing: var(--wm-tracking-caption);
    overflow: hidden;
    cursor: pointer;
    border: none;
  }
  .wm-nav-header__avatar:focus-visible {
    outline: var(--wm-focus-ring-width) solid var(--wm-accent);
    outline-offset: var(--wm-focus-ring-offset);
  }

  .wm-nav-header__divider {
    width: var(--wm-border-width-hairline);
    height: var(--wm-icon-lg);
    background: var(--wm-separator-strong);
    flex: none;
  }

  @media (prefers-reduced-motion: reduce) {
    .wm-nav-header,
    .wm-nav-header__brand-mark,
    .wm-nav-header__link,
    .wm-nav-header__link-caret,
    .wm-nav-header__icon-button {
      transition: none;
    }
    .wm-nav-header__item.is-open > .wm-nav-header__submenu {
      animation: none;
    }
    .wm-nav-header__item.is-open .wm-nav-header__link-caret {
      transform: none;
    }
  }
}