/* ═══════════════════════════════════════════════════
   MUHAMMAD HADI PORTFOLIO  —  style.css
   Full mobile-first rewrite + working email form
═══════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────── */
:root {
  --bg:           #080d1a;
  --bg-alt:       #0d1424;
  --surface:      #111827;
  --surface-2:    #1a2236;
  --border:       rgba(255,255,255,0.07);
  --border-hover: rgba(96,165,250,0.45);
  --text:         #e2e8f0;
  --text-muted:   #94a3b8;
  --text-dim:     #64748b;
  --accent:       #3b82f6;
  --accent-2:     #60a5fa;
  --accent-glow:  rgba(59,130,246,0.22);
  --radius:       18px;
  --radius-sm:    12px;
  --ease:         0.28s ease;
  --font-head:    'Syne', sans-serif;
  --font-body:    'DM Sans', sans-serif;
  --nav-h:        64px;
}

/* ── Light mode ────────────────────────────────── */
body.light-mode {
  --bg:           #f0f4ff;
  --bg-alt:       #e4ecf8;
  --surface:      #ffffff;
  --surface-2:    #d8e6f5;
  --border:       rgba(37,99,235,0.14);
  --border-hover: rgba(37,99,235,0.42);
  --text:         #0f172a;
  --text-muted:   #334155;
  --text-dim:     #64748b;
  --accent:       #1d4ed8;
  --accent-2:     #2563eb;
  --accent-glow:  rgba(37,99,235,0.14);
}

/* ── Reset ─────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
img  { display:block; max-width:100%; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  transition: background var(--ease), color var(--ease);
}

/* ── Utility ───────────────────────────────────── */
.container { max-width:1160px; margin:0 auto; padding:0 20px; }
.accent    { color:var(--accent-2); }

/* ══════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════ */
.navbar {
  position: fixed;
  top:0; left:0; right:0;
  height: var(--nav-h);
  background: rgba(8,13,26,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  z-index: 1000;
  transition: background var(--ease), box-shadow var(--ease);
}
body.light-mode .navbar { background: rgba(240,244,255,0.90); }
.navbar.scrolled { box-shadow: 0 4px 28px rgba(0,0,0,0.22); }
body.light-mode .navbar.scrolled { box-shadow: 0 4px 20px rgba(37,99,235,0.10); }

.nav-container {
  max-width: 1160px; margin:0 auto;
  height:100%; display:flex;
  align-items:center; justify-content:space-between;
  padding:0 20px; gap:12px;
}

.logo {
  font-family: var(--font-head);
  font-size:24px; font-weight:800;
  letter-spacing:1px; color:var(--text);
  flex-shrink:0; user-select:none;
}
.logo-dot { color:var(--accent-2); }

/* desktop nav links */
.nav-links {
  display:flex; gap:4px; list-style:none;
  margin-left:auto; margin-right:12px;
}
.nav-links a {
  color:var(--text-muted); text-decoration:none;
  font-size:14px; font-weight:500;
  padding:7px 13px; border-radius:8px;
  transition:color var(--ease), background var(--ease);
  white-space:nowrap;
}
.nav-links a:hover { color:var(--accent-2); background:rgba(96,165,250,0.08); }
body.light-mode .nav-links a:hover { background:rgba(37,99,235,0.08); }

/* theme toggle */
.theme-toggle {
  background:var(--surface); border:1px solid var(--border);
  color:var(--text); width:38px; height:38px;
  border-radius:10px; cursor:pointer; font-size:15px;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--ease); flex-shrink:0;
}
.theme-toggle:hover { background:var(--surface-2); }

/* hamburger */
.hamburger {
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px; background:none;
  border:1px solid var(--border); border-radius:8px;
  cursor:pointer; padding:9px; flex-shrink:0;
  /* tap target safety */
  -webkit-tap-highlight-color: transparent;
}
.hamburger span {
  display:block; height:2px; border-radius:2px;
  background:var(--text);
  transition:transform var(--ease), opacity var(--ease);
  transform-origin:center;
}
.hamburger.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.active span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* ══════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════ */
.hero {
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding: calc(var(--nav-h) + 48px) 20px 64px;
  position:relative; overflow:hidden;
}

