/*
Theme Name: Twenty Twenty-Five Child
Template: twentytwentyfive
Description: Child theme for Twenty Twenty-Five (FSE)
Version: 1.0.0
*/

/* Twenty Twenty-Five FSE テーマの基本スタイル復元 */
:root {
    --wp--preset--color--base: #ffffff;
    --wp--preset--color--contrast: #000000;
    --wp--preset--color--primary: #1a1a1a;
    --wp--preset--color--secondary: #ffffff;
    --wp--preset--color--tertiary: #f0f0f0;
    --wp--preset--color--accent: #28a745;
    --wp--preset--color--accent-2: #007cba;
    --wp--preset--color--accent-3: #69717a;
    --wp--preset--color--accent-4: #e2e4e7;
    --wp--preset--color--accent-5: #f6f7f7;
    
    /* フォントサイズ */
    --wp--preset--font-size--small: 0.875rem;
    --wp--preset--font-size--medium: 1rem;
    --wp--preset--font-size--large: 1.125rem;
    --wp--preset--font-size--x-large: 1.5rem;
    
    /* スペーシング */
    --wp--preset--spacing--20: 0.5rem;
    --wp--preset--spacing--30: 1rem;
    --wp--preset--spacing--40: 1.5rem;
    --wp--preset--spacing--50: 2rem;
    --wp--preset--spacing--60: 3rem;
    
    /* カスタム色の定義 */
    --custom-dark-green: #1b4d3e !important; /* 濃い緑色 */
    --custom-light-green: #2d6e4f !important; /* 少し明るい緑 */
    --custom-white: #ffffff !important;
    --custom-black: #000000 !important;
    --custom-light-gray: #f8f9fa !important;
    --custom-gray: #f0f0f0 !important;
}

/* 基本的なHTML/Body設定 */
html {
    background-color: var(--custom-dark-green) !important;
    font-size: 16px;
    line-height: 1.5;
}

body {
    background-color: var(--custom-white) !important;
    color: var(--custom-black) !important;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    margin: 0 !important;
    padding: 0 !important;
}

/* 診断用：テストメッセージ */
body::before {
    content: "✅ CSSは正常に読み込まれています。Twenty Twenty-Five Child テーマが動作中です。" !important;
    display: block !important;
    background-color: var(--custom-dark-green) !important;
    color: var(--custom-white) !important;
    padding: 15px !important;
    font-size: 16px !important;
    text-align: center !important;
    font-weight: bold !important;
    position: relative !important;
    z-index: 9999 !important;
}

/* WordPress FSEの主要コンテナ */
.wp-site-blocks {
    background-color: var(--custom-white) !important;
    color: var(--custom-black) !important;
    padding: 0;
    margin: 0;
}

/* FSEブロックの基本設定 */
.wp-block-group {
    background-color: var(--custom-white);
    color: var(--custom-black);
}

/* ヘッダー */
.wp-block-template-part {
    background-color: var(--custom-dark-green) !important;
    color: var(--custom-white) !important;
    padding: 20px !important;
}

/* ヘッダー内の全ての要素 */
.wp-block-template-part *,
.wp-block-template-part .wp-block-group,
.wp-block-template-part .wp-block-site-title,
.wp-block-template-part .wp-block-site-title a {
    background-color: var(--custom-dark-green) !important;
    color: var(--custom-white) !important;
}

/* サイトタイトル */
.wp-block-site-title a {
    color: var(--custom-white) !important;
    font-size: 24px !important;
    font-weight: bold !important;
    text-decoration: none !important;
}

/* ナビゲーションメニュー（統一版） */
.wp-block-navigation {
    background-color: var(--custom-dark-green) !important;
}

.wp-block-navigation a {
    color: var(--custom-white) !important;
    background-color: var(--custom-dark-green) !important;
    border: 1px solid var(--custom-dark-green) !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    margin: 0 5px !important;
    text-decoration: none !important;
}

.wp-block-navigation a:hover {
    background-color: var(--custom-light-green) !important;
    border-color: var(--custom-light-green) !important;
    color: var(--custom-white) !important;
}

/* メインコンテンツ */
main {
    background-color: var(--custom-white) !important;
    color: var(--custom-black) !important;
    padding: 20px !important;
}

.wp-block-post-content,
.wp-block-query-loop,
.entry-content {
    background-color: var(--custom-light-gray) !important;
    color: var(--custom-black) !important;
    padding: 30px !important;
    margin: 20px 0 !important;
    border-radius: 8px !important;
}

