/* Python Course Shell Styles - Theme Token Authority
 * ==================================================
 * This file OWNS all theme tokens for the Python course page.
 * It scopes tokens to body.page-python-course to prevent global leakage.
 * Component-specific overrides are in python-course.css (the component layer).
 */

/* ========================================
   THEME TOKENS - Shell Authority Layer
   ======================================== */
body.page-python-course {
  /* Background & Surface */
  --bg: #0A0F1E;
  --bg2: #101629;
  --surface: #101629;
  --surface2: #1a2542;

  /* Brand Colors - Blue/Orange/Ink System per DESIGN.md */
  --accent: #FF6B35;      /* Primary CTA - Orange */
  --accent2: #1C6DFF;     /* Structural Blue */
  --accent3: #10B981;     /* Success Green */
  --accent4: #F59E0B;     /* Warning Amber */

  /* Semantic Colors */
  --danger: #EF4444;
  --success: #10B981;
  --warning: #F59E0B;
  --info: #1C6DFF;

  /* Text Colors */
  --text: #E8ECF5;                    /* Primary text */
  --text-secondary: rgba(232,236,245,0.72);
  --muted: rgba(232,236,245,0.7);   /* Secondary/Muted */

  /* Borders */
  --border: rgba(255,255,255,0.1);
  --border-subtle: rgba(255,255,255,0.08);

  /* Effects */
  --glow: 0 0 30px rgba(255,107,53,0.18);
  --glow2: 0 0 30px rgba(28,109,255,0.18);
  --shadow: 0 10px 30px rgba(8, 13, 27, 0.12);

  /* Typography - Poppins/Inter/JetBrains Mono per DESIGN.md */
  font-family: "Inter", sans-serif;
  color: var(--text);

  /* Background gradient per brand */
  background:
    radial-gradient(ellipse 70% 50% at 20% 0%, rgba(28,109,255,0.12), transparent 65%),
    linear-gradient(180deg, #0A0F1E 0%, #101629 100%);
}

/* Hide global starfield on Python course page */
body.page-python-course #stars,
body.page-python-course::before {
  display: none;
}

/* ========================================
   TYPOGRAPHY - Design System Alignment
   ======================================== */
body.page-python-course h1,
body.page-python-course h2,
body.page-python-course h3,
body.page-python-course h4,
body.page-python-course .hero-title,
body.page-python-course .section-title,
body.page-python-course .session-title,
body.page-python-course .problem-label,
body.page-python-course .why-title,
body.page-python-course .sidebar-course-copy strong {
  font-family: "Poppins", sans-serif;
}

body.page-python-course .logo-text {
  font-family: "Poppins", sans-serif;
  font-size: 1.08rem;
}

/* ========================================
   LAYOUT STRUCTURE
   ======================================== */
body.page-python-course #app {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  padding-bottom: 3rem;
}

body.page-python-course #sidebar {
  top: 76px;
  height: calc(100vh - 76px);
  width: 290px;
  min-width: 290px;
}

body.page-python-course #main {
  min-height: calc(100vh - 76px);
  background:
    radial-gradient(ellipse 55% 40% at 15% 0%, rgba(28,109,255,0.08), transparent 60%),
    linear-gradient(180deg, rgba(10,15,30,0.28), rgba(16,22,41,0));
}

/* ========================================
   SIDEBAR STYLING
   ======================================== */
body.page-python-course #sidebar {
  background: rgba(16,22,41,0.94);
  border-right-color: var(--border-subtle);
}

body.page-python-course .sidebar-logo {
  background: rgba(16,22,41,0.96);
}

body.page-python-course .session-item.active,
body.page-python-course .track-session-card {
  border-color: rgba(28,109,255,0.18);
}

/* ========================================
   COLOR & ACCENT OVERRIDES
   ======================================== */
body.page-python-course .hero-badge-dot,
body.page-python-course .hero-badge-text,
body.page-python-course .ctab.active,
body.page-python-course .session-item.active .s-num,
body.page-python-course .course-tab-btns .ctab.active {
  color: var(--accent);
}

