/* Custom styles for ICAM Lab Public Academic SPA */

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

section {
  scroll-margin-top: 4.5rem;
}

/* Pages: keep the footer at the bottom of short pages and fade each page in. */
main > section {
  min-height: 70vh;
  animation: page-in 0.25s ease-out;
}

@keyframes page-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  main > section { animation: none; }
}

h1, h2, h3, h4, .font-heading {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: -0.02em;
}

/* Navigation active tab state */
.nav-tab.active,
.nav-sub.active {
  color: #0f172a;
  background-color: #f1f5f9;
  border-bottom: 2px solid #1e40af;
  font-weight: 600;
}

html.dark .nav-tab.active,
html.dark .nav-sub.active {
  color: #ffffff;
  background-color: #1e293b;
  border-bottom: 2px solid #60a5fa;
  font-weight: 600;
}

/* Academic card subtle hover states */
.pub-card, .team-card, .grant-card, .research-card {
  transition: border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.pub-card:hover, .team-card:hover, .grant-card:hover, .research-card:hover {
  border-color: #94a3b8;
}

html.dark .pub-card:hover, 
html.dark .team-card:hover, 
html.dark .grant-card:hover, 
html.dark .research-card:hover {
  border-color: #475569;
}

/* Custom Scrollbar - Light */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f8fafc;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Custom Scrollbar - Dark */
html.dark ::-webkit-scrollbar-track {
  background: #0f172a;
}

html.dark ::-webkit-scrollbar-thumb {
  background: #334155;
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* Section permalinks: a "#" that appears next to a heading on hover or keyboard focus. */
.anchor-link {
  margin-left: 0.5rem;
  color: #94a3b8;
  text-decoration: none;
  font-weight: 400;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
[data-anchor]:hover > .anchor-link,
.anchor-link:focus { opacity: 1; }
.anchor-link:hover { color: #1e40af; }
.dark .anchor-link:hover { color: #60a5fa; }
@media (hover: none) { .anchor-link { opacity: 0.6; } }

/* Selected filter pills keep their own colours on hover (the unselected pills' hover text colour
   would otherwise land on the dark/light selected background with no contrast). */
.pub-filter-btn.active,
.pub-filter-btn.active:hover,
.team-filter-btn.active,
.team-filter-btn.active:hover {
  background-color: #0f172a !important;
  color: #ffffff !important;
}
html.dark .pub-filter-btn.active,
html.dark .pub-filter-btn.active:hover,
html.dark .team-filter-btn.active,
html.dark .team-filter-btn.active:hover {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

/* Blog post body (sanitized Blogger HTML rendered natively) */
.blog-post { font-size: 1rem; line-height: 1.75; overflow-wrap: anywhere; }
.blog-post p, .blog-post ul, .blog-post ol, .blog-post blockquote, .blog-post pre, .blog-post table, .blog-post figure { margin: 0 0 1rem; }
.blog-post h1, .blog-post h2, .blog-post h3, .blog-post h4 { font-weight: 700; margin: 1.75rem 0 0.75rem; line-height: 1.3; }
.blog-post h3 { font-size: 1.25rem; }
.blog-post h4 { font-size: 1.1rem; }
.blog-post ul { list-style: disc; padding-left: 1.5rem; }
.blog-post ol { list-style: decimal; padding-left: 1.5rem; }
.blog-post li { margin: 0.25rem 0; }
.blog-post a { color: #1e40af; text-decoration: underline; }
.blog-post img { max-width: 100%; height: auto; border-radius: 0.375rem; margin: 0.5rem 0; }
.blog-post iframe { display: block; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 0.375rem; margin: 1rem 0; }
.blog-post blockquote { border-left: 3px solid #cbd5e1; padding-left: 1rem; color: #475569; }
.blog-post pre, .blog-post code, .blog-post tt { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.875em; }
.blog-post pre { background: #f1f5f9; padding: 0.75rem 1rem; border-radius: 0.375rem; overflow-x: auto; }
.blog-post table { border-collapse: collapse; display: block; overflow-x: auto; }
.blog-post td, .blog-post th { border: 1px solid #cbd5e1; padding: 0.4rem 0.6rem; }
html.dark .blog-post a { color: #60a5fa; }
html.dark .blog-post blockquote { border-left-color: #475569; color: #94a3b8; }
html.dark .blog-post pre { background: #1e293b; }
html.dark .blog-post td, html.dark .blog-post th { border-color: #475569; }

/* Social wall: Pinterest-style masonry using CSS columns. */
.wall { column-count: 1; column-gap: 1rem; }
@media (min-width: 640px) { .wall { column-count: 2; } }
@media (min-width: 1024px) { .wall { column-count: 3; } }
.wall-card { break-inside: avoid; margin-bottom: 1rem; display: block; overflow: hidden; }
.wall-media { position: relative; display: block; width: 100%; background: #0f172a; }
.wall-media img { display: block; width: 100%; height: auto; }
.wall-media iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.wall-media.is-short iframe { aspect-ratio: 9 / 16; max-height: 70vh; }
.wall-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, 0.25); color: #fff; font-size: 2.5rem; border: 0; cursor: pointer; width: 100%;
}
.wall-play:hover { background: rgba(15, 23, 42, 0.45); }

/* Active page inside a dropdown: an accent bar on the left instead of the tab underline. */
.nav-sub.active { border-bottom: 0; box-shadow: inset 3px 0 0 #1e40af; }
html.dark .nav-sub.active { box-shadow: inset 3px 0 0 #60a5fa; }