/*!
 * Innomis K-Tree - Professional Navigation Tree Plugin
 * Version: 1.0.1
 * Description: Clean, modern navigation tree with enhanced user experience
 * Author: Innomis (Dennis Kasper)
 *
 * IMPORTANT: WordPress Admin Isolation
 *
 * This CSS file contains styles that could interfere with WordPress admin interface,
 * particularly viewport-based heights (100vh) and scroll behavior modifications.
 *
 * To prevent conflicts:
 * 1. CSS is only loaded in frontend (via is_admin() check in PHP)
 * 2. CSS includes admin protection rules (.wp-admin selectors)
 * 3. JavaScript includes admin detection and early return
 *
 * This ensures the WordPress admin left sidebar scroll behavior remains normal.
 */

/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */

/* WordPress Admin Protection - Prevent CSS conflicts with admin interface */
/* Only hide frontend components that interfere with admin scroll behavior */
.wp-admin .post-chapters-sidebar,
body.wp-admin .post-chapters-sidebar {
    display: none !important;
}

/* Allow admin graph editor but prevent general frontend interference */
body.wp-admin:not([class*="ktree-graphs"]) .ktree-container:not(.ktree-graph-editor) {
    display: none !important;
}

.ktree-container * {
    box-sizing: border-box;
}

/* ==========================================================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ========================================================================== */

:root:root {


    /* Brand Colors */
    --ktree-primary: #45598f;
    --ktree-primary-hover: #3a4a7a;
    --ktree-primary-light: #f0f2f7;
    --ktree-primary-dark: #2d3965;
    
    /* Neutral Colors */
    --ktree-white: #ffffff;
    --ktree-gray-50: #f8f9fa;
    --ktree-gray-100: #f2f4f8;
    --ktree-gray-200: #e0e0e0;
    --ktree-gray-300: #d0d0d0;
    --ktree-gray-400: #1a1a1a;
    --ktree-gray-500: #1a1a1a;
    --ktree-gray-600: #1a1a1a;
    --ktree-gray-900: #1a1a1a;
    
    /* Additional color definitions */
    --ktree-bg: var(--ktree-white);
    --ktree-bg-alt: var(--ktree-gray-50);
    --ktree-text: #1a1a1a;
    --ktree-text-muted: #1a1a1a;
    --ktree-text-light: #1a1a1a;
    --ktree-border: var(--ktree-gray-200);
    --ktree-border-light: var(--ktree-gray-100);
    
    /* Semantic Colors */
    --ktree-success: #28a745;
    --ktree-warning: #ffc107;
    --ktree-error: #dc3545;
    --ktree-info: #17a2b8;
    
    /* Typography Scale - using REM based on 18px root font-size */
    --ktree-font-size-xs: 0.667rem;   /* 12px (12/18) */
    --ktree-font-size-sm: 0.722rem;   /* 13px (13/18) */
    --ktree-font-size-base: 0.778rem; /* 14px (14/18) */
    --ktree-font-size-lg: 0.889rem;   /* 16px (16/18) */
    --ktree-font-size-xl: 1rem;       /* 18px (18/18) */
    --ktree-font-size-2xl: 1.111rem;  /* 20px (20/18) */
    
    /* Font Weights */
    --ktree-font-weight-normal: 400;
    --ktree-font-weight-medium: 500;
    --ktree-font-weight-semibold: 600;
    --ktree-font-weight-bold: 700;
    
    /* Line Heights */
    --ktree-line-height-tight: 1.25;
    --ktree-line-height-normal: 1.5;
    --ktree-line-height-relaxed: 1.625;
    
    /* Spacing Scale (8px base unit) */
    --ktree-space-1: 0.25rem;  /* 4px */
    --ktree-space-2: 0.5rem;   /* 8px */
    --ktree-space-3: 0.75rem;  /* 12px */
    --ktree-space-4: 1rem;     /* 16px */
    --ktree-space-5: 1.25rem;  /* 20px */
    --ktree-space-6: 1.5rem;   /* 24px */
    --ktree-space-8: 2rem;     /* 32px */
    --ktree-space-10: 2.5rem;  /* 40px */
    --ktree-space-11: 2.75rem; /* 44px */
    --ktree-space-12: 3rem;    /* 48px */
    
    /* Additional spacing aliases */
    --ktree-space-xs: var(--ktree-space-1); /* 4px */
    --ktree-space-sm: var(--ktree-space-2); /* 8px */
    --ktree-space-md: var(--ktree-space-4); /* 16px */
    --ktree-space-lg: var(--ktree-space-6); /* 24px */
    --ktree-space-xl: var(--ktree-space-8); /* 32px */
    
    /* Border Radius */
    --ktree-radius-sm: 0.12rem;  /* 1.92px */
    --ktree-radius: 0.12rem;     /* 1.92px */
    --ktree-radius-md: 0.12rem;  /* 1.92px */
    --ktree-radius-lg: 0.12rem;  /* 1.92px */
    --ktree-border-radius: 0.12rem;  /* 1.92px */
    
    /* Border Width */
    --ktree-border-width: 1px;
    --ktree-border-width-thick: 2px;
    
    /* Shadows */
    --ktree-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --ktree-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --ktree-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --ktree-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --ktree-shadow-print: 0 4px 18px rgba(0, 0, 0, 0.05);
    
    /* Transitions */
    --ktree-transition-fast: 0.15s ease;
    --ktree-transition-normal: 0.25s ease;
    --ktree-transition-slow: 0.3s ease;
    --ktree-transition: var(--ktree-transition-normal);
    
    /* Enhanced Animations */
    --ktree-easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --ktree-easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ktree-easing-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ktree-animation-tree-expand: 0.3s var(--ktree-easing-smooth);
    --ktree-animation-content-fade: 0.2s var(--ktree-easing-smooth);
    --ktree-animation-hover: 0.15s var(--ktree-easing-smooth);
    
    /* Z-Index Scale */
    --ktree-z-dropdown: 50;
    --ktree-z-sticky: 100;
    --ktree-z-overlay: 200;
    --ktree-z-modal: 1000;
    
    /* Font Family */
    --ktree-font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}

/* Global input height override */
input[type="text"], 
input[type="number"], 
input[type="email"], 
input[type="url"], 
input[type="password"], 
input[type="search"], 
input[type="reset"], 
input[type="tel"], 
input[type="date"], 
select {
    height: 32px !important;
    font-size: 0.8rem !important;
}

/* Global SVG icon sizing */
svg {
    width: 20px !important;
    height: 20px !important;
}

/* ==========================================================================
   MAIN CONTAINER
   ========================================================================== */

.ktree-container {
    /* Layout */
    display: flex;
    width: 100%;
    min-height: 100vh;
    overflow: visible;
    position: relative;

    /* Container Queries Support */
    container-type: inline-size;

    /* Visual */
    background: var(--ktree-white);
    border: var(--ktree-border-width) solid var(--ktree-gray-200);
    border-radius: var(--ktree-radius-sm);
    box-shadow: var(--ktree-shadow-print);

    /* Typography - use 1em to inherit theme root font-size (e.g., Avada's 18px) */
    font-family: var(--ktree-font-family);
    font-size: 1em;
    line-height: var(--ktree-line-height-normal);
}

/* ==========================================================================
   SUBTREE HEADER (for root_node display)
   ========================================================================== */

.ktree-subtree-header {
    padding: var(--ktree-space-3) var(--ktree-space-4);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    display: flex;
    align-items: center;
    gap: var(--ktree-space-2);
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    margin-bottom: var(--ktree-space-2);
}

.ktree-subtree-header i {
    width: 18px;
    height: 18px;
    opacity: 0.9;
}

.ktree-subtree-title {
    font-weight: 600;
    font-size: var(--ktree-font-sm);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    flex: 1;
}

/* ==========================================================================
   SIDEBAR LAYOUT
   ========================================================================== */

.ktree-sidebar {
    /* Layout */
    display: flex;
    flex-direction: column;
    width: 20%;
    min-width: 250px;
    height: 100vh;
    position: sticky;
    top: 100px; /* Fallback - will be overridden by JavaScript */
    top: var(--ktree-sticky-offset, 100px);

    /* Visual */
    background: #f3f4f6 !important;
    border-right: var(--ktree-border-width) solid var(--ktree-gray-200);

    /* Typography - inherits from Admin CSS tree_text_size setting */

    /* Performance */
    will-change: transform;
}

/* ==========================================================================
   SEARCH COMPONENT
   ========================================================================== */

.ktree-search {
    min-height: 49px;
    height: auto;
    padding: 0 var(--ktree-space-sm);
    border-bottom: var(--ktree-border-width) solid var(--ktree-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ktree-search-controls {
    display: flex;
    align-items: center;
    gap: var(--ktree-space-xs);
    width: 100%;
}

.ktree-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
}

.ktree-tree-controls {
    display: flex;
    align-items: center;
    gap: var(--ktree-space-1);
}

.ktree-expand-all,
.ktree-collapse-all {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: var(--ktree-white);
    border: var(--ktree-border-width) solid var(--ktree-gray-200);
    border-radius: var(--ktree-radius-sm);
    color: var(--ktree-gray-600);
    cursor: pointer;
    transition: var(--ktree-transition-fast);
}

.ktree-expand-all:hover,
.ktree-collapse-all:hover {
    border-color: var(--ktree-primary);
    color: var(--ktree-primary);
}

.ktree-expand-all:active,
.ktree-collapse-all:active {
    background: var(--ktree-gray-100);
    transform: scale(0.95);
}

.ktree-expand-all svg,
.ktree-collapse-all svg {
    width: 16px;
    height: 16px;
}

/* Custom Tooltips */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: all 0.2s ease;
    z-index: 1000;
}

[data-tooltip]::after {
    content: '';
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid rgba(0, 0, 0, 0.9);
    pointer-events: none;
    opacity: 0;
    transition: all 0.2s ease;
    z-index: 1000;
}

