/*
 Theme Name:   PAGEVIEW Child
 Theme URI:    https://pageview.jp
 Description:  GeneratePress Child Theme for PAGEVIEW (Midnight Luxury Final)
 Author:       M
 Author URI:   https://pageview.jp
 Template:     generatepress
 Version:      1.0.6 (Layout Stabilized)
*/

/* =========================================
   1. Base Design System (Midnight Luxury)
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;500;700&family=Cormorant+Garamond:wght@400;600&display=swap');

:root {
    --pv-bg-main: #0f172a;
    --pv-heading: #ffffff;
    --pv-text: #cbd5e1;
    --pv-gold: #c5a059;
    --pv-gold-light: #e5d5ac;
    --pv-border: #334155;
    
    --font-jp: 'Noto Serif JP', serif;
    --font-en: 'Cormorant Garamond', serif;
}

/* ボディとメインコンテナの背景を強制的にネイビーへ */
body, 
.site-content, 
.site-main, 
.entry-content, 
.entry-summary {
    background-color: var(--pv-bg-main) !important;
    color: var(--pv-text);
    font-family: var(--font-jp);
    font-weight: 300;
    letter-spacing: 0.08em;
    line-height: 2.0;
}

/* リンク色 */
a { color: var(--pv-text); transition: all 0.4s ease; text-decoration: none; }
a:hover { color: var(--pv-gold); opacity: 1; }

/* --- GeneratePress固有の「白い枠」を消す --- */
.inside-article, 
.separate-containers .inside-article,
.widget, 
.site-main .paging-navigation {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}


/* --- Header --- */
.site-header {
    background-color: var(--pv-bg-main) !important;
    border-bottom: 1px solid var(--pv-border);
    padding: 30px 0;
}
.main-title {
    font-family: var(--font-en);
    font-size: 2.4rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-weight: 600;
    text-align: center;
}
.main-title a { color: var(--pv-heading) !important; }

/* --- Navigation Fix --- */
.main-navigation {
    margin-top: 20px;
    border-top: 1px solid var(--pv-border);
    padding-top: 15px;
    text-align: center;
    background-color: var(--pv-bg-main) !important;
}
.main-navigation ul li a,
.menu-toggle {
    font-family: var(--font-en);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.15em;
    color: #cbd5e1 !important; /* シルバー */
    font-weight: 600;
}
.main-navigation ul li:hover > a,
.main-navigation ul li.current-menu-item > a {
    color: var(--pv-gold) !important;
}
button.menu-toggle {
    border: 1px solid var(--pv-border);
    color: #fff !important;
}


/* --- Typography & Titles --- */
h1, h2, h3, h4, h5, h6 {
    color: var(--pv-heading) !important;
    font-family: var(--font-jp);
    font-weight: 500;
}

.entry-title a,
.pv-hero-title a,
.pv-sub-title a,
.pv-item-title a {
    color: var(--pv-heading) !important;
}

.entry-title a:hover,
.pv-hero-title a:hover,
.pv-sub-title a:hover,
.pv-item-title a:hover {
    color: var(--pv-gold) !important;
}


