/* ======================================
   rihobeer.com UI最適化 v3.0 統合版 (2026-03-19)
   第13条準拠: Cocoon標準テーマ準拠
   
   ⚠️ CSS子結合子(>)は使用禁止 — WordPress Customizerが>にエスケープし無効化される
   ⚠️ アクティブテーマ: cocoon-master（子テーマriho-cocoon-childは未有効化）
   ⚠️ バックアップ: ~/customizer_css_before_consolidation.txt
   ====================================== */

/* --- 変数（:rootはCocoon skin-innocenceが定義済み、ここでは使用のみ） --- */

/* ======================================
   1. ヘッダー・ロゴ
   ====================================== */

.header .header-in {
    padding: 8px 0 !important;
}
.header-container .site-logo-image,
.header-container-in .header-in img {
    max-height: 200px !important;
    object-fit: cover !important;
    object-position: center !important;
    width: 100% !important;
}

/* ======================================
   2. グローバルナビ
   ====================================== */

#navi {
    background: #fff !important;
    border-bottom: 2px solid #d4a017 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    margin-bottom: 0 !important;
}
#navi .navi-in ul {
    justify-content: center !important;
}
#navi .navi-in ul li a {
    color: #333 !important;
    padding: 10px 16px !important;
    font-size: 0.9em !important;
    white-space: nowrap !important;
}
#navi .navi-in ul li a:hover {
    color: #d4a017 !important;
    background: #f8f4e8 !important;
}
#navi .navi-in a {
    position: relative !important;
}
#navi .navi-in a::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    width: 0 !important;
    height: 3px !important;
    background: #d4a017 !important;
    transition: width 0.3s ease, left 0.3s ease !important;
}
#navi .navi-in a:hover::after {
    width: 80% !important;
    left: 10% !important;
}
#navi li.lang-item {
    display: none !important;
}

/* ======================================
   3. 記事タイトル・パンくず・目次
   ====================================== */

.article h1.entry-title {
    font-size: 1.6em;
    line-height: 1.4;
    margin-bottom: 0.5em;
    padding-bottom: 0.3em;
    border-bottom: 2px solid #e0e0e0;
}
.breadcrumb {
    padding: 8px 0 !important;
    margin-bottom: 8px !important;
    font-size: 0.85em !important;
}
.entry-date {
    font-size: 0.85em;
    color: #666;
}
.toc {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 1em;
    margin: 1.5em 0;
}

/* ======================================
   4. サイドバー・ウィジェット
   ====================================== */

.content-top .widget_polylang {
    display: none !important;
}
.sidebar .widget {
    margin-bottom: 1.5em;
}
.sidebar .widget-title {
    font-size: 1em;
    padding: 0.5em 0.8em;
    border-radius: 4px;
}
.popular-entry-card {
    transition: transform 0.2s ease;
}
.popular-entry-card:hover {
    transform: translateY(-2px);
}
.sidebar .tagcloud {
    max-height: 280px !important;
    overflow: hidden !important;
}
.sidebar .tagcloud a {
    display: inline-block !important;
    padding: 4px 12px !important;
    margin: 3px !important;
    border: 1px solid #ddd !important;
    border-radius: 20px !important;
    font-size: 0.8em !important;
    text-decoration: none !important;
    color: #555 !important;
    background: #fafafa !important;
    transition: all 0.2s !important;
}
.sidebar .tagcloud a:hover {
    background: #f0e6c8 !important;
    border-color: #d4a017 !important;
    color: #333 !important;
}

/* ======================================
   5. 著者ボックス・E-E-A-T
   ====================================== */

.author-box {
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 1.2em !important;
    margin: 1em 0 !important;
    background: #fafafa !important;
}
.author-box .author-name {
    font-size: 1.1em !important;
    font-weight: bold !important;
}

/* ======================================
   6. 非表示制御
   ====================================== */

.recommendations {
    display: none !important;
}

/* ======================================
   7. フロントページ セクション型レイアウト
   ====================================== */

