/* ---------- Base Styles ---------- */

body {
  font-family: "Merriweather", Georgia, serif;
  background-color: #FFFFFF; /* Cream White */
  color: #2B2B2B; /* Text Dark */
  margin: 0;
  padding: 0;
  line-height: 1.8;
}

a {
  color: #8A79B7; /* Medium Lavender */
  text-decoration: none;
}

a:hover {
  color: #A0C4FF; /* Pastel Blue */
  text-decoration: underline;
}

/* ---------- Layout ---------- */

nav {
  max-width: 900px;
  margin: 30px auto 0 auto;
  padding: 15px 20px;
  background-color: #D6DBF5; /* Pale Periwinkle */
  border-radius: 12px;
}

nav a {
  margin-right: 20px;
  font-weight: 500;
}

/* ---------- Sections ---------- */

section {
  max-width: 900px;
  margin: 50px auto;
  padding: 0 20px;
  background-color: #FFFFFF;
}

/* ---------- Headings ---------- */

h1 {
  font-size: 2.6rem;
  margin-bottom: 10px;
  color: #8A79B7; /* Medium Lavender */
}

h2 {
  font-size: 2rem;
  margin-bottom: 20px;
  padding-bottom: 6px;
  border-bottom: 3px solid #4B7C7C; /* Mint Green */
  color: #4A3F6B; /* Deep Lavender */
}

h3 {
  font-size: 1.4rem;
  margin-top: 28px;
  margin-bottom: 10px;
  color: #6A4A85; /* Lavender Shade */
}

h4 {
  font-size: 1.1rem;
  margin-top: 20px;
  margin-bottom: 8px;
  font-weight: 600;
  color: #0F4C75; /* Pastel Blue */
}

/* ---------- Text ---------- */

p {
  margin-bottom: 16px;
  color: #2B2B2B;
}

ul {
  margin-top: 10px;
  margin-bottom: 20px;
  padding-left: 20px;
}

li {
  margin-bottom: 6px;
}

/* ---------- Experience & Projects ---------- */
/* ---------- Experience Enhancements ---------- */

.experience {
  margin-bottom: 40px;
  padding: 22px 20px 20px 18px;
  border-left: 4px solid #4B7C7C;; /* Mint Green */
  background-color: #BDE0FE; /* Soft Sky Blue */
  border-radius: 10px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.experience:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

/* Highlight specific technical terms */
.highlight-hazard {
  color: #FF6B6B; /* Coral Red for hazards */
  font-weight: 600;
}

.highlight-severity {
  color: #FFA94D; /* Soft Orange for severity */
  font-weight: 600;
}

code {
  background-color: #E6E0FF; /* Soft lavender highlight */
  padding: 2px 4px;
  border-radius: 4px;
  font-family: "Courier New", monospace;
  color: #4A3F6B;
}

/* Experience link styling */
.experience-link {
  color: #6A4A85; /* Lavender Shade */
  font-weight: 600;
  text-decoration: underline dotted;
}

.experience-link:hover {
  color: #203e3e; /* Pastel Blue on hover */
  text-decoration: underline;
}


.experience,
.project {
  margin-bottom: 40px;
  padding-left: 15px;
  border-left: 4px solid #4B7C7C; /* Mint Green */
  background-color: #BDE0FE; /* Soft Sky Blue */
}

.experience p,
.project p {
  margin-bottom: 8px;
}

.project ul {
  margin-top: 8px;
}

/* ---------- Coursework Cards ---------- */

.course {
  margin-bottom: 24px;
}

/* Top-Level Coursework Cards: Software, Foundations, Systems */
.top-course-card {
  background-color: #BDE0FE; /* Soft Pastel Blue */
  border-left: 4px solid #4B7C7C; /* Mint Green accent */
  padding: 14px 18px;
  margin-bottom: 14px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.top-course-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Completed Coursework Cards */
.other-course-card {
  background-color: #E6E0FF; /* Soft Lavender */
  border-left: 4px solid #4B7C7C; /* Mint Green accent */
  padding: 14px 18px;
  margin-bottom: 14px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.other-course-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Projected Coursework Cards */
.projected-course-card {
  background-color: #A0E7E5; /* Soft Mint */
  border-left: 4px solid #4B7C7C; /* Mint Green accent */
  padding: 14px 18px;
  margin-bottom: 14px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.projected-course-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Lists inside cards */
.other-course-card ul,
.projected-course-card ul {
  margin: 0;
  padding-left: 20px;
  list-style-type: disc;
  color: #2B2B2B;
}

.other-course-card ul li,
.projected-course-card ul li {
  margin-bottom: 6px;
  line-height: 1.5;
}

/* ---------- Projects Page Enhancements ---------- */

/* Project Grid (overview cards) */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 30px;
}

/* Project Overview Card */
.project-card {
  background-color: #E6ECF8; /* Soft blue-gray, consistent with theme */
  border-left: 4px solid #0F4C75; /* Deep sea blue accent */
  padding: 18px 20px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.project-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.project-card h3 {
  margin-top: 0;
  color: #0F4C75;
}

.project-card .tech {
  font-size: 0.9rem;
  color: #3B4A6B;
}

/* ---------- Detailed Project Sections ---------- */

/* Override shared experience styling */
.project {
  background-color: #F2F5FB; /* Lighter than experience */
  border-left: 4px solid #0F4C75; /* Deep sea blue */
  padding: 22px 24px;
  border-radius: 10px;
  margin-bottom: 50px;
}

.project p {
  margin-bottom: 14px;
}

/* Project skill lists */
.project ul {
  margin-top: 10px;
  padding-left: 20px;
}

.project ul li {
  margin-bottom: 6px;
}

/* Project links */
.project a,
.project-card a {
  font-weight: 600;
  color: #0F4C75;
  margin-right: 14px;
}

.project a:hover,
.project-card a:hover {
  color: #1B6CA8;
  text-decoration: underline;
}

/* ---------- Subtle Emphasis ---------- */

strong {
  font-weight: 600;
  color: #4A3F6B; /* Deep Lavender */
}

/* ---------- Footer ---------- */

footer {
  max-width: 900px;
  margin: 60px auto 30px auto;
  padding: 0 20px;
  font-size: 0.9rem;
  color: #555555; /* Text Muted */
  text-align: center;
  background-color: #D6DBF5; /* Pale Periwinkle */
  border-radius: 12px;
}

/* ---------- Responsive ---------- */

@media (max-width: 600px) {
  nav a {
    display: inline-block;
    margin-bottom: 10px;
  }

  h1 {
    font-size: 2.2rem;
  }

  h2 {
    font-size: 1.6rem;
  }
}