/* ============================================================
   JalurSamping.com UX Enhancements — ux.css
   Loaded alongside jalsam-style.css on all article pages.
   Progressive enhancement: reading bar, TOC, dark mode,
   callouts, TL;DR, search modal, and more.
   ============================================================ */

/* ===========================================================
   1. READING PROGRESS BAR
   Fixed at top of viewport, below topbar (~60px).
   Width controlled by JS (0%–100%).
   =========================================================== */
.ux-progress{
  position:fixed;
  top:60px;
  left:0;
  width:0%;
  height:3px;
  background:linear-gradient(90deg,var(--brand-gold),var(--brand-navy));
  z-index:100;
  transition:width 60ms linear;
  pointer-events:none;
}

/* ===========================================================
   2. TABLE OF CONTENTS (auto-generated by JS)
   Sticky sidebar on desktop (right side).
   Collapses to accordion on mobile (<768px).
   =========================================================== */
.ux-toc{
  position:sticky;
  top:80px;
  align-self:flex-start;
  max-width:220px;
  margin-left:auto;
  padding:1.25rem;
  background:var(--card-bg);
  border:var(--border-card);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  z-index:10;
  max-height:calc(100vh - 100px);
  overflow-y:auto;
}
.ux-toc-title{
  font-family:var(--serif);
  font-size:.95rem;
  font-weight:700;
  color:var(--brand-navy);
  margin-bottom:.75rem;
  padding-bottom:.5rem;
  border-bottom:2px solid var(--brand-gold-pale);
}
.ux-toc-list{
  list-style:none;
  padding:0;
  margin:0;
}
.ux-toc-link{
  display:block;
  padding:.35rem .6rem;
  font-size:.82rem;
  color:var(--text-muted);
  border-left:3px solid transparent;
  transition:all var(--dur) var(--ease);
  line-height:1.4;
  margin-bottom:.15rem;
}
.ux-toc-link:hover{
  color:var(--brand-gold);
  border-left-color:var(--brand-gold-pale);
}
.ux-toc-link.active{
  color:var(--brand-navy);
  font-weight:600;
  border-left-color:var(--brand-gold);
  background:var(--brand-gold-pale);
}
/* Indent h3 links */
.ux-toc-link[data-level="3"]{padding-left:1.2rem;font-size:.78rem}

