/* Querencia Child — メインスタイル
   Blocksy のCSS変数上書き + 独自コンポーネント。 */

/* ============================================================
   1. Blocksy グローバル変数の上書き
   Blocksy は動的CSS（ct-main-styles-inline-css）を本ファイルより後の
   インライン <style> で出力し、:root にデフォルトパレットを再定義する。
   読み込み順では勝てないため :root:root で詳細度を上げて上書きする。
   ============================================================ */
:root:root {
    /* パレット: 1=プライマリ(リンク/ボタン) 2=ホバー 3=本文 4=見出し
                 5=ボーダー 6=薄い背景 7=最も薄い背景 8=白 */
    --theme-palette-color-1: var(--q-gold-deep);
    --theme-palette-color-2: var(--q-navy);
    --theme-palette-color-3: var(--q-text);
    --theme-palette-color-4: var(--q-navy);
    --theme-palette-color-5: var(--q-beige-dark);
    --theme-palette-color-6: var(--q-beige);
    --theme-palette-color-7: var(--q-beige-light);
    --theme-palette-color-8: var(--q-white);

    --theme-font-family: var(--q-font-sans);
    --theme-line-height: 1.8;

    --theme-button-background-initial-color: var(--q-gold-deep);
    --theme-button-background-hover-color: var(--q-navy);
    --theme-button-border-radius: 4px;
    --theme-button-font-weight: 700;
    --theme-button-min-height: 48px;
    --theme-button-padding: 8px 28px;

    --theme-normal-container-max-width: var(--q-content-width);
}

/* ============================================================
   2. タイポグラフィ — 見出しは明朝（信頼感）
   ============================================================ */
h1, h2, h3,
.site-title,
.entry-title,
.page-title {
    font-family: var(--q-font-serif);
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* ============================================================
   3. ヘッダー
   ============================================================ */
.ct-header .site-title {
    color: var(--q-navy);
}

/* ロゴマーク（Qモノグラム）をサイトタイトルの左に表示 */
[data-id="logo"] .site-title a {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
}

[data-id="logo"] .site-title a::before {
    content: "";
    flex-shrink: 0;
    width: 1.55em;
    height: 1.55em;
    background: url("../img/logo-mark.svg") no-repeat center / contain;
}

/* ネイビー背景のオフキャンバス（モバイルメニュー）では白反転版を使う */
#offcanvas [data-id="logo"] .site-title a::before {
    background-image: url("../img/logo-mark-white.svg");
}

/* グローバルナビのホバー・現在地表示
   Blocksy標準（type-1）は文字色が --q-text → ネイビーに変わるだけで知覚困難。
   「選ばれる理由」見出しと同じゴールド下線モチーフで明示する。
   下線は常時敷いて transparent → gold にすることで Blocksy 既存の
   0.12s transition に乗せてフェード表示させる */
.ct-header [data-id="menu"] > ul > li > .ct-menu-link {
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.6em;
}

.ct-header [data-id="menu"] > ul > li:hover > .ct-menu-link,
.ct-header [data-id="menu"] > ul > li[class*="current-menu-"] > .ct-menu-link {
    text-decoration-color: var(--q-gold);
}

/* ヘッダーCTAボタン（wp_nav_menu_items フィルタで挿入） */
.q-header-cta > a {
    display: inline-flex;
    align-items: center;
    background-color: var(--q-gold-deep);
    color: var(--q-white) !important;
    border-radius: 4px;
    padding: 0.5em 1.4em !important;
    font-weight: 700;
    transition: background-color 0.2s ease;
}

.q-header-cta > a:hover {
    background-color: var(--q-navy);
}

/* ============================================================
   4. フッター
   ============================================================ */
/* Blocksy は [data-footer*="type-N"] 付きセレクタで背景を当てるため詳細度を合わせる */
[data-footer] .ct-footer {
    background-color: var(--q-navy);
    color: rgba(255, 255, 255, 0.85);
}

[data-footer] .ct-footer a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: underline;
}

[data-footer] .ct-footer a:hover {
    color: var(--q-gold);
}

[data-footer] .ct-footer [data-id="copyright"] {
    color: rgba(255, 255, 255, 0.7);
}

/* ============================================================
   5. 共通コンポーネント（固定ページ・パターンで使用）
   ============================================================ */
.q-container {
    max-width: var(--q-content-width);
    margin-inline: auto;
    padding-inline: var(--q-space-sm);
}

.q-section {
    padding-block: var(--q-space-xl);
}

