/*
Theme Name: ListingHive Child
Template: listinghive 
Version: 3.1.0
解説：AeroUsed専用の全体調整CSS。
ブランドカラーの青(#004e93)への統一、メニュー展開時の黄色消去、
および5列表示のカード整列設定をすべて含んでいます。
*/

/* ============================================
   ★. 商品一覧（カテゴリーページ）の3列表示化
   ============================================ */

/* カテゴリーページや検索結果ページなどで、
   パソコン表示時に3列（1行に3つ）並ぶように設定します。
*/
@media (min-width: 992px) {
    .archive.tax-hp_listing_category .hp-listings.hp-grid .hp-row .hp-grid__item,
    .archive.post-type-archive-hp_listing .hp-listings.hp-grid .hp-row .hp-grid__item {
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
        padding: 10px !important;
    }
}

/* ============================================
   ★. 商品を探す（カテゴリーボタン）：画像出し分け
   ============================================ */

/* =========================================
   ドローンカテゴリ (URLに drone を含むもの)
   ========================================= */
.hp-listing-category__image a[href*="drone"] img {
    /* 画像を強制的に差し替え */
    content: url('/wp-content/uploads/2026/01/category_drone2_small.jpg') !important;
    
    /* レイアウト調整 */
    object-fit: cover !important; /* 枠に合わせてトリミング */
    width: 100% !important;       /* 横幅いっぱい */
    height: 280px !important;     /* 高さを固定（お好みで調整してください） */
    opacity: 1 !important;        /* 透明度をリセット */
    display: block !important;    /* 表示を強制 */
}

/* =========================================
   アクセサリーカテゴリ (URLに accessories を含むもの)
   ========================================= */
.hp-listing-category__image a[href*="accessories"] img {
    /* 画像を強制的に差し替え */
    content: url('/wp-content/uploads/2026/01/category_parts2_small.jpg') !important;
    
    /* レイアウト調整 */
    object-fit: cover !important;
    width: 100% !important;
    height: 280px !important;
    opacity: 1 !important;
    display: block !important;
}



/* 1. ヘッダー全体のグラデーションを薄くする */
.hp-listing-category--view-block .hp-listing-category__header::after {
    background: linear-gradient(to bottom, transparent 10%, rgba(0, 0, 0, 0.5) 100%) !important;
    opacity: 0.3 !important; /* 全体の透明度を下げる */
    z-index: 10 !important;  /* 画像より手前に表示 */
}

/* 2. もし画像リンク自体に影がついている場合、それも薄くする */
.hp-listing-category__image a::after {
    background: linear-gradient(to bottom, transparent 30%, rgba(0, 0, 0, 0.2) 100%) !important;
    opacity: 0.6 !important;
}







/* ============================================
   1. セキュリティ・表示制御
   ============================================ */

/* お気に入り0件時はその場所を非表示に設定 */
body.no-favorites .hide-favorite-section { display: none !important; }

/* メッセージ（吹き出しアイコン）を非表示に設定 */
.hp-listing__action--message { display: none !important; }

/* 未承認・下書き状態の操作ボタンを隠して安全性を確保 */
body.hp-not-approved-yet .hp-listing__action--hide,
body.hp-not-approved-yet .hp-listing__action--unhide,
.hp-listing--status-draft .hp-listing__action--hide {
    display: none !important;
}

/* ============================================
   2. メニュー・カラー統一（ブランドカラー：#004e93）
   ============================================ */

/* メニュー、リンク、ユーザー名の配色設定。
   ドロップダウンが開いている時やホバーした時の「黄色」を完全に禁止します。
*/
.header-navbar__menu ul li a:hover,
.header-navbar__menu ul li a:active,
.header-navbar__menu ul li a:focus,
.header-navbar__menu ul li.current-menu-item > a,
.hp-menu__item--user-account:hover i,
.hp-menu__item--user-account.hp-menu__item--current i,

/* 【修正】メニューが開いている時のユーザー名の黄色を消す */
.hp-menu__item--opened > a,
.hp-menu__item--opened > a span,
.hp-menu__item--opened > a i,
.hp-link:hover,
.hp-link:hover i,
/* ドロップダウンメニュー内の文字色を青に統一 */
.hp-menu--dropdown .hp-menu__item a:hover,
.hp-menu--dropdown .hp-menu__item a:focus {
    color: #004e93 !important;
    background: transparent !important; /* 背景が黄色くなるのを防止 */
    outline: none !important;
}

