/* =========================================
   まちナーレ 表示パターン（全エリア共通）
   守口（osakamoriguchi）で作り込んだ見た目を全エリアに適用する。
   site.css・front-page.css の後に読み込み、それらを上書きする。
   子テーマが同じ役割の site-overrides.css を持つ場合（守口）は、
   functions.php 側で読み込まない（includes/site-pattern.php）。
   ========================================= */

/* 検索結果ページはヘッダーの質問フォーム（CTAバンド）を非表示にしたため、
   その分の余白が無くなりヘッダー直下に本文が詰まって見える。ヘッダーとの間に余白を戻す。 */
.machi-search .machi-container {
    padding-top: 32px;
}

/* フッター上部：「まちナーレ他の地域」だけをリンク行から独立させて表示する。
   フッター本体（.machi-footer）と見た目を揃えつつ、下の罫線で区切る。 */
.machi-footer-top {
    text-align: center;
    padding: 16px 20px;
    font-size: var(--wp--preset--font-size--small, 12px);
    border-top: 1px solid var(--machi-border);
    background: var(--machi-card);
}

/* 「他の地域を見る」のプルダウン（都道府県→市区町村）。
   場所を取らないよう、PCは見出し・都道府県・市区町村を横1列、
   スマホは見出しの下に都道府県・市区町村を縦に2段で並べる。 */
.machi-area-switcher {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.machi-area-switcher-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--machi-main-dark);
    white-space: nowrap;
}

.machi-area-switcher-fields {
    display: flex;
    gap: 8px;
}

.machi-area-switcher-select {
    position: relative;
}

.machi-area-switcher-select::after {
    content: "▾";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--machi-muted);
    pointer-events: none;
}

.machi-area-switcher select {
    width: 11em;
    /* iOS はフォーム要素が16px未満だと入力時に自動ズームするため 1rem のまま */
    font-size: 1rem;
    font-family: inherit;
    color: var(--machi-text);
    background: var(--machi-card);
    border: 1px solid var(--machi-border);
    border-radius: 8px;
    padding: 8px 32px 8px 12px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.machi-area-switcher select:focus-visible {
    outline: 2px solid var(--machi-main);
    outline-offset: 1px;
}

.machi-area-switcher select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 600px) {
    .machi-area-switcher {
        flex-direction: column;
        gap: 8px;
    }

    .machi-area-switcher-fields {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
    }

    .machi-area-switcher select {
        width: 100%;
    }
}

/* カテゴリーアーカイブ（各ジャンルページ）と「まちのニュースから質問」ページは
   同じ .machi-archive-head を使っており、見出し下の罫線を非表示にする。 */
.wp-theme-areatheme .machi-archive-head {
    border-bottom: none;
}

/* 固定ページ本文の区切り線（wp:separator）は既定だと濃い色のまま。
   ジャンル一覧・関連記事リストの項目区切り（var(--machi-border)の薄い線）
   と同じ見た目に揃える。 */
