/* ═══════════════════════════════════════════════════════════════════════
   Smart TOC for Elementor - Frontend Styles
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── CSS Custom Properties (Defaults) ─────────────────────────────── */

.smart-toc {
  --stoc-box-bg: #f8f9fa;
  --stoc-indent: 20px;
  --stoc-marker-color: #0073aa;
  --stoc-marker-size: 14px;
  --stoc-transition: 300ms;
  position: relative;
  background-color: var(--stoc-box-bg);
  line-height: 1.5;
  box-sizing: border-box;
}

.smart-toc *,
.smart-toc *::before,
.smart-toc *::after {
  box-sizing: border-box;
}

/* ─── Header ───────────────────────────────────────────────────────── */

.smart-toc__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid #e0e0e0;
}

.smart-toc__header-title {
  margin: 0;
  padding: 0;
  font-weight: 600;
  line-height: 1.3;
  flex: 1;
}

.smart-toc--collapsible .smart-toc__header-title {
  cursor: pointer;
}

/* ─── Toggle Buttons ───────────────────────────────────────────────── */

.smart-toc__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: inherit;
  line-height: 1;
  transition: opacity 200ms ease;
  flex-shrink: 0;
}

.smart-toc__toggle:hover {
  opacity: 0.7;
}

.smart-toc__toggle svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.smart-toc__toggle--expand {
  display: none;
}

.smart-toc--collapsed .smart-toc__toggle--expand {
  display: inline-flex;
}

.smart-toc--collapsed .smart-toc__toggle--collapse {
  display: none;
}

/* ─── Body ─────────────────────────────────────────────────────────── */

.smart-toc__body {
  padding: 4px 0;
}

.smart-toc__empty {
  color: #999;
  font-style: italic;
  margin: 0;
  padding: 8px 0;
}

/* ─── Spinner ──────────────────────────────────────────────────────── */

.smart-toc__spinner {
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.smart-toc__spinner-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid #ddd;
  border-top-color: var(--stoc-marker-color, #0073aa);
  border-radius: 50%;
  animation: smartTocSpin 0.6s linear infinite;
}

@keyframes smartTocSpin {
  to { transform: rotate(360deg); }
}

/* ─── List Styles ──────────────────────────────────────────────────── */

.smart-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.smart-toc__sublist {
  margin: 0;
  padding: 0;
  padding-left: var(--stoc-indent);
  list-style: none;
}

/* ─── Marker Mode: Numbers ─────────────────────────────────────────── */

.smart-toc__list--numbers {
  counter-reset: toc-counter;
}

.smart-toc__list--numbers > .smart-toc__list-item {
  counter-increment: toc-counter;
}

.smart-toc__list--numbers > .smart-toc__list-item > .smart-toc__list-item-text::before {
  content: counter(toc-counter) ". ";
  color: var(--stoc-marker-color);
  font-size: var(--stoc-marker-size);
  font-weight: 600;
  margin-right: 6px;
  display: inline;
}

/* Nested number counters */
.smart-toc__sublist.smart-toc__list--numbers {
  counter-reset: toc-sub-counter;
}

.smart-toc__sublist.smart-toc__list--numbers > .smart-toc__list-item {
  counter-increment: toc-sub-counter;
}

.smart-toc__sublist.smart-toc__list--numbers > .smart-toc__list-item > .smart-toc__list-item-text::before {
  content: counter(toc-sub-counter) ". ";
  font-size: calc(var(--stoc-marker-size) - 1px);
}

/* ─── Marker Mode: Bullets ─────────────────────────────────────────── */

.smart-toc__list--bullets > .smart-toc__list-item > .smart-toc__list-item-text::before {
  content: "\2022";
  color: var(--stoc-marker-color);
  font-size: var(--stoc-marker-size);
  font-weight: 700;
  margin-right: 8px;
  display: inline;
}

.smart-toc__sublist.smart-toc__list--bullets > .smart-toc__list-item > .smart-toc__list-item-text::before {
  content: "\25E6";
  font-size: calc(var(--stoc-marker-size) - 1px);
}

/* ─── Marker Mode: None ────────────────────────────────────────────── */

.smart-toc__list--none > .smart-toc__list-item > .smart-toc__list-item-text::before {
  content: none;
  display: none;
}

/* ─── List Items ───────────────────────────────────────────────────── */

.smart-toc__list-item {
  margin-bottom: 6px;
  line-height: 1.4;
}

.smart-toc__list-item-text {
  display: block;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--stoc-transition) ease,
              background-color var(--stoc-transition) ease,
              font-weight var(--stoc-transition) ease;
  width: 100%;
  padding: 4px 8px;
  border-radius: 0;
  position: relative;
  /* color, font-size, background controlled by Elementor widget settings */
}

