/* ============================================================
   LEARNING CENTER — CONSOLIDATED STYLESHEET
   Every style used across the Learning Center lives here (layered on
   top of the blog's shared style.css). No page should carry its own
   <style> block or style="" attributes — inline/embedded CSS bloats
   every page's HTML, can't be cached, and search engines have to
   crawl through it to reach real content, which hurts SEO on pages
   that are otherwise well optimized.
   ============================================================ */

/* ---------- Detail-page hero (course.php only — category pages no
   longer use a hero, see the cat-page-heading block below) ---------- */
.lc-hero { background: var(--gradient-hero, #12121c); padding: 56px 0 44px; text-align: center; color: #fff; }
.lc-hero h1 { color: #fff; font-size: clamp(2rem, 4.2vw, 2.7rem); margin-bottom: 10px; }
.lc-hero p { color: rgba(255,255,255,.82); max-width: 620px; margin: 0 auto; font-size: 1.05rem; }
.lc-hero .course-hero-badge { background: rgba(255,255,255,.14); color: #fff; }
.lc-hero h1.course-hero-h1 { margin-top: 12px; }
.course-hero-meta { color: rgba(255,255,255,.65); font-size: .88rem; }

/* ---------- Old homepage category grid (kept for any legacy callers;
   the homepage itself no longer renders this) ---------- */
.lc-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 44px 0; }
.lc-cat-card {
  display: block; background: var(--color-card); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 22px 20px; text-align: left;
  transition: transform .2s ease, box-shadow .2s ease;
}
.lc-cat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.lc-cat-card h3 { font-size: 1.02rem; margin: 0 0 4px; color: var(--color-ink); }
.lc-cat-card span { font-size: .8rem; color: var(--color-muted); }

.lc-type-badge { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 4px 10px; border-radius: 100px; margin-right: 6px; }
.lc-type-badge.guide { background: rgba(46,134,222,.12); color: #2e86de; }
.lc-type-badge.course { background: rgba(230,126,34,.14); color: #e67e22; }

/* ---------- Course landing + lesson layout ---------- */
.lc-course-layout { display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: start; padding: 40px 0 60px; }
.lc-course-sidebar { position: sticky; top: 100px; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 18px; max-height: 80vh; overflow-y: auto; }
.lc-module-title { font-size: .84rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted); margin: 18px 0 8px; }
.lc-module-title:first-child { margin-top: 0; }
.lc-lesson-list { list-style: none; margin: 0 0 4px; padding: 0; }
.lc-lesson-list li a { display: block; padding: 9px 10px; border-radius: 8px; font-size: .9rem; color: var(--color-ink-soft); }
.lc-lesson-list li a:hover { background: var(--color-primary-light); color: var(--color-primary); }
.lc-lesson-list li a.active { background: var(--color-primary); color: #fff; font-weight: 600; }

.lc-lesson-content { max-width: 760px; }
.lc-lesson-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--color-border); }
.lc-lesson-nav a { flex: 1; padding: 14px 18px; border: 1px solid var(--color-border); border-radius: var(--radius); font-size: .88rem; }
.lc-lesson-nav a.next { text-align: right; margin-left: auto; }

.lc-course-hero-cta { display: inline-flex; margin-top: 18px; background: var(--color-primary); color: #fff; font-weight: 700; padding: 13px 28px; border-radius: 100px; font-size: .92rem; }
.lc-course-hero-cta:hover { opacity: .9; color: #fff; }

/* Lesson sidebar labels (was inline style="" on lesson.php) */
.lesson-sidebar-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--color-muted); margin-bottom: 2px; }
.lesson-sidebar-course-link { font-weight: 700; color: var(--color-ink); display: block; margin-bottom: 6px; }
.lesson-module-label { font-size: .82rem; color: var(--color-muted); margin-bottom: 4px; }
.lesson-content-body { margin-top: 20px; }

/* Course landing page body (was inline style="" on course.php) */
.course-body-wrap { padding: 44px 0; }
.course-description { max-width: 760px; margin-bottom: 36px; }
.course-empty-text { color: var(--color-muted); }
.course-modules { margin-top: 16px; }
.course-module-card { margin-bottom: 14px; }
.course-module-title { margin-bottom: 10px; }
.course-lesson-empty { padding: 9px 10px; color: var(--color-muted); font-size: .88rem; }

/* Simple centered error states (guide/course/lesson/category "not found") */
.lc-error-page { padding: 100px 0; text-align: center; }
.lc-error-page-sm { padding: 60px 0; }
.lc-error-muted { color: var(--color-muted); margin-bottom: 24px; }
.lc-error-btn { text-decoration: none; }

/* ============================================================
   MEGA MENU (Categories dropdown in the header)
   ============================================================
   These classes had NO styling anywhere before this fix, so even
   though Bootstrap's JS toggles the .show class correctly, the menu
   either rendered as an unstyled sliver or was clipped by an
   ancestor's overflow rule inherited from the reused blog stylesheet.
   Everything below is scoped and !important-guarded so it can't be
   silently overridden by style.css load order. */

.mega-dropdown { position: relative; }

/* Guarantee visibility ancestors never clip the menu */
.navbar, .navbar .container, .navbar-collapse, .navbar-nav, .mega-dropdown {
  overflow: visible !important;
}

.mega-dropdown .dropdown-menu.mega-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 10px;
  min-width: 480px;
  max-width: 720px;
  width: max-content;
  background: #fff;
  border: 1px solid var(--color-border, #ece7db);
  border-radius: 14px;
  box-shadow: 0 22px 48px -18px rgba(20, 20, 30, .28);
  padding: 22px 26px;
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Forced-on state — wins regardless of any hover-only dropdown pattern
   that may exist in the reused blog stylesheet. */
.mega-dropdown .dropdown-menu.mega-menu.show {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.mega-menu-eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #a58a3f;
  margin: 0 0 14px;
}

.mega-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 6px 18px;
}

.mega-menu-link {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: .9rem;
  color: var(--color-ink, #1b1f27);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mega-menu-link:hover { background: var(--color-primary-light, #f4f1ea); color: var(--color-primary, #a58a3f); }
.mega-menu-link.active { background: var(--color-primary, #1b1f27); color: #fff; }

.mega-menu-viewall {
  display: inline-block;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border, #ece7db);
  font-family: 'Inter', sans-serif;
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-primary, #a58a3f);
  text-decoration: none;
}

@media (max-width: 576px) {
  .mega-dropdown .dropdown-menu.mega-menu { min-width: 280px; left: 0; transform: none; }
  .mega-menu-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   CATEGORY PAGE (moved out of category.php's inline <style> block)
   ============================================================ */

/* Breadcrumb + plain heading replace the old hero band + category
   pills strip — kept minimal on purpose per the current page design. */
.cat-page-heading { padding: 28px 0 36px; }
.cat-page-heading h1 {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  color: #1b1f27;
  margin: 6px 0 8px;
  letter-spacing: -0.01em;
}
.cat-page-count {
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #a58a3f;
  font-weight: 600;
  margin: 0;
}
.cat-page-desc {
  font-family: 'Inter', sans-serif;
  font-size: .98rem;
  line-height: 1.6;
  color: #6b6559;
  max-width: 720px;
  margin: 10px 0 0;
}

.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 22px; }
@media (max-width: 900px) { .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 16px; } }
@media (max-width: 560px) { .cat-grid { grid-template-columns: 1fr; } }

.cat-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid #ece7db; transition: transform .22s ease, box-shadow .22s ease; }
.cat-card:hover { transform: translateY(-5px); box-shadow: 0 18px 34px -14px rgba(27,31,39,.22); }
.cat-card-media { position: relative; width: 100%; aspect-ratio: 4/3; overflow: hidden; background: #f0ece2; }
.cat-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.cat-card:hover .cat-card-media img { transform: scale(1.06); }
.cat-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#1b1f27,#3a3428); }
.cat-card-placeholder span { font-family: 'Fraunces', serif; font-size: 2.4rem; color: #c8a24a; font-weight: 600; }
.cat-card-date { position: absolute; top: 12px; left: 12px; background: rgba(27,31,39,.82); color: #f4f1ea; font-family: 'Inter', sans-serif; font-size: .7rem; letter-spacing: .04em; padding: 5px 10px; border-radius: 6px; }
.cat-card-type { position: absolute; top: 12px; right: 12px; background: rgba(200,162,74,.92); color: #1b1f27; font-family: 'Inter', sans-serif; font-size: .7rem; font-weight: 600; letter-spacing: .04em; padding: 5px 10px; border-radius: 6px; }
.cat-card-body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.cat-card-title {
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.06rem; line-height: 1.32; color: #1b1f27; margin: 0 0 10px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cat-card:hover .cat-card-title { color: #a58a3f; }
.cat-card-excerpt {
  font-family: 'Inter', sans-serif; font-size: .87rem; line-height: 1.55; color: #6b6559; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.cat-empty { text-align: center; padding: 60px 20px; font-family: 'Inter', sans-serif; color: #8a8375; }

.cat-pagination { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-top: 40px; }
.cat-pagination a { font-family: 'Inter', sans-serif; font-size: .85rem; padding: 8px 14px; border-radius: 8px; border: 1px solid #e3ddce; color: #4a4640; text-decoration: none; transition: all .18s ease; }
.cat-pagination a:hover { border-color: #c8a24a; }
.cat-pagination a.active { background: #1b1f27; border-color: #1b1f27; color: #f4f1ea; }

.cat-content-wrap { margin-top: 20px; }

/* ============================================================
   SHARED SIDEBAR WIDGETS (includes/sidebar.php)
   ============================================================ */

.sidebar-recent-list { list-style: none; margin: 0; padding: 0; }
.sidebar-recent-item {
  display: flex; gap: 12px; align-items: flex-start; padding: 10px 0;
  border-bottom: 1px solid var(--color-border, #ece7db);
}
.sidebar-recent-item:last-child { border-bottom: none; padding-bottom: 0; }
.sidebar-recent-item:first-child { padding-top: 0; }
.sidebar-recent-thumb { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; background: #f0ece2; }
.sidebar-recent-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sidebar-recent-thumb-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg,#1b1f27,#3a3428); color: #c8a24a; font-family: 'Fraunces', serif; font-weight: 600;
}
.sidebar-recent-info { flex: 1; min-width: 0; }
.sidebar-recent-title {
  display: block; font-size: .88rem; font-weight: 600; color: var(--color-ink, #1b1f27); line-height: 1.35; margin-bottom: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sidebar-recent-title:hover { color: var(--color-primary, #a58a3f); }
.sidebar-recent-date { font-size: .74rem; color: var(--color-muted); }

.sidebar-cta { background: var(--gradient-hero, #12121c); border-radius: var(--radius, 12px); padding: 22px; text-align: center; }
.sidebar-cta p { color: rgba(255,255,255,.85); font-size: .88rem; margin: 0 0 14px; }
.sidebar-cta a { display: inline-block; background: #fff; color: #12121c; font-weight: 700; font-size: .85rem; padding: 10px 20px; border-radius: 100px; text-decoration: none; }