body.page-python-course .sidebar-course-label,
body.page-python-course .s-name,
body.page-python-course .s-tag,
body.page-python-course .hero-sub,
body.page-python-course .card-desc,
body.page-python-course .meta-item,
body.page-python-course .session-subtitle,
body.page-python-course .problem-detail,
body.page-python-course .q-text,
body.page-python-course .q-real-world,
body.page-python-course .tsc-desc {
  font-family: "Inter", sans-serif;
}

/* Hero title - shell overrides */
body.page-python-course .hero-title {
  background: none;
  -webkit-text-fill-color: initial;
  color: #FFFFFF;
  text-shadow: 0 0 30px rgba(28,109,255,0.12);
  font-size: clamp(3.2rem, 5.5vw, 5.5rem);
  line-height: 0.98;
  margin-bottom: 0;
}

body.page-python-course .hero-title span {
  color: #6ea8ff;
}

/* Label typography - shell provides brand consistency */
body.page-python-course .hero-badge-text,
body.page-python-course .stat-label,
body.page-python-course .card-tag,
body.page-python-course .session-badge,
body.page-python-course .session-day,
body.page-python-course .concept-label,
body.page-python-course .q-tab,
body.page-python-course .problem-label,
body.page-python-course .ctab,
body.page-python-course .s-num,
body.page-python-course .hero-course-label,
body.page-python-course .sidebar-course-label {
  font-family: "Poppins", sans-serif;
  letter-spacing: 0.08em;
}

body.page-python-course .hero-sub,
body.page-python-course .problem-detail,
body.page-python-course .s-tag,
body.page-python-course .session-subtitle,
body.page-python-course .card-desc,
body.page-python-course .track-meta,
body.page-python-course .q-real-world {
  color: var(--text-secondary);
}

body.page-python-course .sidebar-course-label,
body.page-python-course .ctab,
body.page-python-course .hero-badge-text,
body.page-python-course .section-label,
body.page-python-course .card-tag,
body.page-python-course .session-day,
body.page-python-course .session-badge,
body.page-python-course .concept-label,
body.page-python-course .problem-label,
body.page-python-course .q-tab,
body.page-python-course .tsc-day {
  letter-spacing: 0.08em;
}

/* ========================================
   CARD SURFACES
   ======================================== */
body.page-python-course .hero-badge,
body.page-python-course .stat-box,
body.page-python-course .course-card,
body.page-python-course .track-session-card,
body.page-python-course .problem-block,
body.page-python-course .concept-block,
body.page-python-course .questions-block {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  box-shadow: var(--shadow);
}

body.page-python-course .meta-icon {
  display: none;
}

body.page-python-course .meta-item {
  gap: 0;
}

/* ========================================
   HERO SECTION SHELL OVERRIDES
   ======================================== */
body.page-python-course #hero {
  min-height: auto;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  padding: 4rem 2.75rem 2.5rem;
}

body.page-python-course .hero-badge {
  margin-bottom: 1.5rem;
}

body.page-python-course .hero-course-mark {
  margin-bottom: 1.15rem;
}

body.page-python-course .hero-course-icon,
body.page-python-course .sidebar-course-icon {
  filter: drop-shadow(0 14px 24px rgba(12, 21, 41, 0.32));
}

body.page-python-course .hero-course-copy {
  gap: 0.55rem;
}

body.page-python-course .hero-course-label,
body.page-python-course .sidebar-course-label {
  color: rgba(232,236,245,0.68);
}

body.page-python-course .sidebar-course-copy strong {
  color: #FFFFFF;
}

body.page-python-course .hero-sub {
  max-width: 46rem;
  font-size: 1.05rem;
  line-height: 1.75;
  margin-bottom: 2rem;
  font-weight: 400;
  letter-spacing: 0;
}

body.page-python-course .hero-stats,
body.page-python-course .hero-cta {
  justify-content: flex-start;
}