.hero-bg-grid {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(59,130,246,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,0.045) 1px, transparent 1px);
  background-size:56px 56px;
}
body.light-mode .hero-bg-grid {
  background-image:
    linear-gradient(rgba(37,99,235,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,0.06) 1px, transparent 1px);
}

.hero::before {
  content:''; position:absolute; top:5%; left:50%; transform:translateX(-50%);
  width:min(700px,100%); height:480px;
  background:radial-gradient(ellipse, rgba(59,130,246,0.13) 0%, transparent 70%);
  pointer-events:none;
}
body.light-mode .hero::before {
  background:radial-gradient(ellipse, rgba(37,99,235,0.11) 0%, transparent 70%);
}

.hero-content {
  max-width:1100px; width:100%; position:relative;
  display:grid; grid-template-columns:1fr 360px; gap:56px; align-items:center;
}

.subtitle {
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px;
}
.subtitle span {
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:2px;
  color:var(--accent-2); background:rgba(59,130,246,0.11);
  border:1px solid rgba(59,130,246,0.22); padding:5px 12px; border-radius:20px;
}
body.light-mode .subtitle span {
  background:rgba(37,99,235,0.09); border-color:rgba(37,99,235,0.24);
}

.hero-text h1 {
  font-family:var(--font-head); font-size:clamp(42px,7vw,76px);
  font-weight:800; line-height:1.0; letter-spacing:-1px; margin-bottom:24px;
}
.hero-text p {
  color:var(--text-muted); font-size:16.5px; max-width:520px;
  margin-bottom:36px; line-height:1.85;
}
.buttons { display:flex; gap:12px; flex-wrap:wrap; }

