/*
Theme Name: Movum KB LearnClone
Theme URI: https://movumtech.example
Author: MovumTech
Author URI: https://movumtech.example
Description: Minimal WordPress theme for a Help Center with 3 columns (left categories, center content, right "On this Page"), inspired by learn.smilecloud.com. Includes Elementor compatibility.
\1 1.2.7-sticky+sidebarbars+sidebarbar
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: movum-kb
Tags: documentation, knowledge-base, elementor, minimal
*/

/* Reset and base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;line-height:1.6;color:#0f172a;background:#fff}
a{color:#0096AF;text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1440px;margin:0 auto;padding:0 24px}

/* Grid */
.kb-grid{
  display:grid;
  grid-template-columns: 320px 1fr 300px;
  gap:24px;
}
@media (max-width: 1200px){
  .kb-grid{grid-template-columns:260px 1fr 260px}
}
@media (max-width: 992px){
  .kb-grid{grid-template-columns:1fr}
  .kb-left, .kb-right{position:static;top:auto;height:auto}
}

/* Left column (categories) */
.kb-left{
  border-right:1px solid #e2e8f0;
  position:sticky; top:88px; height:calc(100vh - 100px); overflow:auto; padding-bottom:48px;
}
.kb-cat{margin:6px 0}
.kb-cat > .kb-cat-toggle{display:flex;align-items:center;gap:8px;padding:8px 4px;cursor:pointer;font-weight:600;color:#0f172a}
.kb-cat .kb-sub{margin-left:16px;display:none}
.kb-cat.open .kb-sub{display:block}
.kb-sub a{display:block;padding:6px 4px;border-radius:4px}
.kb-sub a.active{color:#0096AF;font-weight:600}

/* Center column */
.kb-center{padding-right:12px}
.kb-article h1{font-size:2.25rem;line-height:1.2;margin:0 0 16px;font-weight:800}
.kb-article h2{font-size:1.5rem;margin:28px 0 8px}
.kb-article h3{font-size:1.25rem;margin:24px 0 6px}
.kb-article h4{font-size:1.1rem;margin:20px 0 6px}
.kb-article p{margin:12px 0}
.kb-article figure{margin:16px 0}
.kb-helpful{display:flex;flex-direction:column;align-items:center;gap:10px;padding:32px 0;margin:32px 0;border-top:1px solid #e5e7eb}

/* Right column (TOC) */
.kb-right{
  border-left:1px solid #e2e8f0;
  position:sticky; top:100px; height:calc(100vh - 120px); overflow:auto; padding-left:16px; padding-bottom:48px;
}
.kb-toc-title{font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.kb-toc{list-style:none;margin:0;padding:0;font-size:0.95rem}
.kb-toc li{margin:6px 0}
.kb-toc a{display:block;padding:4px;border-left:2px solid transparent}
.kb-toc a.is-active{border-left-color:#0096AF;color:#0096AF;font-weight:600}
.kb-toc .toc-h2{padding-left:8px}
.kb-toc .toc-h3{padding-left:16px}

/* Header + Footer */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #e5e7eb}
.site-header .inner{display:flex;align-items:center;gap:20px;padding:12px 0}
.header-search{flex:1;position:relative}
.header-search input{width:100%;padding:12px 40px 12px 12px;border:1px solid #0096AF;border-radius:8px;outline:none}
.header-search .icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);opacity:.6}
.site-footer{padding:20px 0;color:#94a3b8}
.lang-switch{display:inline-flex;align-items:center;gap:8px;background:#0f172a;color:#0096AF;padding:6px 10px;border-radius:4px}
.lang-switch select{background:transparent;color:#fff;border:none}


.kb-toc-title .toc-icon{opacity:.6;display:inline-flex;align-items:center;margin-right:6px}
.kb-toc-title svg{display:block}


.kb-cat-toggle{cursor:pointer;user-select:none}
.kb-cat-toggle span:first-child{display:inline-block;transition:transform .2s ease}
.kb-cat.open .kb-cat-toggle span:first-child{transform:rotate(90deg)}

:root{ --kb-sticky-offset: 96px; }
.kb-left{ top: var(--kb-sticky-offset) !important; }
.kb-right{ top: var(--kb-sticky-offset) !important; }
.kb-article h1, .kb-article h2, .kb-article h3{ scroll-margin-top: var(--kb-sticky-offset); }

:root{ --kb-top-gap: 28px; }
.kb-grid{ padding-top: var(--kb-top-gap); }


/* Header brand + links */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #e5e7eb}
.site-header .inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 0}
.logo .custom-logo{max-height:40px;height:auto;width:auto}
.logo-text{font-weight:800;font-size:1.25rem;color:#0f172a}
.kb-top-links{display:flex;align-items:center;gap:18px}
.kb-top-links .kb-link{display:inline-flex;align-items:center;gap:8px;color:#0ea5b7;padding:6px 8px;border-radius:6px}
.kb-top-links .kb-link:hover{background:#f1f5f9;text-decoration:none}
.kb-top-links .ico{display:inline-flex;opacity:.7}
@media (max-width: 768px){
  .kb-top-links{display:none;}
}


.kb-top-links .kb-fav{width:16px;height:16px;display:inline-block;object-fit:contain;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.06);}


.kb-toc-title{font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:8px;color:#0f172a}
.kb-toc-title .toc-compass svg{display:block}


.kb-toc-title .toc-img{display:block;border-radius:50%;}


/* === Movum KB: Sidebar subcategory bar (customizable) === */
:root{
  --kb-sidebar-bar-color: #3ca4c8;
  --kb-sidebar-bar-width: 2px;
  --kb-sidebar-bar-radius: 1px;
}

/* Elimina cualquier bullet y deja solo la barra vertical */
.kb-left ul,
.kb-left ol,
.kb-left .kb-cat-pages,
.kb-left .kb-cat-pages ul {
  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;
  margin: 0;
  padding: 0;
}

.kb-left li,
.kb-left .kb-cat-pages li {
  position: relative;
  margin-left: 0;
  padding-left: 12px; /* espacio para la barra */
  border-left: var(--kb-sidebar-bar-width) solid var(--kb-sidebar-bar-color);
  border-top-left-radius: var(--kb-sidebar-bar-radius);
  border-bottom-left-radius: var(--kb-sidebar-bar-radius);
}

/* Eliminar marcadores/pseudo-elementos de bullet */
.kb-left li::marker,
.kb-left .kb-cat-pages li::marker,
.kb-left li::before,
.kb-left .kb-cat-pages li::before {
  content: none !important;
  display: none !important;
}

/* Ocultar posibles spans o iconos que simulen bullet */
.kb-left li > .bullet,
.kb-left li > .dot,
.kb-left li > i.fa,
.kb-left li > i[class*="icon"],
.kb-left li > span.bullet {
  display: none !important;
}

/* Alinear el enlace al lado de la barra */
.kb-left li > a,
.kb-left .kb-cat-pages li > a {
  display: inline-block;
}/* Sidebar bar color (editable by user via Additional CSS or future Customizer hook) */
  --kb-sidebar-bar-color: #3ca4c8;
  --kb-sidebar-bar-width: 2px;
  --kb-sidebar-bar-radius: 1px;
}

.kb-left .kb-cat-pages li{
  list-style: none !important; /* remove bullets */
  position: relative;
  margin-left: 0;
  padding-left: 12px; /* room for the bar */
}

.kb-left .kb-cat-pages li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: var(--kb-sidebar-bar-width);
  height: 1.2em;
  background-color: var(--kb-sidebar-bar-color);
  border-radius: var(--kb-sidebar-bar-radius);
}

/* Ensure links align nicely next to the bar */
.kb-left .kb-cat-pages li > a{
  display: inline-block;
}
/* === End sidebar bar === */


/* --- Custom fix: remove bullet from left sidebar --- */
.sidebar-left ul {
  list-style: none !important;
  padding-left: 0;
}

.sidebar-left li {
  position: relative;
  padding-left: 12px;
}

.sidebar-left li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 2px;
  background-color: #2E95A0;
}

/* --- FIX DEFINITIVO: elimina el punto del sidebar izquierdo --- */
.sidebar-left ul {
  list-style-type: none !important;
  margin: 0;
  padding: 0;
}

.sidebar-left li {
  position: relative;
  padding-left: 12px;
}

/* Elimina cualquier marcador visual generado automáticamente */
.sidebar-left li::marker,
.sidebar-left li::before {
  content: none !important;
}

/* Añade solo la barra vertical */
.sidebar-left li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 2px;
  background-color: #2E95A0; /* color azul */
}

/* ===== FIX: Left sidebar bullets removed, keep only vertical bar ===== */
.sidebar-left ul, .sidebar-left ol { list-style: none !important; margin:0; padding:0; }
.sidebar-left li { position: relative; padding-left: 12px; }
.sidebar-left li::marker, .sidebar-left li::before { content: none !important; display: none !important; }
.sidebar-left li > .bullet, .sidebar-left li > .dot, .sidebar-left li > i.fa, .sidebar-left li > i[class*="icon"], .sidebar-left li > span.bullet { display: none !important; }
.sidebar-left li { border-left: 2px solid #2E95A0; } /* vertical bar */

/* Stronger override */
.sidebar-left ul, .sidebar-left ol {
  list-style-type: none !important;
  list-style-image: none !important;
}
.sidebar-left ul li, .sidebar-left ol li {
  background: none !important;
}

/* === Nuclear override to ensure no bullets in left sidebar === */
.kb-left * { list-style: none !important; }
.kb-left li::marker { content: none !important; }
.kb-left li::before { content: none !important; display: none !important; }



/* ===== Sticky Apple-like Header (Fixed) ===== */
:root{
  --header-height: 64px;
}
.site-header{
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 999;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
body{ padding-top: var(--header-height); }
@media (min-width: 783px){
  .admin-bar .site-header{ top: 32px; }
  .admin-bar body{ padding-top: calc(var(--header-height) + 32px); }
}
@media (max-width: 782px){
  .admin-bar .site-header{ top: 46px; }
  .admin-bar body{ padding-top: calc(var(--header-height) + 46px); }
}


/* === Hover Indicator Enhancer (non-destructive) === */

/* The moving vertical bar element injected by JS */
.kb-hover-indicator {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;            /* keep slim; respects existing layout */
  height: 0;
  background: currentColor; /* inherits color from parent for seamless look */
  border-radius: 2px;
  transition: top .18s ease, height .18s ease;
  pointer-events: none;
}
/* Ensure the UL that receives the indicator can contain it absolutely */
.kb-indicator-scope {
  position: relative;
}


/* === Single-Bar Override (prevents static bars) === */
/* Apply only inside the UL where the JS injects the moving bar */
.kb-indicator-scope {
  position: relative;
}

/* Kill any static left borders on items and links inside the scope */
.kb-indicator-scope > li,
.kb-indicator-scope > li > a {
  border-left: none !important;
  box-shadow: none !important; /* in case the left bar was made with inset shadow */
}

/* Remove pseudo-element based bars if the original theme used them */
.kb-indicator-scope > li::before,
.kb-indicator-scope > li::after,
.kb-indicator-scope > li > a::before,
.kb-indicator-scope > li > a::after {
  content: none !important;
}

/* Ensure nested ULs also don't render static bars */
.kb-indicator-scope li ul > li,
.kb-indicator-scope li ul > li > a {
  border-left: none !important;
  box-shadow: none !important;
}
.kb-indicator-scope li ul > li::before,
.kb-indicator-scope li ul > li::after,
.kb-indicator-scope li ul > li > a::before,
.kb-indicator-scope li ul > li > a::after {
  content: none !important;
}

/* The only visible bar should be this moving one */
.kb-hover-indicator {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 0;
  border-radius: 2px;
  background: currentColor;
  pointer-events: none;
  transition: top .18s ease, height .18s ease;
}


/* === Only-Moving-Bar Hard Override === */
/* Within the indicator scope, eliminate ANY static left decoration used as a bar */
.kb-indicator-scope li,
.kb-indicator-scope li *,
.kb-indicator-scope a {
  border-left: none !important;
  box-shadow: none !important;
  background-image: none !important; /* covers gradient-based bars */
}

/* Remove pseudo-element based bars for all descendants */
.kb-indicator-scope li::before,
.kb-indicator-scope li::after,
.kb-indicator-scope li *::before,
.kb-indicator-scope li *::after,
.kb-indicator-scope a::before,
.kb-indicator-scope a::after {
  /* keep arrows outside the UL (section title) untouched */
  border: 0 !important;
  width: 0 !important;
  background: none !important;
  box-shadow: none !important;
  content: none !important;
}

/* Ensure the moving bar stays visible above any leftover paints */
.kb-hover-indicator {
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 0;
  border-radius: 2px;
  background: currentColor;
  pointer-events: none;
  transition: top .18s ease, height .18s ease;
  z-index: 2;
}