/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap');

:root{
  --olive: #b5b59b;       /* muted olive */
  --beige: #f5f3ee;       /* warm beige background */
  --muted-text: #4a4a4a;
  --heading: #222222;
  --card-border: #dcdccf;
  --white: #ffffff;
}

/* Global reset */
* { box-sizing: border-box; }
html,body { height:100%; margin:0; font-family: 'Inter', sans-serif; background: var(--beige); color: var(--muted-text); }

/* Navbar */
.navbar{
  position: fixed;
  top:0;
  left:0;
  right:0;
  background: rgba(181,181,155,0.92);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  z-index: 1200;
}
.nav-inner{
  max-width:1100px;
  margin:0 auto;
  padding:0.7rem 1rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo{
  font-weight:600;
  color: var(--heading);
  text-decoration:none;
  font-size:1.05rem;
}
.nav-links{ list-style:none; display:flex; gap:1.1rem; margin:0; padding:0; align-items:center; }
.nav-links a{ color: var(--heading); text-decoration:none; font-weight:600; }
.nav-links a:hover{ color: #6b705c; }

/* add top spacing so content is not hidden by fixed navbar */
.content-pad { padding-top:120px; padding-left:1.2rem; padding-right:1.2rem; }

/* Hero */
.hero { max-width:900px; margin:0 auto; text-align:center; padding-bottom:3rem; }
.profile-photo{
  width:150px; height:150px; border-radius:50%; object-fit:cover;
  border:3px solid var(--olive); display:block; margin:0 auto 1rem;
}
.name{ font-size:1.8rem; margin:0.25rem 0; color:var(--heading); }
.role{ margin:0.25rem 0 1rem 0; color:#575757; font-weight:600; }
.hero-text{ max-width:780px; margin:0 auto 1.2rem; line-height:1.6; color:#444; }

/* Buttons (outlined pastel) */
.btn-outline{
  display:inline-block; text-decoration:none; padding:0.6rem 1.2rem; margin:0.3rem;
  border:2px solid var(--olive); color:var(--heading); border-radius:8px; font-weight:600;
  transition: all 0.25s ease;
}
.btn-outline:hover{ background:var(--olive); color:var(--white); transform:translateY(-3px); }

/* Section cards and container */
.section-card{ max-width:1000px; margin:0 auto 2rem; background:transparent; }
.content-pad h1{ color:var(--heading); margin-bottom:0.6rem; font-size:1.5rem; }

/* Skills grid */
.skills-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin:12px 0 20px; }
.skill{
  background:var(--white); border:1px solid var(--card-border); padding:12px; border-radius:10px; text-align:center;
  font-weight:600; color:#444;
}

/* Projects list on projects page (vertical blocks) */
.project-item{
  background:var(--white); border:1px solid var(--card-border); border-radius:12px; padding:18px; margin:12px 0;
  box-shadow: 0 3px 12px rgba(0,0,0,0.03); animation: fadeIn 0.9s ease both;
}
.project-item h2{ margin:0 0 6px; color:var(--heading); }
.muted{ color:#666; margin-bottom:10px; font-style:normal; }

/* Generic lists */
.bullet-list{ margin:8px 0 12px 18px; color:#444; }

/* Project link styling */
.project-link a{ color:var(--olive); text-decoration:none; font-weight:600; }
.project-link a:hover{ text-decoration:underline; }

/* Contact grid */
.contact-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-top:12px; }
.contact-card{ background:var(--white); border:1px solid var(--card-border); padding:14px; border-radius:10px; }

/* Footer */
.site-footer{ margin-top:40px; padding:18px 0; text-align:center; color:#fff; background:var(--olive); }

/* Small helper */
.info-block{ background:var(--white); border:1px solid var(--card-border); padding:12px; border-radius:10px; margin-bottom:12px; }

/* Animations */
@keyframes fadeIn {
  from { opacity:0; transform: translateY(8px); }
  to { opacity:1; transform: translateY(0); }
}

/* Responsive tweaks */
@media (min-width:900px){
  .hero { padding-top:140px; }
  .content-pad { padding-top:140px; }
}

/* Grid for highlighted cards on wide homepage (if needed later) */
.project-grid-home {
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:18px;
  max-width:1000px;
  margin:18px auto;
}
@media (max-width:760px){
  .project-grid-home { grid-template-columns: 1fr; padding:0 12px; }
}

/* small screens tweaks */
@media (max-width:520px){
  .nav-links{ display:none; } /* keeps navbar minimal on small screens */
  .nav-inner{ justify-content:space-between; }
  .name{ font-size:1.4rem; }
  .hero-text{ font-size:0.96rem; }
}

/* Navbar container */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #B5B59B; /* muted olive */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  z-index: 1000;
}

/* Navbar inner layout */
.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 1.6rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* Logo */
.nav-logo {
  font-weight: 600;
  font-size: 1.2rem;
  color: #333;
}

/* Links */
.nav-links a {
  color: #333;
  text-decoration: none;
  margin-left: 1.2rem;
  font-weight: 500;
  transition: color 0.2s ease, border-bottom 0.2s ease;
}

.nav-links a:hover {
  border-bottom: 2px solid #7A7A5C; /* slightly darker olive */
}

/* Make space for the fixed navbar */
body {
  padding-top: 60px;
}

/* Responsive: adjust spacing and font size on small screens */
@media (max-width: 600px) {
  .nav-links a {
    margin-left: 0.8rem;
    font-size: 0.9rem;
  }

  .nav-logo {
    font-size: 1rem;
  }

  .nav-container {
    padding: 0.6rem 1rem;
  }
}