/* ===========================================================================
   Overrides for the mkdocs-landing theme.
   Grouped by why the rule exists, not by selector. Nothing here duplicates a
   theme rule that already works -- every block fixes something specific.
   =========================================================================== */

/* --- 1. Light-mode accent contrast ---------------------------------------
   Catppuccin Latte's accents are tuned for syntax highlighting on a mid-tone
   editor background, not for body links on near-white. All three failed WCAG
   AA against --base (#eff1f5): peach 2.3:1, teal 2.8:1, green 3.0:1. These are
   the same hues darkened until they clear 4.5:1 against --mantle, the darker of
   the two surfaces they sit on. Dark mode already passes (9-13:1), so it is
   left alone. --overlay is border-only, so it targets the 3:1 non-text bar.
   ------------------------------------------------------------------------- */
:root {
  --shadow: rgba(76, 79, 105, 0.12); /* theme references --shadow but never defines it */
}

/* Scoped rather than a bare :root, twice over. This file loads after the theme's
   inline <style>, so an unscoped :root would drag these light values into dark
   mode; and the reader can now force a palette, so "light" means either the OS
   said so, or the toggle did. */
@media not all and (prefers-color-scheme: dark) {
  :root:not([data-theme="dark"]) {
    --primary: #ad4028;   /* was #dc8a78 -- 4.88:1 on mantle */
    --secondary: #136d7d; /* was #209fb5 -- 4.92:1, this is the link colour */
    --tertiary: #2d7320;  /* was #40a02b -- 4.82:1, link hover */
    --overlay: #7c8194;   /* was #9ca0b0 -- 3.18:1, borders only */
  }
}
:root[data-theme="light"] {
  --primary: #ad4028;
  --secondary: #136d7d;
  --tertiary: #2d7320;
  --overlay: #7c8194;
  --shadow: rgba(76, 79, 105, 0.12);
}
:root[data-theme="dark"] {
  --shadow: rgba(0, 0, 0, 0.45);
}
@media (prefers-color-scheme: dark) {
  :root {
    --shadow: rgba(0, 0, 0, 0.45);
  }
}

/* --- 2. Keyboard navigation ----------------------------------------------
   The theme sets `a { text-decoration: none }` and defines no focus style, so
   a keyboard user gets only the UA default outline -- which is nearly invisible
   against these backgrounds. Links also need a non-colour cue: colour alone is
   not a sufficient distinction under WCAG 1.4.1.
   ------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--tertiary);
  outline-offset: 3px;
  border-radius: 2px;
}
#page a:not(.cv-link) {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}
#page a:not(.cv-link):hover,
#footer a:hover {
  text-decoration-thickness: 2px;
}
/* The footer credit is a run of prose with links inside it, so colour alone
   does not mark them (WCAG 1.4.1). */
#footer a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Navigation is not a block of text, so WCAG 1.4.1 does not ask for a non-colour
   cue there -- and underlining a link list just makes it noisy. */
/* #page prefixes are load-bearing: the underline rule above is
   `#page a:not(.cv-link)`, whose class in the :not() outweighs a bare `#toc a`. */
#page #toc a,
#page #page-controls a {
  text-decoration: none;
}

/* A skip link is the one piece of keyboard navigation you cannot add with an
   attribute -- it has to exist in the DOM and reveal itself on focus. */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--base);
  color: var(--text);
  border: 2px solid var(--secondary);
  border-radius: 0.5rem;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 1rem;
}
#page:focus {
  outline: none; /* the skip target should not draw a ring around the whole page */
}

/* The theme reveals TOC sub-items and social labels on :hover only, which means
   they never appear for anyone navigating by keyboard. */
nav.vertical .nav-item:focus-within ul {
  transform: scaleY(1);
  height: auto;
}
nav.horizontal .nav-item:focus-within ul {
  transform: scaleX(1);
  width: auto;
}
ul#socials li:focus-within .social-label {
  display: block;
}

/* --- 3. Legibility of de-emphasised text ---------------------------------
   `opacity: 35%` on TOC sub-items and social labels lands them around 2:1.
   60% keeps them visibly secondary while clearing the 4.5:1 bar. */
nav .nav-subitem a,
ul#socials .social-label {
  opacity: 70%;
}

