/**
 * Table of Contents Module - Public Styles
 * 
 * All values use CSS variables from sg-acf-variables.css.
 *
 * @package    SG_Advanced_Content_Features
 * @subpackage Modules\TableOfContents\Assets
 * @since      2.7.0
 * @license    GPL-2.0-or-later
 */

/* ==========================================================================
   Main Container
   ========================================================================== */

.sg-acf-toc {
  position: relative;
  background: var(--sg-acf-white);
  border: var(--sg-acf-border) solid var(--sg-acf-gray-200);
  border-radius: var(--sg-acf-radius-xl);
  padding: var(--sg-acf-space-6);
  margin: var(--sg-acf-space-7) var(--sg-acf-space-0);
  box-shadow: var(--sg-acf-shadow-sm);
  transition: var(--sg-acf-transition-slow);
}

.sg-acf-toc:hover {
  box-shadow: var(--sg-acf-shadow-md);
}

.sg-acf-toc::before {
  content: "";
  position: absolute;
  top: var(--sg-acf-space-0);
  left: var(--sg-acf-space-6);
  right: var(--sg-acf-space-6);
  height: var(--sg-acf-space-0-5);
  background: var(--sg-acf-primary);
  border-radius: var(--sg-acf-space-0) var(--sg-acf-space-0)
    var(--sg-acf-radius-sm) var(--sg-acf-radius-sm);
  opacity: 0.15;
}

.sg-acf-toc--no-toggle {
  padding-bottom: var(--sg-acf-space-6);
}

/* ==========================================================================
   Title
   ========================================================================== */

.sg-acf-toc__title {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sg-acf-space-2-5);
  margin: var(--sg-acf-space-0) var(--sg-acf-space-0) var(--sg-acf-space-2-5);
  padding: var(--sg-acf-space-0) var(--sg-acf-space-0) var(--sg-acf-space-2-5);
  font-size: var(--sg-acf-text-3xl);
  font-weight: var(--sg-acf-weight-bold);
  color: var(--sg-acf-gray-900);
  line-height: var(--sg-acf-leading-normal);
  border-bottom: var(--sg-acf-border) solid var(--sg-acf-gray-250);
}

.sg-acf-toc__title-icon {
  flex-shrink: 0;
  width: var(--sg-acf-icon-2xl);
  height: var(--sg-acf-icon-2xl);
  color: var(--sg-acf-primary);
}

.sg-acf-toc__title::before {
  display: none;
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.sg-acf-toc__nav {
  margin: var(--sg-acf-space-0);
}

.sg-acf-toc__list {
  list-style: none;
  margin: var(--sg-acf-space-0);
  padding: var(--sg-acf-space-0);
  counter-reset: toc-counter;
}

.sg-acf-toc__item {
  margin: var(--sg-acf-space-0);
  padding: var(--sg-acf-space-0);
  counter-increment: toc-counter;
}

.sg-acf-toc__item--hidden {
  display: none;
}

.sg-acf-toc__link {
  display: flex;
  align-items: flex-start;
  gap: var(--sg-acf-space-3);
  padding: var(--sg-acf-space-2-5) var(--sg-acf-space-3-5);
  margin: var(--sg-acf-space-0-5) var(--sg-acf-space-0);
  border-radius: var(--sg-acf-radius-md);
  color: var(--sg-acf-gray-900);
  text-decoration: none;
  font-size: var(--sg-acf-text-md);
  font-weight: var(--sg-acf-weight-normal);
  line-height: var(--sg-acf-leading-relaxed);
  transition: var(--sg-acf-transition-slow);
  position: relative;
  border-left: var(--sg-acf-border-2) solid transparent;
}

.sg-acf-toc__link:hover {
  background: var(--sg-acf-primary-light);
  color: var(--sg-acf-primary);
  border-left-color: var(--sg-acf-primary);
}

.sg-acf-toc__link:focus-visible {
  outline: var(--sg-acf-border-2) solid var(--sg-acf-primary);
  outline-offset: var(--sg-acf-space-0-5);
  border-radius: var(--sg-acf-radius-md);
}

.sg-acf-toc__link::after {
  content: counter(toc-counter, decimal-leading-zero);
  font-size: var(--sg-acf-text-xs);
  font-weight: var(--sg-acf-weight-semibold);
  color: var(--sg-acf-gray-600);
  opacity: var(--sg-acf-opacity-50);
  transition: var(--sg-acf-transition-slow);
  min-width: var(--sg-acf-space-5);
  text-align: end;
  flex-shrink: 0;
  margin-left: auto;
}

.sg-acf-toc__link:hover::after {
  color: var(--sg-acf-primary);
  opacity: var(--sg-acf-opacity-80);
}

.sg-acf-toc__link-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  opacity: var(--sg-acf-opacity-0);
  transform: translateX(calc(var(--sg-acf-space-2) * -1));
  transition: var(--sg-acf-transition-slow);
  color: var(--sg-acf-primary);
  width: var(--sg-acf-icon-md);
  height: var(--sg-acf-icon-md);
}

