/* =====================================================================
   Kausar Moshood — site styles (2026 revamp)
   Flat, content-first, near-monochrome with a deep forest-green accent.
   Serif headings (Source Serif 4) + sans body (Inter). Supports legacy classes.
   (Previous stylesheet is recoverable via git history.)
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&display=swap');

:root {
  --ink:    #1a1a1a;   /* headings */
  --body:   #2c2c2c;   /* body text */
  --muted:  #6b6b6b;   /* secondary */
  --faint:  #8a8a8a;
  --accent: #225c3b;   /* deep forest green */
  --accent-hover: #184028;
  --rule:   #e7e7e4;
  --bg:     #ffffff;
  --max:    760px;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html[data-theme="dark"] {
  --ink:    #f2f2ee;
  --body:   #d6d6d1;
  --muted:  #9a9a92;
  --faint:  #6f6f67;
  --accent: #4fae7c;
  --accent-hover: #6fc99a;
  --rule:   #2c2c26;
  --bg:     #14140f;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { font-size:100%; line-height:1.65; scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  font-family:var(--sans); font-weight:400; color:var(--body); background:var(--bg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  transition:background-color 200ms ease, color 200ms ease;
}

a { color:var(--accent); text-decoration:none; transition:color 150ms ease; }
a:hover { color:var(--accent-hover); text-decoration:underline; }

h1,h2,h3,h4,h5,h6 { font-family:var(--serif); color:var(--ink); font-weight:600; line-height:1.25; }
p { margin:0 0 0.9rem; }
strong { font-weight:600; color:var(--ink); }
s { color:var(--faint); }

/* ---------- layout ---------- */
.container { max-width:var(--max); margin:0 auto; padding:0 1.4rem; }
.page, .page-content { width:100%; }
.page { padding-top:0.5rem; }

/* ---------- header / nav ---------- */
.site-header { border-bottom:1px solid var(--rule); margin-bottom:2.2rem; }
.nav .container { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:0.6rem; padding-top:1.1rem; padding-bottom:1.1rem; }
.logo { font-size:1.15rem; }
.logo a { font-family:var(--serif); font-weight:700; color:var(--ink); }
.logo a:hover { color:var(--accent); text-decoration:none; }
.navbar { list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem; margin:0; }
.navbar a { color:var(--muted); font-size:0.95rem; }
.navbar a:hover, .navbar a.active { color:var(--accent); text-decoration:none; }

.theme-toggle {
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; padding:0; border:1px solid var(--rule); border-radius:7px;
  background:none; color:var(--muted); cursor:pointer; transition:all 150ms ease;
}
.theme-toggle:hover { color:var(--accent); border-color:var(--accent); }
.theme-toggle svg { width:16px; height:16px; }

/* ---------- intro / hero ---------- */
.page-intro { display:flex; gap:2rem; align-items:center; margin-bottom:1.6rem; }
.page-intro-item:first-child { flex:1; }
.roundImg { border-radius:8px; width:170px; height:200px; object-fit:cover; object-position:top; display:block; }
.contact-header strong { font-family:var(--serif); font-size:1.7rem; font-weight:700; color:var(--ink); display:block; margin-bottom:0.35rem; }
.academic-affiliation { font-weight:600; color:var(--ink); }
.department, .advisor-info { color:var(--muted); font-size:0.95rem; line-height:1.5; }
.contact-details { margin-top:0.5rem; color:var(--muted); font-size:0.95rem; }
.social { margin-top:0.7rem; }
.social-item { font-size:1.25rem; color:var(--muted); margin-right:0.85rem; }
.social-item:hover { color:var(--accent); }

/* ---------- section headings ---------- */
.header-name {
  font-family:var(--serif); font-size:1.3rem; font-weight:600; color:var(--ink);
  margin:2.6rem 0 1.1rem; padding-bottom:0.35rem; border-bottom:1px solid var(--rule);
}

/* lead / bio text a touch larger */
.bio { font-size:1.05rem; color:var(--body); }
.bio p { margin-bottom:0.8rem; }
.research-threads { color:var(--muted); font-size:0.93rem; margin-top:-0.3rem; }

/* ---------- featured callout ---------- */
.featured-callout {
  display:flex; gap:1rem; align-items:flex-start; margin:1.6rem 0 0;
  padding:1rem 1.1rem; border:1px solid var(--rule); border-left:3px solid var(--accent); border-radius:8px;
  background:var(--bg);
}
.featured-callout .badge {
  flex-shrink:0; font-size:0.7rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase;
  color:#fff; background:var(--accent); padding:0.25rem 0.55rem; border-radius:5px; margin-top:0.15rem;
}
.featured-callout .featured-title { font-family:var(--serif); font-weight:600; color:var(--ink); font-size:1.05rem; margin-bottom:0.25rem; }
.featured-callout p { margin-bottom:0.4rem; color:var(--body); font-size:0.95rem; }
.featured-callout .pub-links { margin-top:0.3rem; }

