/**
 * SinBar Academy - Additional Polish, Responsive Fixes & Missing Utilities
 */

/* --- Featured Section in Home (uses courses.css classes + these helpers) --- */
.featured-courses-section {
  padding: 3.5rem 0 2rem;
}

/* Catalog page specific top-spacing */
.catalog-filter-bar {
  margin-bottom: 2.5rem;
}

/* --- Lucide icon sizing utility when used inside card meta --- */
i[data-lucide] {
  display: inline-block;
  vertical-align: middle;
}

/* --- Reader: Mobile Sidebar Toggle Button --- */
.reader-sidebar-toggle {
  display: none;
  position: fixed;
  bottom: 2rem;
  left: 1.5rem;
  z-index: 500;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  box-shadow: 0 6px 25px var(--accent-glow);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  color: #ffffff;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.reader-sidebar-toggle:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 30px var(--accent-glow-strong);
}

.reader-sidebar-toggle i {
  width: 1.5rem;
  height: 1.5rem;
}

/* Mobile Reader: Fixed Sidebar Overlay */
@media (max-width: 1024px) {
  .reader-sidebar-toggle {
    display: flex;
  }

  .reader-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 2000;
    display: flex;
    transform: translateX(-100%);
    transition: transform var(--transition-smooth);
    box-shadow: var(--shadow-lg);
  }

  .reader-sidebar.mobile-open {
    transform: translateX(0);
  }

  .reader-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(4, 7, 14, 0.65);
    backdrop-filter: blur(6px);
    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-smooth);
  }

  .reader-sidebar-backdrop.open {
    opacity: 1;
    visibility: visible;
  }

  .reader-main {
    width: 100%;
    padding: 1.5rem 1rem 6rem;
    max-width: 100%;
  }

  .lesson-pagination {
    flex-direction: column;
  }

  .pagination-link {
    max-width: 100%;
    width: 100%;
  }
}

/* --- Responsive Hero Section --- */
@media (max-width: 768px) {
  .hero-section {
    padding: 4rem 0 3rem;
  }

  .hero-cta-group {
    flex-direction: column;
    width: 100%;
  }

  .hero-cta-group .btn {
    width: 100%;
    justify-content: center;
  }

  .continue-learning-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .continue-learning-banner .btn {
    width: 100%;
    justify-content: center;
  }
}

/* --- Responsive Courses Grid --- */
@media (max-width: 720px) {
  .courses-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Responsive Dashboard --- */
@media (max-width: 768px) {
  .dashboard-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-columns-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-user-profile {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .dashboard-stats-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Quiz: Responsive --- */
@media (max-width: 640px) {
  .quiz-wrapper {
    margin-top: 1.5rem;
    padding: 0 1rem;
  }

  .quiz-card-main {
    padding: 1.5rem;
  }

  .question-text {
    font-size: 1.1rem;
  }

  .quiz-header-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .results-score-display {
    flex-direction: column;
    gap: 1.5rem;
  }

  .results-card {
    padding: 2rem 1.25rem;
  }
}

/* --- Footer responsive --- */
@media (max-width: 768px) {
  footer .container > div > div:first-child {
    flex-direction: column;
    gap: 1.5rem;
  }
}

/* --- Scrollbar Styling (Webkit) --- */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-glass) transparent;
}

*::-webkit-scrollbar {
  width: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--border-glass);
  border-radius: var(--radius-full);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--accent-primary);
}

/* --- Selection Highlight --- */
::selection {
  background: rgba(99, 102, 241, 0.3);
  color: var(--text-primary);
}

/* --- Utility: Focus visible accessibility --- */
*:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* --- Empty State for Reader (Not Found) --- */
.reader-not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 6rem 2rem;
  text-align: center;
}

.reader-not-found h2 {
  font-size: 2rem;
  font-weight: 800;
}

.reader-not-found p {
  font-size: 1.05rem;
  color: var(--text-secondary);
}

/* --- Quiz: Empty not found state --- */
.quiz-not-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 6rem 2rem;
  text-align: center;
}

/* --- Animate pulse for glow orbs --- */
.hero-glow-1, .hero-glow-2 {
  animation: glowPulse 8s ease-in-out infinite alternate;
}

@keyframes glowPulse {
  from { opacity: 0.6; transform: translateX(-50%) scale(1); }
  to { opacity: 1; transform: translateX(-50%) scale(1.1); }
}

.hero-glow-2 {
  animation-duration: 10s;
  animation-name: glowPulse2;
}

@keyframes glowPulse2 {
  from { opacity: 0.5; }
  to { opacity: 1; }
}

/* --- Navbar scroll effect (JS will add this class) --- */
.navbar-wrapper.scrolled {
  background: transparent;
}

/* --- Code Snippet Box Light Mode Fix --- */
[data-theme="light"] .code-snippet-box {
  background: #1e2435;
}

/* --- Callout Light Mode --- */
[data-theme="light"] .callout-tip {
  background: rgba(99, 102, 241, 0.08);
}

[data-theme="light"] .callout-warning {
  background: rgba(245, 158, 11, 0.08);
}

/* --- Bento grid: single col on small screens --- */
@media (max-width: 640px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }

  .bento-card {
    border-radius: var(--radius-lg);
    padding: 1.5rem;
  }

  .hero-badge-pill {
    font-size: 0.78rem;
    padding: 0.35rem 0.85rem;
  }
}