/* Reset (minimal — replaces Bootstrap normalize) */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  /* Bootstrap default body stack — h2 (Libre Baskerville) and p (Ubuntu)
     override this; other inline content inherits Helvetica. The original
     site rendered this way, so matching it keeps all text at the prod size. */
  font-family: var(--f-body);
  color: var(--c-ink);
  background-color: var(--c-bg);
  font-size: 14px;
  line-height: 1.428571;
}

a {
  color: var(--c-link);
  /* Prod's BS3 sets `a { text-decoration: none }` globally; without this,
     inline links like "Highlights 2016" pick up the browser default underline. */
  text-decoration: none;
}

/* Global headings — matches mainStyle.css h2 + p rules.
   Prod's BS3 base.css set `h1..h6 { font-weight: 500; line-height: 1.1 }`
   on every heading; we replicate that here so #myName etc. don't fall back
   to the browser-default h1 (weight 700, lh 1.2). */
h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
  line-height: 1.1;
}

h2 {
  font-family: var(--f-serif);
  color: black;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15);
  font-size: 27px;
}

p {
  font-family: var(--f-sans);
}

/* BS3 sup/sub baseline — prod inherits these from bootstrap.min.css.
   Without them, prod's footnote-style sup numerals render 12.5px / lh 20
   instead of the 75%/lh:0 prod renders at. */
sup, sub {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup { top: -0.5em; }
sub { bottom: -0.25em; }

/* BS3 b/strong — bootstrap.min.css sets `b, strong { font-weight: bold }`.
   Without this rule, the browser default `b, strong { font-weight: bolder }`
   applies, and `bolder` is relative: inside a parent with weight 200 it
   resolves to 400, not 700. The home "|" separator and inline <b>s on /cv/
   would render at 400 on dev vs 700 on prod. */
b, strong {
  font-weight: bold;
}

/* Container — replaces Bootstrap 3 .container. BS3 used `width` (not max-width)
   at each breakpoint, which is what lets per-page overrides like
   `#mainPub .container { width: 85% }` actually widen the container past 1170. */
.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 768px) {
  .container { width: 750px; }
}

@media (min-width: 992px) {
  .container { width: 970px; }
}

@media (min-width: 1200px) {
  .container { width: 1170px; }
}

.text-center { text-align: center; }
.text-right  { text-align: right; }

/* Navbar — replaces navbarStyle.css */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 90px;
  margin: 0;
  background-color: var(--c-navbar-bg);
  z-index: 2000;
  display: flex;
  align-items: flex-start;
}

.site-nav ul {
  list-style-type: none;
  margin: 0;
  /* Matches prod: 40px left padding (browser-default for ul) brings "Home"
     to x=40 instead of flush left at x=0. */
  padding: 0 0 0 40px;
  height: 90px;
  display: flex;
}

.site-nav li {
  margin-right: 20px;
}

.site-nav a {
  display: block;
  font-family: var(--f-serif);
  /* Prod's navbarStyle.css has a stray comment-terminator on the font-family
     line which voids the next declaration. The result is that prod nav
     renders at the <a> default weight 400, not the intended 300. We match
     the rendered prod (400). */
  font-weight: 400;
  font-size: 17px;
  color: var(--c-navbar-fg);
  padding: 28px 10px 0;
  height: 80px;
  text-decoration: none;
  transition: 0.3s;
}

.site-nav a:hover {
  text-shadow: 0 0 5px green;
  margin-top: 2px;
}

@media all and (max-width: 482px) {
  .site-nav a {
    padding-right: 0;
    padding-left: 0;
  }
}

@media all and (max-width: 405px) {
  .site-nav ul {
    margin-left: -20px;
    margin-right: -10px;
  }
}

/* Footer band — replaces the two #bottom1/#bottom2 inline divs.
   Two stacked elements with z-index ordering match the original:
   orange band casts its shadow over the white spacer below it. */
.site-footer-band {
  height: 60px;
  background-color: var(--c-brand);
  box-shadow: var(--shadow-band);
  position: relative;
  z-index: 10;
}

