/* Base */
* { box-sizing: border-box; }
:root {
  --bg: #0b0b0d;
  --fg: #f5f7fa;
  --muted: #a7adbb;
  --card: #141418;
  --accent: #7aa2ff;
  --pill: #1c1e26;
  --border: #262834;
}
:root[data-theme="light"] {
  --bg: #f7f8fc;
  --fg: #0e1116;
  --muted: #5b6472;
  --card: #ffffff;
  --accent: #3a66ff;
  --pill: #eef1f6;
  --border: #e3e7ef;
}
html, body {
  margin: 0; padding: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--fg); background: var(--bg); line-height: 1.5;
}
.container { width: min(1100px, 92%); margin: 0 auto; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: color-mix(in oklab, var(--bg) 85%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center;
  padding: 14px 0;
}
.header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #0a0a0a; font-weight: 800;
}
.title .name { font-weight: 700; line-height: 1; }
.title .surname { font-weight: 800; line-height: 1; margin-top: 2px; }
.title .tags { color: var(--muted); font-size: 12px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Nav */
.main-nav { position: relative; justify-self: center; }
.nav-inline {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  list-style: none; padding: 0; margin: 0;
}
.nav-inline a { text-decoration: none; color: var(--fg); font-weight: 600; }
.btn-contact {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px;
}
.header-right { justify-self: end; }
.icon-btn { background: transparent; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; color: var(--fg); cursor: pointer; }

/* Mobile menu */
.nav-toggle {
  display: none; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; background: transparent; color: var(--fg);
}
.nav-toggle .bar { display: block; width: 18px; height: 2px; background: var(--fg); margin: 3px 0; }

.nav-panel {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  z-index: 1001;
}
.nav-panel .nav-list { list-style: none; margin: 0; padding: 8px; }
.nav-panel a { display: block; padding: 10px 12px; color: var(--fg); text-decoration: none; border-radius: 8px; }
.nav-panel a:hover { background: var(--pill); }

/* Cards & sections */
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 18px; margin: 16px 0;
}
.item-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.item-head .meta { color: var(--muted); font-size: 14px; }
.bullets { margin: 10px 0 0 0; padding-left: 20px; }
.bullets li { margin: 6px 0; }

/* Skills */
.skills-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.skill-card { background: color-mix(in oklab, var(--card) 96%, black 0%); border: 1px solid var(--border); border-radius: 14px; padding: 14px; }
.skills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pill { background: var(--pill); border: 1px solid var(--border); padding: 6px 10px; border-radius: 999px; font-size: 13px; }

/* Projects */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.proj { background: color-mix(in oklab, var(--card) 96%, black 0%); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.tags { display: flex; gap: 8px; list-style: none; padding: 0; margin: 10px 0 0 0; }
.tags li { font-size: 12px; border: 1px solid var(--border); border-radius: 999px; padding: 4px 8px; color: var(--muted); }

/* Buttons */
.btn-main, .btn-alt {
  display: inline-block; text-decoration: none; font-weight: 700;
  padding: 10px 14px; border-radius: 12px; margin-right: 8px;
}
.btn-main { background: var(--accent); color: #0b0b0d; }
.btn-alt { background: transparent; color: var(--fg); border: 1px solid var(--border); }

.contact-buttons { display: flex; flex-wrap: wrap; gap: 10px; }

.muted { color: var(--muted); }

/* Animations */
.fade-in { animation: fade 0.5s ease 1; }
@keyframes fade { from { opacity: 0; transform: translateY(6px);} to { opacity:1; transform:none;} }

/* Responsive */
@media (max-width: 980px) {
  .nav-inline { display: none; }
  .nav-toggle { display: inline-block; }
  .skills-grid { grid-template-columns: 1fr 1fr; }
  .grid { grid-template-columns: 1fr; }
  .item-head { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (max-width: 560px) {
  .skills-grid { grid-template-columns: 1fr; }
  .title .tags { white-space: normal; }
}
.projects-page {
--bg:#0b0c10; --panel:#111217; --panel-2:#0e0f14; --text:#e8ecf1; --muted:#a7b0bd; --brand:#7aa2ff; --brand-2:#a77bff; --line:#1a1c24;
--card:#0f1117; --chip:#161821; --shadow:0 6px 24px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.02) inset;
background:radial-gradient(1200px 800px at 80% -10%,rgba(119,132,255,.12),transparent 60%),radial-gradient(1200px 900px at -10% -20%,rgba(175,119,255,.10),transparent 60%),var(--bg);
color:var(--text);
}
.projects-page a{color:inherit;text-decoration:none}
.projects-page .site-header{position:sticky;top:0;z-index:50;width:100%;backdrop-filter:saturate(140%) blur(10px);background:linear-gradient(180deg,rgba(15,16,22,.9),rgba(15,16,22,.7));border-bottom:1px solid var(--line)}
.projects-page .header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1200px;margin:0 auto;padding:14px 18px}
.projects-page .brand{display:flex;align-items:center;gap:10px}
.projects-page .avatar{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand-2));display:grid;place-items:center;color:#0b0c10;font-weight:800}
.projects-page .title{font-weight:800;letter-spacing:.2px}
.projects-page .home-nav a{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--chip);transition:.2s}
.projects-page .home-nav a:hover{transform:translateY(-1px);box-shadow:var(--shadow)}


.projects-page .wrap{max-width:1200px;margin:0 auto;padding:18px;display:grid;grid-template-columns:280px 1fr;gap:18px}
.projects-page .sidebar{position:sticky;top:70px;align-self:start;border:1px solid var(--line);background:var(--panel);border-radius:16px;box-shadow:var(--shadow)}
.projects-page .sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:14px 14px;border-bottom:1px solid var(--line)}
.projects-page .sidebar h2{font-size:15px;margin:0;color:var(--muted);font-weight:700}
.projects-page .toggle{display:none}
.projects-page .search{padding:10px 14px;border-bottom:1px solid var(--line)}
.projects-page .search input{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);color:var(--text)}
.projects-page .project-list{max-height:calc(100dvh - 200px);overflow:auto;padding:8px 8px 12px}
.projects-page .project-list a{display:flex;flex-direction:column;gap:4px;padding:10px 10px;border-radius:12px;border:1px solid transparent}
.projects-page .project-list a:hover{background:var(--chip);border-color:var(--line)}
.projects-page .project-list a.active{background:linear-gradient(180deg,rgba(122,162,255,.15),rgba(167,123,255,.15));border-color:var(--brand)}
.projects-page .p-title{font-weight:700;font-size:14px}
.projects-page .p-sub{font-size:12px;color:var(--muted)}