/* Active state (defaults, overridden by Elementor controls) */
.smart-toc__list-item--active > .smart-toc__list-item-text {
  /* color, font-weight, background controlled by Elementor widget settings */
}

/* Active indicator bar (toggled by .smart-toc--has-indicator class) */
.smart-toc--has-indicator .smart-toc__list-item--active > .smart-toc__list-item-text::after {
  content: "";
  display: block;
  position: absolute;
  left: -12px;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--stoc-marker-color);
  border-radius: 2px;
  transition: background-color var(--stoc-transition) ease;
}

/* Hide indicator when class is absent */
.smart-toc__list-item--active > .smart-toc__list-item-text::after {
  content: none;
}

.smart-toc__list-item {
  position: relative;
}

/* ─── Item Dividers ───────────────────────────────────────────────── */

.smart-toc--has-dividers > .smart-toc__list > .smart-toc__list-item,
.smart-toc--has-dividers .smart-toc__sublist > .smart-toc__list-item {
  border-bottom: 1px solid #e0e0e0;
  /* width, style, color overridden by Elementor controls */
}

.smart-toc--has-dividers > .smart-toc__list > .smart-toc__list-item:last-child,
.smart-toc--has-dividers .smart-toc__sublist > .smart-toc__list-item:last-child {
  border-bottom: none;
}

/* Collapsed sub-items indicator */
.smart-toc__list-item--collapsed > .smart-toc__sublist {
  display: none;
}

/* ─── Word Wrap / Ellipsis ─────────────────────────────────────────── */

.smart-toc--ellipsis .smart-toc__list-item-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* ═══════════════════════════════════════════════════════════════════════
   Display Mode: Inline (default)
   ═══════════════════════════════════════════════════════════════════════ */

.smart-toc--inline {
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════════
   Display Mode: Sticky Sidebar
   ═══════════════════════════════════════════════════════════════════════ */

.smart-toc--sticky {
  transition: all 300ms ease;
}

.smart-toc--sticky.smart-toc--stuck {
  position: fixed;
  z-index: 999;
  overflow-y: auto;
  /* Default width for the stuck sidebar. Elementor's sticky_width control
     overrides this via inline dynamic CSS when the user adjusts the slider.
     This fallback ensures a sensible size even if the control is untouched. */
  width: 280px;
}

/* When in push mode, make sure the TOC doesn't exceed its set width */
.smart-toc--push.smart-toc--stuck {
  box-sizing: border-box;
}

/* Scrollbar styling for sticky mode */
.smart-toc--sticky.smart-toc--stuck::-webkit-scrollbar {
  width: 4px;
}

.smart-toc--sticky.smart-toc--stuck::-webkit-scrollbar-track {
  background: transparent;
}

.smart-toc--sticky.smart-toc--stuck::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.15);
  border-radius: 4px;
}

/* ─── Sticky: Compact Mode ─────────────────────────────────────────── */

.smart-toc--compact.smart-toc--stuck {
  padding: 8px 12px;
}

.smart-toc--compact.smart-toc--stuck .smart-toc__header {
  padding: 4px 0;
  margin-bottom: 4px;
}

.smart-toc--compact.smart-toc--stuck .smart-toc__header-title {
  font-size: 0.85em;
}

.smart-toc--compact.smart-toc--stuck .smart-toc__list-item {
  margin-bottom: 2px;
}

