/**
 * FCプランニングオフィス - プロジェクトカラー CSS
 * 
 * @package FCプランニングオフィス
 * @author 株式会社Hackusha - 大硲 神
 * @version 1.0.0
 */

/* ==========================================================================
   PROJECT アーカイブページ - カードホバー用スタイル
   ========================================================================== */

.project-card.color-red:hover {
    background-color: #E74C3C !important;
    color: #ffffff;
    border-color: #C0392B;
}

.project-card.color-blue:hover {
    background-color: #3498DB !important;
    color: #ffffff;
    border-color: #2980B9;
}

.project-card.color-green:hover {
    background-color: #2ECC71 !important;
    color: #ffffff;
    border-color: #27AE60;
}

.project-card.color-yellow:hover {
    background-color: #F39C12 !important;
    color: #ffffff;
    border-color: #E67E22;
}

.project-card.color-purple:hover {
    background-color: #9B59B6 !important;
    color: #ffffff;
    border-color: #8E44AD;
}

.project-card.color-black:hover {
    background-color: #2C3E50 !important;
    color: #ffffff;
    border-color: #34495E;
}

.project-card.color-gray:hover {
    background-color: #95A5A6 !important;
    color: #ffffff;
    border-color: #7F8C8D;
}

/* ホバー時のテキストカラー調整 */
.project-card:hover h2,
.project-card:hover h3,
.project-card:hover p,
.project-card:hover a {
    color: inherit;
}

/* ==========================================================================
   PROJECT 詳細ページ - 背景色用スタイル
   ========================================================================== */

