/*
 * SPDX-FileCopyrightText: 2026 Nerfies Website Authors
 * SPDX-FileCopyrightText: 2026 Ocean Emulator Authors
 *
 * SPDX-License-Identifier: CC-BY-4.0
 */

:root {
  --accent: #0b6fa4;
  --accent-dark: #084d72;
  --ink: #1a1a1a;
  --bg: #ffffff;
  --bg-alt: #f5f5f7;
  --bg-light-section: #f4f5f8;
  --card-bg: #fff;
  --card-shadow: rgba(0,0,0,0.06);
  --tldr-bg: #f0f7fb;
  --metric-label: #555;
  --footer-bg: #fafafa;
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #4db8e8;
    --accent-dark: #6ccbf5;
    --ink: #e0e0e0;
    --bg: #1a1a2e;
    --bg-alt: #22223a;
    --bg-light-section: #22223a;
    --card-bg: #2a2a42;
    --card-shadow: rgba(0,0,0,0.3);
    --tldr-bg: #1e2d3a;
    --metric-label: #aaa;
    --footer-bg: #16162a;
  }
}

html { scroll-behavior: smooth; }

body {
  font-family: "Noto Sans", "Google Sans", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

.publication-title {
  font-family: "Google Sans", sans-serif;
  font-weight: 700;
}

.publication-authors .author-block { margin-right: 0.5rem; }
.publication-authors a { color: var(--accent); }
.publication-authors a:hover { color: var(--accent-dark); }

.publication-links .link-block { margin: 0.25rem; display: inline-block; }
.publication-links .button.is-dark {
  background: #1a1a1a;
  border-radius: 999px;
}
.publication-links .button.is-dark:hover {
  background: var(--accent);
}

.hero.teaser { padding: 1rem 0; }

section.section { padding: 2.5rem 1.5rem; }

pre {
  background: var(--bg-alt);
  color: var(--ink);
  border-radius: 8px;
  padding: 1rem;
  overflow-x: auto;
}

footer.footer {
  background: var(--footer-bg);
  color: var(--ink);
  padding: 2rem 1.5rem;
}

figure.image img {
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.tldr-section { padding-top: 1rem; padding-bottom: 0.5rem; }
.tldr-box {
  border-left: 4px solid var(--accent);
  background: var(--tldr-bg);
  color: var(--ink);
}

.metric-big {
  font-family: "Google Sans", sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}
.metric-label {
  font-size: 0.9rem;
  color: var(--metric-label);
  margin-top: 0.25rem;
}

.box h4.title .fas, .box h4.title .fab {
  color: var(--accent);
}

.feature-cards .column {
  display: flex;
}

.feature-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.feature-card h4.title {
  min-height: 3.5rem;
}

.feature-card p {
  margin-bottom: 0;
}

.feature-card p:last-child:has(.button) {
  margin-top: auto !important;
  padding-top: 1rem;
}

.video-embed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  background: #000;
}
.video-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
  overflow: hidden;
  touch-action: none;
}

/* Dark-mode overrides for Bulma components */
@media (prefers-color-scheme: dark) {
  body, .hero, .hero-body, .section { background: var(--bg) !important; color: var(--ink); }
  .has-background-light { background: var(--bg-light-section) !important; }
  .title, .subtitle { color: var(--ink); }
  .box, .notification { background: var(--card-bg); color: var(--ink); }
  .notification.is-light { background: var(--tldr-bg); color: var(--ink); }
  .content p, .content li { color: var(--ink); }
  .content a { color: var(--accent); }
  .content strong { color: var(--ink); }
  .metric-big strong { color: var(--accent); }
  figure.image img { box-shadow: 0 2px 12px var(--card-shadow); }
  .video-embed { box-shadow: 0 2px 12px var(--card-shadow); }
  .publication-links .button.is-dark { background: #2a2a42; }
  .publication-links .button.is-dark:hover { background: var(--accent); }
  .publication-authors div[style*="color: #666"] { color: var(--metric-label) !important; }
  footer.footer a { color: var(--accent); }
  a { color: var(--accent); }
  a:hover { color: var(--accent-dark); }
  code { background: var(--bg-alt); color: var(--accent); }
}