/* ==========================================================================
   Scrollspy Tabs — desktop only
   Target widget class: .side-dropdown-tabs  (already on your Nested Tabs widget)
   The .sst-ready class is added by the JS, so nothing changes if JS fails.
   ========================================================================== */

.side-dropdown-tabs {
  /* how far below the top of the viewport the pill column parks */
  --sst-offset: 120px;
  /* vertical space between the stacked content blocks */
  --sst-gap: 160px;
  /* where the "active" line sits — must match THRESHOLD in the JS */
  --sst-threshold: 40%;
}

@media (min-width: 1025px) {
  /* ---- sticky pill column ------------------------------------------------ */
  .side-dropdown-tabs.sst-ready .e-n-tabs-heading {
    position: sticky;
    top: var(--sst-offset);
    align-self: flex-start;
    flex: 0 0 auto;
    /* Elementor's horizontal-scroll wrapper sets overflow, which kills sticky */
    overflow: visible !important;
    max-height: none !important;
  }

  /* the scroll shadows/arrows Elementor injects for horizontal_scroll */
  .side-dropdown-tabs.sst-ready .e-n-tabs-heading > .e-scroll-shadow,
  .side-dropdown-tabs.sst-ready .e-n-tabs-heading > .e-scroll-arrow {
    display: none !important;
  }

  /* ---- stack every panel instead of showing one -------------------------- */
  .side-dropdown-tabs.sst-ready .e-n-tabs-content {
    display: flex !important;
    flex-direction: column;
    gap: var(--sst-gap);
    flex: 1 1 auto;
    min-width: 0;
  }

  .side-dropdown-tabs.sst-ready .e-n-tabs-content > .e-con {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
  }

  /* Elementor sets [hidden] on inactive panels — UA display:none is beaten
     by the rule above, but this keeps things explicit. */
  .side-dropdown-tabs.sst-ready .e-n-tabs-content > .e-con[hidden] {
    display: flex !important;
  }

  /* ---- pill state transition -------------------------------------------- */
  .side-dropdown-tabs.sst-ready .e-n-tab-title {
    transition:
      background-color 0.35s ease,
      color 0.35s ease;
    cursor: pointer;
  }

  /* Optional: if you keep the fadeIn entrance animations on the headings and
     any of them get stuck invisible, uncomment this to force them visible.
     Better fix is to remove the animations from those widgets. */
  /*
  .side-dropdown-tabs.sst-ready .elementor-invisible {
    visibility: visible !important;
    animation: none !important;
  }
  */
}

/* Tablet and below: nothing here applies, Elementor's native accordion runs. */

@media (prefers-reduced-motion: reduce) {
  .side-dropdown-tabs.sst-ready .e-n-tab-title {
    transition: none;
  }
}

/* ---- arrow on tab titles ------------------------------------------------ */
.side-dropdown-tabs .e-n-tab-title {
  --sst-arrow-size: 24px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.side-dropdown-tabs .e-n-tab-title::after {
  content: "";
  flex: 0 0 auto;
  width: var(--sst-arrow-size);
  height: var(--sst-arrow-size);
  margin-inline-start: 12px;
  background-color: currentColor;
  -webkit-mask: url(/wp-content/uploads/2026/07/arrow-down-tab.svg) no-repeat
    center / contain;
  mask: url(/wp-content/uploads/2026/07/arrow-down-tab.svg) no-repeat center /
    contain;
  transition: transform 0.3s ease;
}

.side-dropdown-tabs .e-n-tab-title[aria-selected="true"]::after,
.side-dropdown-tabs .e-n-tab-title[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .side-dropdown-tabs .e-n-tab-title::after {
    transition: none;
  }
}