/*
 * BesaPharm navigation mega menu & dropdowns.
 */

/* Trigger labels never change color on hover/focus — always #333333 */
.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: #333333 !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);
  border-top: 1px solid var(--bp-border, #e5e7eb);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
  padding: 2.5rem 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; }

.bp-mega__inner {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  display: flex;
  gap: 3rem;
}

/* Category columns */
.bp-mega__cols {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
.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: #333333;
  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, #111827);
  text-decoration: none;
  padding: 0.25rem 0;
  transition: color 0.15s ease;
}
.bp-mega__col a:hover {
  color: var(--bp-brand-hover, #3d3d3d);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Promo card — header green */
.bp-mega__promo {
  width: 260px;
  flex-shrink: 0;
}
.bp-mega__promo-card {
  background: var(--bp-brand, #111111);
  color: #fff;
  border-radius: 16px;
  padding: 1.5rem;
}
.bp-mega__promo-title {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  line-height: 1.25;
}
.bp-mega__promo-text {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
  margin: 0 0 1.25rem;
}
/* Centered button — white bg / #1d1d1d text, inverts to black on hover */
.bp-mega__promo-btn {
  display: block;
  width: fit-content;
  margin-inline: auto;
  background: #fff;
  color: #1d1d1d;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.bp-mega__promo-btn:hover {
  background: #1d1d1d;
  color: #fff;
}

/* ---------- Dropdown ----------
 * Geometry and timing follow the reference build: a fixed-width flyout that
 * fades in while rising into place, over one duration shared by all three
 * transitioned properties.
 *
 * `visibility` is transitioned alongside opacity on purpose. Without it the
 * panel would be display-less but still focusable while invisible; with it, the
 * panel turns visible as soon as the transition starts and only turns hidden
 * once it has finished, so the fade-out is not cut short.
 *
 * Every value here comes from Appearance → Header → "Dropdown menus"; the
 * fallbacks are the same numbers, so the CSS still stands up on its own. */
.bp-nav__item--has-children:not(.bp-nav__item--mega) { position: relative; }
.bp-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: var(--bp-dd-w, 250px);
  max-width: none;
  padding: 0;
  background: var(--bp-dd-bg, #f1f1f1);
  border-radius: var(--bp-dd-radius, 0px);
  /* One knob drives the whole shadow, so 0 genuinely means "no shadow" rather
   * than "a hard-edged offset block". */
  box-shadow: 0 calc(var(--bp-dd-shadow, 0px) / 3) var(--bp-dd-shadow, 0px) rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translate(0, var(--bp-dd-rise, 10px));
  transition:
    opacity var(--bp-dd-speed, 200ms) ease-in,
    transform var(--bp-dd-speed, 200ms) ease-in,
    visibility var(--bp-dd-speed, 200ms) ease-in;
  z-index: 999;
}
.bp-nav__item--has-children:not(.bp-nav__item--mega):hover .bp-nav__dropdown,
.bp-nav__item--has-children:not(.bp-nav__item--mega):focus-within .bp-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
}
.bp-nav__dropdown a {
  display: block;
  padding-inline: var(--bp-dd-pad-x, 16px);
  /* Row height is set by line-height rather than vertical padding, so the
   * setting reads as "the spacing between entries" and nothing has to be
   * recalculated when the font size changes. */
  line-height: var(--bp-dd-item-h, 38px);
  font-size: var(--bp-dd-size, 15px);
  color: var(--bp-dd-fg, #43454b);
  text-decoration: none;
  transition: color 0.15s ease, background-color 0.15s ease;
}
.bp-nav__dropdown a:hover,
.bp-nav__dropdown a:focus-visible {
  background: var(--bp-dd-hover-bg, #ffffff);
  color: var(--bp-dd-hover-fg, #111111);
  text-decoration: none;
}

/* ── Dropdown indicator ──
 * A small solid caret rather than a drawn chevron, matching the reference
 * storefront's menu. Sized in em so it tracks the link's own font size. */
.bp-nav .menu-item-has-children > a > .bp-nav__caret,
.bp-nav .menu-item-has-children > a > svg,
.bp-nav__caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.45em;
  border-left: 0.3em solid transparent;
  border-right: 0.3em solid transparent;
  border-top: 0.32em solid currentColor;
  border-bottom: 0;
  vertical-align: middle;
  transition: transform 0.15s ease;
}
.bp-nav .menu-item-has-children:hover > a > .bp-nav__caret { transform: rotate(180deg); }

/* A darker fill on dropdown rows, so the row under the pointer reads as
 * selected rather than as a slightly different white. The token still wins
 * where Appearance → Header sets one. */
.bp-nav__dropdown a:hover,
.bp-nav__dropdown a:focus-visible {
  background: var(--bp-dd-hover-bg, #d9d9d9);
}

/* Caret: a touch narrower than tall, in its own dark grey rather than
 * inheriting the link colour, so it stays constant as links change state.
 * The easing is gentler than the shared ease-in so the slower open reads as
 * deliberate rather than laggy. */
.bp-nav__caret {
  /* Kept narrow, but given more height: at 4px tall a solid triangle is mostly
   * anti-aliased edge, which reads as grey however black the colour is. More
   * body means more fully-painted pixels, so it looks as dark as it is. */
  border-left-width: 0.26em;
  border-right-width: 0.26em;
  border-top-width: 0.4em;
  border-top-color: #000;
  transition: transform var(--bp-dd-speed, 320ms) cubic-bezier(0.4, 0, 0.2, 1);
}
.bp-nav__dropdown {
  transition:
    opacity var(--bp-dd-speed, 320ms) cubic-bezier(0.4, 0, 0.2, 1),
    transform var(--bp-dd-speed, 320ms) cubic-bezier(0.4, 0, 0.2, 1),
    visibility var(--bp-dd-speed, 320ms) cubic-bezier(0.4, 0, 0.2, 1);
}