/* Reset basic browser defaults */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  padding: 0;
  margin: 0;
  background: #f9f9f9;
  color: #333;
}

/* Navigation bar */
nav {
  background: #333;
  color: white;
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
}

nav a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  padding: 0.5em 1em;       /* add some clickable area */
  border-radius: 4px;       /* soften edges */
  transition: all 0.2s ease; /* smooth hover effect */
}

nav a:hover {
  text-decoration: underline;
  color: #333;
  background-color: white;
}

/* Main content */
main {
  max-width: 120ch;
  margin: auto;
  padding: 0 1rem;
}

/* Space between paragraphs throughout the website. */
p {
  margin: 1em 0;
}

/* Responsive images */
img {
  max-width: 100%;
  height: auto;
}

/* Make nav stack on small screens */
@media (max-width: 600px) {
  nav {
    flex-direction: column;
    align-items: center;
  }
}

ul {
  margin: 1em 0;
  padding-left: 1.5em;
}

li {
  margin: 0.5em 0;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 1em;     /* space before headings */
  margin-bottom: 0.5em; /* little space after heading */
  line-height: 1.2;    /* headings are tighter */
}

.box {
  border: 1px solid #ccc;      /* subtle gray border */
  border-radius: 8px;          /* rounded corners */
  background: #fff;            /* white background */
  padding: 1.5rem;             /* inner spacing */
  margin: 1.5rem 0;            /* spacing between offers */
  box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* light shadow for depth */
}

/* Headings inside offers */
.box h3 {
  margin-top: 0;
  color: #333;
}

/* Styles scoped to the lecture catalogue. */
.materials-page { padding-bottom: 3rem; }
.materials-page .materials-note { margin: 1rem 0 1.5rem; color: #515b66; }
.materials-page .materials-topics {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: 1rem;
  margin: 1.5rem 0 2.5rem;
  background: #edf2f6;
  border: 1px solid #d5dfe8;
  border-radius: .6rem;
}
.materials-page a { color: #17527d; text-underline-offset: .18em; }
.materials-page a:hover { color: #103650; }
.materials-page a:focus-visible { outline: 3px solid #936000; outline-offset: 3px; }
.materials-page .materials-topics a { padding: .4rem .7rem; border-radius: .3rem; background: #fff; }
.materials-page .lecture-section { margin-top: 2.5rem; }
.materials-page h2 { scroll-margin-top: 1rem; }
.materials-page .lecture-count { font-size: .7em; font-weight: normal; color: #58616a; white-space: nowrap; }
.materials-page .lecture-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  border: 1px solid #d5dfe8;
  border-radius: .6rem;
  background: #fff;
}
.materials-page .lecture {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  padding: 1rem 1.25rem;
}
.materials-page .lecture + .lecture { border-top: 1px solid #e2e7ec; }
.materials-page .lecture-info { min-width: 0; overflow-wrap: anywhere; }
.materials-page .lecture h3 { margin: 0; font-size: 1.05rem; line-height: 1.45; }
.materials-page .lecture-description { margin: .4rem 0 0; color: #515b66; font-size: .95rem; }
.materials-page .lecture-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  flex-shrink: 0;
  max-width: 45%;
}
.materials-page .lecture-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.5rem;
  min-height: 2.75rem;
  padding: .4rem .75rem;
  border: 1px solid #bbccdb;
  border-radius: .35rem;
  background: #f1f6fa;
  font-weight: bold;
  text-decoration: none;
}
.materials-page .lecture-links a:hover { background: #dfebf4; border-color: #17527d; text-decoration: underline; }
.materials-page .lecture-unavailable { color: #626970; font-size: .8rem; }
.materials-page .materials-back { text-align: right; font-size: .9rem; }
@media (max-width: 600px) {
  .materials-page .lecture { flex-direction: column; align-items: flex-start; }
  .materials-page .lecture-links { justify-content: flex-start; max-width: 100%; }
}