/**
 * Homemade CMS - コンテンツ表示用スタイル
 *
 * CMSから取得したMarkdownコンテンツをHTML表示する際に使用するスタイル。
 * APIクライアントの getContentStyleUrl() メソッドでURLを取得し、
 * <link rel="stylesheet"> で読み込んで使用します。
 *
 * 使い方:
 *   <link rel="stylesheet" href="<?= $cms->getContentStyleUrl() ?>">
 *   <div class="hcms-content">
 *     <?= $article['body'] ?>
 *   </div>
 *
 * メインクラス: .hcms-content
 * エイリアス: .prose（後方互換用）
 */

/* ベーススタイル */
.hcms-content,
.prose {
    color: #374151;
    line-height: 1.75;
}

/* 見出し */
.hcms-content h1, .hcms-content h2, .hcms-content h3, .hcms-content h4,
.prose h1, .prose h2, .prose h3, .prose h4 {
    color: #111827;
    font-weight: 700;
    margin-top: 2em;
    margin-bottom: 0.5em;
}

.hcms-content h1, .prose h1 { font-size: 2.25em; }
.hcms-content h2, .prose h2 { font-size: 1.875em; }
.hcms-content h3, .prose h3 { font-size: 1.5em; }
.hcms-content h4, .prose h4 { font-size: 1.25em; }

/* 段落 */
.hcms-content p, .prose p {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

/* リンク */
.hcms-content a, .prose a {
    color: #029BAE;
    text-decoration: underline;
}

.hcms-content a:hover, .prose a:hover {
    color: #007682;
}

/* 強調 */
.hcms-content strong, .prose strong {
    color: #111827;
    font-weight: 600;
}

/* リスト */
.hcms-content ul, .hcms-content ol,
.prose ul, .prose ol {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-left: 1.625em;
}

.hcms-content ul, .prose ul { list-style-type: disc; }
.hcms-content ol, .prose ol { list-style-type: decimal; }

.hcms-content li, .prose li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

/* 引用 */
.hcms-content blockquote, .prose blockquote {
    border-left: 4px solid #e5e7eb;
    padding-left: 1em;
    color: #6b7280;
    font-style: italic;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

/* コードブロック */
.hcms-content pre, .prose pre {
    background-color: #1f2937;
    color: #e5e7eb;
    padding: 1em;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

/* インラインコード */
.hcms-content code, .prose code {
    background-color: #f3f4f6;
    padding: 0.25em 0.5em;
    border-radius: 0.25rem;
    font-size: 0.875em;
}

.hcms-content pre code, .prose pre code {
    background-color: transparent;
    padding: 0;
}

/* 画像 */
.hcms-content img, .prose img {
    max-width: 100%;
    height: auto;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    border-radius: 0.5rem;
}

/* 水平線 */
.hcms-content hr, .prose hr {
    border-color: #e5e7eb;
    margin-top: 2em;
    margin-bottom: 2em;
}

/* テーブル */
.hcms-content table, .prose table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

.hcms-content th, .hcms-content td,
.prose th, .prose td {
    border: 1px solid #e5e7eb;
    padding: 0.75em;
    text-align: left;
}

.hcms-content th, .prose th {
    background-color: #f9fafb;
    font-weight: 600;
}

/* タスクリスト（GFMチェックボックス） */
.hcms-content ul.contains-task-list,
.prose ul.contains-task-list {
    list-style-type: none;
    padding-left: 0;
}

.hcms-content .task-list-item, .prose .task-list-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5em;
}

.hcms-content .task-list-item input[type="checkbox"],
.prose .task-list-item input[type="checkbox"] {
    margin-top: 0.35em;
}

/* 目次（Table of Contents） */
.hcms-content nav.table-of-contents,
.prose nav.table-of-contents {
    background-color: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1.25em 1.5em;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

.hcms-content nav.table-of-contents details,
.prose nav.table-of-contents details {
    margin: 0;
}

.hcms-content nav.table-of-contents summary,
.prose nav.table-of-contents summary {
    font-weight: 700;
    font-size: 1em;
    color: #111827;
    cursor: pointer;
    padding-bottom: 0.5em;
    margin-bottom: 0.75em;
    border-bottom: 2px solid #029BAE;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* デフォルトの三角マーカーを非表示 */
.hcms-content nav.table-of-contents summary::-webkit-details-marker,
.prose nav.table-of-contents summary::-webkit-details-marker {
    display: none;
}

/* 開閉アイコン */
.hcms-content nav.table-of-contents summary::after,
.prose nav.table-of-contents summary::after {
    content: "";
    width: 0.5em;
    height: 0.5em;
    border-right: 2px solid #6b7280;
    border-bottom: 2px solid #6b7280;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    margin-left: 0.5em;
}

/* 開いている状態のアイコン（上向き） */
.hcms-content nav.table-of-contents details[open] > summary::after,
.prose nav.table-of-contents details[open] > summary::after {
    transform: rotate(-135deg);
}

.hcms-content nav.table-of-contents ol,
.prose nav.table-of-contents ol {
    margin: 0;
    padding-left: 0;
    list-style-type: none;
}

/* 1階層目: CSSカウンターで "1. " "2. " 形式 */
.hcms-content nav.table-of-contents details > ol,
.prose nav.table-of-contents details > ol {
    counter-reset: toc-h2;
}

.hcms-content nav.table-of-contents details > ol > li,
.prose nav.table-of-contents details > ol > li {
    counter-increment: toc-h2;
    counter-reset: toc-h3;
}

.hcms-content nav.table-of-contents details > ol > li > a::before,
.prose nav.table-of-contents details > ol > li > a::before {
    content: counter(toc-h2) ". ";
}

/* 2階層目: "2.1 " "2.2 " 形式 */
.hcms-content nav.table-of-contents details > ol > li > ol,
.prose nav.table-of-contents details > ol > li > ol {
    padding-left: 1.5em;
}

.hcms-content nav.table-of-contents details > ol > li > ol > li,
.prose nav.table-of-contents details > ol > li > ol > li {
    counter-increment: toc-h3;
}

.hcms-content nav.table-of-contents details > ol > li > ol > li > a::before,
.prose nav.table-of-contents details > ol > li > ol > li > a::before {
    content: counter(toc-h2) "." counter(toc-h3) " ";
}

.hcms-content nav.table-of-contents li,
.prose nav.table-of-contents li {
    margin-top: 0.375em;
    margin-bottom: 0.375em;
    line-height: 1.5;
}

.hcms-content nav.table-of-contents a,
.prose nav.table-of-contents a {
    color: #029BAE;
    text-decoration: none;
}

.hcms-content nav.table-of-contents a:hover,
.prose nav.table-of-contents a:hover {
    color: #007682;
    text-decoration: underline;
}