[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* Tooltip position adjustment for buttons on the right */
.ktree-export-btn[data-tooltip]::before,
.ktree-outline-toggle[data-tooltip]::before,
.ktree-sidebar-toggle[data-tooltip]::before {
    left: auto;
    right: 0;
    transform: translateX(0) scale(0.9);
}

.ktree-export-btn[data-tooltip]:hover::before,
.ktree-outline-toggle[data-tooltip]:hover::before,
.ktree-sidebar-toggle[data-tooltip]:hover::before {
    transform: translateX(0) scale(1);
}

.ktree-export-btn[data-tooltip]::after,
.ktree-outline-toggle[data-tooltip]::after,
.ktree-sidebar-toggle[data-tooltip]::after {
    left: auto;
    right: 12px;
    transform: translateX(0) scale(0.9);
}

.ktree-export-btn[data-tooltip]:hover::after,
.ktree-outline-toggle[data-tooltip]:hover::after,
.ktree-sidebar-toggle[data-tooltip]:hover::after {
    transform: translateX(0) scale(1);
}

/* Hide tooltips when button is being clicked (active state) */
.ktree-outline-toggle[data-tooltip]:active::before,
.ktree-outline-toggle[data-tooltip]:active::after {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Remove focus outline and tap highlight from toggle button */
.ktree-outline-toggle:focus,
.ktree-outline-toggle:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.ktree-outline-toggle {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* Tooltips for title attributes (export options) */
.ktree-format-option[title] {
    position: relative;
}

.ktree-format-option[title]:hover::before {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    z-index: 1000;
    
    /* Visual styling */
    background: var(--ktree-gray-900);
    color: var(--ktree-white);
    padding: var(--ktree-space-2) var(--ktree-space-3);
    border-radius: var(--ktree-radius);
    font-size: var(--ktree-font-size-xs);
    line-height: 1.2;
    white-space: nowrap;
    max-width: 200px;
    white-space: normal;
    text-align: center;
    
    /* Animation */
    opacity: 0;
    animation: tooltip-fade-in 0.2s ease-out forwards;
}

.ktree-format-option[title]:hover::after {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    
    /* Arrow pointing down */
    border: 4px solid transparent;
    border-top-color: var(--ktree-gray-900);
    
    /* Animation */
    opacity: 0;
    animation: tooltip-fade-in 0.2s ease-out forwards;
}

@keyframes tooltip-fade-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.ktree-search-input {
    /* Layout */
    width: 100%;
    height: 28px;
    padding: var(--ktree-space-1) var(--ktree-space-11) var(--ktree-space-1) var(--ktree-space-3);
    
    /* Visual */
    background: var(--ktree-white);
    border: var(--ktree-border-width) solid var(--ktree-gray-200);
    border-radius: var(--ktree-radius-sm) !important;
    
    /* Typography */
    font-size: var(--ktree-font-size-sm);
    font-family: inherit;
    color: var(--ktree-gray-600);
    line-height: var(--ktree-line-height-normal);
    
    /* Interaction */
    transition: var(--ktree-transition-fast);
    
    /* Remove default styles */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.ktree-search-input:focus {
    outline: none;
    border-color: var(--ktree-gray-300);
    background: var(--ktree-white);
}

.ktree-search-input::placeholder {
    color: var(--ktree-gray-400);
    opacity: 1; /* Firefox */
}

/* Search Icons */
.ktree-search-icon {
    position: absolute;
    right: var(--ktree-space-3);
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--ktree-gray-600);
    pointer-events: none;
    z-index: 1;
}

.ktree-search-clear {
    display: none !important;
}




/* Breadcrumbs in content header */
.ktree-content-header .ktree-breadcrumb-trail {
    flex: 1;
    max-width: 80%;
    margin-right: var(--ktree-space-md);
    min-width: 0;
}

.ktree-breadcrumb-trail {
    /* font-size set by Admin CSS tree_text_size setting */
    color: var(--ktree-text-muted);
    line-height: 1.8;
    display: block;
    text-align: left;
}

.ktree-breadcrumb-content {
    display: block;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding-left: 0;
    text-indent: 0;
}

.ktree-breadcrumb-separator {
    display: inline-block;
    width: 14px;
    height: 14px;
    color: var(--ktree-text-light);
    transition: transform var(--ktree-animation-hover);
    vertical-align: middle;
    margin: 0 2px;
}

.ktree-breadcrumb-item {
    display: inline;
    cursor: pointer;
    border-radius: var(--ktree-radius-sm);
    transition: all var(--ktree-animation-hover);
    color: var(--ktree-text-muted);
    text-decoration: none;
}

.ktree-breadcrumb-item:hover {
    background: var(--ktree-primary-light);
    color: var(--ktree-primary);
    padding: 2px 6px;
    margin: -2px -6px;
}

.ktree-breadcrumb-current {
    display: inline;
    color: var(--ktree-text);
    font-weight: 500;
    padding: 2px 6px;
    background: var(--ktree-gray-100);
    border-radius: var(--ktree-radius-sm);
}

/* Menu */
.ktree-menu {
    flex: 1;
    overflow-y: auto;
    padding: 1.2rem var(--ktree-space-sm) var(--ktree-space-xs) var(--ktree-space-sm);
    outline: none; /* Remove default focus outline */
}

.ktree-menu:focus {
    box-shadow: inset 0 0 0 2px var(--ktree-primary-light);
}

/* JSTree Custom Styling */
#ktree-jstree {
    font-family: inherit;
    /* font-size set by Admin CSS tree_text_size setting via .ktree-container #ktree-jstree */
}

/* Override JSTree default styles */
#ktree-jstree .jstree-anchor {
    min-height: 28px;
    height: auto;
    line-height: 1.4;
    padding: var(--ktree-space-xs);
    color: var(--ktree-text);
    text-decoration: none;
    border-radius: var(--ktree-radius-sm);
    font-weight: 400;
    transition: all var(--ktree-animation-hover);
    border: var(--ktree-border-width) solid transparent;
    margin: 0;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 16px);
}

#ktree-jstree .jstree-anchor:hover {
    background: #45598f;
    color: white;
    border-color: #45598f;
    text-decoration: none;
}

#ktree-jstree .jstree-anchor.jstree-clicked {
    background: #45598f;
    color: white;
    font-weight: 500;
    border-color: #45598f;
}

#ktree-jstree .jstree-node {
    margin: 0;
    padding: 0;
}

/* Hide JSTree connection lines and reduce indentation */
#ktree-jstree .jstree-default .jstree-wholerow-hovered,
#ktree-jstree .jstree-default .jstree-wholerow-clicked {
    background: none;
}

#ktree-jstree .jstree-node, 
#ktree-jstree .jstree-children {
    background-image: none !important;
    background-repeat: no-repeat;
    background-color: transparent;
}

/* Reduce child node indentation */
#ktree-jstree .jstree-children {
    padding-left: 8px !important; /* Minimal indentation for child levels */
}

/* Hide the connecting lines */
#ktree-jstree .jstree-default .jstree-node {
    background-image: none !important;
}

#ktree-jstree .jstree-default .jstree-last {
    background-image: none !important;
}

/* Level 0 starts at zero, child levels get minimal indentation */
#ktree-jstree .jstree-container-ul {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* Only child levels get indentation */
#ktree-jstree .jstree-children {
    margin-left: 0 !important;
    padding-left: 8px !important; /* Minimal but visible indentation for children */
}

#ktree-jstree .jstree-no-dots,
#ktree-jstree .jstree-no-icons {
    margin-left: 0 !important;
    padding-left: 0 !important;
}

#ktree-jstree .jstree-children {
    margin-left: 8px;
    border-left: none; /* Remove left border */
    padding-left: var(--ktree-space-xs);
    overflow: hidden;
    transition: var(--ktree-animation-tree-expand);
}

#ktree-jstree .jstree-open > .jstree-ocl,
#ktree-jstree .jstree-closed > .jstree-ocl {
    width: 24px;
    height: 32px;
    background: none;
    border: none;
    color: #1a1a1a;
    cursor: pointer;
    transition: all var(--ktree-animation-hover);
    border-radius: var(--ktree-radius-sm);
    margin-right: var(--ktree-space-xs);
    display: inline-block;
    vertical-align: top;
    text-align: center;
    line-height: 32px;
    position: relative;
}

/* Lucide Chevron Icons */
#ktree-jstree .jstree-closed > .jstree-ocl::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23444444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#ktree-jstree .jstree-open > .jstree-ocl::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23444444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#ktree-jstree .jstree-open > .jstree-ocl:hover::after,
#ktree-jstree .jstree-closed > .jstree-ocl:hover::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%231a1a1a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>');
}

#ktree-jstree .jstree-open > .jstree-ocl:hover::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%231a1a1a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
}

#ktree-jstree .jstree-open > .jstree-ocl:hover,
#ktree-jstree .jstree-closed > .jstree-ocl:hover {
    background: var(--ktree-border-light);
    color: var(--ktree-text);
}

#ktree-jstree .jstree-open > .jstree-ocl:before,
#ktree-jstree .jstree-closed > .jstree-ocl:before {
    content: '';
    display: none;
}

#ktree-jstree .jstree-leaf > .jstree-ocl {
    width: 24px;
    height: 32px;
}

/* Level-specific styling */
#ktree-jstree > .jstree-container-ul {
    padding: 0;
    margin: 0;
}

#ktree-jstree > .jstree-container-ul > .jstree-node {
    padding: 0;
    margin-left: 0;
}

/* All nodes have consistent styling */
#ktree-jstree .jstree-anchor {
    font-size: var(--ktree-font-size-base) !important;
    color: #1a1a1a !important;
}

#ktree-jstree .jstree-anchor.jstree-clicked {
    color: white !important;
}

#ktree-jstree .jstree-anchor:hover {
    color: white !important;
}

/* Search highlighting in JSTree */
#ktree-jstree .jstree-search {
    background: #fff3cd;
    color: #856404;
    padding: 1px 2px;
    border-radius: 2px;
    font-weight: 500;
}

/* Remove JSTree default themer styles we don't want */
#ktree-jstree .jstree-default .jstree-node {
    min-height: auto;
    margin-left: 0 !important;
}

#ktree-jstree .jstree-default .jstree-anchor {
    line-height: 28px;
    height: 28px;
}

#ktree-jstree .jstree-default .jstree-wholerow {
    height: 28px;
}

/* Force inline display for JSTree components */
#ktree-jstree .jstree-icon.jstree-ocl {
    float: none !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

#ktree-jstree .jstree-anchor {
    display: inline-block !important;
    vertical-align: middle !important;
}

#ktree-jstree li > .jstree-icon {
    margin-right: 0 !important;
}

/* Hide JSTree loading animation */
#ktree-jstree .jstree-loading {
    background: transparent;
}

/* Fix JSTree inline display */
#ktree-jstree .jstree-icon {
    display: inline-block;
    vertical-align: top;
}

#ktree-jstree > ul > li {
    white-space: nowrap;
}