/* --- Footer --- */
.site-footer {
    background-color: #020617 !important;
    color: #64748b;
    padding: 80px 0;
    font-size: 0.9rem;
    border-top: 1px solid var(--pv-border);
}
.site-footer h4 { color: #fff; border-bottom: 1px solid var(--pv-border); padding-bottom: 15px; margin-bottom: 20px; }


/* =========================================
   2. Magazine Layout Shortcode Styles
   ========================================= */

.pv-magazine-wrapper {
    /* 中央寄せは解除し、下のFIXで制御 */
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Noto Serif JP', serif;
}

/* --- HERO SECTION (1記事目) --- */
.pv-mag-hero {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: center;
    /* 高さ固定解除 */
    min-height: auto; 
    max-height: none;
}
.pv-hero-img-box {
    display: block; 
    width: 100%; 
    height: 0; 
    padding-bottom: 56.25%; /* 16:9 のアスペクト比 */
    position: relative; 
    overflow: hidden;
}
.pv-hero-img-box img {
    position: absolute; 
    top: 0; left: 0;
    width: 100%; height: 100%; 
    object-fit: cover; 
    transition: transform 0.5s ease;
    min-height: 0;
}

.pv-hero-content { padding-right: 20px; }

.pv-hero-title {
    font-size: 2.6rem;
    line-height: 1.3;
    margin-bottom: 25px;
    font-weight: 700;
    font-feature-settings: "palt";
}
.pv-meta { color: #94a3b8 !important; font-size: 0.9rem; font-family: 'Cormorant Garamond', serif; margin-bottom: 30px; }


/* --- SUB ROW (2-3記事目) --- */
.pv-mag-sub-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    margin-bottom: 80px;
    border-bottom: 1px solid var(--pv-border);
    padding-bottom: 60px;
}
.pv-mag-sub { display: flex; flex-direction: column; }
.pv-sub-img-box {
    width: 100%; 
    height: 0; 
    padding-bottom: 75%; /* 4:3 のアスペクト比 */
    position: relative;
    overflow: hidden; 
    margin-bottom: 20px;
}
.pv-sub-img-box img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%; 
    object-fit: cover; 
    transition: transform 0.5s ease;
}
.pv-mag-sub:hover .pv-sub-img-box img { transform: scale(1.03); }

.pv-sub-title { font-size: 1.6rem; line-height: 1.4; margin: 0; }


