@mixin major-section-title {
  text-transform: uppercase;
  letter-spacing: .05em;
  color: lighten($textColor, 50);
}

/* Maps and markers. Potentially not events-specific. */

[data-map-marker] {
  .map-marker-reference {
    display: inline-block;
    text-align: center;
    overflow: hidden;
    background: $primaryColor;
    color: white;
    padding: 0 .25em;
    font-size: 80%;
    margin: 0 .25rem;
    vertical-align: middle;
    opacity: .5;

    // It’s interactive.
    cursor: pointer;
  }
  &.map-marker-selected {
    .map-marker-reference {
      opacity: 1;
    }
  }
}

body.layout--home {
  section.events {
    margin-top: -3rem;

    article.event {
      box-sizing: border-box;
      margin: 0 -2rem 1rem -2rem;
      background: $lightBackgroundColor;
      padding: .5rem 0;

      @media screen and (min-width: $bigscreenBreakpoint) {
        padding: 0;
        display: flex;
        flex-flow: row nowrap;
        margin: 0 0 1rem -1.2rem;
      }

      > .summary, > .mini-map {
        flex-basis: 50%;
        box-sizing: border-box;
      }

      .summary {
        margin: 0 1rem 0 1.5rem;
      }

      header {
        .meta {
          .time {
            .separator {
              opacity: .5;
            }
          }
          > * {
            margin-right: 1em;
            white-space: nowrap;

            .icon {
              width: 1em;
              margin-right: .25em;
            }
          }
        }
      }
    }
  }
}

body.event-subpage, body.layout--event_landing {
  background: $lightBackgroundColor;

  > footer {
    margin-top: 1rem;
  }

  > main > header {
    margin-bottom: 1rem;

    h1.headline {
      font-weight: normal;
      margin-top: .6em;
      line-height: 1.2;
    }

    @media screen and (min-width: $bigscreenBreakpoint) {
      margin-bottom: 2rem;

      h1.headline {
        margin-top: .5rem;
        font-size: 280%;
      }
    }
  }

  main > .meta, main > header .entity .meta {
    .time .separator {
      opacity: .5;
      margin: 0 .05rem;
    }
  }

  ul[role=nav] {
    li.item-missing-page {
      opacity: .5;
    }
  }
}

.page-content {
  .accommodation-option, .sect1 {
    margin-right: -2rem;
    margin-left: -2rem;

    @media screen and (min-width: $bigscreenBreakpoint) {
      margin-right: 0;
      margin-left: 0;
    }
  }
}


body.layout--event_landing {
  > main {
    display: flex;
    flex-flow: column nowrap;
    position: relative;

    > header {
      margin-bottom: 0;
    }

    > .meta {
      margin-bottom: 2rem;
      font-size: 120%;

      display: flex;
      flex-flow: row wrap;

      > * {
        margin-right: 1rem;
      }
    }

    > .intro {
      font-size: 120%;
      margin-top: -2rem; // Compensates for meta’s bottom margin.
      margin-bottom: 2rem;
    }
  }

  > main.event-started {
    .main-nav > ul {
      // For started events, reverse sections
      flex-flow: column-reverse nowrap;

      @media screen and (min-width: $bigscreenBreakpoint) {
        // Negate the above to avoid clash below.
        flex-flow: row nowrap;
      }
    }
  }

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

    > ul {
      display: flex;
      flex-flow: column nowrap;

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

    > ul > li {
      $borderRadius: 1rem;
      $itemGapBase: $borderRadius;

      flex: 1;
      margin-top: 1rem;

      display: flex;
      flex-flow: column nowrap;

      > .title {
        @include major-section-title;
      }

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

      a, li.with-url .icon {
        color: $linkColor;
      }

      span {
        color: lighten($textColor, 0.5);
      }

      > ul {
        flex: 1;

        display: flex;
        flex-flow: column nowrap;

        > li {
          @include nmCard($bg: white);

          flex: 1;
          flex-basis: 50%;
          box-sizing: border-box;
          padding: .75rem 1rem;
          margin: #{$itemGapBase * 0.5} #{$itemGapBase * 1.5} #{$itemGapBase * 0.5} -#{$itemGapBase * 0.5};

          position: relative;
          text-shadow: 0 0 5px white;
          border-radius: $borderRadius;

          display: flex;
          flex-flow: column nowrap;
          align-items: stretch;

          > .title {
            flex: 1;
            margin-bottom: .5rem;

            .icon {
              width: 1.75em;
              text-align: right;
              margin-right: .5rem;
            }
          }

          > .detail-text {
            p:first-child {
              margin: 0;
            }
            p:not(:first-child) {
              display: none;
            }
          }

          &.nav-item-arrival {
            > .detail-include {
              .mini-map {
                filter: grayscale(1) contrast(0.3) brightness(1.5);
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                z-index: -1;
                overflow: hidden;
                border-radius: $borderRadius;
              }
            }
          }

          > a, > span, > .icon {
            font-size: 140%;
            font-weight: bold;
          }

          > ul {
            display: flex;
            flex-flow: row nowrap;
            overflow-x: auto;

            > li {
              margin-right: 1rem;
              white-space: nowrap;

              &:last-child {
                margin-right: 0;
              }
            }
          }
        }
      }
    }
  }
}


