/* ================================================================
   DevPortfolio — style.css
   Written by Yashraj
   ================================================================ */

/* ── CSS Custom Properties ──────────────────────────────────── */
:root {
  /* Colors — light mode */
  --color-bg:          #ffffff;
  --color-bg-alt:      #f5f7fa;
  --color-bg-card:     #ffffff;
  --color-text:        #1a202c;
  --color-text-muted:  #4a5568;
  --color-border:      #e2e8f0;

  /* Brand colors */
  --color-primary:     #2e6da4;
  --color-primary-dark:#1b3a6b;
  --color-accent:      #f0a500;
  --color-success:     #27ae60;
  --color-danger:      #e53935;

  /* Navbar */
  --nav-height:        64px;
  --nav-bg:            rgba(255, 255, 255, 0.97);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Fira Code', 'Courier New', monospace;

  /* Spacing */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  2rem;
  --space-xl:  4rem;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Shadow */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.12);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.16);

  /* Transitions */
  --transition: 0.2s ease;
}

/* ── Dark Mode Variables ────────────────────────────────────── */
body.dark {
  --color-bg:         #0d1117;
  --color-bg-alt:     #161b22;
  --color-bg-card:    #21262d;
  --color-text:       #e6edf3;
  --color-text-muted: #8b949e;
  --color-border:     #30363d;
  --nav-bg:           rgba(13, 17, 23, 0.97);
}

/* ── Reset & Base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family:     var(--font-sans);
  font-size:       1rem;
  line-height:     1.7;
  color:           var(--color-text);
  background:      var(--color-bg);
  transition:      background var(--transition), color var(--transition);
}

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

a {
  color:           var(--color-primary);
  text-decoration: none;
  transition:      opacity var(--transition);
}
a:hover { opacity: 0.75; text-decoration: underline; }

ul, ol { list-style: none; }

/* ── Navbar ─────────────────────────────────────────────────── */
#navbar {
  position:   fixed;
  top:        0;
  left:       0;
  right:      0;
  height:     var(--nav-height);
  display:    flex;
  align-items:center;
  justify-content: space-between;
  padding:    0 var(--space-lg);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--color-border);
  backdrop-filter: blur(8px);
  z-index:    100;
}

.nav-brand a {
  font-size:   1.25rem;
  font-weight: 700;
  color:       var(--color-primary-dark);
  letter-spacing: -0.02em;
}
body.dark .nav-brand a { color: var(--color-text); }

.nav-links {
  display:     flex;
  gap:         var(--space-md);
  align-items: center;
}

.nav-links a {
  font-size:   0.95rem;
  font-weight: 500;
  color:       var(--color-text-muted);
  padding:     var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  transition:  color var(--transition), background var(--transition);
}
.nav-links a:hover,
.nav-links a.active {
  color:       var(--color-primary);
  background:  rgba(46, 109, 164, 0.08);
  text-decoration: none;
}

.nav-actions { display: flex; gap: var(--space-sm); align-items: center; }

/* ── Buttons ─────────────────────────────────────────────────── */
button, .btn-primary, .btn-secondary {
  font-family:   var(--font-sans);
  font-size:     0.9rem;
  font-weight:   600;
  cursor:        pointer;
  border:        none;
  border-radius: var(--radius-md);
  transition:    all var(--transition);
}

.btn-primary {
  display:    inline-block;
  background: var(--color-primary);
  color:      #fff;
  padding:    0.7rem 1.5rem;
}
.btn-primary:hover {
  background:     var(--color-primary-dark);
  color:          #fff;
  text-decoration: none;
  transform:      translateY(-1px);
  box-shadow:     var(--shadow-md);
}

.btn-secondary {
  display:    inline-block;
  background: transparent;
  color:      var(--color-primary);
  padding:    0.65rem 1.4rem;
  border:     2px solid var(--color-primary);
}
.btn-secondary:hover {
  background: var(--color-primary);
  color:      #fff;
  text-decoration: none;
}

#theme-toggle {
  background: var(--color-bg-alt);
  border:     1px solid var(--color-border);
  padding:    0.35rem 0.6rem;
  border-radius: var(--radius-sm);
  font-size:  1.1rem;
}

.hamburger {
  display:    none;
  background: transparent;
  border:     1px solid var(--color-border);
  padding:    0.3rem 0.55rem;
  font-size:  1.2rem;
  color:      var(--color-text);
  border-radius: var(--radius-sm);
}

/* ── Main content offset for fixed nav ─────────────────────── */
main { margin-top: var(--nav-height); }

/* ── Hero Section ───────────────────────────────────────────── */
.hero {
  min-height:   calc(90vh - var(--nav-height));
  display:      flex;
  align-items:  center;
  gap:          var(--space-xl);
  padding:      var(--space-xl) var(--space-lg);
  max-width:    1100px;
  margin:       0 auto;
}

.hero-content { flex: 1; }

