/* =========================================================
   Krishna Kumar — Portfolio
   Beautiful, clean, and robust styles for the provided HTML.
   Note: You can remove the <link rel="stylesheet" href="override.css">
   from your HTML to avoid conflicts, this file is complete.
   ========================================================= */
/* ---------- Theme tokens ---------- */
:root {
  --bg: #0b1220;         /* Deep night */
  --panel: #0f172a;      /* Card/Panel base */
  --text: #e5e7eb;       /* Primary text */
  --muted: #94a3b8;      /* Secondary text */

  --card: #0f172a;       /* Card background */
  --border: rgba(255,255,255,0.08);
  --shadow: 0 16px 48px rgba(2, 6, 23, 0.45);

  --brand: #7c3aed;      /* Purple */
  --brand-2: #22d3ee;    /* Cyan */
  --accent1: #7c3aed;
  --accent2: #06b6d4;
}

/* Light theme (optional) */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f8fb;
    --panel: #ffffff;
    --text: #0b1220;
    --muted: #475569;

    --card: #ffffff;
    --border: rgba(0,0,0,0.10);
    --shadow: 0 10px 28px rgba(0,0,0,0.10);
  }
}

/* ---------- Base / Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { height: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100%;
  color: var(--text);
  font: 16px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";

  /* Solid + soft glow gradients with subtle anti-banding noise */
  background-color: var(--bg);
  background-image:
    /* subtle noise to break banding */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='1' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/></svg>"),
    radial-gradient(1000px 600px at 8% -10%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(1000px 560px at 100% 8%, rgba(34,211,238,.18), transparent 60%),
    linear-gradient(180deg, #0b1220 0%, #0a1020 100%);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-attachment: scroll, scroll, scroll, scroll; /* avoid fixed-layer artifacts */
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 2px; }
h1, h2, h3, h4 { margin: 0; }

.container { width: min(1100px, calc(100% - 2rem)); margin-inline: auto; }
section { padding: 3rem 0; }

/* ---------- Headings ---------- */
h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.25rem);
  font-weight: 800;
  letter-spacing: 0.2px;
  margin-bottom: 1.1rem;
  text-align: left;
}

/* Underline these specific headings (Objective, Education, Technical Strengths) */
#objective h2,
#education h2,
#technical-strengths h2 {
  /* gradient underline without pseudo-elements: works reliably */
  display: inline-block;                /* shrink underline to the text width */
  padding-bottom: 8px;                  /* space for the underline */
  background-image: linear-gradient(90deg, var(--brand), var(--brand-2));
  background-size: 100% 4px;            /* thickness of underline */
  background-repeat: no-repeat;
  background-position: 0 100%;
}

/* If you also want Projects/Certifications/Interests/Contact underlined,
   add their IDs to the selector above. */

/* A tidy subheading style used in Objective/Interests */
.lead {
  font-size: 1.05rem;
  color: #cbd5e1;
  max-width: 70ch;
}

/* ---------- Header / Navigation ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(130%) blur(8px);
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  border-bottom: none;                  /* no harsh separator line */
}

.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px;
  padding: 0 .5rem;
}

.brand {
  font-weight: 800;
  letter-spacing: .2px;
  text-decoration: none;
}

.nav-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: .8rem;
}
.nav-list a {
  text-decoration: none;
  opacity: .9;
  padding: .45rem .6rem;
  border-radius: 10px;
  transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
}
.nav-list a:hover { opacity: 1; transform: translateY(-1px); background-color: rgba(255,255,255,0.03); }
.nav-list a.cta { border: 1px solid var(--border); background: rgba(255,255,255,0.03); }

/* ---------- Hero ---------- */
.hero { padding: 2.5rem 0 1.25rem; text-align: center; }
.hero .container { text-align: center; }

