/* leo.cuckoo.org - the only stylesheet.
   Colour and layout values are taken from the VuePress default theme the site
   used previously, so the appearance is unchanged. */

:root {
  /* Tells the browser to theme native UI - scrollbars, form controls, the
     pre-paint canvas - so dark mode does not leave light scrollbars and a
     white flash before the stylesheet applies. */
  color-scheme: light dark;

  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", roboto, oxygen,
    ubuntu, cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --font-mono: consolas, monaco, "Andale Mono", "Ubuntu Mono", monospace;

  --navbar-height: 3.6rem;
  --navbar-padding: 0.7rem 1.5rem;
  --sidebar-width: 20rem;
  --content-width: 740px;
  --home-width: 960px;

  --c-bg: #fff;
  --c-bg-alt: #f6f6f7;
  --c-text: rgb(60 60 67);
  --c-text-mute: rgb(60 60 67 / 78%);
  --c-divider: #e2e2e3;
  --c-border: #c2c2c4;
  --c-accent: #299764;
  --c-accent-solid: #3eaf7c;
  --c-accent-hover: #4abf8a;
  --c-code-inline-bg: rgb(142 150 170 / 14%);
  --c-code-block-bg: #2e3440;
  --c-code-block-text: #f8f8f2;
  --c-badge-tip-bg: rgb(16 185 129 / 14%);
  --c-badge-tip-text: #18794e;
  --c-badge-warn-bg: rgb(234 179 8 / 14%);
  --c-badge-warn-text: #915930;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --c-bg: #1b1b1f;
    --c-bg-alt: #161618;
    --c-text: rgb(235 235 245 / 86%);
    --c-text-mute: rgb(235 235 245 / 60%);
    --c-divider: #2e2e32;
    --c-border: #3c3f44;
    --c-accent: #3dd68c;
    --c-accent-solid: #3aa675;
    --c-accent-hover: #349469;
    --c-code-inline-bg: rgb(101 117 133 / 16%);
    --c-badge-tip-bg: rgb(16 185 129 / 16%);
    --c-badge-tip-text: #3dd68c;
    --c-badge-warn-bg: rgb(234 179 8 / 16%);
    --c-badge-warn-text: #f9b44e;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --c-bg: #1b1b1f;
  --c-bg-alt: #161618;
  --c-text: rgb(235 235 245 / 86%);
  --c-text-mute: rgb(235 235 245 / 60%);
  --c-divider: #2e2e32;
  --c-border: #3c3f44;
  --c-accent: #3dd68c;
  --c-accent-solid: #3aa675;
  --c-accent-hover: #349469;
  --c-code-inline-bg: rgb(101 117 133 / 16%);
  --c-badge-tip-bg: rgb(16 185 129 / 16%);
  --c-badge-tip-text: #3dd68c;
  --c-badge-warn-bg: rgb(234 179 8 / 16%);
  --c-badge-warn-text: #f9b44e;
}

/* --- base ---------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-padding-top: calc(var(--navbar-height) + 1rem);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-family);
  font-size: 1rem;
  line-height: 1.7;
}

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

a:hover {
  text-decoration: underline;
}

img {
  max-width: 100%;
}

hr {
  border: 0;
  border-top: 1px solid var(--c-divider);
  margin: 2rem 0;
}

/* --- layout -------------------------------------------------------------- */

.navbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--navbar-height);
  padding: var(--navbar-padding);
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-divider);
}

.navbar .site-name {
  font-weight: 600;
  color: var(--c-text);
  white-space: nowrap;
}

.navbar-links {
  display: flex;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  /* A thin scrollbar rather than none: on a narrow screen the links overflow,
     and hiding the scrollbar left no hint that "Talks" and "Projects" were
     there at all. It only appears when there is actually overflow. */
  scrollbar-width: thin;
}

.navbar-links a {
  color: var(--c-text);
  white-space: nowrap;
}

.navbar-links a:hover,
.navbar-links a[aria-current="page"] {
  color: var(--c-accent);
}

.navbar theme-toggle {
  margin-left: auto;
}

.sidebar {
  position: fixed;
  top: var(--navbar-height);
  bottom: 0;
  left: 0;
  z-index: 10;
  width: var(--sidebar-width);
  padding: 1.5rem 0 2rem;
  overflow-y: auto;
  background: var(--c-bg);
  border-right: 1px solid var(--c-divider);
}

.page {
  padding-top: var(--navbar-height);
  padding-left: var(--sidebar-width);
}

.page-content {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 2rem 2.5rem 4rem;
}

.page-footer {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 1.5rem 2.5rem 3rem;
  border-top: 1px solid var(--c-divider);
  color: var(--c-text-mute);
  font-size: 0.875rem;
}

/* Deliberately NOT hiding the sidebar when <page-toc> is empty. A
   :has(page-toc:empty) rule matches before site.js runs, so the sidebar would
   start hidden and pop in once the TOC populates - a layout shift for every
   visitor, to avoid a blank column for the few browsing without JavaScript.
   Doing it properly needs a js/no-js class set by the blocking head script;
   not worth it for a cosmetic issue. */

body.home .page {
  padding-left: 0;
}

body.home .page-content {
  max-width: var(--home-width);
}

body.home .page-footer {
  max-width: var(--home-width);
}

/* --- typography ---------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5 {
  line-height: 1.3;
  font-weight: 600;
}

h1 {
  font-size: 2.2rem;
  margin: 0 0 1rem;
}

h2 {
  font-size: 1.65rem;
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--c-divider);
}

h3 {
  font-size: 1.35rem;
  margin: 2rem 0 0.75rem;
}

h4 {
  font-size: 1.15rem;
  margin: 1.5rem 0 0.5rem;
}

h5 {
  font-size: 1rem;
  margin: 1.25rem 0 0.5rem;
  color: var(--c-text-mute);
  font-weight: 600;
}

p,
ul,
ol {
  margin: 1rem 0;
}

li {
  margin: 0.35rem 0;
}

blockquote {
  margin: 1rem 0;
  padding: 0.25rem 0 0.25rem 1rem;
  border-left: 4px solid var(--c-border);
  color: var(--c-text-mute);
}

/* --- code ---------------------------------------------------------------- */

