@import url('https://fonts.googleapis.com/css2?family=Stoke');

/*
  WHAT CHANGED FROM THE ORIGINAL PAGE

  This stylesheet is the responsive version of style.css. The HTML copy in
  rwd/index.html also adds one important line:

    <meta name="viewport" content="width=device-width, initial-scale=1">

  Without that viewport tag, mobile browsers pretend the page is much wider
  than the phone screen, so responsive CSS does not behave as expected.

  Main responsive changes:
  1. Use box-sizing: border-box so padding and borders stay inside widths.
  2. Make images fluid with max-width: 100% and height: auto.
  3. Replace the fixed-width header row with a wrapping flexbox layout.
  4. Use flex-basis to describe preferred column widths instead of hard widths.
  5. Use gap for spacing instead of margin hacks between layout columns.
  6. Add media queries at 920px and 640px to adjust tablet and phone layouts.
  7. Let lists and long text wrap so they do not overflow small screens.
*/

* {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  display: flex;
  /* data is stacked vertically "Items are put into a column" */
  flex-direction: column;
  min-width: 0;
  margin: 0;
  color: #111;
  font-family: Arial, sans-serif;
  line-height: 1.45;
  background: #fff;
}

img {
  /* Responsive images: shrink with their containers, keep natural proportions. */
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: #00598c;
}

header {
  /*
    The original header was a single flex row. This version still uses flexbox,
    but allows wrapping so the portrait, text, and landscape image can move to
    new lines as the screen gets narrower.

    flex: row is default here 
  */
  display: flex;
  flex-wrap: wrap;  /* nowrap - all flex items forced on one line. wrap - can wrap */
  justify-content: center;
  gap: clamp(16px, 3vw, 32px);  /* spacing between items: min, preferred, max, 3vw = 3% of viewport width */
  /* 16px for small screens, 3vw for medium and 32px for large screens */
  align-items: center;  /* Vertical centering  since flex: row */
  width: min(100%, 1440px);  /* Keep the header roomy, but do not let huge screens pull it apart. */
  margin: 0 auto;
  padding: clamp(16px, 3vw, 32px);
}

.photo figure {
  width: min(100%, 236px);  /* 100% of container on smaller screens, up to 236px on large */
  margin: 0;
}

.photo {
  /* Prefer a 236px column, but allow it to shrink if space is tight. */
  flex: 0 1 236px;
  /* flex-grow, flex-shrink, flex-basis 
  First parameter is 0 -> Do not grow to fill extra space
  Second parameter is 1 -> Do shrink if there is not enough space */
}

.photo img {
  aspect-ratio: 1;
  width: 100%;
  border-radius: 4px;
  object-fit: cover;
}

figcaption {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-style: italic;
  line-height: 1.3;
}

#info {
  /* Take the remaining row space; start wrapping below about 320px. */
  flex: 1 1 320px;
  min-width: 0;
}

h1 {
  margin: 0 0 0.1em;
  color: black;
  font-family: 'Stoke', serif;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: bold;
  line-height: 1.12;
}

#signature {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.25;
}

.cs {
  display: block;
  font-style: italic;
}

.samueli {
  display: block;
}

.blue {
  color: #2774ae;
  font-weight: bold;
  font-variant: small-caps;
}

.gold {
  color: #ffc72c;
  font-weight: bold;
  font-variant: small-caps;
}

#contact {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 1rem;
}

#contact p {
  margin: 0;
}

code {
  white-space: normal;
  overflow-wrap: anywhere;
}

.email,
.office {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.office span {
  display: block;
}

.note {
  color: #b00020;
  font-size: 0.9em;
}

.rightimg {
  /* Keep the Mammoth photo at its natural size on roomy screens. */
  flex: 0 0 430px;
  width: 430px;
  margin-left: 0;
}

.vertical-center {
  margin: 0;
  position: relative;
}

.rightimg img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

@media (max-width: 1120px) {
  /*
    Once the header gets crowded, remove the decorative Mammoth image instead
    of forcing it below the contact information or squeezing the text.
  */
  .rightimg {
    display: none;
  }
}

.welcome {
  /* Match the header width, while keeping the text left-aligned. */
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 32px) clamp(24px, 5vw, 56px);
  text-align: left;
}