.sg-acf-toc__link:hover .sg-acf-toc__link-icon,
.sg-acf-toc__link:focus-visible .sg-acf-toc__link-icon {
  opacity: var(--sg-acf-opacity-100);
  transform: translateX(0);
}

.sg-acf-toc__link-icon svg {
  width: var(--sg-acf-icon-md);
  height: var(--sg-acf-icon-md);
  display: block;
}

.sg-acf-toc__link-text {
  flex: 1;
  min-width: 0;
}

/* ==========================================================================
   Toggle Button
   ========================================================================== */

.sg-acf-toc__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sg-acf-space-2);
  width: 100%;
  padding: var(--sg-acf-space-3) var(--sg-acf-space-5);
  margin-top: var(--sg-acf-space-5);
  background: var(--sg-acf-gray-100);
  border: var(--sg-acf-border) solid transparent;
  border-radius: var(--sg-acf-radius-md);
  color: var(--sg-acf-gray-900);
  font-size: var(--sg-acf-text-base);
  font-weight: var(--sg-acf-weight-medium);
  cursor: pointer;
  transition: var(--sg-acf-transition-slow);
  line-height: var(--sg-acf-leading-normal);
}

.sg-acf-toc__toggle:hover {
  background: var(--sg-acf-primary-light);
  color: var(--sg-acf-primary);
}

.sg-acf-toc__toggle:focus-visible {
  outline: var(--sg-acf-border-2) solid var(--sg-acf-primary);
  outline-offset: var(--sg-acf-space-0-5);
}

.sg-acf-toc__toggle:active {
  transform: scale(0.98);
}

.sg-acf-toc__toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--sg-acf-icon-xl);
  height: var(--sg-acf-icon-xl);
}

.sg-acf-toc__toggle-icon svg {
  width: var(--sg-acf-icon-lg);
  height: var(--sg-acf-icon-lg);
  display: block;
  stroke-width: 2.5;
}

/* Collapsed state */
.sg-acf-toc--collapsed .sg-acf-toc__toggle-icon {
  transform: rotate(0deg);
  transition: transform var(--sg-acf-transition-slower);
}

.sg-acf-toc--collapsed .sg-acf-toc__toggle-icon .sg-acf-toc__toggle-icon-less {
  display: none;
}
.sg-acf-toc--collapsed .sg-acf-toc__toggle-icon .sg-acf-toc__toggle-icon-more {
  display: block;
}
.sg-acf-toc--collapsed .sg-acf-toc__toggle-text-less {
  display: none;
}
.sg-acf-toc--collapsed .sg-acf-toc__toggle-text-more {
  display: inline;
}
.sg-acf-toc--collapsed .sg-acf-toc__toggle-count-more {
  display: inline-flex;
}

/* Expanded state */
.sg-acf-toc:not(.sg-acf-toc--collapsed) .sg-acf-toc__toggle-icon {
  transform: rotate(-180deg);
  transition: transform var(--sg-acf-transition-slower);
}

.sg-acf-toc:not(.sg-acf-toc--collapsed)
  .sg-acf-toc__toggle-icon
  .sg-acf-toc__toggle-icon-more {
  display: none;
}
.sg-acf-toc:not(.sg-acf-toc--collapsed)
  .sg-acf-toc__toggle-icon
  .sg-acf-toc__toggle-icon-less {
  display: block;
}
.sg-acf-toc:not(.sg-acf-toc--collapsed) .sg-acf-toc__toggle-text-more {
  display: none;
}
.sg-acf-toc:not(.sg-acf-toc--collapsed) .sg-acf-toc__toggle-text-less {
  display: inline;
}
.sg-acf-toc:not(.sg-acf-toc--collapsed) .sg-acf-toc__toggle-count-more {
  display: none;
}

.sg-acf-toc__toggle-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sg-acf-toc__toggle-count-more {
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--sg-acf-space-1) var(--sg-acf-space-2) var(--sg-acf-space-1);
  background: var(--sg-acf-primary);
  color: var(--sg-acf-white);
  border-radius: var(--sg-acf-radius-md);
  font-size: var(--sg-acf-text-lg);
  line-height: var(--sg-acf-leading-tight);
  letter-spacing: var(--sg-acf-space-0-5);
}

