/* ==========================================================================
   Signed-in desktop menus — the supplied header wireframe.

   Two panels: the Explore mega menu and the account dropdown. Both are
   rendered outside the header's container so they can take the width the
   wireframe draws; a panel nested inside it would be bounded by it.

   Mobile has its own menu (mobile-menu.css) and neither of these opens
   there — the toggle that opens them is hidden below the desktop tier.
   ========================================================================== */

.mega-explore,
.account-panel {
  position: absolute;
  z-index: 1100;
  display: none;
}

.mega-explore.is-open,
.account-panel.is-open { display: block; }

/* ---- Explore mega menu ---- */

.mega-explore {
  left: 0;
  right: 0;
  top: 100%;
}

.mega-explore__inner {
  display: grid;
  /* Four columns signed in. A visitor gets a fifth, the conversion
     column, and the template adds it — so the track list comes from
     the children rather than from a class the markup has to remember
     to carry. auto-fit would collapse the brand column on a narrow
     viewport; these are explicit minimums instead. */
  grid-template-columns: minmax(14rem, 1fr) minmax(10rem, 1fr) minmax(16rem, 1.5fr) minmax(13rem, 1.2fr);
  gap: 0;
  max-width: 1360px;
  margin: 0 auto;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.mega-explore__brand {
  padding: var(--space-6);
  background: linear-gradient(165deg, #F5F6FE 0%, #EDF2FE 100%);
}

.mega-explore__logo { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); text-decoration: none; }
.mega-explore__mark { width: 40px; height: 40px; }

.mega-explore__headline {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: 1.625rem;
  line-height: 1.2;
  color: var(--color-ink-heading);
}

.mega-explore__sub { margin: 0 0 var(--space-4); color: var(--color-text-muted); line-height: 1.5; }

/* The short rule the wireframe draws under the sub-line. */
.mega-explore__sub::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 2px;
  margin-top: var(--space-4);
  background: var(--color-primary);
  opacity: 0.5;
}

/* A dotted globe: a radial dot grid clipped to a circle. No request,
   nothing to go soft on a dense screen, and it takes the page's own
   ink rather than baking a colour into a raster. */
.mega-explore__globe {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  max-width: 13rem;
  margin: var(--space-4) 0;
  background-image: radial-gradient(var(--color-primary) 1.4px, transparent 1.5px);
  background-size: 9px 9px;
  opacity: 0.55;
  clip-path: circle(48% at 50% 50%);
}

.mega-explore__foot { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: var(--color-text-muted); }

.mega-explore__lists,
.mega-explore__domains,
.mega-explore__knowledge { padding: var(--space-6) var(--space-5); }

.mega-explore__knowledge { border-inline-start: 1px solid var(--color-border); display: flex; flex-direction: column; }

.mega-explore__group + .mega-explore__group {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

.mega-explore__heading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--color-ink-heading);
}

.mega-explore__heading-icon { display: inline-flex; color: var(--color-primary); }
.mega-explore__heading-icon svg { width: 20px; height: 20px; }

.mega-explore ul { list-style: none; margin: 0; padding: 0; }

.mega-explore__group li a,
.mega-explore__domains li a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* 40 rather than 44: these are pointer-only panels — the mobile menu
     is what a thumb uses, and it sets 48. */
  min-height: 40px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-ink-soft);
  text-decoration: none;
}

.mega-explore__group li a:hover,
.mega-explore__group li a:focus-visible,
.mega-explore__domains li a:hover,
.mega-explore__domains li a:focus-visible { background: var(--color-surface); color: var(--color-link); }

.mega-explore__domains li a { align-items: flex-start; padding: var(--space-2); }
.mega-explore__domains strong { display: block; color: var(--color-ink-heading); font-size: 0.9375rem; }
.mega-explore__domains strong + span { font-size: 0.8125rem; color: var(--color-text-muted); }

.mega-explore__tile {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: #EDF3FE;
  color: var(--color-primary-text);
}

.mega-explore__tile svg { width: 20px; height: 20px; }

.mega-explore__cta {
  display: block;
  position: relative;
  margin-top: auto;
  padding: var(--space-4) var(--space-10) var(--space-4) var(--space-4);
  background: #EDF3FE;
  border-radius: var(--radius-md);
  text-decoration: none;
}

.mega-explore__cta strong { display: block; margin-bottom: var(--space-1); color: var(--color-primary-text); }
.mega-explore__cta span { font-size: 0.8125rem; line-height: 1.5; color: var(--color-ink-soft); }

.mega-explore__cta-go {
  position: absolute;
  right: var(--space-4);
  bottom: var(--space-4);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-white);
}

.mega-explore__cta-go svg { width: 18px; height: 18px; }



/* ---- Conversion column (signed out only) ---- */

.mega-explore__inner:has(.mega-explore__join) {
  grid-template-columns:
    minmax(13rem, 1fr) minmax(9rem, 0.9fr) minmax(15rem, 1.4fr)
    minmax(11rem, 1fr) minmax(13rem, 1.1fr);
}

.mega-explore__join {
  padding: var(--space-6) var(--space-5);
  background: #EDF3FE;
  border-inline-start: 1px solid var(--color-border);
}

.mega-explore__join-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: 1.125rem;
  color: var(--color-primary-text);
}

