/* Project pages (Bulma template): align fonts and colours with the landing
   page and add dark mode. Load after the page's own stylesheets. */

body,
button,
input,
select,
textarea,
.title,
.subtitle,
.publication-title,
.teaser,
.content {
  font-family: var(--font) !important;
}

html,
body,
.hero,
.section,
.footer {
  background-color: var(--bg);
  color: var(--ink);
}

.title,
.subtitle,
.content,
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6,
.content strong,
.content table th,
strong,
label {
  color: var(--ink);
}

.subtitle,
.content blockquote,
figcaption {
  color: var(--muted);
}

a,
.content a,
.section a:not(.button) {
  color: var(--accent);
}

hr {
  background-color: var(--line);
}

/* Navbar */
.navbar,
.navbar.is-transparent,
.glass-overlay {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--line);
}

.navbar-item,
.navbar-link {
  color: var(--ink);
}

.navbar-link:not(.is-arrowless)::after {
  border-color: var(--muted);
}

a.navbar-item:hover,
.navbar-link:hover,
.navbar-item.has-dropdown:hover .navbar-link,
.navbar-dropdown a.navbar-item:hover {
  background-color: var(--accent-soft);
  color: var(--accent);
}

.navbar-dropdown,
.navbar-menu {
  background-color: var(--surface);
  border-color: var(--line);
}

.navbar-burger span {
  background-color: var(--ink);
}

.navbar-item .theme-toggle {
  height: 30px;
  width: 30px;
}

/* Buttons: invert with the theme */
.button.is-dark {
  background-color: var(--ink);
  color: var(--bg);
}

.button.is-dark:hover {
  background-color: var(--accent);
  color: var(--bg);
}

/* Code, tables, cards */
pre,
code,
.content pre {
  background-color: var(--code-bg) !important;
  color: var(--ink) !important;
}

.copy-code-button,
.copy-code-button > span {
  color: var(--muted);
}

.copy-code-button::before {
  background-color: var(--muted);
}

.table,
table,
.content table {
  background-color: transparent;
  color: var(--ink);
}

.table td,
.table th,
.content table td,
.content table th {
  border-color: var(--line);
  color: var(--ink);
}

.card,
.box,
.modal-card-body,
.modal-card-head,
.modal-card-foot {
  background-color: var(--surface);
  color: var(--ink);
}

.card-footer,
.card-footer-item,
.modal-card-head,
.modal-card-foot {
  border-color: var(--line);
}

/* Figures keep their own (usually white) background in dark mode */
:root[data-theme="dark"] .content img,
:root[data-theme="dark"] .carousel img {
  background-color: #ffffff;
}