.gradient-text {
  font-size: clamp(2rem, 4.5vw + 1rem, 3.4rem);
  line-height: 1.1;
  margin: 0;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sub { color: var(--muted); margin-top: .5rem; }

.avatar-wrap { display: flex; justify-content: center; margin-bottom: .5rem; }
.avatar {
  width: 200px; height: 200px;
  border-radius: 50%;
  object-fit: cover;
  background: #0b1220;
  border: 2px solid var(--border);
  box-shadow: var(--shadow);
}
@media (max-width: 640px) { .avatar { width: 160px; height: 160px; } }

/* ---------- Cards / Lists ---------- */
.cards {
  list-style: none;
  padding: 0; margin: 0;
  display: grid; gap: 1rem;
}
.two-col { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.1rem 1.1rem 1.2rem;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(2, 6, 23, 0.55);
  border-color: rgba(34,211,238,.35);
}
.card h3 { margin: 0 0 .35rem; }
.muted { color: var(--muted); margin: .25rem 0 .5rem; }
.meta { display: flex; gap: .8rem; flex-wrap: wrap; color: var(--muted); font-size: .95rem; }

/* ---------- Technical Strengths ---------- */
.stack { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.stack-group h4 { margin: 0 0 .5rem; color: #dbeafe; font-weight: 700; }
.chips {
  display: flex; flex-wrap: wrap; gap: .5rem;
  list-style: none; margin: 0; padding: 0;
}
.chips li {
  background: #0b1220;
  border: 1px solid var(--border);
  color: #dbeafe;
  padding: .42rem .62rem;
  border-radius: 999px;
  font-size: .92rem;
}

/* ---------- Projects ---------- */
#projects .project-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

#projects .project-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#projects .project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(0,0,0,0.45);
  border-color: rgba(6, 182, 212, 0.35);
}

/* Thumbnail with inset padding */
#projects .project-thumb {
  position: relative;
  padding: 1rem;
  background: transparent;
}
#projects .project-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border-radius: 12px;
  object-fit: cover;
  background: #0b1220;
}

/* Date badge on the thumbnail */
#projects .project-badge {
  position: absolute;
  right: 1.1rem;
  top: 1.1rem;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  color: #fff;
  font-weight: 800;
  font-size: .75rem;
  line-height: 1;
  padding: .45rem .55rem;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.30);
  white-space: nowrap;
}

/* Body */
#projects .project-body { padding: .75rem 1rem 1.2rem; }
#projects .project-title {
  font-weight: 800;
  line-height: 1.35;
  text-align: left;
  margin-bottom: .7rem;
}
#projects .project-actions {
  display: flex; gap: .75rem;
  justify-content: flex-start;
  flex-wrap: wrap;
}
#projects .btn-outline {
  --btn-border: var(--border);
  --btn-fg: var(--text);
  padding: .55rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--btn-border);
  color: var(--btn-fg);
  background: transparent;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .2px;
  transition: background .2s ease, border-color .2s ease, transform .15s ease, color .2s ease;
  display: inline-flex; align-items: center; justify-content: center;
}
#projects .btn-outline:hover {
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  border-color: transparent; color: #fff;
  transform: translateY(-1px);
}

/* ---------- Certifications / Contact ---------- */
.list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.list li { border-left: 3px solid var(--brand); padding-left: .75rem; color: #cbd5e1; }

.contact-grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.contact-link { color: var(--text); text-decoration: none; }
.contact-link:hover { text-decoration: underline; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: none;
  padding: 1.5rem 0 2rem;
  color: var(--muted);
  text-align: center;
  background: color-mix(in srgb, var(--panel) 82%, transparent);
}

/* ---------- Reveal / Animations ---------- */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .nav-list { gap: .5rem; }
  .nav-list a { padding: .4rem .5rem; }
  .hero { padding-top: 2rem; }
  #projects .project-body { padding: .75rem .875rem 1rem; }
  #projects .project-title { font-size: 1rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { transition: none; transform: none; opacity: 1; }
  .btn, .card, .nav-list a, #projects .btn-outline { transition: none; }
}
#projects h2,
#certifications h2,
#interests h2,
#contact h2 {
  display: inline-block;
  padding-bottom: 10px;
  background-image: linear-gradient(90deg, var(--brand), var(--brand-2));
  background-size: 100% 4px;   /* underline thickness */
  background-repeat: no-repeat;
  background-position: 0 100%;
}