body.page-python-course .hero-stats {
  gap: 1rem;
  margin-bottom: 2rem;
}

body.page-python-course .stat-box {
  min-width: 150px;
  padding: 1rem 1.15rem;
}

/* ========================================
   SECTION PADDING
   ======================================== */
body.page-python-course #overview,
body.page-python-course .tracks-section,
body.page-python-course #session-view {
  padding-left: 2.75rem;
  padding-right: 2.75rem;
}

body.page-python-course .section-header {
  text-align: left;
  max-width: 44rem;
  margin: 0 0 2rem;
}

body.page-python-course .overview-grid,
body.page-python-course .track-grid {
  max-width: none;
}

/* ========================================
   COMPONENT RADIUS
   ======================================== */
body.page-python-course .course-card,
body.page-python-course .track-session-card,
body.page-python-course .problem-block,
body.page-python-course .concept-block,
body.page-python-course .questions-block,
body.page-python-course .session-header {
  border-radius: 20px;
}

/* ========================================
   BUTTONS - Shell provides brand styling
   ======================================== */
body.page-python-course .btn-primary,
body.page-python-course .btn-outline {
  font-family: "Inter", sans-serif;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.95rem;
}

body.page-python-course .stat-box:nth-child(1) .stat-num,
body.page-python-course .s-num.basic,
body.page-python-course .basic .s-num {
  color: var(--accent3);
}

body.page-python-course .stat-box:nth-child(2) .stat-num,
body.page-python-course .s-num.adv,
body.page-python-course .adv .s-num {
  color: var(--accent2);
}

body.page-python-course .btn-primary {
  background: var(--accent);
}

body.page-python-course .btn-primary:hover {
  background: #e85a20;
}

body.page-python-course .btn-secondary,
body.page-python-course .back-btn,
body.page-python-course .btn-outline {
  background: transparent;
  color: #FFFFFF;
  border-color: rgba(255,255,255,0.2);
}

body.page-python-course .btn-outline:hover,
body.page-python-course .back-btn:hover,
body.page-python-course .btn-secondary:hover {
  background: rgba(255,255,255,0.08);
}

body.page-python-course #hero {
  padding-top: 4rem;
}

/* ========================================
   QUESTION TABS
   ======================================== */
body.page-python-course .q-tab.active,
body.page-python-course .session-item.active {
  border-color: rgba(255,107,53,0.3);
  background: linear-gradient(135deg, rgba(255,107,53,0.18), rgba(28,109,255,0.08));
}

body.page-python-course .q-tab.easy.active {
  background: rgba(16,185,129,0.15);
}

body.page-python-course .q-tab.medium.active {
  background: rgba(28,109,255,0.15);
}

body.page-python-course .q-tab.hard.active {
  background: rgba(255,107,53,0.15);
}

body.page-python-course #session-view {
  padding-top: 2rem;
}

/* ========================================
   FOOTER
   ======================================== */
body.page-python-course .footer-grid {
  color: rgba(255,255,255,0.85);
}

body.page-python-course .site-footer {
  margin-top: 3rem;
}

/* ========================================
   RESPONSIVE OVERRIDES
   ======================================== */
@media (max-width: 900px) {
  body.page-python-course #app {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  body.page-python-course #sidebar {
    top: 76px;
    height: calc(100vh - 76px);
  }

  body.page-python-course #hero,
  body.page-python-course #overview,
  body.page-python-course .tracks-section,
  body.page-python-course #session-view {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (max-width: 650px) {
  body.page-python-course #app {
    grid-template-columns: 1fr;
  }

  body.page-python-course #main {
    min-height: auto;
  }

  body.page-python-course #hero {
    text-align: left;
    padding-top: 2rem;
  }

  body.page-python-course .hero-title {
    font-size: clamp(2.6rem, 10vw, 3.5rem);
  }

  body.page-python-course .hero-stats {
    gap: 0.75rem;
  }
}