@charset "UTF-8";
/*
Theme Name: 栞 / shiori
Author: su project
Description: 読むためだけのテーマ。
Version: 1.0
Requires at least: 6.2
Tested up to: 6.4
License: GNU General Public License v2 or later
Text Domain: shiori
*/

/* ==========================================
	ダークモード(標準)を設定
	========================================== */
:root {
	--wp--preset--color--main-base: var(--wp--preset--color--base-dark) !important;
	--wp--preset--color--main-base-2: var(--wp--preset--color--base-2-dark) !important;
	--wp--preset--color--main-contrast: var(--wp--preset--color--contrast-dark) !important;
	--wp--preset--color--main-contrast-2: var(--wp--preset--color--contrast-2-dark) !important;
	--wp--preset--color--main-contrast-3: var(--wp--preset--color--contrast-3-dark) !important;
	--wp--preset--color--main-accent: var(--wp--preset--color--accent-dark) !important;
}


/* ==========================================
	OSの設定によってライトモードを設定
	========================================== */
@media (prefers-color-scheme: light) {
	:root {
		--wp--preset--color--main-base: var(--wp--preset--color--base-light) !important;
		--wp--preset--color--main-base-2: var(--wp--preset--color--base-2-light) !important;
		--wp--preset--color--main-contrast: var(--wp--preset--color--contrast-light) !important;
		--wp--preset--color--main-contrast-2: var(--wp--preset--color--contrast-2-light) !important;
		--wp--preset--color--main-contrast-3: var(--wp--preset--color--contrast-3-light) !important;
		--wp--preset--color--main-accent: var(--wp--preset--color--accent-light) !important;
	}
}


/* ダークモード時、画像の眩しさを少し抑える（OS設定基準） */
@media (prefers-color-scheme: dark) {
    img {
        filter: brightness(0.8) contrast(1.1);
        transition: filter 0.3s ease;
    }
    img:hover {
        filter: brightness(1); /* ホバーした時だけ本来の明るさに */
    }
}


/* ==================
文字の両端を揃える
===================*/
/* 本文と抜粋の段落を両端揃えにする。
   ただし、「特定の配置（左・中・右）が指定されていないもの」だけに限定する 
*/
.wp-block-post-content > p:not([class*="has-text-align-"]), 
.wp-block-post-excerpt > p:not([class*="has-text-align-"]) {
    text-align: justify;
    text-justify: inter-character;
}

/* もしフッターが post-content の中に入ってしまっている場合でも、
   明示的に中央揃えが指定されているものは、それを絶対優先する設定 
*/
.has-text-align-center {
    text-align: center !important;
}
.has-text-align-right {
    text-align: right;
}
.has-text-align-left {
    text-align: left;
}


/* ==========================================
   クエリカード
   ========================================== */
.my-query-card {
    display: block;
    margin: 0 auto 2rem;
    padding: 1.5rem 2rem;
    border-radius: 1.25rem;
    max-width: 40rem;
    background-color: transparent;
    border: 0.0625rem solid var(--wp--preset--color--main-contrast-3);
    transition: border-color 0.4s ease;
}

.my-query-card:hover {
    border-color: var(--wp--preset--color--main-contrast);
}

.my-query-card .wp-block-post-title a {
	color: var(--wp--preset--color--main-contrast) !important;
	text-decoration: none;
}


/* ==========================================
   残した表現要素の装飾（質感統一）
   ========================================== */

/* 引用・プルクオート */
blockquote, .wp-block-quote, .wp-block-pullquote {
    border-left: 0.25rem solid var(--wp--preset--color--main-accent);
    padding: 1.5rem 2rem;
    margin: 2.5rem 0;
    background: transparent;
    border-radius: 0 1rem 1rem 0;
    font-style: italic;
	color: var(--wp--preset--color--main-contrast-2)
}

/* コード・整形済みテキスト */
code, pre, .wp-block-code, .wp-block-preformatted {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    background: var(--wp--preset--color--main-base-2); /* コード部分は少し深く沈める */
    color: var(--wp--preset--color--main-accent);
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--wp--preset--color--main-contrast-3);
}

/* 詳細（Details）/ アコーディオン */
details {
    background: transparent;
    border: 1px solid var(--wp--preset--color--main-contrast-3);
    padding: 1rem 1rem;
    border-radius: 1rem;
    transition: all 0.3s ease;
}

summary {
	list-style: none;
	color: var(--wp--preset--color--main-contrast-2);
}

summary:hover{
	color: var(--wp--preset--color--main-contrast);
}


/* ==========================================
   ボタンの質感設定（カプセル・アニメーション）
   ========================================== */

/* 1. 基本の形と動き */
.wp-block-button__link {
    /* JSONで設定しきれない「滑らかな動き」を補完 */
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 2. PCでのホバー：ふわっと浮き上がり、境界線をハッキリさせる */
@media (hover: hover) {
	.wp-block-button__link:hover {
		transform: translateY(-0.125rem);
 		border-color: var(--wp--preset--color--main-contrast) !important;
		opacity: 0.9;
	}
}

/* 3. スマホ/タッチパネルでの反応（アクティブ状態） */
/* 指で押している間だけ「クッ」と沈む演出。これで「押した感」が出ます */
.wp-block-button__link:active {
	transform: scale(0.95);
	filter: brightness(0.9);
	transition: all 0.1s; /* 押した時は素早く反応させる */
}

/* ===========================
	サイトタイトル
	=========================== */
/* タップしても、ホバーしても色を変えない設定 */
.wp-block-site-title a:hover,
.wp-block-site-title a:active,
.wp-block-site-title a:focus {
	color: inherit !important;
	opacity: 0.8; /* 色を変える代わりに、少し透かす程度が上品です */
}