/**
 * Yukemurigarage: 湯けむりガレージテーマ（横展開対応版）
 * 複数ページ・カテゴリに簡単に適用できる汎用テーマシステム
 * SWELLでは#body_wrapにbody_class()が適用されるため、セレクターを修正
 */

/*
 * ===============================================
 * 1. 湯けむりガレージテーマの基本色定義
 * ===============================================
 * CSS変数を使用してテーマカラーを一元管理
 * 色の変更は:root部分を修正するだけで全体に反映されます
 */
:root {
    --yukemuri-bg: #000000;         /* 背景色（黒） */
    --yukemuri-text: #ffffff;       /* 基本の文字色（白） */
    --yukemuri-main: #ad00cc;       /* メインカラー・アクセント（紫） */
    --yukemuri-link: #13f72a;       /* リンクの色（緑） */
    --yukemuri-border: rgba(173, 0, 204, 0.3); /* 境界線の色（紫の半透明） */
}

/*
 * ===============================================
 * 2. 湯けむりガレージテーマ対象ページ・カテゴリの指定（横展開対応版）
 * ===============================================
 * 新しいページにテーマを適用したい場合は、functions.php の
 * get_yukemurigarage_theme_pages() 関数に設定を追加してください。
 * 
 * 横展開システム対応版では、統一クラス yukemurigarage-theme-page を使用し、
 * 既存の個別セレクターも維持してフォールバックとして機能させます。
 */
#body_wrap.yukemurigarage-theme-page, /* 横展開システム統一クラス */
#body_wrap.page-yukemurigarage,       /* 湯けむりガレージページ */
#body_wrap.page-faq,                  /* FAQページ（スラッグベース） */
#body_wrap.page-id-9794,              /* FAQページ（IDベース） */
#body_wrap.id_9794,                   /* FAQページ（SWELL独自IDクラス） */
#body_wrap.category-yukemulog,        /* 湯けむログカテゴリー（スラッグベース） */
#body_wrap.category-50                /* 湯けむログカテゴリー（IDベース） */ {
    /* SWELLのCSS変数を湯けむりガレージテーマカラーで上書き */
    --color_bg: var(--yukemuri-bg);
    --color_text: var(--yukemuri-text);
    --color_main: var(--yukemuri-main);
    --color_htag: var(--yukemuri-main);
    --color_link: var(--yukemuri-link);
    --color_header_bg: var(--yukemuri-bg);
    --color_header_text: var(--yukemuri-text);
    --color_border: var(--yukemuri-border);
    
    /* 背景色と文字色を直接適用 */
    background-color: var(--yukemuri-bg);
    color: var(--yukemuri-text);
}