.important {
  margin: 24px 0;
}

.box {
  display: flex;
  flex-direction: column;   /* main axis is vertical */
  justify-content: center;  /* Vertical (as compared to align-items */
  width: min(100%, 860px);
  min-height: 100px;
  margin: 10px auto 20px;
  padding: clamp(16px, 3vw, 24px);
  background-color: lightyellow;
  text-align: center;
}

.box h3,
.title {
  margin: 0 0 0.75rem;
  line-height: 1.25;
}

.schedule {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}

.classes-div {
  width: 100%;
}

.classboxes {
  /* Course cards keep card-sized widths and wrap only when there is not room. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  width: 100%;
}

.classbox {
  /*
    Each course card has a real card width. It does not grow to fill the row.
    Text wraps inside the card, and the cards wrap to a new row when needed.
  */
  flex: 0 0 320px;
  width: 320px;
  max-width: 100%;
  min-height: 250px;
  padding: 16px;
  border: 0 solid black;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.classbox h3 {
  margin-top: 0;
  font-variant: small-caps;
}

.fall {
  background-color: rgba(211, 84, 0, 0.3);
  color: rgba(211, 100, 50, 1);
}

.winter {
  background-color: rgba(0, 0, 255, 0.3);
  color: rgba(0, 0, 255, 1);
}

.spring {
  background-color: rgba(0, 255, 0, 0.3);
  color: rgba(0, 100, 100, 1);
}

.summer {
  background-color: rgba(255, 238, 88, 0.45);
  color: rgb(214, 51, 132);
}

.crsorg {
  font-style: italic;
}

.crscode {
  font-weight: bold;
}

.lecture {
  font-size: 0.8em;
}

.philosophy {
  display: flex;
  justify-content: center;
  margin: 30px 0;
}

.philosophy + .philosophy {
  margin-top: -15px;
}

.enclosed-list {
  display: flex;
  justify-content: center;
  margin-block: 1em;
}

.enclosed-list ul {
  /* Link rows can wrap on medium screens; phones stack them below. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.enclosed-list li {
  border-right: 1px solid black;
  margin-right: 5px;
  padding-right: 10px;
}

.enclosed-list li:last-child {
  border-right: none;
  margin-right: 0;
  padding-right: 0;
}

#overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.7);
}

#overlay-content {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(90vw, 560px);
  max-height: 85vh;
  overflow: auto;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 5px solid #000;
  padding: 20px;
  box-shadow: 0 0 10px 0 #000;
  text-align: center;
}

#overlay-content a {
  display: block;
  margin-bottom: 10px;
  text-decoration: none;
}

#close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
  color: #000;
  border-radius: 5px;
  padding: 5px;
  font-size: 20px;
}

.clear {
  clear: both;
}

.pre {
  font-family: Courier, monospace;
}

.quip {
  font-style: italic;
}

@media (max-width: 920px) {
  /*
    Tablet layout:
    - The portrait and text remain side by side when possible.
    - The Mammoth image has already been hidden by this width.
    - Course cards keep their minimum width and wrap into new rows.
  */
  .photo {
    flex-basis: 200px;
  }

  #info {
    flex-basis: calc(100% - 232px);
  }
}

@media (max-width: 640px) {
  /*
    Phone layout:
    - Header content stacks vertically and centers.
    - The Mammoth image stays hidden to save vertical space.
    - Main content keeps a smaller page gutter.
    - Link lists stack so each item is easy to tap.
  */
  header {
    justify-content: center;
    text-align: center;
    padding: 16px;
  }

  .photo figure {
    width: min(68vw, 220px);
  }

  #contact {
    align-items: center;
  }

  #info {
    flex-basis: 100%;
    margin-left: 0;
  }

  .welcome {
    width: min(100% - 24px, 1080px);
  }

  .box {
    min-height: 0;
  }

  .enclosed-list ul {
    flex-direction: column;
    align-items: center;
  }

  .enclosed-list li {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
  }

  #overlay-content {
    padding: 18px 14px;
  }
}