#ktree-jstree .jstree-wholerow-ul .jstree-leaf > .jstree-ocl {
    background: transparent;
    width: 24px;
    height: 32px;
}

#ktree-jstree .jstree-default .jstree-icon {
    background-image: none;
}

#ktree-jstree .jstree-default > .jstree-container-ul > .jstree-node {
    margin-left: 0;
    margin-right: 0;
}

/* JSTree container adjustments */
#ktree-jstree ul, #ktree-jstree li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ktree-menu::-webkit-scrollbar {
    width: 6px;
}

.ktree-menu::-webkit-scrollbar-track {
    background: transparent;
}

.ktree-menu::-webkit-scrollbar-thumb {
    background: var(--ktree-border);
    border-radius: 2px;
}

/* Content Area */
.ktree-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--ktree-bg);
    transition: width var(--ktree-transition-normal);
    min-height: 100vh;
    overflow: visible;
    width: 60%;
}

/* Container with outline panel - 20% / 60% / 20% layout */
.ktree-container.with-outline .ktree-content {
    width: 60%;
}

.ktree-container.with-outline .ktree-outline-panel {
    display: flex;
}

.ktree-container:not(.with-outline) .ktree-outline-panel {
    display: none;
}

.ktree-container:not(.with-outline) .ktree-content {
    width: 80%; /* Take full remaining space when outline is hidden (100% - 20% sidebar) */
}

/* Content Header */
.ktree-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ktree-space-sm) var(--ktree-space-lg);
    border-bottom: var(--ktree-border-width) solid var(--ktree-border);
    background: #f3f4f6 !important;
    min-height: 49px;
    /* Typography - inherits 1em from .ktree-container for breadcrumb EM calculations */
}


.ktree-toolbar {
    display: flex;
    gap: var(--ktree-space-sm);
    /* Typography - UI elements use REM for consistent sizing */
    font-size: var(--ktree-font-size-base);
}

.ktree-btn {
    display: flex;
    align-items: center;
    gap: var(--ktree-space-xs);
    height: 32px;
    padding: 0 var(--ktree-space-sm);
    border: var(--ktree-border-width) solid var(--ktree-border);
    border-radius: var(--ktree-radius-sm);
    background: white;
    color: var(--ktree-text-muted);
    font-size: var(--ktree-font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: var(--ktree-transition);
    text-decoration: none;
}

.ktree-btn:hover {
    border-color: var(--ktree-primary);
    color: var(--ktree-primary);
}

.ktree-btn.active,
.ktree-outline-toggle.active {
    background: var(--ktree-primary) !important;
    color: white !important;
    border-color: var(--ktree-primary) !important;
}

/* Ensure inactive button has normal styling */
.ktree-outline-toggle:not(.active) {
    background: var(--ktree-bg) !important;
    color: var(--ktree-text-muted) !important;
    border-color: var(--ktree-border) !important;
}

.ktree-btn i {
    width: 16px;
    height: 16px;
}

.ktree-btn i svg {
    stroke-width: 1.0 !important;
}

/* ==========================================================================
   PDF EXPORT DROPDOWN
   ========================================================================== */

.ktree-export-group {
    position: relative;
    display: inline-block;
}

.ktree-export-btn {
    position: relative;
    padding-right: var(--ktree-space-lg) !important; /* Make room for chevron */
}

/* Direct export mode - no chevron, no extra padding */
.ktree-export-group .ktree-btn.ktree-export-btn.ktree-direct-export,
.ktree-btn.ktree-export-btn.ktree-direct-export,
.ktree-btn.ktree-standalone-export-btn.ktree-direct-export {
    padding-right: var(--ktree-space-sm) !important; /* Minimal padding, no chevron space (8px) */
}

/* Ensure it overrides everything */
.ktree-export-btn.ktree-direct-export {
    padding-right: var(--ktree-space-sm) !important; /* Force minimal padding (8px) */
}

.ktree-dropdown-arrow {
    position: absolute;
    right: var(--ktree-space-xs);
    top: 50%;
    transform: translateY(-50%);
    width: 12px !important;
    height: 12px !important;
    transition: transform var(--ktree-transition-fast);
    opacity: 0.7;
}

.ktree-export-btn.active .ktree-dropdown-arrow {
    transform: translateY(-50%) rotate(180deg);
}

/* Hide entire toolbar initially to prevent flicker until JS is ready */
.ktree-toolbar {
    visibility: hidden !important;
    opacity: 0 !important;
}

.ktree-toolbar.js-ready {
    visibility: visible !important;
    opacity: 1 !important;
    transition: opacity 0.2s ease-in-out;
}

/* Also hide export button initially (double protection) */
.ktree-export-group {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.ktree-export-group.js-ready {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.ktree-export-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 220px;
    background: var(--ktree-white);
    border: var(--ktree-border-width) solid var(--ktree-border);
    border-radius: var(--ktree-radius);
    box-shadow: var(--ktree-shadow-lg);
    z-index: var(--ktree-z-dropdown);
    
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--ktree-transition-fast);
    
    /* Prevent text selection */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
}

.ktree-export-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ktree-export-option {
    display: flex;
    align-items: center;
    gap: var(--ktree-space-sm);
    padding: var(--ktree-space-sm) var(--ktree-space-md);
    cursor: pointer;
    font-size: var(--ktree-font-size-sm);
    color: var(--ktree-text);
    transition: all var(--ktree-transition-fast);
}

.ktree-export-option:hover {
    background: var(--ktree-primary-light);
    color: var(--ktree-primary);
}

.ktree-export-option:first-child {
    border-radius: var(--ktree-radius) var(--ktree-radius) 0 0;
}

.ktree-export-option:last-child {
    border-radius: 0 0 var(--ktree-radius) var(--ktree-radius);
}

.ktree-export-option i {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
}

.ktree-export-option span {
    font-weight: 500;
}

.ktree-generate-pdf-btn {
    width: calc(100% - 2 * var(--ktree-space-md));
    margin: var(--ktree-space-xs) var(--ktree-space-md);
    margin-bottom: calc(var(--ktree-space-xs) + 2px);
    background: var(--ktree-primary) !important;
    color: white !important;
    border: none;
    padding: var(--ktree-space-sm) var(--ktree-space-md);
    border-radius: var(--ktree-border-radius);
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ktree-export-dropdown .ktree-generate-pdf-btn:hover,
.ktree-export-dropdown .ktree-generate-pdf-btn:focus,
.ktree-export-dropdown .ktree-generate-pdf-btn:active,
.ktree-export-dropdown .ktree-btn.ktree-generate-pdf-btn:hover,
.ktree-export-dropdown .ktree-btn.ktree-generate-pdf-btn:focus,
.ktree-export-dropdown .ktree-btn.ktree-generate-pdf-btn:active {
    background: var(--ktree-primary) !important;
    color: white !important;
}


.ktree-export-separator {
    margin: var(--ktree-space-xs) 0;
    border: none;
    border-top: 1px solid var(--ktree-border);
}

/* Balanced PDF export dropdown */
.ktree-export-section {
    padding: var(--ktree-space-sm) 0;
}

.ktree-section-title {
    padding: 0 var(--ktree-space-md) var(--ktree-space-xs);
    font-size: var(--ktree-font-size-xs);
    font-weight: 600;
    color: var(--ktree-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ktree-export-section:first-child .ktree-section-title {
    padding-top: calc(var(--ktree-space-xs) + 2px);
    margin-bottom: 0.15rem;
}

.ktree-export-option {
    display: flex;
    align-items: center;
    gap: var(--ktree-space-sm);
    padding: 10px var(--ktree-space-md);
    cursor: pointer;
    font-size: var(--ktree-font-size-sm);
    color: var(--ktree-text);
    transition: all var(--ktree-transition-fast);
}

.ktree-export-option:hover {
    background: var(--ktree-primary-light);
    color: var(--ktree-primary);
}

.ktree-export-option i {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
}

.ktree-export-option span {
    font-weight: 500;
}

.ktree-generate-pdf-btn {
    width: calc(100% - 2 * var(--ktree-space-md));
    margin: var(--ktree-space-xs) var(--ktree-space-md);
    margin-bottom: calc(var(--ktree-space-xs) + 2px);
    background: var(--ktree-primary) !important;
    color: white !important;
    border: none;
    padding: var(--ktree-space-sm) var(--ktree-space-md);
    border-radius: var(--ktree-border-radius);
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ktree-export-dropdown .ktree-generate-pdf-btn:hover,
.ktree-export-dropdown .ktree-generate-pdf-btn:focus,
.ktree-export-dropdown .ktree-generate-pdf-btn:active,
.ktree-export-dropdown .ktree-btn.ktree-generate-pdf-btn:hover,
.ktree-export-dropdown .ktree-btn.ktree-generate-pdf-btn:focus,
.ktree-export-dropdown .ktree-btn.ktree-generate-pdf-btn:active {
    background: var(--ktree-primary) !important;
    color: white !important;
}


.ktree-export-divider {
    margin: var(--ktree-space-xs) 0;
    border: none;
    border-top: 1px solid var(--ktree-border);
}

.ktree-format-option {
    display: flex;
    align-items: center;
    gap: var(--ktree-space-sm);
    padding: 10px var(--ktree-space-md);
    cursor: pointer;
    transition: all var(--ktree-transition-fast);
}

.ktree-format-option:hover {
    background: var(--ktree-primary-light);
}

.ktree-format-option input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--ktree-primary);
}

.ktree-format-option i {
    width: 14px !important;
    height: 14px !important;
    color: var(--ktree-text-muted);
    transition: color var(--ktree-transition-fast);
}

.ktree-format-option:hover i {
    color: var(--ktree-primary);
}

.ktree-format-option span {
    font-size: var(--ktree-font-size-sm);
    font-weight: 500;
    color: var(--ktree-text);
}

/* Export progress indicator */
.ktree-export-progress {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--ktree-white);
    padding: var(--ktree-space-lg);
    border-radius: var(--ktree-radius);
    box-shadow: var(--ktree-shadow-lg);
    z-index: var(--ktree-z-modal);
    min-width: 300px;
    text-align: center;
}

.ktree-progress-bar {
    width: 100%;
    height: 8px;
    background: var(--ktree-border-light);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: var(--ktree-space-sm);
}

.ktree-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--ktree-primary), var(--ktree-primary-hover));
    width: 0%;
    transition: width 0.3s ease;
    border-radius: 4px;
}

