@charset "UTF-8";

/* =====================
  header
===================== */
@layer style {
  /* ==== header ==== */
  .header {
    position: sticky;
    inset: 0 auto;
    z-index: 20;
    display: block grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    padding-block: 25px;
    padding-inline: 40px;
    margin-inline: auto;
    pointer-events: none;
    background: white;
    transition: all 250ms ease 0s;

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

    & > * {
      pointer-events: auto;
    }

    /* ==== .logo ==== */
    .logo {
      inline-size: fit-content;

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

    /* ==== .nav ==== */
    .nav {
      display: flex;
      align-items: center;
      block-size: 100%;
      margin-inline-end: 26px;

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

      ul {
        position: relative;
        display: block flex;
        gap: 0;
        align-items: center;
        block-size: inherit;
        font-size: 14px;
        font-weight: 500;

        --active-anchor: --top;

        &::before {
          position: absolute;
          inset-block-end: calc(anchor(bottom) + 4px);
          inset-inline-start: anchor(left);
          z-index: 1;
          inline-size: anchor-size(width);
          block-size: 2px;
          position-anchor: var(--active-anchor);
          pointer-events: none;
          content: '';
          background: var(--color-text-primary);
          border-radius: calc(infinity * 1px);
          opacity: 0;
          transition: all 250ms ease 0s;
        }

        li {
          display: block flex;
          align-items: center;
          block-size: inherit;
        }

        a {
          display: block flex;
          align-items: center;
          block-size: inherit;
          padding-inline: 15px;
        }
      }
    }

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

      ul {
        display: block flex;
        gap: 6px;
        font-size: 12px;
        font-weight: 500;

        a {
          display: block grid;
          padding-inline: 15px;
          border: 1px solid rgb(0 0 0 / 40%);
          border-radius: 3px;
          transition: all 250ms ease 0s;

          @media (any-hover: hover) {
            &:hover {
              color: white;
              background: var(--color-text-primary);
              border: 1px solid var(--color-text-primary);
            }
          }
        }
      }
    }
  }

  /* =====================
    header active
  ===================== */
  body .header ul:has([data-id='company']:hover),
  body[data-page='company'] .header ul:not(:hover):has([data-id='company']) {
    --active-anchor: --company;

    &::before {
      opacity: 1;
    }
  }

  body .header ul:has([data-id='business']:hover),
  body[data-page='business'] .header ul:not(:hover):has([data-id='business']) {
    --active-anchor: --business;

    &::before {
      opacity: 1;
    }
  }

  body .header ul:has([data-id='recruit']:hover),
  body[data-page='recruit'] .header ul:has([data-id='recruit']) {
    --active-anchor: --recruit;

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