/* 投稿とページのコンテンツ */
.wp-block-post-title,
.wp-block-post-excerpt,
.wp-block-post-content {
    color: var(--custom-black) !important;
}

/* すべてのテキスト要素 */
h1, h2, h3, h4, h5, h6, p, span, div, li {
    color: var(--custom-black) !important;
}

/* 引用文 */
.wp-block-quote {
    background-color: var(--custom-gray) !important;
    color: #333333 !important;
    padding: 20px !important;
    border-left: 4px solid var(--custom-dark-green) !important;
    border-radius: 4px !important;
}

.wp-block-quote p {
    color: #333333 !important;
    font-style: italic !important;
    font-size: 18px !important;
}

.wp-block-quote cite {
    color: #666666 !important;
    font-weight: bold !important;
}

/* フッター */
footer,
.wp-block-template-part[data-area="footer"] {
    background-color: var(--custom-dark-green) !important;
    color: var(--custom-white) !important;
    padding: 40px 20px !important;
}

/* フッター内の全ての要素 */
footer *,
.wp-block-template-part[data-area="footer"] * {
    color: var(--custom-white) !important;
}

/* フッターのサイトタイトルとタグライン */
footer .wp-block-site-title a,
footer .wp-block-site-tagline {
    color: var(--custom-white) !important;
    text-decoration: none !important;
}

/* フッターナビゲーション */
footer .wp-block-navigation a {
    color: var(--custom-white) !important;
    background-color: var(--custom-dark-green) !important;
    border: 1px solid var(--custom-dark-green) !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    margin: 5px !important;
    text-decoration: none !important;
    display: inline-block !important;
}

footer .wp-block-navigation a:hover {
    background-color: var(--custom-light-green) !important;
    border-color: var(--custom-light-green) !important;
    color: var(--custom-white) !important;
}

/* 画像の表示を強制 - 完全版 */
img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    background-color: transparent !important;
}

.wp-block-image img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    background-color: transparent !important;
}

/* 特定の画像クラスの強制表示 */
.wp-image-98,
img[class*="wp-image"] {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    max-width: 100% !important;
    height: auto !important;
}

/* 画像のコンテナの強制表示 */
.wp-block-image {
    margin: 20px 0 !important;
    text-align: center !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 列レイアウトの修正 */
.wp-block-columns {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
}

.wp-block-column {
    flex: 1 !important;
    min-width: 200px !important;
}

/* 画像の緊急表示対策 */
.wp-block-column img {
    background-color: #f0f0f0 !important;
    border: 2px dashed #ccc !important;
    min-height: 200px !important;
    display: block !important;
    position: relative !important;
}

/* 画像が読み込まれない場合の代替表示 */
img:not([src]),
img[src=""] {
    background-color: #f0f0f0 !important;
    border: 2px dashed #ccc !important;
    min-height: 200px !important;
    display: block !important;
    position: relative !important;
}

img:not([src])::before,
img[src=""]::before {
    content: "画像が読み込まれていません" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    color: #666 !important;
    font-size: 14px !important;
}

/* リンク */
a {
    color: var(--custom-light-green) !important;
    text-decoration: underline !important;
}

a:hover {
    color: var(--custom-dark-green) !important;
}

/* ロゴの表示 */
.wp-block-site-logo img,
.custom-logo {
    max-width: 100px !important;
    height: auto !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 特定の要素の強制表示 */
.wp-block-site-tagline {
    color: var(--custom-white) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 親テーマのスタイルを継承 */
/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
    text-decoration-thickness: 1px !important;
    text-underline-offset: .1em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
    outline-width: 2px;
    outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
    margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
    outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
    text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
    display: block;
}

/* デバッグ用：可視性を確保 */
.wp-block-group,
.wp-block-cover,
.wp-block-columns,
.wp-block-media-text {
    min-height: 50px;
    background-color: var(--custom-white);
    color: var(--custom-black);
}

/* 緊急時のレイアウト修正 */
.wp-site-blocks > * {
    background-color: var(--custom-white);
    color: var(--custom-black);
}

/* コンテンツが空の場合の最小表示 */
.wp-site-blocks:empty::before {
    content: "サイトコンテンツを読み込み中...";
    display: block;
    padding: 2rem;
    text-align: center;
    background-color: #f8f9fa;
    color: #333;
}