/* --- 4. Motion -----------------------------------------------------------
   The theme sets `scroll-behavior: smooth` unconditionally; anchor jumps then
   animate for people who have asked their OS for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- 5. Small screens ----------------------------------------------------
   These rules only matter now that a viewport meta tag exists. Before it, the
   browser rendered at ~980px and scaled down, which hid all of this.
   The 6rem title and the negative article margins both overflow a phone. */
h1#title,
h1#title a {
  font-size: clamp(2.75rem, 13vw, 6rem);
  overflow-wrap: break-word;
}
p#tagline,
p#tagline a {
  font-size: clamp(1.1rem, 4.5vw, 1.5rem);
}

@media screen and (max-width: 48rem) {
  /* head_config.html writes `grid-template-columns: <avatar_size> auto <avatar_size>`
     inline, so at avatar_size: 12rem the header demands 384px of tracks before
     any padding and pushes the page sideways on a phone. One column, and an
     avatar sized to the viewport instead. */
  header#header {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: start;
  }
  img#avatar {
    min-width: 0;
    width: min(8rem, 40vw);
    height: auto;
    margin: 0;
  }
  content#content {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  header {
    padding: 2rem 0;
  }
  article {
    margin-left: 0;        /* theme pulls articles into the gutter */
    padding: 1rem 1.25rem;
  }
  /* The theme doubles social icons to 4rem under `pointer: coarse`; five of
     them at that size overflow a 375px viewport. */
  ul#socials {
    font-size: 2rem;
    flex-wrap: wrap;
  }
  #share-btn {
    margin-left: calc(100% - 3.5rem);
  }
}

@media (pointer: coarse) {
  /* Upstream sets `p { margin-bottom: 3rem }` on touch, which strands each
     paragraph on its own screen and breaks the link between a heading and the
     text under it. */
  p {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
  }
  h1, h2, h3, h4, h5, h6 {
    margin-bottom: 0.3rem;
    margin-top: 1.2em;
  }
  article {
    margin-bottom: 2rem;
  }
}

/* Long DOIs and repository URLs otherwise push a horizontal scrollbar onto the
   whole page on a narrow screen. */
#page {
  overflow-wrap: break-word;
}

/* --- 6. Content-specific -------------------------------------------------- */

/* Reading measure: 46rem of 16px text is a touch wide for continuous prose. */
#page p,
#page li {
  line-height: 1.65;
  max-width: 42rem;
}

/* The CV download is the one call to action on the page, so it gets button
   affordance rather than looking like every other inline link. */
a.cv-link {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.6rem 1.2rem;
  border: 2px solid var(--secondary);
  border-radius: 0.5rem;
  font-family: var(--heading);
  font-weight: 700;
  color: var(--secondary);
}
a.cv-link:hover,
a.cv-link:focus-visible {
  background-color: var(--secondary);
  color: var(--base);
}

/* --- 7. Print ------------------------------------------------------------
   A CV page gets printed. Drop the chrome and stop articles breaking mid-entry. */
@media print {
  #toc, #share-btn, #page-controls, #footer, .skip-link, #background-gradient {
    display: none !important;
  }
  content#content {
    max-width: none;
    padding: 0;
    border: none;
  }
  article {
    break-inside: avoid;
    border: none;
    margin-left: 0;
    padding: 0;
  }
  h1#title, h1#title a {
    font-size: 2.5rem;
  }
  #page a::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    word-break: break-all;
  }
}


/* --- 8. Theme toggle -------------------------------------------------------
   Fixed in the bottom-right corner at every width. Deliberately out of both the
   header and the sidebar: beside the title it read as a footnote marker on the
   name, and inside nav#toc it could not line up with the links, which sit in a
   grid column narrower than the sidebar itself.

   Opaque rather than translucent because it floats over the dark footer at the
   foot of the page as well as over the body background. */
#theme-toggle {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 20;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  margin: 0;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text);
  background: var(--base);
  border: 1px solid var(--overlay);
  border-radius: 100%;
  box-shadow: 0 2px 8px var(--shadow);
}
#theme-toggle:hover {
  color: var(--base);
  background-color: var(--secondary);
  border-color: var(--secondary);
}
#theme-toggle i {
  margin: 0;
}

/* With the avatar out of header_layout, head_config's inline
   `grid-template-columns: <avatar_size> auto <avatar_size>` leaves two dead
   tracks either side of the header. One column, full width. */
header#header {
  grid-template-columns: minmax(0, 1fr) !important;
}
header#header > * {
  grid-column: 1 !important;
}