/* Site overrides layered on top of the Basic Web Theme's style.css. */

/* Fit tables within the 500px content column.
   The theme sets `table { min-width: 90vw }` and `td/th { white-space: nowrap }`,
   which pushes wide tables (e.g. the homepage profile table) out of `main`.
   Drop the width floor and let long cells wrap instead. */
main table {
  min-width: 0;
  width: 100%;
}

main th,
main td {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Content images sit on their own line, so a following caption always lands
   underneath instead of beside narrower-than-column images. */
main img {
  display: block;
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #23262c;
    color: #ababab;
  }

  a {
    color: #5aa2ee;
  }
}

/* ---- Right-floated wrap image (portable; pull into the theme as-is) --------
   Text wraps around a ~1/3-width image. Full-width on narrow screens. The
   heading auto-clear keeps a float from overlapping the next section. */
.img-right {
  float: right;
  width: 33%;
  height: auto;
  margin: 0.2em 0 0.6em 1em;
  border-radius: 4px;
}
main h2,
main h3,
main h4 {
  clear: both;
}
@media (max-width: 699px) {
  .img-right {
    float: none;
    width: 100%;
    margin: 0 0 0.6em;
  }
}

/* Content bullet/numbered lists: default line height, more space between items. */
main li {
  line-height: 1.2;
}

main li + li {
  margin-top: 0.6em;
}

/* ---- /work-history vertical timeline --------------------------------------
   One left spine (the .timeline border-left). Year markers are sticky, so the
   current year pins to the top as you scroll through its entries. Entries hang
   off dots; plain markdown between entries flows in the content lane.
   Authored via the {{< year >}} / {{< entry >}} shortcodes.
   Dot left-offsets assume padding-left: 24px — nudge together if you retune it. */
.timeline {
  position: relative;
  border-left: 2px solid #cfcfcf;
  margin-left: 6px;
  padding-left: 24px;
}

/* Year: label + filled node. Scrolls normally with the page. */
.timeline .tl-year {
  position: relative;
  margin: 1.5em 0 0.7em;
  font-size: 1.5em;
  font-weight: bold;
  line-height: 1.2;
}
.timeline .tl-year:first-child {
  margin-top: 0.2em;
}
.timeline .tl-year::before {
  content: "";
  position: absolute;
  left: -31px;
  top: 0.28em;
  width: 14px;
  height: 14px;
  background: #333;
  border-radius: 50%;
}

/* Entry: hollow dot + month tag + title + markdown body. */
.timeline .tl-entry {
  position: relative;
  margin: 0 0 1.4em;
}
.timeline .tl-entry::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 0.4em;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 2px solid #999;
  border-radius: 50%;
}
/* Contain a floated wrap-image within its entry (can't use overflow:hidden —
   it would clip the spine dot at negative left). */
.timeline .tl-entry::after {
  content: "";
  display: block;
  clear: both;
}
.timeline .tl-head {
  margin: 0 0 0.3em;
}
.timeline .tl-month {
  display: inline-block;
  margin-right: 0.55em;
  font-size: 0.72em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #888;
  vertical-align: middle;
}
/* Entry title as a colored, clickable label — a larger cousin of the grey
   milestone pill. Links swap colors on hover. */
.timeline .tl-title {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 4px;
  background: #eaf1fb;
  color: #1c4e80;
  font-weight: bold;
  font-size: 1.05em;
  text-decoration: none;
}
.timeline a.tl-title {
  cursor: pointer;
}
.timeline a.tl-title:hover {
  background: #1c4e80;
  color: #fff;
}
.timeline .tl-body > :first-child {
  margin-top: 0;
}

/* Technology-history marker — grey pill in the month-label's uppercase, letter-
   spaced style, with a hollow diamond node, so it reads as background context
   rather than one of your own projects. */
.timeline .tl-milestone {
  position: relative;
  display: block;
  width: fit-content;
  margin: 0 0 1.1em;
  padding: 2px 8px;
  background: #eaeaea;
  border-radius: 3px;
  color: #888;
  font-size: 0.72em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.timeline .tl-milestone::before {
  content: "";
  position: absolute;
  left: -29px;
  top: 0.35em;
  width: 8px;
  height: 8px;
  background: #fff;
  border: 2px solid #bbb;
  transform: rotate(45deg);
}

/* Personal-life milestone — same shape as a tech milestone, warmer color. */
.timeline .tl-personal {
  background: #f3e9d6;
  color: #8a6a3a;
}
.timeline .tl-personal::before {
  border-color: #c9a86a;
}