/*
 * application.css
 */

/*
 * Helpers
 */

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



/*
 * Foundation
 */

@media all
{

  /* Document */

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

    cursor: default;

    background-color: var(--background_color);

    font-family: var(--font_sans_serif);
    font-weight: var(--font_weight_regular);
    text-align: left;
    text-rendering: optimizeLegibility;
    color: var(--color_black);
  }

  html
  {
    font-size: 62.5%;
  }

  body
  {
    font-size: var(--font_size);
  }


  /* Dividers */

  hr
  {
    display: none;
  }


  /* Headlines */

  h1,
  h2,
  h3,
  h4,
  h5,
  h6
  {
    display: block;

    margin: 0;
    padding: 0;

    font-weight: var(--font_weight_bold);

    a,
    a:link,
    a:visited
    {
      text-decoration: none;
    }
  }

  h2
  {
    font-size: 3.2rem;
  }

  h3
  {
    margin: 0 0 16px;
    font-size: 2.4rem;
  }

  h4
  {
    margin: 0 0 16px;
    font-size: 2rem;
  }

  h5,
  h6
  {
    margin: 16px 0 8px;
    font-size: 1.6rem;
  }


  /* Images */

  img
  {
    max-width: 100%;
  }


  /* Inline elements */

  strong,
  dl dt
  {
    font-weight: var(--font_weight_bold);
  }


  /* Links */

  a,
  a:link,
  a:visited
  {
    color: var(--color_primary);
    text-decoration: none;
  }

  /* Lists, paragraphs, typography */

  p,
  ul li,
  ol li,
  dl dt,
  dl dd,
  table tr th,
  table tr td
  {
    font-size: var(--font_size);
    line-height: var(--font_line_height);
  }

  ul li,
  ol li
  {
    line-height: calc(var(--font_line_height) + .2rem);
  }

  dl dt,
  table tr th
  {
    font-weight: var(--font_weight_bold);
  }

  nav ul,
  nav ol
  {
    margin: 0;
    padding: 0;

    list-style: none;

    a,
    a:link,
    a:visited
    {
      text-decoration: none;
    }
  }

} /* /MQ: all */



/* Screens */

@media screen
{

  html,
  body
  {
    color: var(--font_color);
  }

} /* /MQ screen */



/*
 * Typography
 */

ul.list-inline,
ol.list-inline,
.sub-navigation ul
{
  margin: 0;
  padding: 0;
  list-style: none;

  li
  {
    display: inline-block;
  }
}



/*
 * Wrapper
 */

@media screen
{
  /* Document */

  html,
  body
  {
    /* apply gray background to all screens (not to printers, etc.) */
    background-color: var(--color_gray_245);
  }

} /* /MQ: screen */


/* MQ xs */
@media screen
{

  body
  {
    padding-top: calc(71px + var(--mobile_navigation_height)); /* 59px is the height of the header section */

    &.has-news-banner
    {
      padding-top: calc(120px + var(--mobile_news_banner_height));
    }
  }

} /* /MQ xs */


/* MQ lg */
@media screen and (min-width: 992px)
{

  /* Document */

  body
  {
    padding: 180px 16px 16px;

    &.has-news-banner
    {
      padding-top: 200px;
    }
  }

} /* /MQ: lg */ /* @TODO: should be md? */


/* MQ lg */
@media screen and (min-width: 992px)
{

  body
  {
    padding-top: 200px;

    &.has-news-banner
    {
      padding-top: 240px;
    }
  }

} /* /MQ: lg */



/*
 * Header and Navigation
 */

