/*!****************************************************************************************************************************************************************************************!*\
  !*** 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'] {
  align-items: center;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-block: var(--flow-space);
}

:is(:is([name='Header'] .navbar) > .menubar)  > li > a:not([class*='button']) {
        font-weight: var(--fw-semibold);
      }

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

.is-transparent[name='Header'] {
    background-color: transparent;
    margin-block-start: 0;
  }

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

[name='Header'] .logo {
    display: block;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

[name='Header'] .logo-default {
    position: relative;
    z-index: 1;
  }

[name='Header'] .logo-dark,[name='Header'] .logo-light {
    left: 0;
    position: absolute;
    top: 0;
    z-index: 2;
  }

@media screen and (width < 1024px) {

[name='Header'] .logo-dark,[name='Header'] .logo-light {
      width: 250px;
  }
    }

.is-logo-default[name='Header'] .logo-default {
    opacity: 1;
  }

.is-logo-dark[name='Header'] .logo-dark {
    opacity: 1;
  }

.is-logo-light[name='Header'] .logo-light {
    opacity: 1;
  }

:is(:is(.is-text-dark[name='Header'] .navbar) > .menubar)  > li > a:not([class*='button']) {
          color: var(--clr-grey-dark);
        }

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

:is(:is(.is-text-light[name='Header'] .navbar) > .menubar)  > li > a:not([class*='button']) {
          color: var(--clr-white) !important;
        }

:is(:is(:is(.is-text-light[name='Header'] .navbar) > .menubar) > li > a:not([class*='button'])):hover {
            color: var(--clr-secondary) !important;
          }

:is([data-header-position='scrolled'] [name='Header']) .logo-default {
      opacity: 1;
    }

:is([data-header-position='scrolled'] [name='Header']) .logo-dark {
      opacity: 0;
    }

:is([data-header-position='scrolled'] [name='Header']) .logo-light {
      opacity: 0;
    }

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

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

.is-text-default[name='Header']  > a {
      color: var(--clr-white);
    }

[name='Header'] [name='MainNavigation'] {
    grid-column: span 2;
    justify-self: end;
  }

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

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

    [name='Header'] .logo-wrapper {
      grid-column: span 3;
    }

    [name='Header'] [name='MainNavigation'] {
      grid-column: span 9;
    }
  }


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