/* ===== Theme (change these to rebrand fast) ===== */
:root{
    --bg: #0b0e14;
    --panel: #111522;
    --text: #e6e6e6;
    --muted: #a3a3a3;
    --accent: #5dd3ff;   /* <- change to your color */
    --accent-ink: #03131a;
  
    --maxw: 1100px;
    --radius: 16px;
    --gap: 1.25rem;
  }
  
  /* ===== Base ===== */
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body{
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  }
  
  img{ max-width:100%; display:block; }
  .container{ width: min(100% - 2rem, var(--maxw)); margin-inline:auto; }
  .narrow{ width: min(100% - 2rem, 780px); margin-inline:auto; }
  
  h1,h2,h3{ line-height:1.2; margin: 0 0 .5rem; }
  h1{ font-size: clamp(2rem, 1rem + 4vw, 3rem); }
  h2{ font-size: clamp(1.5rem, 1rem + 2vw, 2rem); }
  h3{ font-size: 1.125rem; font-weight: 600; }
  .lead{ color: var(--muted); margin: .5rem 0 1.25rem; }
  .small{ font-size: .9rem; }
  .muted{ color: var(--muted); }
  .accent{ color: var(--accent); }

  /* keep the name on one line inside the hero heading */
.hero__text h1 .accent { white-space: nowrap; }

  
  .section{ padding: 64px 0; }
  .section--alt{ background: var(--panel); }
  .section__title{ margin-bottom: .75rem; }
  
  /* ===== Skip link (a11y) ===== */
  .skip-link{
    position:absolute; left:-9999px; top:auto;
    background:#fff; color:#000; padding:.5rem .75rem; border-radius:8px;
  }
  .skip-link:focus{ left:1rem; top:1rem; z-index:999; }
  
  /* ===== Header / Nav ===== */
  .site-header{
    position: sticky; top: 0; z-index: 50;
    backdrop-filter: blur(6px);
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    border-bottom: 1px solid #5dd3ff;
  }
  .nav{
    display:flex; align-items:center; gap: var(--gap);
    padding: .75rem 0;
  }
  .logo{
    font-weight:700; letter-spacing:.5px; text-decoration: none; color:var(--text);
  }
  .nav-links{
    margin-left:auto;
    display:flex; align-items:center; gap:.75rem;
    list-style:none; padding:0; margin:0;
  }
  .nav a{ color:var(--text); text-decoration:none; }
  .nav a:hover, .nav a:focus{ color:var(--accent); }
  .btn--nav{ padding:.5rem .9rem; }
  
  .mobile-toggle{
    display:none;
    margin-left:auto;
    font-size:1.25rem; background:transparent; border:1px solid rgba(255,255,255,.2);
    color:var(--text); padding:.25rem .5rem; border-radius:8px;
  }
  
  /* ===== Buttons ===== */
  .btn{
    background: var(--accent);
    color: var(--accent-ink);
    padding: .7rem 1rem;
    border-radius: 999px;
    text-decoration: none;
    border: none;
    display:inline-flex; align-items:center; gap:.5rem;
    font-weight:600;
  }
  .btn:hover{ filter: brightness(1.05); }
  .btn--secondary{ background: transparent; color: var(--text); outline: 1px solid rgba(255,255,255,.2); }
  .btn--ghost{ background: transparent; outline: 1px solid rgba(255,255,255,.2); color:var(--text); }
  .btn--small{ padding:.45rem .75rem; font-size:.95rem; }
  
  /* ===== Hero ===== */
  .hero__grid{
    display:grid; align-items:center; gap: clamp(1rem, 3vw, 3rem);
    grid-template-columns: 1.4fr 1fr;
    min-height: 68dvh;
  }
  .hero__image img{ border-radius: var(--radius); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
  .social{ list-style:none; padding:0; display:flex; gap:1rem; margin-top:1rem; }
  .social a{ color:var(--muted); }
  .social a:hover{ color:var(--accent); }
  
  /* ===== Cards (Projects) ===== */
  .cards{
    display:grid; gap: var(--gap);
    padding: 25px 0;
    grid-template-columns: repeat(3, 1fr);
  }
  .card{
    background: color-mix(in srgb, var(--panel) 75%, #ffffff00);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: var(--radius);
    overflow:hidden;
    display:flex; flex-direction:column;
  }
  .card__img{ aspect-ratio: 16/9; object-fit: cover; }
  .card__body{ padding: 1rem; display:flex; flex-direction:column; gap:.75rem; }
  .tags{ display:flex; gap:.5rem; list-style:none; padding:0; margin:0; color:var(--muted); font-size:.9rem; }
  .card__actions{ display:flex; gap:.5rem; }
  
  /* ===== Skills ===== */
  .skills{
    display:grid; gap: var(--gap);
    grid-template-columns: repeat(3, 1fr);
  }
  .list{ margin:0; padding-left: 1rem; }
  
  /* ===== Contact ===== */
  .contact-actions{
  display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-top:.75rem;
}

  
  /* ===== Footer ===== */
  .site-footer{ padding: 32px 0; color: var(--muted); border-top: 1px solid rgba(255,255,255,.06); }
  
  /* ===== Utilities ===== */
  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  
  /* ===== Responsive ===== */
  @media (max-width: 980px){
    .hero__grid{ grid-template-columns: 1fr; }
    .cards{ grid-template-columns: 1fr 1fr; }
    .skills{ grid-template-columns: 1fr 1fr; }
  }
  
  @media (max-width: 640px){
    .cards, .skills{ grid-template-columns: 1fr; }
    .mobile-toggle{ display:block; }
    .nav-links{
      position: absolute; right: 1rem; top: calc(100% + .5rem);
      background: var(--panel); padding: .75rem; border-radius: 12px;
      border: 1px solid rgba(255,255,255,.08);
      display:none; flex-direction:column; min-width: 180px;
    }
    .nav-links.show{ display:flex; }
  }
  


  /* ===== Project card refinements (hover + icons) ===== */
.card {
  position: relative;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  will-change: transform;
}
.card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent) 55%, rgba(255,255,255,.12));
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}
.card__img {
  aspect-ratio: 16/9;
  object-fit: cover;
  filter: saturate(1.05) contrast(1.05);
}
.card__title {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: .6rem;
  margin: 0;
}
.card__icon {
  width: 22px;
  height: 22px;
  color: var(--accent);
  opacity: .95;
}
.card__body p {
  margin: 0;
  color: var(--text);
}
.card__body .tags {
  margin-top: .25rem;
}
.card__actions .btn--small {
  transition: transform .15s ease;
}
.card__actions .btn--small:hover {
  transform: translateY(-1px);
}

