/*
Theme Name: Coral Pepper
Theme URI: https://coralpepper.com/
Author: Kiyoshi
Description: くだらない系キュレーションメディア用テーマ。図書館の資料カードのように、くだらない投稿を大真面目にアーカイブする体裁。
Version: 0.2.0
Requires PHP: 7.4
Text Domain: coralpepper
*/

:root {
  --cp-paper: #f2e9d8;
  --cp-card: #faf5e9;
  --cp-ink: #2b2620;
  --cp-muted: #8a7f6a;
  --cp-line: #cdba92;
  --cp-stamp-food: #a8341f;
  --cp-stamp-cute: #2f6b52;
  --cp-stamp-game: #2b4a78;
  --cp-stamp-pet: #a06a1f;
  --cp-radius: 3px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cp-paper);
  color: var(--cp-ink);
  font-family: "Noto Serif JP", serif;
  line-height: 1.8;
  background-image:
    linear-gradient(var(--cp-paper) 0%, var(--cp-paper) 100%);
}

a { color: inherit; text-decoration: none; }

/* --- ヘッダー --- */
.cp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 3px double var(--cp-ink);
  background: var(--cp-card);
}

.cp-logo {
  font-family: "Special Elite", monospace;
  font-size: 1.5rem;
  letter-spacing: 0.02em;
}

.cp-logo,
.cp-logo img,
.cp-logo .custom-logo {
  height: 52px;
  width: auto;
  display: block;
  max-width: none;
}

.cp-nav { display: flex; gap: 20px; flex-wrap: wrap; }

.cp-nav a {
  font-family: "Special Elite", monospace;
  font-size: 0.82rem;
  padding: 4px 10px;
  border: 1px solid var(--cp-ink);
  border-radius: var(--cp-radius);
}

.cp-container {
  max-width: 680px;
  margin: 0 auto;
  padding: 32px 16px 64px;
}

/* --- カード（資料カード） --- */
.cp-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.cp-card {
  position: relative;
  background: var(--cp-card);
  border: 1px solid var(--cp-line);
  border-radius: var(--cp-radius);
  padding: 20px 20px 18px;
  box-shadow: 3px 3px 0 rgba(43,38,32,0.08);
}

/* カード全体を覆う透明なリンク。埋め込み内のリンク・iframeより上のレイヤーに
   置くことで、カードのどこをクリックしても単体ページへ遷移し、外部（Reddit/X）
   への離脱を防ぐ */
.cp-card-cover {
  position: absolute;
  inset: 0;
  z-index: 5;
}

/* 一覧表示の埋め込みプレビュー自体はクリック・タップ操作を受け付けない
   （上のcp-card-coverが常に優先される）。単体ページ側のcp-embed-wrapには
   このクラスは付いていないので、そちらは通常通り操作できる */
.cp-peek {
  pointer-events: none;
}

/* 上端の破線＝切り取り線っぽさ */
.cp-card::before {
  content: "";
  position: absolute;
  top: -1px; left: 12px; right: 12px;
  border-top: 1px dashed var(--cp-line);
}

.cp-accession {
  font-family: "Courier Prime", "Special Elite", monospace;
  font-size: 0.72rem;
  color: var(--cp-muted);
  letter-spacing: 0.04em;
}

/* --- カテゴリスタンプ --- */
.cp-stamp {
  position: absolute;
  top: 14px;
  right: 16px;
  font-family: "Special Elite", monospace;
  font-size: 0.72rem;
  padding: 5px 10px;
  border: 2px solid currentColor;
  border-radius: 999px;
  transform: rotate(-7deg);
  opacity: 0.85;
  mix-blend-mode: multiply;
}

.cp-stamp--food { color: var(--cp-stamp-food); border-color: var(--cp-stamp-food); }
.cp-stamp--cute { color: var(--cp-stamp-cute); border-color: var(--cp-stamp-cute); }
.cp-stamp--game { color: var(--cp-stamp-game); border-color: var(--cp-stamp-game); }
.cp-stamp--pet { color: var(--cp-stamp-pet); border-color: var(--cp-stamp-pet); }

