/*
Theme Name: Swell Child Theme - Pet Funeral Navi
Description: Swellテーマの子テーマ。ペット葬儀比較ナビのメインページ用カスタマイズ。記事ページには影響しません。
Author: Pet Funeral Navi
Template: swell
Version: 1.0.0
*/

/* 
 * このスタイルはメインページ（front-page.php）のみに適用されます
 * 記事ページ（single.php、archive.phpなど）には影響しません
 */

/* メインページ専用のスタイル */
body.home .site-content,
body.page-template-front-page .site-content {
    /* メインページのコンテンツエリアのスタイル */
    padding: 0;
    margin: 0;
}

/* メインページのコンテナを全幅にする */
body.home .pet-funeral-front-page,
body.page-template-front-page .pet-funeral-front-page {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* 親テーマのヘッダーとフッターを非表示にする（メインページのみ） */
body.home .site-header,
body.page-template-front-page .site-header,
body.home .l-header,
body.page-template-front-page .l-header {
    display: none !important;
}

body.home .site-footer,
body.page-template-front-page .site-footer,
body.home .l-footer,
body.page-template-front-page .l-footer {
    display: none !important;
}

/* 記事ページでは親テーマのスタイルを確実に適用 */
/* 記事ページには何もスタイルを追加しない（親テーマのスタイルをそのまま使用） */
body.single,
body.archive,
body.category,
body.tag,
body.search,
body.page:not(.page-template-front-page) {
    /* 親テーマ（Swell）のスタイルをそのまま使用 */
    /* ここには何も追加しない */
}

/* カスタムカラー */
:root {
    --pet-red: #DC2626;
    --pet-light-red: #FEE2E2;
    --pet-gray: #6B7280;
    --pet-light-gray: #F9FAFB;
}

/* メインページ専用のアニメーション */
@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(20px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

@keyframes slideIn {
    from { 
        opacity: 0; 
        transform: translateX(-30px); 
    }
    to { 
        opacity: 1; 
        transform: translateX(0); 
    }
}

/* メインページ専用のユーティリティクラス */
body.home .fade-in,
body.page-template-front-page .fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

body.home .slide-in,
body.page-template-front-page .slide-in {
    animation: slideIn 0.5s ease-out;
}

body.home .progress-bar,
body.page-template-front-page .progress-bar {
    transition: width 0.8s ease-in-out;
}

body.home .question-container,
body.page-template-front-page .question-container {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.home .choice-button,
body.page-template-front-page .choice-button {
    transition: all 0.3s ease;
    transform: scale(1);
}

body.home .choice-button:hover,
body.page-template-front-page .choice-button:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(220, 38, 38, 0.2);
}

body.home .hero-pet-image,
body.page-template-front-page .hero-pet-image {
    clip-path: ellipse(50% 50% at 50% 50%);
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));
}

/* Tailwind CSSのカスタムカラーを上書き（メインページのみ） */
body.home .pet-red,
body.page-template-front-page .pet-red {
    color: var(--pet-red);
}

body.home .bg-pet-red,
body.page-template-front-page .bg-pet-red {
    background-color: var(--pet-red);
}

body.home .pet-light-red,
body.page-template-front-page .pet-light-red {
    color: var(--pet-light-red);
}

body.home .bg-pet-light-red,
body.page-template-front-page .bg-pet-light-red {
    background-color: var(--pet-light-red);
}

/* メインページのヘッダーとフッターのスタイル調整 */
body.home .site-header,
body.page-template-front-page .site-header {
    /* 必要に応じて調整 */
}

body.home .site-footer,
body.page-template-front-page .site-footer {
    /* 必要に応じて調整 */
}

/* スクロールバーを非表示にする（記事カード用） */
body.home .scrollbar-hide,
body.page-template-front-page .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

body.home .scrollbar-hide::-webkit-scrollbar,
body.page-template-front-page .scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* 記事カードのスタイル */
body.home .article-card,
body.page-template-front-page .article-card {
    transition: all 0.3s ease;
}

body.home .line-clamp-2,
body.page-template-front-page .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.home .line-clamp-3,
body.page-template-front-page .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 診断結果の画像表示調整（480×400の画像を全体表示） */
/* 固定高さとobject-coverを強制的に削除 */
body.home .pet-funeral-image-container,
body.page-template-front-page .pet-funeral-image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 1rem;
}

body.home .pet-funeral-image-container > a,
body.page-template-front-page .pet-funeral-image-container > a {
    display: block;
    width: 100%;
    text-align: center;
}

/* すべてのクラス（Tailwind CSSを含む）を上書き */
body.home .pet-funeral-main-image,
body.page-template-front-page .pet-funeral-main-image,
body.home .company-card img.pet-funeral-main-image,
body.page-template-front-page .company-card img.pet-funeral-main-image,
body.home .company-card img,
body.page-template-front-page .company-card img {
    /* 固定高さを削除 */
    height: auto !important;
    /* object-coverを削除 */
    object-fit: contain !important;
    object-position: center !important;
    /* 幅の調整 */
    width: auto !important;
    max-width: 100% !important;
    /* その他 */
    display: block !important;
    margin: 0 auto !important;
}

/* Tailwind CSSのh-48クラスを無効化 */
body.home .h-48,
body.page-template-front-page .h-48 {
    height: auto !important;
    max-height: 400px !important;
}

/* Tailwind CSSのobject-coverクラスを無効化 */
body.home .object-cover,
body.page-template-front-page .object-cover {
    object-fit: contain !important;
}

/* スマホ対応 */
@media (max-width: 640px) {
    body.home .pet-funeral-main-image,
    body.page-template-front-page .pet-funeral-main-image,
    body.home .company-card img,
    body.page-template-front-page .company-card img {
        max-width: 100% !important;
        max-height: 300px !important;
        width: auto !important;
        height: auto !important;
    }
}

/* PC対応 */
@media (min-width: 641px) {
    body.home .pet-funeral-main-image,
    body.page-template-front-page .pet-funeral-main-image,
    body.home .company-card img,
    body.page-template-front-page .company-card img {
        max-width: 480px !important;
        max-height: 400px !important;
        width: auto !important;
        height: auto !important;
    }
    
    /* PC版で診断結果カードを横長に */
    body.home .company-card,
    body.page-template-front-page .company-card {
        max-width: 100%;
    }
    
    /* PC版で画像コンテナの高さを調整 */
    body.home .pet-funeral-image-container,
    body.page-template-front-page .pet-funeral-image-container {
        min-height: 400px;
        max-height: 400px;
    }
}

/* 大画面（1024px以上）での最適化 */
@media (min-width: 1024px) {
    body.home .company-card .grid,
    body.page-template-front-page .company-card .grid {
        gap: 2rem;
    }
}