.ktree-progress-text {
    font-size: var(--ktree-font-size-sm);
    color: var(--ktree-text-muted);
    font-weight: 500;
}

/* Export success/error states */
.ktree-export-success {
    background: var(--ktree-primary);
    color: white;
    padding: var(--ktree-space-sm) var(--ktree-space-md);
    border-radius: var(--ktree-radius);
    margin-top: var(--ktree-space-sm);
    font-size: var(--ktree-font-size-sm);
    transition: all var(--ktree-transition-speed) ease;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ktree-export-success:hover {
    opacity: 0.95;
    transform: translateY(-1px);
}

.ktree-export-error {
    background: var(--ktree-error);
    color: white;
    padding: var(--ktree-space-sm) var(--ktree-space-md);
    border-radius: var(--ktree-radius);
    margin-top: var(--ktree-space-sm);
    font-size: var(--ktree-font-size-sm);
}

.ktree-export-actions {
    margin-top: var(--ktree-space-sm);
    font-size: var(--ktree-font-size-xs);
    color: var(--ktree-text-muted);
}

.ktree-export-actions ul {
    list-style: none;
    padding: 0;
    margin: var(--ktree-space-xs) 0 0 0;
    text-align: left;
}

.ktree-export-actions li {
    margin-bottom: var(--ktree-space-xs);
    padding-left: var(--ktree-space-md);
    position: relative;
}

.ktree-export-actions li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--ktree-primary);
}

/* Override for print button */
.ktree-print-btn i {
    width: 10px !important;
    height: 10px !important;
    font-size: 10px !important;
    transform: scale(0.6) !important;
}

.ktree-print-btn {
    width: 32px;
    padding: 0;
    justify-content: center;
}


.ktree-print-btn:hover {
    background: #45598f;
    color: white;
    border-color: #45598f;
}

.ktree-print-btn:active {
    background: #45598f;
    color: white;
    border-color: #45598f;
    opacity: 0.9;
}

/* ==========================================================================
   OUTLINE PANEL
   ========================================================================== */

.ktree-outline-panel {
    /* Layout */
    width: 20%;
    min-width: 200px;
    height: 100vh;
    position: sticky;
    top: 100px; /* Fallback - will be overridden by JavaScript */
    top: var(--ktree-sticky-offset, 100px);
    z-index: var(--ktree-z-sticky);

    /* Visual */
    background: #f3f4f6 !important;
    border-left: var(--ktree-border-width) solid var(--ktree-gray-200);

    /* Layout structure */
    display: flex;
    flex-direction: column;

    /* Typography - default fallback, overridden by Admin CSS tree_text_size setting */
    font-size: var(--ktree-font-size-base);
}

.ktree-outline-header {
    /* Layout */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ktree-space-sm) var(--ktree-space-md);
    
    /* Visual */
    border-bottom: var(--ktree-border-width) solid var(--ktree-border);
    background: #f3f4f6 !important;
    min-height: 49px;
    height: auto;
}

.ktree-outline-title {
    /* Typography */
    font-size: 0.85rem !important;
    font-weight: 300;
    color: #1a1a1a;
    margin: 0;
    margin-bottom: 0 !important;
}

/* Override Fusion Typography for outline title */
.ktree-outline-title.fusion-responsive-typography-calculated {
    font-size: 0.85rem !important;
}

.ktree-outline-close {
    display: none !important;
}



.ktree-outline-content {
    /* Layout */
    flex: 1;
    overflow-y: auto;
    padding: var(--ktree-space-sm) var(--ktree-space-md);
    padding-left: 0 !important;

    /* Typography - inherits from .ktree-outline-panel (set by Admin CSS tree_text_size) */
}

.ktree-outline-empty {
    /* Layout */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    
    /* Typography */
    color: #1a1a1a;
    font-style: italic;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 300;
}

.ktree-outline-list {
    /* Reset */
    list-style: none;
    margin: 0;
    padding: 0.7rem 0 0 1rem !important;
}

.ktree-outline-item {
    /* Layout */
    margin-bottom: var(--ktree-space-xs);
}

.ktree-outline-link {
    /* Layout */
    display: block;
    padding: var(--ktree-space-xs) var(--ktree-space-sm);

    /* Visual */
    color: #1a1a1a;
    text-decoration: none;
    border-radius: var(--ktree-radius-sm);
    border-left: 1px solid transparent;
    
    /* Typography */
    font-size: 0.85rem;
    font-weight: 300;
    line-height: var(--ktree-line-height-normal);
    
    /* Interaction */
    cursor: pointer;
    transition: all var(--ktree-transition);
}

.ktree-outline-link:hover {
    background: var(--ktree-primary-light);
    color: #1a1a1a;
    border-left-color: var(--ktree-primary);
}

.ktree-outline-link.active {
    background: var(--ktree-primary-light);
    color: #1a1a1a;
    border-left-color: var(--ktree-primary);
    font-weight: 300;
}

/* Heading level styling */
.ktree-outline-link.level-1 {
    font-weight: 300;
    font-size: 0.85rem;
    margin-bottom: var(--ktree-space-xs);
}

.ktree-outline-link.level-2 {
    padding-left: var(--ktree-space-md);
    font-weight: 300;
    font-size: 0.85rem;
}

.ktree-outline-link.level-3 {
    padding-left: var(--ktree-space-lg);
    font-size: 0.85rem;
    font-weight: 300;
}

.ktree-outline-link.level-4,
.ktree-outline-link.level-5,
.ktree-outline-link.level-6 {
    padding-left: var(--ktree-space-xl);
    font-size: 0.85rem;
    color: #1a1a1a;
    font-weight: 300;
}

/* Scrollbar styling for outline content */
.ktree-outline-content::-webkit-scrollbar {
    width: 6px;
}

.ktree-outline-content::-webkit-scrollbar-track {
    background: transparent;
}

.ktree-outline-content::-webkit-scrollbar-thumb {
    background: var(--ktree-border);
    border-radius: 2px;
}


/* Mobile Toggle */
.ktree-mobile-toggle {
    display: none;
    position: fixed;
    top: var(--ktree-space-md);
    left: var(--ktree-space-md);
    z-index: 1000;
    width: 40px;
    height: 40px;
    background: var(--ktree-primary);
    color: white;
    border: none;
    border-radius: var(--ktree-radius);
    cursor: pointer;
    box-shadow: var(--ktree-shadow);
    transition: var(--ktree-transition);
}

.ktree-mobile-toggle:hover {
    background: var(--ktree-primary-hover);
}

.ktree-mobile-toggle i {
    width: 20px;
    height: 20px;
}

/* Content Body */
.ktree-content-area {
    flex: 1;
    padding: 1.0rem 5px var(--ktree-space-xl) 5px;
    overflow: visible;
    background: var(--ktree-bg);
    position: relative;
    transition: opacity var(--ktree-animation-content-fade);
    /* Inherits 1em from .ktree-container which uses theme root font-size */
}

/* Ensure all CSS custom properties are inherited in content area */
.ktree-content-area * {
    /* This will make sure theme/Avada CSS variables are available */
}

