/* small site-level tweaks on top of govuk-frontend */


/* ---------- hero: infinite flight through the knowledge graph ----------
   Keywords on a long chain rush past the camera. All colours flow from
   GOV.UK design tokens (below) so the scene matches either theme. */
:root {
  --hero-c1: #1d70b8; /* Science of Science */
  --hero-c2: #0f7a5d; /* Knowledge Graph Completion */
  --hero-c3: #b3541e; /* Information Extraction */
  --hero-c4: #6a5ba5; /* Natural Language Processing */
}
html.dark {
  --hero-c1: #4d9bdb;
  --hero-c2: #3dbd94;
  --hero-c3: #e9a066;
  --hero-c4: #a79adb;
}

.hero {
  position: relative;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 25px;
  height: clamp(380px, 33vw, 470px);
  overflow: hidden;
  background: var(--govuk-template-background-colour, #ffffff);
  border-top: 5px solid var(--govuk-brand-colour, #1d70b8);
  border-bottom: 1px solid var(--govuk-border-colour, #b1b4b6);
}
.hero-canvas {
  position: absolute;
  inset: 0;
}
.hero-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 30px;
  pointer-events: none;
}
.hero-identity { pointer-events: auto; }
@media (max-width: 40.0525em) {
  .hero { height: 340px; }
}

/* the flight canvas fills the hero — unmasked, so words can fly
   fully through the frame instead of dissolving on an edge */
.hero-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* small square portrait at the top of the right rail, directly above
   Contact — hairline border, square corners (GOV.UK is a squared,
   formal design system) */
.portrait {
  border: 1px solid var(--govuk-border-colour, #b1b4b6);
  display: block;
  margin: 0 0 1rem;
}

/* CV timeline — replicates the anatomy of GOV.UK's step-by-step
   navigation (gem-c-step-nav, e.g. visa application pages): numbered
   circles joined by a vertical rule, content indented to the right.
   Custom components don't inherit govuk-frontend's fonts (each .govuk-*
   class re-declares them), so the stack is re-applied here. */
.cv-timeline {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.cv-timeline__step {
  position: relative;
  padding-left: 50px;
  padding-bottom: 35px;
}
/* the vertical connector joining this step's circle to the next one */
.cv-timeline__step::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 32px;
  bottom: 0;
  left: 16px;
  border-left: 1px solid var(--govuk-border-colour, #b1b4b6);
}
.cv-timeline__step:last-child::after { display: none; }
.cv-timeline__circle {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  border: 1px solid var(--govuk-border-colour, #b1b4b6);
  border-radius: 100px;
  background: var(--govuk-template-background-colour, #ffffff);
  color: var(--govuk-text-colour, #0b0c0c);
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  line-height: 30px;
}
.cv-timeline__head {
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.cv-timeline__heading-text { flex: 1 1 auto; min-width: 0; }
.cv-timeline__title {
  margin: 0;
  font-size: 19px;
  font-weight: bold;
  line-height: 1.4;
}
.cv-timeline__meta { margin: 2px 0 0; }
/* panel content: govuk-body sizing; markdown <ul> gets govuk-list-like
   presentation (UA default bullets look wrong otherwise) */
.cv-timeline__body {
  font-size: 19px;
  line-height: 1.3157894737;
  color: var(--govuk-text-colour, #0b0c0c);
  margin: 0;
}
.cv-timeline__body ul {
  margin: 10px 0 0;
  padding-left: 20px;
  list-style-type: disc;
}
.cv-timeline__body li { margin-bottom: 5px; }
/* organisation logo on a white chip so it reads on both themes */
.cv-timeline__logo {
  flex: 0 0 auto;
  margin-top: 2px;
  height: 28px;      /* 2x asset scaled down -> crisp on retina */
  width: auto;
  background: #fff;
  border: 1px solid var(--govuk-border-colour, #b1b4b6);
  border-radius: 4px;
  padding: 4px 8px;
}
@media (max-width: 20em) {
  .cv-timeline__logo { display: none; }
}

/* homepage section headings — the actual gov.uk homepage pattern
   (.homepage-section__heading): on mobile each major section heading
   carries a 4px brand rule with 50px space above it; on desktop
   (≥48.0625em) gov.uk sets border:none;padding:0 and separates
   sections with whitespace alone */
.section-heading {
  margin: 50px 0 30px;
  padding-top: 50px;
  border-top: 4px solid var(--govuk-brand-colour, #1d70b8);
}

@media (min-width: 48.0625em) {
  .section-heading {
    border-top: none;
    padding-top: 0;
  }
}

/* the single desktop divider between page groups (gov.uk
   .border-top-blue-from-desktop): one 4px brand rule above the
   second major group, desktop only; whitespace on mobile */
.section-divider {
  margin-top: 50px;
  padding-top: 30px;
  border-top: 4px solid var(--govuk-brand-colour, #1d70b8);
}

@media (max-width: 48.0525em) {
  .section-divider {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }
}

/* inside the divider the heading's own spacing is supplied by the
   divider's padding (desktop) or its own mobile rule (mobile) */
.section-divider .section-heading {
  margin-top: 0;
}

/* brand-colour section divider for content pages (gov.uk .app-promo
   pattern): 4px brand rule, 50px space above, 30px below; always on,
   unlike the homepage divider which is desktop-only */
hr.section-break--brand {
  margin-top: 50px;
  margin-bottom: 30px;
  border-top: 4px solid var(--govuk-brand-colour, #1d70b8);
}

/* document-list pattern: top-bordered rows like GOV.UK "Documents" lists */
.paper-row {
  border-top: 1px solid #b1b4b6;
  padding: 15px 0 5px;
}
.paper-row:last-child {
  border-bottom: 1px solid #b1b4b6;
}

/* paper entries */
.paper-entry { margin-bottom: 1rem; }
.paper-entry:last-child { margin-bottom: 0; }
.paper-entry .govuk-heading-s { line-height: 1.35; }

/* skim pattern: title left, venue + year on a consistent right edge.
   Grid (not flex) so the venue stays right-aligned even when a long title
   wraps; stacks to a single column on small screens. */
.paper-entry__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1.5rem;
  align-items: baseline;
}
.paper-entry__venue {
  text-align: right;
}
@media (max-width: 40em) {
  .paper-entry__top { grid-template-columns: 1fr; }
  .paper-entry__venue { text-align: left; }
}

/* keep accordions usable if reintroduced later */
.govuk-accordion__section-content p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------
   Dark theme (manual, class on <html>; GOV.UK Frontend ships no dark
   palette, so this is a hand-rolled AA-checked override)
   ------------------------------------------------------------------ */
html.dark { color-scheme: dark; }

/* GOV.UK v6 components read colours from custom properties with light-mode
   fallbacks (e.g. .govuk-summary-list{color:var(--govuk-text-colour,#0b0c0c)}).
   Redefining the tokens re-themes ALL components at once — far more robust
   than overriding component rules individually. */
html.dark {
  --govuk-text-colour: #f3f2f1;
  --govuk-body-background-colour: #0b0c0c;
  --govuk-template-background-colour: #0b0c0c;
  --govuk-border-colour: #38393a;
  --govuk-link-colour: #a3c9f5;
  --govuk-link-hover-colour: #e2ecf7;
  --govuk-link-visited-colour: #a3c9f5;
  --govuk-link-active-colour: #f3f2f1;
  --govuk-secondary-text-colour: #b1b4b6;
  --govuk-hover-colour: #38393a;
  --govuk-focus-colour: #fd0;
  --govuk-focus-text-colour: #0b0c0c;
}

html.dark body { background: #0b0c0c; color: #f3f2f1; }

/* typography: GOV.UK bakes black onto .govuk-body/.govuk-heading-* rather than
   inheriting from body, so each must be overridden explicitly */
html.dark .govuk-heading-xl,
html.dark .govuk-heading-l,
html.dark .govuk-heading-m,
html.dark .govuk-heading-s,
html.dark .govuk-body,
html.dark .govuk-body-s,
html.dark .govuk-body-m,
html.dark .govuk-body-l,
html.dark .govuk-body-xl,
html.dark .govuk-list,
html.dark .govuk-details__text { color: #f3f2f1; }

/* header + service navigation */
html.dark .govuk-generic-header { border-bottom: 1px solid #3d3e40; }
html.dark .govuk-service-navigation { background: #1a1a1a; }

/* links */
html.dark .govuk-link,
html.dark .govuk-service-navigation__link,
html.dark .govuk-footer__link,
html.dark .govuk-details__summary-text { color: #a3c9f5; }
html.dark .govuk-link:hover,
html.dark .govuk-service-navigation__link:hover,
html.dark .govuk-footer__link:hover { color: #e2ecf7; }
/* visited links would otherwise render GOV.UK's dark purple (#4c2c92),
   unreadable on dark */
html.dark .govuk-link:visited { color: #a3c9f5; }

/* muted text */
html.dark .govuk-hint,
html.dark .govuk-caption-xl,
html.dark .govuk-caption-m { color: #b1b4b6; }

/* footer */
html.dark .govuk-footer { background: #161616; color: #f3f2f1; }

/* identity band + document rows get a lifted accent/border tone
   (brand colour token brightened once, used by band + section headings) */
html.dark { --govuk-brand-colour: #4d9bdb; }
html.dark .paper-row,
html.dark .paper-row:last-child { border-color: #38393a; }

/* details disclosure */
html.dark .govuk-details { border-left-color: #4d9bdb; }

/* summary-lists (experience page) */
html.dark .govuk-summary-list__row { border-bottom-color: #38393a; }

/* theme toggle */
.theme-toggle {
  font: inherit;
  font-size: 1rem;
  background: none;
  border: 0;
  padding: 10px 2px;
  color: #1d70b8;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* focus: adopt GOV.UK's canonical focused-fill (yellow bg, black text) —
   without this the button's light text collides with the focus colour */
.theme-toggle:focus {
  outline: 3px solid transparent;
  background-color: #fd0;
  box-shadow: 0 -2px #fd0, 0 4px #0b0c0c;
  color: #0b0c0c;
  text-decoration-color: #0b0c0c;
}
.theme-toggle:hover { text-decoration-thickness: 3px; }
/* focus text must flip to black whenever GOV.UK's yellow fill applies.
   The html.dark colour overrides above (0,2,1) outrank GOV.UK's own
   .govuk-link:focus rules (0,2,0), so an explicitly stronger focus rule is
   required — otherwise focused links keep light text on yellow. */
html.dark :is(.govuk-link,
             .govuk-service-navigation__link,
             .govuk-footer__link,
             .govuk-details__summary-text,
             .theme-toggle):focus { color: #0b0c0c; }
html.dark .theme-toggle { color: #a3c9f5; }
.theme-toggle__label--dark { display: none; }
html.dark .theme-toggle__label--dark { display: inline; }
html.dark .theme-toggle__label--light { display: none; }