// Modifiers

// error page

.error-site-html {
  height: 100%;
}

.error-site {
  &.debugging-disabled {
    position: relative;
    background-color: #00b4ff;
    color: #003470;
    height: 100%;
  }

  .error-site-outer {
    position: relative;
    display: flex;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }

  .error-site-container {
    text-align: center;
  }

  .error-code {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-size: 12rem;
    line-height: 1.2;
    font-weight: bold;
    margin-bottom: 1.5rem;
  }

  .error-icon {
    margin-right: 1rem;

    svg {
      vertical-align: baseline;
      transform: rotate(90deg);
    }
  }

  .error-message {
    font-size: 3rem;
    margin-bottom: 1.8rem;
  }

  .error-info {
    font-size: 2rem;
    margin-bottom: 3rem;
  }

  .page-header {
    margin-top: $neoteric-grid-gutter;
  }
}

.error-background {
  position: fixed;
  bottom: 0;
  left: 0;
  padding-top: 50px;
  right: 0;
  top: 0;
  z-index: 1;

  .x1 {
    -webkit-animation: animateCloud 35s linear infinite;
    -moz-animation: animateCloud 35s linear infinite;
    animation: animateCloud 35s linear infinite;

    -webkit-transform: scale(0.65);
    -moz-transform: scale(0.65);
    transform: scale(0.65);
  }

  .x2 {
    -webkit-animation: animateCloud 20s linear infinite;
    -moz-animation: animateCloud 20s linear infinite;
    animation: animateCloud 20s linear infinite;

    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    transform: scale(0.3);
  }

  .x3 {
    -webkit-animation: animateCloud 30s linear infinite;
    -moz-animation: animateCloud 30s linear infinite;
    animation: animateCloud 30s linear infinite;

    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    transform: scale(0.5);
  }

  .x4 {
    -webkit-animation: animateCloud 18s linear infinite;
    -moz-animation: animateCloud 18s linear infinite;
    animation: animateCloud 18s linear infinite;

    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    transform: scale(0.4);
  }

  .x5 {
    -webkit-animation: animateCloud 25s linear infinite;
    -moz-animation: animateCloud 25s linear infinite;
    animation: animateCloud 25s linear infinite;

    -webkit-transform: scale(0.55);
    -moz-transform: scale(0.55);
    transform: scale(0.55);
  }

  /* OBJECTS */

  .cloud {
    background: #fff;
    background: -moz-linear-gradient(top, #fff 5%, #f1f1f1 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #fff), color-stop(100%, #f1f1f1));
    background: -webkit-linear-gradient(top, #fff 5%, #f1f1f1 100%);
    background: -o-linear-gradient(top, #fff 5%, #f1f1f1 100%);
    background: -ms-linear-gradient(top, #fff 5%, #f1f1f1 100%);
    background: linear-gradient(top, #fff 5%, #f1f1f1 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#f1f1f1', GradientType=0);

    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;

    -webkit-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 5px rgba(0, 0, 0, 0.1);

    height: 120px;
    position: relative;
    width: 350px;
  }

  .cloud:after,
  .cloud:before {
    background: #fff;
    content: '';
    position: absolute;
    z-indeX: 1;
  }

  .cloud:after {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;

    height: 100px;
    left: 50px;
    top: -50px;
    width: 100px;
  }

  .cloud:before {
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;

    width: 180px;
    height: 180px;
    right: 50px;
    top: -90px;
  }
}

/* KEYFRAMES */
@-webkit-keyframes animateCloud {
  0% {
    margin-left: -1000px;
  }

  100% {
    margin-left: 100%;
  }
}

@-moz-keyframes animateCloud {
  0% {
    margin-left: -1000px;
  }

  100% {
    margin-left: 100%;
  }
}

@keyframes animateCloud {
  0% {
    margin-left: -1000px;
  }

  100% {
    margin-left: 100%;
  }
}

// com_modules
[class^="container-"],
[class*=" container-"] {
  .span-col-2 {
    flex: 0 0 50%;
    max-width: calc(50% - #{$neoteric-grid-gutter});
  }

  .span-col-3 {
    flex: 0 0 33.333%;
    max-width: calc(33.333% - #{$neoteric-grid-gutter});
  }

  .span-col-4 {
    flex: 0 0 25%;
    max-width: calc(25% - #{$neoteric-grid-gutter});
  }
}

@supports (display: grid) {

  [class^="span-"],
  [class*=" span-"] {
    grid-column-end: auto;
    grid-row-end: auto;
  }

  [class^="span-col"],
  [class*=" span-col"] {
    @include media-breakpoint-up(md) {
      grid-column-end: span 2;
    }
  }

  @include media-breakpoint-up(lg) {
    .span-col-2 {
      grid-column-end: span 2;
    }

    .span-col-3 {
      grid-column-end: span 3;
    }

    .span-col-4 {
      grid-column-end: span 4;
    }

    .span-row-2 {
      grid-row-end: span 2;
    }

    .span-row-3 {
      grid-row-end: span 3;
    }

    .span-row-4 {
      grid-row-end: span 4;
    }
  }

  [class^="container-"],
  [class*=" container-"] {

    [class^="span-"],
    [class*=" span-"] {
      flex: 0 1 auto;
      max-width: none;
    }
  }
}

// com_content
.blog-items {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0;
  margin-right: -($neoteric-grid-gutter * .5);
  margin-bottom: $neoteric-grid-gutter;
  margin-left: -($neoteric-grid-gutter * .5);

  @include media-breakpoint-up(lg) {
    &.columns-2 {
      >div {
        width: 50%;
      }
    }

    &.columns-3 {
      >div {
        width: 33.33333%;
      }
    }

    &.columns-4 {
      >div {
        width: 25%;
      }
    }
  }
}

.blog-item {
  display: flex;
  flex-direction: column;
  padding: 0 ($neoteric-grid-gutter * .5) $neoteric-grid-gutter;
  overflow: hidden;

  .boxed & {
    background-color: $white;
    box-shadow: 0 0 2px hsla(216, 13%, 23%, .1), 0 2px 5px hsla(216, 13%, 23%, .08), 0 5px 15px hsla(216, 13%, 23%, .08), inset 0 3px 0 var(--neoteric-color-primary);

    .item-content {
      padding: 25px;
    }
  }

  .item-image {
    margin-top: 3px;
    margin-bottom: 15px;
    overflow: hidden;

    .boxed & {
      margin-bottom: 0;
    }

    @include media-breakpoint-up(lg) {
      .image-right & {
        order: 1;
      }
    }

    .image-bottom & {
      margin-top: -15px;
      order: 1;
    }
  }

  .item-content {
    .image-left & {
      padding-left: 25px;
    }

    .image-right & {
      padding-right: 25px;
    }
  }

  .image-left &,
  .image-right & {
    flex-direction: column;

    @include media-breakpoint-up(lg) {
      flex-direction: row;

      .item-image {
        flex: 1 0 40%;
      }

      .item-content {
        flex: 1 0 60%;
      }
    }
  }
}

.article-info {
  dd {
    padding: 0;
  }
}

@supports (display: grid) {
  .blog-items {
    display: grid;
    margin: 0 0 $neoteric-grid-gutter;
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-gap: $neoteric-grid-gutter;

    .blog-item {
      padding: 0;
    }

    &[class^="columns-"],
    &[class*=" columns-"] {
      >div {
        flex: 0 1 auto;
        width: auto;
        max-width: none;
      }
    }

    @include media-breakpoint-up(lg) {
      &.columns-2 {
        grid-template-columns: 1fr 1fr;
      }

      &.columns-3 {
        grid-template-columns: 1fr 1fr 1fr;
      }

      &.columns-4 {
        grid-template-columns: 1fr 1fr 1fr 1fr;
      }
    }
  }
}

.blog-items {

  &[class^="masonry-"],
  &[class*=" masonry-"] {
    display: block;
    column-gap: $neoteric-grid-gutter;

    .blog-item {
      display: inline-flex;
      margin-bottom: $neoteric-grid-gutter;
      page-break-inside: avoid;
      break-inside: avoid;
    }
  }

  @include media-breakpoint-up(lg) {
    &.masonry-2 {
      column-count: 2;
    }

    &.masonry-3 {
      column-count: 3;
    }

    &.masonry-4 {
      column-count: 4;
    }
  }
}

.image-alternate {
  .blog-item:nth-of-type(2n+1) {
    .item-image {
      order: 0;
    }
  }

  &.image-left {
    .blog-item:nth-of-type(2n+1) {
      .item-image {
        margin-right: 0;
        margin-left: 25px;
        order: 1;
      }
    }
  }

  &.image-top {
    .blog-item:nth-of-type(2n+1) {
      .item-image {
        order: 1;
      }
    }
  }
}

// Modules

.breadcrumb {
  margin-bottom: 0;
  background-color: hsla(0, 0%, 0%, .03);
}

.no-card {
  .newsflash-horiz {
    li {
      padding: 0 1rem 1rem;
      border: 1px solid $gray-300;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      @include border-bottom-start-radius($border-radius);
      @include border-bottom-end-radius($border-radius);
      box-shadow: $neoteric-box-shadow;

      figure {
        margin: 0 -1rem 1rem;
      }
    }
  }
}

.mod-list {
  padding-inline-start: 0;
  list-style: none;
  margin-bottom: 0;

  li {
    padding: .5em 0;

    &:first-child {
      padding-top: 0;
    }

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

    a {
      text-decoration: none;

      &:hover {
        @at-root .container-header & {
          text-decoration: none;
        }
      }
    }

    &.active>a {
      @at-root .container-header & {
        text-decoration: none;
      }
    }

    .mod-menu__sub {
      padding-left: $neoteric-grid-gutter;
    }
  }
}

aside {
  .mod-vmcategory-menu--level-1 {
    &>.mod-vmcategory-menu--item-anchor {
      text-transform: none;
    }
  }
}

.top-bar-content {
  line-height: 1;
  text-transform: uppercase;

  p,
  ul {
    margin: 0;
  }

  .mod-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;

    li {
      padding: 0;

      .mod-menu__sub {
        display: none;
      }
    }

    a {
      display: block;
      padding: 0.5rem 0;
    }

    p {
      padding: 0.5rem 0;
    }
  }
}

.footer-area {
  font-size: 0.9rem;
  text-transform: uppercase;

  p,
  ul {
    margin: 0;
  }

  .mod-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.8rem;

    li {
      padding: 0;

      .mod-menu__sub {
        display: none;
      }
    }

    a {
      display: block;
      padding: 0.25rem 0;
    }
  }
}

.pagination {
  --pagination-active-color: var(--template-primary-contrast-color);
  --pagination-active-bg: var(--template-primary-color);
  --pagination-active-border-color: var(--template-primary-color);
  --pagination-padding-x: 1rem;
  --pagination-padding-y: 0.5rem;
  --pagination-focus-box-shadow: none;
}

body.com-finder>*+* {
    margin-top: initial;
}