/*
 * HPL LP 共通ルール（site.css）
 *
 * 正はこのファイル（01_lp/_shared/site.css）。
 * sync_shared.py が各LPのフォルダへ site.css としてコピーする。
 * 各LPフォルダ内の site.css は直接編集しないこと。
 *
 * ここに置くもの（全LPで揃えるもの）:
 *   1. スキップリンク
 *   2. ヘッダー／グローバルメニュー（HTMLは _shared/blocks/header.html）
 *   3. セクションの上下余白
 *   4. フッター（HTMLは _shared/blocks/footer.html）
 *
 * 読み込み順:
 *   design-tokens.css → components.css → （ページのCSS）→ site.css
 *   共通ルールをページ側の古い上書きより優先させるため、必ず最後に読み込む。
 *   ページごとに変えたくなったら、まずここを変えて全LPを揃えることを考える。
 */

/* ============================================================
   0. Tokens
   ============================================================ */

:root {
  /* セクションの上下の余白。トップ（/shin/）のNEWSで調整した値を全LPの標準にしている。
     写真の帯（HERO / GATE など）はこの対象外で、帯の高さで見せる。 */
  --section-pad-top: clamp(22px, 2.2vw, 30px);
  --section-pad-bottom: clamp(26px, 2.6vw, 36px);
}

/* ============================================================
   1. Skip link
   ============================================================ */

.skip-link {
  position: fixed;
  z-index: 60;
  top: var(--space-md);
  left: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  color: var(--color-white);
  background: var(--color-charcoal);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* ============================================================
   2. Header / Global menu
   背景#111のベタ塗り・下線なし／ロゴ幅84px→PCで最大108×48px／
   メニューは大文字・字間0.1em・白、PCで13px・項目間 clamp(28px, 3vw, 52px)。
   スクロールしても上に残る sticky。右端に各ページのCTAボタン。
   ============================================================ */

/* ページ内リンク（ヘッダーCTAの #join / #contact など）で飛んだ先の見出しが
   sticky ヘッダーの下に隠れないようにする */
html {
  scroll-padding-top: 64px;
}

.site-header {
  position: sticky;
  z-index: 50;
  top: 0;
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-inline: var(--page-gutter);
  background: #111111;
  color: var(--color-white);
}

.site-logo {
  display: inline-flex;
  width: 92px;
  min-height: 40px;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
}

.site-logo img {
  display: block;
  width: 84px;
  max-height: 36px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.site-nav {
  display: none;
  gap: var(--space-lg);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.site-nav a {
  color: var(--color-white);
  text-decoration: none;
  transition: opacity var(--motion-fast);
}

.site-nav a:hover {
  opacity: 0.72;
}

.header-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border: 1px solid var(--color-plum);
  background: var(--color-plum);
  color: var(--color-white);
  font-family: var(--font-display-en);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--motion-fast), border-color var(--motion-fast);
}

.header-cta:hover {
  border-color: var(--color-white);
  background: var(--color-white);
  color: var(--color-charcoal);
}

.mobile-menu {
  position: relative;
  display: block;
}

.mobile-menu summary {
  display: flex;
  width: 36px;
  height: 36px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  list-style: none;
}

.mobile-menu summary::-webkit-details-marker {
  display: none;
}

.mobile-menu summary span {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
}

.mobile-menu nav {
  position: absolute;
  top: 44px;
  right: 0;
  display: grid;
  min-width: 190px;
  padding: var(--space-sm) 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: var(--color-charcoal);
  box-shadow: var(--shadow-soft);
}

.mobile-menu nav a {
  padding: 12px 18px;
  color: var(--color-white);
  text-decoration: none;
}

@media (min-width: 768px) {
  .site-nav {
    display: flex;
  }

  .mobile-menu {
    display: none;
  }

  .header-actions {
    gap: 28px;
  }

  .header-cta {
    padding: 10px 22px;
    font-size: 13px;
  }
}

@media (min-width: 1024px) {
  html {
    scroll-padding-top: 72px;
  }

  .site-header {
    min-height: 72px;
    padding-inline: clamp(48px, 5vw, 96px);
  }

  .site-logo img {
    width: 108px;
    max-height: 48px;
  }

  .site-nav {
    gap: clamp(28px, 3vw, 52px);
    font-size: 13px;
  }

  .header-actions {
    gap: clamp(28px, 3vw, 52px);
  }
}

/* ============================================================
   3. Section spacing
   .section（Experience由来の共有セクション含む）の上下余白をそろえる。
   TRACTION はロゴ帯と数値タイルを端まで敷く作りなので余白0のまま。
   トップ独自の .block も同じトークンを使っている（main.css）。
   ============================================================ */

.section:not(.track-record) {
  padding-top: var(--section-pad-top);
  padding-bottom: var(--section-pad-bottom);
}

/* ============================================================
   4. Footer
   SNSはアイコン。スマホでは「HPL＋アイコン」の1行と「privacy / law」の1行の2行に収まる。
   ============================================================ */

.footer {
  padding-block: var(--space-lg);
  color: var(--color-white);
  background: var(--color-charcoal);
}

.footer-inner--icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

.footer a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}

.footer-brand {
  font-family: var(--font-display-en);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-wider);
}

.footer-sns {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-sns a {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  transition: color var(--motion-fast);
}

.footer-sns a:hover,
.footer-sns a:focus-visible {
  color: var(--color-white);
}

.footer-sns svg {
  display: block;
  width: 20px;
  height: 20px;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  font-size: 12px;
  letter-spacing: var(--tracking-wide);
}

@media (min-width: 768px) {
  .footer-inner--icons {
    flex-wrap: nowrap;
  }

  .footer-sns {
    margin-left: auto;
  }
}