.site-footer-spacer {
  height: 60px;
  background-color: #ffffff;
  position: relative;
  z-index: -50;
}

@media (min-width: 768px) {
  .site-footer-band,
  .site-footer-spacer {
    height: 96px;
  }
}

/* Pill link — replaces 3× duplication of the teal pill in cv/research/lectures.
   display: inline (not inline-block) matches the original anchor behavior:
   the background paints around text + tiny padding without creating a taller
   line box. inline-block would have added ~3px to apparent button height. */
.pill {
  display: inline;
  color: var(--c-accent-ink);
  background-color: var(--c-accent);
  border-radius: 10px;
  text-decoration: none;
  font-family: var(--f-button);
  font-size: 12px;
  padding: 1px 2px 2px;
  cursor: pointer;
  transition: 0.3s;
}

.pill:hover {
  color: #ffffff;
  box-shadow: 1px 1px 3px -1.5px black;
  text-decoration: none;
  padding: 2px 3px 3px;
}

#mainlectures .pill {
  padding: 1px 5px 2px;
}

#mainlectures .pill:hover {
  padding: 2px 5px 3px;
}

/* Year/label pill — replaces BS3 .label.label-default uses across cv/research/lectures.
   Bakes in the centering + padding + nowrap the original .label class provided on top
   of the per-page span styling. */
.label-year {
  display: inline-block;
  background-color: transparent;
  color: black;
  border-left: 2px solid black;
  border-radius: 2px;
  width: 100px;
  height: 25px;
  font-size: 14px;
  font-family: var(--f-serif);
  /* Prod year pill inherits bold from BS3 `.label { font-weight: 700 }`. */
  font-weight: 700;
  padding: 0.2em 0.6em 0.3em;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
}

/* CV PDF buttons — replaces the inline-styled .downloadcv anchors in cv.html */
.btn-pdf {
  display: inline-block;
  background-color: black;
  color: white;
  border: 8px solid black;
  text-decoration: none;
  font-family: var(--f-button);
  font-weight: 500;
  position: relative;
  bottom: -20px;
  margin-right: 10px;
}

.btn-pdf:hover {
  text-decoration: none;
  box-shadow: 2px 1px 5px -2px black;
  color: white;
}

/* Abstract disclosure — replaces BS3 modals on /research/ */
/* `display: contents` removes <details>'s own box: the summary becomes a
   direct inline child of <li.publist> (a pill in the row) and the body, when
   open, becomes a direct block child that flows below the row. Without this,
   the inline-block <details> kept the body inside its own box and opening it
   shifted the summary within a taller line box. */
details.abstract {
  display: contents;
}

details.abstract > summary {
  display: inline;
  color: var(--c-accent-ink);
  background-color: var(--c-accent);
  border-radius: 10px;
  text-decoration: none;
  font-size: 13px;
  /* Prod's `.abstracta` pad = 0 2px 1px 1px (height ~15). The earlier
     symmetric 1px 2px 2px made the abstract pill 2px taller than prod. */
  padding: 0 2px 1px 1px;
  cursor: pointer;
  list-style: none;
  transition: 0.3s;
}

details.abstract > summary::-webkit-details-marker {
  display: none;
}

details.abstract > summary:hover {
  color: #ffffff;
  box-shadow: 1px 1px 3px -1.5px black;
}

/* `[open]` is load-bearing: without it our class-based selector outweighs the
   UA's `details:not([open]) > *:not(summary){display:none}` and the body keeps
   rendering as a block child of an inline <details>, which splits the inline
   line box and forces any following pill anchors to wrap to a new line. */
details.abstract[open] > .abstract-body {
  display: block;
  margin-top: 12px;
  padding: 16px 20px;
  background-color: #fafafa;
  border-left: 3px solid var(--c-accent);
  border-radius: 4px;
  font-family: var(--f-serif);
  font-size: 14px;
  line-height: 1.6;
}