/* dp-blog-menu 1.0.5 — STAGING ONLY
   Desktop Helix «Блог» megamenu: one-at-a-time accordion, no compensation.
   Hover «Блог» shows only the 4 L2 section rows (collapsed, clickable,
   normal menu-item style, down chevron). Hovering a section header
   (150ms hover-intent on REAL pointer movement) expands ITS articles
   downward and collapses any previously open section. Switching is
   driven by pointermove with changing coordinates, not by mouseenter
   from layout reflow (when a section above collapses, the hovered
   header jumps up; synthetic enters must not ping-pong). While the
   pointer is over the open section's header or children, do not
   switch. No top padding, no min-height lock, no transform: panel
   height equals its content. The first section row always sits at
   the top of the panel. :focus-within also expands a section (and
   collapses the others). All sections reset to collapsed when the
   dropdown closes (pointer left «Блог» + panel for ~300ms). Opening
   is driven by JS class .dp-blog-open, not by CSS :hover alone
   (that was the 1.0.1 shrink-to-close bug).
   Colours #263B35 / hover #427E6D (no blue).
   Panel is right-aligned; max-height uses --dp-blogmenu-maxh (viewport
   minus header bottom minus 16px, set by the plugin) with overflow-y: auto
   so a tall list scrolls inside the panel without closing the menu or
   running off-screen.
   Hover bridge: no vertical gap between «Блог» and the panel.
   Desktop only (megamenu from Bootstrap lg / 992px). Off-canvas unchanged.
*/
@media (min-width: 992px) {
  #sp-header .sp-megamenu-parent > li.sp-has-child:has(> a[href="/blog"], > a[href="/site/blog"]) > .sp-dropdown.sp-dropdown-main {
    left: auto !important;
    right: 0 !important;
    /* Overlap the trigger slightly so there is no hover-killing gap. */
    top: calc(100% - 8px) !important;
    padding-top: 8px !important;
    margin-top: 0 !important;
    max-width: min(420px, calc(100vw - 16px));
    max-height: var(--dp-blogmenu-maxh, calc(100vh - 198px));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    overflow-anchor: none;
    animation: none !important;
    transform: none !important;
  }

  /* Keep the panel painted during the 300ms leave grace (beats Helix hide()). */
  #sp-header .sp-megamenu-parent > li.sp-has-child.dp-blog-panel-open:has(> a[href="/blog"], > a[href="/site/blog"]) > .sp-dropdown.sp-dropdown-main {
    display: block !important;
  }

  /* Default: L3 lists collapsed. Open only via .dp-blog-open or :focus-within, never :hover. */
  #sp-header .sp-megamenu-parent > li.sp-has-child:has(> a[href="/blog"], > a[href="/site/blog"]) > .sp-dropdown.sp-dropdown-main .sp-dropdown.sp-dropdown-sub {
    display: none !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: auto !important;
    transform: none !important;
    animation: none !important;
  }

  #sp-header .sp-megamenu-parent > li.sp-has-child:has(> a[href="/blog"], > a[href="/site/blog"]) > .sp-dropdown.sp-dropdown-main > .sp-dropdown-inner > .sp-dropdown-items > li.sp-has-child.dp-blog-open > .sp-dropdown.sp-dropdown-sub,
  #sp-header .sp-megamenu-parent > li.sp-has-child:has(> a[href="/blog"], > a[href="/site/blog"]) > .sp-dropdown.sp-dropdown-main > .sp-dropdown-inner > .sp-dropdown-items > li.sp-has-child:focus-within > .sp-dropdown.sp-dropdown-sub {
    display: block !important;
  }

  #sp-header .sp-megamenu-parent > li.sp-has-child:has(> a[href="/blog"], > a[href="/site/blog"]) > .sp-dropdown.sp-dropdown-main .sp-dropdown.sp-dropdown-sub > .sp-dropdown-inner {
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 0 6px 18px !important;
    margin: 0 !important;
    background: transparent !important;
  }

  /* Do not let JS or Helix leave a content gap above the first row. */
  #sp-header .sp-megamenu-parent > li.sp-has-child:has(> a[href="/blog"], > a[href="/site/blog"]) > .sp-dropdown.sp-dropdown-main > .sp-dropdown-inner {
    padding-top: 0 !important;
    margin-top: 0 !important;
    transform: none !important;
    min-height: 0 !important;
  }

  /* L2 section rows: normal clickable menu items, down chevron. */
  #sp-header .sp-megamenu-parent > li.sp-has-child:has(> a[href="/blog"], > a[href="/site/blog"]) > .sp-dropdown.sp-dropdown-main > .sp-dropdown-inner > .sp-dropdown-items > li.sp-has-child > a {
    pointer-events: auto !important;
    cursor: pointer !important;
    display: block !important;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    padding: 8px 12px 8px 8px !important;
    margin: 0;
    color: #263B35 !important;
    background: transparent !important;
    text-decoration: none !important;
    white-space: normal;
    position: relative;
  }

  #sp-header .sp-megamenu-parent > li.sp-has-child:has(> a[href="/blog"], > a[href="/site/blog"]) > .sp-dropdown.sp-dropdown-main > .sp-dropdown-inner > .sp-dropdown-items > li.sp-has-child > a:hover,
  #sp-header .sp-megamenu-parent > li.sp-has-child:has(> a[href="/blog"], > a[href="/site/blog"]) > .sp-dropdown.sp-dropdown-main > .sp-dropdown-inner > .sp-dropdown-items > li.sp-has-child > a:focus,
  #sp-header .sp-megamenu-parent > li.sp-has-child:has(> a[href="/blog"], > a[href="/site/blog"]) > .sp-dropdown.sp-dropdown-main > .sp-dropdown-inner > .sp-dropdown-items > li.sp-has-child.dp-blog-open > a,
  #sp-header .sp-megamenu-parent > li.sp-has-child:has(> a[href="/blog"], > a[href="/site/blog"]) > .sp-dropdown.sp-dropdown-main > .sp-dropdown-inner > .sp-dropdown-items > li.sp-has-child:focus-within > a {
    color: #427E6D !important;
    background: #E8EFE9 !important;
  }

  /* Down chevron (same FA glyph Helix uses on top-level items), not a right arrow. */
  body.ltr #sp-header .sp-megamenu-parent > li.sp-has-child:has(> a[href="/blog"], > a[href="/site/blog"]) > .sp-dropdown.sp-dropdown-main > .sp-dropdown-inner > .sp-dropdown-items > li.sp-has-child > a:after {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    content: "\f107" !important;
    display: inline-block !important;
    margin-left: 7px;
    color: inherit;
  }

  /* L3 articles: indented, clickable, sage hover. */
  #sp-header .sp-megamenu-parent > li.sp-has-child:has(> a[href="/blog"], > a[href="/site/blog"]) > .sp-dropdown.sp-dropdown-main .sp-dropdown.sp-dropdown-sub li.sp-menu-item > a {
    display: block !important;
    font-family: "IBM Plex Sans", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
    padding: 7px 8px 7px 4px !important;
    color: #263B35 !important;
    text-decoration: none !important;
    white-space: normal;
    pointer-events: auto;
    cursor: pointer;
  }

  #sp-header .sp-megamenu-parent > li.sp-has-child:has(> a[href="/blog"], > a[href="/site/blog"]) > .sp-dropdown.sp-dropdown-main .sp-dropdown.sp-dropdown-sub li.sp-menu-item > a:hover,
  #sp-header .sp-megamenu-parent > li.sp-has-child:has(> a[href="/blog"], > a[href="/site/blog"]) > .sp-dropdown.sp-dropdown-main .sp-dropdown.sp-dropdown-sub li.sp-menu-item > a:focus,
  #sp-header .sp-megamenu-parent > li.sp-has-child:has(> a[href="/blog"], > a[href="/site/blog"]) > .sp-dropdown.sp-dropdown-main .sp-dropdown.sp-dropdown-sub li.sp-menu-item.active > a {
    color: #427E6D !important;
    background: #E8EFE9 !important;
  }
}