/*
 * Light / dark theme, shared by all pages (see assets/js/theme.js).
 * Load this file LAST, after bootstrap, styles.css and publications.css.
 * Light theme = the site's historical look; dark theme = same palette as
 * teaching/26-27/C/files/examples/index.html.
 */

:root {
  color-scheme: light;
  --bg: #fff;
  --ink: #273c44;
  --nav-ink: #000;
  --mute: #667085;
  --link: #5d6dab;
  --line: #d3d8df;
  --card: #fff;
  --hl: #efefef;
  --bar: #eee;
  --bar-on: #ddd;
  --accent: #2f5d8a;
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23667085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #14171d;
  --ink: #e8eaee;
  --nav-ink: #e8eaee;
  --mute: #98a1b0;
  --link: #7fb0e0;
  --line: #2c323d;
  --card: #1b1f27;
  --hl: #222a36;
  --bar: #1b1f27;
  --bar-on: #2c323d;
  --accent: #7fb0e0;
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2398a1b0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---- page colours ---- */
body {
  background-color: var(--bg);
  color: var(--ink);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ink);
}

.main-colour,
.alt-colour {
  background-color: var(--bg);
}

a {
  color: var(--link);
}

a:hover {
  color: var(--link);
  background-color: var(--hl);
}

/* ---- top banner ---- */
ul.topnav {
  position: relative;
  background-color: var(--bar);
}

ul.topnav li a {
  color: var(--nav-ink);
}

ul.topnav li a:hover:not(.active) {
  background-color: var(--bg);
}

ul.topnav li a.active {
  background-color: var(--bar-on);
}

/* ---- boxes revealed by [Abstract] / [bib] ---- */
.card {
  background-color: var(--card);
  border-color: var(--line);
  color: var(--ink);
}

/* ---- pill-shaped controls (theme toggle, publication filters) ---- */
.tt,
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  height: auto;
  margin: 0;
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background-color: var(--card);
  color: var(--ink);
  cursor: pointer;
}

.tt:hover,
.pill:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.tt:focus-visible,
.pill:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

select.pill {
  -webkit-appearance: none;
  appearance: none;
  min-width: 8.5rem;
  padding-right: 30px;
  background-image: var(--chev);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 7px;
}

select.pill option {
  background-color: var(--card);
  color: var(--ink);
}

#searchbar {
  border-radius: 999px;
  border: 1px solid var(--line);
  background-color: var(--card);
  color: var(--ink);
  padding: 6px 16px;
  font-size: 14px;
  box-shadow: none;
}

#searchbar::placeholder {
  color: var(--mute);
  opacity: 1;
}

#searchbar:focus {
  border-color: var(--accent);
  background-color: var(--card);
  color: var(--ink);
  box-shadow: none;
  outline: none;
}

/* ---- the discreet theme toggle, right end of the banner ---- */
ul.topnav li.theme {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  height: 52px;
  padding-right: 12px;
}

.tt {
  padding: 4px 8px;
  background-color: transparent;
  color: var(--mute);
}

html:not([data-theme]) .tt {
  display: none;
}

html[data-theme="dark"] .tt .moon,
html[data-theme="light"] .tt .sun {
  display: none;
}

/* ---- portrait photo: lightly rounded corners (about 2 mm) ---- */
img[src$="images/mz.png"] {
  border-radius: 2mm;
}