/* ---------- publications ---------- */
.publication-category { margin-bottom:1.4rem; }
.category-title, .pub-year { font-family:var(--serif); font-size:1.05rem; color:var(--ink); font-weight:600;
  margin:1.6rem 0 0.6rem; }
.pub-layer { display:inline-block; font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin-bottom:0.15rem; }
.stack-intro { color:var(--body); margin-bottom:1.1rem; }
.publications-intro { color:var(--muted); margin-bottom:1rem; }
.publications-note { color:var(--faint); font-size:0.88rem; margin-bottom:1.4rem; }

.publication-item { padding:0.75rem 0 0.75rem 1rem; border-left:2px solid var(--rule); margin-bottom:0.5rem; }
.publication-item:hover { border-left-color:var(--accent); }
.pub-title { font-family:var(--serif); font-weight:600; font-size:1.06rem; color:var(--ink); line-height:1.35; }
.pub-title a { color:var(--ink); }
.pub-title a:hover { color:var(--accent); }
.pub-authors { font-size:0.92rem; color:var(--muted); margin-top:0.15rem; }
.author-highlight { color:var(--ink); font-weight:600; }
.pub-venue { font-size:0.88rem; color:var(--faint); font-style:italic; margin-top:0.1rem; }
.pub-description { font-size:0.95rem; color:var(--body); margin-top:0.35rem; }
.pub-links { margin-top:0.35rem; }
.pub-links a, .pub-link { font-size:0.83rem; margin-right:0.8rem; font-weight:500; }
.award-badge { color:var(--accent); font-weight:600; font-size:0.85rem; }
.read-more-btn { display:none; }                 /* toggles retired; descriptions show inline */

.read-more-button { margin:1.1rem 0 0.5rem; }
.read-more-button a { font-size:0.9rem; font-weight:500; }
.read-more-button a::after { content:" \2192"; }

/* ---------- news / lists ---------- */
.list { list-style:none; margin:0.3rem 0 0; }
.list li { padding:0.55rem 0; border-bottom:1px solid var(--rule); font-size:0.95rem; line-height:1.6; }
.list li:last-child { border-bottom:0; }
.list li strong { color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }

/* ---------- generic content blocks (community, BSc, etc.) ---------- */
.container p { line-height:1.7; }
.container > p, .page-content > p { color:var(--body); }

/* ---------- external links / misc ---------- */
.external-links, .external-link-list { list-style:none; margin:0; }
.external-link, .block { display:inline-block; margin-right:0.8rem; }

/* ---------- blog ---------- */
.blog-container { max-width:var(--max); margin:0 auto; padding:0 1.4rem; }
/* ---------- gallery ---------- */
.gallery-container { max-width:1000px; }
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1.1rem; margin-top:1.4rem; }
.gallery-item { position:relative; border-radius:10px; overflow:hidden; aspect-ratio:4/3; background:var(--rule); box-shadow:0 1px 3px rgba(0,0,0,0.08); cursor:pointer; }
.gallery-item img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 400ms ease; }
.gallery-item:hover img { transform:scale(1.06); }
.gallery-caption {
  position:absolute; left:0; right:0; bottom:0; padding:1.6rem 0.9rem 0.7rem;
  font-size:0.85rem; color:#fff; font-weight:500;
  background:linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0));
  opacity:0; transform:translateY(6px); transition:opacity 250ms ease, transform 250ms ease;
}
.gallery-item:hover .gallery-caption { opacity:1; transform:translateY(0); }

