/*!****************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./components/static/Header/style.css ***!
  \****************************************************************************************************************************************************************************************/
/**
 * Custom Media Queries
 * Works like Custom Properties, except for media queries.
 *
 * @link: https://drafts.csswg.org/mediaqueries-5/#custom-mq
 * @link: https://github.com/postcss/postcss-custom-media
 **/

/* Min-Width */

/* Customize based on project */

/* Max-Width */

/* Customize based on project */

/* Min-Max-Width */

[name='Header'] {
  --clr-shadow: transparent;

  align-items: center;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
  padding-block: 16px;
  width: 100%;
}

[name='Header']:not([data-is-transparent='true']) {
    --clr-shadow: var(--clr-white);
  }

[name='Header'][data-is-transparent='true'] {
    --clr-shadow: transparent;
  }

[name='Header']::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    background-color: var(--clr-shadow);
    z-index: -2;
  }

[name='Header']:has( > .link-wrapper [name="BurgerMenu"][aria-expanded="true"]){
    --clr-shadow: var(--clr-white);
  }

@media screen and (width >= 1024px) {

[name='Header'] {
    padding-block: 24px;
    grid-template-columns: repeat(12, 1fr)
}
  }

[name='Header'] .logo-wrapper {
    grid-column: span 2;
    grid-row: 1;
    position: relative;
    height: 58px;
  }

[name='Header'] .link-wrapper {
    grid-column: 3 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 40px;
  }

@media screen and (width < 375px) {

[name='Header'] .link-wrapper {
      justify-content: flex-start
  }
    }

@media screen and (width < 1024px) {

[name='Header'] .link-wrapper {
      gap: 8px
  }

      [name='Header'] .link-wrapper .contact-link {
        padding-inline-end: 0;
      }
    }

[name='Header'] .logo {
    display: inline-block;
    width: min(100%, 160px);
  }

@media screen and (width >= 1024px) {

[name='Header'] .logo {
      width: min(100%, 225px)
  }
    }

/* Stack top/scrolled logos and cross-fade by state */

/* Keep top logo in normal flow to maintain header height;
     place scrolled logo absolutely on top for cross-fade */

[name='Header'] .logo--top {
    position: relative;
    z-index: 1;
    opacity: 1;
    transition: opacity var(--transition-duration)
      var(--transition-timing-function);
  }

[name='Header'] .logo--scrolled {
    position: absolute;
    inset: 0 auto auto 0;
    z-index: 2;
    opacity: 0;
    transition: opacity var(--transition-duration)
      var(--transition-timing-function);
  }

[name='Header'] .call-to-action {
    display: none;

    --color: var(--clr-text);
  }

[data-brand='systems'] [name='Header'] .call-to-action,
    [data-brand='industry'] [name='Header'] .call-to-action {
      --color: var(--clr-white);
    }

[name='Header'] .call-to-action:hover,
    [name='Header'] .call-to-action:focus-visible {
      --color: var(--clr-white);
    }

@media screen and (width >= 1024px) {

[name='Header'] .call-to-action {
      display: inline-flex
  }
    }

[name='Header'] .call-to-action[data-color='one'] {
      --bg-color: var(--bg-one);
      --clr-border: var(--bg-color);
      --color: var(--clr-white);
    }

[name='Header'] .call-to-action[data-color='one']:hover,
      [name='Header'] .call-to-action[data-color='one']:focus-visible {
        --bg-color: var(--clr-text);
      }

[name='Header'] .call-to-action[data-color='two'] {
      --bg-color: var(--bg-two);
      --color: var(--clr-white);
    }

[name='Header'] .call-to-action[data-color='two']:hover,
      [name='Header'] .call-to-action[data-color='two']:focus-visible {
        --bg-color: var(--clr-text);
      }

[name='Header'] .call-to-action[data-color='three'] {
      --bg-color: var(--bg-three);
      --color: var(--clr-white);
    }

[name='Header'] .call-to-action[data-color='three']:hover,
      [name='Header'] .call-to-action[data-color='three']:focus-visible {
        --bg-color: var(--clr-text);
      }

[name='Header'] .call-to-action[data-color='four'] {
      --bg-color: var(--bg-four);
      --color: var(--clr-white);
    }

[name='Header'] .call-to-action[data-color='four']:hover,
      [name='Header'] .call-to-action[data-color='four']:focus-visible {
        --bg-color: var(--clr-text);
      }

[name='Header'] .call-to-action[data-color='five'] {
      --bg-color: var(--bg-five);
      --color: var(--clr-white);
    }

[name='Header'] .call-to-action[data-color='five']:hover,
      [name='Header'] .call-to-action[data-color='five']:focus-visible {
        --bg-color: var(--clr-text);
      }

[name='Header'] .call-to-action[data-color='six'] {
      --bg-color: var(--clr-black);
      --color: var(--clr-white);
    }

[name='Header'] .call-to-action[data-color='six']:hover,
      [name='Header'] .call-to-action[data-color='six']:focus-visible {
        --bg-color: var(--clr-primary);
        --color: var(--clr-black);
      }

[name='Header'] .contact-link:focus-visible {
      outline: 1px solid var(--clr-text);
      outline-offset: 2px;
    }

@media screen and (width < 1024px) {
      [name='Header'] .contact-link .text {
        display: none;
      }
    }

/* When header is scrolled: hide top, show scrolled */

.main-header[data-header-position='scrolled'] [name='Header'] .logo--scrolled {
      opacity: 1;
    }

.main-header[data-header-position='scrolled'] [name='Header'] .logo--top:has(+ .logo--scrolled) {
        opacity: 0;
      }

/* Text color control based on component data attribute */

[name='Header'][data-text='light'],
  [name='Header'][data-text='light'] a:not([class*='button']) {
    color: var(--clr-white);
  }

[name='Header'][data-text='dark'],
  [name='Header'][data-text='dark'] a:not([class*='button']) {
    color: var(--clr-text);
  }

[data-header-position='scrolled'] [name='Header'] .navbar > .menubar > li > a:not([class*='button']):hover {
            color: var(--clr-secondary);
          }

[data-header-position='scrolled'] [name='Header'] [name='Header'] {
      --clr-shadow: var(--clr-white);
    }

[data-header-position='default'] [name='Header'][data-top-text='light'] {
    color: var(--clr-white);
  }

[data-header-position='default'] [name='Header'][data-top-text='light'] .contact-link {
      color: var(--clr-white);
    }

[data-header-position='default'] [name='Header'][data-top-text='light'] [name='BurgerMenu'] span:not(.text) {
      background-color: var(--clr-white);
    }

[data-header-position='default'] [name='Header'][data-top-text='light'] [name='LanguageSwitch'] .trigger {
        color: var(--clr-white);
      }


/*# sourceMappingURL=style.min.css.map*/