/* ================================================================
   GlobalLayout.css v2.0 — 3-Column Learning Layout
   Desktop (>= 993px):  fixed-header + 3-col locked viewport
   Tablet  (<= 1240px): flex-col, natural page scroll
   Mobile  (<= 1200px):  sidebar is a drawer (see sidebar.css)
   ================================================================ */

:root {
  --header-height:      94px;  /* 58px top-bar + 36px tech-bar */
  --sidebar-width:      min(18vw, 260px);
  --rightpanel-width:   min(22vw, 340px);
  --line:               #e5e9f2;
}

@media (max-width: 1400px) {
  :root {
    --sidebar-width:    220px;
    --rightpanel-width: 260px;
  }
}

/* ── Reset canvas ───────────────────────────────────────────────── */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
}

/* ── "☰ Topics" button — hidden on desktop ──────────────────────── */
.sidebar-toggle {
  display: none;
}

/* ── Dark overlay — activated by sidebar.js ─────────────────────── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.48);
  z-index: 1200;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.sidebar-overlay.active { display: block; }

/* ── 3-column learning layout (standalone lesson pages) ─────────── */
.learning-container {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr) var(--rightpanel-width);
  width: 100%;
  min-height: calc(100vh - var(--header-height));
  margin-top: var(--header-height);
}

.content-area {
  min-width: 0;       /* prevents flex/grid blowout */
  background: #fff;
}

/* Fallback for generated titles missing the es-block-title class */
.content-area > h1:first-child,
.content-area > h2:first-child {
  font-size: 28px;
  font-weight: 800;
  color: #111;
  margin-top: 48px;
  margin-bottom: 24px;
  text-align: center;
  position: relative;
  padding-bottom: 12px;
}
.content-area > h1:first-child::after,
.content-area > h2:first-child::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: #FA541C;
  border-radius: 2px;
}

/* ── LARGE DESKTOP (>= 1241px): locked viewport scroll ─────────── */
@media (min-width: 1241px) {
  html, body {
    height: auto;
    overflow: visible;
  }

  .learning-container {
    min-height: calc(100vh - var(--header-height));
    height: auto;
    overflow: visible;
  }

  .content-area {
    height: auto;
  }
}

/* ── TABLET (641px – 1240px): single column, natural scroll ─────── */
@media (max-width: 1240px) {
  html, body {
    height: auto;
    overflow-y: visible;
  }

  .learning-container {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: auto;
    margin-top: var(--header-height);
    max-width: 100%;
  }

  .content-area {
    order: 2;
    height: auto;
    overflow: visible;
    /* padding handled by course.css fluidly */
  }

  #rightpanel-wrapper { order: 3; }
}

/* ── <= 1200px: show "☰ Topics" button, sidebar is drawer ─────────── */
@media (max-width: 1200px) {

  .sidebar-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 10px;
    padding: 10px 20px;
    background: #FA541C;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(250,84,28,0.25);
    position: sticky;
    top: 104px;
    z-index: 990;
    transition: background 0.15s, transform 0.1s;
    font-family: 'Inter', 'Segoe UI', sans-serif;
  }

  .sidebar-toggle:hover {
    background: #d94010;
    transform: translateY(-1px);
  }

  .content-area {
    /* padding handled by course.css fluidly */
  }
}

/* ── <= 480px: tighter mobile padding ──────────────────────────── */
@media (max-width: 480px) {
  .content-area {
    padding: 0 4px;
  }
}