/*
 * Mentor dashboard top-nav shell (ENG-519).
 *
 * IMPORTANT: this file is loaded on EVERY page (stylesheet_link_tag :app
 * links each file in app/assets/stylesheets individually), so every selector
 * here MUST be prefixed with .mnav- / .mentor-shell to avoid leaking styles
 * into the rest of the site.
 *
 * The hamburger + full-screen menu overlay mirror shared/_kx_nav.html.erb
 * (the menu used across landing/booking/marketing pages) so the dashboard
 * opens the exact same site menu.
 */

.mentor-shell {
  --mnav-navy: #101f3c;
  --mnav-navy-text: #ffffff;
  --mnav-blue: #2f6bff;
  --mnav-red: #e02d2d;
  --mnav-tab-active-bg: #e9ecef;
  --mnav-line: #e6e6e3;
  --mnav-fg: #0e0e0f;
  --mnav-mut: #6b6b6b;
  --mnav-dim: #4a4a4a;

  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.mentor-shell__content {
  flex: 1;
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
}

/* ---- top navy bar ---- */
.mnav-bar {
  position: relative;
  z-index: 101; /* burger stays above the open overlay, like the kx bar */
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--mnav-navy);
  color: var(--mnav-navy-text);
  padding: 14px clamp(14px, 3vw, 32px);
}

.mnav-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: var(--mnav-navy-text);
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.mnav-bar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
}

.mnav-msg {
  color: var(--mnav-navy-text);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: opacity 0.15s;
}
.mnav-msg:hover { opacity: 0.8; }
.mnav-msg--alert { border-color: var(--mnav-red); }

.mnav-explore-pill {
  background: var(--mnav-blue);
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  padding: 10px 20px;
  border-radius: 999px;
  white-space: nowrap;
  transition: filter 0.15s;
}
.mnav-explore-pill:hover { filter: brightness(1.15); }

/* extra specificity: components.css styles button[type="submit"] globally */
.mnav-bar-right .mnav-signout {
  width: auto;
  margin: 0;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: var(--mnav-navy-text);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  padding: 9px 18px;
  border-radius: 999px;
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s;
}
.mnav-bar-right .mnav-signout:hover { border-color: #fff; background: none; }

/* ---- burger (same three-line pattern as shared/_kx_nav) ---- */
.mnav-nav-toggle {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
.mnav-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 38px;
  height: 30px;
  cursor: pointer;
}
.mnav-burger span {
  display: block;
  height: 2.5px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.28s ease, opacity 0.2s ease;
}
.mnav-nav-toggle:checked ~ .mnav-bar .mnav-burger span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.mnav-nav-toggle:checked ~ .mnav-bar .mnav-burger span:nth-child(2) { opacity: 0; }
.mnav-nav-toggle:checked ~ .mnav-bar .mnav-burger span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }
.mnav-nav-toggle:checked ~ .mnav-bar .mnav-bar-right { opacity: 0; pointer-events: none; }

/* ---- full-screen menu overlay (mirrors .kx-overlay) ---- */
.mnav-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 90px 24px 36px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.mnav-nav-toggle:checked ~ .mnav-overlay { opacity: 1; visibility: visible; }
.mnav-overlay a { color: inherit; text-decoration: none; }
/* ENG-611: the industry sub-lists are gone, and with them .mnav-overlay__primary,
   .mnav-overlay__sub and the <summary> styling the leads needed as disclosures.
   Also repaired here: the a.mnav-overlay__lead rule had been pasted INSIDE the open
   .mnav-overlay__lead block, so the file held a nested rule nobody wrote on purpose. */
.mnav-overlay__lead {
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  color: #fff;
}
a.mnav-overlay__lead {
  display: block;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 1.02;
}
.mnav-overlay__grey { margin-top: 26px; }
.mnav-overlay__grey a {
  display: block;
  font-size: clamp(1.6rem, 5vw, 3.4rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  color: var(--mnav-dim);
}
.mnav-overlay__grey a:hover { color: #fff; }
.mnav-overlay__foot {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  padding: 0 20px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(0.95rem, 1.4vw, 1.25rem);
  color: #d6d6d6;
}
.mnav-overlay__foot a:hover { color: #fff; }

/* ---- new-message banner ---- */
.mnav-message-banner {
  display: block;
  background: var(--mnav-red);
  color: #fff;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  padding: 9px 16px;
  transition: filter 0.15s;
}
.mnav-message-banner:hover { filter: brightness(1.08); }

/* ---- horizontal tab strip ---- */
.mnav-tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  background: #fff;
  border-bottom: 1px solid var(--mnav-line);
  padding: 0 clamp(8px, 2vw, 24px);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mnav-tabs::-webkit-scrollbar { display: none; }

.mnav-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--mnav-fg);
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  font-weight: 700;
  font-size: clamp(0.6rem, 0.72vw, 0.74rem);
  letter-spacing: 0.03em;
  line-height: 1.25;
  padding: 16px clamp(6px, 0.8vw, 11px);
  white-space: nowrap;
  transition: background 0.15s;
}
.mnav-tab:hover { background: #f5f6f7; }
.mnav-tab--active { background: var(--mnav-tab-active-bg); }

/* ---- ENG-601: sub-tabs for a section (Sessions, Marketing) ----
   Only the open section's children are drawn, on a tinted strip under the tab
   row so the two read as one unit rather than two competing navs. Lighter and
   smaller than a top-level tab: it is a step down, not a peer. */
.mnav-subtabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  background: var(--mnav-tab-active-bg);
  border-bottom: 1px solid var(--mnav-line);
  padding: 0 clamp(8px, 2vw, 24px);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mnav-subtabs::-webkit-scrollbar { display: none; }

.mnav-subtab {
  position: relative;
  display: flex;
  align-items: center;
  /* ENG-738: a child can carry an unread badge, the way a top-level tab does. */
  gap: 6px;
  color: var(--mnav-fg);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  font-size: clamp(0.56rem, 0.66vw, 0.68rem);
  letter-spacing: 0.04em;
  line-height: 1.25;
  padding: 10px clamp(6px, 0.8vw, 11px);
  white-space: nowrap;
  opacity: 0.72;
  transition: opacity 0.15s, box-shadow 0.15s;
}
.mnav-subtab:hover { opacity: 1; }
/* Underline rather than a fill: a filled sub-tab on a filled strip loses the
   distinction between the row and the item selected inside it. */
.mnav-subtab--active {
  opacity: 1;
  box-shadow: inset 0 -2px 0 var(--mnav-fg);
}

.mnav-badge {
  background: var(--mnav-red);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 6px;
  line-height: 1.2;
}

/* ---- warnings card (Summary page) ---- */
.mnav-warnings {
  border: 1px solid #f0c36d;
  background: #fdf7ea;
  border-radius: 8px;
  padding: 14px 16px;
  margin: 16px 0;
}
.mnav-warnings-heading {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: #8a6116;
  margin: 0 0 8px;
}
.mnav-warning {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  padding: 3px 0;
}
.mnav-warning-icon { color: #ca8a04; }
.mnav-warning-link { color: var(--mnav-fg); font-weight: 600; }

/* ---- right-aligned share/view actions in the tab strip ---- */
.mnav-tabs-right {
  margin-left: auto;
  display: flex;
  align-items: stretch;
  gap: 2px;
}
.mnav-tab--action {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
/* offscreen (not display:none) so the clipboard fallback can still select() it */
.mnav-share-source {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* ---- responsive ---- */
@media (max-width: 860px) {
  .mnav-title { position: static; transform: none; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; }
  .mnav-msg { display: none; } /* unread state still surfaced by the red banner */
}