@charset "UTF-8";

@layer style {
  .header {
    position: sticky;
    inset: 0 auto;
    z-index: 22;
    pointer-events: none;

    /* ==== logo ==== */
    .logo {
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 0;
      z-index: 2;
      display: block grid;
      place-content: center;
      inline-size: 200px;
      aspect-ratio: 1 / 1;
      pointer-events: auto;
      background: var(--primary);

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

      img {
        transition: opacity 250ms ease 0s;

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

      @media (any-hover: hover) {
        &:hover {
          img {
            opacity: 0.7;
          }
        }
      }
    }

    /* ==== inner ==== */
    .inner {
      display: block flex;
      justify-content: flex-end;
      background: #fff;
      border-block-end: 1px solid rgb(0 0 0 / 20%);
      transition:
        background 250ms ease 0s,
        color 250ms ease 0s,
        border-color 250ms ease 0s;

      @media (width <=768px) {
        block-size: var(--header-height);
      }
    }

    /* ==== nav. ==== */
    nav {
      @media (width <=768px) {
        display: none;
      }

      pointer-events: auto;

      >ul {
        position: relative;
        display: block flex;
        block-size: 100%;
        margin-inline-end: 25px;

        --active-anchor: --company;
        --_oversize: -3px;

        &::before {
          position: absolute;
          inset-block-start: calc(anchor(start) - var(--_oversize));
          inset-inline-start: calc(anchor(start) + var(--_oversize));
          z-index: 1;
          inline-size: calc(anchor-size(width) - calc(var(--_oversize) * 2));
          block-size: calc(anchor-size(height) + calc(var(--_oversize) * 2));
          position-anchor: var(--active-anchor);
          pointer-events: none;
          content: '';
          background: var(--primary);
          background: color-mix(in srgb, var(--primary) 20%, transparent);
          border-radius: 4px;
          opacity: 0;
          transition: all 300ms var(--slideInBezier) 0s;
        }

        >li {
          position: relative;
          block-size: inherit;

          >a {
            position: relative;
            display: block flex;
            gap: 8px;
            align-items: center;
            block-size: inherit;
            padding-inline: 24.4px;
            font-size: 15px;
            font-weight: 700;
          }

          &:has(.children) {
            @media (any-hover: hover) {
              &:hover {
                .children {
                  pointer-events: auto;
                  opacity: 1;
                }
              }
            }
          }

          &:has(.children)>a::after {
            content: '+';
          }
        }

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

              &::before {
                opacity: 1;
              }
            }

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

              &::before {
                opacity: 1;
              }
            }

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

              &::before {
                opacity: 1;
              }
            }

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

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

    /* ==== children ==== */
    .children {
      position: absolute;
      inset-block-start: 72%;
      inset-inline-end: -10%;
      z-index: 2;
      display: block grid;
      gap: 15px;
      inline-size: max-content;
      min-inline-size: 300px;
      padding-block: 15px 27px;
      padding-inline: 30px;
      color: white;
      pointer-events: none;
      background: rgb(62 139 56 / 90%);
      border-radius: 10px;
      opacity: 0;
      transition: opacity 250ms ease 0s;

      h3 {
        padding-block-end: 5px;
        font-size: 20px;
        font-weight: 500;
        border-block-end: 1px solid white;
      }

      ul {
        display: block grid;
        gap: 7px;

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

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

    /* ==== contact ==== */
    .contact {
      display: block flex;
      gap: 10px;
      align-items: center;
      padding-block: 31.7px;
      padding-inline: 39px;
      font-size: 20px;
      font-weight: 400;
      pointer-events: auto;
      border-inline-start: 1px solid rgb(0 0 0 / 20%);
      transition:
        background 250ms ease 0s,
        color 250ms ease 0s;

      @media (width > 768px) {
        letter-spacing: 1px;
      }

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

      &::before {
        inline-size: 18px;
        aspect-ratio: 18 / 14;
        content: '';
        background-color: var(--primary);
        mask-image: var(--icon-mail);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        translate: 0 -0.5px;
        transition: inherit;
      }

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

          &::before {
            background-color: white !important;
          }
        }
      }
    }
  }

  :where([data-page='top']) .header {
    color: white;
    background: transparent;
    border-block-end: none;

    .inner {
      background: transparent;
      border-block-end: 1px solid white;
    }

    .contact {
      color: white;
      border-inline-start: 1px solid white;

      &::before {
        background-color: white;
      }
    }
  }

  /* ==== active ==== */
  body[data-page='company'] .header ul {
    --active-anchor: --company;

    &::before {
      opacity: 1;
    }
  }

  body[data-page='product'] .header ul {
    --active-anchor: --product;

    &::before {
      opacity: 1;
    }
  }

  body[data-page='recruit'] .header ul {
    --active-anchor: --recruit;

    &::before {
      opacity: 1;
    }
  }

  body[data-page='business'] .header ul {
    --active-anchor: --business;

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