/* style.css
   Mobile first responsive styles
   Palette: cream beige brown
   cream: #FFF8F0
   beige: #E9DCC9
   warm brown: #6B4F3A
   light brown: #A88A74
*/

/* Reset basics */
:root{
  --cream: #FFF8F0;
  --beige: #E9DCC9;
  --brown: #6B4F3A;
  --brown-soft: #A88A74;
  --text: #3b2b21;
  --muted: #6b5750;
  --max-width: 1100px;
  --radius: 12px;
  --transition: 250ms ease;
  --container-padding: 1rem;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color-scheme: light;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--cream);
  color:var(--text);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Container */
.container{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 var(--container-padding);
}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:linear-gradient(180deg, rgba(255,248,240,0.98), rgba(255,248,240,0.9));
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--beige);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0.75rem 0;
}

/* Brand */
.brand{
  font-weight:700;
  color:var(--brown);
  text-decoration:none;
  font-size:1.05rem;
}

/* Nav */
.nav{ display:none }
.nav-list{
  list-style:none;
  display:flex;
  gap:1rem;
  margin:0;
  padding:0;
}
.nav-list a{
  text-decoration:none;
  color:var(--text);
  padding:0.5rem 0.75rem;
  border-radius:8px;
  transition:background var(--transition), color var(--transition), transform var(--transition);
}

li a {
  background:var(--cream);
  color:var(--brown);
  text-decoration: none;
  font-weight: bold;
}
.nav-list a:hover,
.nav-list a.active{
  background:var(--beige);
  color:var(--brown);
  transform:translateY(-2px);
}

/* Nav toggle for mobile */
.nav-toggle{
  background:none;
  border:0;
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  cursor:pointer;
}
.hamburger{
  width:22px;
  height:2px;
  background:var(--brown);
  display:block;
  position:relative;
}
.hamburger::before,
.hamburger::after{
  content:"";
  position:absolute;
  left:0;
  width:22px;
  height:2px;
  background:var(--brown);
  transition:transform var(--transition);
}
.hamburger::before{ top:-7px }
.hamburger::after{ top:7px }

/* Hero */
.hero{
  padding:2.25rem 0;
  background: linear-gradient(180deg, var(--cream), #fff);
}
.hero-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
  align-items:center;
  padding:1rem 0 2rem 0;
}
.hero-title{
  margin:0 0 0.5rem 0;
  font-size:1.8rem;
  color:var(--brown);
}
.hero-tagline{
  margin:0 0 1rem 0;
  color:var(--muted);
  font-weight:500;
}
.hero-image img{
  width:200px;
  height:200px;
  object-fit:cover;
  border-radius:14px;
  border:6px solid var(--beige);
  box-shadow:0 6px 20px rgba(107,79,58,0.08);
}

.mobile-nav {
  display: none; /* Hidden by default */
  position: absolute;
  top: 50px; /* Adjust based on header height */
  background: var(--cream);
  border: 1px solid var(--beige);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 1000;
  width: 100%;
}

mobilenav-list {
  list-style: none !important;
  margin: 0;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

 ul {
  list-style-type: none !important;
  text-decoration: none !important;
}

/* Buttons */
.btn{
  display:inline-block;
  background:var(--brown);
  color:var(--cream);
  padding:0.65rem 1rem;
  text-decoration:none;
  border-radius:10px;
  transition:transform var(--transition), opacity var(--transition);
  font-weight:600;
}
.btn:hover{ transform:translateY(-3px) }
.btn-outline{
  background:transparent;
  color:var(--brown);
  border:1px solid var(--brown-soft);
  margin-left:0.5rem;
}

/* Highlights and cards */
.highlights{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
  padding:1rem 0 2rem 0;
}
.card{
  background:var(--beige);
  padding:1rem;
  border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,0.03);
}

/* Projects grid */
.projects-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
}
.project-card{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(107,79,58,0.06);
  display:flex;
  flex-direction:column;
}
.project-card img{
  width:100%;
  display:block;
  height:180px;
  object-fit:cover;
}
.project-body{ padding:1rem }

/* Photo styles */
.about-photo {
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--beige); /* Matches the beige theme */
  border-radius: var(--radius);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden; /* To make sure the image fits within rounded corners */
  width: 250px; /* Width of passport photo */
  height: 250px; /* Height of passport photo */
}

.about-photo img {
  width: 100%;
  height: 100%; /* Makes the image fill the container */
  object-fit: cover; /* Ensures the image covers the container area fully */
  border-radius: var(--radius); /* Rounded corners */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow to the image */
}

/* Footer */
.site-footer{
  text-align: center;
  margin-top:2rem;
  background:var(--brown);
  color:var(--cream);
  padding:1rem 0;
}
.footer-inner{
  display:flex;
  flex-direction:column;
  gap: 20px;
  align-items:center;
}
/* change color of footer contact links to yellow */
.site-footer a{
  color:black;
  text-decoration:none;
  margin:0 0.5rem;
  font-weight:600;
  transition:color var(--transition), transform var(--transition);
}

/* site footer on hover change color */
.site-footer a:hover{
  color:white;
  transform:translateY(-2px);
}

.footer-bottom{
  text-align:center;
  padding-top:0.75rem;
  font-size:0.9rem;
  opacity:0.95;
}

/* Larger screens */
@media(min-width:700px){
  .nav{ display:block }
  .nav-toggle{ display:none }
  .mobile-nav { display: none !important; } /* Ensure mobile nav is hidden on larger screens */

  .hero-grid{
    grid-template-columns: 1fr 320px;
    gap:2rem;
  }

  .highlights{
    grid-template-columns:repeat(3,1fr);
  }

  .projects-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .footer-inner{
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
  }

  .about-grid{ display:grid; grid-template-columns: 320px 1fr; gap:2rem; align-items:center }
  .contact-grid{ display:grid; grid-template-columns:1fr 320px; gap:2rem; align-items:start }
  .skills-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem }
}

@media(min-width:1000px){
  .projects-grid{ grid-template-columns:repeat(4,1fr) }
}

/* Utilities */
.lead{ font-size:1rem; color:var(--muted) }
.section-title{ margin:1rem 0; color:var(--brown); font-size:1.25rem }

/* Fade in animation helper */
.fade-in{
  opacity:0;
  transform:translateY(10px);
  transition:opacity 500ms ease, transform 500ms ease;
}
.fade-in.in-view{
  opacity:1;
  transform:none;
}

/* Forms */
.contact-form{
  background:var(--beige);
  padding:1rem;
  border-radius:12px;
}
.contact-form label{ display:block; margin-top:0.5rem; font-weight:600 }
.contact-form input,
.contact-form textarea{
  width:100%;
  padding:0.6rem;
  border-radius:8px;
  border:1px solid rgba(107,79,58,0.15);
  margin-top:0.25rem;
  font-size:0.95rem;
}
.contact-form .form-message{ margin-top:0.75rem; color:var(--brown) }

/* Muted text */
.muted{ color:var(--muted); font-size:0.9rem }

/* Hover effects for project cards */
.project-card:hover{ transform:translateY(-6px); transition:transform var(--transition) }

/* Small tweaks */
@media (prefers-reduced-motion: reduce){
  *{ transition:none!important }
}