/* MQ xs */
@media screen {

  /* Header */

  header
  {
    position: fixed;
    top: var(--mobile_navigation_height);
    left: 0;
    right: 0;
    z-index: 200;

    padding: 6px 0 4px;
    box-sizing: border-box;

    border-bottom: 1px solid var(--color_gray_230);

    background-color: var(--color_white);

    h1
    {
      a,
      a:link,
      a:visited
      {
        display: block;

        min-height: 48px;

        background-image: url("/assets/logo-34b2f1fa.jpg");
        background-position: top center;
        background-repeat: no-repeat;
        background-size: contain;

        text-indent: -9999rem;
      }

      a:hover,
      a:focus,
      a:active
      {
        outline: none;
      }
    }
  }


  /* Navigation */

  nav
  {
    display: none;

    position: fixed;
    top: var(--mobile_navigation_height);
    left: 0;
    right: 0;
    z-index: 300;

    box-sizing: border-box;
    padding: 16px;

    border-bottom: 1px solid var(--color_gray_230);

    background-color: var(--color_white);

    text-align: center;

    ul
    {
      margin: 0;
      padding: 0;
      list-style: none;

      li
      {
        display: block;
        margin-bottom: 12px;

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

        a,
        a:link,
        a:visited
        {
          display: inline-block;
          padding-bottom: 2px;

          border-bottom: 2px solid var(--color_white);
          transition: border-bottom-color .2s ease-out;

          font-size: 2.4rem;
          font-weight: var(--font_weight_medium);
        }

        a.active,
        a.active:link,
        a.active:visited
        {
          border-bottom-color: var(--color_secondary);
        } /* /a.active */

        a:hover,
        a:focus,
        a:active
        {
          border-bottom-color: var(--color_primary);
        } /* /a:hover */
      } /* /li */

      &.language-menu
      {
        margin-bottom: 32px;

        li
        {
          display: inline;

          &:first-child
          {
            margin-right: 6px;

            &::after
            {
              margin-left: 6px;
              content: '·';
              font-size: 3.2rem;
              font-weight: var(--font_weight_medium);
              color: var(--color_primary);
            }
          } /* /li:first-child */
        } /* /li */
      } /* /ul.language-menu */

    } /* /ul */

    .clearfix
    {
      display: none;
    }

  } /* /nav */


  a#navigation-toggle-button,
  a#navigation-toggle-button:link,
  a#navigation-toggle-button:visited
  {
    display: block;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 400;

    box-sizing: border-box;
    padding: 14px 16px 0;

    background-color: var(--color_white);

    font-size: 1.6rem;
    font-weight: var(--font_weight_medium);
    text-align: left;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color_primary);

    span
    {
      position: relative;
      top: -4px;
      left: 2px;
    }

    .hamburger-icon
    {
      display: inline-block;
      cursor: pointer;

      .bar-1,
      .bar-2,
      .bar-3
      {
        width: 17.5px;
        height: 2.5px;
        background-color: var(--color_primary);
        margin: 3px 0;
        transition: 0.4s;
      }

      /* Rotate first bar */
      &.open .bar-1
      {
        transform: translate(0, 5.5px) rotate(-45deg);
      }

      /* Fade out the second bar */
      &.open .bar-2
      {
        opacity: 0;
      }

      /* Rotate last bar */
      &.open .bar-3
      {
        transform: translate(0, -5.5px) rotate(45deg);
      }
    } /* /.hamburger-icon */
  } /* /#navigation-toggle-button */

  a#navigation-toggle-button.active,
  a#navigation-toggle-button.active:link,
  a#navigation-toggle-button.active:visited,
  a#navigation-toggle-button:hover,
  a#navigation-toggle-button:focus,
  a#navigation-toggle-button:active
  {
    color: var(--color_black);

    .hamburger-icon
    {
      .bar-1,
      .bar-2,
      .bar-3
      {
        background-color: var(--color_black);
      } /* /.bar-1,2,3 */
    } /* /.hamburger-icon */
  } /* /#navigation-toggle-button:hover */

} /* /MQ: xs */


