/* =========================================================
   MIRZA HADI — CV / PORTFOLIO
   Theme: "Dark IDE" — built for a developer, by a developer.
   ========================================================= */

:root{
  --bg:            #0d1117;
  --bg-panel:      #161b22;
  --bg-panel-alt:  #1c2229;
  --border:        #2a313c;
  --text:          #e6edf3;
  --text-dim:      #8b949e;
  --accent:        #7ee787;   /* terminal green */
  --accent-dim:    #4f8a58;
  --accent-2:      #d29922;   /* amber, secondary accent */
  --mono:          'JetBrains Mono', monospace;
  --sans:          'Source Sans 3', Arial, sans-serif;
  --radius:        10px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

::selection{ background:var(--accent-dim); color:#fff; }

/* ---------- focus visibility (accessibility) ---------- */
button:focus-visible,
a:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ============ STATUS BAR ============ */
.statusbar{
  background:var(--bg-panel);
  border-bottom:1px solid var(--border);
  font-family:var(--mono);
  font-size:12px;
  color:var(--text-dim);
}
.statusbar-inner{
  max-width:980px;
  margin:0 auto;
  padding:8px 24px;
  display:flex;
  align-items:center;
  gap:8px;
}
.dot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
}
.dot-red{ background:#ff5f56; }
.dot-yellow{ background:#ffbd2e; }
.dot-green{ background:#27c93f; }
.statusbar-path{ margin-left:8px; color:var(--text-dim); }
.statusbar-right{ margin-left:auto; }
.statusbar-right em{ color:var(--accent); font-style:normal; }

@media (max-width:600px){
  .statusbar-right{ display:none; }
}

/* ============ HERO ============ */
.hero{
  background:
    radial-gradient(900px 400px at 15% -10%, rgba(126,231,135,0.10), transparent 60%),
    var(--bg);
  border-bottom:1px solid var(--border);
  padding:56px 24px 48px;
}
.hero-inner{
  max-width:980px;
  margin:0 auto;
}
.hero-eyebrow{
  font-family:var(--mono);
  color:var(--accent-2);
  font-size:13px;
  letter-spacing:0.5px;
  margin:0 0 14px 0;
}
.hero-name{
  font-family:var(--mono);
  font-size:clamp(34px, 6vw, 56px);
  font-weight:800;
  margin:0;
  letter-spacing:-1px;
  color:var(--text);
}
.hero-role{
  font-size:18px;
  color:var(--text-dim);
  margin:8px 0 28px 0;
}
.pipe{ color:var(--border); margin:0 6px; }

.terminal{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  margin-bottom:28px;
}
.terminal-head{
  display:flex;
  align-items:center;
  gap:6px;
  padding:10px 14px;
  background:var(--bg-panel-alt);
  border-bottom:1px solid var(--border);
}
.terminal-title{
  margin-left:10px;
  font-family:var(--mono);
  font-size:12px;
  color:var(--text-dim);
}
.terminal-body{
  padding:16px 18px;
  font-family:var(--mono);
  font-size:14px;
}
.terminal-body .prompt{ color:var(--accent); margin-right:8px; }
.terminal-body .output{
  color:var(--text-dim);
  margin:8px 0 0 0;
  line-height:1.7;
}

.contact-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  font-size:14px;
}
.contact-list li{ color:var(--text-dim); }
.contact-label{
  font-family:var(--mono);
  color:var(--accent);
  font-size:11px;
  text-transform:uppercase;
  margin-right:6px;
  border:1px solid var(--border);
  border-radius:4px;
  padding:2px 6px;
}

/* ============ MAIN LAYOUT ============ */
.wrap{
  max-width:980px;
  margin:0 auto;
  padding:50px 24px 20px;
}

.section{
  padding:34px 0;
  border-bottom:1px solid var(--border);
}
.section:last-of-type{ border-bottom:none; }

.section-title{
  font-family:var(--mono);
  font-size:20px;
  font-weight:700;
  color:var(--text);
  margin:0 0 18px 0;
}
.comment{ color:var(--text-dim); font-weight:400; }

.section p{
  margin:0 0 14px 0;
  color:#c9d1d9;
  font-size:15.5px;
}

/* ============ READ MORE PATTERN ============ */
.readmore-content{
  max-height:0;
  overflow:hidden;
  transition:max-height 0.45s ease;
}
.readmore-content.active{
  max-height:2400px;
}
.readmore-btn{
  background:none;
  border:none;
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  padding:0;
  margin-top:4px;
  font-family:var(--mono);
}
.btn-text{
  color:var(--accent);
  font-weight:600;
  font-size:13px;
}
.btn-icon{
  width:26px;
  height:26px;
  border:1.5px solid var(--accent);
  border-radius:50%;
  color:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  transition:transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.readmore-btn:hover .btn-icon{
  background:var(--accent);
  color:#0d1117;
}
.readmore-btn.is-open .btn-icon{
  transform:rotate(90deg);
}

/* ============ SKILLS ============ */
.skill-list{
  list-style:none;
  margin:0 0 14px 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:10px 24px;
}
.skill-list li{
  font-size:14.5px;
  color:#c9d1d9;
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.skill-icon{ color:var(--accent); flex-shrink:0; }

/* ============ PLUGINS ============ */
.plugin-list{
  list-style:none;
  margin:0 0 14px 0;
  padding:0;
}
.plugin-list li{
  padding:10px 14px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:6px;
  margin-bottom:10px;
  font-size:14.5px;
  color:#c9d1d9;
}
.plugin-list strong{ color:var(--text); }

/* ============ WORK EXPERIENCE ============ */
.job{ margin-bottom:22px; }
.job:last-child{ margin-bottom:0; }
.job-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:6px 16px;
  margin-bottom:8px;
}
.job-head h3{
  margin:0;
  font-size:16px;
  font-weight:700;
  color:var(--text);
}
.job-co{
  font-weight:400;
  color:var(--text-dim);
}
.job-date{
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--accent-2);
  white-space:nowrap;
}
.job-points{
  margin:0;
  padding-left:20px;
  color:#c9d1d9;
  font-size:14.5px;
}
.job-points li{ margin-bottom:6px; }
.edu-school{ color:var(--text-dim); margin:0; }

/* ============ CERTIFICATIONS ============ */
.cert-status{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.5px;
  color:var(--accent-2);
  text-transform:uppercase;
  margin-bottom:10px !important;
}
.cert-list{
  list-style:none;
  margin:0 0 18px 0;
  padding:0;
}
.cert-list li{
  font-size:14.5px;
  color:#c9d1d9;
  padding:8px 0;
  border-bottom:1px dashed var(--border);
}
.cert-list li:last-child{ border-bottom:none; }
.cert-list strong{ color:var(--text); }

/* ============ ACHIEVEMENTS ============ */
.achv-list{
  list-style:none;
  margin:0;
  padding:0;
}
.achv-list li{
  position:relative;
  padding:0 0 14px 22px;
  font-size:14.5px;
  color:#c9d1d9;
}
.achv-list li::before{
  content:"\2605";
  position:absolute;
  left:0;
  top:1px;
  color:var(--accent-2);
  font-size:13px;
}
.achv-list strong{ color:var(--text); }

/* ============ ADDITIONAL INFO ============ */
.info-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px 24px;
}
.info-item{
  display:flex;
  flex-direction:column;
  gap:4px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:8px;
  padding:12px 14px;
}
.info-key{
  font-family:var(--mono);
  font-size:11px;
  text-transform:uppercase;
  color:var(--accent);
  letter-spacing:0.5px;
}
.info-val{
  font-size:14px;
  color:#c9d1d9;
}
@media (max-width:600px){
  .info-grid{ grid-template-columns:1fr; }
}

/* ============ FOOTER ============ */
.footer{
  text-align:center;
  padding:30px 24px 50px;
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--text-dim);
}
.heart{ color:var(--accent); }

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .readmore-content,
  .btn-icon{ transition:none; }
}

/* ============ RESPONSIVE ============ */
@media (max-width:600px){
  .skill-list{ grid-template-columns:1fr; }
  .job-head{ flex-direction:column; align-items:flex-start; }
}