.wp-theme-areatheme .wp-block-separator {
    border: none;
    border-top: 1px solid var(--machi-border, #e5e7eb);
    opacity: 1;
}

/* パンくずが長い記事タイトルで複数行に折り返されるのを防ぎ、1行に収める。
   「トップ」・カテゴリー名はそのままの幅を保ち、末尾の現在地（記事タイトル）
   だけを…で省略する。構造化データ（BreadcrumbList）はDOM表示と無関係に
   常に完全なタイトルを持つため、この見た目の省略の影響を受けない。 */
.machi-breadcrumb {
    flex-wrap: nowrap;
}

.machi-breadcrumb > a,
.machi-breadcrumb > .machi-breadcrumb-sep {
    flex-shrink: 0;
    white-space: nowrap;
}

.machi-breadcrumb > span:last-child {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 「あなたの疑問入力フォーム」ページ（/info/question/）は
   ページ本文に専用フォームがあるため、ヘッダーの質問フォームは非表示にする。
   body class は includes/site-pattern.php がページのパスから付ける
   （ページIDはサイトごとに違うため使わない）。 */
.machi-page-question .machi-cta-band {
    display: none;
}

/* プライバシーポリシー・質問コメント利用規約・お問い合わせは、
   規約・連絡先を読みに来たページのため、上部の質問ブロックは
   不要として非表示にする。 */
.machi-page-no-cta .machi-cta-band {
    display: none;
}

/* 上の質問ブロックを消した分、ヘッダーとの間の余白が無くなっていたため補う。 */
.machi-page-no-cta .machi-container {
    padding-top: 32px;
}

/* 同ページのフォーム本体：他のCF7フォーム共通の緑カード（.wpcf7）を
   打ち消す（ヘッダーの質問フォームと同じ二重枠回避と同じ処理）。 */
.machi-page-question .wpcf7 {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-top: 0;
}

/* ニックネーム欄と送信ボタンの高さを揃える。
   .machi-cta-band 内の同構成には既に同様の指定があるが、このページの
   フォームは .machi-cta-band の外にあるため別途指定が必要。 */
.machi-page-question .machi-question-actions input[type="text"],
.machi-page-question .machi-question-actions .wpcf7-submit {
    height: 44px;
    box-sizing: border-box;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* トップの「最新Q&A」カード：本文なし・アイコンはタイトル左・更新日は
   囲みを外してタイトル下に右揃えで表示する（よく読まれているテーマの
   文字サイズ・雰囲気に揃える）。 */
.machi-question-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* 親テーマ共通の.machi-card（24px）は本文が無くなった分、余白過多に
       感じるため詰める。 */
    padding: 16px;
}

.machi-question-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 号外NETトップページの記事一覧タイトル（h1.itemTitle01In、SP/PC問わず
   computed 16.56px・weight 700）を基準に、そこからさらに1.2倍にする
   （16.56px × 1.2 = 19.87px）。 */
.machi-question-head h3 {
    font-size: 19.87px;
    font-weight: 700;
}

.machi-question-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.machi-question-card .machi-date-badge {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    font-weight: 400;
    color: var(--machi-muted);
    white-space: nowrap;
}

/* 最新のコメントの吹き出し。更新日の左に、SP・PCとも表示する。 */
.machi-question-comment-bubble {
    display: block;
    position: relative;
    min-width: 0;
    max-width: 72%;
    padding: 4px 10px;
    background: var(--wp--custom--color--quote-bg, #f7fcfa);
    border: 1px solid var(--machi-border);
    border-radius: 12px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--machi-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 吹き出しの三角（下向き）。枠線色を大きめの三角、地色を一回り小さい
   三角で重ねて、枠線付きの吹き出しに見せる。 */
.machi-question-comment-bubble::after,
.machi-question-comment-bubble::before {
    content: '';
    position: absolute;
    left: 10px;
    border-style: solid;
}

.machi-question-comment-bubble::after {
    bottom: -6px;
    border-width: 6px 6px 0;
    border-color: var(--machi-border) transparent transparent;
}

.machi-question-comment-bubble::before {
    bottom: -4.5px;
    left: 11px;
    border-width: 5px 5px 0;
    border-color: var(--wp--custom--color--quote-bg, #f7fcfa) transparent transparent;
}

/* トップの「最新Q&A」：3件・PCも1列縦並びで表示する
   （記事数はfront-page.php側で3件に変更済み）。 */
.home .machi-section .machi-grid-3 {
    grid-template-columns: 1fr;
}

/* セクション見出し（{エリア}民の新着のお声・人気のテーマ一覧・よく読まれて
   いるテーマ）は、下の親テーマの16pxだと見出しがブロックから浮いて見える
   ため詰め、見出しがそのすぐ下のブロックに属していると分かるようにする。
   サイドバーの「よく読まれているテーマ」は見出し＋ブロックを
   .machi-sidebar-section でまとめ、サイドバー自体のgap(20px)がさらに
   加算されないようにしたうえで、ここで他の2つと同じ間隔に揃える。 */
.home .machi-section-head {
    margin-bottom: 10px;
}


/* コメントに添付された画像のサムネイルを1.5倍（56px→84px）に拡大。
   クリックで開く原寸モーダル（.machinale-image-modal__img）は対象外。 */
.machi-single .machinale-comment-image {
    width: 84px;
    height: 84px;
}

/* 記事下コメント欄の「AIの回答も"みんなの知恵"の途中段階です。」は、
   見出し「みなさまの声をお聞かせください」だけで意図は伝わるため非表示に
   （コメント欄共通の文言のため、CSSで隠す）。
   実際のコメント欄は <section class="machinale-comments">、ヘッダーの
   質問フォーム（.machi-question-composer）は <div> のため、section だけに
   絞ってヘッダー側の同名クラスを巻き込まないようにする。 */
.machi-single section.machinale-comments .machinale-comment-notes {
    display: none;
}

/* 質問フォーム：見出し「{エリア}のことで気になる事を聞いてみよう！」自体を
   トップの「読んでおきたいテーマ」アコーディオンと同じ開閉の挙動・カード
   構造のボタンにする。色はアコーディオンの緑塗りではなく、白地・緑文字・
   緑罫線のままにする。 */
/* 上下とも24px。トップ・カテゴリー等のアーカイブページはこの枠がページの
   一番下（フッター直前）に来るため、下の余白がフッターとの間隔になる
   （記事ページ等、途中に来る場合は次のセクションとの間隔として働く）。 */
.machi-cta-band.is-machi-question-toggle {
    margin-top: 24px;
    margin-bottom: 24px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--wp--custom--color--head-green, #4fbf9f);
    border-radius: 12px;
    box-shadow: none;
}

.machi-question-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 14px 18px;
    border: none;
    border-radius: 0;
    background: var(--wp--custom--color--head-green, #4FBF9F);
    font: inherit;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s;
}

.machi-question-toggle:hover {
    background: color-mix(in srgb, var(--wp--custom--color--head-green, #4FBF9F) 85%, #000);
}

.machi-question-toggle[aria-expanded="true"] {
    border-bottom: 1px solid var(--machi-border);
}

.machi-question-toggle:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--machi-main, #0f766e) 30%, transparent);
    outline-offset: -3px;
}

/* 見出しをボタンの中へ移した結果、本来のスタイル元（.machinale-comments
   .comment-reply-title）の対象から外れて素のh2に見えていたため、
   同じ見た目をここで明示的に指定し直す。ボタンの背景を緑ベタにしたため、
   文字は白。文字サイズは元の1.125remから120%大きくした1.35rem。
   余白はボタンのpaddingだけで揃えるため打ち消す。 */
.machi-question-toggle h2.comment-reply-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: #fff;
}

.machi-question-toggle__arrow {
    flex-shrink: 0;
    color: #fff;
    transition: transform 0.2s;
}

.machi-question-toggle__arrow::after {
    content: '▼';
    font-size: 0.75rem;
}

.machi-question-toggle[aria-expanded="true"] .machi-question-toggle__arrow {
    transform: rotate(180deg);
}

.machi-cta-band .machi-question-panel {
    margin-top: 0;
    background: #fff;
}

.machi-cta-band.is-machi-question-toggle .machi-question-composer {
    border: none;
    border-radius: 0;
}

.machi-question-panel[hidden] {
    display: none;
}

/* 質問フォームをヘッダーから外した分、ヘッダーと本文の間の余白が
   無くなっていたため補う（トップ・記事・カテゴリーページ共通）。 */
.home .machi-container,
.machi-single .machi-container,
.machi-archive .machi-container {
    padding-top: 32px;
}

/* トップはボタンがページの一番下（人気のテーマ一覧の直後）に来るため、
   .machi-container側の下余白（40px）を、ボタンの直前ではここだけ削る。
   ボタン自体はアコーディオンカード化（padding:0）したため、上側の
   余白調整はこれだけで足りる。 */
.home .machi-container {
    padding-bottom: 8px;
}

/* サイドバーの「よく読まれているテーマ」：見出しは.machi-section-headへ
   移し、本文側の見出し（{エリア}民の新着のお声・人気のテーマ一覧）と
   同じ枠外・同じ文字サイズにした。ここはリスト部分の調整のみ。
   PVはタイトルの下に2行目として右揃えで表示する。
   親テーマの1行想定の余白（16px 20px）は2行組みだと広すぎるため詰める。 */
.machi-sidebar-widget--ranking .machi-ranking-list li {
    display: grid;
    grid-template-columns: 28px 1fr;
    column-gap: 10px;
    row-gap: 2px;
    align-items: start;
    /* サイドバーの余白は .machi-sidebar-widget 自体の20pxで足りているため、
       他のウィジェット（最新の投稿：.machi-sidebar-recent-item）と同じく
       左右は0、上下だけで間隔を作る。 */
    padding: 10px 0;
}

.machi-sidebar-widget--ranking .machi-ranking-list li:last-child {
    padding-bottom: 0;
}

.machi-sidebar-widget--ranking .machi-rank {
    grid-column: 1;
    grid-row: 1;
}

.machi-sidebar-widget--ranking .machi-ranking-list li a {
    grid-column: 2;
    grid-row: 1;
}

/* 記事下「カテゴリーごとの最新」は見出しを外したため、カテゴリー同士の
   間隔を詰め、代わりに左右に少し余白を持たせる。
   スマホは親テーマ側で既に見出し・もっと見るに14pxの左右余白があるため、
   ここでは上書きせず、枠を持つリストにだけ内側の余白を足す。 */
.machi-related-block {
    margin-bottom: 16px;
}

.machi-related-list {
    padding-left: 6px;
    padding-right: 6px;
}

@media (min-width: 861px) {
    .machi-related-head,
    .machi-related-more {
        padding-left: 6px;
        padding-right: 6px;
    }
}

/* 補足は見出しの下に小さく表示する。 */
.machi-article-content .machi-answer-note {
    margin: 0 0 16px;
    color: var(--machi-muted);
    font-size: var(--wp--preset--font-size--small, 12px);
    line-height: 1.6;
}

/* 記事ページ：「まず分かっていること」以下（AIの回答・みなさんに教えて
   ほしいこと・コメント一覧）をまとめて1.2倍の文字サイズにする。
   .machi-article-content 自体は areatheme_comments_render() で出す
   コメント欄も内側に含むため、この1つのスコープで両方カバーできる。
   本文・段落等サイズ未指定の要素は em継承で自動的に拡大されるが、
   見出し（theme.jsonトークン参照のpx）やコメント関連（rem指定）は
   継承では拡大されないため、それぞれ1.2倍の値を明示的に指定し直す。 */
.machi-single .machi-article-content {
    font-size: 1.2em;
}

.machi-single .machi-article-content h2 {
    font-size: 24px;
}

.machi-single .machi-article-content h3 {
    font-size: 19.2px;
}

.machi-single .machi-article-content h4 {
    font-size: 19.2px;
}

.machi-single .machi-article-content .machi-answer-note {
    font-size: 14.4px;
}

.machi-single .machinale-comment-label {
    font-size: 1.2rem;
}

.machi-single .machinale-comment-text {
    font-size: 1.2rem;
}

/* 一覧見出しは削除したが、投稿フォームの見出しに同じ大きさを引き継ぐ
   （もとの1.65remの80%）。 */
.machi-single .machinale-comments .comment-reply-title {
    font-size: 1.32rem;
}

/* 写真ラベルはアイコンの下に置き、ラベル全体をクリックできるようにする。
   アイコンが縦積みになる分だけ操作行の高さ（--machi-field-height）を
   底上げし、ニックネーム欄・送信ボタンとも上下が揃うようにする。 */
.machi-single .machinale-composer-actions {
    --machi-field-height: 48px;
}

.machi-single .machinale-image-button {
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    width: 64px;
    height: var(--machi-field-height);
    padding: 0 2px;
    border-radius: 8px;
    color: var(--machi-main-dark);
}

.machi-image-label {
    font-size: var(--wp--preset--font-size--small, 12px);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

@media (max-width: 600px) {
    /* ハンバーガーボタンの top は親テーマのCSS内で、この上書き（16px）が
       無条件ルール（22px）より先に書かれているため後勝ちで効かず、
       スマホでもロゴ（ヘッダーのpadding-top基準）より下にズレて見える。
       ロゴと高さを揃えるため、ここで明示的に上書きする。
       全ページでヘッダーのpadding-topを12pxへ統一したため、ボタンも
       全ページ共通で12pxに合わせる（元は .home 限定だった）。 */
    .machi-nav-toggle {
        top: 12px;
    }

    /* トップの高さに全ページ揃える（元はトップだけコンパクトにして
       質問入力欄のクリック展開を保ちながら最新Q&Aを早く見せる調整だったが、
       全ページで高さを統一するため .home 限定を外した）。 */
    .machi-site-header {
        min-height: 0;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .machi-header-band {
        margin-top: 12px;
    }

    .home .machi-site-title {
        margin-bottom: 6px;
        /* 端末幅が狭くても1行に収まるよう、固定pxではなく画面幅に応じて縮む値にする。 */
        font-size: clamp(15px, 5.4vw, 21px);
        white-space: nowrap;
    }

    /* 親テーマは.machi-h1-breakをスマホでdisplay:blockにして
       見出しを強制的に2行へ改行するが、トップでは1行のまま見せる。 */
    .home .machi-h1-break {
        display: none;
    }

    .home .machi-header-band p {
        font-size: 14px;
        line-height: 1.6;
    }

    .home .machi-question-composer .machinale-composer {
        padding: 12px;
    }

    .home .machi-cta-band .machi-question-composer .comment-reply-title {
        margin-top: 0;
        margin-bottom: 6px;
        font-size: 19px;
        line-height: 1.5;
    }

    .home .machi-question-composer .comment-reply-title + p {
        margin-bottom: 10px;
        font-size: 14px;
        line-height: 1.6;
    }

    /* トップは最新Q&A・よく読まれているテーマ・人気のテーマ一覧まで、
       左右の余白を持たせる（ヒーロー部分は.machi-containerの外のため対象外）。
       まちのニュースから質問の機能停止後もこの余白は必要なため、
       機能有効時のみ読み込まれる news-questions.css からここへ移した。 */
    .home .machi-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* 「{エリア}のことで気になる事を聞いてみよう！」の枠は.machi-containerの
       外（トップ：最下部／記事：コメント欄の下／カテゴリー：最下部）に
       あるため、他と同じ16px幅で左右に余白を持たせる。 */
    .machi-cta-band.is-machi-question-toggle {
        margin-left: 16px;
        margin-right: 16px;
    }

    /* 親テーマは見出し（{エリア}民の新着のお声・人気のテーマ一覧）に
       さらに10pxの左右余白を足すため、.machi-containerの16pxと合わせて
       見出しだけカード・関連記事一覧より右にずれて見える。
       見出し側の左右余白を無くし、ブロックの左端に揃える
       （上下の余白（margin-bottom）はそのまま）。 */
    .home .machi-section-head {
        padding-left: 0;
        padding-right: 0;
    }

    /* 記事下（免責表示・戻るリンク・関連記事見出し・カテゴリーごとの最新・
       サイドバー）も同じ幅で左右の余白を持たせる。
       親テーマはスマホでリストを画面端まで広げる前提で角丸・左右の罫線を
       消しているが、ここでは左右に余白を持たせて浮かせるため、
       角丸・左右の罫線をPCと同じ見た目に戻す。 */
    .machi-single .machi-related-list,
    .machi-single .machi-sidebar-widget {
        margin-left: 16px;
        margin-right: 16px;
    }

    .machi-single .machi-related-list {
        border-radius: 14px;
        border-left: 1px solid var(--machi-border);
        border-right: 1px solid var(--machi-border);
    }

    .machi-single .machi-ai-disclaimer,
    .machi-single .machi-article-back,
    .machi-single .machi-related-head,
    .machi-single .machi-related-more {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* SNSシェアボタン（X・Facebook・LINE・Threads）：既存コメント一覧の下・
   コメント投稿フォームの上に表示する。横に並べたときの折り返しを防ぐため
   アイコンのみの円形ボタンにする。ブランドカラーは各サービスの公式カラー
   （デザインシステムのトークンではなくブランド固有色）。 */
.machi-sns-share {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    margin: 24px 0;
}

.machi-sns-share-label {
    font-size: 0.75rem;
    color: var(--machi-text-sub, #6b7280);
    white-space: nowrap;
}

.machi-sns-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    line-height: 1;
}

.machi-sns-share-btn:hover,
.machi-sns-share-btn:focus {
    opacity: 0.85;
    color: #fff;
}

.machi-sns-share-btn--x {
    background: #000;
}

.machi-sns-share-btn--facebook {
    background: #1877f2;
}

.machi-sns-share-btn--line {
    background: #06c755;
}

.machi-sns-share-btn--threads {
    background: #000;
}

@media (max-width: 767px) {
    .machi-single .machi-sns-share {
        margin-left: 16px;
        margin-right: 16px;
    }
}

/* 会社・お店図鑑の掲載フォーム（/info/shop-guide-form/）：
   他のCF7フォーム共通の緑カード（.wpcf7）を打ち消す
   （.machi-page-question の同処理と同じ考え方）。 */
.machi-page-shop-form .wpcf7 {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-top: 0;
}

/* 毎日クイズ：コメント内の <code> を「右寄せの1行」として見せる
   （問題コメントの「答えは返信ボタンに↓」用） */
.machinale-comment-text code {
    display: block;
    text-align: right;
    font-family: inherit;
    font-size: inherit;
}