@mixin nmCard(
  $bg: #efeeee,
  $shadowLight: rgba(white, 0.5),
  $shadowDark: rgba(#d1cdc7, 0.5)
) {
  background: $bg;
  box-shadow:
    -6px -6px 16px $shadowLight,
    6px 6px 16px $shadowDark;
}

@mixin wideContainer() {
  margin: 0 2em;

  @media screen and (min-width: $bigscreenBreakpoint) {
    width: $bigscreenBreakpoint - 100px;
    margin: 0 auto;
  }
  @media screen and (min-width: $widescreenBreakpoint) {
    width: $widescreenBreakpoint - 100px;
    margin: 0 auto;
  }
}



body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

a {
  &:link, &:visited {
    color: inherit;
    text-decoration: none;

    main &, aside & {
      color: $linkColor;

      &:hover {
        text-decoration: underline;
      }

      &.anchor-link {
        opacity: 0.2;
        font-size: 80%;
        margin-left: .5em;

        &:hover {
          opacity: 1;
        }
      }
    }
  }
}

table {
  border-collapse: collapse;
  margin-bottom: 10px;
  width: 100%;

  td, th {
    padding: 6px;
    text-align: left;
  }
  th {
    border-bottom: 1px solid $borderColor2;
  }
  tbody tr:nth-child(even) {
    background-color: $borderColor1;
  }
}

body {
  display: flex;
  flex-flow: column nowrap;
  min-height: 100vh;
}

body > main,
body > .with-aside {
  @include wideContainer();
  flex: 1;
}


body main,
body > header,
body main > header {
  > .entity {
    $entityGrey: lighten($textColor, 40);

    margin: 0;
    color: $entityGrey;
    font-weight: normal;
    display: flex;
    flex-flow: row wrap;
    align-items: center;

    > * {
      white-space: nowrap;
    }
    > .meta {
      overflow: hidden;
      text-overflow: ellipsis;

      @media screen and (min-width: $bigscreenBreakpoint) {
        &:hover {
          flex-shrink: 0;
        }
      }
    }

    @media screen and (min-width: $bigscreenBreakpoint) {
      flex-flow: row nowrap;
      .type, .meta {
        margin-right: .25rem;
      }
    }

    .id, .name {
      margin-right: 1em;
      margin-bottom: .25em;

      // Entity name could be a link, if it’s an entity subpage.
      &, &:link, &:visited {
        color: inherit;
      }
    }
    .type, .meta {
      font-size: .8rem;
      padding: .4em .8em;
      margin-top: .05rem;
      margin-bottom: .25rem;
    }
    .type {
      text-transform: uppercase;
      letter-spacing: .04em;
      font-weight: bold;

      background: $primaryColor;
      color: white;
    }
    .meta {
      background: $entityGrey;
      color: white;
      flex: 100%;

      .icon:first-child {
        width: 1.25em;
        margin-right: .25em;
        text-align: center;
        overflow: hidden;
      }

      @media screen and (min-width: $bigscreenBreakpoint) {
        flex: unset;
      }
    }
  }
  > .headline {
    margin-top: 0;
    font-size: 160%;
  }
}
body > header, body > main > header {
  margin-bottom: 3em;
}

main {
  > section {
    margin-bottom: 3em;
  }
}

body > .with-aside {
  @media screen and (max-width: $bigscreenBreakpoint) {
    main {
      margin-bottom: 3em;
    }
  }

  aside {
    ul, li {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    li {
      border-bottom: 1px solid $borderColor1;
      padding-bottom: .7em;
      margin-bottom: .7em;
      font-size: 90%;

      a {
        color: $linkColor;
      }
      &:last-child {
        border-bottom: 0;
        padding-bottom: 0;
        margin-bottom: 0;
      }
      &.active {
        font-weight: bold;
        position: relative;

        &:before {
          position: absolute;
          left: -2em;
          top: -.15em;
          content: "→";
          display: block;
        }
      }
    }

    section {
      margin-bottom: 2em;

      > .title {
        letter-spacing: .1em;
      }
      ul li {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    section.tags {
      font-size: 90%;

      ul {
        display: flex;
        flex-flow: row wrap;
      }
      li {
        padding: .2em .6em;
        border-radius: 1em;
        border: 1px solid $borderColor1;
        margin-right: .5em;
        margin-bottom: .5em;
      }
    }
  }

  @media screen and (min-width: $bigscreenBreakpoint) {
    display: flex;
    flex-flow: row nowrap;

    aside {
      flex-basis: 12rem;
      min-width: 12rem;
      flex: 0;
      margin-left: 3vw;
      border-left: 1px solid $borderColor1;
      padding-left: 5vw;
    }
  }
  @media screen and (min-width: $widescreenBreakpoint) {
    aside {
      flex-basis: 18rem;
      min-width: 18rem;
    }
  }
}


header.top-bar {
  background-color: $primaryColor;
  color: white;

  margin-bottom: 3em;

  > .container {
    @include wideContainer();

    height: $headerH / 1.7;
    margin-right: 0;

    @media screen and (min-width: $bigscreenBreakpoint) {
      @include wideContainer();
      height: $headerH;
    }

    display: flex;
    flex-flow: row nowrap;
    align-items: center;
  }

  a, a:link, a:visited {
    color: inherit;
  }

  .org-name {
    display: none;

    @media screen and (min-width: $bigscreenBreakpoint) {
      display: inline;
    }
  }

  .iso-logo {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    margin-left: -.7em;

    img {
      display: block;

      // White on primary color
      -webkit-filter: invert(1);
      filter: invert(1);

      height: $logoSide / 1.5;
      width: $logoSide / 1.5;

      @media screen and (min-width: $bigscreenBreakpoint) {
        height: $logoSide;
        width: $logoSide;
      }
    }
  }

  h1 {
    flex: 1;
    margin: 0;
    white-space: nowrap;
    font-size: 135%;
  }

  ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .priority-nav {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    align-self: stretch;
    font-size: 90%;
    letter-spacing: .02em;
    overflow-x: auto;
    margin-left: 1em;

    li {
      display: flex;
      white-space: nowrap;
      flex-flow: column nowrap;
      justify-content: center;

      &.featured-event {
        .title {
          border: .1rem white solid;
          border-radius: .5rem;
          margin: 0 .5em;
          padding: .5em;
        }
      }

      a, span {
        text-transform: uppercase;
        padding: 0 .4em;

        @media screen and (min-width: $bigscreenBreakpoint) {
          padding: 1em .7em;
        }
        @media screen and (min-width: $widescreenBreakpoint) {
          padding: 1em 1.4em;
        }
      }
      &.selected {
        background-color: rgba(white, 0.2);
      }
    }
  }
}

body > footer {
  margin-top: 4em;

  display: flex;
  flex-flow: column nowrap;
  font-size: 90%;

  background: $lightBackgroundColor;

  > .container {
    @include wideContainer();
  }

  ul, li {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .row1 {
    border-bottom: 1px solid $borderColor2;

    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    position: relative;

    @media screen and (min-width: $bigscreenBreakpoint) {
      flex-flow: row nowrap;
    }

    .logo {
      margin-left: -.7em;
      position: relative;
      z-index: 2;

      img {
        height: $logoSide;
        width: $logoSide;
      }
    }

    .links {
      display: flex;
      flex-flow: row wrap;
      flex: 1;

      @media screen and (min-width: $bigscreenBreakpoint) {
        flex-flow: row nowrap;
        justify-content: center;
        position: absolute;
        left: 0;
        right: 0;
        text-align: center;
        z-index: 1;
      }

      > * {
        margin: 0 .5em;
      }
    }

    .powered-by {
      display: flex;
      flex-flow: column nowrap;

      @media screen and (min-width: $bigscreenBreakpoint) {
        flex-flow: row nowrap;
      }

      position: relative;
      z-index: 2;

      .powered-by__text {
        margin-right: .5em;
      }

      img {
        height: 1.2em;
        vertical-align: text-bottom;
      }
    }
  }

  .row2 {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;

    padding: 1em 0;

    .copyright {
      flex: 1;
      white-space: nowrap;
    }

    .social-links {
      display: flex;
      flex-flow: row nowrap;

      > * {
        margin-left: .5em;
      }
    }
  }
}


@mixin with-dropcap() {
  > p:first-child::first-letter {
    font-size: 3.2em;
    float: left;
    margin-top: -.1rem;
    margin-right: .4rem;
    line-height: 1;
    font-weight: bold;
    font-family: Georgia, serif;
    color: $primaryColor;
  }
}


$itemPicW: 14em / 2;
$itemPicH: 16rem / 2;

@mixin itemCard($picW, $picH) {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;

  &.item-card--no-pic {
    .item-text {
      padding-bottom: .5rem;
    }
  }

  .item-pic {
    flex-grow: 0;
    flex-shrink: 0;

    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;

    width: $picW;
    height: $picH;
    overflow: hidden;

    margin-right: 1rem;
  }

  .item-text {
    padding-top: 0;

    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    overflow: hidden;

    p, h3, h4 {
      &:first-child {
        margin-top: 0;
      }
    }
  }
}

@mixin itemList($compact: 0) {
  @if $compact == 1 {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;

  } @else {
    @media screen and (min-width: $bigscreenBreakpoint) {
      display: flex;
      flex-flow: row wrap;
      justify-content: flex-start;
    }
  }

  .item-card {
    margin: 0 .5rem .5rem 0;
    overflow: hidden;

    @if $compact == 1 {
      @include itemCard($itemPicW / 2, $itemPicH / 2);

    } @else {
      @include itemCard($itemPicW, $itemPicH);

      @media screen and (min-width: $bigscreenBreakpoint) {
        flex-grow: 0;
        flex-shrink: 0;
        flex-basis: 30%;
      }
    }
  }
}