@charset 'utf-8';


body {
  background: var(--color-white);
}

/* ----------------------------------------------------------------------------
 * SITE HEADER & SUB-HEADER
 * ------------------------------------------------------------------------- */
#header {
  position: sticky;
  top: 0;
  transition: all 500ms ease-in-out;
  z-index: 1000;
  background-color: var(--color-white);
  color: var(--color-deep-dark-grey);

  &.scroll-up,
  &:focus-within {
    top: 0;
  }

  &.scroll-down {
    top: -100%;
  }

  &.sticky {
    background: rgba(255, 255, 255, 1);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    -webkit-box-shadow: 0 0 21.5px 15.5px #00000014;
    -moz-box-shadow: 0 0 21.5px 15.5px #00000014;
    box-shadow: 0 0 21.5px 15.5px #00000014;

    .website-logo img {
      height: 70px;
      width: auto;
    }
  }

  .inside {
    max-width: var(--global-width);
    margin-inline: auto;
    padding-inline: var(--gutter-size);

    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    column-gap: var(--gutter-size);
  }
}

#subheader {
  h1, h2 {
    letter-spacing: calc(var(--tracking-down-1) + 0.055ch);

    &.color-primary {
      font-weight: 800 !important;
      display: inline;
      white-space: break-spaces;
    }
    &.color-medium-grey {
      font-weight: 300 !important;
    }
  }
}


/* ----------------------------------------------------------------------------
 * Website Logo
 * ------------------------------------------------------------------------- */
.website-logo {
  flex-basis: 200px;
  flex-grow: 1;
  flex-shrink: 0;
  padding: 5px 0;

  figure a {
    display: block;
    background-color: transparent;
  }
}


/* ----------------------------------------------------------------------------
 * Main Navigation
 * ------------------------------------------------------------------------- */
.main-nav {
  display: none;

  @media (width >= 400px) {
    display: flex;
    flex-grow: 2;
    justify-content: space-between;
    flex-shrink: 2;
  }

  .level_1 {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    gap: var(--gutter-size);
    justify-content: flex-end;
  }

  /*a:is(:link, :visited) {*/
  /*  color: var(--color-secondary);*/
  /*  text-decoration: none;*/
  /*  background:*/
  /*    linear-gradient(to right, transparent, transparent),*/
  /*    linear-gradient(to right, var(--color-primary), var(--color-accent1), var(--color-primary));*/
  /*  background-size: 100% .3ex, 0 .3ex;*/
  /*  background-position: 100% 100%, 0 100%;*/
  /*  background-repeat: no-repeat;*/
  /*  transition: background-size 400ms;*/
  /*}*/
  /*a:is(:hover, :active, :focus) {*/
  /*  color: var(--color-accent2);*/
  /*  background-size: 0 .3ex, 100% .3ex;*/
  /*}*/
}


/* ----------------------------------------------------------------------------
 * Mobile Navigation
 * ------------------------------------------------------------------------- */
.mm-page {
  background: var(--color-white);
}

.mm-wrapper_blocking {
  overflow: initial;
}

.mm-toggler__container {
  display: flex;
  align-items: baseline;

  @media (400px <= width) {
    display: none;
  }

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

  a:is(:hover, :active, :focus) {
    color: var(--color-secondary);

  }
}


/* ----------------------------------------------------------------------------
 * BREADCRUMB MODULE
 * ------------------------------------------------------------------------- */
.mod_breadcrumb {
  font-size: 0.87rem;
  font-weight: 500;

  ul {
    display: flex;
    flex-flow: row wrap;
    padding: 0;

    li {
      flex: none;
      align-self: auto;

      &:not(.active):not(:first-of-type) {
        &:after {
          content: ' // ';
          width: 10px;
          height: 10px;
          margin: 0 5px;
          color: var(--color-medium-grey);
        }
      }

      a {
        text-decoration: none;
      }

      &:first-of-type {
        margin-inline-end: 5px;
      }

      &.active {
        color: var(--color-primary);
      }
    }
  }
}


/* ----------------------------------------------------------------------------
 * MAIN CONTENT
 * ------------------------------------------------------------------------- */
#container {
  overflow: hidden;
  background-color: var(--color-white);
}

#main .inside {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  margin-block-end: var(--space-xl);

  .mod_article:first-of-type {
    --flow-space: 0;
  }
}


/* ----------------------------------------------------------------------------
 * ARTICLE
 * ------------------------------------------------------------------------- */
.mod_article {
  margin-inline: auto;
  max-width: var(--global-width);
  padding-inline: var(--gutter-size);

  /*
   * Set a default margin-top for all articles
   * can be overwritten individually by adding the class .mt-0
   * or globally by commenting the following line
   */
  margin-block-start: var(--flow-space, 12rem);
  margin-block-end: var(--flow-space, 12rem);

  &.full-width {
    overflow: hidden;
    max-width: 100%;
    padding-inline: 0;
  }

  &.narrow {
    max-width: 58em;
  }

  &.narrower {
    max-width: 42em;
  }
}


/* ----------------------------------------------------------------------------
 * SITE FOOTER
 * ------------------------------------------------------------------------- */

#footer {
  background: var(--color-light-grey);
  padding-block-start: 4rem;

  .top-link {
    width: 40px;
    height: 40px;
    top: calc(-4rem - (40px / 2));
    position: relative;
    background-color: var(--color-primary);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: center;
    text-decoration: none;

    svg {
      stroke: var(--color-white);
    }
  }

  /*a:is(:link, :visited) {*/
  /*  color: #fff;*/
  /*}*/
  a:is(:hover, :active, :focus) {
    color: var(--color-primary);
  }

  .content {
    overflow: hidden;
    margin-inline: auto;
    display: flex;
    justify-content: center;
    gap: var(--gutter-size);
    flex-wrap: wrap;
    padding-bottom: var(--space-s);

    & > * {
      flex-basis: 300px;
      text-align: center;
    }
  }

  .binder {
    overflow: hidden;
    padding-bottom: var(--space-s);
    text-align: center;
    background: var(--color-black);
  }

}