.q-section--beige {
    background-color: var(--q-beige);
}

.q-section--navy {
    background-color: var(--q-navy);
    color: var(--q-white);
}

.q-section--navy :is(h1, h2, h3) {
    color: var(--q-white);
}

/* 下層ページ・アーカイブ・記事共通のネイビーヒーロー */
.q-page-hero {
    background: linear-gradient(135deg, var(--q-navy) 0%, var(--q-navy-dark) 100%);
    color: var(--q-white);
    padding-block: clamp(3.5rem, 8vw, 6rem);
}

.q-page-hero .q-section-label {
    color: var(--q-gold);
}

.q-page-hero__title {
    color: var(--q-white);
    font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
    margin-bottom: 0.6em;
}

.q-page-hero__text {
    color: rgba(255, 255, 255, 0.85);
    max-width: 44em;
    margin: 0;
    line-height: 2;
}

/* セクション見出し: 小さな英字ラベル + 明朝の大見出し */
.q-section-label {
    display: block;
    color: var(--q-gold-dark);
    font-family: var(--q-font-sans);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin-bottom: 0.5em;
}

.q-section--navy .q-section-label {
    color: var(--q-gold);
}

.q-section-title {
    font-size: clamp(1.6rem, 1.2rem + 2vw, 2.2rem);
    margin-bottom: 1.5em;
}

/* ボタン */
.q-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-height: 48px;
    padding: 0.6em 2.2em;
    border-radius: 4px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.q-btn--gold {
    background-color: var(--q-gold-deep);
    color: var(--q-white);
}

.q-btn--gold:hover {
    background-color: var(--q-navy);
    color: var(--q-white);
}

/* ネイビー背景上で使う白抜きボタン */
.q-btn--outline {
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: var(--q-white);
}

.q-btn--outline:hover {
    background-color: var(--q-white);
    color: var(--q-navy);
}

/* テキストリンク風ボタン */
.q-btn--text {
    color: var(--q-gold-dark);
    padding-inline: 0;
    min-height: auto;
    text-decoration: none;
}

.q-btn--text:hover {
    color: var(--q-navy);
    text-decoration: underline;
}

/* CTAバンド（全ページ共通） */
.q-cta-band__inner {
    text-align: center;
}

.q-cta-band__title {
    font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
}

.q-cta-band__text {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 2em;
}

.q-cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--q-space-sm);
    justify-content: center;
}

.q-cta-band__actions .q-btn {
    min-width: 220px;
    min-height: 56px;
}

/* カード */
.q-card {
    background-color: var(--q-white);
    border-radius: var(--q-radius);
    box-shadow: var(--q-shadow-card);
    padding: var(--q-space-md);
}

/* CTAボタン直下の安心マイクロコピー */
.q-cta-note,
.q-pricing .q-cta-note {
    font-size: 0.85rem;
    color: var(--q-text-muted);
    text-align: center;
    margin: 1em 0 0;
}

.q-cta-note--light {
    color: rgba(255, 255, 255, 0.7);
}

/* ============================================================
   6. 記事末: 著者ボックス + CTA
   ============================================================ */
.q-author-box {
    display: flex;
    gap: var(--q-space-sm);
    align-items: flex-start;
    background-color: var(--q-white);
    border: 1px solid var(--q-beige-dark);
    border-radius: var(--q-radius);
    padding: var(--q-space-md);
    margin-block: var(--q-space-lg) var(--q-space-md);
}

.q-author-box__photo img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 50%;
}

.q-author-box__label {
    display: block;
    font-size: 0.8rem;
    color: var(--q-text-muted);
}

.q-author-box__name {
    display: block;
    font-family: var(--q-font-serif);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--q-navy);
    margin-block: 0.2em 0.4em;
}

.q-author-box__bio {
    font-size: 0.9rem;
    margin: 0;
}

.q-post-cta {
    background-color: var(--q-navy);
    border-radius: var(--q-radius);
    padding: var(--q-space-lg) var(--q-space-md);
    text-align: center;
    color: var(--q-white);
}

.q-post-cta__title {
    font-family: var(--q-font-serif);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--q-white);
    margin-block: 0 0.6em;
}

.q-post-cta__text {
    color: rgba(255, 255, 255, 0.85);
    max-width: 36em;
    margin: 0 auto 1.5em;
}

