@charset "UTF-8";

@layer style {
  .header {
    --_border-color: rgb(0 0 0 / 15%);
    --_color: var(--color-text-primary);

    position: sticky;
    inset: 0 auto;
    z-index: 22;
    margin-inline: auto;
    background: white;
    border-block-end: 1px solid var(--_border-color);
    transition: all 250ms ease 0s;

    /* ==== .inner ==== */
    .inner {
      display: block grid;
      padding-inline-start: 40px;

      @media (width > 768px) {
        grid-template-columns: auto 1fr 197px;
      }

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

    /* ==== logo ==== */
    .logo {
      display: block flex;
      gap: 0 20px;
      align-items: center;

      img {
        transition: filter 250ms ease 0s;
      }

      @media (width <=768px) {
        gap: 2.8vw;
        padding-block: 3.3vw;

        img:first-child {
          inline-size: calc((100 / 390) * 103 * 1vw);
        }

        img:last-child {
          inline-size: calc((100 / 390) * 120 * 1vw);
        }
      }
    }

    /* ==== nav ==== */
    .nav {
      display: block grid;
      align-items: center;
      justify-self: end;
      font-size: 15px;
      color: var(--_color);

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

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

        position: relative;
        display: block flex;
        margin-inline-end: 23.6px;

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

        >li {
          position: relative;

          >a {
            position: relative;
            display: block flex;
            padding-block: 36px;
            padding-inline: 15.3px;
          }

          &:has(.children) {
            @media (any-hover: hover) {
              &:hover {
                >a::after {
                  content: '-';
                }
              }
            }

            >a {
              display: block flex;
              gap: 6px;

              &::after {
                inline-size: 8.86px;
                font-weight: 700;
                content: '+';
              }
            }
          }
        }

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

              &::before {
                opacity: 1;
              }
            }

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

              &::before {
                opacity: 1;
              }
            }

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

              &::before {
                opacity: 1;
              }
            }

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

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

      .children {
        position: absolute;
        inset-block-start: calc(100% + -11px);
        inset-inline-start: 50%;
        z-index: 2;
        display: block grid;
        grid-template-rows: 0fr;
        inline-size: max-content;
        min-inline-size: 300px;
        padding-inline: 31px 27px;
        color: white;
        background: rgb(8 44 96 / 70%);
        border-radius: 10px;
        opacity: 0;
        translate: -49.6% 0;
        transition: grid-template-rows 0.2s ease-out;

        .children-wrap {
          overflow: hidden;
        }

        .head {
          padding-block-end: 5px;
          margin-block: 15px;
          font-size: 20px;
          font-weight: 500;
          border-block-end: 1px solid white;
        }

        a {
          display: block flex;
          gap: 2px;
          font-size: 13px;
          font-weight: 400;

          &::before {
            content: '-';
          }

          +a {
            margin-block-start: 7px;
          }

          &:last-child {
            margin-block-end: 26px;
          }
        }
      }

      label {
        @media (width > 768px) {
          display: none;
        }
      }

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

    /* ==== tel ==== */
    .tel {
      display: block flex;
      gap: 8px;
      align-items: center;
      justify-content: center;
      padding-block: 32px 29px;
      font-family: var(--title);
      font-size: 21px;
      font-weight: 300;
      color: var(--_color);
      letter-spacing: 0.2px;
      border-inline-start: 1px solid var(--_border-color);

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

      &::before {
        inline-size: 17px;
        aspect-ratio: 17 / 18;
        content: '';
        background-color: currentcolor;
        mask-image: var(--icon-tel);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        translate: -1px -2px;
      }
    }
  }
}

.header-color .header {
  --_border-color: rgb(0 0 0 / 15%);
  --_color: var(--color-text-primary);

  background: white;

  .logo img {
    filter: unset;
  }
}