/* 基本の背景グラデーション */
body.color-red {
    background: linear-gradient(135deg, #E74C3C 0%, #C0392B 100%);
    color: #ffffff;
}

body.color-blue {
    background: linear-gradient(135deg, #3498DB 0%, #2980B9 100%);
    color: #ffffff;
}

body.color-green {
    background: linear-gradient(135deg, #2ECC71 0%, #27AE60 100%);
    color: #ffffff;
}

body.color-yellow {
    background: linear-gradient(135deg, #F39C12 0%, #E67E22 100%);
    color: #ffffff;
}

body.color-purple {
    background: linear-gradient(135deg, #9B59B6 0%, #8E44AD 100%);
    color: #ffffff;
}

body.color-black {
    background: linear-gradient(135deg, #19242e 0%, #080909 100%);
    color: #ffffff;
}

body.color-gray {
    background: linear-gradient(135deg, #95A5A6 0%, #7F8C8D 100%);
    color: #ffffff;
}

/* ==========================================================================
   PROJECT 詳細ページ - テキスト要素の色指定
   ========================================================================== */

/* RED カラーのテキスト要素（main.site-main内のみ） */
body.color-red main.site-main h1,
body.color-red main.site-main h2,
body.color-red main.site-main h3,
body.color-red main.site-main h4,
body.color-red main.site-main h5,
body.color-red main.site-main h6,
body.color-red main.site-main p,
body.color-red main.site-main span,
body.color-red main.site-main a,
body.color-red main.site-main li,
body.color-red main.site-main div {
    color: var(--color-white) !important;
}

/* BLUE カラーのテキスト要素（main.site-main内のみ） */
body.color-blue main.site-main h1,
body.color-blue main.site-main h2,
body.color-blue main.site-main h3,
body.color-blue main.site-main h4,
body.color-blue main.site-main h5,
body.color-blue main.site-main h6,
body.color-blue main.site-main p,
body.color-blue main.site-main span,
body.color-blue main.site-main a,
body.color-blue main.site-main li,
body.color-blue main.site-main div {
    color: var(--color-white) !important;
}

/* GREEN カラーのテキスト要素（main.site-main内のみ） */
body.color-green main.site-main h1,
body.color-green main.site-main h2,
body.color-green main.site-main h3,
body.color-green main.site-main h4,
body.color-green main.site-main h5,
body.color-green main.site-main h6,
body.color-green main.site-main p,
body.color-green main.site-main span,
body.color-green main.site-main a,
body.color-green main.site-main li,
body.color-green main.site-main div {
    color: var(--color-white) !important;
}

/* YELLOW カラーのテキスト要素（main.site-main内のみ） */
body.color-yellow main.site-main h1,
body.color-yellow main.site-main h2,
body.color-yellow main.site-main h3,
body.color-yellow main.site-main h4,
body.color-yellow main.site-main h5,
body.color-yellow main.site-main h6,
body.color-yellow main.site-main p,
body.color-yellow main.site-main span,
body.color-yellow main.site-main a,
body.color-yellow main.site-main li,
body.color-yellow main.site-main div {
    color: var(--color-white) !important;
}

/* PURPLE カラーのテキスト要素（main.site-main内のみ） */
body.color-purple main.site-main h1,
body.color-purple main.site-main h2,
body.color-purple main.site-main h3,
body.color-purple main.site-main h4,
body.color-purple main.site-main h5,
body.color-purple main.site-main h6,
body.color-purple main.site-main p,
body.color-purple main.site-main span,
body.color-purple main.site-main a,
body.color-purple main.site-main li,
body.color-purple main.site-main div {
    color: var(--color-white) !important;
}

/* BLACK カラーのテキスト要素（main.site-main内のみ） */
body.color-black main.site-main h1,
body.color-black main.site-main h2,
body.color-black main.site-main h3,
body.color-black main.site-main h4,
body.color-black main.site-main h5,
body.color-black main.site-main h6,
body.color-black main.site-main p,
body.color-black main.site-main span,
body.color-black main.site-main a,
body.color-black main.site-main li,
body.color-black main.site-main div {
    color: var(--color-white) !important;
}

/* GRAY カラーのテキスト要素（main.site-main内のみ） */
body.color-gray main.site-main h1,
body.color-gray main.site-main h2,
body.color-gray main.site-main h3,
body.color-gray main.site-main h4,
body.color-gray main.site-main h5,
body.color-gray main.site-main h6,
body.color-gray main.site-main p,
body.color-gray main.site-main span,
body.color-gray main.site-main a,
body.color-gray main.site-main li,
body.color-gray main.site-main div {
    color: var(--color-black) !important;
}

/* コンテンツエリアの背景を透明にしてテキスト色を活かす */
body[class*="color-"] .site-content {
    background: rgba(255, 255, 255, 0.95);
    color: inherit; /* 親要素の色を継承 */
    margin: 20px auto;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* リンクのホバー効果も統一（main.site-main内のみ） */
body.color-red main.site-main a:hover { color: var(--color-white) !important; }
body.color-blue main.site-main a:hover { color: var(--color-white) !important; }
body.color-green main.site-main a:hover { color: var(--color-white) !important; }
body.color-yellow main.site-main a:hover { color: var(--color-white) !important; }
body.color-purple main.site-main a:hover { color: var(--color-white) !important; }
body.color-black main.site-main a:hover { color: var(--color-white) !important; }
body.color-gray main.site-main a:hover { color: var(--color-black) !important; }

/* ==========================================================================
   コンテンツ領域の調整
   ========================================================================== */

/* 背景色が設定されている場合のコンテンツエリア調整 */
body[class*="color-"] .site-content {
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-black);
    margin: 20px auto;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

/* ==========================================================================
   レスポンシブ対応
   ========================================================================== */

@media (max-width: 767px) {
    body[class*="color-"] .site-content {
        margin: 10px;
        border-radius: 5px;
    }
    
    body[class*="color-"] .site-content .entry-content {
        padding: 20px;
    }
}

/* ==========================================================================
   アニメーション効果
   ========================================================================== */

.project-card {
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.project-card:hover {
    transform: translateY(-8px) scale(1.02);
}

/* 詳細ページのフェードイン効果 */
body[class*="color-"] .site-content {
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
} 

/* Elementor用プロジェクトカラーホバー */
.project-item.color-red:hover { background-color: #E6724F !important; }
.project-item.color-blue:hover { background-color: #8FCEEE !important; }
.project-item.color-green:hover { background-color: #4FAF76 !important; }
.project-item.color-yellow:hover { background-color: #EEC85C !important; }
.project-item.color-purple:hover { background-color: #A97B86 !important; }
.project-item.color-black:hover { background-color: #1C1C1C !important; }
.project-item.color-gray:hover { background-color: #BDB7B2 !important; }

.project-item:hover {
    color: #ffffff;
/*    transform: translateY(-8px) scale(1.02); */
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}