@charset "UTF-8";

/* =====================
  header
===================== */
@layer style {
  .header {
    position: sticky;
    inset: 0 auto;
    z-index: 22;
    display: block grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    justify-content: center;
    padding-inline: 40px;
    margin-inline: auto;
    border-block-end: 1px solid var(--gray_border);
    transition: all 250ms ease 0s;

    @media (width <=768px) {
      padding-block: 1.14vw;
      padding-inline: var(--nudge-2);
    }

    /* ==== logo ==== */
    .logo {
      display: block grid;
      place-content: center;
      inline-size: 204px;
      block-size: 40px;
      background-image: url('../img/_common/logo.webp');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      transition: all 250ms ease 0s;

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

    /* ==== nav ==== */
    .nav {
      display: block flex;
      gap: 16px;
      align-items: center;
      color: white;
      pointer-events: auto;

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

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

        --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(--gold);
          background: color-mix(in srgb, var(--gold) 100%, transparent);
          border-radius: 0;
          opacity: 0;
          transition: all 300ms var(--slideInBezier) 0s;
        }

        >li {
          position: relative;
          z-index: 2;
          block-size: inherit;

          >a {
            position: relative;
            display: block grid;
            align-items: center;
            justify-content: center;
            block-size: inherit;
            padding-block: 17px;
            padding-inline: 27.7px;
            font-size: 15px;
            text-align: center;

            [lang='en'] {
              font-size: 17px;
              font-weight: 400;
            }

            .title {
              font-size: 14px;
              font-weight: 400;
            }
          }

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

        /* ==== 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='news']:hover) {
              --active-anchor: --news;

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

    /* ==== children ==== */
    .children {
      position: absolute;
      inset-block-start: 100%;
      inset-inline-start: -50%;
      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: color-mix(in srgb, var(--gold) 95%, transparent);
      border-radius: 3px;
      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: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 7px 19px;

        a {
          display: block flex;
          gap: 2px;
          font-size: 14px;
          font-weight: 500;
          color: white;

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

    /* ==== button ==== */
    :where(.recruit-button, .contact-button) {
      display: block grid;
      place-content: center;
      align-items: center;
      block-size: fit-content;
      padding-block: 8.6px;
      padding-inline: 26px;
      font-size: 15px;
      font-weight: 600;
      background-color: var(--_bg-color);
      transition:
        background-color 300ms ease 0s,
        outline 300ms ease 0s,
        color 300ms ease 0s;

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

      @media (width > 768px) {
        min-inline-size: 142px;
      }
    }

    .recruit-button {
      --_bg-color: var(--gold);
    }

    /* ==== contact-button ==== */
    .contact-button {
      --_bg-color: var(--color-text-primary);
    }
  }

  .header-color .header {
    background: white;
    border-block-end: 1px solid var(--gray_border);

    ul {
      color: var(--color-text-primary);

      [lang='en'] {
        color: var(--gold);
      }

      .title {
        color: var(--gray_text);
      }

      @media (any-hover: hover) {
        li {
          &:hover {
            .title {
              color: white;
              transition: color 250ms ease 0s;
            }

            [lang='en'] {
              color: white;
              transition: color 250ms ease 0s;
            }
          }
        }
      }
    }

    :where(.recruit-button, .contact-button) {
      @media (any-hover: hover) {
        &:hover {
          color: var(--_bg-color);
          outline: 2px solid var(--_bg-color);
        }
      }
    }

    .logo {
      background-image: url('../img/_common/logo-color.webp');
    }
  }

  body:not([data-page='top']) .header {
    @media (width > 768px) {
      border-block-end: 1px solid var(--gray_border);

      ul {
        color: var(--color-text-primary);

        [lang='en'] {
          color: var(--gold);
        }

        .title {
          color: var(--gray_text);
        }

        @media (any-hover: hover) {
          li {
            &:hover {
              .title {
                color: white;
                transition: color 250ms ease 0s;
              }

              [lang='en'] {
                color: white;
                transition: color 250ms ease 0s;
              }
            }
          }
        }
      }

      :where(.recruit-button, .contact-button) {
        @media (any-hover: hover) {
          &:hover {
            color: var(--_bg-color);
            outline: 2px solid var(--_bg-color);
          }
        }
      }
    }

    .logo {
      background-image: url('../img/_common/logo-color.webp');
    }
  }

  .menu-on .header {
    @media (width <=768px) {
      background: white;

      .logo {
        background-image: url('../img/_common/logo-color.webp');
      }
    }
  }

  /* ==== active ==== */
  body[data-page='company'] .header ul,
  body[data-parent='company'] .header ul {
    li[data-id='company'] {
      border-block-end: 2px solid var(--gold);
    }
  }

  body[data-page='business'] .header ul {
    li[data-id='business'] {
      border-block-end: 2px solid var(--gold);
    }
  }

  body[data-page='news'] .header ul {
    li[data-id='news'] {
      border-block-end: 2px solid var(--gold);
    }
  }
}