:not(pre) > code {
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--c-code-inline-bg);
  font-family: var(--font-mono);
  font-size: 0.875em;
  overflow-wrap: break-word;
}

pre {
  margin: 1rem 0;
  padding: 1.25rem 1.5rem;
  border-radius: 6px;
  background: var(--c-code-block-bg);
  color: var(--c-code-block-text);
  overflow-x: auto;
  line-height: 1.5;
}

pre code {
  font-family: var(--font-mono);
  font-size: 0.875em;
}

/* --- status-badge --------------------------------------------------------
   Never registered as a custom element. Styling only. */

status-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.4rem;
  padding: 0 6px;
  border-radius: 3px;
  font-size: 0.75rem;
  line-height: 1.5rem;
  font-weight: 600;
  background: var(--c-badge-tip-bg);
  color: var(--c-badge-tip-text);
}

status-badge[type="warn"] {
  background: var(--c-badge-warn-bg);
  color: var(--c-badge-warn-text);
}

/* --- page-toc ------------------------------------------------------------
   Flat list; nesting is conveyed by indentation. */

page-toc ul.toc {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}

page-toc li {
  margin: 0;
}

page-toc a {
  display: block;
  padding: 0.25rem 1.5rem;
  color: var(--c-text-mute);
  border-left: 2px solid transparent;
}

page-toc a:hover {
  color: var(--c-accent);
  text-decoration: none;
}

page-toc .toc-h2 > a {
  font-weight: 600;
  color: var(--c-text);
}

page-toc .toc-h3 > a {
  padding-left: 2.5rem;
}

page-toc .toc-h4 > a {
  padding-left: 3.5rem;
}

/* --- theme-toggle -------------------------------------------------------- */

theme-toggle button {
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  background: var(--c-bg-alt);
  color: var(--c-text);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

theme-toggle button:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
}

/* --- home hero ----------------------------------------------------------- */

.hero {
  padding: 3rem 0 1rem;
  text-align: center;
}

.hero h1 {
  font-size: 3rem;
  margin: 0 0 1rem;
}

.hero .action {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.7rem 1.6rem;
  border-radius: 4px;
  background: var(--c-accent-solid);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 600;
}

.hero .action:hover {
  background: var(--c-accent-hover);
  text-decoration: none;
}

/* Circular, right-floated portrait on the home page. */
/* The portrait: a circle floated right, with the intro text wrapping to its
   left. Applied via class="custom" on the paragraph holding the image. */
.custom img {
  width: 250px;
  border-radius: 50%;
  float: right;
  padding-left: 7%;
}

/* The float overflows its paragraph, which is what makes the following text
   wrap around it - but without this the next heading would sit alongside the
   photo with its border-bottom running underneath. */
body.home h2 {
  clear: both;
}

.icon {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
  fill: currentcolor;
}

/* --- narrow screens -----------------------------------------------------
   No hamburger: the sidebar is hidden and the navbar links scroll sideways. */

@media screen and (max-width: 900px) {
  .sidebar {
    display: none;
  }

  .page {
    padding-left: 0;
  }

  .page-content {
    padding: 1.5rem 1.25rem 3rem;
  }

  .page-footer {
    padding: 1.5rem 1.25rem 3rem;
  }
}

@media screen and (max-width: 500px) {
  .custom img {
    width: 150px;
    padding-left: 0;
    margin-left: 5%;
    margin-bottom: 5%;
  }

  .hero h1 {
    font-size: 2.2rem;
  }
}

/* --- print --------------------------------------------------------------
   Global, not scoped to the CV: every page prints sanely. Colours are forced
   light so printing while in dark mode does not produce dark backgrounds. */

@media print {
  /* !important is load-bearing here, not decoration.
     Dark mode is applied by :root[data-theme="dark"] and
     :root:not([data-theme="light"]), both specificity (0,2,0). A media query
     contributes NO specificity, so a plain :root block here is (0,1,0) and
     LOSES to them - printing while in dark mode would still produce dark
     backgrounds, which is the exact bug these rules exist to fix. */
  :root {
    --c-bg: #fff !important;
    --c-bg-alt: #fff !important;
    --c-text: #000 !important;
    --c-text-mute: #333 !important;
    --c-divider: #ccc !important;
    --c-border: #999 !important;
    --c-accent: #000 !important;
    --c-code-inline-bg: #f2f2f2 !important;
    --c-code-block-bg: #f2f2f2 !important;
    --c-code-block-text: #000 !important;
    --c-badge-tip-bg: #fff !important;
    --c-badge-tip-text: #000 !important;
    --c-badge-warn-bg: #fff !important;
    --c-badge-warn-text: #000 !important;
  }

  .navbar,
  .sidebar,
  .page-footer,
  theme-toggle,
  /* The CV's "Print friendly page (if you must)" heading is advice for screen
     readers, so printing it onto the paper is absurd. The old site's inline
     print CSS hid it; that rule was dropped when these rules moved here. */
  #print-friendly-page-if-you-must {
    display: none !important;
  }

  .page {
    padding-top: 0;
    padding-left: 0;
  }

  .page-content {
    max-width: none;
    padding: 0;
  }

  .pagebreak {
    page-break-before: always;
  }

  a {
    text-decoration: none;
  }

  status-badge {
    border: 1px solid #999;
  }
}