/* bodyタグ自体にも背景色を適用（確実性のため） */
#body_wrap.yukemurigarage-theme-page,
#body_wrap.page-yukemurigarage,
#body_wrap.page-faq,
#body_wrap.page-id-9794,
#body_wrap.id_9794,
#body_wrap.category-yukemulog,
#body_wrap.category-50,
body:has(#body_wrap.yukemurigarage-theme-page),
body:has(#body_wrap.page-yukemurigarage),
body:has(#body_wrap.page-faq),
body:has(#body_wrap.page-id-9794),
body:has(#body_wrap.id_9794),
body:has(#body_wrap.category-yukemulog),
body:has(#body_wrap.category-50) {
    background-color: var(--yukemuri-bg);
    color: var(--yukemuri-text);
}

/*
 * ===============================================
 * 3. 湯けむりガレージテーマ共通スタイル
 * ===============================================
 * 以下のスタイルは、上記で指定したすべてのページ・カテゴリに適用されます
 * 新しいページを追加する場合は、セレクター部分のみ更新してください
 */

/* 湯けむりガレージテーマ適用ページの共通セレクター定義 */
#body_wrap.yukemurigarage-theme-page,
#body_wrap.page-yukemurigarage,
#body_wrap.page-faq,
#body_wrap.page-id-9794,
#body_wrap.id_9794,
#body_wrap.category-yukemulog,
#body_wrap.category-50 {
    
    /* リンクにマウスカーソルを乗せたときの効果 */
    & a:hover {
        opacity: 0.8;
    }

    /* コンテンツ内の見出し(h2など)に背景色と余白を追加 */
    & .post_content h2,
    & .post_content .wp-block-heading {
        background-color: var(--color_main);
        color: var(--color_text);
        padding: 0.5em 1em;
        margin-top: 2em;
        margin-bottom: 2em;
    }

    /* ヘッダーの下線をくっきりさせる */
    & .l-header {
        background-color: var(--color_bg);
        color: var(--color_text);
        border-bottom: 1px solid var(--color_main);
    }

    /* パンくずリスト専用スタイル */
    & .p-breadcrumb {
        background-color: var(--color_bg);
        color: var(--color_text);
    }

    & .p-breadcrumb__list {
        background-color: inherit;
        color: inherit;
    }

    /* 固定ヘッダーの透明度制御: SWELLの::before疑似要素システムを活用 */
    & .l-fixHeader::before {
        background-color: var(--color_bg) !important;
    }

    /* 固定ヘッダーのテキスト色 */
    & .l-fixHeader {
        color: var(--color_text);
    }

    /* ヘッダー内のリンクとナビゲーション（通常・固定ヘッダー共通） */
    & .l-header a,
    & .l-fixHeader a,
    & .c-gnav a {
        color: var(--color_text);
    }

    & .c-gnav a:hover {
        color: var(--color_link);
    }

    /* ヘッダーロゴのサイズ調整（通常・固定ヘッダー共通） */
    & .c-headLogo__img {
        transform: scale(1.3);
        transform-origin: left center;
    }

    /* アイコンボタン（ハンバーガーメニュー・検索ボタン）共通スタイル */
    & .l-header__menuBtn .c-iconBtn,
    & .l-header__customBtn .c-iconBtn,
    & .l-header__menuBtn .c-iconBtn__icon,
    & .l-header__customBtn .c-iconBtn__icon {
        color: var(--color_text);
    }

    /* 子メニュー（サブメニュー）の背景色と文字色 */
    & .l-header .c-gnav__subMenu,
    & .l-header .c-gnav .sub-menu,
    & .l-fixHeader .c-gnav__subMenu,
    & .l-fixHeader .c-gnav .sub-menu {
        background-color: var(--yukemuri-bg);
        border: 1px solid var(--yukemuri-border);
    }

    /* 子メニューの::before擬似要素（親テーマの背景継承を上書き） */
    & .l-header .c-gnav .sub-menu:before,
    & .l-fixHeader .c-gnav .sub-menu:before {
        background: var(--yukemuri-bg);
    }

    & .l-header .c-gnav__subMenu a,
    & .l-header .c-gnav .sub-menu a,
    & .l-fixHeader .c-gnav__subMenu a,
    & .l-fixHeader .c-gnav .sub-menu a {
        color: var(--yukemuri-text);
        background-color: var(--yukemuri-bg);
    }

    & .l-header .c-gnav__subMenu a:hover,
    & .l-header .c-gnav .sub-menu a:hover,
    & .l-fixHeader .c-gnav__subMenu a:hover,
    & .l-fixHeader .c-gnav .sub-menu a:hover {
        color: var(--yukemuri-link);
        background-color: rgba(173, 0, 204, 0.1);
    }
}

/* フッター背景色とテキスト色（湯けむりガレージテーマ共通） */
body:has(#body_wrap.yukemurigarage-theme-page) .l-footer,
body:has(#body_wrap.page-yukemurigarage) .l-footer,
body:has(#body_wrap.page-faq) .l-footer,
body:has(#body_wrap.page-id-9794) .l-footer,
body:has(#body_wrap.id_9794) .l-footer,
body:has(#body_wrap.category-yukemulog) .l-footer,
body:has(#body_wrap.category-50) .l-footer,
body:has(#body_wrap.yukemurigarage-theme-page) #footer,
body:has(#body_wrap.page-yukemurigarage) #footer,
body:has(#body_wrap.page-faq) #footer,
body:has(#body_wrap.page-id-9794) #footer,
body:has(#body_wrap.id_9794) #footer,
body:has(#body_wrap.category-yukemulog) #footer,
body:has(#body_wrap.category-50) #footer {
    background-color: var(--yukemuri-bg) !important;
    color: var(--yukemuri-text) !important;
}

body:has(#body_wrap.yukemurigarage-theme-page) .l-footer__inner,
body:has(#body_wrap.page-yukemurigarage) .l-footer__inner,
body:has(#body_wrap.page-faq) .l-footer__inner,
body:has(#body_wrap.page-id-9794) .l-footer__inner,
body:has(#body_wrap.id_9794) .l-footer__inner,
body:has(#body_wrap.category-yukemulog) .l-footer__inner,
body:has(#body_wrap.category-50) .l-footer__inner {
    background-color: var(--yukemuri-bg);
    color: var(--yukemuri-text);
}

body:has(#body_wrap.yukemurigarage-theme-page) .l-footer a,
body:has(#body_wrap.page-yukemurigarage) .l-footer a,
body:has(#body_wrap.page-faq) .l-footer a,
body:has(#body_wrap.page-id-9794) .l-footer a,
body:has(#body_wrap.id_9794) .l-footer a,
body:has(#body_wrap.category-yukemulog) .l-footer a,
body:has(#body_wrap.category-50) .l-footer a {
    color: var(--yukemuri-text);
}

body:has(#body_wrap.yukemurigarage-theme-page) .l-footer a:hover,
body:has(#body_wrap.page-yukemurigarage) .l-footer a:hover,
body:has(#body_wrap.page-faq) .l-footer a:hover,
body:has(#body_wrap.page-id-9794) .l-footer a:hover,
body:has(#body_wrap.id_9794) .l-footer a:hover,
body:has(#body_wrap.category-yukemulog) .l-footer a:hover,
body:has(#body_wrap.category-50) .l-footer a:hover {
    color: var(--yukemuri-link);
    opacity: 0.8;
}

/*
 * ===============================================
 * 4. 新しいページ・カテゴリ追加方法（横展開システム対応版）
 * ===============================================
 * 
 * 湯けむりガレージテーマを新しいページに適用したい場合：
 * 
 * === 推奨方法（横展開システム）===
 * functions.php の get_yukemurigarage_theme_pages() 関数に新しい設定を追加：
 * 
 * 例：新しいページ「about」（ID: 1234）にテーマを適用する場合
 * 
 * 'about_page' => array(
 *     'type' => 'slug',           // 'slug', 'id', 'children', 'url_contains'
 *     'value' => 'about',
 *     'description' => 'Aboutページ'
 * ),
 * 
 * または
 * 
 * 'about_by_id' => array(
 *     'type' => 'id',
 *     'value' => 1234,
 *     'description' => 'Aboutページ（IDベース）'
 * ),
 * 
 * === 手動方法（従来の方法） ===
 * このCSSファイルの3箇所のセレクター群に追加：
 * 
 * 1. 「湯けむりガレージテーマ対象ページ・カテゴリの指定」（行32-36）
 * 2. 「bodyタグ自体にも背景色を適用」（行53-62）
 * 3. 「湯けむりガレージテーマ適用ページの共通セレクター定義」（行76-80）
 * 
 * 推奨は横展開システムの使用です。設定ファイルを変更するだけで
 * 自動的にCSS読み込みとbody_class追加が行われます。
 */