/*!***********************
*****     header     *****
*************************/

@layer component {
  @scope ([data-component-id$=":header"]) {
    :scope {
      /*--_header-height: calc(75px + var(--sp-4) + var(--sp-4));*/
      --_header-menu-height: 100px;
      --_header-speed: var(--speed-500);

      /*height: var(--_header-height);*/

      position: relative;
      /*top: -1px;*/
      z-index: 200;
      /*background-color: light-dark(var(--clr-light-500), var(--clr-dark-500));*/

      /*@media (width <= 1024px) {
        --_header-height: calc(50px + var(--sp-4) + var(--sp-4));
      }*/
    }

    .header__inner {
      display: grid;
      grid-template-columns: 200px minmax(0, 1fr) 200px;
      grid-gap: var(--sp-4);
      gap: var(--sp-4);
    }

      @media (max-width: 767.98px) {

    .header__inner {
        grid-template-columns: 150px minmax(0, 1fr) 150px;
    }
      }

    .header__left {
      grid-column: 1 / 2;
      /*background-color: yellow;*/
      /*@media (width < 1024px) { }*/
    }

    .header__middle {
      grid-column: 2 / 3;
      align-self: center;
    }

      @media (max-width: 1023.98px) {

    .header__middle {
        display: none;
    }
      }

    .header__right {
      /*background-color: orange;*/
      grid-column: 3 / 4;
    }
      @media (max-width: 1023.98px) {

    .header__right {
        grid-column: 2 / 4;
    }
      }
      @media (min-width: 1024px) {

    .hidden-hamburger {
        display: none;
    }
      }
    /*.header__offcanvas {
      left: var(--sp-4);
      padding: var(--sp-2);
      position: absolute;
      right: var(--sp-4);
      top: calc((var(--_header-height) + var(--_header-menu-height)) * -1);
      transition: top calc(var(--_header-speed) / 2) ease-in-out;
      visibility: hidden;
      z-index: -1;
      background-color: light-dark(var(--clr-light-500), var(--clr-dark-500));

      .inner {
        border: var(--clr-primary-500) var(--sp-1) solid;
        overflow-y: scroll;
        padding: var(--sp-4);
      }
      &.open {
        top: calc(var(--_header-height) + var(--sp-4));
        transition:
          top var(--_header-speed)
            linear(
              0,
              0.271 8.8%,
              0.542 19.9%,
              0.837 34.2%,
              1 44.7%,
              0.943 51.1%,
              0.925 57.5%,
              0.937 63.1%,
              1 77.4%,
              0.991 84.2%,
              1
            ),
          box-shadow calc(var(--_header-speed) / 2)
            calc(var(--_header-speed) / 2);
        visibility: visible;

        box-shadow: 1px 1px 15px 0
          var(--csstools-light-dark-toggle--3, var(--clr-light-700));
      }
    }
    */
  } /* End of @scope */
} /* End of @layer */