/* メニュー上部のオレンジ色の線を「濃い青」に変更 */
.header-navbar__menu > ul > li.current-menu-item::before,
.hp-menu--tabbed .hp-menu__item--current::before {
    background-color: #004e93 !important;
}

/* 常に背景が青いボタン（検索・出品・絞り込み）の配色を一括設定 */
.button--primary, 
button[type="submit"], 
input[type=submit],
.hp-form__button, 
.hp-button--listing-filter,
.hp-menu__item--listing-submit.button--secondary {
    background-color: #004e93 !important;
    border-color: #004e93 !important;
    color: #ffffff !important;
}

/* チェックボックスや価格レンジの色を統一 */
.hp-field input[type=radio]:checked + span::after,
.hp-field--number-range .ui-slider-range {
    background-color: #004e93 !important;
}

/* ============================================
   3. ヘッダー ＆ 検索フォーム（位置調整）
   ============================================ */

/* トップページヘッダーの高さ調整 */
.home .header-hero {
    background-size: cover !important;
    padding: 160px 0 !important; /* 上下の余白を詰めてスッキリさせました */
    min-height: 180px !important;
}

/* 検索窓をヘッダー画像に少し重ねるための設定 */
.home .hp-form--listing-search {
    margin-top: -4.5rem !important;
    position: relative;
    z-index: 10;
}

/* ============================================
   4. 商品リスト：5列表示 ＆ ガタつき防止設定
   ============================================ */

@media (min-width: 992px) {
    /* パソコン表示時に商品を5列にします */
    .home .hp-listings.hp-grid .hp-row .hp-grid__item {
        flex: 0 0 20% !important; max-width: 20% !important; padding: 0 0.5rem 1rem 0.5rem !important;
    }

    /* 商品画像の縦幅を160pxで固定し、枠に合わせます */
    .hp-listing--view-block .hp-listing__header { height: 160px !important; overflow: hidden !important; }
    .hp-listing--view-block .hp-listing__image img { height: 100% !important; width: 100% !important; object-fit: cover !important; }

    /* カテゴリー未設定時でも隙間を空け、タイトルの位置を揃えます */
    .hp-listing--view-block .hp-listing__categories { min-height: 1.5em !important; font-size: 0.8rem !important; }

    /* 商品名を最大2行で固定し、3行目以降は自動で「...」を表示します */
    .hp-listing--view-block .hp-listing__title {
        font-size: 0.9rem !important; height: 2.8em !important; line-height: 1.4 !important;
        overflow: hidden !important; display: -webkit-box !important;
        -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
    }

    /* 価格とハートマークを横一列にし、価格の改行を防止します */
    .hp-listing--view-block .hp-listing__footer {
        display: flex !important; align-items: center !important; 
        justify-content: space-between !important; min-height: 3.5em !important; flex-wrap: nowrap !important;
    }
    .hp-listing__attribute--price { white-space: nowrap !important; font-size: 0.9rem !important; font-weight: bold; }
}

/* ============================================
   5. AeroUsedの特徴（枠線付き3列）
   ============================================ */

/* デザインに基づいた3列のカードレイアウトを設定 */
.aeroused-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px; max-width: 1200px; margin: 0 auto;
}

/* 各特徴ボックスの枠線と背景 */
.aeroused-feature-item {
    background: #ffffff; padding: 30px 20px; border-radius: 8px;
    border: 1px solid #e0e0e0 !important; /* 薄いグレーの枠線 */
    text-align: center; /* 【追加】中のテキストやインライン要素を中央寄せにする */
}

/* アイコン画像のサイズを統一と中央寄せ */
.aeroused-feature-item img {
    height: 80px !important; 
    margin: 0 auto 20px auto !important; /* 【修正】左右の余白をautoにして中央配置 */
    display: block; /* block要素にすることでmargin: autoを有効にします */
    object-fit: contain;
}

/* ============================================
   6. ご利用方法（PC・スマホ画像の出し分け）
   ============================================ */

/* 通常はパソコン用画像を表示 */
.pc-size-img { display: block !important; margin: 0 auto; }
.mobile-size-img { display: none !important; }

/* スマホ表示時の切り替え設定 */
@media (max-width: 768px) {
    .pc-size-img { display: none !important; }
    .mobile-size-img { display: block !important; } /* スマホ用バナーに切り替え */
    .aeroused-features-grid { grid-template-columns: 1fr !important; }
}

/* 「商品を探す」ボタンの中の不要な説明文を消去 */
.hp-listing-category--view-block .hp-listing-category__description { display: none !important; }