@charset "UTF-8";

@layer style {
  .header {
    position: sticky;
    inset: 0 auto;
    z-index: 22;
    margin-inline: auto;
    background: rgb(255 255 255 / 80%);

    @media (width <=768px) {
      background: rgb(255 255 255 / 100%);
    }

    /* ==== inner ==== */
    .inner {
      display: block grid;
      grid-template-columns: 1fr auto auto;
      align-items: center;
      justify-content: center;
      padding-inline: 40px;

      @media (width <=768px) {
        padding-block: calc((100 / 390) * 16 * 1vw);
        padding-inline: calc((100 / 390) * 16 * 1vw);
      }
    }

    /* ==== logo ==== */
    .logo {
      display: block grid;
      place-content: center;
      inline-size: fit-content;

      img {
        aspect-ratio: 291 / 56;

        @media (width <=768px) {
          inline-size: calc((100 / 390) * 208 * 1vw);
        }
      }
    }

    /* ==== .nav ==== */
    .nav {
      display: block flex;
      block-size: 100%;

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

      >ul {
        --active-anchor: --home;

        position: relative;
        display: block flex;
        block-size: 100%;
        margin-inline-end: 19px;
        font-size: 18px;
        font-weight: 700;

        &::before {
          position: absolute;
          inset-block-start: 60px;
          inset-inline-start: calc(anchor(start) + anchor-size(width) / 2);
          z-index: 1;
          inline-size: anchor-size(width);
          block-size: 1px;
          aspect-ratio: 1 / 1;
          position-anchor: var(--active-anchor);
          pointer-events: none;
          content: '';
          background: var(--primary);
          border-radius: calc(infinity * 1px);
          opacity: 0;
          translate: -50% 0;
          transition: all 300ms ease 0s;
        }

        >li {
          position: relative;

          > :where(a, p) {
            position: relative;
            display: block flex;
            gap: 8px;
            padding-block: 23.82px;
            padding-inline: 19.7px;
          }

          &:has(.children) {
            > :where(a, p) {
              position: relative;
              cursor: pointer;

              &::after {
                inline-size: 10px;
                aspect-ratio: 1 / 1;
                content: '';
                background-color: var(--primary);
                mask-image: var(--icon-angle);
                mask-repeat: no-repeat;
                mask-position: center;
                mask-size: contain;
                translate: 0 2px;
              }
            }
          }
        }

        /* ==== active ==== */
        @media (any-hover: hover) {
          &:hover {
            &:has([data-id='company']:hover) {
              --active-anchor: --company;

              &::before {
                opacity: 1;
              }
            }

            &:has([data-id='business']:hover) {
              --active-anchor: --business;

              &::before {
                opacity: 1;
              }
            }

            &:has([data-id='products']:hover) {
              --active-anchor: --products;

              &::before {
                opacity: 1;
              }
            }

            &:has([data-id='recruit']:hover) {
              --active-anchor: --recruit;

              &::before {
                opacity: 1;
              }
            }
          }
        }
      }

      /* ==== .children ==== */
      .children {
        position: absolute;
        inset-block-end: 0;
        inset-inline-start: 20px;
        z-index: 2;
        display: block grid;
        grid-template-rows: 0fr;
        inline-size: max-content;
        overflow: clip;
        font-size: 16px;
        font-weight: 500;
        background: rgb(255 255 255 / 80%);
        border-radius: 20px;
        box-shadow: 0 0 8px 0 rgb(68 68 68 / 20%);
        translate: 0 100%;
        transition: grid-template-rows 0.2s ease-out;

        ul {
          display: grid;
          gap: 1px;
          padding-inline: 39px 25px;
          overflow: hidden;
        }

        li {
          position: relative;
          margin-block: calc((1em - 1lh) / 2);

          &:first-of-type {
            margin-block-start: 14px;
          }

          &:last-of-type {
            margin-block-end: 14px;
          }

          a {
            display: block flow;
            padding-block: 16px;
            margin-block: calc((1em - 1lh) / 2);
          }

          &::before {
            position: absolute;
            inset-block-start: 50%;
            inset-inline-start: -16px;
            inline-size: 8px;
            aspect-ratio: 8 / 2;
            content: '';
            background: #00529f;
            translate: 0 -50%;
          }
        }
      }

      >ul>li:has(.children) {
        @media (any-hover: hover) {
          &:hover {
            .children {
              grid-template-rows: 1fr;
            }
          }
        }
      }
    }

    /* ==== contact-button ==== */
    .contact-button {
      display: block grid;
      padding-block: 5px;
      padding-inline: 22px;
      font-size: 18px;
      color: var(--white);
      background: var(--primary);
      border: 2px solid var(--primary);
      border-radius: 6px;
      transition:
        background 250ms ease 0s,
        color 250ms ease 0s;
      will-change: background, color;

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

      @media (any-hover: hover) {
        &:hover {
          color: var(--primary);
          background: var(--white);
        }
      }
    }
  }
}