p {
  text-align: justify;
  hyphens: auto;            /* better spacing by allowing hyphen breaks */
  -webkit-hyphens: auto;    /* Safari */
}


/* For the night mode toggle button
/* === Theme toggle button === */
.theme-toggle{
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 1px solid rgba(255,255,255,.2);
  color: var(--text);
  padding: .35rem .6rem;
  border-radius: 10px;
  cursor: pointer;
}
.theme-toggle:hover{ filter: brightness(1.05); }

/* === Light theme: override your CSS variables === */
body.theme-light{
  --bg: #f7fafc;
  --panel: #ffffff;
  --text: #171923;
  --muted: #4a5568;
  --accent: #2b6cb0;
  --accent-ink: #f5faff;
}

/* Optional polish in light mode */
body.theme-light .site-header{ border-bottom-color: #e2e8f0; background: #ffffffd9; }
body.theme-light .theme-toggle{ border-color: #cbd5e0; }

/* subtle cross-fade when switching themes */
html, body, .site-header, .cards .card, .section--alt {
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}



/* ===== Experience timeline ===== */
.xp{
  position: relative;
  display: grid;
  gap: 1rem;
  margin-top: .75rem;
}
.xp::before{
  content:"";
  position:absolute; left:12px; top:0; bottom:0;
  width:2px; background: rgba(255,255,255,.08);
}
body.theme-light .xp::before{ background:#e2e8f0; }

.xp-item{
  display:grid;
  grid-template-columns: 24px 1fr;
  gap: .9rem;
  align-items: start;
}

.xp-dot{
  width: 18px; height: 18px; border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
  margin-top: .5rem;
}

.xp-card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: 1rem;
}
body.theme-light .xp-card{ border-color: #e6edf6; background: #ffffff; }

.xp-header{
  display:flex; align-items:center; gap:.75rem; margin-bottom:.35rem;
}
.xp-logo{
  width:36px; height:36px; object-fit:contain; border-radius:8px;
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.08);
}
body.theme-light .xp-logo{ border-color: #e6edf6; background:#f8fafc; }

.xp-title{ margin:0; font-size:1.05rem; }
.xp-meta{ margin:.15rem 0 0; }

.xp-bullets{
  margin:.5rem 0 0; padding-left: 1.1rem;
}
.xp-bullets li{ margin:.25rem 0; }
.xp-bullets strong{ color: var(--accent); }

.xp-badges{
  display:flex; flex-wrap:wrap; gap:.4rem; margin:.6rem 0 0; padding:0; list-style:none;
}
.xp-badges li{
  font-size:.8rem; font-weight:600; letter-spacing:.2px;
  color: var(--accent-ink);
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 40%, #fff));
  padding:.2rem .45rem; border-radius:999px;
}

/* responsive */
@media (max-width: 640px){
  .xp::before{ left:10px; }
  .xp-item{ grid-template-columns: 20px 1fr; }
  .xp-logo{ width:32px; height:32px; }
}


.nav a.active { color: var(--accent); font-weight: 600; }


/* Copy email button polish */
.copy-email { min-width: 9.5rem; transition: transform .15s ease, border-color .15s ease; }
.copy-email:active { transform: translateY(1px); }
.copy-icon { margin-right: .35rem; }
.copy-status { margin-left: .5rem; min-height: 1em; }
.btn { cursor: pointer; }


/* success state */
.copy-email.is-copied {
  border-color: color-mix(in srgb, var(--accent) 60%, #fff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .copy-email { transition: none; }
}



/* Make LinkedIn look like the solid accent button inside Contact */
#contact .btn--secondary{
  background: var(--accent);
  color: var(--accent-ink);
  outline: none;
  border: none;
}
#contact .btn--secondary:hover{ filter: brightness(1.05); }