@media (max-width: 689.98px) {
    .q-author-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* ============================================================
   7. 共有コンポーネント（特徴カード・流れ・料金・FAQ・記事カード）
   ============================================================ */
/* ============================================================
   選ばれる理由
   ============================================================ */
.q-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--q-space-sm);
}

.q-feature__title {
    font-size: 1.15rem;
    margin-bottom: 0.6em;
    padding-bottom: 0.5em;
    border-bottom: 2px solid var(--q-gold);
    display: inline-block;
}

.q-feature p {
    font-size: 0.95rem;
    margin: 0;
}


/* ============================================================
   売却の流れ
   ============================================================ */
.q-flow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--q-space-sm);
    list-style: none;
    padding: 0;
    counter-reset: flow;
}

.q-flow__step {
    position: relative;
    background-color: var(--q-white);
    border: 1px solid var(--q-beige-dark);
    border-radius: var(--q-radius);
    padding: var(--q-space-md);
}

.q-flow__num {
    font-family: var(--q-font-serif);
    font-size: 2rem;
    color: var(--q-gold-deep);
    line-height: 1;
    display: block;
    margin-bottom: 0.4em;
}

.q-flow__step h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5em;
}

.q-flow__step p {
    font-size: 0.9rem;
    margin: 0;
}


/* ============================================================
   料金
   ============================================================ */
.q-pricing {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
    padding: var(--q-space-lg) var(--q-space-md);
}

.q-pricing__highlight {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3em;
    margin-bottom: 1.2em;
}

.q-pricing__big {
    font-family: var(--q-font-serif);
    font-size: 1.8rem;
    color: var(--q-navy);
}

.q-pricing__big strong {
    color: var(--q-gold-deep);
    font-size: 3rem;
}

.q-pricing__note {
    color: var(--q-gold-dark);
    font-weight: 700;
    letter-spacing: 0.1em;
}

.q-pricing p {
    text-align: left;
    margin-bottom: 1.8em;
}


/* ============================================================
   FAQ
   ============================================================ */
.q-faq {
    max-width: 780px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--q-space-xs);
}

.q-faq__item {
    background-color: var(--q-white);
    border-radius: var(--q-radius);
    box-shadow: var(--q-shadow-card);
    padding: 0;
}

.q-faq__item summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--q-navy);
    padding: 1.1em 3em 1.1em 3.2em;
    position: relative;
    list-style: none;
}

.q-faq__item summary::-webkit-details-marker {
    display: none;
}

/* Q マーク */
.q-faq__item summary::before {
    content: "Q";
    position: absolute;
    left: 1.2em;
    color: var(--q-gold-deep);
    font-family: var(--q-font-serif);
    font-size: 1.1em;
}

/* 開閉インジケータ */
.q-faq__item summary::after {
    content: "+";
    position: absolute;
    right: 1.2em;
    top: 50%;
    transform: translateY(-50%);
    color: var(--q-gold-deep);
    font-size: 1.4em;
    font-weight: 400;
}

.q-faq__item[open] summary::after {
    content: "−";
}

.q-faq__item p {
    padding: 0 2.5em 1.4em 3.2em;
    margin: 0;
    font-size: 0.95rem;
}


/* ============================================================
   記事カード（template-parts/post-card.php — フロント新着・アーカイブ共用）
   ============================================================ */
.q-posts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--q-space-sm);
}

.q-post-card {
    padding: var(--q-space-sm);
}

.q-post-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
}

/* aspect-ratio 固定でアイキャッチ有無に関わらずカードの高さを揃える */
.q-post-card__thumb {
    width: 100%;
    aspect-ratio: 16 / 10;
    height: auto;
    object-fit: cover;
    border-radius: calc(var(--q-radius) / 2);
    margin-bottom: 0.8em;
}

/* アイキャッチ未設定記事の代替: ベージュ地にQモノグラム */
.q-post-card__thumb--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--q-beige);
}

.q-post-card__thumb--placeholder img {
    width: 28%;
    max-width: 64px;
    height: auto;
    opacity: 0.85;
}

.q-post-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.q-post-card__eyebrow {
    color: var(--q-gold-deep);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 0.4em;
}

.q-post-card__title {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--q-navy);
    margin-bottom: 0.5em;
}

/* 日付はカード下端に揃える（flexの残余スペースを上に逃がす） */
.q-post-card time {
    color: var(--q-text-muted);
    font-size: 0.85rem;
    margin-top: auto;
    padding-top: 0.4em;
}

.q-posts__more {
    text-align: center;
    margin-top: var(--q-space-md);
}