/* The menu under the header (All artworks, Style, Artists, Recently sold). Spaced capitals between
   two hairlines, centred; the current page gets a painted brush stroke. Wide screens only: phones get
   the tab bar at the bottom (tab-bar.css, ADR-0033). The Style menu drops a panel of style names set
   large in the display serif. */

@layer components {
  .category-nav {
    position: relative;
    border-block: 1px solid var(--bp-line);
  }

  @media (max-width: 819.98px) {
    .category-nav { display: none; }
  }

  .category-nav__list {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .category-nav__item { display: flex; align-items: center; flex: none; }

  .category-nav__link {
    position: relative;
    display: block;
    padding: 14px 12px;
    color: var(--bp-ink);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: var(--tracking-label);
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    isolation: isolate;
  }

  .category-nav__link::after {
    content: "";
    position: absolute;
    inset-inline: 6px;
    bottom: 9px;
    z-index: -1;
    height: 7px;
    background: var(--bp-brand-600);
    opacity: 0;
    -webkit-mask: url("/img/brush/swash.svg") no-repeat center / 100% 100%;
    mask: url("/img/brush/swash.svg") no-repeat center / 100% 100%;
    transform: scaleX(.3);
    transform-origin: left center;
    transition: transform var(--dur-slow) var(--ease), opacity var(--dur);
  }

  .category-nav__link:hover { color: var(--bp-ink); }
  .category-nav__link:hover::after { opacity: .35; transform: scaleX(1); }
  .category-nav__link[aria-current]::after { opacity: .6; transform: scaleX(1); }

  /* Links elsewhere on the bar, pushed to the right on wide screens. */
  .category-nav__item--end { margin-inline-start: auto; }


  .category-nav :focus-visible { outline-offset: -3px; }

  /* Style: the word and its arrow are one button that drops the menu. */
  .category-nav__toggle {
    display: flex;
    align-items: center;
    gap: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    line-height: inherit;
    cursor: pointer;
  }

  .category-nav__toggle:hover .icon { color: var(--bp-brand-600); }
  .category-nav__toggle .icon { margin-block: -4px; font-size: 20px; transition: transform var(--dur) var(--ease); }
  .category-nav__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }

  /* The Style panel hangs under the whole bar, full width. */
  .category-nav__menu {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: var(--z-header);
    border-block: 1px solid var(--bp-line);
    background: var(--bp-paper);
    box-shadow: var(--shadow-lg);
  }

  .category-nav__menu-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0 var(--space-8);
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-6) var(--gutter) var(--space-8);
    list-style: none;
  }

  .category-nav__menu-link {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--bp-line);
    color: var(--bp-heading);
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 300;
    font-style: italic;
    text-decoration: none;
    transition: color var(--dur), padding var(--dur) var(--ease);
  }

  .category-nav__menu-link:hover,
  .category-nav__menu-link[aria-current] { padding-inline-start: 6px; color: var(--bp-brand-600); }
}