/* ==========================================================================
   Floating Back to TOC Button
   ========================================================================== */

.sg-acf-toc__back-to-top {
  position: fixed;
  bottom: var(--sg-acf-space-10);
  right: var(--sg-acf-space-5);
  z-index: var(--sg-acf-z-tooltip);
  display: inline-flex;
  align-items: center;
  gap: var(--sg-acf-space-1);
  padding: var(--sg-acf-space-1-5) var(--sg-acf-space-3-5);
  background: var(--sg-acf-white);
  border: var(--sg-acf-border) solid var(--sg-acf-gray-200);
  border-radius: var(--sg-acf-radius-pill);
  color: var(--sg-acf-gray-900);
  font-size: var(--sg-acf-text-base);
  text-decoration: none;
  box-shadow: var(--sg-acf-shadow-lg);
  transition: var(--sg-acf-transition-slow);
  opacity: var(--sg-acf-opacity-0);
  visibility: hidden;
  transform: translateY(var(--sg-acf-space-6));
}

.sg-acf-toc__back-to-top.visible {
  opacity: var(--sg-acf-opacity-100);
  visibility: visible;
  transform: translateY(0);
}

.sg-acf-toc__back-to-top:hover {
  box-shadow: var(--sg-acf-shadow-xl);
}

.sg-acf-toc__back-to-top:focus-visible {
  outline: var(--sg-acf-border-2) solid var(--sg-acf-primary);
  outline-offset: var(--sg-acf-space-1);
}

.sg-acf-toc__back-to-top svg {
  width: var(--sg-acf-icon-lg);
  height: var(--sg-acf-icon-lg);
  flex-shrink: 0;
  transition: transform var(--sg-acf-transition-slower);
}

.sg-acf-toc__back-to-top:hover svg {
  transform: translateY(calc(var(--sg-acf-space-0-5) * -1));
}

/* ==========================================================================
   RTL Support
   ========================================================================== */

.rtl .sg-acf-toc__title::before {
  display: none;
}

.rtl .sg-acf-toc__link {
  border-left: none;
  border-right: var(--sg-acf-border-2) solid transparent;
}

.rtl .sg-acf-toc__link:hover {
  border-left-color: transparent;
  border-right-color: var(--sg-acf-primary);
}

.rtl .sg-acf-toc__link::after {
  margin-left: var(--sg-acf-space-0);
  margin-right: auto;
}

.rtl .sg-acf-toc__link-icon {
  transform: translateX(var(--sg-acf-space-2));
}

.rtl .sg-acf-toc__link:hover .sg-acf-toc__link-icon {
  transform: translateX(0);
}

.rtl .sg-acf-toc__back-to-top {
  right: auto;
  left: var(--sg-acf-space-5);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (max-width: 640px) {
  .sg-acf-toc {
    padding: var(--sg-acf-space-5);
    border-radius: var(--sg-acf-radius-lg);
    margin: var(--sg-acf-space-6) var(--sg-acf-space-0);
  }

  .sg-acf-toc__title {
    font-size: var(--sg-acf-text-2xl);
    margin-bottom: var(--sg-acf-space-4);
  }

  .sg-acf-toc__link {
    padding: var(--sg-acf-space-2) var(--sg-acf-space-3);
    font-size: var(--sg-acf-text-base);
    gap: var(--sg-acf-space-2-5);
  }

  .sg-acf-toc__link::after {
    font-size: var(--sg-acf-text-2xs);
    min-width: var(--sg-acf-space-4-5);
  }

  .sg-acf-toc__toggle {
    padding: var(--sg-acf-space-2-5) var(--sg-acf-space-4);
    font-size: var(--sg-acf-text-sm);
    border-radius: var(--sg-acf-radius-md);
    margin-top: var(--sg-acf-space-4);
  }

  .rtl .sg-acf-toc__back-to-top {
    left: var(--sg-acf-space-5);
    right: auto;
  }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .sg-acf-toc__toggle:active,
  .sg-acf-toc__back-to-top:active {
    transform: none;
  }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  .sg-acf-toc {
    border: var(--sg-acf-border) solid var(--sg-acf-black);
    background: var(--sg-acf-white);
    box-shadow: none;
    page-break-inside: avoid;
  }

  .sg-acf-toc::before,
  .sg-acf-toc__title::before {
    display: none;
  }

  .sg-acf-toc__item--hidden {
    display: list-item;
  }

  .sg-acf-toc__toggle,
  .sg-acf-toc__back-to-top {
    display: none !important;
  }
}