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

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

/* Default to light mode */
:root {
  --bg: #f6f8fb;
  --card: #ffffff;
  --muted: #5b6b75;
  --accent: #0ea5a4;
  --accent-2: #60a5fa;
  --accent-light: #66d9e8; /* lighter version for tags */
  --glass: rgba(10,10,10,0.03);
  --text: #0b1220;
  --radius: 12px;
  --max-width: 1100px;
}

/* Dark mode when toggled */
:root.dark {
  --bg: #0f1720;
  --card: #0b1220;
  --muted: #9aa6b2;
  --accent: #2dd4bf;
  --accent-2: #60a5fa;
  --accent-light: #66d9e8; /* lighter version for tags */
  --glass: rgba(255,255,255,0.04);
  --text: #e6eef6;
}

* { 
  box-sizing: border-box; 
}

body { 
  margin: 0; 
  background: var(--bg); 
  color: var(--text); 
  font-family: Inter, sans-serif;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

a { 
  color: inherit; 
  text-decoration: none; 
}

img { 
  max-width: 100%; 
  display: block; 
}

/* Header */
header { 
  position: sticky; 
  top: 12px; 
  z-index: 100; 
}

.nav { 
  max-width: var(--max-width); 
  margin: 0 auto; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  padding: 8px 16px; 
  border-radius: 999px; 
  background: var(--glass); 
  backdrop-filter: blur(6px);
}

.nav a { 
  font-weight: 600; 
  padding: 6px 10px; 
  border-radius: 6px;
  transition: color 0.3s ease;
}

.nav a:hover { 
  color: var(--accent); 
}

.nav-actions { 
  display: flex; 
  gap: 8px; 
  align-items: center; 
}

.menu-toggle { 
  display: none; 
}

/* Hero */
.hero { 
  display: flex; 
  gap: 28px; 
  align-items: center; 
  padding: 28px; 
  border-radius: 18px; 
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02)); 
}

.hero-left { 
  flex: 1; 
}

.hero-right { 
  width: 260px; 
  text-align: center; 
}

.profile { 
  width: 180px; 
  height: 180px; 
  border-radius: 16px; 
  overflow: hidden; 
  border: 3px solid var(--glass); 
  margin: auto;
  box-shadow: 0 8px 26px rgba(2,6,23,0.45); 
}

.eyebrow { 
  font-size: .9rem; 
  background: var(--glass); 
  padding: 4px 10px; 
  border-radius: 999px; 
}

.lead { 
  color: var(--muted); 
}

.cta { 
  margin-top: 14px; 
  display: flex; 
  gap: 10px; 
  flex-wrap: wrap; 
}

.btn { 
  padding: 10px 14px; 
  border-radius: 12px; 
  font-weight: 700; 
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}

.btn-primary { 
  background: linear-gradient(90deg,var(--accent),var(--accent-2)); 
  color: #042028; 
}

/* New secondary button for View Projects */
.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--glass);
}

.btn-ghost { 
  border: 1px solid var(--glass); 
  background: transparent; 
  color: var(--text); 
}

/* Project action buttons */
.project-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.btn-project {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.btn-view-project {
  background: var(--accent);
  color: white;
}

.btn-live-demo {
  background: var(--accent-2);
  color: white;
}

.btn-project:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Sections */
.container { 
  max-width: var(--max-width); 
  margin: 40px auto; 
  padding: 0 18px; 
}

.grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); 
  gap: 18px; 
}

/* Contact grid - 2x2 layout */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

/* Experience grid - single column, full width */
.experience-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.experience-card {
  background: var(--card);
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 8px 26px rgba(2,6,23,0.45);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform: translateY(0);
  cursor: pointer;
  width: 100%;
  /* Removed max-width and margin: 0 auto to make it left-aligned and full width */
}

.experience-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(2,6,23,0.15), 0 0 0 1px rgba(255,255,255,0.05);
}

/* Enhanced card hover effects */
.card { 
  background: var(--card); 
  padding: 16px; 
  border-radius: 12px; 
  box-shadow: 0 8px 26px rgba(2,6,23,0.45);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform: translateY(0);
  cursor: pointer;
}

.card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(2,6,23,0.15), 0 0 0 1px rgba(255,255,255,0.05);
}

.card h3 { 
  margin: 0.3rem 0; 
}

.card p { 
  color: var(--muted); 
  font-size: .95rem; 
}


/* Education grid - single column, full width like experience */
.education-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.education-card {
  background: var(--card);
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 8px 26px rgba(2,6,23,0.45);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform: translateY(0);
  cursor: pointer;
  width: 100%;
}

.education-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(2,6,23,0.15), 0 0 0 1px rgba(255,255,255,0.05);
}

/* Certification grid - 2x2 layout like contact */
.certification-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

/* Certification cards */
.certification-card {
  background: var(--card);
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 8px 26px rgba(2,6,23,0.45);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform: translateY(0);
  cursor: pointer;
}

