/* ════════════════════════════════════════════════════════════════════════════
   NEQTO Docs — Sidebar v2
   Behaviour blueprint : Bramus Van Damme, "Smooth Scrolling Sticky ScrollSpy
                         Navigation" — https://codepen.io/bramus/pen/ExaEqMJ
   Visual blueprint    : the live docs sidebar (.dpm-sidebar) on
                         https://env-neqtoai-staging.kinsta.cloud/docs/
   ---------------------------------------------------------------------------
   Values taken verbatim from the live sheet:
     panel   #252952, 1px rgba(226,192,68,.14), radius 8px, padding 20px, 250px
     column  flex gap 30px, align-items:flex-start
     label   DM Mono 13px, ls 1.5px, uppercase, rgba(255,255,255,.65),
             margin 15px/12px, padding-bottom 8px,
             border-bottom 2px rgba(226,192,68,.32)
     item    Sora 13px #fff, padding 10px 15px 10px 20px, mb 5px, radius 4px,
             transition background .3s, hover/active rgba(226,192,68,.12),
             link hover #E2C044, radius 6px
     mobile  ≤768px, toggle button + collapsing panel, max-height 350px
   Deliberate departures (see README → Review):
     · active ≠ hover  — the live sheet paints both rgba(226,192,68,.12), so the
       page you are on is indistinguishable from the row under the cursor
     · the mobile panel stays dark — the live one is #fff behind `color:#fff
       !important` text, i.e. white on white
   Namespace: .sbv2-*  (no collision with the live .dpm-* or the v1 .sb-*)
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── PALETTE ────────────────────────────────────────────────────────────────
   Literal values, dark only — the docs site is dark and Elementor's global kit
   likes to redefine custom properties out from under a widget.

     panel      #252952                    row hover   rgba(255,255,255,.055)
     hairline   rgba(226,192,68,.14)       row active  rgba(226,192,68,.12)
     ink        #fff                       rail        rgba(255,255,255,.12)
     muted      rgba(255,255,255,.78)      label rule  rgba(226,192,68,.32)
     dim        rgba(255,255,255,.65)      accent      #E2C044

   The one variable left is --sbv2-top, the sticky offset, because the JS
   measures your header and writes it at runtime. Every use carries an 88px
   fallback, so the sheet stands on its own if the JS never runs.
   ──────────────────────────────────────────────────────────────────────── */

/* ─── COLUMN ─────────────────────────────────────────────────────────────── */
/* Live layout is flex with a 30px gap and flex-start alignment. */
.sbv2-layout {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}
.sbv2-layout > .sbv2-main { flex: 1 1 auto; min-width: 0; }

/* ─── PANEL ──────────────────────────────────────────────────────────────── */
.sbv2 {
  width: 250px;
  flex-shrink: 0;
  font-family: 'Sora', sans-serif;
  color: #FFFFFF;

  /* The behaviour upgrade: the live panel is `position: static` and scrolls
     away. align-self:start is what lets sticky work in flex and grid alike. */
  position: sticky;
  top: var(--sbv2-top, 88px);
  align-self: flex-start;
}

.sbv2__panel {
  background: #252952;
  border: 1px solid rgba(226,192,68,0.14);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--sbv2-top, 88px) - 24px);
  transition: background .3s, border-color .3s;
}

/* ─── HEAD ───────────────────────────────────────────────────────────────── */
.sbv2__head { flex: 0 0 auto; margin-bottom: 14px; }

.sbv2__eyebrow {
  font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 800;              /* live declares 1000; browsers clamp to 900 */
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(226,192,68,0.32);
}

/* Reading-progress hairline. Width set from JS. */
.sbv2__progress {
  height: 2px; border-radius: 2px;
  background: rgba(255,255,255,0.12);
  overflow: hidden;
}
.sbv2__progress i {
  display: block; height: 100%; width: 0;
  background: #E2C044;
  transition: width .15s linear;
}

/* ─── SCROLL AREA ────────────────────────────────────────────────────────── */
.sbv2__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 -6px;
  padding: 0 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.sbv2__scroll::-webkit-scrollbar { width: 6px; }
.sbv2__scroll::-webkit-scrollbar-track { background: transparent; }
.sbv2__scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12); border-radius: 4px;
}

/* ─── GROUP LABELS ───────────────────────────────────────────────────────── */
/* Same treatment as .dpm-section-title ("GETTING STARTED", "PLATFORM"). */
.sbv2-group__label {
  display: block;
  font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin: 15px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(226,192,68,0.32);
}
.sbv2-list > .sbv2-group:first-child > .sbv2-group__label { margin-top: 0; }

/* ─── LIST ───────────────────────────────────────────────────────────────── */
.sbv2-list,
.sbv2-sublist { list-style: none; margin: 0; padding: 0; }