/* MQ lg */
@media screen and (min-width: 992px) {

  /* Header */

  header
  {
    top: 0;

    padding: 16px 0 6px;

    h1
    {
      text-align: center;

      a,
      a:link,
      a:visited
      {
        width: 512px;
        height: 80px;

        margin: 0 auto;

        transform: scale(.95,.95);
        -ms-transform: scale(.95,.95);
        -moz-transform: scale(.95,.95);
        -webkit-transform: scale(.95,.95);
        transition: all .2s ease-out;
      }

      a:hover,
      a:focus,
      a:active
      {
        transform: scale(1,1);
        -ms-transform: scale(1,1);
        -moz-transform: scale(1,1);
        -webkit-transform: scale(1,1);
      } /* /a:hover */
    } /* /h1 */

  } /* /header */


  /* Navigation */

  header nav
  {
    display: block;

    position: static;
    top: auto;
    left: auto;
    right: auto;
    z-index: auto;

    width: 960px;
    margin: 0 auto;
    padding: 0;

    border-bottom: 0;

    ul
    {
      /* Main navigation */
      &.page-menu
      {
        float: left;
        margin: 4px 0 4px 1px;
        column-count: auto;
        -moz-column-count: auto;
        -webkit-column-count: auto;
      }

      /* Language switcher */
      &.language-menu
      {
        position: static;
        float: right;
        margin-right: 1px;
        margin-bottom: 0;

        li:first-child
        {
          margin-right: 0;

          &::after
          {
            display: none;
          }
        }

        li a,
        li a:link,
        li a:visited
        {
          margin: 4px 0 2px 16px;
          padding: 0 1px;
          border-bottom-width: 2px;
          font-size: 1.9rem;
        }
      }

      li
      {
        display: inline;
        margin-bottom: 0;

        a,
        a:link,
        a:visited
        {
          margin: 4px 24px 2px 0;
          padding: 0 1px;

          font-size: 1.9rem;
        } /* /a */

      } /* /li */

    } /* /ul */

    div.clearfix
    {
      display: block;
      clear: both;
    }

  } /* /nav */


  /* Completly hide the navigation toggle button on larger screens */
  a#navigation-toggle-button,
  a#navigation-toggle-button:link,
  a#navigation-toggle-button:visited
  {
    display: none;
  }

} /* /MQ: lg */ /* @TODO: Should this be md? */


@media screen and (min-width: 992px) {

  header
  {
    h1
    {
      margin: 16px auto 12px;
    }

    nav
    {
      padding-bottom: 4px;
    }
  } /* /header */

} /* /MQ: lg */



/*
 * Sub Navigation
 */

@media screen {

  .sub-navigation
  {
    padding: 16px;

    border: 1px solid var(--color_gray_230);

    background-color: rgba(255,255,255,.9);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    text-align: center;

    ul li
    {
      a,
      a:link,
      a:visited,
      span
      {
        display: inline-block;
        margin: 0 2px;
        padding: 2px 4px;

        font-size: calc(var(--font_size) + 1rem);
        font-weight: var(--font_weight_bold);
        line-height: calc(var(--font_size) + 1.5rem);
        text-align: center;
      }

      a:hover,
      a:focus,
      a:active
      {
        text-decoration: none;
        color: var(--color_black);
      }

      span.text-muted
      {
        opacity: .5;
        cursor: not-allowed;
      }
    }
  } /* /.sub-navigation */


  .sub-navigation-spacer {
    margin-top: 16px;
  } /* /.authors-grid */

} /* /MQ screen */


/* MQ lg */
@media screen and (min-width: 992px) {

  .sub-navigation {
    position: fixed;
    top: 175px;
    left: 0;
    right: 0;
    z-index: 400;

    border-width: 0 0 1px;

    .sub-navigation-content {
      width: 960px;
      margin: 0 auto;
    }

    ul {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: stretch;

      li {
        a,
        a:link,
        a:visited,
        span
        {
          font-size: calc(var(--font_size) + .5rem);
          line-height: calc(var(--font_size) + 1rem);
        } /* /a */

        &:first-child {
          a,
          a:link,
          a:visited,
          span
          {
            margin-left: 1px;
          } /* /li:first-child a */
        } /* /li:first-child */

        &:last-child {
          a,
          a:link,
          a:visited,
          span
          {
            margin-right: 1px;
          } /* /li:first-child a */
        } /* /li:first-child */
      } /* /li */
    } /* /ul */
  } /* /.sub-navigation */


  .sub-navigation-spacer {
    margin-top: 60px;
  } /* /.authors-grid */

} /* /MQ lg */ /* @TODO: Should this be md? */


/* MQ xl */
@media screen and (min-width: 1200px) {

  .sub-navigation {
    ul li
    {
      a,
      a:link,
      a:visited,
      span
      {
        font-size: calc(var(--font_size) + 1rem);
        line-height: calc(var(--font_size) + 1.5rem);
      } /* /a */
    } /* /ul li */
  } /* /.sub-navigation */


  .sub-navigation-spacer {
    margin-top: 70px;
  } /* .authors-grid */

} /* /MQ xl */