.projects-page .content{min-height:60vh}
.projects-page .post{border:1px solid var(--line);background:var(--panel);border-radius:18px;box-shadow:var(--shadow)}
.projects-page .post-head{padding:18px 18px 6px;border-bottom:1px solid var(--line)}
.projects-page .crumbs{font-size:12px;color:var(--muted)}
.projects-page .post-title{font-size:28px;margin:6px 0 14px;font-weight:800}
.projects-page .meta{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:12px}
.projects-page .chip{padding:4px 8px;border-radius:999px;border:1px solid var(--line);background:var(--chip)}
.projects-page .post-body{padding:18px}
.projects-page .post-body h3{margin:18px 0 8px}
.projects-page .code{padding:12px;border-radius:12px;background:#0b0d13;border:1px solid var(--line);overflow:auto}
.projects-page .media{display:block;width:100%;border-bottom:1px solid var(--line);background:#0b0d13}
.projects-page .media img, .projects-page .media video{display:block;max-width:100%;height:auto;border-radius:16px 16px 0 0}
.projects-page .links{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.projects-page .links .btn{padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--chip)}


@media (max-width: 900px){
.projects-page .wrap{grid-template-columns:1fr}
.projects-page .sidebar{position:static}
.projects-page .toggle{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--chip);cursor:pointer}
.projects-page .project-list{display:none}
.projects-page .project-list.open{display:block}
}

/* Reset link look for project cards */
#projects .grid .proj {
  display: block;
  text-decoration: none;   /* no underline */
  color: inherit;          /* use normal text color */
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}

/* Keep headings and text consistent */
#projects .grid .proj h3 {
  margin: 0 0 8px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text); /* no blue/purple */
}
#projects .grid .proj p {
  margin: 0 0 10px;
  color: var(--muted);
}

/* Tags styling stays */
#projects .grid .proj .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0;
  list-style: none;
}
#projects .grid .proj .tags li {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--chip);
  border: 1px solid var(--line);
}

/* Hover effect on the entire card */
#projects .grid .proj:hover {
  transform: translateY(-3px);
  border-color: var(--brand);
  background: linear-gradient(180deg,
              rgba(122,162,255,.06),
              rgba(167,123,255,.06)), var(--panel);
}
/* 1) Anchor-cards should look like your old boxes in ALL states */
#projects .grid a.proj,
#projects .grid a.proj:link,
#projects .grid a.proj:visited,
#projects .grid a.proj:hover,
#projects .grid a.proj:active,
#projects .grid a.proj:focus {
  display: block;
  text-decoration: none;         /* no underline */
  color: var(--text);            /* kill blue/purple */
  background: var(--panel);
  border: 1px solid var(--line); /* restore thin outline */
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--shadow);
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  overflow: hidden;              /* keeps rounded corners clean */
  cursor: pointer;
}

/* Full-card hover */
#projects .grid a.proj:hover {
  transform: translateY(-3px);
  border-color: var(--brand);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  background: linear-gradient(180deg, rgba(122,162,255,.06), rgba(167,123,255,.06)), var(--panel);
}

/* Headings and text keep your theme colors */
#projects .grid a.proj h3 {
  margin: 0 0 8px;
  font-size: 1.1rem;
  font-weight: 700;
  color: inherit;
}
#projects .grid a.proj p { margin: 0 0 10px; color: var(--muted); }

/* 2) Restore the “pill” tags under each project */
#projects .grid a.proj ul.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#projects .grid a.proj ul.tags li {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--chip);
  border: 1px solid var(--line);
  color: var(--text);
  text-decoration: none; /* ensure no underline even if browser treats as link */
}