/**
 * Equinox Sidebar Box Styles
 * Supports:
 * - Mode 1: Manual Links (.sidelist .sidelink)
 * - Mode 2: WordPress Nav Menu (wp_nav_menu integration)
 * - Mode 3: Automatic H2 Table of Contents (TOC with Scrollspy & Smooth Scroll)
 * - Customizer Palette & Direct Color Pickers (Background, Border, Title, Active Bar)
 * - Sticky & Static positioning options
 */

/* ==========================================================================
   Container & Wrapper
   ========================================================================== */
.equinox-sidebar-wrap {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0;
  position: relative;
}

.equinox-sidebar-wrap.is-sticky .sidebox {
  position: sticky;
  top: var(--eq-sticky-top, 100px);
  z-index: 25;
}

/* ==========================================================================
   Sidebox Component (.sidebox)
   ========================================================================== */
.sidebox {
  background: var(--eq-sidebox-bg, #FFFAEB) !important;
  border: 1px solid var(--eq-sidebox-border, #F0E6CD) !important;
  border-radius: 4px;
  padding: 28px 24px;
  box-sizing: border-box;
  width: 100%;
  transition: all 0.2s ease;
}

/* ==========================================================================
   Sidehead (Section Header)
   ========================================================================== */
.sidebox .sidehead {
  font-family: var(--global-heading-font-family, 'Montserrat', Arial, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--eq-sidebox-title, var(--global-palette2, #027CA1)) !important;
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--eq-sidebox-border, #F0E6CD) !important;
  line-height: 1.3;
}

/* ==========================================================================
   Sidelist & Links (.sidelist .sidelink)
   ========================================================================== */
.sidebox .sidelist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sidebox .sidelink,
.sidebox .sidelist a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--global-font-family, var(--global-base-font-family, 'Montserrat', Arial, sans-serif));
  font-size: 15px;
  font-weight: 500;
  color: var(--global-palette4, #2c2c2c);
  text-decoration: none;
  padding: 11px 14px;
  border-radius: 3px;
  transition: all .16s ease;
  border-left: 3px solid transparent;
  box-sizing: border-box;
  line-height: 1.35;
  width: 100%;
}

.sidebox .sidelink:hover,
.sidebox .sidelist a:hover {
  background: rgba(0, 59, 83, .05);
  color: var(--global-palette1, #003B53);
}

/* Active State (.here / .is-current / WP current-menu-item) */
.sidebox .sidelink.here,
.sidebox .sidelink.is-current,
.sidebox .sidelist .current-menu-item > a,
.sidebox .sidelist .current-page-ancestor > a {
  font-weight: 700;
  color: var(--global-palette1, #003B53);
  background: #ffffff;
  border-left-color: var(--eq-sidebox-active, var(--global-palette-btn-bg, #FFD457)) !important;
  box-shadow: 0 2px 6px rgba(0, 59, 83, .06);
}

/* ==========================================================================
   Chevron Indicator (.sidechev)
   ========================================================================== */
.sidebox .sidechev {
  width: 15px;
  height: 15px;
  color: #9db3bd;
  transition: transform .15s ease, color .15s ease;
  flex: none;
  margin-left: 8px;
}

.sidebox .sidelink:hover .sidechev,
.sidebox .sidelist a:hover .sidechev,
.sidebox .sidelink.here .sidechev,
.sidebox .sidelink.is-current .sidechev,
.sidebox .sidelist .current-menu-item > a .sidechev {
  color: var(--global-palette1, #003B53);
  transform: translateX(3px);
}

/* ==========================================================================
   Table of Contents Mode (.equinox-sidebar-toc)
   ========================================================================== */
.sidebox.equinox-sidebar-toc .sidelist {
  scroll-behavior: smooth;
}

/* Target headings offset for smooth anchor scrolling under sticky headers */
h2[id],
.article-prose h2[id],
.sec2main h2[id] {
  scroll-margin-top: 120px;
}

/* Empty TOC notice */
.sidebox .toc-empty-notice {
  font-size: 13px;
  color: #8c9da6;
  font-style: italic;
  padding: 8px 4px;
}

/* ==========================================================================
   KADENCE-STYLE COLOR CONTROL & POPOVER (Gutenberg Editor UI)
   ========================================================================== */
.kadence-color-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 4px;
  border-bottom: 1px solid #f1f5f9;
}

.kadence-color-row-label {
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
}

.kadence-color-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.kadence-color-reset-btn {
  background: none;
  border: none;
  padding: 3px;
  cursor: pointer;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.kadence-color-reset-btn:hover {
  color: #ef4444;
  background-color: #fee2e2;
}

.kadence-color-indicator-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  cursor: pointer;
  padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.kadence-color-indicator-btn:hover {
  transform: scale(1.08);
  border-color: #027ca1;
  box-shadow: 0 0 0 2px rgba(2, 124, 161, 0.2);
}

.kadence-color-indicator-btn.is-empty {
  background: repeating-linear-gradient(45deg, #cbd5e1 0, #cbd5e1 2px, #ffffff 2px, #ffffff 6px);
}

/* Kadence Color Popover Container & Internal Padding */
.kadence-color-popover-content .components-popover__content {
  padding: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.18), 0 6px 12px -4px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid #e2e8f0 !important;
  background: #ffffff !important;
  min-width: 280px !important;
  max-width: 320px !important;
}

.kadence-color-popover-inner {
  padding: 18px 16px 16px 16px;
  background: #ffffff;
  box-sizing: border-box;
}

.kadence-color-popover-inner .components-color-picker {
  width: 100% !important;
}

.kadence-palette-swatches {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #f1f5f9;
}

.kadence-palette-heading {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  margin-bottom: 10px;
}

.kadence-palette-row {
  display: grid !important;
  grid-template-columns: repeat(8, 24px) !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.kadence-palette-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid rgba(0, 0, 0, 0.12);
  cursor: pointer;
  padding: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  box-sizing: border-box;
}

.kadence-palette-circle:hover {
  transform: scale(1.18);
  box-shadow: 0 0 0 2px #027ca1;
  z-index: 2;
}

.kadence-palette-circle.is-active {
  transform: scale(1.15);
  box-shadow: 0 0 0 2px #003b53, 0 0 0 4px #ffd457;
  z-index: 3;
}

/* ==========================================================================
   Gutenberg Editor Specific Styles
   ========================================================================== */
.editor-styles-wrapper .equinox-sidebar-wrap {
  width: 100% !important;
  max-width: 100% !important;
}

.editor-styles-wrapper .equinox-sidebar-wrap .block-editor-block-list__layout {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  width: 100% !important;
}

.editor-styles-wrapper .equinox-sidebar-wrap [data-type="equinox/sidebar-link"],
.editor-styles-wrapper .equinox-sidebar-wrap .wp-block-equinox-sidebar-link {
  width: 100% !important;
  margin: 0 !important;
}

.editor-styles-wrapper .equinox-sidebar-wrap .sidelink-edit-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.editor-styles-wrapper .equinox-sidebar-wrap .sidelink-edit-label {
  flex-grow: 1;
  min-width: 0;
  outline: none;
}

.editor-styles-wrapper .equinox-sidebar-wrap .toc-preview-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #027CA1;
  background: #EBF4F7;
  padding: 4px 10px;
  border-radius: 3px;
  margin-bottom: 12px;
}

.editor-styles-wrapper .equinox-sidebar-wrap .toc-preview-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.editor-styles-wrapper .equinox-sidebar-wrap .toc-preview-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: rgba(0, 59, 83, 0.02);
  border-radius: 3px;
  font-size: 14px;
  color: #555555;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */
@media (max-width: 1150px) {
  .equinox-sidebar-wrap.is-sticky .sidebox {
    position: static !important;
  }
}

@media (max-width: 768px) {
  .sidebox {
    padding: 22px 18px;
  }

  .sidebox .sidelink,
  .sidebox .sidelist a {
    font-size: 14.5px;
    padding: 10px 12px;
  }
}