.hero-greeting {
  display:     block;
  font-size:   1.05rem;
  color:       var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.hero-content h1 {
  font-size:      clamp(2.4rem, 5vw, 3.8rem);
  font-weight:    800;
  line-height:    1.1;
  color:          var(--color-primary-dark);
  letter-spacing: -0.03em;
  margin-bottom:  var(--space-sm);
}
body.dark .hero-content h1 { color: var(--color-text); }

.hero-title {
  font-size:     1.15rem;
  color:         var(--color-primary);
  font-weight:   600;
  margin-bottom: var(--space-md);
}

.hero-bio {
  font-size:   1.05rem;
  color:       var(--color-text-muted);
  max-width:   520px;
  margin-bottom: var(--space-md);
}

.skill-badges {
  display:     flex;
  flex-wrap:   wrap;
  gap:         var(--space-xs) var(--space-sm);
  margin-bottom: var(--space-lg);
}

.badge {
  background:    var(--color-bg-alt);
  border:        1px solid var(--color-border);
  color:         var(--color-text-muted);
  font-size:     0.8rem;
  font-weight:   500;
  padding:       0.2rem 0.6rem;
  border-radius: 999px;
}

.hero-cta { display: flex; gap: var(--space-md); flex-wrap: wrap; }

/* ── Code Window (decorative) ───────────────────────────────── */
.hero-visual { flex: 0 0 360px; }

.code-window {
  background:    #1e2433;
  border-radius: var(--radius-lg);
  overflow:      hidden;
  box-shadow:    var(--shadow-lg);
  font-family:   var(--font-mono);
  font-size:     0.82rem;
}

.code-window-bar {
  background: #2d3748;
  padding:    0.6rem 1rem;
  display:    flex;
  align-items:center;
  gap:        0.4rem;
}

.dot {
  width:  12px;
  height: 12px;
  border-radius: 50%;
}
.dot.red    { background: #ff5f57; }
.dot.yellow { background: #ffbd2e; }
.dot.green  { background: #28c840; }

.window-title {
  margin-left: auto;
  color:       #718096;
  font-size:   0.75rem;
}

.code-window-body {
  padding: 1.2rem 1.4rem;
  line-height: 1.7;
  overflow-x:  auto;
}

.code-window-body code { color: #e2e8f0; }
.code-window-body .c   { color: #718096; } /* comment / dim */
.code-window-body .s   { color: #68d391; } /* SHA hash */

/* ── Sections shared styles ─────────────────────────────────── */
.featured-section,
.projects-hero,
.contact-hero,
.about-hero {
  max-width: 1100px;
  margin:    0 auto;
  padding:   var(--space-xl) var(--space-lg) var(--space-lg);
}

.featured-section h2,
.projects-hero  h1,
.contact-hero   h1,
.about-hero     h1 {
  font-size:   clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  color:       var(--color-primary-dark);
  margin-bottom: var(--space-sm);
}
body.dark .featured-section h2,
body.dark .projects-hero h1,
body.dark .contact-hero  h1,
body.dark .about-hero    h1 { color: var(--color-text); }

.section-sub, .lead {
  color:       var(--color-text-muted);
  font-size:   1.05rem;
  max-width:   600px;
  margin-bottom: var(--space-lg);
}

/* ── Project Grid & Cards ───────────────────────────────────── */
.project-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap:                   var(--space-lg);
  max-width:             1100px;
  margin:                0 auto;
  padding:               0 var(--space-lg) var(--space-xl);
}

.project-card {
  background:    var(--color-bg-card);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       var(--space-lg);
  display:       flex;
  flex-direction:column;
  gap:           var(--space-sm);
  box-shadow:    var(--shadow-sm);
  transition:    transform var(--transition), box-shadow var(--transition);
}

.project-card:hover {
  transform:  translateY(-4px);
  box-shadow: var(--shadow-md);
}

.project-card h3 {
  font-size:   1.15rem;
  font-weight: 700;
  color:       var(--color-text);
}

.project-card p {
  font-size: 0.95rem;
  color:     var(--color-text-muted);
  flex:      1;
}

.project-tech {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-xs);
}

.tech-tag {
  background:    rgba(46, 109, 164, 0.1);
  color:         var(--color-primary);
  font-size:     0.75rem;
  font-weight:   600;
  padding:       0.15rem 0.5rem;
  border-radius: 999px;
}

.project-links {
  display:    flex;
  gap:        var(--space-sm);
  margin-top: var(--space-sm);
}

.project-links a {
  font-size:   0.85rem;
  font-weight: 600;
}

/* ── Filter Bar ─────────────────────────────────────────────── */
.filter-bar {
  display:    flex;
  flex-wrap:  wrap;
  gap:        var(--space-sm);
  margin-bottom: var(--space-lg);
}

.filter-btn {
  background:    var(--color-bg-alt);
  border:        1px solid var(--color-border);
  color:         var(--color-text-muted);
  padding:       0.35rem 0.9rem;
  border-radius: 999px;
  font-size:     0.85rem;
  font-weight:   500;
  cursor:        pointer;
  transition:    all var(--transition);
}

.filter-btn:hover,
.filter-btn.active {
  background: var(--color-primary);
  color:      #fff;
  border-color: var(--color-primary);
}

/* ── About Page ─────────────────────────────────────────────── */
.about-page { max-width: 860px; margin: 0 auto; padding: var(--space-lg); }
.about-page section { padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-border); }
.about-page section:last-child { border-bottom: none; }
.about-page h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: var(--space-md); color: var(--color-primary-dark); }
body.dark .about-page h2 { color: var(--color-text); }
.about-page p { color: var(--color-text-muted); margin-bottom: var(--space-md); }
.about-page p:last-child { margin-bottom: 0; }

.skills-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:                   var(--space-lg);
}

.skill-group h3 {
  font-size:     0.85rem;
  font-weight:   700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:         var(--color-primary);
  margin-bottom: var(--space-sm);
}

.skill-group ul { display: flex; flex-direction: column; gap: var(--space-xs); }
.skill-group li { color: var(--color-text-muted); font-size: 0.95rem; }

/* ── Timeline ───────────────────────────────────────────────── */
.timeline { display: flex; flex-direction: column; gap: var(--space-lg); }
.timeline li {
  padding-left:  var(--space-lg);
  border-left:   3px solid var(--color-primary);
  color:         var(--color-text-muted);
  line-height:   1.7;
}
.timeline-year {
  display:    block;
  font-size:  0.8rem;
  font-weight:700;
  color:      var(--color-primary);
  margin-bottom: var(--space-xs);
}

/* ── Contact Page ───────────────────────────────────────────── */
.contact-layout {
  display:  flex;
  gap:      var(--space-xl);
  max-width:1100px;
  margin:   0 auto;
  padding:  0 var(--space-lg) var(--space-xl);
  flex-wrap:wrap;
}

.contact-form-section { flex: 1 1 480px; }
.contact-form-section h2,
.contact-links h2 {
  font-size:     1.3rem;
  font-weight:   700;
  margin-bottom: var(--space-lg);
  color:         var(--color-primary-dark);
}
body.dark .contact-form-section h2,
body.dark .contact-links h2 { color: var(--color-text); }

.contact-links {
  flex:       0 0 260px;
  padding-top:var(--space-sm);
}

.contact-links ul { display: flex; flex-direction: column; gap: var(--space-md); }
.contact-links li { color: var(--color-text-muted); }
.contact-links strong { display: block; color: var(--color-text); font-weight: 600; }

.availability-note {
  margin-top:  var(--space-lg);
  font-size:   0.9rem;
  color:       var(--color-text-muted);
  display:     flex;
  align-items: center;
  gap:         var(--space-sm);
}

.availability-dot {
  width:            10px;
  height:           10px;
  border-radius:    50%;
  background:       var(--color-success);
  display:          inline-block;
  flex-shrink:      0;
  animation:        pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.25); }
}

