/* Site-specific overrides on top of the AcademicPages theme (main.css). */

/* Typeface as on sangmino.github.io: Helvetica for text, Helvetica Neue for headings and nav */
body,
.page__footer-copyright {
  font-family: Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.masthead__inner-wrap {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Light text weight (bold stays bold) and a slightly smaller type scale than the theme (16px / 18px) */
html {
  font-size: 15px;
}

@media (min-width: 48em) {
  html {
    font-size: 16px;
  }
}

body {
  font-weight: 300;
}

/* The theme uses "bolder", which on light text resolves to regular; pin bold to 700 */
b,
strong {
  font-weight: 700;
}

/* Links: teal as on sangmino.github.io, underline in the same color */
.page__content a:not(.btn),
.page__content a:visited:not(.btn) {
  color: #21758f;
  text-decoration-color: currentColor;
}

.page__content a:hover:not(.btn),
.page__content a:active:not(.btn) {
  color: #21758f;
  text-decoration-color: currentColor;
}

/* Top navigation: body-text color, link color on hover, indicator bar follows text color */
.greedy-nav .visible-links > li > a {
  color: inherit;
  transition: color 0.2s ease;
}

.greedy-nav .visible-links > li > a::before {
  background-color: currentColor;
}

.greedy-nav .visible-links > li > a:hover,
.greedy-nav .visible-links > li > a:focus {
  color: #21758f;
}

/* Site name: large and light, as on sangmino.github.io (24px, weight 200) */
.greedy-nav .visible-links li.masthead__menu-item--lg {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 24px;
  font-weight: 200;
}

/* Header and content share one centered column (the theme offsets .page to the right; this evens the padding)
   and the header rule spans only that column */
.masthead {
  border-bottom: none;
}

.greedy-nav {
  border-bottom: 1px solid #f2f3f3;
  padding-bottom: 0.5em;
}

@media (min-width: 68.75em) {
  .page,
  .masthead__menu {
    width: 83.0508474576%;
    float: right;
    padding-left: 2.1186440678%;
    padding-right: 19.0677966102%;
  }
}

/* Home page: photo and intro text side by side */
.intro-hero {
  display: flex;
  align-items: center;
  gap: 20px;
}

.intro-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  margin-top: -0.25rem;
}

.intro-copy p {
  margin: 0;
}

.intro-photo {
  width: 280px;
  max-width: 100%;
  height: auto;
  border-radius: 0.25rem;
}

/* Keep hyphenated names on one line */
.nowrap {
  white-space: nowrap;
}

/* Presentation line under each paper: slightly smaller than body text */
.presentations {
  font-size: 0.9em;
}

/* Collapsible abstracts */
details.abstract-box {
  margin-top: -1rem;
  margin-bottom: 0.5rem;
}

details.abstract-box > summary {
  font-weight: 500;
  cursor: pointer;
}

details.abstract-box[open] > summary {
  margin-bottom: 0.25rem;
}

details.abstract-box > div {
  text-align: justify;
  line-height: 1.5;
  font-size: 0.9em;
}

/* Phones: stack photo above text, let the nav wrap instead of overflowing */
@media (max-width: 600px) {
  .intro-hero {
    flex-direction: column;
    align-items: center;
  }

  .intro-copy {
    margin-top: 0;
  }

  .greedy-nav {
    min-width: 0;
  }

  .greedy-nav .visible-links {
    display: flex;
    flex-wrap: wrap;
  }

  .greedy-nav .visible-links li {
    display: block;
  }

  .greedy-nav .visible-links li:first-child {
    width: 100%;
  }

  .greedy-nav .visible-links a {
    margin: 0 1.25rem 0 0;
  }
}