/*
 * Site-specific additions layered on top of the Split theme (loaded via
 * the theme's own supported "Custom CSS" hook — params.custom.css.enable
 * in hugo.toml — rather than overriding the theme's compiled split.scss).
 *
 * The Split theme ships no header, footer, or nav out of the box (it's a
 * one/two-section landing layout). These rules add the site header (logo
 * placeholder, top-left) and footer (copyright) the wider site plan
 * requires, using the theme's own color and font values rather than a new
 * visual style:
 *   background   #0B1C2F   ($color-background in the theme's split.scss)
 *   name/accent  #47BEC7   ($color-name)
 *   text         #848D96   ($color-text / $color-link)
 *   credit/muted #485462   ($color-credit)
 *   link hover   #CA486d   ($color-link-hover)
 *   headings     Inter, sans-serif
 *   body copy    Lora, sans-serif
 */

.site-header {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 35vw;
  z-index: 10;
}

.site-header__logo-link {
  display: inline-block;
  line-height: 0;
}

.site-header__logo {
  display: block;
}

/*
 * Above 991px, the theme's own .rightcontent padding (120px on every
 * side, from _content.scss) puts more empty space between the left
 * image and the text than we want. Cut just the left side by ~30%
 * twice over (120px -> 84px -> 59px) rather than touching the
 * theme's default on the other three sides.
 */
@media screen and (min-width: 992px) {
  .rightcontent {
    padding-left: 80px;
  }

  /*
   * .site-header is a fixed 35vw-wide x full-height box. Letting the
   * <img> size itself from width:auto/height:100vh (its native
   * behavior, following the intrinsic 986x1885 ratio) doesn't match
   * the box's own aspect ratio, so the previous attempt at clamping
   * width separately via max-width caused the browser to distort
   * (stretch/squish) the image to fit rather than crop it. Fill the
   * box exactly (100%/100%) and use object-fit: cover so the image
   * is scaled uniformly with no distortion and center-cropped
   * (object-position 50% 50%) to whatever doesn't fit.
   */
  .site-header {
    height: 100vh;
    overflow: hidden;
  }

  .site-header__logo-link {
    display: block;
    width: 100%;
    height: 100%;
  }

  .site-header__logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
  }

  /*
   * .leftcontent (the .site-header's image sits fixed/independent of
   * this box) reserves 50% of the row via .w-col-6, and .rightcontent
   * (flex: 1, flex-basis 0%, from _content.scss) auto-expands to fill
   * whatever .leftcontent doesn't claim. Most of the gap between the
   * image and the text comes from this unused reserved width rather
   * than .rightcontent's own padding, so pull the text leftward by
   * shrinking .leftcontent's width instead: 30% off (50% -> 35%).
   * The image itself is unaffected since it's positioned fixed to the
   * viewport, not relative to .leftcontent's box.
   */
  .leftcontent {
    width: 35%;
  }
}

.site-footer {
  margin-top: 40px;
  color: #485462;
  font-family: Lora, sans-serif;
  font-size: 13px;
}

.site-footer a {
  color: #485462;
  border-bottom: 1px solid #485462;
  text-decoration: none;
}

.site-footer a:hover {
  color: #ca486d;
  border-bottom-color: #ca486d;
}

.publications-list {
  padding-left: 20px;
}

.publications-list li {
  margin-bottom: 40px;
}

.publications-list li:last-child {
  margin-bottom: 0;
}

/*
 * Below the theme's $bp-smallish breakpoint (991px), the page stacks into
 * a single column, so the fixed-position left pane above no longer has
 * empty space to sit in and overlaps the stacked text instead. Below
 * 991px the logo becomes a normal top banner: flush with the top of the
 * viewport, matching the text column's own left/right padding at each
 * breakpoint. The <picture> in header.html swaps in the wider
 * lmtopbar_mullin.jpg for this range, shown at its full native aspect
 * ratio (no cropping) at 100% of the text column's width.
 */
@media screen and (max-width: 991px) {
  .site-header {
    position: static;
    width: 100%;
    box-sizing: border-box;
    padding: 0 120px;
    height: auto;
    max-width: none;
  }

  .site-header__logo-link {
    display: block;
    width: 100%;
  }

  .site-header__logo {
    display: block;
    width: 100%;
    height: auto;
  }
}

@media screen and (max-width: 767px) {
  .site-header {
    padding: 0 60px;
  }
}

@media screen and (max-width: 479px) {
  .site-header {
    padding: 0 30px;
  }
}

/*
 * Simple single-column layout (see baseof.html's `.Params.image` branch):
 * a single centered column at every screen width, image on top at the
 * same width as the text column below it, flush with the top of the
 * viewport (no top gutter). Left/right padding is 15vw above the theme's
 * own $bp-smallish breakpoint (991px) and 8vw at or below it; bottom
 * padding otherwise mirrors the theme's own .rightcontent rhythm
 * (120px / 60px / 30px) at its existing breakpoints.
 */
.simple-page {
  box-sizing: border-box;
  padding: 0 15vw 120px;
}

.simple-page__image {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 40px;
}

@media screen and (max-width: 991px) {
  .simple-page {
    padding-left: 8vw;
    padding-right: 8vw;
  }
}

@media screen and (max-width: 767px) {
  .simple-page {
    padding-bottom: 60px;
  }
}

@media screen and (max-width: 479px) {
  .simple-page {
    padding-bottom: 30px;
  }
}

ol.publications-list {
  margin-bottom: 2em;
  li a {
    color: #aebac6;
  }
}

hr.pre-links {
  margin-bottom: 2em;
  color: #6f767e;
  background-color: #6f767e;
  border: 0;
  height: 1px;
}

h3.text-block {
  color: #6f767e;
}