/* =========================================================
   GeneBean — Learn Theme
   File: public_html/genebean/Styles/modes/learn-theme.css

   PURPOSE
   - Visual styling ONLY (no layout)
   - Reuses global design tokens
   - Applies ONLY to Learn mode
========================================================= */

/* =========================================================
   LEARN HEADER — TOOLBAR / TITLE (THEME ONLY)
========================================================= */
.learn-canvas {
    background: #14161a;
}
.learn-header {
  position: relative;
  background: var(--gb-surface-header);
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,0.04),
    0 6px 20px rgba(0,0,0,0.35);
}

/* Title */
.learn-header h1 {
  position: relative;
  color: var(--gb-text-primary);
  letter-spacing: -0.02em;
}

.learn-header h1::after {
  content: '';
  display: block;
  width: 72px;
  height: 1px;
  margin-top: 8px;

  background: linear-gradient(
    to right,
    var(--gb-accent-sky),
    transparent
  );
  opacity: 0.9;
}

/* Subtitle */
.learn-header p {
  color: var(--gb-text-secondary);
}

/* =========================================================
   LEARN SIDEBAR — NAVIGATION SURFACE
========================================================= */

.learn-sidebar {
  background: var(--gb-surface-nav);
  border-right: 1px solid var(--gb-border-subtle);

  transform: translateX(0);
  opacity: 1;

  will-change: transform, opacity;
  transition:
    transform 320ms cubic-bezier(.22,.61,.36,1),
    opacity 220ms ease;
}

/* =========================================================
   LEARN PILLS — NAVIGATION ITEMS
========================================================= */

.learn-pill {
  background: transparent;
  color: var(--gb-nav-text-muted);
  border: 1px solid transparent;
}

.learn-pill:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px rgba(0,0,0,0.6),
    0 0 0 3px var(--gb-accent-sky-soft);
}

.learn-pill:hover {
  background: var(--gb-surface-panel-soft);
  color: var(--gb-nav-text);
  border-color: var(--gb-accent-sky-faint);
}

/* Active learn unit */
.learn-pill.active {
  background: var(--gb-surface-panel);
  border-color: var(--gb-border-active);
  color: var(--gb-md-text-primary);
  font-weight: 600;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.04),
    0 0 0 1px var(--gb-accent-sky-faint);
}

/* Optional indicator (kept neutral) */
.learn-pill.active::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
}

/* =========================================================
   WORKSPACE — CONTENT SURFACE
========================================================= */

.learn-workspace {
  background: var(--gb-surface-panel);
  color: var(--gb-text-primary);
}

/* =========================================================
   WORKSPACE — TYPOGRAPHY
========================================================= */

.learn-workspace h1,
.learn-workspace h2,
.learn-workspace h3 {
  color: var(--gb-text-primary);
  font-weight: 500;
}

.learn-workspace p {
  color: var(--gb-text-secondary);
  line-height: 1.6;
}

.learn-workspace hr {
  border: none;
  height: 1px;
  margin: 24px 0;
  background: rgba(255,255,255,0.15);
}

/* =========================================================
   SCROLLBARS — LEARN SCOPE
========================================================= */

/* Firefox */
.learn-workspace,
.learn-sidebar {
  scrollbar-width: thin;
  scrollbar-color: rgba(80, 160, 255, 0) transparent;
}

/* WebKit */
.learn-workspace::-webkit-scrollbar,
.learn-sidebar::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.learn-workspace::-webkit-scrollbar-track,
.learn-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.learn-workspace::-webkit-scrollbar-thumb,
.learn-sidebar::-webkit-scrollbar-thumb {
  background-color: var(--gb-scrollbar-thumb);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.learn-workspace::-webkit-scrollbar-thumb:hover,
.learn-sidebar::-webkit-scrollbar-thumb:hover {
  background-color: var(--gb-scrollbar-thumb-hover);
}
/* =========================================================
   WORKSPACE OVERSCROLL BEHAVIOR
========================================================= */
.learn-workspace {
  overscroll-behavior: auto;
}

/* =========================================================
   SIDEBAR COLLAPSE TOGGLE — FUTURE SUPPORT
========================================================= */

.learn-collapse-toggle {
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 220ms ease,
    box-shadow 220ms ease;
  border-width: 0;
}

.learn-collapse-toggle .chevron {
  color: var(--gb-text-muted);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  user-select: none;
  /*Animation implementation to allow chevron rotation on hover and when collapsed*/
  display: inline-block;
  transition: transform 260ms cubic-bezier(.22,.61,.36,1);
  transform-origin: 50% 50%;
}

.learn-collapse-toggle:hover .chevron {
  color: var(--gb-accent-sky);
  transform: scale(1.15);
}
/* Active click feedback */
.learn-collapse-toggle:active .chevron {
  transform: scale(0.95);
}

/* =========================================================
   LEARN — SECTION NAVIGATION (RIGHT)
   Purpose: Academic reading aid
========================================================= */

.learn-section-nav {
    background: #181b20;
    border-left: 1px solid var(--gb-border-subtle);
    border-left: 1px solid rgb(191 191 191 / 71%);
    font-size: 13px;
}

/* Inner container */
.learn-section-nav-inner {
  padding: 18px 16px;
}

/* Section title (optional, subtle) */
.learn-section-nav-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  color: var(--gb-text-muted);
  margin-bottom: 12px;
}

/* List */
.learn-section-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Items */
.learn-section-item {
  font-size: 13px;
  line-height: 1.45;

  color: var(--gb-text-muted);
  cursor: pointer;

  padding: 4px 6px;
  border-radius: 6px;

  transition:
    color 160ms ease,
    background-color 160ms ease;
}

/* Hover — very restrained */
.learn-section-item:hover {
  color: var(--gb-text-secondary);
  background: rgba(255,255,255,0.035);
}

/* Active section */
.learn-section-item.is-active {
  color: var(--gb-md-text-primary);
  font-weight: 500;

  background: linear-gradient(
    to right,
    var(--gb-accent-sky-faint),
    transparent
  );
}

/* Optional: small dot indicator (very academic) */
.learn-section-item.is-active::before {
  content: '•';
  margin-right: 6px;
  color: var(--gb-accent-sky);
}
.learn-section-link {
    background-color: #ffffff00;
    border-width: 0px;
    cursor: pointer;
    color: #cfcccc;
    transition: color 160ms ease,
    background-color 160ms ease,
    transform 120ms ease;
}
/* Hover — quiet confidence */
.learn-section-link:hover {
  color:#fefefe;
  background: transparent;
}

/* Keyboard focus */
.learn-section-link:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 1px var(--gb-accent-sky-faint),
    0 0 0 2px rgba(0,0,0,0.6);
}
/* ---------------------------------------------------------
   LEARN — SECTION NAV HAIRLINE DIVIDER
--------------------------------------------------------- */

.learn-section-divider {
  border: none;
  height: 1px;

  margin: 10px 0 8px;

  background: linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,0.10),
    transparent
  );

  opacity: 0.35;
}
/*
main content container padding and bg for readability
*/
#learn-md-content {
    padding: 5%;
    border-radius: 10px;
    background: #eaeaea;
}