body.home .article-header,
body.home .sns-share,
body.home .date-tags,
body.home .entry-title {
    display: none !important;
}
body.home .entry-content {
    padding: 0 !important;
    margin: 0 !important;
}
body.home .entry-content p:first-child:empty {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.home .dn_sbm_fukidashi {
    margin-top: 0 !important;
}
.front-sections .google-auto-placed,
.front-sections ins.adsbygoogle {
    display: none !important;
}

.front-sections {
    max-width: 100%;
    margin-bottom: 30px;
}
.front-section {
    margin-bottom: 16px !important;
    padding: 16px !important;
    background: #fff;
    border-radius: 8px;
}
.front-section-title {
    border-left: 4px solid #d4a017 !important;
    padding-left: 16px !important;
    font-size: 1.35em !important;
    font-weight: 700 !important;
    margin: 0 0 15px;
    color: #333;
}
.front-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}
.front-cards-3 {
    grid-template-columns: repeat(3, 1fr);
}
.front-card {
    display: block;
    text-decoration: none;
    color: #333;
    border-radius: 6px;
    overflow: hidden;
    background: #fafafa;
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid #eee;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
}
.front-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}
.front-card img {
    width: 100%;
    height: 160px !important;
    object-fit: cover !important;
    display: block;
}
.front-card-cat {
    display: inline-block;
    font-size: 0.7em;
    background: #d4a017;
    color: #fff;
    padding: 2px 8px;
    border-radius: 3px;
    margin: 8px 8px 4px;
}
.front-card-title {
    display: block;
    font-size: 0.85em;
    font-weight: bold;
    padding: 0 8px 10px;
    line-height: 1.4;
}
.front-tools-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.front-tool-link {
    display: block;
    text-align: center;
    padding: 10px;
    background: #fef3c7;
    color: #92400e;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.85em;
    font-weight: bold;
    transition: background 0.2s;
    border: 1px solid #f59e0b;
}
.front-tool-link:hover {
    background: #fde68a;
}
.front-about-inner {
    display: flex;
    align-items: center;
    gap: 20px;
}
.front-about-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.front-about-text h3 {
    margin: 0 0 8px;
    font-size: 1.1em;
}
.front-about-text p {
    font-size: 0.9em;
    color: #555;
    margin: 0 0 8px;
}
.front-about-links a {
    display: inline-block;
    margin-right: 12px;
    font-size: 0.85em;
    color: #d4a017;
    text-decoration: none;
}

.entry-content .front-cards {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 15px !important;
}
.entry-content .front-cards-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}
.entry-content .front-tools-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
}

/* ======================================
   8. フロントページ投稿一覧・ブルワリータブ
   ====================================== */

body.home .list {
    max-height: 1200px !important;
    overflow: hidden !important;
    position: relative !important;
}
body.home .list::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 120px !important;
    background: linear-gradient(transparent, #fff) !important;
    pointer-events: none !important;
}
body.home .brewery-tabs {
    margin-top: 8px !important;
}
.entry-card-wrap {
    margin-bottom: 12px !important;
}

/* ======================================
   9. 検索ボックス モダン化
   ====================================== */

.search-box {
    margin: 8px 0 12px !important;
}
.search-edit {
    border-radius: 24px !important;
    padding: 8px 16px !important;
    border: 1px solid #ddd !important;
    transition: border-color 0.2s !important;
}
.search-edit:focus {
    border-color: #d4a017 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(212,160,23,0.15) !important;
}
.search-submit {
    border-radius: 0 24px 24px 0 !important;
    background: #d4a017 !important;
    border: none !important;
    color: #fff !important;
}

/* ======================================
   10. フッター ダークテーマ
   ====================================== */

#footer {
    background-color: #1a1a2e !important;
    color: #ccc !important;
    padding: 2em 0 !important;
}
#footer a {
    color: #d4a017 !important;
    transition: color 0.2s !important;
}
#footer a:hover {
    color: #f0c040 !important;
}
#footer .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    padding-top: 1em !important;
}
#footer .site-name-text {
    color: #fff !important;
}
#footer .copyright {
    color: #999 !important;
}

/* ======================================
   11. コンテンツエリア余白
   ====================================== */

.content-in {
    padding-top: 8px !important;
}
body.home .content-in {
    padding-top: 0 !important;
}
body.home .main {
    padding: 12px 16px !important;
}
.content-in .wrap {
    gap: 16px !important;
}

/* ======================================
   12. タブレット (481px〜768px)
   ====================================== */

