/* ===== Portfolio Theme v5 — emerald/teal, aligned skills/projects ===== */
:root{
  --bg:#0e1113; --surface:#12171c; --card:#161d23;
  --text:#ecf1f7; --muted:#a7b2c0;
  --brand:#10b981; --brand2:#06b6d4; --ring:rgba(16,185,129,.28);
  --radius:16px; --shadow:0 24px 48px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;scroll-behavior:smooth}
body{
  background:
    radial-gradient(1200px 600px at 20% -10%,rgba(6,182,212,.10),transparent),
    radial-gradient(900px 400px at 100% 0,rgba(16,185,129,.12),transparent),
    var(--bg);
  color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6
}
a{color:inherit;text-decoration:none}
.container{width:min(1100px,92%);margin-inline:auto}
.small{font-size:14px}.muted{color:var(--muted)}

/* header */
.site-header{position:sticky;top:0;z-index:1000;backdrop-filter:saturate(140%) blur(8px);
  background:linear-gradient(180deg,rgba(18,23,28,.85),rgba(18,23,28,.6),transparent);
  border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand2));
  display:grid;place-items:center;color:#041019;font-weight:800}
.brand-txt{display:flex;flex-direction:column;gap:2px}
.nav-links{display:flex;align-items:center;gap:14px}
.nav-links a{opacity:.9}.nav-links a:hover{opacity:1}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;   /* keeps it above other content */
  background: #0b0c0f; /* same dark background as your site */
  box-shadow: 0 2px 6px rgba(0,0,0,0.4); /* optional subtle shadow */
}

/* Prevent content from being hidden under the header */
body {
  padding-top: 80px; /* adjust based on header height */
}


/* buttons */
.btn{padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.08);display:inline-flex;align-items:center;gap:8px;
  font-weight:600;cursor:pointer;background:transparent;color:var(--text);transition:transform .15s ease, box-shadow .2s ease}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand2));border:none;color:#061018;box-shadow:0 12px 30px -10px var(--ring)}
.btn.ghost{background:rgba(255,255,255,.06)}
.btn:hover{transform:translateY(-1px)}

/* sections */
.section{padding:64px 0}
.section-title{font-size:20px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin:0 0 18px;scroll-margin-top:90px}
.card{background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
  padding:6px 8px;border-radius:9999px}
.tag:hover{filter:brightness(1.1)}

/* hero */
.hero{padding:72px 0 16px;display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:start}
.hero h1{font-size:clamp(28px,5vw,46px);line-height:1.1;margin:0 0 14px}
.hero .cta{display:flex;gap:12px;margin-top:16px}
.hero-card{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.06);
  border-radius:18px;padding:22px}
.hero-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.hero-meta{margin-top:14px}

/* projects — larger images, aligned layout */
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.project.card{display:flex;flex-direction:column}
.project .thumb{height:240px;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.08);background:#0e1219;margin-bottom:10px}
.project .thumb img{width:100%;height:100%;object-fit:contain;display:block;padding:20px;filter:drop-shadow(0 12px 24px rgba(0,0,0,.35))}
.project h3{margin:2px 0 0;font-size:19px}
.project p.muted{margin:6px 0 10px;min-height:56px}
.project .tags{margin-top:auto}

/* experience */
.timeline{position:relative;padding-left:22px}
.timeline::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:2px;background:linear-gradient(var(--brand),transparent)}
.entry{position:relative;margin-bottom:16px}
.entry::before{content:"";position:absolute;left:-16px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--brand);
  box-shadow:0 0 0 4px rgba(16,185,129,.18)}
.entry h4{margin:0 0 4px;font-size:16px}
.entry .where{color:var(--muted);font-size:14px;margin-bottom:6px}
.entry li{margin:0 0 6px}

/* skills — aligned columns/heights */
.skills{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:stretch}
.skill{min-height:96px;display:flex;align-items:flex-start;justify-content:space-between;padding:14px 16px;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.06)}
.skill strong{line-height:1.3;max-width:48%}
.skill span{text-align:right;max-width:48%;font-family:ui-monospace,monospace;color:var(--muted);font-size:12px}

/* contact */
.contact{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
input,textarea{width:100%;background:#0d131b;border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:12px 14px;color:var(--text);font:inherit}
textarea{min-height:120px}
.contact .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* footer */
.site-footer{padding:28px 0;color:var(--muted);font-size:14px;border-top:1px solid rgba(255,255,255,.06)}

/* dialog */
dialog{width:min(980px,92%);background:var(--surface);border:1px solid rgba(255,255,255,.08);border-radius:18px;color:var(--text);
  padding:0;box-shadow:0 28px 64px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(0,0,0,.55)}
.resume{display:grid;grid-template-columns:280px 1fr}
.resume-aside{padding:22px;border-right:1px solid rgba(255,255,255,.06)}
.resume-main{padding:22px}
.resume h3{margin:12px 0}
.resume ul{padding-left:18px;margin:8px 0 0}
.close{position:absolute;top:10px;right:10px;border:none;background:transparent;color:var(--muted);font-size:26px;cursor:pointer}

/* responsive */
@media (max-width:1000px){.projects{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){
  .hero{grid-template-columns:1fr}.hero-grid{grid-template-columns:1fr}
  .skills{grid-template-columns:repeat(2,1fr)}
  .contact{grid-template-columns:1fr}
  .resume{grid-template-columns:1fr}.resume-aside{border-right:none;border-bottom:1px solid rgba(255,255,255,.06)}
}
@media (max-width:700px){.projects{grid-template-columns:1fr}.contact .row{grid-template-columns:1fr}}

/* anchor offset for sticky header */
#projects,#experience,#education,#skills,#contact{scroll-margin-top:90px}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:12px;top:12px;width:auto;height:auto;padding:8px 12px;border-radius:8px;background:#fff;color:#000;z-index:10000}

/* --- Mobile fixes & header cleanup --- */

/* 1) Use sticky header (not fixed) */
.site-header {
  position: sticky !important;
  top: 0;
  left: auto;
  width: 100%;
  box-shadow: none;                /* optional: keep it clean while scrolling */
}

/* 2) Remove the artificial offset from the fixed-header attempt */
body { padding-top: 0 !important; }

/* 3) Prevent sideways scroll on narrow devices */
html, body { overflow-x: hidden; }

/* 4) Let the nav wrap nicely on small screens */
.nav { flex-wrap: wrap; row-gap: 6px; }
.nav-links { flex-wrap: wrap; gap: 10px; }

/* 5) Ensure big hero has enough breathing room on phones */
@media (max-width: 600px) {
  .hero { padding-top: 56px; }     /* was 72px; reduces cramped feel under sticky header */
}

/* 6) Safety: images always scale down */
img, video, canvas, svg { max-width: 100%; height: auto; }

/* === Small-phone fix (iPhone SE) === */

/* 1) Skills grid → single column on very small screens */
@media (max-width: 560px) {
  .skills { grid-template-columns: 1fr !important; gap: 10px !important; }
}

/* 2) Skill card: stack text instead of two narrow columns */
@media (max-width: 560px) {
  .skill {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    min-width: 0 !important;
    padding: 12px 14px !important;
  }
  .skill strong,
  .skill span {
    max-width: 100% !important;
    text-align: left !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }
}

/* 3) Kill the late "fixed header" override + body offset */
.site-header { position: sticky !important; top: 0 !important; }
body { padding-top: 0 !important; }

/* 4) Safety: no sideways scroll */
html, body { overflow-x: hidden !important; }