/* buttons */
.btn {
  display:inline-block; padding:13px 26px; border-radius:var(--radius-sm);
  text-decoration:none; border:none; cursor:pointer;
  font-family:var(--font-body); font-weight:600; font-size:15px;
  transition:transform .22s ease, box-shadow .22s ease, background var(--ease);
  /* large tap target on mobile */
  min-height:48px; display:inline-flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.primary {
  background:linear-gradient(135deg,#1d4ed8,#3b82f6); color:#fff;
  box-shadow:0 8px 24px rgba(59,130,246,0.32);
}
.primary:hover { transform:translateY(-3px); box-shadow:0 14px 32px rgba(59,130,246,0.42); }
body.light-mode .primary {
  background:linear-gradient(135deg,#1e40af,#2563eb);
  box-shadow:0 8px 22px rgba(37,99,235,0.28);
}
.secondary {
  background:var(--surface); color:var(--text); border:1px solid var(--border);
}
.secondary:hover { background:var(--surface-2); transform:translateY(-2px); }

/* profile card */
.profile-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:26px; padding:32px 24px; text-align:center;
  transition:border-color var(--ease), box-shadow var(--ease), background var(--ease);
}
body.light-mode .profile-card { box-shadow:0 4px 28px rgba(37,99,235,0.08); }
.profile-card:hover { border-color:var(--border-hover); box-shadow:0 0 32px var(--accent-glow); }

.profile-img-wrap {
  display:inline-block; border-radius:50%; padding:4px;
  background:linear-gradient(135deg,#3b82f6,#1d4ed8); margin-bottom:18px;
}
body.light-mode .profile-img-wrap { background:linear-gradient(135deg,#2563eb,#1e40af); }
.profile-card img {
  width:160px; height:160px; border-radius:50%; object-fit:cover;
  border:4px solid var(--bg);
}
.profile-card h2 {
  font-family:var(--font-head); font-size:19px; font-weight:700; margin-bottom:6px;
}
.profile-tagline { color:var(--text-muted); font-size:13.5px; margin-bottom:16px; }
.profile-badges { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; }
.profile-badges span {
  font-size:12.5px; background:var(--surface-2); border:1px solid var(--border);
  color:var(--text-muted); padding:5px 11px; border-radius:20px;
}

/* ══════════════════════════════════════════════════
   SECTIONS
══════════════════════════════════════════════════ */
section { padding:96px 20px; }
.about       { background:var(--bg-alt); }
.section-alt { background:var(--bg); }

.section-title {
  font-family:var(--font-head); text-align:center;
  font-size:clamp(28px,5vw,46px); font-weight:800;
  margin-bottom:52px; letter-spacing:-.4px;
}

/* about box */
.about-box {
  max-width:780px; margin:0 auto; text-align:center;
  color:var(--text-muted); font-size:17px; line-height:1.9;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:36px 40px;
  opacity:0; transform:translateY(18px);
  transition:opacity .55s ease, transform .55s ease, background var(--ease);
}
body.light-mode .about-box { box-shadow:0 4px 22px rgba(37,99,235,0.06); }
.about-box.visible { opacity:1; transform:none; }

/* timeline */
.timeline {
  max-width:760px; margin:0 auto;
  display:flex; flex-direction:column;
  position:relative;
}
.timeline::before {
  content:''; position:absolute; left:18px; top:8px; bottom:8px;
  width:2px; background:linear-gradient(to bottom,var(--accent),transparent);
}
.timeline-item {
  display:grid; grid-template-columns:40px 1fr;
  gap:18px; align-items:start; padding-bottom:26px;
}
.timeline-dot {
  width:12px; height:12px; background:var(--accent-2);
  border-radius:50%; margin-top:22px; margin-left:7px;
  box-shadow:0 0 8px var(--accent-glow); flex-shrink:0;
}
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:24px 28px;
  transition:transform .32s ease, border-color .32s ease, box-shadow .32s ease, background var(--ease);
  opacity:0; transform:translateY(18px);
}
body.light-mode .card { box-shadow:0 2px 14px rgba(37,99,235,0.06); }
.card.visible { opacity:1; transform:translateY(0); }
.card:hover   { transform:translateY(-5px); border-color:var(--border-hover); box-shadow:0 10px 28px var(--accent-glow); }
.card-year    { font-size:12px; font-weight:600; letter-spacing:1px; color:var(--accent-2); text-transform:uppercase; margin-bottom:8px; }
.card-degree  { font-family:var(--font-head); font-size:18px; font-weight:700; color:var(--text); margin-bottom:6px; }
.card-info    { color:var(--text-muted); font-size:14px; margin-bottom:14px; }

.badge { display:inline-block; font-size:12px; font-weight:600; padding:4px 12px; border-radius:20px; }
.badge-active { background:rgba(16,185,129,0.11); color:#34d399; border:1px solid rgba(16,185,129,0.24); }
body.light-mode .badge-active { background:rgba(5,150,105,0.09); color:#065f46; border-color:rgba(5,150,105,0.28); }
.badge-done   { background:rgba(148,163,184,0.1); color:var(--text-dim); border:1px solid rgba(148,163,184,0.14); }
body.light-mode .badge-done { background:rgba(100,116,139,0.09); color:#475569; border-color:rgba(100,116,139,0.18); }

/* skills */
.skills-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.skill {
  display:flex; align-items:center; gap:8px;
  padding:13px 20px; background:var(--surface); border:1px solid var(--border);
  border-radius:14px; font-size:14.5px; font-weight:500; color:var(--text);
  cursor:default; user-select:none;
  transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease, background var(--ease);
  opacity:0; transform:scale(.93);
  -webkit-tap-highlight-color:transparent;
}
body.light-mode .skill { box-shadow:0 2px 8px rgba(37,99,235,0.05); }
.skill.visible  { opacity:1; transform:scale(1); }
.skill:hover    { transform:scale(1.06) translateY(-2px); border-color:var(--border-hover); box-shadow:0 8px 18px var(--accent-glow); }

/* ══════════════════════════════════════════════════
   CONTACT
══════════════════════════════════════════════════ */
.contact-form {
  max-width:640px; margin:0 auto 16px;
  display:flex; flex-direction:column; gap:14px;
}
.contact-form input,
.contact-form textarea {
  width:100%; padding:15px 18px;
  border-radius:var(--radius-sm); border:1px solid var(--border);
  background:var(--surface); color:var(--text);
  font-family:var(--font-body); font-size:15px; outline:none;
  /* larger tap area */
  min-height:50px;
  transition:border-color var(--ease), box-shadow var(--ease), background var(--ease);
  -webkit-appearance:none;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color:var(--text-dim); }
.contact-form input:focus,
.contact-form textarea:focus {
  border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow);
}
.contact-form textarea { min-height:140px; resize:vertical; }

.contact-form button[type="submit"] {
  width:100%; padding:15px; font-size:15.5px;
}

#status {
  text-align:center; margin-top:10px; font-size:15px; min-height:22px;
  transition:opacity .3s;
}
.status-ok    { color:#34d399; }
.status-error { color:#f87171; }
body.light-mode .status-ok    { color:#059669; }
body.light-mode .status-error { color:#dc2626; }

.contact-direct {
  text-align:center; margin-top:20px; color:var(--text-muted); font-size:14px;
}
.contact-direct a {
  color:var(--accent-2); text-decoration:none; font-weight:600;
}
.contact-direct a:hover { text-decoration:underline; }

/* ══════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════ */
footer { padding:32px 20px; border-top:1px solid var(--border); background:var(--bg); }
.footer-inner {
  max-width:1160px; margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:10px; color:var(--text-dim); font-size:13.5px;
}
.footer-links { display:flex; gap:18px; }
.footer-links a { color:var(--text-dim); text-decoration:none; transition:color var(--ease); }
.footer-links a:hover { color:var(--accent-2); }

/* ══════════════════════════════════════════════════
   RESPONSIVE — TABLET  (≤900px)
══════════════════════════════════════════════════ */
@media (max-width:900px) {
  .hero-content {
    grid-template-columns:1fr; text-align:center;
    gap:40px;
  }
  .hero-text h1 { font-size:clamp(38px,8vw,58px); }
  .subtitle, .buttons { justify-content:center; }
  .hero-text p { margin:0 auto 32px; max-width:100%; }
  .profile-card { max-width:340px; margin:0 auto; }
}

/* ══════════════════════════════════════════════════
   RESPONSIVE — MOBILE  (≤768px)
══════════════════════════════════════════════════ */
@media (max-width:768px) {

  /* show hamburger, hide desktop nav */
  .hamburger { display:flex; }

  .nav-links {
    display:none; position:absolute;
    top:var(--nav-h); left:0; right:0;
    background:var(--bg); border-bottom:1px solid var(--border);
    flex-direction:column; gap:0; padding:8px 0;
    /* nice slide-down */
    transform-origin:top; animation:none;
  }
  body.light-mode .nav-links { background:var(--bg-alt); }

  .nav-links.open { display:flex; }

  .nav-links li a {
    display:block; padding:14px 22px;
    border-radius:0; font-size:15px;
    /* fat tap targets */
    min-height:48px; display:flex; align-items:center;
  }

  /* sections */
  section { padding:72px 16px; }
  .about-box { padding:24px 20px; font-size:16px; }

  /* timeline — single column, no line */
  .timeline::before { display:none; }
  .timeline-item    { grid-template-columns:1fr; gap:0; padding-bottom:20px; }
  .timeline-dot     { display:none; }
  .card             { padding:20px 22px; }

  /* skills — 2 per row on small screens */
  .skills-grid { gap:10px; }
  .skill { flex:1 1 calc(50% - 10px); justify-content:center; min-width:130px; }

  /* hero */
  .hero { padding-top:calc(var(--nav-h) + 32px); padding-bottom:48px; }
  .profile-card img { width:130px; height:130px; }
  .buttons { gap:10px; }
  .btn { padding:12px 22px; font-size:14.5px; }

  /* contact */
  .contact-form input,
  .contact-form textarea { font-size:16px; /* prevent iOS zoom */ }

  /* footer */
  .footer-inner { flex-direction:column; text-align:center; }
}

/* ══════════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE  (≤420px)
══════════════════════════════════════════════════ */
@media (max-width:420px) {
  .hero-text h1 { font-size:36px; }
  .section-title { font-size:28px; margin-bottom:36px; }
  .subtitle span { font-size:10px; letter-spacing:1.5px; }
  .skill { flex:1 1 100%; }
  .profile-card { padding:24px 16px; }
}