/* ======================================================
   PYTHON DETECTIVE — Stylesheet
   
   This file ONLY contains styles specific to Python Detective.
   The base site styles (header, footer, container, typography,
   responsive) come from the main site.css which is loaded first.
   
   When deployed to Django, this file sits alongside site.css.
   For standalone local testing, we include the base styles inline.
   ====================================================== */


/* ======================================================
   BASE STYLES (from site.css — included here for standalone use)
   When deployed to Django, these are redundant but harmless.
   ====================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  scrollbar-gutter: stable;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body { overflow-y: scroll; }

body {
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: #111;
  background-color: #FFFEF8;
  background-image: radial-gradient(rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size: 18px 18px;
}

.container {
  max-width: 760px;
  margin: 0 auto;
}

h1 {
  font-size: 34px;
  line-height: 1.18;
  margin: 0 0 22px 0;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 20px;
  line-height: 1.35;
  margin: 36px 0 12px 0;
  font-weight: 600;
}

h3 {
  font-size: 18px;
  line-height: 1.4;
  margin: 28px 0 10px 0;
  font-weight: 600;
}

p {
  margin: 0 0 20px 0;
  font-size: 18px;
  line-height: 1.7;
}

a {
  color: inherit;
  text-decoration: none;
}

code {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.88em;
  background: rgba(0,0,0,0.04);
  padding: 1px 5px;
  border-radius: 3px;
}

/* Header */
.site-header {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.site-header a,
header a {
  color: inherit;
  text-decoration: none;
}

.site-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo img {
  display: block;
  height: 80px;
  width: auto;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(0,0,0,0.18);
  padding: 8px 10px;
  font-size: 18px;
  cursor: pointer;
}

.site-nav a {
  margin-left: 16px;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.site-nav a:hover { text-decoration: underline; }

/* Main */
main { padding: 48px 24px; }

/* Footer */
.site-footer {
  margin-top: 96px;
  padding: 36px 24px 48px;
  border-top: 0.5px solid rgba(0,0,0,0.08);
  background: rgba(255, 254, 248, 0.6);
}

.site-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
}

.site-footer__brand {
  margin: 0 0 6px 0;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.7);
}

.site-footer__tagline {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(0,0,0,0.55);
  max-width: 360px;
}

.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.site-footer__nav a {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.55);
  text-decoration: none;
}

.site-footer__nav a:hover { color: rgba(0,0,0,0.9); }

/* Responsive (matching site.css exactly) */
@media (max-width: 480px) {
  .site-header { padding: 32px 32px 20px 32px; }
  main { padding: 40px 32px; }
  .site-footer { padding: 40px 32px 56px; }

  .site-header__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo toggle"
      "nav  nav";
    row-gap: 12px;
    align-items: center;
  }

  .logo { grid-area: logo; min-width: 0; }

  .logo img {
    height: 72px;
    width: auto;
    max-width: 100%;
    display: block;
  }

  .nav-toggle { display: inline-block; grid-area: toggle; justify-self: end; }

  .site-nav {
    grid-area: nav;
    display: none;
    flex-direction: column;
    gap: 14px;
    min-width: 170px;
    margin-left: auto;
    padding: 12px 14px;
    background: rgba(255, 254, 248, 0.96);
  }

  .site-nav a { text-align: right; margin-left: 0; }

  .nav-open .site-nav { display: flex; }

  .site-footer__inner {
    flex-direction: column;
    gap: 24px;
  }

  .site-footer__nav { gap: 10px; }
}

@media (min-width: 481px) and (max-width: 900px) {
  main { padding: 56px 56px; }
  .container { max-width: 680px; }
}


/* ======================================================
   PYTHON DETECTIVE — Landing Page
   ====================================================== */

/* Hero */
.hero {
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 0.5px solid rgba(0,0,0,0.08);
}

.hero__label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.55);
  margin: 0 0 10px 0;
}

.hero__title {
  font-size: 42px;
  line-height: 1.1;
  margin: 0 0 16px 0;
  letter-spacing: -0.02em;
}

.hero__subtitle {
  font-size: 19px;
  line-height: 1.6;
  margin: 0;
  color: rgba(0,0,0,0.75);
}

.intro { margin-bottom: 48px; }

/* Section dividers (reused across pages) */
.pd-section {
  margin-top: 64px;
  padding-top: 18px;
  border-top: 0.5px solid rgba(0,0,0,0.08);
}

.pd-section__label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.55);
  margin: 0 0 10px 0;
}

/* Lessons list */
.lessons { margin-top: 28px; }

.phase {
  margin-top: 42px;
  padding-top: 28px;
  border-top: 0.5px solid rgba(0,0,0,0.12);
}

.phase:first-child {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}

.phase__title {
  font-size: 13px;
  line-height: 1.4;
  margin: 0 0 20px 0;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.65);
}

