/* Shared styles for all pages. */

/* ---------- Colours ----------
   Dark by default; the switch at the top (js/theme.js) sets data-theme="light" on <html>.
   Both palettes follow computerbase.de. In light mode, links use their darker orange,
   which is easier to read on white than the bright one. */

:root {
  color-scheme: dark;
  --bg: #121212;
  --text: #d7d7d7;
  --heading: #e0e0e0;
  --link: #e84d0e;
  --rule: #333;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fff;
  --text: #222;
  --heading: #2c5b9c;
  --link: #cc3900;
  --rule: #ddd;
}

/* Each device's own interface font (Segoe UI on Windows, San Francisco on Apple,
   Roboto on Android): nothing is downloaded, so no third-party font server is contacted. */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.45;
  background: var(--bg);
  color: var(--text);
}

.content {
  max-width: 960px;
  margin: auto;
}

h1,
h2,
h3 {
  color: var(--heading);
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Heading sizes: the name (h1), section titles (h2), sub-headings (h3).
   Sub-pages use a smaller h1 that looks like a section title. */
h1 {
  font-size: 1.5em;
  margin: .83em 0;
}

h1.page-title,
h2 {
  font-size: 1.17em;
  margin: 1em 0;
}

h3 {
  font-size: 1em;
  margin: 1.33em 0;
}

/* Lists with a blank line between items. */
.spaced > li + li {
  margin-top: 1em;
}


/* ---------- Side-by-side layouts ----------
   The 2px gaps and 1px cell padding reproduce the spacing of the tables
   the page was originally built with, so the look stays the same. */

.site-header,
.row,
.project {
  display: grid;
  gap: 2px;
  padding: 2px;
}

.site-header > *,
.row > *,
.project > * {
  padding: 1px;
  box-sizing: border-box;
}


/* Page header: photo on the left, logo and name in the middle, light/dark switch and
   contact details on the right. The outer columns are equally wide, so the name stays
   centred on the page. On narrow screens the contact details move below (see the end of the file). */

.site-header {
  grid-template-columns: 1fr auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "photo title switch"
    "photo title contact";
  align-items: center;
  margin: .5cm 0;
}

.site-header .title {
  grid-area: title;
  text-align: center;
}

/* Sized with the page width (15% of it, at most 143px), as the middle column
   is only as wide as the name. */
.site-header .logo {
  display: block;
  width: min(143px, 15vw);
  margin: 0 auto;
  padding-bottom: .15cm;
  -webkit-tap-highlight-color: transparent;  /* no grey flash when tapped on phones */
}

/* Two logos, one per mode (see _logo/): both are small, and CSS picks the right one
   before anything is drawn, so the top of the page never flashes the wrong one. */
:root:not([data-theme="light"]) .site-header .logo-light,
:root[data-theme="light"] .site-header .logo-dark {
  display: none;
}

.site-header .photo {
  grid-area: photo;
  display: block;
  width: min(188px, 20vw);
  max-width: 100%;
  align-self: start;
}

/* Contact details, at the bottom of the right column (level with the bottom of the photo).
   The email address is split after the name, so no line is wider than the street address. */
.contact {
  grid-area: contact;
  align-self: end;
  font-style: normal;
  text-align: right;
}

.contact > :first-child {
  margin-top: 0;
}

.contact > :last-child {
  margin-bottom: 0;
}

/* Light/dark switch: top right on every page. It shows the mode it switches to:
   a sun in dark mode, a moon in light mode. */

.theme-switch {
  padding: 4px;
  border: 0;
  background: none;
  color: var(--text);
  cursor: pointer;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
}

.theme-switch svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-switch:hover {
  color: var(--link);
}

.site-header .theme-switch {
  grid-area: switch;
  justify-self: end;
  align-self: start;
}

.page-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.theme-switch .icon-moon,
:root[data-theme="light"] .theme-switch .icon-sun {
  display: none;
}

:root[data-theme="light"] .theme-switch .icon-moon {
  display: inline;
}


/* Two columns: Teaching | talks. */

.row {
  align-items: start;
}

/* No top margin above the first heading of a column (also when the column
   holds several sections, like Teaching + Outreach). */
.row > * > :first-child,
.row > div > :first-child > :first-child {
  margin-top: 0;
}

.teaching-row {
  grid-template-columns: 2fr 3fr;
}


/* Research interests: picture on the left, description on the right. */

.research {
  margin-bottom: 1em;
}

.project {
  grid-template-columns: 1fr 3fr;
  align-items: center;
}

.project + .project {
  margin-top: 21px;
}

.project img {
  display: block;
  max-width: 75%;
  margin: auto;
}

/* Tall, narrow pictures (the cactus) get less width, so they don't tower over the text. */
.project img.tall {
  max-width: 58%;
}

/* Pictures in dark mode. Black-and-white drawings are inverted: white turns into the
   page background and black into light grey, while hues are kept (the hue-rotate
   undoes the inversion's colour shift). Pictures whose colours should stay exact have
   their own dark file instead (made with _scratch/tools/dark_variant.py), written as
   <img src="x-dark.png" data-light="x.png">; js/theme.js swaps in the light file. */

:root:not([data-theme="light"]) img.invert-dark {
  filter: invert(.93) hue-rotate(180deg);
}

.project h3 {
  font-size: x-large;
  font-weight: normal;
  margin: 0;
}

.project p {
  margin: 0;
}

.project h3 + p {
  margin-top: 1em;
}


/* ---------- Bottom of the page ---------- */

.theses {
  margin-bottom: 1cm;
}


/* ---------- Narrow screens and phones ----------
   Below 700px the postal address would come too close to the name, so the contact
   details move below photo, name and switch. Below 600px the other side-by-side parts
   are stacked too: Teaching and Outreach above the talks, each research picture above its text. */

@media (max-width: 700px) {
  .site-header {
    grid-template-areas:
      "photo title switch"
      "contact contact contact";
  }

  .contact {
    text-align: center;
  }
}

@media (max-width: 600px) {
  .teaching-row,
  .project {
    grid-template-columns: 1fr;
  }

  .project img {
    max-width: 50%;
    margin: 0 auto 1em;
  }

  .project img.tall {
    max-width: 30%;
  }
}


/* ---------- Printing: always the light version, without the switch ---------- */

@media print {
  :root {
    color-scheme: light;
    --bg: #fff;
    --text: #222;
    --heading: #2c5b9c;
    --link: #cc3900;
    --rule: #ddd;
  }

  .theme-switch,
  :root .site-header .logo-dark {
    display: none !important;
  }

  :root .site-header .logo-light {
    display: block !important;
  }

  :root img.invert-dark {
    filter: none !important;
  }
}