/* Primary nav and mega-menu. */

.st-nav {
  border-top: var(--st-rule-thin);
  background: var(--st-surface);
}

.st-nav__list {
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.st-nav__item {
  position: static;
}

.st-nav__link {
  display: flex;
  align-items: center;
  min-height: var(--st-h-touch);
  padding: 0 14px;
  border-bottom: 4px solid transparent;
  font-size: var(--st-size-body-sm);
  font-weight: var(--st-weight-bold);
  text-decoration: none;
  transition:
    border-color var(--st-transition),
    color var(--st-transition);
}

/* The active item, made persistent rather than invented.

   The handoff gives the menu exactly one state treatment — "Item de menu:
   aparece régua inferior de 4 px" (README.md, Interações) — and .st-nav__link
   already reserves the 4px transparent border that rule fills in on hover and
   focus. Where the shopper currently IS gets that same rule, permanently,
   plus a colour the momentary states do not need: hover is transient and
   reads fine in --st-ink, while the active item has to stay findable at a
   glance among six siblings that are all bold already.

   MegaMenuWalker emits --current for the ancestor cases too, so this lights up
   on a product page and on page 2 of a category — not only on the menu item's
   own URL. See its CURRENT_CLASSES docblock.

   Placed ahead of the hover/focus rule below to satisfy stylelint's
   no-descending-specificity (this selector is 0-2-0, those are 0-3-0), the
   same source-order convention the comment below already describes. The two
   never contend anyway: hovering the active item should look hovered. */
.st-nav__item--current > .st-nav__link {
  border-bottom-color: var(--st-accent);
  color: var(--st-accent-deep);
}

/* Ordered lowest-to-highest specificity (stylelint's no-descending-specificity) —
   purely a source-order convention; a comma-separated selector list applies the
   same declarations to each selector regardless of order, so this has no effect
   on which rule wins anything. */
.st-nav__link:active,
.st-nav__item:hover > .st-nav__link,
.st-nav__item:focus-within > .st-nav__link {
  border-bottom-color: var(--st-accent);
  color: var(--st-ink);
}

.st-mega {
  position: absolute;
  inset-inline: 0;
  z-index: 40;
  display: none;
  overflow-y: auto;
  overscroll-behavior: contain;

  /* Caps the mega-menu so it scrolls internally instead of clipping past the
     bottom of a short desktop window (e.g. 1024x600) — .st-mega has no
     explicit top, so it renders right at .st-header's bottom edge, and a
     tall column (many links under one heading) could otherwise run off the
     viewport with no way to reach the rest.
     `--st-mega-ceiling` is header.js's live measurement of .st-header's
     actual rendered bottom-edge position (see header.js for why that has to
     be measured, not guessed) via getBoundingClientRect(), refreshed on
     load/resize/hover/focus. 163px is the no-JS fallback only: .st-header's
     own rendered height (topbar 36px + main row 80px + nav row 45px, plus
     borders) measured the same way, at both 900px and 1024px viewport
     widths — the full range where the mega-menu is shown at all — on
     2026-09-02. It intentionally does not include anything that might
     render above the header on the page; the JS measurement is what
     accounts for that, live, in the case that actually matters.
     Known gap, documented rather than fixed: the 163px fallback is only
     reachable with JS unavailable, and even then under-shoots by ~32px for
     a logged-in user with the WP admin bar showing (it renders above
     .st-header too, same as the sprite bug did, and this fallback predates
     knowing that). No-JS + logged-in-admin is a narrow enough combination
     that scrolling slightly earlier than strictly necessary (the failure
     mode here, not clipping) hasn't been worth chasing further. */
  max-height: calc(100vh - var(--st-mega-ceiling, 163px));
  background: var(--st-surface-2);
  border-block: var(--st-rule);
}

/* Escape-to-close override (WCAG 1.4.13 dismissibility) — :hover/:focus-within
   alone give the mega-menu no way to be dismissed without moving the pointer
   or losing focus. header.js toggles this class on Escape; !important is
   deliberate here, not a shortcut: it has to outrank :hover AND :focus-within
   simultaneously, including while the pointer never left the trigger. Placed
   ahead of the (higher-specificity) hover/focus-within rule below purely to
   satisfy stylelint's no-descending-specificity — !important means source
   order between them was never load-bearing, same convention as card.css. */
.st-nav__item--mega-closed > .st-mega {
  display: none !important;
}

.st-nav__item--has-mega:hover > .st-mega,
.st-nav__item--has-mega:focus-within > .st-mega {
  display: block;
}

.st-mega__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-block: 28px;
}

.st-mega__heading {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: var(--st-rule-thin);
  color: var(--st-muted);
  font-size: var(--st-size-eyebrow);
  font-weight: var(--st-weight-extrabold);
  letter-spacing: var(--st-track-eyebrow);
  text-transform: uppercase;
}

.st-mega__links {
  display: grid;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.st-mega__links a {
  display: flex;
  align-items: center;
  min-height: var(--st-h-touch);
  font-size: var(--st-size-body-sm);
  text-decoration: none;
}

/* A link inside a mega-menu column, when the shopper is on it or under it.
   The same colour .st-mega__links a:hover uses below — this is the hover
   treatment held open, not a new one — with the weight doing the work of
   telling the two apart. Ahead of the hover rule for no-descending-specificity
   (0-2-0 against that rule's 0-2-1). */
.st-mega__link-item--current > a {
  color: var(--st-accent-deep);
  font-weight: var(--st-weight-bold);
}

.st-mega__links a:hover,
.st-mega__links a:active {
  color: var(--st-accent-deep);
}

/* The nav row is the desktop affordance; below 900px the drawer takes over. */
@media (max-width: 899px) {
  .st-nav {
    display: none;
  }
}