.cp-card h2 {
  font-family: "Special Elite", monospace;
  font-size: 1.1rem;
  margin: 10px 0 4px;
  padding-right: 70px;
}

.cp-card h2 a { border-bottom: 1px solid var(--cp-ink); }

/* ルール罫線（カード風） */
.cp-ruled {
  border-top: 1px solid var(--cp-line);
  padding-top: 10px;
  margin-top: 8px;
}

.cp-peek {
  max-height: 420px;
  overflow: hidden;
  position: relative;
}

.cp-peek::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 60px;
  background: linear-gradient(to bottom, rgba(250,245,233,0), var(--cp-card));
  pointer-events: none;
}

.cp-read-more {
  display: inline-block;
  margin-top: 10px;
  font-family: "Special Elite", monospace;
  font-size: 0.78rem;
  border-bottom: 1px dashed var(--cp-ink);
}

/* --- 単体ページ --- */
.cp-single {
  position: relative;
  background: var(--cp-card);
  border: 1px solid var(--cp-line);
  border-radius: var(--cp-radius);
  padding: 28px;
  box-shadow: 4px 4px 0 rgba(43,38,32,0.08);
}

.cp-single h1 {
  font-family: "Special Elite", monospace;
  font-size: 1.5rem;
  margin: 12px 0 6px;
  padding-right: 80px;
}

.cp-embed-wrap { margin: 16px 0; overflow-x: auto; }

/* TikTok埋め込みは元々605px固定幅などが指定されているため、
   スマホでスクロールが発生してしまう。画面幅いっぱいに収まるよう上書きする */
.cp-embed-wrap .tiktok-embed,
.cp-peek .tiktok-embed {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* YouTube埋め込み(iframe)もスマホ幅に収まるよう可変にする。
   通常動画は横長、ショートは縦長なので、比率は固定せずiframe自体の
   width/height属性から自動計算される比率をそのまま活かす */
.cp-embed-wrap iframe,
.cp-peek iframe {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

.cp-source-link {
  display: inline-block;
  margin-top: 14px;
  font-family: "Special Elite", monospace;
  font-size: 0.8rem;
  border-bottom: 1px dashed var(--cp-ink);
}

.cp-meta {
  font-family: "Courier Prime", monospace;
  font-size: 0.78rem;
  color: var(--cp-muted);
}

.cp-nav-posts {
  display: flex;
  justify-content: space-between;
  margin-top: 28px;
  font-family: "Special Elite", monospace;
  font-size: 0.8rem;
}

/* --- シェアボタン --- */
.cp-share {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.cp-share-label {
  font-family: "Special Elite", monospace;
  font-size: 0.78rem;
  color: var(--cp-muted);
}

.cp-share-btn {
  font-family: "Special Elite", monospace;
  font-size: 0.78rem;
  padding: 6px 14px;
  border: 1px solid var(--cp-ink);
  border-radius: 999px;
  background: var(--cp-card);
  cursor: pointer;
}

.cp-share-btn--x { border-color: #2b2620; }
.cp-share-btn--line { border-color: #06c755; color: #06c755; }
.cp-share-btn--ig { border-color: #c1442a; color: #c1442a; }

/* --- 固定ページ --- */
.cp-page-content { margin-top: 12px; }
.cp-page-content h2 { font-family: "Special Elite", monospace; font-size: 1.1rem; margin-top: 28px; }
.cp-page-content ul { padding-left: 1.2em; }
.cp-page-content a { border-bottom: 1px dashed var(--cp-ink); }

/* --- フッター --- */
.cp-footer-links {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-bottom: 8px;
  font-family: "Special Elite", monospace;
  font-size: 0.75rem;
}

.cp-footer {
  text-align: center;
  padding: 32px 16px;
  color: var(--cp-muted);
  font-family: "Courier Prime", monospace;
  font-size: 0.72rem;
  border-top: 3px double var(--cp-ink);
}