/* ============================================================
   Sublime LMS — Global Navigation
   Reusable across every page. Active state via body[data-page].
   ============================================================ */

.sl-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 251, 254, 0.82);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--dur-base) var(--ease-out);
}

/* Reserve header space before nav.js injects, so there is no
   layout shift / flicker and the logo area is stable on load. */
#global-nav {
  display: block;
  min-height: 72px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 251, 254, 0.82);
}
@media (max-width: 760px) { #global-nav { min-height: 64px; } }
.sl-nav.is-scrolled {
  box-shadow: 0 1px 0 rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.04);
}

.sl-nav-row {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 28px;
  height: 72px;
}

/* ---- brand ---- */
.sl-brand {
  display: inline-flex; align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  height: 32px;
}
.sl-brand img {
  height: 32px;
  width: auto;
  max-width: 200px;
  display: block;
}

/* ---- primary nav ---- */
.sl-primary {
  display: flex;
  align-items: center;
  gap: 2px;
}

.sl-item { position: relative; }

.sl-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 500;
  color: var(--fg-body);
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--dur-base) ease, background var(--dur-base) ease;
}
.sl-link i, .sl-link svg {
  width: 14px; height: 14px;
  transition: transform var(--dur-base) ease;
  color: var(--fg-muted);
}
.sl-link:hover,
.sl-item.is-open > .sl-link { color: var(--color-graphite); background: var(--color-cloud); }
.sl-item.is-open > .sl-link i { transform: rotate(180deg); }

/* active page (set by body[data-page]) */
.sl-link.is-active {
  color: var(--color-violet-700);
}
.sl-link.is-active::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px;
  bottom: -2px;
  height: 2px;
  background: var(--color-violet-600);
  border-radius: 2px;
}

/* ---- right actions ---- */
.sl-actions {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
}
.sl-login {
  display: inline-flex; align-items: center;
  padding: 8px 12px;
  font-size: 14px; font-weight: 500;
  color: var(--fg-body);
  border-radius: 10px;
  text-decoration: none;
  transition: background var(--dur-base) ease, color var(--dur-base) ease;
}
.sl-login:hover { background: var(--color-cloud); color: var(--color-graphite); }

.sl-cta {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px;
  background: var(--color-violet-600);
  color: #fff;
  font-weight: 600; font-size: 14px;
  border-radius: var(--radius-md);
  text-decoration: none;
  box-shadow: var(--shadow-violet-soft);
  transition: background var(--dur-base) ease, box-shadow var(--dur-base) ease, transform var(--dur-fast) ease;
}
.sl-cta:hover { background: var(--color-violet-500); box-shadow: var(--shadow-violet); }
.sl-cta:active { transform: translateY(1px); }
.sl-cta svg, .sl-cta i { width: 16px; height: 16px; }

/* ---- burger (mobile) ---- */
.sl-burger {
  display: none;
  margin-left: auto;   /* push to the far right (the right-hand actions are hidden on mobile) */
  width: 42px; height: 42px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--color-graphite);
  cursor: pointer;
  align-items: center; justify-content: center;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.sl-burger:hover { background: var(--color-mist); }
.sl-burger i, .sl-burger svg { width: 22px; height: 22px; }

/* ============================================================
   DROPDOWN PANELS
   ============================================================ */

.sl-panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s var(--ease-out), transform .22s var(--ease-out);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-2xl);
  box-shadow: 0 20px 60px -20px rgba(15,23,42,.18), 0 8px 24px -8px rgba(15,23,42,.08);
  padding: 16px;
  z-index: 50;
}
.sl-item.is-open .sl-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.sl-panel::before {
  content: '';
  position: absolute;
  top: -7px; left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px;
  background: #fff;
  border-left: 1px solid var(--border);
  border-top: 1px solid var(--border);
  border-radius: 3px 0 0 0;
}

.sl-panel-grid {
  display: grid;
  gap: 4px;
}

/* one-column panel (Resources, etc) */
.sl-panel--1col { width: 360px; }
.sl-panel--1col .sl-panel-grid { grid-template-columns: 1fr; }

/* two-column panel (Platform, Solutions, Features) */
.sl-panel--2col { width: 720px; }
.sl-panel--2col .sl-panel-grid { grid-template-columns: 1fr 1fr; gap: 4px 8px; }

/* ---- panel item ---- */
.sl-pi {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: background var(--dur-base) ease;
}
.sl-pi:hover { background: var(--color-mist); }
.sl-pi:hover .sl-pi-ico { background: var(--color-violet-100); color: var(--color-violet-700); border-color: var(--color-violet-200); }
.sl-pi:hover .sl-pi-title { color: var(--color-violet-700); }

