/*
 * Nesa Underwear navigation mega menu & dropdowns.
 */

/* Trigger labels never change color on hover/focus — always var(--nesa-ink) */
.bp-nav__trigger,
.bp-nav__trigger:hover,
.bp-nav__trigger:focus,
.bp-nav__trigger:focus-visible,
.bp-nav__item:hover .bp-nav__trigger,
.bp-nav__item--has-children:hover > a {
  color: var(--nesa-ink) !important;
}

.bp-nav__item--has-children > a { position: relative; }

/* Nav row is the positioning context so the mega can drop down full-width
   (absolute, top:100%) just like the regular dropdown — instead of a fixed bar. */
.bp-header-nav { position: relative; }

/* ---------- Mega menu — drops down below the nav row, full width ---------- */
.bp-mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bp-bg, #fff);
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 9000;
}
.bp-nav__item--mega { position: static; }
.bp-nav__item--mega:hover .bp-mega { opacity: 1; visibility: visible; }

/*
 * Panel layout lives in the Nesa block further down. What was here pinned
 * __inner to a centred 1320px column, which is why the first heading sat well
 * inside the logo instead of aligning with it. .bp-mega__cols described a
 * wrapper the walker no longer emits.
 */
.bp-mega__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Column headings — same color/style as the header, capitalized (not all-caps) */
.bp-mega__heading {
  font-size: 16px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--nesa-ink);
  margin: 0 0 0.875rem;
}

/* Column links — green text + green underline on hover */
.bp-mega__col a {
  font-size: 0.9375rem;
  color: var(--bp-text, var(--nesa-ink));
  text-decoration: none;
  padding: 0.25rem 0;
  transition: color 0.15s ease;
}
.bp-mega__col a:hover {
  color: var(--bp-green, var(--nesa-ink));
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Promo card — header green */
/*
 * The old promo was a flex card with a fixed `width: 260px` plus a title,
 * body and pill button. That fixed width overrode the grid track, so the
 * promo never matched the column it sits in. The walker now emits a plain
 * image + underlined label; its rules are in the Nesa block below.
 */

/* ---------- Regular dropdown ---------- */
.bp-nav__item--has-children:not(.bp-nav__item--mega) { position: relative; }
.bp-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 260px;
  background: var(--bp-bg, #fff);
  border: 1px solid var(--bp-border, var(--nesa-line));
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  padding: 0.75rem 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 9000;
}
.bp-nav__item--has-children:not(.bp-nav__item--mega):hover .bp-nav__dropdown {
  opacity: 1;
  visibility: visible;
}
.bp-nav__dropdown a {
  display: block;
  padding: 0.5rem 1.25rem;
  font-size: 0.9375rem;
  color: var(--bp-text, var(--nesa-ink));
  text-decoration: none;
  transition: color 0.15s ease;
}
/* No background change — keep white, green text + green underline on hover */
.bp-nav__dropdown a:hover {
  background: transparent;
  color: var(--bp-green, var(--nesa-ink));
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ══ Nesa mega menu ════════════════════════════════════════════════════════
 *
 * Markup from Oxa\Theme\Nav\MegaWalker. Appended after the inherited nav rules
 * so these win on source order.
 */

.bp-nav { display: flex; align-items: stretch; min-width: 0; }

.bp-nav__list {
  display: flex;
  align-items: stretch;
  /* The items carry their own padding-inline, so the gap only has to keep the
   * hover underlines from touching. 21px on top of that was what pushed the
   * eighth item out of the row. */
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* static, so the full-bleed panel resolves against the header, not the item */
.bp-nav__item { position: static; display: flex; }

.bp-nav__link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;

  /*
   * Sits 8px below the row's centre line.
   *
   * The link stretches the full row height and centres its own content, so
   * padding at the top shifts the label down by HALF the value — 1rem of
   * padding-top reads as an 8px drop. Nudged off centre on purpose: it settles
   * the labels closer to the active underline on the header's bottom rule, and
   * away from the logo's centre now that the logo is 56px.
   */
  padding-block: 1rem 0;
  font-family: var(--nesa-font-sans);
  font-size: .875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--nesa-ink);
  white-space: nowrap;

  /* The active bar sits on the header's bottom rule. Transparent by default so
   * the text never shifts when it appears. */
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;   /* overlap the header hairline */
  transition: border-color var(--oxa-dur) var(--oxa-ease);
}

.bp-nav__item:hover > .bp-nav__link,
.bp-nav__item:focus-within > .bp-nav__link,
.bp-nav__item.current-menu-item > .bp-nav__link,
.bp-nav__item.current-menu-ancestor > .bp-nav__link { border-bottom-color: var(--nesa-ink); }

.bp-nav__item--sale > .bp-nav__link { color: var(--nesa-sale); }
.bp-nav__item--sale:hover > .bp-nav__link { border-bottom-color: var(--nesa-sale); }

/* The design shows no caret on the top-level items. */
.bp-nav__caret { display: none; }

/* ── Panel ─────────────────────────────────────────────────────────────── */

.bp-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 40;
  background: var(--nesa-bg);
  border-bottom: 1px solid var(--nesa-line);

  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--oxa-dur) var(--oxa-ease),
    visibility 0s linear var(--oxa-dur);
}

.bp-nav__item--mega:hover > .bp-mega,
.bp-nav__item--mega:focus-within > .bp-mega {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.bp-mega__inner {
  display: grid;
  /* Five equal tracks — four text columns and the promo — spanning gutter to
   * gutter, so the first heading starts on the same vertical as the logo and
   * the promo ends level with the cart link. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2.5rem);
  align-items: start;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  /* Left padding is the gutter PLUS the logo's own empty margin, so the first
   * heading lands on the logo mark rather than on the image box that contains
   * it. Right stays at the plain gutter, keeping the promo level with the cart
   * icon. */
  padding: 2rem var(--nesa-gutter) 2.5rem
           calc(var(--nesa-gutter) + var(--nesa-logo-inset));
}

.bp-mega__col { min-width: 0; }

.bp-mega__heading {
  display: block;
  margin-bottom: 1.75rem;
  font-family: var(--nesa-font-sans);
  font-size: .8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--nesa-ink);
}
a.bp-mega__heading:hover { text-decoration: underline; text-underline-offset: 4px; }

.bp-mega__col ul,
.bp-mega__sublist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bp-mega__subitem + .bp-mega__subitem { margin-top: 1.1rem; }

.bp-mega__link {
  font-family: var(--nesa-font-sans);
  font-size: .9375rem;
  font-weight: 400;
  color: var(--nesa-ink);
}
.bp-mega__link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* The catch-all at the foot of a column ("Të gjitha brusat"). */
.bp-mega__link--strong { font-weight: 600; }

/* ── Promo ─────────────────────────────────────────────────────────────── */

/* Always the last track. Brusa fills all four text columns, but the other
 * categories only use two — without pinning, the promo would slide left to sit
 * beside them instead of staying flush with the right gutter. */
.bp-mega__promo {
  grid-column: 5;
  display: block;
  color: var(--nesa-ink);
}

.bp-mega__promo-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.bp-mega__promo-label {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--nesa-font-sans);
  font-size: .8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  border-bottom: 1px solid var(--nesa-ink);
  padding-bottom: 2px;
}

.bp-nav__empty { margin: 0; font-size: var(--oxa-fs-sm); color: var(--nesa-ink-soft); }

@media (max-width: 1024px) {
  /* Desktop header is hidden below 1025px; the drawer takes over. */
  .bp-mega { display: none; }
}