/* Lesson-styles.css - Styles for lesson plan pages on Tori Schuyler. */

/* Lesson container - Holds lesson plan content, controls width and spacing. */
.lesson-container {
  /* --- Size It --- */

  /* Full width for mobile */
  max-width: 100vw;

  /* Improves readability */
  line-height: 1.5;

  /* --- Space It --- */

  /* 0 top/bottom, auto left/right outer spacing (0 auto at 16px root) - centers the container */
  margin: 0 auto;

  /* 0 top/bottom, 16px left/right inner spacing (1rem at 16px root) */
  padding: 0 1rem;
}

/* Lesson image - responsive and centered. */
.lesson-container img {
  /* --- Size It --- */

  /* Scales to container width */
  max-width: 100%;

  /* --- Space It --- */

  /* Puts image on its own line */
  display: block;

  /* 16px top/bottom, auto left/right outer spacing (1rem auto at 16px root) - centers, adds top/bottom space */
  margin: 1rem auto;
}

/* Page heading */
.lesson-container h1 {
  /* --- Size It --- */
  font-size: 2rem;

  /* --- Space It --- */

  /* 24px top, 0 bottom/left/right outer spacing (1.5rem at 16px root) - top spacing */
  margin-top: 1.5rem;

  /* --- Style It --- */
  color:  #F37021;
}

.light-theme .lesson-container h1 {
  /* --- Style It --- */
  color: #C00;
}

/* Level 2 Subheadings */
.lesson-container h2 {
  /* --- Space It --- */

  /* 4.8px bottom, 0 top/left/right outer spacing (0.3rem at 16px root) - bottom spacing */
  margin-bottom: 0.3rem;
}

/* Underlined subheading text (excludes emoji) */
.lesson-container h2 span {
  /* --- Style It --- */
  text-decoration: underline;
}

/* Level 3 Subheadings */
.lesson-container h3 {
  /* --- Space It --- */

  /* 20px inner left spacing (1.25rem at 16px root) */
  padding-left: 1.25rem;

  /* --- Style It --- */
  font-family: Righteous, system-ui, sans-serif;
  color: #F89317;
}

.light-theme .lesson-container h3 {
  /* --- Style It --- */
  color: #63B0CD;
}

/* Ordered and unordered lists - Lesson goals, steps, and materials. */
.lesson-container ol,
.lesson-container ul {
  /* --- Size It --- */
  font-size: 1.125rem;

  /* --- Space It --- */

  /* 0 top/bottom/right, 56px left inner spacing (3.5rem at 16px root) - Indents lists */
  padding-left: 3.5rem;
}

/* Nested unordered lists */
.lesson-container ul ul {
  /* --- Space It --- */

  /* 0 top/bottom/right, 24px left inner spacing (1.5rem at 16px root) - Tighter indentation */
  padding-left: 1.5rem;
}

/* List items */
.lesson-container li {
  /* --- Size It --- */
  font-size: 1.125rem;

  /* --- Space It --- */

  /* 12px bottom, 0 top/left/right outer spacing (0.75rem at 16px root) */
  margin-bottom: 0.75rem;
}

/* Paragraph text */
.lesson-container p {
  /* --- Size It --- */
  font-size: 1.125rem;

  /* --- Space It --- */

  /* 0 top/bottom, 20px left/right inner spacing (1.25rem at 16px root) */
  padding: 0 1.25rem;
}

.centered {
    /* --- Space It --- */

    /* Horizontally centers the text */
    text-align: center;
}

/*
  💻 Tablet/Desktop Styles
  Applies above 768px (tablet portrait width, e.g., iPad).
*/
@media (width >= 769px) {
  .lesson-container {
    /* --- Size It --- */

    /* Limits width for readability on larger screens */
    max-width: 80vw;
  }

  .lesson-container h1 {
    /* --- Size It --- */
    font-size: 3.5rem;
  }
}