/* ==========================================================================
   Women Worrld — utility bar + 70% mega menu
   --------------------------------------------------------------------------
   Loaded after app.css by views/layouts/public.php. Kept in its own file so the
   header treatment can evolve without touching the shared design tokens.

   The panel is 70vw because the nav has three genuinely different divisions to
   present side by side; a standard dropdown column cannot show Academy, Fitness
   and Beauty at once, which is the one thing a first-time visitor needs.
   ========================================================================== */

/* --------------------------------------------------------- utility bar --- */

.utility-bar {
  background: var(--ww-plum-dark);
  color: #E9DCE4;
  font-size: 12.5px;
  padding: 6px 0;
}
.utility-bar a { color: #E9DCE4; }
.utility-bar a:hover { color: #fff; text-decoration: none; }
.utility-bar .sep { opacity: .35; }
.utility-bar .bi { opacity: .8; }

/* ------------------------------------------------------------- navbar ---- */

.site-header { border-bottom: 1px solid var(--ww-line); }
.site-header .navbar { padding-top: .35rem; padding-bottom: .35rem; }
.site-header .navbar-brand { font-size: 1.15rem; }
.site-header .brand-tag {
  display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ww-ink-3); margin-top: -2px;
}
.site-header .nav-link { padding: .6rem .8rem; position: relative; }
.site-header .nav-item > .nav-link::after {
  content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .3rem;
  height: 2px; background: var(--ww-plum); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .16s ease;
}
.site-header .nav-item > .nav-link:hover::after,
.site-header .nav-item > .nav-link.active::after,
.site-header .nav-item.show > .nav-link::after { transform: scaleX(1); }
.site-header .dropdown-toggle::after { margin-left: .35em; opacity: .55; }

/* ---------------------------------------------------------- mega panel --- */

/**
 * Bootstrap sets `.dropdown { position: relative }`, which would make this
 * panel position against its own narrow nav item — `left:50%` then centres a
 * 70vw panel on a ~90px link and throws it far past the right edge, adding
 * horizontal scroll to the whole page even while the panel is hidden.
 *
 * Forcing the parent back to `static` hands the containing block to `.navbar`,
 * so the panel centres on the content container instead, exactly where a mega
 * menu belongs.
 */
.site-header .nav-item.mega-parent { position: static; }

.mega {
  /* 70% of the viewport, centred on the header container. */
  position: absolute;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: min(70vw, 1240px);
  /* Never wider than the viewport, whatever the container is doing. */
  max-width: calc(100vw - 24px);
  min-width: 0;
  margin-top: .35rem;
  padding: 0;
  border: 1px solid var(--ww-line);
  border-radius: 14px;
  background: var(--ww-surface);
  box-shadow: 0 4px 10px rgba(36,28,39,.06), 0 32px 64px -32px rgba(36,28,39,.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  overflow: hidden;
  z-index: 1035;
}
.nav-item.mega-parent.show .mega,
.nav-item.mega-parent:hover .mega,
.nav-item.mega-parent:focus-within .mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.mega-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 300px;
  gap: 0;
}
.mega-inner.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) 300px; }

.mega-col { padding: 1.5rem 1.6rem; border-right: 1px solid var(--ww-line); }
.mega-col:nth-last-child(2) { border-right: 1px solid var(--ww-line); }

.mega-heading {
  font-size: 10.5px; font-weight: 800; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ww-ink-3);
  display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem;
}
.mega-heading::before {
  content: ""; width: 16px; height: 2px; border-radius: 2px; background: currentColor; opacity: .5;
}
.mega-heading.is-academy { color: var(--ww-academy); }
.mega-heading.is-fitness { color: var(--ww-fitness); }
.mega-heading.is-beauty  { color: var(--ww-beauty); }

.mega-link {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .5rem .6rem; margin: 0 -.6rem; border-radius: 8px;
  color: var(--ww-ink); transition: background .12s ease;
}
.mega-link:hover { background: var(--ww-surface-2); text-decoration: none; }
.mega-link .bi {
  font-size: 15px; margin-top: 2px; width: 20px; flex: none;
  color: var(--ww-plum); opacity: .85;
}
.mega-link .t { font-weight: 700; font-size: 14px; line-height: 1.3; display: block; }
.mega-link .d { font-size: 12.5px; color: var(--ww-ink-3); line-height: 1.4; display: block; margin-top: 1px; }

/* Promo rail — the last column */
.mega-promo {
  padding: 1.5rem 1.6rem;
  background:
    radial-gradient(420px 200px at 90% 0%, rgba(230,0,126,.14), transparent 65%),
    var(--ww-plum-soft);
  display: flex; flex-direction: column;
}
.mega-promo .eyebrow { color: var(--ww-plum); margin-bottom: .5rem; }
.mega-promo .mega-promo-title {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.15rem; font-weight: 600; line-height: 1.25; margin-bottom: .5rem;
  color: var(--ww-ink);
}
.mega-promo p { font-size: 13px; color: var(--ww-ink-2); margin-bottom: 1rem; }
.mega-promo .btn { align-self: flex-start; }
.mega-promo .promo-stats {
  margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(230,0,126,.14);
  display: flex; gap: 1.25rem;
}
.mega-promo .promo-stats div { font-size: 12px; color: var(--ww-ink-3); }
.mega-promo .promo-stats strong {
  display: block; font-size: 1.15rem; color: var(--ww-plum); line-height: 1.1;
}

.mega-foot {
  grid-column: 1 / -1;
  border-top: 1px solid var(--ww-line);
  background: var(--ww-surface-2);
  padding: .75rem 1.6rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem;
  font-size: 12.5px;
}
.mega-foot a { color: var(--ww-ink-2); font-weight: 600; }
.mega-foot a:hover { color: var(--ww-plum); text-decoration: none; }
.mega-foot .ms-auto { color: var(--ww-ink-3); }

/* ------------------------------------------------------------- mobile ---- */

@media (max-width: 991.98px) {
  .mega {
    position: static; width: auto; min-width: 0; max-width: none;
    transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    border: 0; box-shadow: none; border-radius: 0; margin: 0;
    background: transparent; display: none;
  }
  .nav-item.mega-parent.show .mega { display: block; transform: none; }
  .mega-inner, .mega-inner.cols-3 { grid-template-columns: 1fr; }
  .mega-col { border-right: 0; border-bottom: 1px solid var(--ww-line); padding: 1rem .25rem; }
  .mega-promo { display: none; }
  .mega-foot { padding: .75rem .25rem; }
  .site-header .navbar-collapse { max-height: 78vh; overflow-y: auto; }
  .site-header .nav-item > .nav-link::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mega { transition: none; }
}

/* ------------------------------------------------------------ brand mark ---
   The logo is a full lockup (figure + "women WORRLD" + two strap-lines), so it
   needs real height to stay legible — a 32px favicon-sized version would be
   unreadable. Height is capped rather than width because the lockup is wide.
   -------------------------------------------------------------------------- */

.brand-lockup { padding: .25rem 0; margin-right: 1rem; }
.brand-logo {
  height: 58px;
  width: auto;
  max-width: 100%;
  display: block;
}
@media (max-width: 1199.98px) { .brand-logo { height: 50px; } }
@media (max-width: 575.98px)  { .brand-logo { height: 42px; } }

/* On the dark footer and sidebar the knocked-out logo needs no treatment —
   the artwork is transparent, so it sits on any ground. */
.brand-logo-invert { filter: brightness(0) invert(1); opacity: .95; }