.smart-toc--compact.smart-toc--stuck .smart-toc__list-item-text {
  font-size: 0.82em;
  padding: 2px 6px;
  line-height: 1.3;
}

.smart-toc--compact.smart-toc--stuck .smart-toc__sublist {
  padding-left: 12px;
}

.smart-toc--compact.smart-toc--stuck .smart-toc__header .smart-toc__toggle {
  padding: 2px;
}

/* ─── Sticky: Push Content Mode ────────────────────────────────────── */
/* The JS applies margin to the content element.
   This class is for additional structural styling if needed. */

.smart-toc--push.smart-toc--stuck {
  /* Same as overlay but the JS handles pushing the content element */
}

/* ═══════════════════════════════════════════════════════════════════════
   Display Mode: Floating Button + Panel
   ═══════════════════════════════════════════════════════════════════════ */

.smart-toc--floating {
  position: fixed;
  z-index: 9999;
  background: none;
  padding: 0;
  border: none;
  box-shadow: none;
}

.smart-toc--floating-bottom-right {
  bottom: 24px;
  right: 24px;
}

.smart-toc--floating-bottom-left {
  bottom: 24px;
  left: 24px;
}

/* Floating Button */
.smart-toc__floating-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease;
  font-size: 20px;
  position: relative;
  z-index: 2;
  /* width, height, background, color, box-shadow controlled by Elementor widget settings */
}

.smart-toc__floating-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
}

.smart-toc__floating-btn--active {
  transform: rotate(45deg);
}

.smart-toc__floating-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  transition: transform 200ms ease;
}

.smart-toc__floating-btn--active svg {
  transform: rotate(-45deg); /* counteract parent rotation */
}

.smart-toc__floating-btn i {
  font-size: inherit;
  line-height: 1;
}

/* Floating Panel */
.smart-toc__floating-panel {
  position: absolute;
  bottom: 60px;
  overflow-y: auto;
  border-radius: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.95);
  transition: opacity 250ms ease, transform 250ms ease, visibility 250ms;
  z-index: 1;
  /* width, max-height, padding, background, box-shadow controlled by Elementor widget settings */
}

.smart-toc--floating-bottom-right .smart-toc__floating-panel {
  right: 0;
}

.smart-toc--floating-bottom-left .smart-toc__floating-panel {
  left: 0;
}

.smart-toc__floating-panel--open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Panel scrollbar */
.smart-toc__floating-panel::-webkit-scrollbar {
  width: 4px;
}

.smart-toc__floating-panel::-webkit-scrollbar-track {
  background: transparent;
}

.smart-toc__floating-panel::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.12);
  border-radius: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════════════════ */

/* Responsive: Elementor handles per-device values via add_responsive_control.
   Only add layout resets here that can't be handled by controls. */

@media (max-width: 767px) {
  .smart-toc--sticky.smart-toc--stuck {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    max-width: 100% !important;
    max-height: none !important;
  }

  .smart-toc--floating {
    bottom: 16px;
  }

  .smart-toc--floating-bottom-right {
    right: 16px;
  }

  .smart-toc--floating-bottom-left {
    left: 16px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Print Styles
   ═══════════════════════════════════════════════════════════════════════ */

@media print {
  .smart-toc--floating,
  .smart-toc--sticky.smart-toc--stuck {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    box-shadow: none;
  }

  .smart-toc__floating-btn {
    display: none;
  }

  .smart-toc__floating-panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    position: relative;
    box-shadow: none;
    max-height: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Accessibility
   ═══════════════════════════════════════════════════════════════════════ */

.smart-toc__list-item-text:focus-visible {
  outline: 2px solid var(--stoc-marker-color, #0073aa);
  outline-offset: 2px;
  border-radius: 2px;
}

.smart-toc__toggle:focus-visible,
.smart-toc__floating-btn:focus-visible {
  outline: 2px solid var(--stoc-marker-color, #0073aa);
  outline-offset: 2px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .smart-toc__list-item-text,
  .smart-toc__floating-panel,
  .smart-toc__floating-btn,
  .smart-toc--sticky,
  .smart-toc__spinner-icon {
    transition: none !important;
    animation: none !important;
  }
}