/* Override Avada/Fusion Theme width restrictions for direct children in content area */
/* These theme classes limit the width to 1400px and center content with large margins */
/* We need full width for K-Tree content display */
.ktree-content-area > div.nonhundred-percent-fullwidth,
.ktree-content-area > div.non-hundred-percent-height-scrolling {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Also override the inner fusion-builder-row max-width restriction */
/* Using more specific selectors to override inline styles */
.ktree-content-area > div.fusion-fullwidth.nonhundred-percent-fullwidth > .fusion-builder-row.fusion-row,
.ktree-content-area > div.fusion-fullwidth.non-hundred-percent-height-scrolling > .fusion-builder-row.fusion-row,
.ktree-content-area .fusion-builder-row {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Override Avada flex container to allow full width */
.ktree-content-area > div.fusion-flex-container {
    max-width: none !important;
    width: 100% !important;
}

/* ==========================================================================
   TREE-VIEW IMAGE-FIT — cap [fusion_imageframe] images to viewport height so
   the user sees the full image without scrolling on smaller laptop screens.

   Avada renders [fusion_imageframe] without any vh-based height cap; on a
   typical 1366×768 laptop a 1600×900 image overflows the viewport vertically.
   We cap the image height by (100vh − chrome offset) and let width follow
   automatically so aspect-ratio stays intact.

   The offset accounts for: Avada sticky header (~75 px shrunk), post title
   and breadcrumbs (~30–50 px), padding, and a small visual buffer. When the
   TOC top-bar mode is active (`body.post-chapters-top`), an extra ~80 px
   come on top so the cap pulls back accordingly.

   Mobile (≤768 px) keeps Avada's natural rendering — the typical mobile
   reading flow includes scrolling, and the K-Tree sidebar is collapsed
   anyway, so a vh-cap there would only shrink images unnecessarily.

   Tunability: change `--ktree-image-fit-offset` to fine-tune for header
   variants (sticky vs. static, shrunk vs. default).
   ========================================================================== */

.ktree-content-area {
    --ktree-image-fit-offset: 245px;
}

body.post-chapters-top .ktree-content-area {
    --ktree-image-fit-offset: 325px;
}

@media (min-width: 769px) {
    .ktree-content-area .fusion-imageframe img {
        max-height: calc(100vh - var(--ktree-image-fit-offset));
        max-width: 100%;
        width: auto;
        height: auto;
    }
    /* Anchor wrapper around the img (used for iLightbox click target) must
       be inline-block and respect the max-width, otherwise the inner img
       would be capped but the anchor would still take full content width. */
    .ktree-content-area .fusion-imageframe a.fusion-image-wrapper,
    .ktree-content-area .fusion-imageframe a {
        display: inline-block;
        max-width: 100%;
    }
}

/* Normal padding for chapter dummy pages */
.ktree-content-area:has(.ktree-clean-toc),
.ktree-content-area:has(.ktree-auto-toc-placeholder) {
    padding: var(--ktree-space-lg) var(--ktree-space-lg) var(--ktree-space-xl) var(--ktree-space-lg);
}

/* Remove empty state styles - no longer needed */

/* Content Area Loading */
.ktree-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.ktree-loading.show {
    opacity: 1;
}

.ktree-loading-icon {
    width: 60px;
    height: 60px;
    border: 8px solid #e0e0e0;
    border-top: 8px solid #45598f;
    border-right: 8px solid #45598f;
    border-bottom: 8px solid #45598f;
    border-radius: 50%;
    animation: ktree-spin 0.8s linear infinite;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

@keyframes ktree-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Alternative inline loading for smaller contexts */
.ktree-loading-inline {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 2px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.ktree-loading-inline .ktree-loading-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid #e0e0e0;
    border-top: 3px solid #45598f;
    border-radius: 50%;
    animation: ktree-spin 0.8s linear infinite;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .ktree-loading-inline {
        width: 50px;
        height: 50px;
    }
    
    .ktree-loading-inline .ktree-loading-spinner {
        width: 20px;
        height: 20px;
        border-width: 2px;
    }
}

/* Error State */
.ktree-error {
    display: flex;
    align-items: center;
    gap: var(--ktree-space-sm);
    padding: var(--ktree-space-md);
    margin: var(--ktree-space-md);
    background: #f8d7da;
    color: #721c24;
    border: var(--ktree-border-width) solid #f5c6cb;
    border-radius: var(--ktree-radius);
    font-size: var(--ktree-font-size-sm);
}

.ktree-error-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Clean TOC styling with improved hierarchical spacing */
.ktree-clean-toc {
    list-style-type: disc;
    margin: var(--ktree-space-md) 0;
    padding-left: var(--ktree-space-xl);
    font-size: var(--ktree-font-size-lg);
}

/* Level 2 TOC styling - increased top margin for better separation */
.ktree-clean-toc ul {
    list-style-type: circle;
    margin: var(--ktree-space-md) 0 var(--ktree-space-sm) 0; /* More space above (16px), normal below (8px) */
    padding-left: var(--ktree-space-xl);
    font-size: var(--ktree-font-size-base);
}

/* Level 3 TOC styling */
.ktree-clean-toc ul ul {
    list-style-type: square;
    margin: var(--ktree-space-sm) 0; /* Standard spacing for deeper levels */
    font-size: var(--ktree-font-size-base);
}

/* Level 4+ TOC styling */
.ktree-clean-toc ul ul ul {
    list-style-type: disc;
    margin: var(--ktree-space-sm) 0;
    font-size: var(--ktree-font-size-sm);
}

/* TOC list item styling with improved spacing */
.ktree-clean-toc li {
    margin-bottom: var(--ktree-space-sm);
    line-height: var(--ktree-line-height-relaxed);
}

/* First-level items get extra space below to separate from sub-levels */
.ktree-clean-toc > li {
    margin-bottom: var(--ktree-space-md); /* 16px instead of 8px */
}

/* Sub-level items keep standard spacing */
.ktree-clean-toc ul li {
    margin-bottom: var(--ktree-space-sm); /* 8px */
}

.ktree-clean-toc li::marker {
    font-size: 1.2em;
}

.ktree-toc-link {
    color: var(--ktree-primary);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--ktree-transition-fast);
    font-weight: var(--ktree-font-weight-medium);
}

.ktree-toc-link:hover {
    color: var(--ktree-primary-hover);
    text-decoration: underline;
}

.ktree-no-content {
    color: var(--ktree-text-muted);
    font-style: italic;
    text-align: center;
    padding: var(--ktree-space-lg);
}

/* Content Typography - Only for plugin-specific elements */

/* Only the KTree-generated node title gets the special color */
/* IMPORTANT: This should ONLY affect auto-generated ktree titles, NOT real post titles */
.ktree-content-area h1.ktree-node-title {
    display: none; /* Hidden by default - only for auto-generated ktree titles */
    color: #2c385b;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 8px;
    margin-bottom: -21px !important;
    font-size: 1.7rem !important;
    font-weight: 600 !important;
}

/* Ensure regular post titles are NEVER affected by ktree-node-title styles */
.ktree-content-area h1:not(.ktree-node-title) {
    /* Preserve original post title styles - no overrides */
    display: inherit !important;
}

/* Show title only on chapter pages (with TOC) */
.ktree-content-area:has(.ktree-clean-toc) h1.ktree-node-title,
.ktree-content-area:has(.ktree-auto-toc-placeholder) h1.ktree-node-title {
    display: block !important; /* Show for chapter dummies */
    margin-bottom: 1rem !important;
}


/* Print Styles */
.ktree-print-view {
    display: none;
}

/* Container-based Responsive */
@container (max-width: 1200px) {
    .ktree-container {
        position: relative;
    }
    
    .ktree-sidebar {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 70%;
        max-width: 350px;
        z-index: 1001;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        box-shadow: var(--ktree-shadow);
        border-radius: 0 2px 2px 0;
    }
    
    .ktree-sidebar.ktree-open {
        transform: translateX(0);
    }
    
    .ktree-content {
        width: 100%;
    }
    
    .ktree-content-area {
        padding-top: 1.0rem;
    }
    
    .ktree-mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .ktree-sidebar-toggle {
        display: flex !important;
    }
    
    /* Hide outline panel on mobile */
    .ktree-outline-panel {
        display: none !important;
    }
    
    .ktree-container.with-outline .ktree-content {
        width: 100% !important;
    }
    
    .ktree-container.with-outline {
        padding-right: 0 !important; /* Remove reserved space for outline panel */
    }
    
    .ktree-outline-toggle {
        display: none !important; /* Hide toggle button */
    }
    
    .ktree-overlay {
        display: none !important;
    }
}

@container (max-width: 480px) {
    .ktree-sidebar {
        width: 280px;
        min-width: 280px;
    }
    
    .ktree-content-area {
        padding: var(--ktree-space-md);
        padding-top: 1.0rem;
    }
    
    .ktree-search {
        padding: var(--ktree-space-sm);
    }
}

/* Hide overlay completely */
.ktree-overlay {
    display: none !important;
}

/* ==========================================================================
   CONTEXT MENU
   ========================================================================== */

.ktree-context-menu {
    position: fixed;
    z-index: var(--ktree-z-modal);
    background: var(--ktree-white);
    border: var(--ktree-border-width) solid var(--ktree-border);
    border-radius: var(--ktree-radius);
    box-shadow: var(--ktree-shadow-lg);
    padding: var(--ktree-space-xs);
    min-width: 150px;
    display: none;
    opacity: 0;
    transform: scale(0.95);
    transition: all var(--ktree-transition-fast);
    pointer-events: none;
}

.ktree-context-menu.show {
    display: block;
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.ktree-context-menu-item {
    display: flex;
    align-items: center;
    gap: var(--ktree-space-xs);
    padding: var(--ktree-space-xs) var(--ktree-space-sm);
    border-radius: var(--ktree-radius-sm);
    cursor: pointer;
    font-size: var(--ktree-font-size-sm);
    color: var(--ktree-text);
    transition: all var(--ktree-transition-fast);
    border: var(--ktree-border-width) solid transparent;
}

.ktree-context-menu-item:hover {
    background: var(--ktree-primary-light);
    color: var(--ktree-primary);
    border-color: var(--ktree-primary);
}

.ktree-context-menu-item i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.ktree-context-menu-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ktree-context-menu-item.disabled:hover {
    background: transparent;
    color: var(--ktree-text);
    border-color: transparent;
}

.ktree-context-menu-separator {
    height: 1px;
    background: var(--ktree-border);
    margin: var(--ktree-space-xs) 0;
}


/* Print Media */
/* IMPORTANT: Exclude PDF export from print media rules to avoid conflicts with Puppeteer */
@media print and (not (prefers-color-scheme: pdf-export)) {
    /* Only apply print rules for regular browser printing, NOT PDF export */
    body:not(.ktree-pdf-export) * {
        visibility: hidden;
    }

    body:not(.ktree-pdf-export) .ktree-print-view,
    body:not(.ktree-pdf-export) .ktree-print-view * {
        visibility: visible;
    }
    
    .ktree-print-view {
        display: block !important;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        padding: 20pt;
        font-family: 'Times New Roman', serif;
        font-size: 12pt;
        line-height: 1.4;
        color: #000;
        background: white;
    }
    
    /* Title Page */
    .ktree-print-title-page {
        page-break-after: always;
        text-align: center;
        padding-top: 200pt;
    }
    
    .ktree-print-main-title {
        font-size: 36pt;
        font-weight: bold;
        margin-bottom: 20pt;
    }
    
    .ktree-print-subtitle {
        font-size: 18pt;
        color: #666;
        margin-bottom: 30pt;
        font-style: italic;
    }
    
    .ktree-print-date {
        font-size: 14pt;
        color: #666;
    }
    
    /* Table of Contents */
    .ktree-print-toc-page {
        page-break-after: always;
    }
    
    .ktree-print-toc-title {
        font-size: 24pt;
        font-weight: bold;
        margin-bottom: 30pt;
        text-align: center;
    }
    
    .ktree-print-toc-item {
        display: flex;
        align-items: baseline;
        margin-bottom: 12pt;
        font-size: 12pt;
    }
    
    .ktree-print-toc-number {
        margin-right: 10pt;
        min-width: 30pt;
    }
    
    .ktree-print-toc-text {
        flex: 0 0 auto;
    }
    
    .ktree-print-toc-dots {
        flex: 1;
        border-bottom: 1pt dotted #666;
        margin: 0 5pt;
        height: 1em;
    }
    
    .ktree-print-toc-page-number {
        flex: 0 0 auto;
        text-align: right;
        min-width: 20pt;
    }
    
    /* Content Pages */
    .ktree-print-page {
        page-break-before: always;
        position: relative;
        min-height: 100vh;
    }

    /* Neutralized content pages (no automatic pagebreaks) */
    .ktree-print-page-disabled {
        page-break-before: auto !important;
        break-before: auto !important;
        position: relative;
        /* Removed min-height to allow natural content flow */
    }
    
    .ktree-print-page-header {
        margin-bottom: 20pt;
        border-bottom: 1pt solid #ddd;
        padding-bottom: 10pt;
    }
    
    .ktree-print-page-header h2 {
        font-size: 20pt;
        margin: 0;
    }
    
    .ktree-print-page-content {
        font-size: 11pt;
        line-height: 1.6;
    }
    
    .ktree-print-page-footer {
        position: absolute;
        bottom: 20pt;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 10pt;
        color: #666;
    }
    
    /* Content styling within pages */
    .ktree-print-page-content h1,
    .ktree-print-page-content h2,
    .ktree-print-page-content h3 {
        margin-top: 15pt;
        margin-bottom: 10pt;
    }
    
    .ktree-print-page-content p {
        margin-bottom: 10pt;
    }
    
    .ktree-print-page-content ul,
    .ktree-print-page-content ol {
        margin-bottom: 10pt;
        padding-left: 20pt;
    }
    
    .ktree-print-page-content img {
        max-width: 100%;
        height: auto;
    }
    
    /* User-controlled page break classes */
    .page-break-before,
    .pagebreak-before {
        page-break-before: always !important;
        break-before: page !important;
    }
    
    .page-break-after,
    .pagebreak-after {
        page-break-after: always !important;
        break-after: page !important;
    }
    
    .page-break-inside-avoid,
    .pagebreak-avoid {
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    /* Automatic Node-to-Node Pagebreaks */
    .ktree-node-pagebreak {
        page-break-before: always !important;
        page-break-after: avoid !important;
        break-before: page !important;
        break-after: avoid !important;
        display: block !important;
        height: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        background: none !important;
        overflow: hidden !important;
        visibility: hidden !important;
    }

    /* Automatic Node-to-Node Pagebreaks when applied to ktree-node elements */
    .ktree-node.ktree-node-pagebreak {
        page-break-before: always !important;
        break-before: page !important;
    }
}

/* ==========================================================================
   POST CHAPTERS SIDEBAR FOR REGULAR POSTS - MATCHES KTREE OUTLINE PANEL
   ========================================================================== */

.post-chapters-sidebar {
    /* Layout - fixed width and height for scrolling */
    width: 300px;
    position: sticky;
    top: 105px; /* Aligned with PDF export button */
    z-index: 100;
    align-self: flex-start;
    height: auto;
    max-height: calc(100vh - 150px); /* Viewport height minus offset */
    overflow-y: auto; /* Sidebar itself scrolls */
    overflow-x: hidden;
    
    /* Visual - minimal design */
    background: #f3f4f6;
    border: 1px solid #E5E7EB;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    
    /* Minimal spacing */
    padding: 12px;
    margin-left: 12px; /* Reduced from 20px for tighter spacing */
    margin-right: 0; /* No margin on right for right-aligned sidebar */
    margin-bottom: 50px;
    
    /* Typography - 0.85rem for more compact appearance */
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.4;
    color: #374151;
    
    /* Hide by default - will be shown by JavaScript */
    opacity: 0;
    visibility: hidden;
    
    /* Minimal smooth transitions */
    transition: all 0.2s ease-out;
}

.post-chapters-sidebar.visible {
    opacity: 1;
    visibility: visible;
}

/* Toggle button - minimal design */
.post-chapters-toggle {
    position: absolute;
    bottom: 8px; /* Moved to bottom instead of top */
    right: 8px;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: 1px solid #d1d5db;
    border-radius: 2px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.post-chapters-toggle:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
}

.post-chapters-toggle .toggle-icon {
    font-size: 14px;
    color: #6b7280;
    transition: transform 0.15s ease-out;
    line-height: 1;
    display: inline-block;
}

/* Collapsed state - slide out to the right */
.post-chapters-sidebar.collapsed {
    width: 40px;
    padding: 0;
    margin-right: -260px; /* Slide most of it out */
    overflow: visible; /* Changed from hidden to visible so button stays visible */
    background: transparent;
    border: none;
}

.post-chapters-sidebar.collapsed .post-chapters-content {
    opacity: 0;
    visibility: hidden;
}

.post-chapters-sidebar.collapsed .post-chapters-toggle {
    background: #f3f4f6;
    border: 1px solid #E5E7EB;
}

.post-chapters-sidebar.collapsed .toggle-icon {
    transform: rotate(180deg);
}

/* Right sidebar - Button position TOP-RIGHT in collapsed state.
   top: 6px (not 8) so the 24px toggle button's vertical center aligns with the
   36px PDF export button's vertical center when both are sticky at top: 105px. */
.post-chapters-sidebar.post-chapters-right.collapsed .post-chapters-toggle {
    right: 8px;
    left: auto;
    top: 4px;
    bottom: auto; /* Reset bottom positioning */
}

/* Content area */
.post-chapters-content {
    /* Layout - no height restrictions, no scrolling */
    overflow: visible;
    padding: 0;
    padding-bottom: 40px; /* Space for toggle button at bottom (24px height + 8px bottom + 8px margin) */
    max-height: none; /* No limit */

    /* Typography - inherit from parent (1.0em) */
    font-size: inherit;
    transition: opacity 0.15s ease-out;
}

/* LEFT SIDEBAR VARIANT - Mirrored styles for left-side positioning */
.post-chapters-sidebar.post-chapters-left {
    /* Left positioning - margin on right for spacing from content */
    margin-left: 0 !important; /* No margin on left side */
    margin-right: 12px; /* Reduced from 20px for tighter spacing */
}

/* Left variant - Toggle button RIGHT-aligned when expanded (close to content) */
.post-chapters-sidebar.post-chapters-left .post-chapters-toggle {
    left: auto; /* Reset left positioning */
    right: 8px; /* Position on right side of left sidebar when expanded */
    /* bottom is already set in parent rule */
}

/* Left variant - Collapsed state slides out to the left */
.post-chapters-sidebar.post-chapters-left.collapsed {
    margin-right: 0; /* Reset right margin */
    margin-left: -260px; /* Slide most of it out to the left */
}

/* Left variant - Button position TOP-LEFT in collapsed state. top: 6px to keep
   the 24px toggle button's vertical center aligned with the PDF export button. */
.post-chapters-sidebar.post-chapters-left.collapsed .post-chapters-toggle {
    left: 8px; /* Switch to left when collapsed */
    right: auto; /* Reset right positioning */
    top: 4px;
    bottom: auto; /* Reset bottom positioning */
}

/* Left variant - Toggle icon points left when expanded, right when collapsed */
.post-chapters-sidebar.post-chapters-left .toggle-icon {
    transform: rotate(180deg); /* Flip to point left */
}

.post-chapters-sidebar.post-chapters-left.collapsed .toggle-icon {
    transform: rotate(0deg); /* Point right when collapsed (reset) */
}

/* ==========================================================================
   TOP BAR VARIANT - Horizontal sticky bar for long articles with few headings
   ========================================================================== */

.post-chapters-topbar {
    /* Layout - full width horizontal bar */
    width: 100.6%; /* Slight overwidth to compensate for left shift */
    position: sticky;
    top: 8vh; /* Offset for site header - responsive viewport-based */
    z-index: 200; /* Higher than sidebar to stay on top */

    /* Visual - minimal design matching sidebar */
    background: #f3f4f6;
    border-bottom: 1px solid #E5E7EB;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

    /* Spacing - extend left to align first item with content */
    padding: 12px 20px;
    margin-bottom: 20px;
    margin-left: -24px; /* Extend left to align first item with content text */

    /* Typography */
    font-family: inherit;
    font-size: 0.85rem;
    line-height: 1.4;
    color: #374151;

    /* Hide by default - will be shown by JavaScript */
    opacity: 0;
    visibility: hidden;

    /* Only animate the fade-in, NOT layout properties — `transition: all`
       picks up sub-pixel position changes during the sticky transition and
       causes a visible jump. Limit to opacity + visibility so sticky engages
       cleanly. */
    transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
}

.post-chapters-topbar.visible {
    opacity: 1;
    visibility: visible;
}

/* Top bar navigation - horizontal layout */
.post-chapters-topbar .post-chapters-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
}

/* Top bar list - horizontal inline layout */
.post-chapters-topbar .post-chapters-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 20px; /* Space between items */
}

/* Top bar list items - inline */
.post-chapters-topbar .post-chapters-list > li {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

/* Top bar links - horizontal styling with underline for active state */
.post-chapters-topbar .post-chapters-link {
    display: inline-block;
    padding: 4px 0;
    color: #374151;
    text-decoration: none;
    transition: color 0.15s ease;
    white-space: nowrap;
    border-left: none !important; /* Remove left border for top bar */
}

.post-chapters-topbar .post-chapters-link:hover {
    color: #1a1a1a;
    border-left: none !important; /* Remove left border on hover */
}

.post-chapters-topbar .post-chapters-link.active {
    color: #1a1a1a;
    font-weight: 500;
    border-left: none !important; /* Remove left border when active */
}

/* Border-bottom applied to span so it only covers the text */
.post-chapters-topbar .post-chapters-link-text {
    display: inline-block;
    padding-bottom: 2px; /* Small gap between text and underline */
    border-bottom: 1px solid transparent;
    transition: border-bottom-color 0.15s ease;
}

.post-chapters-topbar .post-chapters-link:hover .post-chapters-link-text {
    border-bottom-color: #45598f; /* Blue underline on hover */
}

.post-chapters-topbar .post-chapters-link.active .post-chapters-link-text {
    border-bottom-color: #45598f; /* Blue underline when active (scroll-spy) */
}

/* Responsive - stack vertically on small screens */
@media (max-width: 768px) {
    .post-chapters-topbar {
        width: 100.6%; /* Maintain overwidth compensation */
        padding: 10px 15px;
    }

    .post-chapters-topbar .post-chapters-nav {
        flex-direction: column;
        align-items: flex-start;
    }

    .post-chapters-topbar .post-chapters-list {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .post-chapters-topbar .post-chapters-list > li {
        width: 100%;
        padding: 4px 0;
    }

    .post-chapters-topbar .post-chapters-link {
        display: block;
        width: 100%;
    }
}


.post-chapters-header {
    /* Layout - exact match with ktree-outline-header */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ktree-space-sm) var(--ktree-space-md);
    
    /* Visual - exact match */
    border-bottom: var(--ktree-border-width) solid var(--ktree-border);
    background: #f3f4f6 !important;
    min-height: 49px;
}

.post-chapters-title {
    /* Typography - exact match with ktree-outline-title */
    font-size: 0.85rem !important;
    font-weight: 300;
    color: #1a1a1a;
    margin: 0;
    margin-bottom: 0 !important;
}

/* Override Fusion Typography for post chapters title */
.post-chapters-title.fusion-responsive-typography-calculated {
    font-size: 0.85rem !important;
}

/* Toggle button is now visible - removed display: none */

/* Duplicate .post-chapters-content rule removed - consolidated above */

.post-chapters-nav {
    margin: 0;
    padding: 0;
}

.post-chapters-list {
    /* Reset - minimal padding */
    list-style: none;
    margin: 0;
    padding: 0 !important;
}

.post-chapters-item {
    /* Layout - slightly increased margin for cleaner look */
    margin-bottom: 4px;
}

.post-chapters-link {
    /* Layout - slightly increased padding for better readability */
    display: block;
    padding: 6px 10px;
    margin-bottom: 0;

    /* Visual */
    color: #4B5563;
    text-decoration: none;
    border-radius: 2px;
    border-left: 1px solid transparent;
    
    /* Typography - inherit from parent (1.0em) */
    font-size: inherit;
    font-weight: 400;
    line-height: 1.3;
    
    /* Interaction */
    cursor: pointer;
    transition: all 0.15s ease;
}

.post-chapters-link:hover {
    border-left-color: #45598f;
    color: #1F2937;
    text-decoration: none;
}

.post-chapters-link.active {
    background: transparent;
    color: #1F2937;
    border-left-color: #45598f;
    font-weight: 600;
    padding-left: 10px;
}

/* Heading hierarchy - minimal indentation */
/* H1 - Top level */
.post-chapters-item.level-1 .post-chapters-link {
    font-weight: 500;
    padding-left: 10px;
}

/* H2 - Main sections */
.post-chapters-item.level-2 .post-chapters-link {
    font-weight: 400;
    padding-left: 18px;
}

/* H3 - Subsections */
.post-chapters-item.level-3 .post-chapters-link {
    padding-left: 28px;
    font-weight: 400;
    color: #6B7280;
}

.post-chapters-item.level-3 .post-chapters-link:hover {
    color: #374151;
}

.post-chapters-item.level-3 .post-chapters-link.active {
    color: #1F2937;
    padding-left: 28px;
}

/* H4 and deeper - minimal further indentation */
.post-chapters-item.level-4 .post-chapters-link,
.post-chapters-item.level-5 .post-chapters-link,
.post-chapters-item.level-6 .post-chapters-link {
    padding-left: 38px;
    color: #9CA3AF;
}

.post-chapters-item.level-4 .post-chapters-link.active,
.post-chapters-item.level-5 .post-chapters-link.active,
.post-chapters-item.level-6 .post-chapters-link.active {
    padding-left: 38px;
    color: #4B5563;
}

/* Custom scrollbar styling */
.post-chapters-sidebar::-webkit-scrollbar {
    width: 6px;
}

.post-chapters-sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.post-chapters-sidebar::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 3px;
}

.post-chapters-sidebar::-webkit-scrollbar-thumb:hover {
    background: #d1d5db;
}

/* Layout integration - new approach with content wrapper */
.post-content-with-chapters {
    display: flex !important;
    gap: var(--ktree-space-lg);
    align-items: flex-start;
    width: 100%;
    transition: gap 0.2s ease-out;
}

/* Top bar variant - vertical stacking instead of horizontal flex */
body.post-chapters-top .post-content-with-chapters {
    display: block !important;
    gap: 0;
    /* Allow sticky positioning for children */
    overflow: visible !important;
    position: relative;
}

body.post-chapters-top .post-content-main {
    width: 100%;
    max-width: 100%;
}

body.post-chapters-top .post-chapters-topbar {
    /* Ensure sticky works properly */
    position: -webkit-sticky;
    position: sticky;
    top: 107px; /* Fallback - will be overridden by JavaScript */
    z-index: 200;
}

.post-content-main {
    flex: 1;
    min-width: 0; /* Prevent flex item overflow */
    transition: max-width 0.2s ease-out;
}

/* When sidebar is collapsed, content expands */
.has-collapsed-sidebar .post-content-main {
    max-width: 100%;
}

/* Collapsed sidebar adjustments */
.post-content-with-chapters.sidebar-collapsed {
    gap: var(--ktree-space-sm);
}

/* Remove body-level flexbox since we're using content-level wrapper */
.has-post-chapters {
    /* No longer needed - keeping for backwards compatibility */
}

/* Responsive Design */
/* Mobile - as collapsible panel */
/* Tablets and small laptops - responsive TOC layout */
@media (max-width: 1023px) {
    .post-chapters-sidebar {
        position: static !important;
        width: 100% !important;
        max-height: none;
        margin-bottom: 30px;
        order: -1; /* Show before content */
    }

    .post-content-with-chapters {
        flex-direction: column !important;
    }

    .post-content-main {
        width: 100% !important;
    }

    /* Make it collapsible on mobile */
    .post-chapters-sidebar .post-chapters-content {
        max-height: 300px;
        overflow-y: auto;
    }

    /* Add mobile-specific styling */
    .post-chapters-sidebar {
        background: #FFFFFF;
        border: 1px solid #E5E7EB;
        box-shadow: none;
    }
}

/* Smartphones - hide TOC completely on very small screens */
@media (max-width: 768px) {
    /* Hide all Post Chapters variants (sidebar left, sidebar right, topbar) */
    .post-chapters-sidebar,
    .post-chapters-topbar {
        display: none !important;
    }

    /* Reset content layout when TOC is hidden */
    .post-content-with-chapters {
        display: block !important;
        gap: 0 !important;
    }

    .post-content-main {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Desktop - fixed sidebar */
@media (min-width: 1024px) {
    .post-chapters-sidebar {
        display: block !important;
    }

    .post-content-with-chapters {
        display: flex !important;
        gap: 30px;
    }

    /* Reserve 290px for the sidebar variants only — the top-bar variant
       must use full width (handled by body.post-chapters-top rules above). */
    .has-post-chapters:not(.post-chapters-top) .post-content-main {
        flex: 1 !important;
        max-width: calc(100% - 290px) !important;
        order: 0 !important; /* Explicit order for content */
    }

    /* When the sidebar is collapsed, the content reclaims the full width
       that would otherwise be reserved for the open sidebar. Specificity
       must beat .has-post-chapters:not(.post-chapters-top) .post-content-main
       above (3 classes, !important) — we add :not(.post-chapters-top) and
       .has-collapsed-sidebar to reach 4 classes + 1 element.

       The html-prefixed selector is for the inline-script-in-<head> fast path
       (sets html.has-collapsed-sidebar before first paint to avoid the FOUC
       on legacy users with localStorage but no cookie). */
    html.has-collapsed-sidebar body.has-post-chapters:not(.post-chapters-top) .post-content-main,
    body.has-post-chapters:not(.post-chapters-top).has-collapsed-sidebar .post-content-main {
        max-width: 100% !important;
    }

    /* Ensure right sidebar comes after content */
    .post-chapters-right {
        order: 1; /* After content (order: 0) */
    }

    /* Ensure left sidebar comes before content */
    .post-chapters-left {
        order: -1; /* Before content (order: 0) */
    }
}

/* Context protection - never show in ktree context or pages without chapters enabled */
body:not(.has-post-chapters) .post-chapters-sidebar,
.single-ktree_menu .post-chapters-sidebar,
.ktree-container .post-chapters-sidebar,
.ktree-container ~ .post-chapters-sidebar {
    display: none !important;
}

/* Theme compatibility - ensure flexbox works across different themes */
.has-post-chapters[class*="single-"] {
    max-width: none !important;
}

.has-post-chapters .site-main,
.has-post-chapters .main-content,
.has-post-chapters .content-wrap,
.has-post-chapters .primary {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Ensure smooth transitions */
.post-chapters-sidebar,
.post-chapters-link {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

@media print {
    .post-chapters-sidebar,
    .has-post-chapters {
        display: none !important;
    }
}

/* PDF Export specific styling for TOC */
.ktree-pdf-body .ktree-clean-toc,
body.ktree-pdf-export .ktree-clean-toc {
    /* Enhanced spacing for PDF export */
    margin: calc(var(--ktree-space-lg) * 1.2) 0;
    padding-left: calc(var(--ktree-space-xl) * 1.1);
}

/* PDF-specific Level 2 spacing - extra generous for professional look */
.ktree-pdf-body .ktree-clean-toc ul,
body.ktree-pdf-export .ktree-clean-toc ul {
    margin: calc(var(--ktree-space-lg) * 1.25) 0 var(--ktree-space-md) 0; /* More space above for PDF */
    padding-left: calc(var(--ktree-space-xl) * 1.1);
}

/* PDF-specific first-level item spacing */
.ktree-pdf-body .ktree-clean-toc > li,
body.ktree-pdf-export .ktree-clean-toc > li {
    margin-bottom: calc(var(--ktree-space-lg) * 1.1); /* 26px for professional separation */
}

/* PDF-specific sub-level item spacing */
.ktree-pdf-body .ktree-clean-toc ul li,
body.ktree-pdf-export .ktree-clean-toc ul li {
    margin-bottom: var(--ktree-space-md); /* 16px instead of 8px for PDF */
}

/* PDF-specific font and line height adjustments */
.ktree-pdf-body .ktree-clean-toc,
body.ktree-pdf-export .ktree-clean-toc {
    font-size: calc(var(--ktree-font-size-lg) * 1.1);
    line-height: 1.6; /* More generous line height for PDF */
}

/* PDF-specific bullet point styling */
.ktree-pdf-body .ktree-clean-toc li::marker,
body.ktree-pdf-export .ktree-clean-toc li::marker {
    font-size: 1.3em; /* Slightly larger bullets for PDF */
}

/* ==========================================================================
   ENHANCED ERROR HANDLING & USER FEEDBACK
   ========================================================================== */

/* Error Container */
.ktree-error {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: var(--ktree-space-6);
    background: #fafafa;
    border-radius: var(--ktree-radius-lg);
    border: 1px solid #e1e5e9;
    margin: var(--ktree-space-4) 0;
}

.ktree-error-content {
    text-align: center;
    max-width: 400px;
}

.ktree-error-icon {
    width: 48px !important;
    height: 48px !important;
    color: #f56565;
    margin-bottom: var(--ktree-space-4);
}

.ktree-error-title {
    font-size: var(--ktree-font-size-xl);
    font-weight: var(--ktree-font-weight-semibold);
    color: var(--ktree-gray-900);
    margin: 0 0 var(--ktree-space-2) 0;
}

.ktree-error-message {
    color: var(--ktree-text-muted);
    margin: 0 0 var(--ktree-space-4) 0;
    line-height: var(--ktree-line-height-relaxed);
}

/* Error Types */
.ktree-error-not-found .ktree-error-icon {
    color: #ed8936;
}

.ktree-error-access-denied .ktree-error-icon {
    color: #e53e3e;
}

.ktree-error-server-error .ktree-error-icon {
    color: #9f7aea;
}

/* Retry Button */
.ktree-retry-btn {
    background: var(--ktree-primary);
    color: white;
    border: none;
    padding: var(--ktree-space-2) var(--ktree-space-4);
    border-radius: var(--ktree-radius);
    font-weight: var(--ktree-font-weight-medium);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: var(--ktree-space-3);
}

.ktree-retry-btn:hover {
    background: var(--ktree-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Technical Details */
.ktree-error-details {
    margin-top: var(--ktree-space-3);
    text-align: left;
}

.ktree-error-details summary {
    cursor: pointer;
    font-weight: var(--ktree-font-weight-medium);
    color: var(--ktree-text-muted);
    margin-bottom: var(--ktree-space-2);
}

.ktree-error-details pre {
    background: #f7f7f7;
    border: 1px solid #e1e5e9;
    border-radius: var(--ktree-radius);
    padding: var(--ktree-space-3);
    font-size: var(--ktree-font-size-xs);
    color: var(--ktree-text);
    overflow-x: auto;
    margin: var(--ktree-space-2) 0 0 0;
}

/* Loading States */
.ktree-loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--ktree-space-2);
    padding: var(--ktree-space-4);
    color: var(--ktree-text-muted);
    font-style: italic;
}

.ktree-loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #e1e5e9;
    border-top: 2px solid var(--ktree-primary);
    border-radius: 50%;
    animation: ktree-spin 1s linear infinite;
}

@keyframes ktree-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Success Messages */
.ktree-success {
    background: #f0fff4;
    border: 1px solid #9ae6b4;
    color: #22543d;
    padding: var(--ktree-space-3) var(--ktree-space-4);
    border-radius: var(--ktree-radius);
    margin: var(--ktree-space-2) 0;
}

/* Warning Messages */
.ktree-warning {
    background: #fffbf0;
    border: 1px solid #f6e05e;
    color: #744210;
    padding: var(--ktree-space-3) var(--ktree-space-4);
    border-radius: var(--ktree-radius);
    margin: var(--ktree-space-2) 0;
}

/* Info Messages */
.ktree-info {
    background: #ebf8ff;
    border: 1px solid #90cdf4;
    color: #2a4365;
    padding: var(--ktree-space-3) var(--ktree-space-4);
    border-radius: var(--ktree-radius);
    margin: var(--ktree-space-2) 0;
}

/* ==========================================================================
   PAGEBREAK SYSTEM
   ========================================================================== */

/**
 * PDF Pagebreak Shortcode Styles
 *
 * The [pdf_pagebreak] shortcode creates invisible markers in frontend
 * that become active page breaks in PDF exports based on orientation.
 *
 * Frontend: Completely invisible to users
 * PDF: Transformed to CSS page-break-before rules
 */

/* Frontend: Hide all pagebreak markers completely */
.pdf-pagebreak {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    visibility: hidden !important;
}

/* PDF Context: Active pagebreaks (processed by PHP) */
.pdf-pagebreak-active {
    /* CSS3 page break properties */
    page-break-before: always !important;
    page-break-after: avoid !important;

    /* Modern CSS page break properties */
    break-before: page !important;
    break-after: avoid !important;

    /* Ensure no visual impact */
    display: block !important;
    height: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    overflow: hidden !important;
    visibility: hidden !important;

    /* Prevent any content interference */
    position: static !important;
    float: none !important;
    clear: both !important;
}

/* Enhanced controlled pagebreaks - hidden in frontend, active in PDF */
.pdf-pagebreak-controlled {
    /* Additional collision prevention rules */
    box-sizing: border-box !important;
    line-height: 0 !important;
    font-size: 0 !important;

    /* Frontend: completely invisible */
    display: none !important;
    visibility: hidden !important;
}

/* Prevent interference from legacy pagebreak classes in frontend */
.page-break-before,
.pagebreak-before,
.page-break-after,
.pagebreak-after {
    /* Frontend: hide legacy pagebreak elements */
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    overflow: hidden !important;
}

/* Debug mode: Show pagebreaks during development (only when WP_DEBUG=true) */
body.wp-debug .pdf-pagebreak {
    /* Show as thin line in debug mode */
    display: block !important;
    height: 1px !important;
    background: rgba(255, 0, 0, 0.3) !important;
    border-top: 1px dashed rgba(255, 0, 0, 0.5) !important;
    margin: 2px 0 !important;
    visibility: visible !important;
}

body.wp-debug .pdf-pagebreak:before {
    content: "PageBreak: " attr(data-orientation) !important;
    font-size: 10px !important;
    color: rgba(255, 0, 0, 0.7) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    padding: 2px 4px !important;
    border-radius: 2px !important;
    display: inline-block !important;
    margin-right: 8px !important;
    font-family: monospace !important;
}

/* Debug mode: Show controlled pagebreaks differently */
body.wp-debug .pdf-pagebreak-controlled {
    display: block !important;
    height: 2px !important;
    background: rgba(0, 255, 0, 0.4) !important;
    border-top: 2px solid rgba(0, 255, 0, 0.7) !important;
    margin: 3px 0 !important;
    visibility: visible !important;
}

body.wp-debug .pdf-pagebreak-controlled:before {
    content: "CONTROLLED PageBreak: " attr(data-pdf-pagebreak) !important;
    font-size: 10px !important;
    color: rgba(0, 128, 0, 0.8) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    display: inline-block !important;
    margin-right: 8px !important;
    font-family: monospace !important;
    font-weight: bold !important;
}

/* Hide sibling elements of pagebreaks - ULTRA AGGRESSIVE */
/* This hides elements like separators that are siblings of the pagebreak wrapper */
/* MUST override ALL Fusion Builder inline styles! */
.pdf-hide-sibling-content,
div.pdf-hide-sibling-content,
.fusion-separator.pdf-hide-sibling-content,
div.fusion-separator.pdf-hide-sibling-content,
.fusion-full-width-sep.pdf-hide-sibling-content,
div.fusion-full-width-sep.pdf-hide-sibling-content,
.fusion-text.pdf-hide-sibling-content,
div.fusion-text.pdf-hide-sibling-content,
.fusion-column-wrapper.pdf-hide-sibling-content,
div.fusion-column-wrapper.pdf-hide-sibling-content,
[class*="fusion"].pdf-hide-sibling-content {
    /* NUCLEAR OPTION: Complete annihilation from render tree */
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    max-height: 0 !important;
    max-width: 0 !important;
    min-height: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    opacity: 0 !important;

    /* Remove from page flow completely */
    position: absolute !important;
    left: -9999999px !important;
    top: -9999999px !important;

    /* Clip out of existence */
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(100%) !important;

    /* Prevent any rendering */
    content-visibility: hidden !important;
    pointer-events: none !important;

    /* Override flex/grid layouts */
    flex: 0 0 0 !important;
    grid-column: 0 !important;
    grid-row: 0 !important;

    /* Prevent border rendering */
    border-top-width: 0 !important;
    border-bottom-width: 0 !important;
    border-left-width: 0 !important;
    border-right-width: 0 !important;

    /* Kill all box model properties */
    box-sizing: border-box !important;
    line-height: 0 !important;
    font-size: 0 !important;
}

/* Hide ALL children and descendants */
.pdf-hide-sibling-content *,
.pdf-hide-sibling-content > *,
.pdf-hide-sibling-content > * > *,
.pdf-hide-sibling-content > * > * > *,
.pdf-hide-sibling-content > * > * > * > * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    border: none !important;
}

/* Print media: Ensure pagebreaks work in browser print */
@media print {
    .pdf-pagebreak-active {
        page-break-before: always !important;
        break-before: page !important;
    }
}
/* ========================================================================== */
/* AUTO-OPEN NODE HIGHLIGHT ANIMATION */
/* ========================================================================== */
/* Provides visual feedback when automatically opening a K-Tree node via URL parameter */

.ktree-highlight-node {
    animation: ktreeNodeHighlight 2s ease-out;
    position: relative;
}

@keyframes ktreeNodeHighlight {
    0% {
        background-color: rgba(74, 144, 226, 0.3);
        box-shadow: 0 0 0 0 rgba(74, 144, 226, 0.4);
    }
    50% {
        background-color: rgba(74, 144, 226, 0.2);
        box-shadow: 0 0 0 8px rgba(74, 144, 226, 0);
    }
    100% {
        background-color: transparent;
        box-shadow: 0 0 0 0 rgba(74, 144, 226, 0);
    }
}

/* Ensure animation works with existing K-Tree node styles */
.jstree-default .jstree-anchor.ktree-highlight-node {
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

/* ==========================================================================
   ULTRAWIDE / 4K - Park sidebar in the outer margin so content stays full width.
   Requires viewport >= site_width (1400px) + 2 × sidebar (300+12px = 312px)
   = 2024px.

   Approach: keep position: sticky (preserve scroll-with-content + stick-on-top
   behavior). Use a 12px positive inner margin plus a -300px outer negative
   margin so the sidebar consumes only 12px of layout space in the flex parent
   — content shrinks by a barely-noticeable ~1% (e.g. 1340 → 1328) but no
   transform is needed, which avoids creating a new stacking context that
   would put the sidebar behind Avada's sticky header at scroll time.
   The sidebar's visual width (300px) renders past the flex parent's edge,
   naturally landing in the outer margin with a 12px gap from content.
   Ancestors get overflow: visible so the sidebar isn't clipped when it
   renders past the wrapper bounds.
   ========================================================================== */
@media (min-width: 2024px) {
    /* Allow the sidebar to render past the flex parent's edge into the outer margin. */
    body.post-chapters-right .post-content-with-chapters,
    body.post-chapters-left  .post-content-with-chapters {
        gap: 0;
        overflow: visible !important;
    }

    /* Right sidebar: 12px gap on the content side, -300px negative outer
       margin so the sidebar consumes only 12px of flex layout space.
       position: sticky and top: 105px inherit from base styles. */
    body.post-chapters-right .post-chapters-sidebar {
        margin-left: 12px !important;
        margin-right: -300px !important; /* visual gap 12 + (300 - 300) = 12 */
    }
    body.post-chapters-right .post-chapters-sidebar.collapsed {
        margin-right: -300px !important;
    }

    /* Left sidebar — mirrored. */
    body.post-chapters-left .post-chapters-sidebar {
        margin-right: 12px !important;
        margin-left: -300px !important;
    }
    body.post-chapters-left .post-chapters-sidebar.collapsed {
        margin-left: -300px !important;
    }

    /* Content reclaims full width because the sidebar consumes 0 layout space. */
    body.has-post-chapters:not(.post-chapters-top) .post-content-main {
        max-width: 100% !important;
    }
}