/* 🧑‍🎓 til.css - Stylesheet for the "Today I Learned" (TIL) page. */

/*
  📄 The .til-container holds content for the TIL page.
  Controls width and spacing with a mobile-first approach.
*/
.til-container {
  /* --- Size It --- */

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

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

  /* Centers container horizontally */
  margin: 0 auto;

  /* Scalable inner spacing (32px ÷ 16px = 2rem) */
  padding: 2rem;
}

/* Unordered List */
.til-container ul {
  /* --- Space It --- */

  /* Indents list items */
  padding-left: 1.5rem;

  /* Aligns text to left */
  text-align: left;
}

/* List items (bullet points) */
.til-container ul li {
  /* --- Size It --- */

  /* 1.5rem = 24px at 16px root */
  font-size: 1.5rem;

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

  /* Displays as block for vertical stacking */
  display: block;

  /* Vertical spacing between items */
  margin: 1rem 0;

  /* Anchors ::before bullet positioning */
  position: relative;

  /* Inner left spacing for text */
  padding-left: 2rem;

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

/* Link styling */
.til-container ul li a {
  /* --- Space It --- */

  /* 0.2rem top/bottom, 0.4rem left/right */
  padding: 0.2rem 0.4rem;

  /* Outer left spacing */
  margin-left: 0.3rem;

  /* --- Style It --- */
  color: goldenrod;
  text-decoration: none;
  transition: color 0.3s;
}

/* Custom bullets using ::before for Safari compatibility */
.til-container ul li::before {
  /* --- Space It --- */

  /* Sets pseudo-element relative to parent <li> */
  position: absolute;

  /* Aligns bullet to left edge */
  left: 0;

  /* --- Style It --- */
  content: '💠';
}

/* Custom bullet for second list item */
.til-container ul li:nth-child(2)::before {
  /* --- Style It --- */
  content: '🧮';
}

/* Custom bullet for third list item */
.til-container ul li:nth-child(3)::before {
  /* --- Style It --- */
  content: '🌱';
}

/* Custom bullet for fourth list item */
.til-container ul li:nth-child(4)::before {
  /* --- Style It --- */
  content: '💫';
}

/* 🧪 Link interaction states - Styles links on hover or focus. */
.til-container ul li a:hover,
.til-container ul li a:focus {
  /* --- Style It --- */
  color: goldenrod;
  text-decoration: underline;
}

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

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