.sl-pi-ico {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--color-cloud);
  border: 1px solid var(--border-soft);
  color: var(--color-slate-700);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: background var(--dur-base) ease, color var(--dur-base) ease, border-color var(--dur-base) ease;
}
.sl-pi-ico i, .sl-pi-ico svg { width: 18px; height: 18px; }

.sl-pi-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 14px;
  line-height: 1.3;
  color: var(--color-graphite);
  letter-spacing: -0.005em;
  margin-bottom: 2px;
  transition: color var(--dur-base) ease;
}
.sl-pi-desc {
  display: block;
  font-size: 12px;
  line-height: 1.45;
  color: var(--fg-muted);
}

.sl-panel-heading {
  padding: 6px 12px 14px;
  margin: 0 0 8px;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 650;
  color: var(--color-violet-700);
  letter-spacing: -0.005em;
  line-height: 1.4;
}

/* panel footer (optional callout) */
.sl-panel-foot {
  margin-top: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.sl-panel-foot-lbl {
  font-size: 12px;
  color: var(--fg-muted);
}
.sl-panel-foot-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  color: var(--color-violet-700);
  text-decoration: none;
}
.sl-panel-foot-cta i, .sl-panel-foot-cta svg { width: 14px; height: 14px; transition: transform var(--dur-base) ease; }
.sl-panel-foot-cta:hover i, .sl-panel-foot-cta:hover svg { transform: translateX(3px); }

/* ============================================================
   MOBILE SHEET
   ============================================================ */

.sl-mobile {
  position: fixed;
  inset: 72px 0 0 0;
  background: var(--bg);
  z-index: 99;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px 24px 40px;
  border-top: 1px solid var(--border);
  /* Animated open/close. Kept in the DOM (not display:none) so opacity/
     transform can transition; visibility flips at the end of the close so the
     panel and its links are fully inert and unfocusable while hidden.
     translateY (not translateX) keeps the panel within horizontal bounds, so
     the slide never introduces a horizontal scrollbar. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out),
              visibility var(--dur-base) var(--ease-out);
}
.sl-mobile.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.sl-mobile-group {
  border-bottom: 1px solid var(--border-soft);
}
.sl-mobile-trigger,
.sl-mobile-link {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 4px;
  background: transparent; border: none;
  font-family: var(--font-sans);
  font-size: 17px; font-weight: 600;
  color: var(--color-graphite);
  text-decoration: none;
  cursor: pointer;
  text-align: left;
}
.sl-mobile-trigger i, .sl-mobile-trigger svg {
  width: 18px; height: 18px;
  color: var(--fg-muted);
  transition: transform var(--dur-base) ease;
}
.sl-mobile-group.is-open .sl-mobile-trigger i,
.sl-mobile-group.is-open .sl-mobile-trigger svg { transform: rotate(180deg); }

.sl-mobile-body {
  display: none;
  padding: 0 4px 16px;
}
.sl-mobile-group.is-open .sl-mobile-body { display: block; }

.sl-mobile-item {
  display: block;
  padding: 12px 0;
  font-size: 15px;
  color: var(--fg-body);
  font-weight: 500;
  text-decoration: none;
}
.sl-mobile-item:hover { color: var(--color-violet-700); }
.sl-mobile-item.is-active { color: var(--color-violet-700); }
.sl-mobile-item-desc {
  display: block;
  font-size: 12px;
  color: var(--fg-muted);
  font-weight: 400;
  margin-top: 2px;
  line-height: 1.45;
}

.sl-mobile-footer {
  margin-top: 28px;
  display: flex; flex-direction: column; gap: 12px;
}
.sl-mobile-footer .sl-cta { height: 48px; font-size: 15px; justify-content: center; }
.sl-mobile-footer .sl-login {
  display: inline-flex; justify-content: center;
  height: 48px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-weight: 600;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1080px) {
  .sl-panel--2col { width: 600px; }
}

@media (max-width: 960px) {
  .sl-primary, .sl-actions { display: none; }
  .sl-burger { display: inline-flex; }
}

@media (max-width: 760px) {
  .sl-nav-row { padding: 0 20px; height: 64px; }
  .sl-mobile { inset: 64px 0 0 0; padding: 20px 20px 32px; }
}

/* scroll lock when mobile is open */
body.sl-nav-lock { overflow: hidden; }

/* Subtle pop when the burger swaps between the menu and close icons. */
@keyframes sl-icon-in {
  from { opacity: 0; transform: scale(.78) rotate(-25deg); }
  to   { opacity: 1; transform: none; }
}
.sl-burger svg { animation: sl-icon-in var(--dur-base) var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  .sl-panel, .sl-link i, .sl-mobile-trigger i { transition: none !important; }
  .sl-mobile { transition: none !important; }
  .sl-burger svg { animation: none !important; }
}