/* Lesson cards */
.lesson-card {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  margin-bottom: 28px;
  padding: 18px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 8px;
  background: rgba(255, 254, 248, 0.96);
  transition: border-color 120ms ease, transform 120ms ease;
}

.lesson-card:hover {
  border-color: rgba(0,0,0,0.22);
  transform: translateY(-1px);
}

.lesson-card__number {
  font-size: 20px;
  font-weight: 600;
  color: rgba(0,0,0,0.35);
  line-height: 1.2;
}

.lesson-card__content { min-width: 0; }

.lesson-card__title {
  margin: 0 0 8px 0;
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
}

.lesson-card__title a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease;
}

.lesson-card__title a:hover {
  border-bottom-color: rgba(0,0,0,0.25);
}

.lesson-card__skill {
  margin: 0 0 10px 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.5);
}

.lesson-card__desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(0,0,0,0.7);
}

/* CTA box */
.cta {
  margin-top: 64px;
  padding: 32px 28px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  background: rgba(255, 254, 248, 1);
}

.cta h2 { margin-top: 0; margin-bottom: 14px; }

.cta p {
  margin-bottom: 24px;
  font-size: 16px;
  color: rgba(0,0,0,0.75);
}

.cta__button {
  display: inline-block;
  padding: 0;
  background: none;
  border: none;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.8);
  border-bottom: 1px solid rgba(0,0,0,0.35);
  padding-bottom: 4px;
  text-decoration: none;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}

.cta__button:hover {
  color: rgba(0,0,0,0.95);
  border-bottom-color: rgba(0,0,0,0.7);
}


/* ======================================================
   PYTHON DETECTIVE — Lesson Pages
   ====================================================== */

/* Lesson header */
.lesson__header {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 0.5px solid rgba(0,0,0,0.10);
}

.lesson__meta {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.55);
  margin: 0 0 10px 0;
}

.lesson__title {
  margin: 0;
  font-size: 34px;
  line-height: 1.2;
}

.lesson__objective {
  margin: 20px 0 0 0;
  padding: 18px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 8px;
  background: rgba(255, 254, 248, 0.96);
}

.lesson__objective-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.55);
  margin: 0 0 10px 0;
}

.lesson__objective-content {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(0,0,0,0.75);
}

/* Code cells */
.code-cell {
  margin: 28px 0;
  border: 1px solid rgba(0,0,0,0.18);
  border-radius: 8px;
  background: #1a1a1a;
  overflow: hidden;
}

.code-cell__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.code-cell__label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
}

.code-cell__run {
  padding: 4px 14px;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  font-size: 12px;
  font-family: Helvetica, Arial, sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}

.code-cell__run:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.25);
}

.code-cell__run:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.code-cell__editor {
  display: block;
  width: 100%;
  padding: 16px;
  border: none;
  background: #1a1a1a;
  font-family: "Courier New", Courier, monospace;
  font-size: 14px;
  line-height: 1.6;
  color: #e8e4de;
  resize: none;
  overflow: hidden;
  outline: none;
  tab-size: 4;
  -moz-tab-size: 4;
}

.code-cell__editor:focus {
  background: #1e1e1e;
}

.code-cell__output {
  display: none;
  padding: 16px;
  font-family: "Courier New", Courier, monospace;
  font-size: 14px;
  line-height: 1.6;
  color: #e87461;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: #1a1a1a;
  white-space: pre-wrap;
  word-break: break-word;
}

.code-cell__output.error {
  color: #ff4444;
}

.code-cell__output.no-output {
  color: rgba(255,255,255,0.3);
}

/* Info boxes */
.info-box {
  margin: 28px 0;
  padding: 18px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 8px;
  background: rgba(255, 254, 248, 0.96);
}

.info-box__label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.55);
  margin: 0 0 10px 0;
}

.info-box h3 { margin-top: 0; }

.info-box p {
  font-size: 16px;
  line-height: 1.65;
}

.info-box p:last-child { margin-bottom: 0; }

/* Figures */
.figure { margin: 32px 0; }

.figure__caption {
  margin: 8px 0 0 0;
  font-size: 13px;
  color: rgba(0,0,0,0.45);
  text-align: center;
  font-style: italic;
}

/* Lesson nav */
.lesson-nav {
  margin-top: 64px;
  padding-top: 28px;
  border-top: 0.5px solid rgba(0,0,0,0.08);
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.lesson-nav__link {
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(0,0,0,0.7);
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease;
}

.lesson-nav__link:hover {
  border-bottom-color: rgba(0,0,0,0.35);
}

/* Responsive — code cells */
@media (max-width: 480px) {
  .hero__title { font-size: 32px; }
  .lesson__title { font-size: 28px; }

  .lesson-card {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .lesson-card__number { font-size: 16px; }

  .code-cell__editor {
    font-size: 13px;
    padding: 12px;
  }

  .code-cell__output {
    font-size: 13px;
    padding: 12px;
  }
}