/* ===========================================
   メルカリ Statuspage カスタムCSS
   ブランドガイドラインに準拠
   
   参考: https://support.atlassian.com/ja/statuspage/docs/use-custom-css-on-a-status-page/
   =========================================== */

/* ===== カスタム変数（Statuspage Customization > Colors と連動）===== */
:root {
  /* Statuspage Customization > Colors の設定値を使用 */
  --sp-body-bg: #FFFFFF;        /* Body background color */
  --sp-font: #333333;           /* Font color */
  --sp-font-light: #B4B4B4;     /* Light font color */
  --sp-green: #0C882D;          /* Greens（正常時） */
  --sp-yellow: #FFB818;         /* Yellows（パフォーマンス低下） */
  --sp-orange: #EB5D00;         /* Oranges（一部障害） */
  --sp-red: #FF333F;            /* Reds（重大な障害） */
  --sp-blue: #006ED1;           /* Blues（メンテナンス中） */
  --sp-link: #006ED1;          /* Link color */
  --sp-border: #DCDCDC;         /* Border color */
  --sp-no-data: #B4B4B4;        /* No data */
  /* 後方互換用エイリアス */
  --mercari-red: var(--sp-red);
  --mercari-red-dark: #E62E3A;  /* Link hover用の濃い赤 */
  --mercari-red-light: #FF5C66; /* Selection用の薄い赤 */
  --mercari-black: var(--sp-font);
  --mercari-gray-dark: var(--sp-font);
  --mercari-gray: var(--sp-font-light);
  --mercari-gray-light: var(--sp-font-light);
  --mercari-gray-lighter: var(--sp-border);
  --mercari-white: var(--sp-body-bg);
}

/* ===========================================
   購読ボタンを非表示にする
   参考: https://support.atlassian.com/ja/statuspage/docs/css-and-javascript-snippets-for-customizations/
   =========================================== */
/* 購読ボタン関連の要素を非表示 */
.updates-dropdown-container,
.subscribe-btn,
.btn-subscribe,
.btn.subscribe,
[class*="subscribe"],
a[href*="subscribe"],
.masthead a[href="#"],
.unresolved-incident .subscribe-button {
  display: none !important;
}

/* ===========================================
   トップページ: 発生中障害のインシデント更新を非表示
   .updates-container 内の解決済み・監視中・更新などを非表示
   =========================================== */
body:not(.incident-page) .updates-container,
body:not(:has(.incident-updates)) .updates-container,
.unresolved-incident .updates-container,
.unresolved-incidents .updates-container {
  display: none !important;
}

/* ===========================================
   /history ページへのリンクを非表示にする
   「← Incident History」リンクを非表示
   =========================================== */
a[href="/history"],
a[href*="/history"],
a[href*="history"],
.history-link,
.incidents-list + a {
  display: none !important;
}

/* Incident History リンクのコンテナも非表示 */
.incidents-list ~ a,
a.history-link,
.page-footer a[href*="history"] {
  display: none !important;
}

/* ===========================================
   履歴の表示日数を10日分に制限する（11日目以降を非表示）
   =========================================== */
/* 日付ごとのインシデントコンテナ */
.incidents-list > div:nth-child(n+11),
.incidents-list .incident-container:nth-child(n+11),
.month > div:nth-child(n+11) {
  display: none !important;
}

/* ===========================================
   「このサイトについて」セクションを非表示
   SEO用にテキストは残す（display:noneは使わない）
   =========================================== */

/* About This Site セクション全体を視覚的に非表示 */
.about-site,
.text-section,
section.about,
.about-this-site {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ===== 全体のフォント設定 ===== */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
  color: var(--mercari-black);
  background-color: var(--mercari-white);
}

/* ===========================================
   Page headline（ページ見出し）を非表示にする
   Cover imageは表示したまま、テキストのみ非表示
   =========================================== */

/* ページタイトル/見出しを非表示 */
.page-title,
.page-name,
h1.page-title,
.masthead h1,
.masthead .page-title,
.masthead-container h1,
.base-header h1,
.page-header h1,
.header-container h1 {
  display: none !important;
}

/* Cover image上のテキストオーバーレイを非表示 */
.cover-image-overlay,
.masthead-text,
.masthead .container > h1,
.masthead .container > .page-title {
  display: none !important;
}

/* ===========================================
   Page headline領域（黒いバー）を視覚的に非表示
   SEO用にテキストは残す（display:noneは使わない）
   .text-container がPage headlineとSubscribeボタンを含む領域
   ※TOPページのみ適用、詳細ページでは表示する
   =========================================== */