/* ── Forms ──────────────────────────────────────────────────── */
form { display: flex; flex-direction: column; gap: var(--space-md); }

.form-group { display: flex; flex-direction: column; gap: var(--space-xs); }

label {
  font-size:   0.9rem;
  font-weight: 600;
  color:       var(--color-text);
}

input[type="text"],
input[type="email"],
textarea {
  font-family: var(--font-sans);
  font-size:   0.95rem;
  color:       var(--color-text);
  background:  var(--color-bg-alt);
  border:      1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding:     0.65rem 0.9rem;
  width:       100%;
  transition:  border-color var(--transition), box-shadow var(--transition);
  outline:     none;
}

input:focus, textarea:focus {
  border-color: var(--color-primary);
  box-shadow:   0 0 0 3px rgba(46, 109, 164, 0.15);
}

textarea { resize: vertical; min-height: 140px; }

.field-error {
  font-size: 0.82rem;
  color:     var(--color-danger);
  min-height:1.2em;
}

.form-status {
  font-size:   0.9rem;
  color:       var(--color-success);
  min-height:  1.5em;
  font-weight: 500;
}

/* ── Footer ─────────────────────────────────────────────────── */
footer {
  text-align:  center;
  padding:     var(--space-lg);
  border-top:  1px solid var(--color-border);
  color:       var(--color-text-muted);
  font-size:   0.9rem;
}

.footer-note { margin-top: var(--space-xs); font-size: 0.82rem; opacity: 0.7; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero { flex-direction: column; padding: var(--space-lg) var(--space-md); gap: var(--space-lg); }
  .hero-visual { display: none; }    /* hide terminal on small screens */

  .nav-links { display: none; flex-direction: column; position: absolute; top: var(--nav-height); left: 0; right: 0; background: var(--nav-bg); padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-border); gap: var(--space-sm); }
  .nav-links.open { display: flex; }
  .hamburger { display: block; }

  .project-grid { grid-template-columns: 1fr; padding: 0 var(--space-md) var(--space-xl); }
  .contact-layout { flex-direction: column; }
  .skills-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  #navbar { padding: 0 var(--space-md); }
  .hero-content h1 { font-size: 2rem; }
  .hero-cta { flex-direction: column; }
  .hero-cta a { text-align: center; }
  .skills-grid { grid-template-columns: 1fr; }
}