.mega-explore__join-copy { margin: 0 0 var(--space-5); font-size: 0.875rem; line-height: 1.55; color: var(--color-ink-soft); }

.mega-explore__join-primary,
.mega-explore__join-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border-radius: var(--radius-md);
  font-weight: 700;
  text-decoration: none;
}

.mega-explore__join-primary {
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  color: var(--color-white);
  margin-bottom: var(--space-3);
}

.mega-explore__join-primary:hover,
.mega-explore__join-primary:focus-visible { background: var(--color-primary-deep); color: var(--color-white); }

.mega-explore__join-secondary {
  background: var(--color-white);
  border: 1px solid var(--color-primary);
  color: var(--color-primary-text);
}

.mega-explore__join-list { list-style: none; margin: var(--space-5) 0 0; padding: 0; }

.mega-explore__join-list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  font-size: 0.875rem;
  color: var(--color-ink);
}

.mega-explore__join-list svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  padding: 3px;
  border-radius: var(--radius-full);
  background: var(--color-success-fill);
  color: var(--color-white);
}

/* No :has() — the grid keeps its four tracks and the fifth child wraps
   under. Readable rather than right, which is the correct trade for a
   browser that cannot select on content. */
@supports not selector(:has(*)) {
  .mega-explore__join { grid-column: 1 / -1; border-inline-start: 0; border-top: 1px solid var(--color-border); }
}

/* ---- Account dropdown ---- */

.account-panel {
  /* Positioned against .account-menu, which wraps the avatar, rather
     than against the viewport: a dropdown pinned to the page edge
     drifts away from the control that opened it at every width. */
  right: 0;
  top: calc(100% + var(--space-2));
  width: 17.5rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.account-panel__identity {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.account-panel__avatar { width: 52px; height: 52px; border-radius: var(--radius-full); object-fit: cover; flex: 0 0 auto; }
.account-panel__name { margin: 0; font-weight: 700; color: var(--color-ink-heading); }
.account-panel__headline { margin: 2px 0 0; font-size: 0.75rem; color: var(--color-text-muted); }

.account-panel__view {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
  color: var(--color-link);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: none;
}

.account-panel__view svg { width: 15px; height: 15px; }

.account-panel__list { list-style: none; margin: 0; padding: var(--space-2); }

.account-panel__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  text-decoration: none;
  cursor: pointer;
}

.account-panel__item:hover,
.account-panel__item:focus-visible { background: var(--color-surface); }

.account-panel__icon { display: inline-flex; flex: 0 0 auto; color: var(--color-ink-soft); }
.account-panel__icon svg { width: 20px; height: 20px; }
.account-panel__label { flex: 1 1 auto; }

.account-panel__lang > summary { list-style: none; }
.account-panel__lang > summary::-webkit-details-marker { display: none; }
.account-panel__lang > summary::marker { content: ''; }
.account-panel__lang-current { font-weight: 700; font-size: 0.8125rem; color: var(--color-ink); }
.account-panel__lang > *:not(summary) { padding: var(--space-2) var(--space-3) var(--space-3) calc(var(--space-3) + 32px); }

.account-panel__foot { padding: var(--space-2); border-top: 1px solid var(--color-border); }

.account-panel__signout {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-danger);
  font-weight: 600;
  text-decoration: none;
}

.account-panel__signout .account-panel__icon { color: inherit; }



/* ---- Featured group (Professional Passport) ---- */

.mega-explore__group--featured { border-radius: var(--radius-md); }

.mega-explore__group--featured .mega-explore__heading {
  margin: 0 0 var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: #EDF3FE;
  border-radius: var(--radius-md);
  color: var(--color-primary-text);
}

.mega-explore__heading-go { margin-inline-start: auto; display: inline-flex; }
.mega-explore__heading-go svg { width: 18px; height: 18px; }

/* ---- Account panel additions ---- */

.account-panel__badge {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: var(--radius-full);
  background: var(--color-danger);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.account-panel__item.is-featured { background: #EDF3FE; color: var(--color-primary-text); font-weight: 600; }
.account-panel__item.is-featured .account-panel__icon { color: var(--color-primary); }
.account-panel__go { display: inline-flex; color: inherit; }
.account-panel__go svg { width: 16px; height: 16px; }

/* A rule between the destinations and the settings, drawn as a list
   item so the list stays one <ul> — splitting it in two would put two
   groups in the accessibility tree where the design shows one list with
   a divider. */
.account-panel__rule { list-style: none; padding: var(--space-2) var(--space-3); }
.account-panel__rule span { display: block; height: 1px; background: var(--color-border); }

/* Neither panel exists below the desktop tier — the mobile menu is the
   navigation there, and the controls that open these are hidden. */
@media (max-width: 1023px) {
  .mega-explore.is-open,
  .account-panel.is-open { display: none; }
}


/* --------------------------------------------------------------------------
   Dark mode: literal tints (generated by the 8.416.0 audit)

   Each rule above paints a literal pale tile under a label whose colour is
   a TOKEN. The token flips in dark mode and the literal cannot, so the
   label went light on a tile that stayed light: about 2.7:1. Same
   selectors, one class heavier, so they win wherever the originals load.
   -------------------------------------------------------------------------- */
html.jdev-dark .mega-explore__tile,
html.jdev-dark .mega-explore__group--featured .mega-explore__heading,
html.jdev-dark .account-panel__item.is-featured { background: #1E1B4B; }