/*
 * Content Area
 */

@media screen
{

  main
  {
    h3
    {
      margin-top: 40px;

      &:nth-of-type(1)
      {
        margin-top: 0;
      }
    }

    p
    {
      &:nth-of-type(1)
      {
        margin-top: 0;
      }
    }

    a,
    a:link,
    a:visited
    {
      text-decoration: none;
    }

    a:hover,
    a:focus,
    a:active
    {
      text-decoration: underline;
      color: var(--color_black);
    }

  }


  .card-gray {
    box-sizing: border-box;
    margin-top: 70px;
    margin-bottom: 32px;
    padding: 12px 16px;
    border-radius: 4px;
    background-color: var(--color_gray_235);
  }

} /* /MQ screen */


/* MQ xs */
@media screen
{

  main
  {
    padding: 0 16px;
  }


  .author
  {
    .columns
    {
      figure.left-column
      {
        display: block;

        width: 320px;
        max-width: 320px;
        height: 320px;

        margin: 0 auto;
        padding: 0;

        figcaption
        {
          font-weight: var(--font_weight_regular);
          font-size: 1.2rem;
          text-align: right;
        } /* /figcaption */

      } /* /figure.left-column */

      h2
      {
        margin: 24px 0 8px;
        font-size: 3.2rem;
        text-align: center;
      } /* /h2 */

    } /* .columns */
  } /* /.author */


  .box
  {
    clear: left;
    margin-bottom: 24px;

    &:first-child
    {
      margin-top: 24px;
    }

    .box-image
    {
      margin: 0;

      img
      {
        float: left;
        max-width: 128px;
        margin: 0px 6px 2px 0;
        padding-top: 6px;
      }

      figcaption
      {
        text-align: right;
        font-size: 1.2rem;
      }
    }

    .box-text
    {
      box-sizing: border-box;

      h3
      {
        margin: 0 0 8px;
        font-size: 2.4rem;
      }
    }
  }

}


/* MQ lg */
@media screen and (min-width: 992px) {

  main
  {
    width: 960px;
    margin: 0 auto;
    padding: 0 4px;
  }


  /* Author Detail View */
  .author
  {
    h2
    {
      margin-bottom: 16px;
    }

    .columns
    {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: flex-start; /* could also be stretch */
      align-content: flex-start;

      figure.left-column
      {
        order: 1;
        width: 320px;
        box-sizing: border-box;
        padding-top: 3px;
        height: auto;
        margin: 0;
      } /* /.left-column */

      .right-column
      {
        order: 2;
        box-sizing: border-box;
        padding: 0 16px 0 24px;

        h2
        {
          margin: 0 0 12px -1px;
          text-align: left;
        }
      } /* /.right-column */

      figure
      {
        img
        {
          width: 320px;
          max-width: 320px;
          height: 320px;

          margin-top: 3px;
        }
      } /* /figure */

      p
      {
        margin: 0;
        padding: 0;
      } /* /p */
    } /* /.columns */
  } /* /.author */


  /* Team page */
  .box
  {
    clear: none;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
    align-content: center;

    text-align: left;

    .box-image
    {
      img
      {
        max-width: 256px;
        float: none;
        margin: 0;
        padding: 6px 0 0;
      }
    }

    .box-text
    {
      padding: 0px 0 0 20px;

      h3
      {
        margin: 0 0 8px;
      }
    }
  } /* /.box */

} /* /MQ: md */



/*
 * Grid
 */


