/* pink and blue Spider-Man color theme using css variables with fallbacks,
   hex, rgb, hsl, rgba, named colors, color() for wider-gamut, and color-mix() */
:root {
  --blue: #1565c0;
  --pink: #d16ca3;
  --pink-wide: color(display-p3 0.75 0.38 0.6); /* wider-gamut color() */
}

/* universal selector to normalize box sizing across every element */
* {
  box-sizing: border-box;
}

/* resets default spacing and sets the base font */
body {
  font-family: 'Poppins', sans-serif;
  background-color: #fff0f5;
  color: rgb(26, 26, 46);
  margin: 0;
  padding: 0;
  min-width: 320px;
}

/* selector list to apply shared base styles to all headings at once */
h2, h3 {
  font-weight: 600;
}

/* sticky so the nav stays visible while you scroll */
header {
  background-color: var(--blue, #1565c0);
  color: white;
  padding: 1rem 2rem;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* child combinator targets only the div that's a direct child of header */
header > div {
  text-align: center;
}

header h1 {
  font-size: 1.8rem;
  text-align: center;
  text-decoration: none;
  margin-top: 0;
  margin-bottom: 0.25rem;
}

header h2 {
  font-size: 1rem;
  text-align: center;
  color: var(--pink, hotpink);
  margin-top: 0;
  margin-bottom: 0.25rem;
}

/* flexbox nav that wraps onto multiple lines on small screens */
nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
}

/* nav links styled as little pill buttons with nested hover and active states */
nav a {
  display: inline-block;
  color: white;
  text-decoration: none;
  background-color: var(--pink, hotpink);
  padding-top: 4px;
  padding-right: 12px;
  padding-bottom: 4px;
  padding-left: 12px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.5);
  border-width: 1px;
  border-radius: 4px;

  &:hover {
    background-color: color-mix(in srgb, var(--pink), white 30%);
    color: #1a1a2e;
  }

  &:active {
    background-color: hsl(326, 80%, 30%);
  }
}

/* hide the raw hr tags since the grid gap handles spacing instead */
hr {
  display: none;
}

/* grid layout for the page content with auto margins to keep it centered */
main {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  gap: 1.5rem;
  position: relative;
  width: 90%;
  max-width: 900px;
  min-width: 280px;
  margin-top: 2rem;
  margin-right: auto;
  margin-bottom: 2rem;
  margin-left: auto;
}

/* each section gets a card look with a blue border */
section {
  background-color: #ffffff;
  border-style: solid;
  border-color: var(--blue, #1565c0);
  border-width: 2px;
  border-radius: 8px;
  padding: 1.5rem;
}

/* id selector that gives the attendance section a pink left accent */
#attendance {
  border-left: 4px solid var(--pink, hotpink);
}

/* uses has() so sections that contain a subheading get a faint blue tint */
section:has(h3) {
  background-color: color-mix(in srgb, var(--blue), white 95%);
}

/* class selector that applies a base style to any element with the note class */
.note {
  border-left: 3px solid var(--pink, hotpink);
  padding-left: 0.5rem;
}

/* combines element and class to add extra styling specifically on p elements with the note class */
p.note {
  background-color: color-mix(in srgb, var(--pink), white 88%);
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  font-size: 0.9rem;
}

h2 {
  color: var(--blue, #1565c0);
  text-align: left;
  text-decoration: underline;
  font-size: 1.4rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

h3 {
  color: var(--pink-wide, var(--pink, hotpink));
}

/* adjacent sibling combinator targets the paragraph sitting right after a section heading */
h2 + p {
  font-weight: 500;
}

/* general sibling combinator catches any paragraph that follows a heading, not just the first */
h2 ~ p {
  line-height: 1.7;
}

/* descendant combinator to style links anywhere inside main */
main a {
  color: var(--pink, hotpink);
  text-decoration: underline;
}

main a:hover {
  color: var(--blue, #1565c0);
}

/* attribute selector to style only text inputs to match the theme */
input[type="text"] {
  border-style: solid;
  border-color: var(--blue, #1565c0);
  border-width: 1px;
  border-radius: 4px;
  padding: 0.3rem 0.5rem;
}

/* keep images responsive but not too wide */
img {
  width: 100%;
  max-width: 15cm;
  height: auto;
}

/* submit button */
button {
  display: block;
  background-color: var(--pink, hotpink);
  color: white;
  border-style: none;
  border-radius: 4px;
  padding: 0.5em 1.5em;
  margin-top: 1rem;
  width: 8rem;
  height: 2.5rem;
  font-size: 10pt;
  cursor: pointer;
}

button:hover {
  background-color: var(--blue, #1565c0);
}

button:active {
  background-color: hsl(220, 80%, 30%);
}

/* footer sits at the bottom, matches the header color */
footer {
  background-color: var(--blue, #1565c0);
  color: white;
  text-align: center;
  padding: 1rem;
}

/* reflows the layout on phones to tighten spacing and go full width */
@media (max-width: 600px) {
  header h1 {
    font-size: 1.2rem;
  }
  main {
    width: 95%;
  }
  nav ul {
    gap: 0.3rem;
  }
}