@media (min-width: 481px) and (max-width: 768px) {
    .header-container .site-logo-image,
    .header-container-in .header-in img {
        max-height: 100px !important;
    }
    .front-card img {
        height: 120px !important;
    }
    body.home .main {
        padding: 12px 14px !important;
    }
    .entry-content .front-cards,
    .entry-content .front-cards-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .entry-content .front-tools-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .front-about-inner {
        flex-direction: column;
        text-align: center;
    }
    .article h1.entry-title {
        font-size: 1.3em;
    }
    .navi-in ul li {
        font-size: 0.85em;
    }
    .popular-entry-card-thumb {
        min-height: 120px !important;
    }
    .tagcloud a {
        font-size: 0.8em !important;
        padding: 3px 8px !important;
    }
}

/* ======================================
   13. モバイル (〜480px) — Phase 11 統合
   ====================================== */

@media (max-width: 480px) {

    /* --- ヘッダー --- */
    .header .header-in {
        padding: 2px 0 !important;
    }
    .header-container .site-logo-image,
    .header-container-in .header-in img {
        max-height: 80px !important;
    }

    /* --- 検索バー非表示（ボトムバーに検索あり） --- */
    .search-box,
    #search-2,
    .content-top .search-box {
        display: none !important;
    }

    /* --- ナビバー横スクロール --- */
    #navi {
        border-bottom: 1px solid #d4a017 !important;
    }
    #navi .navi-in {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    #navi .navi-in ul {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        padding: 0 8px !important;
    }
    #navi .navi-in a {
        padding: 8px 12px !important;
        font-size: 0.82em !important;
    }

    /* --- コンテンツ余白 --- */
    body.home .main {
        padding: 4px 8px !important;
    }

    /* --- フロントセクション --- */
    .front-section {
        margin-bottom: 8px !important;
        padding: 8px 10px !important;
        border-radius: 6px !important;
    }
    .front-section-title {
        font-size: 1.05em !important;
        margin-bottom: 8px !important;
        padding-left: 10px !important;
        border-left-width: 3px !important;
    }

    /* --- カード: 1列横レイアウト（画像左+テキスト右） --- */
    .entry-content .front-cards,
    .entry-content .front-cards-3 {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }
    .front-card {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        position: relative !important;
        min-height: 70px !important;
        margin-bottom: 0 !important;
    }
    .front-card img {
        width: 120px !important;
        min-width: 120px !important;
        height: auto !important;
        min-height: 80px !important;
        border-radius: 6px 0 0 6px !important;
    }
    .front-card-cat {
        position: absolute !important;
        top: 4px !important;
        left: 4px !important;
        z-index: 2 !important;
        margin: 0 !important;
        padding: 2px 6px !important;
        font-size: 0.6em !important;
        border-radius: 3px !important;
        opacity: 0.9 !important;
    }
    .front-card-title {
        font-size: 0.82em !important;
        padding: 8px 10px !important;
        line-height: 1.35 !important;
        margin-top: 0 !important;
    }

    /* --- ツールグリッド 2列 --- */
    .entry-content .front-tools-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }
    .front-tool-link {
        padding: 8px 4px !important;
        font-size: 0.75em !important;
    }

    /* --- E-E-A-T著者カード --- */
    .front-about-inner {
        gap: 12px !important;
    }
    .front-about-avatar {
        width: 70px !important;
        height: 70px !important;
    }
    .front-about-text h3 {
        font-size: 0.95em !important;
    }
    .front-about-text p {
        font-size: 0.82em !important;
        line-height: 1.5 !important;
    }

    /* --- ブルワリータブ横スクロール --- */
    .brewery-tabs .tab-buttons,
    .tab-buttons {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 0 !important;
        padding-bottom: 4px !important;
        scrollbar-width: none !important;
    }
    .brewery-tabs .tab-buttons::-webkit-scrollbar,
    .tab-buttons::-webkit-scrollbar {
        display: none !important;
    }
    .tab-buttons button,
    .brewery-tabs .tab-buttons button {
        flex-shrink: 0 !important;
        font-size: 0.75em !important;
        padding: 6px 10px !important;
        white-space: nowrap !important;
        border-radius: 16px !important;
        margin-right: 4px !important;
    }

    /* --- タブ内記事カード --- */
    .tab-content h3 {
        font-size: 0.85em !important;
        line-height: 1.3 !important;
    }
    .tab-content .entry-card-snippet {
        font-size: 0.78em !important;
        line-height: 1.4 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }
    .tab-content .entry-card-wrap {
        margin-bottom: 8px !important;
    }

    /* --- 吹き出しコンパクト化 --- */
    .speech-wrap {
        margin: 8px 0 !important;
    }
    .speech-balloon {
        padding: 8px 12px !important;
        font-size: 0.85em !important;
    }
    .speech-person {
        width: 50px !important;
    }

    /* --- 広告制御（補助的 — Phase 9 AdSenseコンソールで主制御） --- */
    body.home .content-top .google-auto-placed,
    body.home .content-top ins.adsbygoogle {
        display: none !important;
    }

    /* --- reCAPTCHAバッジ非表示（トップのみ） --- */
    body.home .grecaptcha-badge {
        visibility: hidden !important;
    }

    /* --- タッチターゲット44px保証 --- */
    .front-tool-link,
    .tab-buttons button,
    #navi .navi-in a {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* --- 記事ページ --- */
    .article h1.entry-title {
        font-size: 1.15em !important;
        line-height: 1.35 !important;
        margin-bottom: 0.3em !important;
        padding-bottom: 0.2em !important;
    }
    .article {
        padding: 12px !important;
    }
    .entry-content {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }
    .entry-content h2 {
        font-size: 1.2em !important;
        margin: 1.2em 0 0.6em !important;
    }
    .entry-content h3 {
        font-size: 1.05em !important;
        margin: 1em 0 0.5em !important;
    }

    /* --- モバイルボトムバー --- */
    .mobile-menu-buttons {
        box-shadow: 0 -2px 8px rgba(0,0,0,0.1) !important;
        border-top: 1px solid #eee !important;
    }
    .mobile-menu-buttons .menu-button {
        font-size: 0.7em !important;
    }

    /* --- テーブル横スクロール --- */
    .entry-content table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* --- 画像角丸 --- */
    .entry-content img {
        border-radius: 6px !important;
    }
}

