/* =============================================================
   FRM Journal — 共通クローム (R1b)
   ヘッダー直下のアラート帯 / ブランドタグライン / リッチフッター。
   トップページは style.css を読み込まない(インラインCSS完結)ため、
   全ページで共有すべきパーツは必ずこのファイルに置くこと。
   トークン(--orange 等)は style.css と index.html の :root 両方で定義済み。
   ============================================================= */

/* ── ブランドタグライン(ロゴ下) ────────────────
   .nav-brand.nav-brand--tagline (0,2,0) にして、style.css と index.html の
   .nav-brand (0,1,0) に必ず勝たせる。単一クラスだと詳細度が並び、
   読み込み順(index はインラインCSS)次第で align-items/gap を奪われる。 */
.nav-brand.nav-brand--tagline {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.nav-tagline {
  font-size: 0.875rem;        /* 14px。a11y_scan の下限13pxを下回らせない */
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-light);
  white-space: nowrap;
  line-height: 1.4;
}
@media (max-width: 1024px) {
  /* 901pxでブランド右端とナビ左端の余白が実測0だった(タグラインが262px幅を要求するため)。
     フォントメトリクスが少し変われば即リンクが潰れる。余裕を持って1024px以下で落とす。
     タグラインが消えるとヘッダーは64pxで足りる。 */
  .nav-tagline { display: none; }
  .nav-brand.nav-brand--tagline { flex-direction: row; align-items: center; gap: 10px; }
  .nav { height: 64px; }
}

/* ── 制度改正アラート帯 ──────────────────────
   残日数は /js/alert-bar.js が算出する。静的な日数をHTMLに書かないこと。 */
.alert-bar {
  background: var(--orange-tint);
  border-bottom: 1px solid #f3ddc9;
}
.alert-bar[hidden] { display: none; }
.alert-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 11px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  text-align: center;
}
.alert-date {
  font-family: var(--serif);
  font-weight: 800;
  color: var(--accent-text);
  font-size: 1.05rem;
}
.alert-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-light);
}
.alert-days {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-text);
}
.alert-link {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 768px) {
  /* 折り返しで3行=120px近くになり初期表示を圧迫するため、余白と字送りを詰める。
     文字サイズは frm-journal のデザイン制約(ラベル 0.82rem 以上)を下回らせない。 */
  .alert-inner { padding: 9px 16px; gap: 2px 8px; line-height: 1.5; }
  .alert-date { font-size: 0.95rem; }
  .alert-label { font-size: 0.9rem; }
  .alert-days { font-size: 0.9rem; }
  .alert-link { font-size: 0.95rem; }
}

/* ── リッチフッター(全ページ共通) ──────────────
   旧 .footer-links(1行リンク列)を置き換え。トップページのインライン定義を
   ここへ集約し、SoTを1本化した。 */
.footer {
  background: var(--dark);
  color: rgba(255,255,255,0.85);
  padding: 56px 0 32px;
  text-align: left;
}
.footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.footer-grid {
  display: grid;
  /* R2a: 「調べもの」列を足して 6要素(ブランド + 5セクション)。
     トラックを5本のままにすると6つ目が2行目に落ちる。 */
  grid-template-columns: 1.3fr repeat(5, 1fr);
  gap: 28px 24px;
  margin-bottom: 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.f-brand .f-logo {
  font-family: var(--en);
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 8px;
  color: #fff;
  letter-spacing: -0.01em;
}
.f-brand .f-logo .accent { color: var(--orange-soft); }   /* フッターはダーク背景 */
.f-brand .f-tag {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  margin-bottom: 16px;
}
.f-brand p {
  font-size: 14px;
  line-height: 1.85;
  color: rgba(255,255,255,0.65);
  max-width: 280px;
}
/* フッターからのCV導線。旧 .footer-links にあった early-access リンクの後継 */
.f-cta {
  display: inline-block;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--orange-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,178,122,0.5);
}
.f-cta:hover { color: #fff; border-bottom-color: #fff; opacity: 1; }
.f-section h6 {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  gap: 8px;
}
.f-section h6::before {
  content: '';
  width: 3px;
  height: 14px;
  background: var(--orange);
  border-radius: 2px;
}
.f-section ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.f-section a {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: color 0.2s;
}
.f-section a:hover { color: var(--orange-soft); opacity: 1; }   /* フッターはダーク背景 */
.footer-operator {
  padding: 24px 0 28px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-operator h6 {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer-operator h6::before {
  content: '';
  width: 3px;
  height: 14px;
  background: var(--orange);
  border-radius: 2px;
}
.footer-operator p {
  font-size: 14px;
  line-height: 1.85;
  color: rgba(255,255,255,0.78);
  max-width: 760px;
  margin: 0;
}
.footer-operator a {
  color: var(--orange-soft);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,140,40,0.45);
}
.footer-bot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 14px;
  color: rgba(255,255,255,0.62);   /* 0.45 は 3.4:1 で AA 未達 */
}
.footer-bot a {
  color: rgba(255,255,255,0.62);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.footer-bot a:hover { color: #fff; opacity: 1; }
.footer-bot-links { display: flex; flex-wrap: wrap; gap: 16px; }

/* ── モバイルナビ (R3) ──────────────────────
   style.css から移設。トップページは style.css を読まないため、
   共通クローム側に置かないとトップでハンバーガーが効かない。 */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px; height: 18px;
  cursor: pointer;
  padding: 0;
  background: none;
  border: none;
  z-index: 1100;
}
.hamburger span {
  display: block;
  width: 100%; height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
  transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* モバイルオーバーレイメニュー */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(16px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.mobile-menu.open {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu a {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text);
  padding: 14px 32px;
  text-decoration: none;
  opacity: 1;
  transition: color 0.2s;
}
.mobile-menu a:hover { color: var(--accent-text); }
.mobile-menu .mobile-cta {
  margin-top: 24px;
  padding: 14px 40px;
  background: var(--orange);
  color: var(--dark);
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
}
@media (max-width: 900px) {
  /* モバイルではハンバーガーを出す。旧 style.css の @media(768px) から
     900px へ広げた(900px以下でナビリンクを畳む方針に合わせる) */
  .hamburger { display: flex; }
  .nav-links { display: none; }
}

/* ── ヘッダーCTAの hover (R3) ──────────────────
   style.css から移設。トップページは style.css を読まないため、ここに無いと
   hover時に共通リンク色へ落ち、オレンジ背景の上で 2.82:1 まで下がっていた。 */
.nav-cta:hover,
.nav-links a.nav-cta:hover { background: var(--orange-dark); color: var(--dark); opacity: 1; }