// general styles
//----------------
//
// mods on fonts and typography
// not in foundation variables
// -----------------------------

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6,
button,.button,
header nav {
  font-variant:all-small-caps;
  a {
    color: $body-font-color;
  }
}


/* https://fontawesome.com/v5.0/icons */
a[href$=".pdf"]:after {
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      line-height: 1;
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      margin-left: .5rem;
      content: "\f1c1";
}

.excerpt,.post-excerpt{
  a {
    color: $body-font-color;
    &:hover {
      p {
        color: $anchor-color;
      }
    }
  }
}

//
// main block
//--------------


main {
  article {
    @include xy-grid;
    header {
      @include xy-cell(12);
      .entry-title {
        width: 100%;
        text-align: center;
      }
    }
    section {
      padding: $global-padding $global-padding*2;
    }
    .entry-content,.omekas-entry-content {
      @include breakpoint(small){
        @include xy-cell(12);
        padding: $global-padding*2 $global-padding/2 ;
        margin:0 auto;
      }
      @include breakpoint(medium){
        @include xy-cell(12);
        padding: $global-padding*2 $global-padding*3;
        max-width: 50rem;
        margin:0 auto;
      }
      @include breakpoint(xlarge){
        @include xy-cell(12);
        max-width: 50rem;
        padding: $global-padding*2 $global-padding*3;
        font-size: $global-font-size*1.2;
        margin: 0 auto;
      }
    }
  }
}



//
// .index max-width
//--------------
.index {
  .entry-content,.omekas-entry-content {
    @include breakpoint(small){
    }
    @include breakpoint(medium){
      max-width: unset;
    }
    @include breakpoint(xlarge){
      max-width: unset;
    }
    @include breakpoint(xxlarge){
      max-width: 60 rem;
    }
  }
}

//
//
// .contain selector for max-width
//--------------
.contain-width {
    .entry-content,.omekas-entry-content {
      @include breakpoint(small){
      }
      @include breakpoint(medium){
        max-width: 50rem;
      }
      @include breakpoint(xlarge){
//        max-width: 50rem;
      }
    }
}


//
// news category
//--------------

.news,.news-category {
  @include xy-grid;
  header,main,aside {
    @include breakpoint(small){
      padding-top: 0;
      @include xy-cell(12);
      @include flex;
      @include flex-align(center,top);
      padding-top: $global-padding*3;
      h3 {
        line-height: $global-lineheight/1.5;
      }
    }
  }
  main {
    //@include xy-cell(12);
    @include xy-grid;
    article{
      text-align:center;
      @include card-container();
      @include breakpoint(small){
        @include xy-cell(12);
      }
      @include breakpoint(medium){
        @include xy-cell(6);
      }
      @include breakpoint(large){
        @include xy-cell(4);
      }
      figure {
        @include breakpoint(small){
          @include xy-cell(12);
          height: 58vw;
          max-width: 100%;
          overflow: hidden;
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
        }
        @include breakpoint(medium){
          height: 28vw;
        }
        @include breakpoint(large){
          height: 20vw;
        }
      }
      .date {
        // height: 1rem;
        padding-top: $global-padding*2;
      }
      .entry-title {
        padding-top: $global-padding*2;
        line-height: 0.7;
        font-size: $global-font-size*1.5;
      }

    }
  }
  aside {
    @include breakpoint(small){
      padding-top:0;
      padding-bottom: $global-padding*3;
    }
    @include breakpoint(medium){
      padding-top:$global-padding*3;
      padding-bottom: 0;

    }
  }
}
// end news category


//
// collections category
//--------------

.collections-list {
  @include xy-grid;
  padding:0;
  header,main{
    @include xy-cell(12);
    @include flex;
    @include flex-align(center,top);
  }
  header {
    display: none;
  }
  main {
    @include xy-grid;
    padding: 0;
    margin: 0;
    article {
      @include breakpoint(small){
        @include card-container();
        @include xy-cell();
        width: 100%;
        padding: 0;
        margin: 0;
        font-size: $global-font-size*0.7;
      }
      @include breakpoint(medium){
        font-size: $global-font-size*1;
      }
      @include breakpoint(large){
      }
    }
  }
  .load_more {
    display:flex;
    flex-direction: column;
    align-items: center;
  }
  .accordion-item {
    &:not(.title).is-active {
      background-color:$input-background;
    }
   }
   .accordion-item.title li {
   //  @include xy-cell(3);
   //  @include xy-cell-offset(0);
  //}
   }
  .accordion-title {
    &.title {
      @include breakpoint(small){
        li {
          @include xy-cell(3);
          @include xy-cell-offset(0);
          &.title,&.curator,&.collection-name,&.date {
            &::before {content: none;}
          }
        }
      }
    }
    &:not(.title) {
      @include breakpoint(small){
       li {
            &.title, 
            &.curator,
            &.collection-name,
            &.date {
              @include xy-cell(10);
              @include xy-cell-offset(2);
              min-height: 1rem;
              &::before {
                display: inline-block;
                color: $medium-gray;
                //font-size: $accordion-title-font-size;
                position: absolute;
                left:0;
              }
            }
            &.title::before {content:"Title";} 
            &.curator::before  {content:"Artist";} 
            &.collection-name::before  {content:"Collection";}
            &.date::before  {content:"Date";}
        }
      }
      @include breakpoint(medium){
        li {
          &.title, 
          &.curator,
          &.collection-name,
          &.date {
            min-height:unset;
            &::before {
              content: none;
            }
          }
          &.title::before {content:"";} 
          &.curator::before  {content:"";} 
          &.collection-name::before  {content:"";}
          &.date::before  {content:"";}
          &.title {
            @include xy-cell(4);
          }
          &.curator {
            @include xy-cell(4);
          }
          &.collection-name {
            @include xy-cell(2);
          }
          &.date {
            @include xy-cell(shrink);
            margin-left: auto; //aligns to right
          }
        }
      }
    }
  }
  .accordion-content {
    padding-top: 0;
    section {
      @include xy-grid;
      padding-top: 0;
      padding-bottom: 0;
      @include breakpoint(small){
        figure {
          @include xy-cell(12);
          margin-left:0;
          margin-right:0;
        }
        p {
          @include xy-cell(12);
          position: relative;
          padding: $global-padding;
          padding-bottom: $global-padding * 3;
          .button {
            position:absolute;
            right:0;
            margin-top: $global-padding * 3;
          }
        }
      }
      @include breakpoint(medium){
        figure {
          @include xy-cell(4);
          margin-left: 0;
        }
        p {
          @include xy-cell(8);
        }
      }
      @include breakpoint(large){
      }
    }
  }
}
// end collections category