.certification-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(2,6,23,0.15), 0 0 0 1px rgba(255,255,255,0.05);
}

.certification-card h3 {
  margin: 0.3rem 0;
}

.certification-card p {
  color: var(--muted);
  font-size: .95rem;
}


/* Keep certification button bottom-aligned */
.certification-card {
  display: flex;
  flex-direction: column;
}

.certification-card p {
  flex-grow: 1; /* lets description take space and push button down */
}

/* Certification button */
.certification-card .cert-link {
  margin-top: auto;
  width: 100%;
  height: 40px;

  display: flex;             /* flexbox ensures centering */
  justify-content: center;   /* center horizontally */
  align-items: center;       /* center vertically */

  border-radius: 6px;
  background: var(--accent);
  color: white;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.certification-card .cert-link:hover {
  background: var(--accent-2);
  transform: translateY(-2px);
}



/* Responsive adjustments */
@media(max-width:880px){
  /* Certification grid becomes single column on mobile */
  .certification-grid {
    grid-template-columns: 1fr;
  }
  
  .education-card {
    width: 100%;
  }
}





/* Contact cards - center headings */
.contact-card h3 {
  text-align: center;
  margin-bottom: 12px;
}

.contact-card p {
  text-align: center;
}

/* Responsive adjustments */
@media(max-width:880px){
  /* Contact grid becomes single column on mobile */
  .contact-grid {
    grid-template-columns: 1fr;
  }
}


@media(max-width:880px){
  .experience-card {
    width: 100%;
  }
}


.tag {
  display: inline-block;
  padding: 5px 6px;
  border-radius: 399px;
  font-size: 0.62rem;
  font-weight: 500;
  background: transparent;
  color: #555;               /* medium-dark grey */
  border: 1px solid #ccc;    /* light grey border */
  cursor: default;
  transition: all 0.2s ease;
}

.tag:hover {
  background: #f9f9f9;       /* faint fill on hover */
  border-color: #aaa;        /* darker border */
}



/* Footer */
footer { 
  margin-top: 30px; 
  text-align: center; 
  color: var(--muted); 
}

/* Animations */
.reveal { 
  opacity: 0; 
  transform: translateY(20px); 
  transition: all .6s ease; 
}

.reveal.in-view { 
  opacity: 1; 
  transform: none; 
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Enhanced smooth scrolling for modern browsers */
body {
  -webkit-overflow-scrolling: touch;
}

/* Responsive */
@media(max-width:880px){
  .hero { 
    flex-direction: column; 
    text-align: center; 
  }
  .hero-right { 
    width: 100%; 
  }
  .profile { 
    width: 120px; 
    height: 120px; 
    border-radius: 999px; 
  }
  .menu-toggle { 
    display: block; 
  }
  .links { 
    display: none; 
  }
  
  .experience-card {
    max-width: 100%;
  }
}


/* Mobile Menu */
/* Mobile Menu - IMPROVED */
.mobile-menu {
  position: fixed;           /* Fixed positioning for better mobile support */
  top: 80px;                /* Adjust based on your nav height */
  left: 16px;
  right: 16px;
  background: var(--card);
  border-radius: 12px;
  box-shadow: 0 8px 26px rgba(2,6,23,0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 9999;            /* High z-index */
  max-height: 0;            /* Start collapsed */
  overflow: hidden;
}

.mobile-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  max-height: 500px;        /* Allow expansion */
}

.mobile-menu .card {
  padding: 16px;
  background: var(--card);  /* Ensure light background */
  border-radius: 12px;
}

.mobile-menu a {
  display: block;
  padding: 12px 16px;       /* Better touch targets */
  margin-bottom: 4px;
  border-radius: 8px;
  font-weight: 600;
  color: var(--text);       /* Ensure text visibility */
  transition: all 0.2s ease;
  border-bottom: 1px solid var(--glass);
}

.mobile-menu a:hover,
.mobile-menu a:active {
  background-color: var(--glass);
  color: var(--accent);
}

.mobile-menu a:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

/* Ensure hamburger button is visible */
.menu-toggle {
  background: var(--card);
  border: 1px solid var(--glass);
  color: var(--text);
  font-size: 18px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
}

.menu-toggle:hover {
  background: var(--glass);
}


/* Accessibility */
.sr-only {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  background: var(--accent);
  color: var(--bg);
  padding: 8px 12px;
  border-radius: 4px;
  font-weight: 600;
}

.muted {
  color: var(--muted);
}

/* Keep project button bottom-aligned */
#projects-grid .card {
  display: flex;
  flex-direction: column;
}

#projects-grid .card p {
  flex-grow: 1; /* description grows, pushing button down */
}

#projects-grid .card .btn {
  margin-top: auto;          /* stick to bottom */
  align-self: flex-start;    /* keep it left aligned */
}