@media screen
{

  .grid
  {
    width: var(--authors_grid_width_xs);

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    align-content: flex-start;

    .item
    {
      flex-basis: calc(100%/var(--authors_per_row_xs));
      line-height: .8;

      a,
      a:link,
      a:visited,
      span
      {
        display: block;
        margin: 0;
        box-sizing: border-box;
        font-size: var(--font_size_sm);

        img
        {
          width: auto;
          height: auto;
          border: 0;
          outline: 0;
        }

        strong
        {
          display: block;
          margin-top: 4px;
          text-align: center;
        } /* /strong */
      } /* /a */


      &.big-letter
      {
        span
        {
          padding-top: 1%;

          font-size: 9rem;
          font-weight: var(--font_weight_bold);
          color: var(--color_primary);

          text-align: center;
          line-height: 1;
        }
      } /* /.big-letter */

    } /* /.item */
  } /* /.grid */


  /* Customization for ..authors-grid */
  .authors-grid
  {
    margin-top: 2rem;

    .item
    {
      a,
      a:link,
      a:visited,
      span
      {
        padding-bottom: 16px;
        line-height: 1.4rem;
      } /* /a */
    } /* /.item */
  } /* /.authors-grid */


  /* Customization for .books-grid */
  .books-grid
  {
    width: var(--books_grid_width_xs);

    .item
    {
      a,
      a:link,
      a:visited,
      span
      {
        margin: 0;

        img
        {
          width: 200px;
          height: auto;
        } /* /img */
      } /* /a */

      a:hover,
      a:active,
      a:focus,
      span:hover
      {
        outline: none;
      } /* a:hover */

    } /* /.item */

  } /* /.grid */

} /* /MQ screen */


/* MQ sm */
@media screen and (min-width: 576px)
{

  .grid .item.big-letter span
  {
    padding-top: 12%;
    font-size: 14rem;
  } /* /.big-letter */

} /* /MQ sm */


/* MQ lg */
@media screen and (min-width: 992px) {

  .grid
  {
    width: var(--authors_grid_width);

    .item
    {
      flex-basis: calc(100%/var(--authors_per_row));
      font-size: var(--font_size);
      line-height: normal;

      a,
      a:link,
      a:visited,
      span
      {
        margin: 0 var(--authors_grid_col_spacer) var(--authors_grid_row_spacer) 0;

        img
        {
          /* @TODO: Verify if this works */
          width: calc(var(--authors_internal_grid_width) / calc(var(--authors_per_row))) - var(--authors_grid_col_spacer); /* 222px */
          height: calc(var(--authors_internal_grid_width) / calc(var(--authors_per_row))) - var(--authors_grid_col_spacer); /* 222px */
        } /* /img */
      } /* /a */

    } /* /.item */

  } /* /.grid */


  /* Customization for ..authors-grid */
  .authors-grid
  {
    margin-top: 7rem;

    .item
    {
      a,
      a:link,
      a:visited,
      span
      {
        padding-bottom: 0;
        font-size: var(--font_size);
        line-height: var(--font_line_height);
      } /* /a */
    } /* /.item */
  } /* /.authors-grid */


  .books-grid
  {
    width: var(--books_grid_width);

    .item
    {
      a,
      a:link,
      a:visited,
      span
      {
        margin: 0 var(--books_grid_col_spacer) var(--books_grid_row_spacer) 0;

        img
        {
          width: 200px;
          height: 320px;
        } /* /img */
      } /* /a */
    } /* /.item */
  } /* /.books-grid */

} /* /MQ lg */



/*
 * Author Image
 */

figure.author-image
{
  margin: 0;
  padding: 0;

  img
  {
    width: 256px;
  }

  figcaption
  {
    font-size: 1.2rem;
  }
}



/*
 * Footer
 */

/* MQ xs */
@media screen {

  footer
  {
    padding: 20px 16px 16px;
    text-align: center;

    ul
    {
      margin: 0;
      padding: 0;
      list-style: none;

      li
      {
        display: inline;
        line-height: calc(var(--footer_text_size) + var(--font_line_height_addend));

        a,
        a:link,
        a:visited,
        span
        {
          display: inline-block;
          margin: 0 5px;
          padding: 0 1px;

          transition: all .2s ease-out;

          border-bottom: 1px solid transparent;

          font-size: var(--footer_text_size);
          text-decoration: none;
          color: var(--footer_text_color);

          &.active
          {
            color: var(--footer_text_hover_color);
          }
        } /* /a */

        a:hover,
        a:focus,
        a:active,
        span:hover
        {
          border-bottom-color: var(--footer_text_hover_color);
          color: var(--footer_text_hover_color);
        } /* /a:hover */

      } /* /li */
    } /* /ul */
  } /* /footer */

} /* /MQ: xs */


/* MQ md */
@media screen and (min-width: 768px)
{
  footer
  {
    padding: 32px 0 0;
  }
}