@import "defaults.css";

/* HEADER / FOOTER */

  header, footer {
    position: fixed;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    z-index: 3;
  }

  footer {
    bottom: 0;
    height: var(--bottom-margin);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  header > div {
    margin: var(--site-margin) var(--inner-margin) 0 var(--inner-margin);
  }

  .corner-letter {
    z-index: 5;
    width: var(--letter-size);
    height: var(--letter-size);
    position: fixed
  }

  .corner-letter.bl {
    bottom: var(--site-margin);
    left: var(--site-margin)
  }

  .corner-letter.br {
    bottom: var(--site-margin);
    right: var(--site-margin);
    transform: scaleX(-1);
  }

  .corner-letter.tl {
    top: var(--site-margin);
    left: var(--site-margin)
  }

  .corner-letter.tr {
    top: var(--site-margin);
    right: var(--site-margin)
  }

  #lang-switch {
    position: absolute;
    z-index: 4;
    top: calc( var(--site-margin) + var(--letter-size) );
    right: var(--site-margin);
    width: var(--letter-size);
    font-size: var(--subhead-text-size);
    text-transform: uppercase;
    font-style: italic;
    color: var(--grijs);
    text-align: center;
  }

  #lang-switch span {
    display: none;
  }

  .site-title, #main-nav, #sub-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .site-title {
    height: var(--letter-size);
  }

  .site-title p {
    margin: 0;
    text-transform: uppercase;
    text-align: center
  }

  /* NAVIGATION */

    /* SOCIAL */

      #main-nav, #sub-nav {
        height: var(--circle-size-tiny);
        margin-bottom: calc(var(--site-margin) * 4);
      }

      #social-nav {
        bottom: 0;
        display: flex;
      }

      #social-nav img {
        max-height: 100%;
        width: 20px;
        margin: 0 calc(var(--site-margin) / 2)
      }

    /* MAIN */

      #main-nav {
        flex-wrap: wrap;
        text-align: center;
        color: var(--grijs);
      }

      #main-nav a {
        text-transform: uppercase;
        font-size: var(--head-text-size);
      }

      body:not(.level-0) #main-nav a:not(.active) {
        display: none;
      }

      body:not(.level-0) #main-nav a::before,
      body:not(.level-0) #main-nav a::after {
        content: "•";
        margin: 0 .5rem;
        color: var(--grijs);
      }

      body.level-0 #main-nav a::before,
      body.level-0 #main-nav a:last-child::after {
        content: "•";
        margin: 0 .5rem;
      }

    /* SUB */

      #sub-nav .bullet {
        font-size:2.2rem;
        color: var(--roze)
      }

      #sub-nav .circle-image  {
        display: block;
      }

      #sub-nav > * {
        margin: 0 calc(var(--site-margin) * 1.5);
      }

/* HOME */

  #home {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: absolute;
    z-index: -1;
  }

  /* CALENDAR */

    #home-calendar {
      display: flex;
      position: fixed;
      align-items: end;
      text-transform: uppercase;
      color: var(--grijs);
      bottom: calc( var(--inner-margin) + var(--site-margin) );
    }

    #home-calendar article:not(:first-child) {
      display: none;
    }

    #home-calendar *,
    #article-grid * {
      margin: 0
    }

    #home-calendar article {
      color: var(--roze)
    }

    #home-calendar section {
      margin-left: var(--site-margin)
    }

  /* BALL */

    #home > nav {
      position: fixed;
      top: calc(52% - (var(--circle-size-large) / 2));
      width: var(--circle-size-small);
      display:flex;
      justify-content: space-evenly;
      z-index: 2
    }

    #home > section article img {
      width: var(--inner-width);
    }

    #home > section article {
      display: flex;
      align-items: center;
    }

    .carousel {
      height: 100%;
      width: 100%
    }

    .carousel-cell {
      height: 100%
    }

    .flickity-page-dots {
      top: calc(50vh - (var(--inner-width) / 2) + 2vh);
      height: var(--dot-size);
      padding: var(--dot-size) 0;
    }

    .flickity-page-dots .dot {
      opacity: 1;
      background-color: transparent;
      border: 1px solid white;
      width: var(--dot-size);
      height: var(--dot-size);
      margin: 0 calc( var(--dot-size) * 0.8 );
    }

    .flickity-page-dots .dot.is-selected {
      background-color: var(--grijs);
    }

/* LIST / GRID */

  #article-grid {
    padding: calc(var(--letter-size) + var(--circle-size-tiny) + calc( var(--site-margin) * 5 ))
             var(--inner-margin);

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: var(--site-margin);
    grid-row-gap: var(--site-margin);

    text-align: center;
    text-transform: uppercase;
  }

  #article-grid article a {
    display: flex;
    flex-direction: column;
    height: 205px;
  }

  #article-grid article img,
  #article-grid article div {
    border-radius: 50%;
    object-fit: cover;
    align-self: center;
  }

  #article-grid article h1 {
    font-size: var(--head-text-size);
    margin-top: .5vw;
  }

  #article-grid article p {
    color: var(--roze);
    font-size: var(--subhead-text-size)
  }

  #article-grid img,
  #article-grid article div {
    width: var(--circle-size-medium);
    height: var(--circle-size-medium);
  }

/* DETAIL */

  #article-detail {
    display: flex;
    justify-content: center;
  }

  #article-detail > article {
    width: var(--inner-width);
    padding:  calc(calc(var(--site-margin) * 10) + calc( var(--circle-size-tiny) * 2 ) + var(--letter-size))
              0
              calc(var(--inner-margin) + var(--letter-size))
              0;
  }

  #article-detail > article section {
    overflow-x: auto;
  }

  #article-detail > article aside {
    text-align: center;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--site-margin);
  }

  #article-detail > article aside h1 {
    font-size: var(--head-text-size)
  }

  #article-detail > article aside > picture > img {
    width: var(--circle-size-medium);
    height: var(--circle-size-medium);
    margin-right: var(--site-margin);
  }

  #article-detail > article aside p {
    color: var(--roze);
    font-size: var(--subhead-text-size);
    margin: 0;
  }

  #article-detail > article aside h1 {
    margin: 0;
  }

  #article-detail > article aside > div {
    flex-grow: 1;
    margin-left: var(--site-margin);
  }

  #article-detail > article section a {
    text-transform: uppercase;
    color: var(--roze)
  }

  #article-detail > article aside div > a:last-child {
    color: var(--roze) !important;
  }

  #article-detail > article section > p:first-child {
    margin-top: 0
  }

  #article-detail > article aside .bullet,
  #article-detail > article aside a {
    display: block;
    font-size: var(--subhead-text-size);
    color: var(--grijs)
  }

  #article-detail .calendar {
    display: none;
  }

/* CALENDAR PAGE */

  #calendar nav {
    position: fixed;
    z-index: 4;
    top: calc( var(--top-margin) + var(--circle-size-tiny) );
    width: var(--inner-width);
    background: rgba(255, 255, 255, 0.95);
    text-transform: uppercase;
    text-align: center;
    padding: 0 var(--inner-margin);
  }

  #calendar table, #calendar tbody, #calendar tr, #calendar td {
    display: block;
  }

  #calendar table {
    padding:  calc(var(--top-margin) + ( var(--circle-size-tiny) * 3 ))
              var(--inner-margin)
              var(--bottom-margin)
              var(--inner-margin);
  }

  #calendar thead {
    display: none;
  }

  #calendar td:last-child {
    padding-bottom: var(--site-margin);
  }

  #calendar tr {
    border-bottom: 1px dashed var(--grijs);
    margin-bottom: calc( var(--site-margin) * 3 );
  }