/* ===========================
   Theme & Base
   =========================== */
:root{
  --primary:#2563eb;        /* Blue 600 */
  --primary-hover:#1d4ed8;  /* Blue 700 */
  --text:#0f172a;           /* Slate 900 */
  --muted:#64748b;          /* Slate 500 */
  --card:#ffffff;
  --border:#e2e8f0;         /* Slate 200 */
  --bg:#f1f5f9;             /* Slate 100 */
}

* { box-sizing: border-box; }
html:focus-within { scroll-behavior: smooth; }
body { margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; color:var(--text); background:#fff; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
.container { max-width:1100px; margin:0 auto; padding:0 1rem; }

section { padding:4rem 1rem; }
.section-header { max-width:860px; margin:0 auto 1.5rem auto; text-align:center; }
.section-header h2 { margin:0 0 .35rem 0; }

/* ===========================
   Navbar
   =========================== */
#navbar {
  position: sticky; top:0; z-index:50; background:#fff;
  border-bottom:1px solid transparent; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
#navbar.scrolled {
  background:rgba(255,255,255,0.85);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-container { display:flex; align-items:center; justify-content:space-between; padding:.75rem 0; }
.logo { font-weight:700; }
.nav-links { display:flex; gap:.75rem; align-items:center; list-style:none; margin:0; padding:0; }
.nav-link { padding:.5rem .6rem; border-radius:.5rem; }
.nav-link.active { background:#eef2ff; color:#3730a3; }
.nav-link.cta { background: var(--primary); color:#fff; padding:.5rem 1rem; border-radius:6px; }

/* Mobile nav */
.mobile-menu-toggle { display:none; background:transparent; border:none; cursor:pointer; }
.mobile-menu-toggle span { display:block; width:24px; height:2px; background:#0f172a; margin:5px 0; transition:transform .2s ease; }

@media (max-width: 768px){
  .mobile-menu-toggle { display:block; }
  .nav-links {
    position: fixed; right:0; top:56px; width:min(320px, 85vw); height:calc(100vh - 56px);
    background:#fff; border-left:1px solid var(--border); transform: translateX(100%);
    transition: transform .25s ease; flex-direction:column; padding:1rem;
  }
  .nav-links.active { transform: translateX(0); }
  .mobile-overlay {
    position: fixed; inset:0; background:rgba(0,0,0,.35); display:none;
  }
  .mobile-overlay.active { display:block; }
}

/* ===========================
   Hero
   =========================== */
.hero { background:linear-gradient(180deg, #eef2ff 0%, #ffffff 100%); }
.hero-content { display:grid; grid-template-columns: 1fr 1fr; gap:2rem; align-items:center; }
.hero-image { border-radius:12px; overflow:hidden; border:1px solid var(--border); background:#fff; }
.cta-button {
  display:inline-block; margin-top:1rem; padding:.7rem 1.1rem; border-radius:10px;
  background:var(--primary); color:#fff; border:1px solid transparent;
}
.cta-button:hover { background:var(--primary-hover); }
@media (max-width: 860px){
  .hero-content { grid-template-columns: 1fr; }
}

/* ===========================
   Cards, Grids, Tags
   =========================== */
.loading { display:grid; place-items:center; padding:2rem 0; }
.spinner {
  width:28px; height:28px; border:3px solid #e2e8f0; border-top-color: var(--primary);
  border-radius:50%; animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.projects-grid, .blog-grid {
  display:grid; gap:1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1024px){ .projects-grid, .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .projects-grid, .blog-grid { grid-template-columns: 1fr; } }

.project-card, .blog-card {
  overflow:hidden; border-radius:12px; border:1px solid var(--border); background:var(--card);
  box-shadow:0 6px 18px rgba(2,6,23,0.04);
}
.project-content, .blog-content { padding:1rem; }
.project-tech { display:flex; flex-wrap:wrap; gap:.4rem; margin:.5rem 0; }
.tech-tag { border:1px solid var(--border); background:#fff; color:var(--text); padding:.25rem .5rem; border-radius:.5rem; font-size:.85rem; }

.project-links { display:flex; gap:.5rem; flex-wrap:wrap; }
.project-link { display:inline-flex; align-items:center; justify-content:center; padding:.5rem .7rem; border-radius:.5rem; }
.project-link.primary { background:var(--primary); color:#fff; }
.project-link.primary:hover { background:var(--primary-hover); }
.project-link.secondary { border:1px solid var(--border); background:#fff; }

/* Project image: maintain ratio + crop fill */
.project-image {
  width:100%;
  aspect-ratio: 16/9;
  overflow:hidden;
  background:#f1f5f9;
}
.project-image img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition: transform .3s ease;
}
.project-card:hover .project-image img { transform: scale(1.02); }

/* Blog */
.blog-date { color:var(--muted); font-size:.9rem; margin-bottom:.35rem; }
.blog-link { color:var(--primary); }
.blog-link:hover { text-decoration: underline; }

/* ===========================
   Skills (radial)
   =========================== */
#skills { background:var(--bg); }
.skills-radials { display:grid; gap:1rem; grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:1024px){ .skills-radials{ grid-template-columns:repeat(3,1fr) } }
@media (max-width:768px){ .skills-radials{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:460px){ .skills-radials{ grid-template-columns:1fr } }

.skill-radial {
  background:var(--card); border:1px solid var(--border); border-radius:12px; padding:1rem;
  box-shadow:0 6px 18px rgba(2,6,23,0.04); text-align:center; display:flex; flex-direction:column; align-items:center; gap:.65rem;
}
.radial {
  --p:0; --size:120px;
  position:relative; width:var(--size); height:var(--size); border-radius:50%;
  background: conic-gradient(var(--primary) calc(var(--p)*1%), #e5e7eb 0);
  transition: background 1.1s ease;
}
.radial::before {
  content:""; position:absolute; inset:8px; background:#fff; border-radius:50%;
  box-shadow: inset 0 2px 6px rgba(2,6,23,.04);
}
.radial-inset { position:absolute; inset:0; display:grid; place-items:center; z-index:1; }
.radial-value { font-weight:700; font-size:1.1rem; }
.skill-caption { font-weight:600; }
.skill-note { color:var(--muted); font-size:.85rem; }

/* ===========================
   Contact Section
   =========================== */
#contact { background:var(--bg); }
.contact-form-wrap {
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:1.25rem 1.25rem 1.5rem; box-shadow:0 6px 18px rgba(2,6,23,0.04); max-width:860px; margin:0 auto; width:100%;
}
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr } }
.form-row { display:grid; gap:.4rem; }
.form-row--mt { margin-top:.8rem; }
.req { color:#ef4444; }
.form-row label { font-size:.95rem; color:#334155; }
.form-row input, .form-row textarea {
  border:1px solid var(--border); border-radius:10px; padding:.65rem .75rem; font:inherit; width:100%; background:#fff;
}
.form-row textarea { resize:vertical; min-height:120px; }
.form-actions { margin-top:.6rem; display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.inline { display:flex; align-items:center; gap:.45rem; }
.hint { color:var(--muted); font-size:.9rem; }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.65rem 1rem; border-radius:10px; border:1px solid var(--border);
  text-decoration:none; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:focus { outline:2px solid #000; outline-offset:2px; }
.btn-primary { border-color:transparent; background:var(--primary); color:#fff; }
.btn-primary:hover { background:var(--primary-hover); }
.btn-ghost { background:#fff; color:var(--text); }
.btn-ghost:hover { background:#f8fafc; border-color:#dbe3ee; }
.stack { display:flex; gap:.6rem; flex-wrap:wrap; }

/* ===========================
   Footer
   =========================== */
#site-footer { background:#fff; border-top:1px solid var(--border); }
.footer-content { display:flex; align-items:center; justify-content:space-between; padding:1rem 0; gap:1rem; }
.social-links { display:flex; gap:.6rem; }

/* ===========================
   Modals (Blog & CV)
   =========================== */
.modal { position:fixed; inset:0; display:none; z-index:1000; }
.modal.active { display:block; }
.modal-backdrop { position:absolute; inset:0; background:rgba(15,23,42,.55); opacity:0; transition: opacity .2s ease; }
.modal.active .modal-backdrop { opacity:1; }
.modal-dialog {
  position:relative; margin:4rem auto; max-width:820px; width:calc(100% - 2rem);
  background:#fff; border-radius:12px; box-shadow:0 10px 40px rgba(2,6,23,.25);
  transform:translateY(20px); opacity:0; transition: transform .25s ease, opacity .25s ease;
  outline:none; display:flex; max-height:90vh;
}
.modal.active .modal-dialog { transform:translateY(0); opacity:1; }
.modal-close {
  position:absolute; top:.6rem; right:.6rem; width:38px; height:38px; border-radius:999px;
  border:none; background:transparent; font-size:1.5rem; line-height:1; cursor:pointer;
}
.modal-close:hover{ background:rgba(2,6,23,.06); }
.modal-body { display:flex; flex-direction:column; padding:1.25rem 1.25rem 1.75rem; min-height:0; overscroll-behavior:contain; }
.modal-title { margin:0 2.2rem .35rem 0; font-size:1.35rem; }
.modal-meta { color:var(--muted); font-size:.9rem; margin-bottom:.75rem; }
.modal-content {
  line-height:1.65; overflow-y:auto; -webkit-overflow-scrolling:touch;
  max-height:calc(90vh - 7rem); padding-right:.25rem;
}
.modal-content p { margin:.6rem 0; }
.modal-content::-webkit-scrollbar { width:8px; }
.modal-content::-webkit-scrollbar-thumb { background:rgba(2,6,23,.2); border-radius:6px; }
.modal-content::-webkit-scrollbar-track { background:transparent; }
/* Mobile sheet behavior for blog modal */
@media (max-width:640px){
  #post-modal .modal-dialog{
    margin:0; width:100%; max-width:none; height:100vh; max-height:none; border-radius:0; transform:translateY(100%);
  }
  #post-modal.active .modal-dialog{ transform:translateY(0) }
  #post-modal .modal-body{ padding:1rem 1rem 1.25rem }
  #post-modal .modal-title{ font-size:1.2rem }
  #post-modal .modal-content{ max-height:unset; flex:1 1 auto }
  #post-modal .modal-close{ top:.4rem; right:.4rem }
}

/* Contact modal bits */
.contact-row {
  display:flex; align-items:center; gap:.5rem; padding:.75rem;
  border:1px solid var(--border); border-radius:10px; background:var(--card);
}
.contact-row code { background:#f8fafc; padding:.2rem .35rem; border-radius:6px; }
.copy-btn { border:1px solid var(--border); background:#fff; border-radius:8px; padding:.35rem .6rem; cursor:pointer; }
.copy-btn:hover { background:#f3f4f6; }
.muted { color:var(--muted); font-size:.9rem; }
.spacer { height:.75rem; }

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .modal-dialog,.modal-backdrop{ transition:none }
  html:focus-within{ scroll-behavior:auto }
}