/* Mobile overrides (<= 640px width) */

/* General spacing and readability */
body { font-size: 17px; line-height: 1.7; padding-bottom: calc(env(safe-area-inset-bottom, 0) + 0.75rem); }
.card {
  padding: 1rem;
  margin: 1.5rem auto;
  border-radius: 1.25rem;
  scroll-margin-top: 4rem; /* prevent sticky nav overlap on anchor jump */
}

/* Header welcome and portrait */
#welcome { font-size: 1.7em; letter-spacing: 0.015rem; }
#profile-photo {
  width: 6.5em;
  height: 6.5em;
}

/* Navbar: tighter and easier taps */
#navbar {
  gap: 0.5rem;
  padding: 0 0.6rem; /* collapsed: no vertical padding */
  overflow: hidden;
  max-height: 0; /* fully collapsed */
  opacity: 0;
  pointer-events: none;
  transition: max-height 220ms ease, opacity 160ms ease, padding 160ms ease;
}
#navbar.open {
  max-height: 100vh;
  opacity: 1;
  pointer-events: auto;
  padding: 0.4rem 0.6rem calc(0.6rem + env(safe-area-inset-bottom, 0));
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.nav-toggle { display: inline-block; }
#navbar a {
  padding: 0.6rem 0.8rem;
  font-size: 1rem;
  width: 100%;
  text-align: center;
  border-radius: 0.7rem;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.05);
}
#navbar a:hover { background: rgba(255,255,255,0.08); }
#navbar a:active { background: rgba(255,255,255,0.12); }

/* About actions spacing */
.about-actions { margin-top: 0.9rem; }
.resume-inline { margin-top: 1rem; }

/* Proficiency list spacing on mobile */
.proficiency-list { gap: 0.6rem; }
.prof-item { grid-template-columns: 90px 1fr auto; gap: 0.5rem; }

/* Projects controls */
.projects-controls h2 { font-size: 1.15rem; }
.scroll-btn, .show-all-btn { padding: 0.3rem 0.5rem; }

/* Projects row: show 1–2 cards comfortably */
.projects-row {
  grid-auto-columns: clamp(13.75rem, 85%, 20rem);
  gap: 0.9rem;
}
.project-card { padding: 0.85rem; }
.project-title { font-size: 1.05rem; }
.tech-badge { font-size: 0.8rem; padding: 0.2rem 0.6rem; }
.icon-link img { width: 1rem; height: 1rem; }

/* Video container: keep aspect but reduce visual weight a bit */
.video-container { border-radius: 0.6rem; }
.video-aspect { aspect-ratio: 16/9; }

/* Theme button spacing */
#theme-toggle.top-right { top: 0.9rem; right: 0.9rem; }
#theme-toggle.top-right img { width: 1.35em; height: 1.35em; }
/* Reader toggle: keep pinned top-right on mobile to prevent drift */
#reader-toggle {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 3.5rem);
  right: calc(env(safe-area-inset-right) + 0.75rem);
  z-index: 110;
}
.project-card, .xp-item, .edu-item, .resume-preview {
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  background: color-mix(in srgb, var(--card-bg) 88%, transparent);
}

/* Skills accordion (mobile-only) */
.skill-toggle { display: inline-block; }
.skill-list { display: none; }
.skill-cat.open .skill-list { display: grid; }
.skill-cat.open .skill-toggle { transform: rotate(180deg); }