body.event-subpage {
  ul[role=nav] {
    li.item-missing-page {
      .title:after {
        content: "(TBA)";
        margin-left: .25rem;
        font-size: 80%;
      }
    }
  }

  > .map {
    margin-top: 2rem;
    height: 22rem;
    width: 100%;

    &.map-focused {
      box-shadow: rgba(black, 0.2) 0 0 2rem;
      background: white;
      position: fixed;
      margin-top: 0;
      height: 38vh;
      bottom: 0;
      z-index: 4;
    }
  }
  &.map-focused {
    padding-bottom: 38vh;
  }

  .page-body {
    .page-content {
      @include asciidoc-markup();

      h2 {
        font-size: 120%;
        font-weight: bold;
      }
      h3 {
        font-size: 110%;
        text-transform: uppercase;
        font-weight: normal;
      }

      > div.sect1 {
        padding: .75rem 1rem;
        background: white;
        margin-bottom: 1rem;

        > h2 {
          margin-top: 0;
        }
      }
    }
    .page-toc {
      h2 {
        font-size: 100%;
      }

      &.summoned {
        // This class can be toggled when in narrow viewport only
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        padding: 0 2rem;
        background: $lightBackgroundColor;
      }

      // Menus
      ul, li {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      li.selected span {
        font-weight: bold;

        &:after {
          content: "←";
          vertical-align: text-bottom;
          color: lighten($textColor, 40);
          font-size: 80%;
        }
      }
      > ul {
        > li {
          margin-bottom: .5rem;
          > .title {
            @include major-section-title;
          }
          > ul {
            padding: .5rem .75rem .5rem .5rem;
            margin-bottom: 1rem;
            margin-left: -.2rem;

            > li {
              > .title {
                font-size: 120%;
                .icon {
                  width: 1.5rem;
                  margin-right: .5rem;
                  text-align: right;
                  overflow: hidden;
                }
              }
              > ul {
                margin-left: 2rem;
              }
            }
          }
        }
      }
    }

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

      .page-toc {
        > .page-toc-title {
          display: none;
        }
        margin-right: 2rem;
      }
      .page-content {
        flex: 1;
      }
    }
  }

  div.place-list {
    > ul {
      padding: 0 0 0 1rem;

      > li {
        margin-bottom: 1rem;
        list-style: square;

        > p:first-child {
          margin-bottom: .5rem;
        }

        font-size: 80%;

        .title {
          font-size: 130%;
          font-weight: normal;
        }

        .quoteblock {
          padding: 0 .5rem .5rem 1rem;
          margin: 0 .5rem .5rem 0;
          position: relative;

          blockquote {
            margin-left: 1rem; 

            &:before {
              content: "“";
              z-index: -1;
              position: absolute;
              top: 0;
              left: 0;
              transform: translateX(-10%) translateY(-10%);
              color: $lightBackgroundColor;
              font-size: 10em;
              line-height: 1;
            }
          }
        }
      }
    }
  }
}

body.layout--event_accommodation, body.layout--event_places {
  .accommodation-option-list {
    .accommodation-option {
      box-sizing: border-box;
      margin-bottom: 1rem;
      position: relative;
      background: white;

      > * {
        margin-left: 1rem;
        margin-right: 1rem;
      }

      > header {
        padding-top: .75rem;
        margin-bottom: .5rem;

        .title {
          margin: 0;
          margin-right: 1rem;
        }
        .address {
          font-size: 80%;
        }
        .feature {
          position: absolute;
          top: 0;
          right: 2rem;
          transform-origin: center center;
          transform: translateY(-100%);

          @media screen and (min-width: $bigscreenBreakpoint) {
            right: auto;
            left: 0;
            transform: translateX(-50%) translateY(-50%) rotate(-90deg) translateY(-50%) translateX(-50%);
            border-radius: .5em .5em 0 0;
          }

          white-space: nowrap;
          font-size: 70%;
          text-transform: uppercase;
          letter-spacing: .07em;
          padding: .2em .5em .1em .5em;
          background: $primaryColor;
          color: white;
        }
      }
      > footer.actions {
        margin-left: 0;
        margin-right: 0;
        margin-top: 1rem;
        display: flex;
        flex-flow: row nowrap;
        overflow: hidden;

        .action {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          padding-left: .75rem;
          padding-right: .75rem;
          padding-top: .25rem;
          padding-bottom: .25rem;
          background: $primaryColor;
          color: white;
          font-weight: bold;

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

          &.disabled {
            background: lighten($textColor, 40);
            &.with-description {
              cursor: help;
            }
          }
        }
      }
    }
  }
}