/* ─── ROWS ───────────────────────────────────────────────────────────────── */
.sbv2-link {
  display: block;
  font-size: 13px;
  line-height: 1.7;
  color: #FFFFFF;
  text-decoration: none;
  padding: 10px 15px 10px 20px;
  margin-bottom: 5px;
  border-radius: 4px;
  border-left: 2px solid transparent;
  transition: background .3s, color .15s, border-color .15s;
}
.sbv2-link:hover,
.sbv2-link:focus-visible {
  background: rgba(255,255,255,0.055);
  color: #E2C044;
}
.sbv2-link:focus-visible {
  outline: 2px solid #E2C044;
  outline-offset: -2px;
}

/* Active section — the live fill, plus a colour and an edge so it cannot be
   confused with hover. */
.sbv2-link.is-active {
  background: rgba(226,192,68,0.12);
  color: #E2C044;
  font-weight: 600;
  border-left-color: #E2C044;
}

/* The ancestor of the active row stays lit, quietly. */
.sbv2-link.is-trail { color: #FFFFFF; font-weight: 600; }

/* ─── SUB-LISTS ──────────────────────────────────────────────────────────── */
/* Collapsed unless their branch is in play, so long pages stay scannable. */
.sbv2-sublist {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px solid rgba(255,255,255,0.12);
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .25s ease, opacity .2s ease, margin .25s ease;
}
.sbv2-sublist > .sbv2-sublist__inner { overflow: hidden; min-height: 0; }
.sbv2-item.is-open > .sbv2-sublist {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 2px;
  margin-bottom: 8px;
}
.sbv2-sublist .sbv2-link {
  font-size: 12.5px;
  padding: 7px 12px 7px 14px;
  margin-bottom: 3px;
  color: rgba(255,255,255,0.78);
}
.sbv2-sublist .sbv2-link.is-active { color: #E2C044; }


/* ─── FOOT ───────────────────────────────────────────────────────────────── */
.sbv2__foot {
  flex: 0 0 auto;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(226,192,68,0.14);
  font-family: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: .6px;
  color: rgba(255,255,255,0.65);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.sbv2__foot a { color: rgba(255,255,255,0.78); text-decoration: none; }
.sbv2__foot a:hover { color: #E2C044; }

/* ─── SCROLL TARGETS ─────────────────────────────────────────────────────── */
/* Stop the sticky site header from covering the heading you jumped to. Scoped
   to the content root (the JS marks it) so this does not reach every [id] on
   the page — a WordPress template has hundreds. */
.sbv2-content [id] { scroll-margin-top: calc(var(--sbv2-top, 88px) + 8px); }

/* ─── MOBILE ─────────────────────────────────────────────────────────────── */
/* Same pattern and breakpoint as live: a full-width toggle above a panel that
   collapses in place, capped at 350px of scroll. */
.sbv2-toggle { display: none; }

@media (max-width: 768px) {
  .sbv2-layout { flex-direction: column; gap: 20px; }

  .sbv2 {
    position: static;
    width: 100%;
    margin-bottom: 10px;
  }

  .sbv2-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 15px 20px;
    margin-bottom: 15px;
    background: #252952;
    border: 1px solid rgba(226,192,68,0.14);
    border-radius: 8px;
    color: #FFFFFF;
    font-family: 'Sora', sans-serif;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
    transition: background .2s ease-in-out, border-color .2s ease-in-out;
  }
  .sbv2-toggle:hover { border-color: #E2C044; }
  .sbv2-toggle svg { flex-shrink: 0; }
  .sbv2-toggle .sbv2-toggle__caret { transition: transform .3s; }
  .sbv2-toggle[aria-expanded="true"] .sbv2-toggle__caret { transform: rotate(180deg); }

  .sbv2__panel { display: none; max-height: none; box-shadow: 0 10px 15px -3px rgba(0,0,0,.35); }
  .sbv2.is-open .sbv2__panel { display: flex; }
  .sbv2__scroll { max-height: 350px; }
}


/* ════════════════════════════════════════════════════════════════════════════
   ELEMENTOR — Dynamic Post Menu widget
   ---------------------------------------------------------------------------
   The widget's markup cannot be edited, so the JS tags it with the .sbv2-*
   classes above and this block reconciles the few structural differences:

     .dpm-sidebar      is both the sticky column and the panel
     .dpm-menu-wrapper is the scroll area (and the widget's own mobile drawer)
     .dpm-menu-item    carries padding that belongs on its <a>
     .dpm-section-title is a bare <li> standing in for a group label

   Several of the widget's own rules ship with !important, so the overrides
   here are scoped to `.dpm-sidebar.sbv2-dpm` to outrank them on specificity
   rather than on load order.
   ════════════════════════════════════════════════════════════════════════════ */

/* Column + panel on one element. */
.dpm-sidebar.sbv2-dpm {
  position: sticky;
  top: var(--sbv2-top, 88px);
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--sbv2-top, 88px) - 24px);
  background: #252952;
  border: 1px solid rgba(226,192,68,0.14);
  border-radius: 8px;
  padding: 20px;
}

/* The wrapper scrolls; the head (back control + progress) rides above it. */
.dpm-sidebar.sbv2-dpm .dpm-menu-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 -6px;
  padding: 0 6px;
}
.dpm-sidebar.sbv2-dpm .sbv2__head { margin-bottom: 12px; }

/* Row: hand the padding to the anchor so the whole row is clickable. */
.dpm-sidebar.sbv2-dpm .dpm-menu-item,
.dpm-sidebar.sbv2-dpm .dpm-menu-item:hover,
.dpm-sidebar.sbv2-dpm .dpm-menu-item.active {
  padding: 0 !important;
  margin-bottom: 5px !important;
  background: transparent !important;
  border-radius: 4px;
  cursor: auto;
}
.dpm-sidebar.sbv2-dpm .dpm-menu-item > a { display: block; }

/* The widget pins link colour with !important; match it to win. */
.dpm-sidebar.sbv2-dpm .sbv2-link { color: #FFFFFF !important; }
.dpm-sidebar.sbv2-dpm .sbv2-link:hover,
.dpm-sidebar.sbv2-dpm .sbv2-link:focus-visible,
.dpm-sidebar.sbv2-dpm .sbv2-link.is-active { color: #E2C044 !important; }
.dpm-sidebar.sbv2-dpm .sbv2-link.is-trail  { color: #FFFFFF !important; }
.dpm-sidebar.sbv2-dpm .sbv2-sublist .sbv2-link { color: rgba(255,255,255,0.78) !important; }
.dpm-sidebar.sbv2-dpm .sbv2-sublist .sbv2-link.is-active,
.dpm-sidebar.sbv2-dpm .sbv2-sublist .sbv2-link:hover {
  color: #E2C044 !important;
}

/* Group label: the widget's <li>, already close, normalised to ours. */
.dpm-sidebar.sbv2-dpm .dpm-section-title { margin-top: 15px; }
.dpm-sidebar.sbv2-dpm .dpm-menu > .dpm-section-title:first-child { margin-top: 0; }

/* The widget toggles its drawer with jQuery slideToggle(), which writes inline
   `display:none` and a `height` on the wrapper. Inline styles have no
   breakpoint, so collapsing the menu on a phone and then widening the window
   left the menu hidden on desktop. An !important author rule outranks inline
   styles, and the JS clears the leftovers as well. */
@media (min-width: 769px) {
  .dpm-sidebar.sbv2-dpm .dpm-menu-wrapper {
    display: block !important;
    height: auto !important;
  }
}

/* The widget's own mobile drawer — dark, not white-on-white. */
@media (max-width: 768px) {
  .dpm-sidebar.sbv2-dpm {
    position: static;
    max-height: none;
    display: block;
    padding: 0;
    background: transparent;
    border: 0;
  }
  .dpm-sidebar.sbv2-dpm .dpm-menu-wrapper {
    background: #252952 !important;
    border: 1px solid rgba(226,192,68,0.14) !important;
    border-radius: 8px;
    padding: 15px 10px;
    margin: 0;
    max-height: 350px;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,.35) !important;
  }
  .dpm-sidebar.sbv2-dpm .dpm-mobile-toggle {
    background: #252952 !important;
    border-color: rgba(226,192,68,0.14) !important;
    color: #FFFFFF !important;
  }
  .dpm-sidebar.sbv2-dpm .dpm-mobile-toggle:hover {
    border-color: #E2C044 !important;
  }
}

/* Elementor wraps every widget; none of those wrappers may clip the sticky
   column. The widget's class carries a per-site hash — on neqto.ai and on
   staging it is `elementor-widget-dynamic_post_menu_24e5c89b` — so match the
   stem, not the whole name. (The JS also walks the real ancestors and clears
   any `overflow: hidden` it finds, which covers themes this misses.) */
.dpm-container,
[class*="elementor-widget-dynamic_post_menu"],
[class*="elementor-widget-dynamic_post_menu"] > .elementor-widget-container,
[class*="elementor-widget-dynamic-post-menu"],
[class*="elementor-widget-dynamic-post-menu"] > .elementor-widget-container {
  overflow: visible !important;
}

/* ─── MOTION ─────────────────────────────────────────────────────────────── */
/* Smooth scrolling is set on <html> by the JS, which checks this query
   itself — an inline style cannot be overridden from here. */
@media (prefers-reduced-motion: reduce) {
  .sbv2, .sbv2__panel, .sbv2-link, .sbv2-sublist, .sbv2__progress i,
  .sbv2-toggle {
    transition: none !important;
  }
}