/* ======================================
   14. レビュー指摘修正 v3.1 (2026-03-19)
   ====================================== */

/* --- 14-1 [CRITICAL] 記事ページ: 上部シェアボタン非表示 --- */
.sns-share.ss-top {
    display: none !important;
}

/* --- 14-2 [HIGH] モバイルツール第2セクション 2列化 --- */
@media (max-width: 480px) {
    /* 絵文字付きツールリンクも2列に */
    .entry-content p .front-tool-link,
    .entry-content a[href*="/tools/"] {
        display: inline-flex !important;
        width: calc(50% - 6px) !important;
        box-sizing: border-box !important;
    }
}

/* --- 14-3 [HIGH] PC sidebar aff-*タグ非表示 --- */
.tagcloud a[href*="/tag/aff-"] {
    display: none !important;
}

/* --- 14-4 [MED] モバイルカード間余白縮小 --- */
@media (max-width: 480px) {
    .entry-content .front-cards,
    .entry-content .front-cards-3 {
        gap: 4px !important;
    }
    .front-card {
        margin: 0 !important;
    }
    /* セクション見出しの上余白も縮小 */
    .front-section {
        margin-bottom: 6px !important;
        padding: 6px 8px !important;
    }
}

/* --- 14-5 [MED] PCカードサムネイル切れ修正 --- */
@media (min-width: 769px) {
    .front-card img {
        height: 140px !important;
        object-fit: cover !important;
        object-position: center center !important;
    }
    .front-card {
        min-height: 220px !important;
    }
}

/* ======================================
   14-1 再修正: シェアブロック + カード余白 (2026-03-19)
   ====================================== */

/* 記事ページ上部のシェアブロック非表示（本文前に配置されている） */
.riho-share-container {
    display: none !important;
}
/* Cocoon標準のシェアボタン上部も念のため */
.sns-share.ss-top,
.sns-share-message {
    display: none !important;
}

/* カード間の見えない要素（広告プレースホルダ等）を除去 */
@media (max-width: 480px) {
    .entry-content .front-cards .google-auto-placed,
    .entry-content .front-cards ins.adsbygoogle,
    .entry-content .front-cards br,
    .entry-content .front-cards p:empty {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}