.text-container {
  /* 視覚的に非表示だが、検索エンジンには認識される */
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* 詳細ページでは .text-container を表示 */
/* 詳細ページは .incident-updates クラスを持つ */
body.incident-page .text-container,
body:has(.incident-updates) .text-container,
body:has(.incident-name) .text-container {
  display: block !important;
  visibility: visible !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 20px 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  text-align: center !important;
}

/* Subscribeボタンは完全に非表示（SEO不要） */
.text-container .updates-dropdown-container,
.text-container .show-updates-dropdown {
  display: none !important;
}

/* ===========================================
   詳細ページ（incidents/xxx）用のスタイル
   =========================================== */

/* 詳細ページ: ヘッダー画像上の隙間を削除 */
body.incident-page .page-header,
body:has(.incident-updates) .page-header {
  margin-bottom: 0 !important;
}
body.incident-page .layout-content:first-child,
body.incident-page .layout-content:first-of-type,
body.incident-page .masthead-container,
body:has(.incident-updates) .layout-content:first-child,
body:has(.incident-updates) .layout-content:first-of-type,
body:has(.incident-updates) .masthead-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* 詳細ページのタイトル（h1）を表示・障害タイトルはデフォルト色 */
.incident-name,
.incident-title h1,
h1.incident-name,
body.incident-page h1,
body.incident-page .page-name,
body.incident-page .layout-content .incident-name,
body.incident-page .layout-content h1,
body.incident-page .container .incident-name,
body.incident-page .container h1:first-of-type,
body:has(.incident-updates) h1,
body:has(.incident-updates) .page-name,
body:has(.incident-updates) .layout-content .incident-name,
body:has(.incident-updates) .layout-content h1,
body:has(.incident-updates) .container .incident-name,
body:has(.incident-updates) .container h1:first-of-type {
  display: block !important;
  visibility: visible !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  clip: auto !important;
  overflow: visible !important;
  text-align: center !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: var(--mercari-black) !important;
  margin: 20px auto !important;
  max-width: 720px !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

/* 詳細ページのステータス見出し（h2） */
body.incident-page h2,
body:has(.incident-updates) h2 {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  color: var(--mercari-black) !important;
  margin: 24px 0 12px 0 !important;
  padding: 0 16px 8px 16px !important;
  border-bottom: 1px solid var(--sp-border) !important;
  box-sizing: border-box !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  min-width: 0 !important;
}

/* 詳細ページ: コンテナのパディング確保（テキスト切れ防止） */
body.incident-page .layout-content > .container,
body:has(.incident-updates) .layout-content > .container {
  padding-left: 24px !important;
  padding-right: 24px !important;
  padding-bottom: 24px !important;
  box-sizing: border-box !important;
}

/* 詳細ページ: インシデント更新ブロックの余白 */
body.incident-page .incident-update,
body.incident-page .incident-updates > div,
body:has(.incident-updates) .incident-update,
body:has(.incident-updates) .incident-updates > div {
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}

/* 詳細ページのステータス見出し */
.incident-update-title,
.update-title {
  font-weight: 600 !important;
}

/* 詳細ページの「Incident Report for ...」を非表示 */
.incident-header-text,
.incident-report-text,
.page-description {
  display: none !important;
}

/* 「Incident Report for Mercari JP Status Page」テキストを含む要素を非表示 */
body.incident-page .layout-content > .container > p:first-of-type,
body:has(.incident-updates) .layout-content > .container > p:first-of-type {
  display: none !important;
}

/* 詳細ページの「← Current Status」リンクのスタイル */
body.incident-page a[href="/"] {
  display: inline-block !important;
  margin: 20px 0 !important;
  color: var(--sp-link) !important;
  text-decoration: none !important;
}

body.incident-page a[href="/"]:hover {
  text-decoration: underline !important;
}

/* mastheadの余白・背景調整（テキスト非表示時） */
.masthead {
  padding: 0 !important;
  min-height: auto !important;
  background-color: transparent !important;
  background: transparent !important;
}

.masthead .container {
  padding: 0 !important;
}

/* ===========================================
   Cover image下の黒いバー（Page headline領域）を非表示にする
   =========================================== */

/* masthead下部の黒いバー/ボーダーを削除 */
.masthead::after,
.masthead::before {
  display: none !important;
}

/* mastheadの背景色を透明に */
.masthead-container {
  background-color: transparent !important;
  background: transparent !important;
}

/* ヘッダー画像（Custom Header）周辺のマージン・パディングを削除 */
.layout-content:has(.hero-image),
.layout-content:has(.hero-image) .masthead-container,
.masthead-container .statusPageLabelContainer,
.masthead-container .statusPageLabelContainer a,
.masthead-container .hero-image {
  margin: 0 !important;
  padding: 0 !important;
}
.masthead-container .hero-image {
  display: block !important;
  vertical-align: top;
}

/* Page headline が入る黒い領域を完全に非表示 */
.masthead .container,
.masthead > .container,
.masthead-container .container {
  display: none !important;
}

/* 詳細ページのmastheadコンテナは表示 */
body.incident-page .masthead .container,
body.incident-page .masthead > .container,
body.incident-page .masthead-container .container,
body:has(.incident-updates) .masthead .container,
body:has(.incident-updates) .masthead > .container,
body:has(.incident-name) .masthead .container {
  display: block !important;
  text-align: center !important;
}

/* ただしCover imageは表示する */
.masthead .cover-image,
.masthead img,
.masthead-container .cover-image,
.masthead-container img,
.masthead .page-cover,
.masthead-cover {
  display: block !important;
}

/* ステータスバナー関連（.page-statusは表示する） */
/* 注意: .page-status は最上位ステータスバナーなので非表示にしない */
.status-bar,
.psp-status,
.status-indicator-bar {
  /* 必要に応じて非表示にする */
}

/* mastheadの黒い背景部分を非表示 */
.masthead-inner,
.masthead .inner,
.masthead-content {
  display: none !important;
}

/* layout-contentの背景 */
.layout-content {
  background-color: var(--sp-body-bg) !important;
}

/* mastheadとコンテンツの間の余白を調整 */
.masthead + .container,
.masthead-container + .container {
  margin-top: 0 !important;
  padding-top: 20px !important;
}

/* mastheadの高さを画像のみに制限 */
.masthead {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* 黒い背景のオーバーレイを非表示 */
.masthead-overlay,
.cover-overlay,
.image-overlay {
  display: none !important;
  background: transparent !important;
}

/* ===== ヘッダー部分 ===== */
.page-header {
  background-color: var(--sp-body-bg) !important;
  border-bottom: 1px solid var(--sp-border);
}

/* ===== ステータスバナー・障害エリアの角丸 ===== */
.page-status {
  border-radius: 8px !important;
  font-weight: 600;
  text-align: center !important;
}

/* 障害中バナー・インシデントエリアの四角い枠を角丸に */
.unresolved-incident,
.unresolved-incident.impact-none,
.incident-container,
.incidents-list .incident-container,
.layout-content > .container {
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* 下部の白いコンテンツ領域も角丸に（タイトル下の更新エリア） */
.unresolved-incident .updates,
.unresolved-incident > .updates,
.unresolved-incident > *:last-child {
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}

/* 親要素に枠がある場合のフォールバック（:has()対応ブラウザ） */
div:has(> .unresolved-incident) {
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* 正常時（Statuspage Greens） */
.page-status.status-none {
  background-color: var(--sp-green) !important;
}

/* 軽微な問題（Statuspage Yellows） */
.page-status.status-minor {
  background-color: var(--sp-yellow) !important;
}

/* 重大な問題（Statuspage Oranges） */
.page-status.status-major {
  background-color: var(--sp-orange) !important;
}

/* 深刻な問題（Statuspage Reds） */
.page-status.status-critical {
  background-color: var(--sp-red) !important;
}

/* ===== コンポーネントリスト ===== */
.components-section {
  background-color: var(--mercari-white);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.component-container {
  border-bottom: 1px solid var(--sp-border);
  padding: 16px 20px;
  transition: background-color 0.2s ease;
}

.component-container:hover {
  background-color: var(--mercari-gray-lighter);
}

.component-container:last-child {
  border-bottom: none;
}

.component-container .name {
  font-weight: 500;
  color: var(--mercari-black);
}

/* コンポーネントステータスアイコン */
.component-status {
  font-size: 13px;
  font-weight: 500;
}

.component-status.status-green {
  color: var(--sp-green) !important;
}

.component-status.status-yellow {
  color: var(--sp-yellow) !important;
}

.component-status.status-orange {
  color: var(--sp-orange) !important;
}

.component-status.status-red {
  color: var(--sp-red) !important;
}

/* ===== インシデント履歴 ===== */
.incidents-list {
  margin-top: 32px;
}

/* 更新情報: 障害タイトルのみ表示（詳細なステータス更新は非表示） */
.incidents-list .incident-update {
  display: none !important;
}

/* 「更新情報」見出しを中央揃え */
.incidents-list h4,
h4#past-incidents,
h4:contains("Past Incidents"),
h4:contains("更新情報") {
  text-align: center !important;
}

/* 障害タイトル（Past Incidents一覧・詳細ページはデフォルト色） */
.incidents-list .incident-title,
.incidents-list .incident-title a,
.incident-name,
.incident-name a,
body.incident-page .incident-name,
body.incident-page h1.incident-name {
  color: var(--mercari-black) !important;
}

.incident-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
}

.incident-title a {
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.incident-title a:hover,
.incident-name a:hover {
  opacity: 0.85;
}

.incident-update {
  padding: 12px 0;
  border-left: 3px solid var(--mercari-gray-light);
  padding-left: 16px;
  margin-left: 8px;
}

.incident-update .update-title {
  font-weight: 600;
  color: var(--mercari-gray-dark);
}

.incident-update .update-body {
  color: var(--mercari-gray);
  margin-top: 4px;
  line-height: 1.6;
}

.incident-update .update-timestamp {
  color: var(--mercari-gray-light);
  font-size: 12px;
  margin-top: 8px;
}

/* ===== 購読ボタン（非表示設定のため、このセクションは無効化）===== */
/* 購読ボタンを表示する場合は、上部の display: none を削除し、以下のコメントを解除してください
.btn-subscribe,
.btn.subscribe {
  background-color: var(--mercari-red) !important;
  border-color: var(--mercari-red) !important;
  color: var(--mercari-white) !important;
  border-radius: 24px !important;
  padding: 10px 24px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.btn-subscribe:hover,
.btn.subscribe:hover {
  background-color: var(--mercari-red-dark) !important;
  border-color: var(--mercari-red-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 2, 17, 0.3);
}
*/

/* ===== カスタムフッター ===== */
.custom-footer {
  background-color: #F5F5F5;
  color: #333333;
  padding: 40px 0;
  margin-top: 60px;
}

.custom-footer .footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.custom-footer .footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid #E0E0E0;
}

.custom-footer .footer-logo img {
  height: 28px;
}

.custom-footer .footer-links {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}

.custom-footer .footer-links-column h4 {
  color: #333333;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
}

.custom-footer .footer-links-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.custom-footer .footer-links-column li {
  margin-bottom: 12px;
}

.custom-footer .footer-links-column a {
  color: #666666;
  text-decoration: none;
  font-size: 13px;
  transition: color 0.2s ease;
}

.custom-footer .footer-links-column a:hover {
  color: #333333;
}

.custom-footer .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 24px;
}

.custom-footer .copyright {
  color: #666666;
  font-size: 12px;
}

.custom-footer .social-links {
  display: flex;
  gap: 16px;
}

.custom-footer .social-links a {
  color: #666666;
  transition: color 0.2s ease;
}

.custom-footer .social-links a:hover {
  color: #333333;
}

.custom-footer .social-links svg {
  width: 20px;
  height: 20px;
}

/* ===== レスポンシブ対応 ===== */
@media (max-width: 768px) {
  .custom-header .header-inner {
    flex-direction: column;
    gap: 16px;
  }

  .custom-header .nav-links {
    flex-wrap: wrap;
    justify-content: center;
  }

  .custom-footer .footer-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .custom-footer .footer-links {
    justify-content: center;
  }

  .custom-footer .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  /* 障害詳細ページ: スマホ向け調整 */
  body.incident-page h1,
  body.incident-page .incident-name,
  body:has(.incident-updates) h1,
  body:has(.incident-updates) .incident-name,
  #incident-title-placeholder h1 {
    line-height: 1.4 !important;
  }

  /* 障害詳細ページ: ステータスとMessageを縦並びに（スマホのみ） */
  /* .update-row: h2.update-title(span3) + .update-container(span9) の構造 */
  body.incident-page .update-row,
  body:has(.incident-updates) .update-row {
    display: flex !important;
    flex-direction: column !important;
  }
  body.incident-page .update-row .update-title,
  body.incident-page .update-row h2,
  body:has(.incident-updates) .update-row .update-title,
  body:has(.incident-updates) .update-row h2 {
    width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 0 !important;
  }
  body.incident-page .update-row .update-container,
  body.incident-page .update-row .span9,
  body:has(.incident-updates) .update-row .update-container,
  body:has(.incident-updates) .update-row .span9 {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* スマホのみ: ステータス（解決済み、監視中など）を左揃え */
  body.incident-page h2,
  body.incident-page .update-title,
  body:has(.incident-updates) h2,
  body:has(.incident-updates) .update-title {
    text-align: left !important;
  }
}

/* ===== アニメーション ===== */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.status-indicator.active {
  animation: pulse 2s ease-in-out infinite;
}

/* ===== その他の調整 ===== */
/* リンク色（Statuspage Link color） */
a {
  color: var(--sp-link);
}

a:hover {
  opacity: 0.85;
}

/* 選択時のハイライト */
::selection {
  background-color: var(--sp-link);
  color: var(--sp-body-bg);
}

/* スクロールバー（Webkit系ブラウザ） */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--mercari-gray-lighter);
}

::-webkit-scrollbar-thumb {
  background: var(--mercari-gray-light);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--mercari-gray);
}