// partners
// for big announcemnts
//---------------------

.partners {
  .entry-content {
    max-width: unset;
    p {
      padding-left: 30vw;
      padding-bottom: 2rem;
      margin-bottom: 2rem;
      &:after {
        content: '';
        display: inline-block;
        border-bottom: 1px solid $body-font-color;
        width: 100vw;
        position: absolute;
        left: 0;
        padding-top: 2rem;
      }
    }
    .alignleft {
      margin: 0;
      padding: 0;
    }
    .wp-block-image {
      margin: 0;
    }
  }
}

//
// hero
// for big announcemnts
//---------------------


.hero {
  border-top: 2px solid $primary-color;
  .slides {
    @include xy-grid();
    .slide {
      @include xy-grid;
      @include breakpoint(small){
        width: 100vw;
        overflow: hidden;
        padding: 0;
        margin: 0;
        justify-content: center;
        color: $white;
        .textwidget {
        }
      }
      @include breakpoint(medium){
        .textwidget {
          max-width: 50rem;
          margin:auto;
          padding: $global-padding * 2;
          font-size: $global-font-size*1.3;
        }
      }
      @include breakpoint(large){
        width: 50%;
        height: calc((50vw*9)/16);
        //padding: 0;
        //margin: 0;
        //overflow:hidden;
        a {
          @include flex;
          @include flex-align (center,middle);
        }
        img {
          //  max-width: unset !important;
          height: 100% !important;
        }
        .textwidget {
          font-size: $global-font-size*1.2;
          padding: $global-padding * 2;
        }
      }
      @include breakpoint(xlarge){
        .textwidget {
          font-size: $global-font-size*1.3;
          padding: $global-padding*3;
        }
      }
      @include breakpoint(xxlarge){
        .textwidget {
          font-size: $global-font-size*1.6;
          padding: $global-padding*3;
        }
      }
      &:first-child {
        background-color: $primary-color;
        font-variant:all-small-caps;
      }

      .logo {
        @include breakpoint(medium){
          max-width: 80%;
        }
      }
    }
  }
  aside {
    @include xy-grid();
    background-color: $secondary-color;
    nav {
      @include xy-cell(auto);
      @include flex;
      @include flex-align(spaced,middle);
      @include breakpoint(small) {
        flex-direction: column;
        min-height: unset;
        padding: $global-padding;
        .menu, .menu.horizontal {
          justify-content: center;
        }
      }
      @include breakpoint(large) {
        flex-direction: row;
        min-height: $global-padding * 6;
        padding: $global-padding 0 ;
        .menu, .menu.horizontal {
          justify-content: unset;
        }
      }
      a {
        color: $body-font-color;
      }
      .button {
        justify-content:center;
      }
    }
  }
  //hero secondary
  &.secondary {
    border-top: none;
    background-color: $secondary-color;
    .slide{
      figure {
        background-color: unset;
      }
    }
  }
  &.omeka {
    border-top: none;
    max-height: unset;
    @include breakpoint(small){
      .slides {
        background-color: $secondary-color;
        .slide {
          flex-direction: column;
          align-content: center;
          align-self: center;
          margin: $global-margin auto;
          &:first-child {
            color: unset;
            background-color: unset;
            font-variant:all-small-caps;
          }
          figure {
            margin: 0 auto;
            display:flex;
            justify-content: center;
          }
        }
      }
    }
    aside {
      background-color: $white;
      flex-direction: column;
      align-items: center;
      h2 {
        margin: $global-margin;
      }
    }
  }
  &.collections-all {

  }
  &.collection-single {
    .slides{
      background-color: unset;
      .slide {
      margin:0 auto;
      height: unset;
      width: 100vw;
      max-height: 10rem;
      @include breakpoint(large){
        height: unset;
      }
      img,.arc-page-header-img {
        background-repeat: no-repeat;
        background-size: contain;
        width: 100vw;
      }
    }
    }
    aside {
      nav {
        width: 100vw;
        border-top: $global-border-archive;
        border-bottom: $global-border-archive;
        margin: 0;
      }
    }
  }
}
//end hero