/* ----------------------------------------------
   Theme: edit these variables to match your style
   You can swap colors/fonts to your preferences.
------------------------------------------------ */
:root {
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --bg: #0b1220;           /* page background */
  --surface: #101827;      /* cards / header */
  --text: #e5e7eb;         /* primary text */
  --muted: #9ca3af;        /* secondary text */
  --primary: #0ea5e9;      /* accent color */
  --primary-600: #0284c7;  /* hover */
  --ring: #22d3ee;         /* focus ring */
  --card-shadow: 0 10px 25px rgba(0,0,0,.25);
}

/* Optional: auto-dark via prefers + manual override */
@media (prefers-color-scheme: light) {
  :root { --bg:#f8fafc; --surface:#ffffff; --text:#0f172a; --muted:#64748b; --primary:#2563eb; --primary-600:#1d4ed8; --ring:#60a5fa; }
}

/* Light theme when [data-theme="light"] */
html[data-theme="light"] {
  --bg:#f8fafc; --surface:#ffffff; --text:#0f172a; --muted:#475569; --primary:#2563eb; --primary-600:#1d4ed8; --ring:#60a5fa;
}

/* Base reset */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:var(--font-sans); background:var(--bg); color:var(--text); line-height:1.6}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}

/* Accessibility */
:focus-visible{outline:3px solid var(--ring); outline-offset:2px}
.skip-link{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem; background:var(--primary); color:#fff; border-radius:.5rem}

/* Layout */
.container{max-width:1100px; margin-inline:auto; padding:0 1.2rem}
.section{padding:5rem 0}
.section--alt{background:linear-gradient(180deg, color-mix(in srgb, var(--surface) 60%, transparent), transparent)}
.narrow{max-width:800px}

/* Header/Nav */
.site-header{position:sticky; top:0; z-index:50; background:rgba(16,24,39,.75); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid rgba(255,255,255,.06)}
.header-inner{display:flex; align-items:center; justify-content:space-between; min-height:64px}
.logo {
  display: inline-flex;         /* inline so it sizes to content */
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  letter-spacing: .2px;
  font-size: 1.2rem;
}
.logo img {
  width: 35px;                  /* <-- force width */
  height: 35px;                 /* keep it square */
  object-fit: cover;
  display: block;
  border-radius: .35rem;
  transform: translateY(-4px);  
}
.nav__toggle{display:none; background:transparent; border:0; padding:.5rem; cursor:pointer}
.nav__bar{display:block; width:24px; height:2px; background:var(--text); margin:5px 0; border-radius:1px}
.nav__menu{display:flex; align-items:center; gap:1rem; list-style:none; margin:0; padding:0}
.nav__menu a{padding:.5rem .75rem; border-radius:.5rem}
.nav__menu a:hover{background:rgba(255,255,255,.06)}

@media (max-width: 820px){
  .nav__toggle{display:block}
  .nav__menu{position:absolute; right:1rem; top:64px; background:var(--surface); box-shadow:var(--card-shadow); border:1px solid rgba(255,255,255,.06); flex-direction:column; width:min(90vw, 360px); padding:.75rem; display:none}
  .nav__menu[aria-expanded="true"]{display:flex}
}

/* Hero */
.hero__grid {
  display: grid;
  grid-template-columns: auto 1fr; /* Make image only as wide as needed */
  gap: 5rem; /* No gap at all */
  max-width: 900px;
  align-items: center;
}
.hero__img{border-radius:1.25rem; box-shadow:var(--card-shadow); margin: 0; padding: 0;}
.hero__title {
  font-size: 2.8rem;
  margin-bottom: 0em; /* Reduce space below the title */
}
.hero__lead {
  font-size: 1.35rem;
  line-height: 1.6;
}
.hero__cta{display:flex; gap:1rem; margin-top:1rem}
.hero.section {
  padding-top: 2.5rem; /* Reduce top padding for hero */
}
.hero__copy {
  margin-top: -2.5rem; /* Move the hero text up */
}

@media (max-width: 900px){
  .hero__grid{grid-template-columns:1fr; text-align:center}
  .hero__img{justify-self:center; width:min(180px, 90%); aspect-ratio: 7 / 9; height: auto;}
  .hero__cta{justify-content:center}
}

/* Cards */
.card{background:var(--surface); border:1px solid rgba(255,255,255,.06); border-radius:1rem; padding:1.25rem; box-shadow:var(--card-shadow)}
.card:hover{transform:translateY(-2px)}

/* Skills */
.skills__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
@media (max-width: 1100px){.skills__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 640px){.skills__grid{grid-template-columns:1fr}}

/* Projects */
.project__media {
  aspect-ratio: 16 / 9;   /* consistent card shape */
  border-radius: .9rem;
  overflow: hidden;
  background: var(--surface);
  display: grid;
  place-items: center;     /* center the image inside */
  max-height: 220px; /* ✨ shrink it */
}

.project__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;     /* no cropping */
}

/* Remove/modify existing project img styles */
.project img {
  /* Remove this entire block or keep only what's needed for non-media wrapped images */
  border-radius: .9rem;
  background-color: var(--surface);
}

.project__content{margin-top:.75rem}
.project__actions{display:flex; gap:.75rem; flex-wrap:wrap; margin-top:.5rem}

/* Buttons */
.btn{display:inline-block; padding:.7rem 1rem; border-radius:.75rem; background:var(--primary); color:#fff; font-weight:600; border:1px solid transparent; transition:background .2s, transform .15s}
.btn:hover{background:var(--primary-600)}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent; color:var(--text); border-color:rgba(255,255,255,.16)}
.btn--ghost:hover{background:rgba(255,255,255,.06)}

/* About list */
.about__highlights{display:grid; gap:.4rem; margin:1rem 0 0 0; padding-left:1rem}

/* Contact */
.contact{display:grid; gap:.75rem}
.contact__item{display:flex; align-items:center; gap:.5rem; padding:.6rem .75rem; border-radius:.65rem; background:var(--surface); border:1px solid rgba(255,255,255,.06)}
.icon{width:22px; height:22px; flex:0 0 22px; fill:currentColor}

/* Footer */
.site-footer{padding:2.5rem 0; border-top:1px solid rgba(255,255,255,.06)}
.site-footer p{color:var(--muted); margin:0}

/* Animation: reveal on scroll */
.reveal{opacity:0; transform:translateY(14px); will-change:opacity, transform}
.reveal.is-visible{opacity:1; transform:none; transition:opacity .7s ease, transform .7s ease}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
  .card:hover{transform:none}
}