/* --- GRID (4記事目以降) --- */
.pv-mag-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}
.pv-mag-item { margin-bottom: 40px; }
.pv-item-img-box {
    display: block; 
    width: 100%; 
    height: 0; 
    padding-bottom: 100%; /* 1:1 のアスペクト比 */
    position: relative;
    overflow: hidden; 
    margin-bottom: 15px;
}
.pv-item-img-box img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%; 
    object-fit: cover; 
    transition: opacity 0.3s;
}
.pv-item-img-box:hover img { opacity: 0.8; }
.pv-item-title { font-size: 1.1rem; line-height: 1.6; margin-bottom: 8px; }
.pv-meta-sm { font-size: 0.75rem; color: #94a3b8 !important; }


/* --- Mobile Adjustments --- */
@media (max-width: 768px) {
    .pv-mag-hero { grid-template-columns: 1fr; gap: 30px; }
    .pv-hero-img-box { padding-bottom: 56.25%; }
    .pv-hero-title { font-size: 1.8rem; }
    .pv-mag-sub-row { grid-template-columns: 1fr; gap: 40px; }
    .pv-mag-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* --- Mobile Adjustments (追記) --- */
@media (max-width: 992px) { /* 992px以下で縦積み（スマホレイアウト）に強制移行 */
    .pv-mag-hero { 
        /* ヒーローを強制的に縦積みに変更 */
        grid-template-columns: 1fr !important; 
        gap: 30px !important; 
        margin-bottom: 40px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .pv-hero-img-box {
        /* 画像を上部、文字を下部に配置 */
        height: auto !important;
        padding-bottom: 56.25% !important; /* 16:9 維持 */
    }
}

@media (max-width: 768px) {
    /* 768px以下は既存のスマホ調整を維持 */
    .pv-mag-hero { grid-template-columns: 1fr; gap: 30px; }
    .pv-hero-img-box { padding-bottom: 56.25%; }
    .pv-hero-title { font-size: 1.8rem; }
    /* ... 続く ... */
}




/* =========================================
   FIX: Layout Stabilized (最終解決策)
   ========================================= */

/* 1. 全ての親コンテナの最大幅を解除 */
.home .site-content,
.home .pv-magazine-wrapper {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* 2. メインコンテナ（.site-main）の左右パディングを消す */
.site-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: none !important;
    width: 100% !important;
}

/* 3. ヒーロー記事 (1記事目) に限り、強制的にパディングを設定し、全幅化 */
.pv-mag-hero {
    width: 100% !important; 
    
    /* 記事内の要素は中央に寄せたいので、左右にパディングを入れる */
    padding-left: 50px !important; 
    padding-right: 50px !important;
    
    /* 上下の余白復元 */
    margin-bottom: 80px !important;
    padding-bottom: 60px !important;
}

/* 4. ヒーロー以外の記事（2記事目以降）を、サイドバーに合わせて配置（中央寄せを再適用） */
.pv-mag-sub-row,
.pv-mag-grid {
    /* コンテンツの幅を制限し、中央寄せを再適用 */
    max-width: 1200px; 
    margin-left: auto !important;
    margin-right: auto !important;
    
    /* サイトのデフォルトパディングを復活させる */
    padding-left: 20px !important;
    padding-right: 20px !important;
}


/* =========================================
   3. Utilities & Visibility Fixes
   ========================================= */

/* ホームタイトルの完全消去 */
.home .entry-header { display: none !important; }
.home .site-content { margin-top: 0 !important; padding-top: 0 !important; }

/* 抜粋消去 */
.blog .entry-summary, .archive .entry-summary { display: none !important; }

/* カテゴリラベル */
.pv-label a,
.pv-label-sm,
.cat-links a,
.post-term-item {
    color: var(--pv-gold-light) !important;
    border-color: var(--pv-gold) !important;
    font-weight: 700 !important;
    background: transparent !important;
    font-family: var(--font-en);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 3px 12px;
    display: inline-block;
    border: 1px solid var(--pv-gold) !important;
    text-shadow: none !important;
}
.pv-label a:hover,
.cat-links a:hover {
    background-color: var(--pv-gold) !important;
    color: #fff !important;
    border-color: var(--pv-gold) !important;
}
.pv-label-sm { margin-bottom: 12px; font-size: 0.75rem; }


/* --- 続きを読むボタン（金→白）修正箇所 --- */
.pv-read-btn {
    background: var(--pv-gold); /* デフォルト：ゴールド */
    color: #fff; /* 文字：白 */
    display: inline-block;
    padding: 15px 40px;
    font-family: 'Cormorant Garamond', serif;
    letter-spacing: 0.15em;
    font-size: 0.9rem;
    transition: 0.3s;
}
.pv-read-btn:hover {
    background: #fff; /* ホバー：白 */
    color: var(--pv-bg-main); /* 文字：ネイビー */
}


/* --- Pagination Fix --- */
.paging-navigation .page-numbers,
.nav-links .page-numbers {
    color: #cbd5e1 !important;
    background: transparent !important;
    border: 1px solid var(--pv-border) !important;
    padding: 10px 15px;
    display: inline-block;
    margin-right: 5px;
    font-family: var(--font-en);
}
.paging-navigation .page-numbers.current,
.nav-links .page-numbers.current {
    color: var(--pv-gold) !important;
    border-color: var(--pv-gold) !important;
    font-weight: bold;
}
.paging-navigation .page-numbers:hover,
.nav-links .page-numbers:hover {
    background-color: var(--pv-gold) !important;
    color: #fff !important;
    border-color: var(--pv-gold) !important;
}


/* =========================================
   Fix: Footer Copyright Area
   ========================================= */

/* コピーライトエリアの背景色を強制的に暗いネイビーに */
.site-info {
    background-color: #020617 !important;
    color: var(--pv-gold-light) !important;
    padding: 20px 0; /* 余白を調整 */
}

/* リンク色も白くなっていたら修正 */
.site-info a {
    color: #94a3b8 !important; /* 明るいグレー */
    text-decoration: none;
}
.site-info a:hover {
    color: var(--pv-gold) !important;
}

/* =========================================
   Fix: Sidebar Integration (Dark Mode)
   ========================================= */

/* サイドバー本体と内部の背景を透明化し、ネイビー背景を透かす */
.sidebar,
.widget,
.widget-area {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* ウィジェットタイトルのデザイン調整 */
.widget-title {
    color: var(--pv-gold) !important; /* ゴールドを強調 */
    font-family: var(--font-en);
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--pv-border); /* 細い区切り線 */
    margin-bottom: 20px;
}

/* ウィジェット内のリスト（最新記事など）の文字色を修正 */
.widget ul li a,
.widget p {
    color: var(--pv-text) !important; /* シルバーグレー */
    line-height: 1.8;
}

.widget ul li a:hover {
    color: var(--pv-gold) !important;
}

/* 検索フォームの背景色もダーク化 */
.search-form input[type="search"] {
    background-color: #1e293b !important; /* 少し明るいネイビー */
    color: #fff !important;
    border: 1px solid var(--pv-border) !important;
    padding: 10px;
}
.search-form input[type="search"]::placeholder {
    color: #94a3b8;
}


/* =========================================
   Fix: Culture Quiz Widget Style
   ========================================= */

.pv-quiz-container {
    padding: 15px;
    background-color: #1e293b; /* 少し明るいネイビーでボックスを囲む */
    border: 1px solid var(--pv-border);
    margin-top: 20px;
}

.pv-quiz-header {
    border-bottom: 1px dashed var(--pv-border);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.pv-quiz-cat {
    font-family: var(--font-en);
    color: var(--pv-gold-light);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.pv-quiz-q-text {
    color: var(--pv-heading); /* 質問文は白 */
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 500;
    margin-bottom: 20px;
}

.pv-quiz-options {
    display: flex;
    flex-direction: column;
}

.salon-btn {
    background: transparent;
    color: var(--pv-text); /* 選択肢はシルバー */
    border: 1px solid var(--pv-border);
    padding: 10px 15px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: left;
    font-family: var(--font-jp);
    font-weight: 300;
}

.salon-btn:hover {
    background: var(--pv-gold);
    color: var(--pv-bg-main) !important; /* ホバーで文字をネイビーに */
    border-color: var(--pv-gold);
}

.pv-quiz-result {
    padding-top: 10px;
}

.pv-result-title {
    font-family: var(--font-en);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 10px;
}
.res-correct { color: #10b981 !important; } /* Green */
.res-wrong { color: #ef4444 !important; } /* Red */

.pv-result-desc {
    color: var(--pv-text);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

.pv-gold-btn {
    background: var(--pv-gold);
    color: #fff;
    border: none;
    padding: 8px 15px;
    text-transform: uppercase;
    font-family: var(--font-en);
    cursor: pointer;
    transition: background 0.3s;
    width: 100%;
}
.pv-gold-btn:hover {
    background: var(--pv-gold-light);
}


/* ==================================================
   PAGEVIEW QUIZ WIDGET STYLE (ダークモード適合版)
   ================================================== */

.pv-quiz-container {
    padding: 15px;
    /* 背景色をダークネイビーに変更 */
    background-color: #1e293b !important; 
    /* ボーダーをネイビーグレーに変更 */
    border: 1px solid var(--pv-border) !important;
    border-radius: 0; /* 角丸を削除 */
    margin-bottom: 20px;
}

.pv-quiz-header {
    margin-bottom: 10px;
    /* 区切り線をネイビーグレーに変更 */
    border-bottom: 1px dashed var(--pv-border) !important;
    padding-bottom: 5px;
}

#salon-cat {
    /* カテゴリラベルのスタイルを統一 */
    display: inline-block;
    background-color: transparent !important;
    color: var(--pv-gold-light) !important;
    padding: 3px 8px;
    font-size: 0.8rem;
    font-weight: 700;
    border-radius: 0;
    margin-bottom: 5px;
    border: 1px solid var(--pv-gold) !important;
    text-transform: uppercase;
    font-family: var(--font-en);
}

.pv-quiz-q-text {
    /* 質問文は白（見出し色） */
    color: var(--pv-heading) !important;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.6;
    margin-top: 0;
    margin-bottom: 15px;
}

.pv-quiz-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.salon-btn {
    width: 100%;
    padding: 10px;
    /* 選択肢ボタンの背景とボーダーをダークモードに適合 */
    border: 1px solid var(--pv-border) !important;
    border-radius: 0;
    background-color: transparent !important;
    color: var(--pv-text) !important; /* シルバーグレー */
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s;
    font-family: var(--font-jp);
    font-weight: 300;
}

.salon-btn:hover {
    /* ホバー時はゴールド反転 */
    background-color: var(--pv-gold) !important;
    color: var(--pv-bg-main) !important; 
    border-color: var(--pv-gold) !important;
}

/* 結果表示 */
.pv-quiz-result {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px dashed var(--pv-border) !important;
}

.pv-result-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.res-correct {
    color: #10b981 !important; /* Green */
}

.res-wrong {
    color: #ef4444 !important; /* Red */
}

.pv-result-desc {
    color: var(--pv-text) !important;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 15px;
}

.pv-gold-btn {
    display: block;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 0;
    /* ボタンの色をメインカラーに統一 */
    background-color: var(--pv-gold) !important; 
    color: #fff !important;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    font-family: var(--font-en);
}

.pv-gold-btn:hover {
    background-color: var(--pv-gold-light) !important;
    color: var(--pv-bg-main) !important;
}


/* =========================================
   FIX: カテゴリ/アーカイブページの白い枠を排除
   ========================================= */

/* 1. 記事一覧ページのヘッダー（カテゴリタイトルなど）の背景とボーダーを透明化 */
.archive .page-header {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 2. 記事カード内側の背景と影を強制的に透明化 (白枠の主要因) */
.archive .inside-article,
.category .inside-article,
.archive .widget,
.category .widget {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* 3. GeneratePressのデフォルトで付く上部のパディングを調整 (見た目の改善) */
.archive .site-content {
    padding-top: 0 !important;
}

/* =========================================
   FIX: Single Post Metadata and Visibility
   ========================================= */

/* 1. 日付、カテゴリなどメタデータの文字色を強調 (ゴールドライトへ) */
.entry-meta,
.entry-meta a,
.entry-meta span {
    /* 以前設定した.pv-metaを上書きし、明るい色を適用 */
    color: var(--pv-gold-light) !important; 
}

/* 2. 投稿者名 (by pv_admin) を非表示にする */
/* GeneratePressでは通常.bylineや.author-nameを含む.vcard要素が該当 */
.entry-meta .byline,
.entry-meta .author-name,
.entry-meta .vcard {
    display: none !important;
    visibility: hidden !important; /* 完全に要素を消去 */
}


/* =========================================
   PAGINATION: MAGAZINE LAYOUT (FIXED)
   ========================================= */

/* 縦並びとリストマークを排除し、強制的に横並びにする */
.pv-pagination ul {
    list-style: none !important; /* リストマークの「・」を完全に排除 */
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important; /* flexboxで横並びを強制 */
    justify-content: center; /* 中央揃え */
    gap: 10px;
}

/* 個々の要素がインライン要素として振る舞うことを保証 */
.pv-pagination li {
    display: inline-block !important; 
    margin: 0 !important; /* 縦方向の余白を消す */
}

/* ページ番号の枠を調整 */
.pv-pagination a,
.pv-pagination span {
    border-radius: 2px; /* わずかな角丸で洗練された印象に */
}


/* =========================================
   FIX: ヘッダー付近の不要な線を削除
   ========================================= */

/* サイトヘッダーの下線を削除 */
.site-header {
    border-bottom: none !important;
    box-shadow: none !important; /* 念のため影も削除 */
}

/* メインナビゲーション（メニューバー）の下線と上線を削除 */
.main-navigation,
.main-navigation .inside-navigation {
    border-bottom: none !important;
    border-top: none !important;
    box-shadow: none !important;
}

/* もし上記で消えない場合の強力な上書き（背景色と同化） */
.site-header,
.main-navigation {
    border-color: var(--pv-bg-main) !important;
}

/* =========================================
   FIX: トップページサムネイルの横長化 (Wide Aspect Ratio) - 修正版
   ========================================= */

/* 1. 上部の大記事 (Sub Feature) & 下部のグリッド (Grid Items) 共通設定 */
.pv-sub-img-box,
.pv-item-img-box {
    /* 重要: 古いパディングハックを強制リセット */
    padding-bottom: 0 !important;
    height: auto !important;
    
    /* 新しいアスペクト比を適用 (16:9) */
    aspect-ratio: 16 / 9 !important;
    
    /* コンテナの基準位置を設定 */
    position: relative !important;
    overflow: hidden;
    width: 100%;
}

/* 2. 画像のフィット設定 */
.pv-sub-img-box img,
.pv-item-img-box img {
    /* アスペクト比に合わせて画像を強制的に引き伸ばし・トリミング */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* 比率を維持したまま埋める */
}