/* ============================================================
   GLOBAL DEFAULTS
   Applies to every element on the page.
============================================================ */
* {
  box-sizing: border-box; /* padding/border don't add to element width */
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, sans-serif; /* uses the OS default font */
  background-color: #ffffff;
  color: #1a1a1a;
  line-height: 1.7;
  font-size: 16px;
}

/* Makes all links blue with no underline by default */
a {
  color: #2563eb;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}


/* ============================================================
   NAVIGATION BAR
   Sticks to the top of the screen as you scroll.
============================================================ */
nav {
  position: sticky;    /* stays at top when scrolling */
  top: 0;
  background-color: #ffffff;
  border-bottom: 1px solid #e4e4e0;
  padding: 0 2rem;
}

/* Inner wrapper keeps the nav content centred and not too wide */
.nav-inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;                  /* puts name and links side by side */
  justify-content: space-between;
  align-items: center;
  height: 56px;
}

.nav-name {
  font-weight: 500;
}

/* The list of nav links (About, Skills, etc.) */
.nav-links {
  list-style: none;   /* removes bullet points */
  display: flex;
  gap: 2rem;          /* space between each link */
}

.nav-links a {
  color: #6b6b6b;
  font-size: 14px;
}
.nav-links a:hover {
  color: #1a1a1a;
  text-decoration: none;
}


/* ============================================================
   SECTION LAYOUT
   All sections share this base structure.
   Each section has a full-width background, and an inner
   wrapper (.section-inner) to keep content centred.
============================================================ */
section {
  padding: 4rem 2rem; /* top/bottom, left/right */
}

/* Alternate sections get a light grey background */
section:nth-child(even) {
  background-color: #f8f8f7;
}

/* Keeps content from stretching too wide on large screens */
.section-inner {
  max-width: 720px;
  margin: 0 auto;
}

/* Small uppercase label used as a heading in each section */
.section-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b6b6b;
  margin-bottom: 1.5rem;
}


/* ============================================================
   HERO / ABOUT SECTION
   The first thing visitors see — your name, bio, and buttons.
============================================================ */
#about {
  padding: 5rem 2rem 4rem;
}

/* Small pill label above your name e.g. "Open to work" */
.hero-tag {
  display: inline-block;
  background-color: #eff4ff;
  color: #2563eb;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 1rem;
}

.hero-name {
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 1rem;
}

.hero-bio {
  font-size: 1rem;
  color: #6b6b6b;
  max-width: 520px;
  margin-bottom: 2rem;
}

/* Wraps the row of buttons */
.hero-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap; /* buttons wrap onto new line on small screens */
}

/* Base button style — used for all buttons */
.btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid #e4e4e0;
  color: #1a1a1a;
  background-color: #ffffff;
}
.btn:hover {
  background-color: #f8f8f7;
  text-decoration: none;
}

/* Blue filled button — use for the main call to action */
.btn-primary {
  background-color: #2563eb;
  color: #ffffff;
  border-color: #2563eb;
}
.btn-primary:hover {
  background-color: #1d4ed8;
}


/* ============================================================
   SKILLS SECTION
   A row of pill-shaped tags, one per skill.
   To add a skill: copy one <span class="skill-tag"> in the HTML.
============================================================ */
.skills-grid {
  display: flex;
  flex-wrap: wrap; /* wraps onto new lines if there are lots of skills */
  gap: 8px;
}

.skill-tag {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid #e4e4e0;
  font-size: 14px;
}


/* ============================================================
   PROJECTS SECTION
   A vertical list of project cards.
   To add a project: copy one .project-card block in the HTML.
============================================================ */
.projects-list {
  border: 1px solid #e4e4e0;
  border-radius: 8px;
  overflow: hidden; /* clips the child cards to the rounded corners */
}

.project-card {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #e4e4e0;
  background-color: #ffffff;
}
.project-card:last-child {
  border-bottom: none; /* no divider after the final card */
}
.project-card:hover {
  background-color: #f8f8f7;
}

/* Row with project name on the left, GitHub link on the right */
.project-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.4rem;
}

.project-name {
  font-weight: 500;
  font-size: 15px;
}

.project-link {
  font-size: 13px;
  white-space: nowrap; /* stops the link breaking onto two lines */
}

.project-desc {
  font-size: 14px;
  color: #6b6b6b;
  margin-bottom: 0.75rem;
}

/* Row of small tech tags at the bottom of each card */
.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.project-tag {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  background-color: #eff4ff;
  color: #2563eb;
}


/* ============================================================
   CONTACT SECTION
   A simple list of labelled links (email, GitHub, LinkedIn).
   To add a row: copy one .contact-row block in the HTML.
============================================================ */
.contact-links {
  display: flex;
  flex-direction: column; /* stacks rows vertically */
  gap: 0.75rem;
}

.contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
}

.contact-label {
  color: #6b6b6b;
  font-size: 13px;
  min-width: 64px; /* keeps labels the same width so links line up */
}


/* ============================================================
   FOOTER
   Simple centred text at the very bottom of the page.
============================================================ */
footer {
  text-align: center;
  padding: 2rem;
  font-size: 13px;
  color: #6b6b6b;
  border-top: 1px solid #e4e4e0;
}