/* Mobile: collapsible accordion */
@media(max-width:768px){
  .ux-toc{
    position:relative;
    top:0;
    max-width:100%;
    margin:0 0 1.5rem 0;
  }
  .ux-toc-title{
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .ux-toc-title::after{
    content:'▸';
    font-size:.85rem;
    transition:transform var(--dur) var(--ease);
  }
  .ux-toc.collapsed .ux-toc-title::after{transform:rotate(0deg)}
  .ux-toc:not(.collapsed) .ux-toc-title::after{transform:rotate(90deg)}
  .ux-toc.collapsed .ux-toc-list{display:none}
}

/* ===========================================================
   3. READING TIME BADGE
   Pill shape, placed after hero/title, before content.
   =========================================================== */
.ux-reading-time{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.35rem .85rem;
  font-size:.78rem;
  font-weight:700;
  background:var(--brand-navy);
  color:#fff;
  border-radius:var(--r-sm);
  margin-bottom:1.5rem;
  border:2px solid var(--brand-navy);
  box-shadow:3px 3px 0 var(--brand-navy);
}

/* ===========================================================
   4. BACK TO TOP BUTTON
   Fixed bottom-right, circular, gold background.
   Appears after 400px scroll.
   =========================================================== */
.ux-back-top{
  position:fixed;
  bottom:2rem;
  right:2rem;
  width:48px;
  height:48px;
  background:var(--brand-gold);
  color:#fff;
  border:2px solid var(--brand-navy);
  border-radius:50%;
  font-size:1.2rem;
  cursor:pointer;
  box-shadow:var(--shadow-md);
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:all var(--dur) var(--ease);
  z-index:90;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ux-back-top.visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.ux-back-top:hover{
  background:var(--brand-gold-light);
  transform:translateY(-3px);
  box-shadow:var(--shadow-hover);
}

/* ===========================================================
   5. DARK MODE
   .ux-dark class on body overrides all CSS custom properties.
   Toggle button: .ux-dark-toggle (moon/sun icon).
   =========================================================== */
.ux-dark{
  --brand-navy:#e8e0d0;
  --brand-navy-light:#d6cec0;
  --brand-navy-dark:#c4bbb0;
  --brand-gold:#d4a85b;
  --brand-gold-light:#e0be7a;
  --brand-gold-pale:rgba(212,168,91,.12);
  --bg-cream:#121a2e;
  --card-bg:#1a1a2e;
  --border-light:#374151;
  --surface-warm:#16213e;
  --text-main:#e8e0d0;
  --text-muted:#9ca3af;
  --fg:#e8e0d0;
  --bg:#121a2e;
  /* semantic adjustments */
  --success-green-bg:rgba(16,185,129,.1);
  --error-red-bg:rgba(230,57,70,.1);
  --info-blue-bg:rgba(59,130,246,.1);
  --warn-amber-bg:rgba(245,158,11,.1);
  --purple-bg:rgba(139,92,246,.1);
  /* shadows softer in dark */
  --shadow-sm:3px 3px 0 rgba(0,0,0,.3);
  --shadow-md:4px 4px 0 rgba(0,0,0,.3);
  --shadow-lg:6px 6px 0 rgba(0,0,0,.3);
  --shadow-hover:6px 6px 0 rgba(0,0,0,.3);
  color-scheme:dark;
}

/* Smooth transition for dark mode toggle only */
.ux-dark,
.ux-dark .topbar,
.ux-dark .topbar-nav a,
.ux-dark .logo-text-navy,
.ux-dark .logo-text-gold,
.ux-dark .content-wrap,
.ux-dark .related-section,
.ux-dark .cta-footer,
.ux-dark footer{
  transition:background-color 0.3s ease,color 0.3s ease,border-color 0.3s ease;
}

/* Dark mode specifics */
.ux-dark .topbar{
  background:rgba(18,26,46,.9);
}
.ux-dark .topbar-nav a:hover{
  background:rgba(212,168,91,.1);
}
.ux-dark .logo-text-navy{color:var(--brand-navy)}
.ux-dark .logo-text-gold{color:var(--brand-gold)}
.ux-dark pre{background:#0f1a2e}
.ux-dark pre code{color:#e8e0d0}
.ux-dark pre p,
.ux-dark pre li,
.ux-dark pre span,
.ux-dark pre strong,
.ux-dark pre em{color:#e8e0d0}
.ux-dark pre a{color:var(--brand-gold-light)}
.ux-dark code{background:rgba(232,224,208,.08)}
.ux-dark ::-webkit-scrollbar-track{background:var(--bg-cream)}
.ux-dark ::-webkit-scrollbar-thumb{background:var(--brand-gold)}
.ux-dark .hero{background:#121a2e}
.ux-dark .comparison-table thead th{background:#121a2e}
.ux-dark .pullquote p{color:var(--brand-navy)}
.ux-dark .stat-card .stat-number,
.ux-dark .stat-number{color:var(--brand-navy)}
.ux-dark .section-label{color:#121a2e}
.ux-dark .step-number{background:#121a2e}

.ux-dark .ux-dark-toggle{
  border-color:var(--brand-gold);
  color:var(--brand-gold);
}

/* ===========================================================
   6. DROP CAP
   First letter of first paragraph in content.
   Desktop only (>768px).
   =========================================================== */
@media(min-width:769px){
  .content-wrap > p:first-of-type::first-letter,
  .article > p:first-of-type::first-letter{
    font-family:var(--serif);
    font-size:3.5em;
    float:left;
    line-height:.85;
    margin-right:.1em;
    margin-top:.05em;
    color:var(--brand-gold);
    font-weight:700;
  }
}

/* ===========================================================
   7. BLOCKQUOTE STYLING
   Already styled in jalsam-style.css.
   This adds extra enhancement: subtle warm tint, italic.
   =========================================================== */
.article blockquote{
  border-left:4px solid var(--brand-gold);
  background:var(--brand-gold-pale);
  font-style:italic;
  padding:1.25rem 1.5rem;
  margin:1.75rem 0;
  border-radius:var(--r-md);
  color:var(--brand-navy);
  border:1px solid var(--brand-gold-pale);
  border-left:4px solid var(--brand-gold);
  box-shadow:var(--shadow-sm);
  position:relative;
}
.article blockquote::before{
  content:'\201C';
  font-family:var(--serif);
  font-size:3rem;
  color:var(--brand-gold);
  opacity:.25;
  position:absolute;
  top:.25rem;
  left:.75rem;
  line-height:1;
}
.article blockquote p{
  font-style:inherit;
}

/* ===========================================================
   8. CALLOUT BOXES
   Semantic callouts: tip, warning, key point.
   =========================================================== */
.ux-callout{
  padding:1.25rem 1.5rem 1.25rem 3.5rem;
  margin:1.75rem 0;
  border-radius:var(--r-md);
  border:2px solid;
  position:relative;
  box-shadow:var(--shadow-sm);
}
.ux-callout::before{
  position:absolute;
  left:1rem;
  top:1.15rem;
  font-size:1.2rem;
  line-height:1;
}
.ux-callout p:last-child{margin-bottom:0}

.ux-callout-tip{
  background:var(--success-green-bg);
  border-color:rgba(16,185,129,.25);
}
.ux-callout-tip::before{content:'💡'}

.ux-callout-warning{
  background:var(--warn-amber-bg);
  border-color:rgba(245,158,11,.25);
}
.ux-callout-warning::before{content:'⚠️'}

.ux-callout-key{
  background:var(--info-blue-bg);
  border-color:rgba(59,130,246,.25);
}
.ux-callout-key::before{content:'🔑'}

/* ===========================================================
   9. TL;DR BOX
   Collapsed by default, toggle to expand/collapse.
   Gold-tinted background, top of article.
   =========================================================== */
.ux-tldr{
  background:var(--brand-gold-pale);
  border:2px solid var(--brand-gold);
  border-radius:var(--r-lg);
  margin:0 0 2rem 0;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.ux-tldr-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:1rem 1.25rem;
  background:none;
  border:none;
  cursor:pointer;
  font-family:var(--serif);
  font-size:1.05rem;
  font-weight:700;
  color:var(--brand-navy);
  text-align:left;
}
.ux-tldr-toggle::after{
  content:'▸';
  font-size:.9rem;
  transition:transform var(--dur) var(--ease);
  flex-shrink:0;
  margin-left:.75rem;
}
.ux-tldr.open .ux-tldr-toggle::after{
  transform:rotate(90deg);
}
.ux-tldr-content{
  padding:0 1.25rem;
  max-height:0;
  overflow:hidden;
  transition:max-height 0.35s var(--ease),padding 0.35s var(--ease);
}
.ux-tldr.open .ux-tldr-content{
  max-height:600px;
  padding:0 1.25rem 1.25rem;
}
.ux-tldr-content p{
  font-size:.95rem;
  color:var(--brand-navy);
  line-height:1.65;
  margin-bottom:0;
}

/* ===========================================================
   10. BREADCRUMB ENHANCEMENT
   Home icon on first link, horizontal scroll on mobile.
   =========================================================== */
.breadcrumb{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  white-space:nowrap;
  flex-wrap:nowrap;
}
.breadcrumb::-webkit-scrollbar{display:none}

/* Home icon on first breadcrumb link */
.breadcrumb a:first-child::before{
  content:'🏠';
  font-size:.8em;
  margin-right:.3em;
  vertical-align:middle;
}

/* ===========================================================
   11. NEXT/PREV ARTICLE NAVIGATION
   Two-column cards at bottom of article.
   =========================================================== */
.ux-nav-article{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  margin:3rem 0 1rem;
  padding-top:2rem;
  border-top:2px solid var(--border-light);
}
.ux-nav-article a{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:1.25rem;
  background:var(--card-bg);
  border:var(--border-card);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  transition:all var(--dur) var(--ease);
  text-decoration:none;
}
.ux-nav-article a:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-hover);
  border-color:var(--brand-gold);
}
.ux-nav-article .ux-nav-prev{justify-content:flex-start}
.ux-nav-article .ux-nav-next{justify-content:flex-end;text-align:right}
.ux-nav-article .ux-nav-arrow{
  font-size:1.5rem;
  color:var(--brand-gold);
  flex-shrink:0;
}
.ux-nav-article .ux-nav-title{
  font-family:var(--serif);
  font-size:.95rem;
  font-weight:600;
  color:var(--brand-navy);
  line-height:1.35;
}
@media(max-width:640px){
  .ux-nav-article{
    grid-template-columns:1fr;
  }
}

/* ===========================================================
   12. SEARCH MODAL
   Full-screen overlay with centered search box.
   Triggered by search icon or Ctrl+K.
   =========================================================== */
.ux-search-overlay{
  position:fixed;
  inset:0;
  background:rgba(18,26,46,.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:200;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding-top:clamp(80px,15vh,180px);
}
.ux-search-overlay.open{display:flex}

.ux-search-box{
  width:90%;
  max-width:560px;
  background:var(--card-bg);
  border:var(--border-card);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.ux-search-box input{
  width:100%;
  padding:1rem 1.25rem;
  font-size:1.05rem;
  border:none;
  outline:none;
  background:transparent;
  color:var(--text-main);
  font-family:var(--sans);
}
.ux-search-box input::placeholder{color:var(--text-muted)}
.ux-search-hint{
  padding:.5rem 1.25rem;
  font-size:.75rem;
  color:var(--text-muted);
  border-top:1px solid var(--border-light);
  display:flex;
  align-items:center;
  gap:.5rem;
}
.ux-search-hint kbd{
  display:inline-block;
  padding:.1rem .4rem;
  font-family:var(--mono);
  font-size:.7rem;
  background:var(--surface-warm);
  border:1px solid var(--border-light);
  border-radius:4px;
  color:var(--text-muted);
}

.ux-search-results{
  max-height:50vh;
  overflow-y:auto;
  border-top:1px solid var(--border-light);
}
.ux-search-results:empty{display:none}
.ux-search-result{
  display:block;
  padding:.85rem 1.25rem;
  border-bottom:1px solid var(--border-light);
  transition:background var(--dur) var(--ease);
  text-decoration:none;
  color:var(--text-main);
}
.ux-search-result:last-child{border-bottom:none}
.ux-search-result:hover,
.ux-search-result.focused{
  background:var(--brand-gold-pale);
}
.ux-search-result-title{
  font-family:var(--serif);
  font-size:.95rem;
  font-weight:600;
  color:var(--brand-navy);
  margin-bottom:.15rem;
}
.ux-search-result-desc{
  font-size:.8rem;
  color:var(--text-muted);
  line-height:1.4;
}
.ux-search-no-results{
  padding:1.5rem;
  text-align:center;
  color:var(--text-muted);
  font-size:.9rem;
}

@media(max-width:640px){
  .ux-search-overlay{
    padding-top:60px;
    align-items:flex-start;
  }
  .ux-search-box{width:95%}
}

/* ===========================================================
   13. SCROLL HINT for tools/horizontal-scroll strips
   Faded edge gradients + arrow indicators.
   =========================================================== */
.ux-scroll-hint{
  position:relative;
}
.ux-scroll-hint::before,
.ux-scroll-hint::after{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  width:40px;
  pointer-events:none;
  z-index:2;
  opacity:0;
  transition:opacity var(--dur) var(--ease);
}
.ux-scroll-hint::before{
  left:0;
  background:linear-gradient(90deg,var(--bg-cream),transparent);
}
.ux-scroll-hint::after{
  right:0;
  background:linear-gradient(-90deg,var(--bg-cream),transparent);
}
.ux-scroll-hint.show-left::before{opacity:1}
.ux-scroll-hint.show-right::after{opacity:1}

/* Arrow indicators */
.ux-scroll-hint-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:28px;
  height:28px;
  background:var(--card-bg);
  border:2px solid var(--brand-navy);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.75rem;
  color:var(--brand-navy);
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  opacity:0;
  transition:all var(--dur) var(--ease);
}
.ux-scroll-hint-arrow:hover{
  background:var(--brand-gold);
  color:#fff;
}
.ux-scroll-hint-arrow.left{left:6px}
.ux-scroll-hint-arrow.right{right:6px}
.ux-scroll-hint.show-left .ux-scroll-hint-arrow.left,
.ux-scroll-hint.show-right .ux-scroll-hint-arrow.right{
  opacity:1;
}

/* ===========================================================
   UTILITY: smooth scroll for anchor links
   =========================================================== */
html{
  scroll-behavior:smooth;
}

/* ===========================================================
   PRINT STYLES
   Hide non-essential UX elements when printing.
   =========================================================== */
@media print{
  .ux-progress,
  .ux-back-top,
  .ux-dark-toggle,
  .ux-toc,
  .ux-search-overlay,
  .ux-scroll-hint-arrow,
  .ux-nav-article{display:none!important}
}

/* --- SEARCH TRIGGER BUTTON --- */
.ux-search-trigger{
  background:none;border:2px solid rgba(255,255,255,.3);cursor:pointer;font-size:.85rem;
  padding:.25rem .5rem;border-radius:var(--r-sm);color:rgba(255,255,255,.7);
  transition:all var(--dur) var(--ease);line-height:1;
}
.ux-search-trigger:hover{border-color:var(--brand-gold);color:var(--brand-gold)}

/* --- DARK MODE TOGGLE --- */
.ux-dark-toggle{
  background:none;border:2px solid rgba(255,255,255,.3);cursor:pointer;
  font-size:.85rem;padding:.25rem .5rem;border-radius:var(--r-sm);
  transition:all var(--dur) var(--ease);line-height:1;color:rgba(255,255,255,.7);
}
.ux-dark-toggle:hover{border-color:var(--brand-gold);color:var(--brand-gold)}
.ux-search-overlay{display:none}
.ux-search-overlay.open{display:flex}
.ux-search-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);align-items:flex-start;justify-content:center;padding-top:15vh}
.ux-search-modal{background:var(--card-bg)!important;border:2px solid var(--brand-navy);border-radius:var(--r-lg)!important;width:90%!important;max-width:560px!important;max-height:70vh!important;overflow:auto!important;padding:1.5rem!important;box-shadow:5px 5px 0 var(--brand-navy)!important}
.ux-search-input{width:100%!important;padding:.75rem!important;font-size:1rem!important;border:2px solid var(--brand-navy)!important;border-radius:var(--r-md)!important;outline:none!important;margin-bottom:1rem!important;background:var(--card-bg);color:var(--text-primary)}
.ux-search-input:focus{border-color:var(--brand-gold)!important;box-shadow:3px 3px 0 var(--brand-gold)}
.ux-search-result-item{display:block;padding:.65rem .75rem;border:1px solid var(--border-light);border-radius:var(--r-sm);margin-bottom:.35rem;text-decoration:none;color:var(--text-primary);transition:all var(--dur) var(--ease)}
.ux-search-result-item:hover{border-color:var(--brand-gold);background:var(--brand-gold-pale);transform:translateX(4px)}