/* lightbox */
.lightbox { position:fixed; inset:0; background:rgba(20,20,20,0.92); display:none; align-items:center; justify-content:center; flex-direction:column; gap:0.9rem; padding:2rem; z-index:100; }
.lightbox.open { display:flex; }
.lightbox img { max-width:min(90vw, 900px); max-height:78vh; border-radius:6px; box-shadow:0 12px 40px rgba(0,0,0,0.4); }
.lightbox-caption { color:#f2f2f2; font-size:0.92rem; text-align:center; }
.lightbox-close { position:absolute; top:1.2rem; right:1.6rem; color:#fff; font-size:1.8rem; line-height:1; cursor:pointer; background:none; border:none; opacity:0.85; }
.lightbox-close:hover { opacity:1; }

@media (max-width:620px) {
  .gallery-grid { grid-template-columns:repeat(2, 1fr); gap:0.7rem; }
  .gallery-caption { font-size:0.75rem; padding:1.2rem 0.6rem 0.5rem; }
}

/* ---------- back to top ---------- */
.back-to-top {
  position:fixed; bottom:1.6rem; right:1.6rem; width:38px; height:38px; border-radius:50%;
  display:none; align-items:center; justify-content:center; background:var(--accent); color:#fff;
  border:none; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,0.18); opacity:0.9; transition:opacity 150ms ease;
  z-index:50;
}
.back-to-top.visible { display:flex; }
.back-to-top:hover { opacity:1; }
.back-to-top svg { width:16px; height:16px; }

/* ---------- footer ---------- */
.site-footer { border-top:1px solid var(--rule); margin-top:3.5rem; padding:1.6rem 0; color:var(--muted); font-size:0.85rem; }
.site-footer .container { display:flex; justify-content:space-between; flex-wrap:wrap; gap:0.6rem; }
.site-footer a { color:var(--muted); }
.site-footer a:hover { color:var(--accent); }

/* ---------- collapsible <details> ---------- */
summary { cursor:pointer; }
summary::-webkit-details-marker { display:none; }
summary::marker { content:""; }

.pub-more { margin-top:0.3rem; }
.pub-more > summary { display:inline-flex; align-items:center; gap:0.35rem; color:var(--accent); font-size:0.85rem; font-weight:500; width:fit-content; }
.pub-more > summary::before { content:"\25B8"; font-size:0.7rem; transition:transform 150ms ease; }
.pub-more[open] > summary::before { transform:rotate(90deg); }
.pub-more[open] > summary { color:var(--muted); }
.pub-more .pub-description { margin-top:0.4rem; }

details.collapse { margin:2.6rem 0 0; }
details.collapse > summary { list-style:none; padding-bottom:0.35rem; border-bottom:1px solid var(--rule); }
details.collapse > summary .sec { font-family:var(--serif); font-size:1.3rem; font-weight:600; color:var(--ink); }
details.collapse > summary .quirk { color:var(--faint); font-size:0.9rem; font-style:italic; margin-left:0.5rem; }
details.collapse > summary .sec::after { content:"  \25B8"; color:var(--accent); font-size:0.8rem; }
details.collapse[open] > summary .sec::after { content:"  \25BE"; }
details.collapse[open] > summary { margin-bottom:1.1rem; }

.bsc-photo { float:right; width:260px; max-width:42%; margin:0.3rem 0 0.9rem 1.5rem; }
.bsc-photo img { width:100%; border-radius:8px; display:block; }
.bsc-photo figcaption { color:var(--faint); font-size:0.82rem; margin-top:0.35rem; }

/* ---------- buttons ---------- */
.btn-row { display:flex; flex-wrap:wrap; gap:0.6rem; margin:1.2rem 0 0.2rem; }
.btn { display:inline-flex; align-items:center; gap:0.4rem; font-size:0.9rem; font-weight:500;
  padding:0.5rem 0.95rem; border-radius:7px; border:1px solid var(--accent); transition:all 150ms ease; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-hover); color:#fff; text-decoration:none; }
.btn-outline { background:transparent; color:var(--accent); }
.btn-outline:hover { background:var(--accent); color:#fff; text-decoration:none; }

/* ---------- social as labeled chips ---------- */
.social { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.9rem; }
.social-item { display:inline-flex; align-items:center; gap:0.4rem; font-size:0.85rem; color:var(--muted);
  border:1px solid var(--rule); border-radius:7px; padding:0.32rem 0.62rem; margin:0; }
.social-item:hover { color:var(--accent); border-color:var(--accent); }
.social-item i { font-size:0.95rem; }

/* ---------- news list: marker + small-caps date ---------- */
.list li { position:relative; padding-left:1.15rem; }
.list li::before { content:"\25B8"; position:absolute; left:0; top:0.72rem; color:var(--accent); font-size:0.7rem; }
.list li strong { font-variant:small-caps; letter-spacing:0.02em; }

/* ---------- section heading: short green underline ---------- */
.header-name { border-bottom:none; padding-bottom:0; }
.header-name::after { content:""; display:block; width:2.4rem; height:2px; background:var(--accent);
  margin-top:0.4rem; border-radius:1px; }

/* ---------- responsive ---------- */
@media (max-width:620px) {
  .page-intro { flex-direction:column-reverse; text-align:left; gap:1.2rem; align-items:flex-start; }
  .roundImg { width:130px; height:150px; }
  .nav .container { justify-content:flex-start; }
  .navbar { gap:0.9rem; }
  .contact-header strong { font-size:1.45rem; }
  .bsc-photo { float:none; width:100%; max-width:100%; margin:1rem 0; }
}