/* Base */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: Arial, Helvetica, sans-serif; line-height: 1.45; color:#222; background:#4f4e50; }

/* Header (Grid + sticky) */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background:#5767fa;
  border-bottom:1px solid #ddd;
  padding:16px 12px;
  text-align:center;
  display:grid;
  gap:6px;
  place-items:center;
}
.site-header .role { margin:0; color:#000000; font-size:14px; }

/* Nav (Flex) */
.site-nav { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.site-nav a { text-decoration:none; color:#000000; padding:6px 8px; border:1px solid transparent; }
.site-nav a:hover { text-decoration:underline; }

/*  Main layout (Grid) */
.layout {
  max-width:1100px;
  margin:24px auto;
  padding:0 12px;
  display:grid;
  gap:16px;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "about skills"
    "about experience"
    "edu sheridan"
    "contact contact";
}

/* Grid area assignments */
.about      { grid-area: about; }
#skills     { grid-area: skills; }
#experience { grid-area: experience; }
#edu-skills { grid-area: edu; }
#sheridan   { grid-area: sheridan; }
#contact    { grid-area: contact; }

/* Cards */
.card { background:#dad7d7; border:1px solid #ddd; padding:16px; }
.card h2 { margin-top:0; }

/* About specifics */
.headshot { margin:0 0 12px; }
.headshot img { width:100%; height:auto; border:1px solid #e6e6e6; }
.about-text { position: relative; }

/* Open to Co-op badge */
.badge {
  position:absolute;
  right:8px;
  top:8px;
  background:#e8f5e9;
  border:1px solid #b7e1bf;
  padding:4px 8px;
  font-size:12px;
}

/* Skills list (Flex chips) */
.skills { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.skills li { border:1px solid #ddd; padding:6px 8px; background:#fafafa; }

/* Experience entries */
.job + .job { margin-top:12px; }
.job-head { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px; }
.job-meta { margin:0; color:#555; }

/* Contact: slim bar */
#contact { padding:10px 12px; text-align:center; }
#contact h2 { display:inline; font-size:16px; margin:0 8px 0 0; }
#contact p  { display:inline; margin:0; font-size:14px; }

/* Footer */
.site-footer { text-align:center; color:#666; padding:20px 10px; }

/* Responsive */
@media (max-width: 900px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "about"
      "skills"
      "experience"
      "edu"
      "sheridan"
      "contact";
  }
}

/* Removes content when page becomes to small */
@media (max-width: 500px) {
  body { background:#eef6ff; }
  .site-nav a { padding:6px; }
  .headshot img { border-width:1px; }
  .badge { position:static; display:inline-block; margin-top:6px; }
}