/*
Theme Name: 徳川美術館
Theme URI: https://www.tokugawa-art-museum.jp/
Author:徳川美術館
Author URI:https://www.tokugawa-art-museum.jp/
Description: 徳川美術館は、御三家筆頭の尾張徳川家に受け継がれてきた宝物の数々を所蔵し公開している美術館
Version: 2.1.5
Tested up to: 8.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: original
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/* =====================================================
   詳細検索トグル（search-collections.php / archive-collections.php）
   ===================================================== */

/* main.css の max-width: 688px を上書き */
.p-collection-container .p-keyword-search {
    max-width: none;
}

.p-container {
    padding: 30px;
}
/* キーワード行を grid に変更 — どの幅でも横並びを維持し詳細パネルが全幅で展開できる */
.p-keyword-search {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: stretch;
    position: relative;
    max-width: none;
}

.p-keyword-search input {
    width: 100%;
    min-width: 0;
    padding-right: 15px; /* main.css の 70px 右 padding（旧絶対配置ボタン用）を上書き */
}
/* input を grid の 1fr 列に収める */
.p-keyword-search input[name="s"] {
    width: 100%;
    min-width: 0;
    max-width: none;
}
/* main.css の旧ボタン絶対配置を上書き */
.p-keyword-search button {
    position: static;
    top: auto;
    right: auto;
    translate: none;
}

/* キーワード送信ボタン（SVGアイコン）
   .p-keyword-search の直接の子 button[type="submit"] に限定 */
.p-keyword-search > button[type="submit"] {
    display: grid;
    place-content: center;
    flex-shrink: 0;
    width: 60px;
    height: auto;
    padding: 0;
    margin: 0;
    background-color: var(--kouiro);
    border: none;
    cursor: pointer;
    transition: opacity var(--duration) ease;
}

.p-keyword-search > button[type="submit"] svg {
    width: 1.2rem;
    height: 1.2rem;
}

.p-keyword-search > button[type="submit"] svg path {
    fill: var(--black);
}

@media (any-hover: hover) {
    .p-keyword-search > button[type="submit"]:hover {
        opacity: 0.8;
    }
}


.p-search-panel {
    padding: 0;
	margin: 0;
}

/* 詳細検索トグルボタン */
.p-keyword-search .p-search-detail {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 0 14px;
    height: auto;
    border: 1px solid var(--kouiro);
    border-left: none;
    background-color: transparent;
    color: var(--white);
    font-size: var(--fz13);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: opacity var(--duration) ease;
    margin: 0;
    width: auto;
}

@media (any-hover: hover) {
    .p-keyword-search .p-search-detail:hover {
        opacity: 0.8;
    }
}

/* 詳細検索アイコン */
.p-search-detail__icon {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* main.css の svg { display: block } と .p-keyword-search button svg を上書き */
.p-keyword-search .p-search-detail .p-search-detail__icon svg {
    display: block;
    width: 16px;
    height: 16px;
    margin-top: -2px;
}

@media (min-width: 1024px) {
    .p-keyword-search .p-search-detail .p-search-detail__icon svg {
        width: 16px;
        height: 16px;
    }
}

/* 詳細パネル：grid の全幅列・初期非表示 */
.p-search-detail-inner {
    display: none;
    grid-column: 1 / -1;
    width: 100%;
    border-top: 1px solid var(--kouiro);
}

/* 詳細パネル展開アニメーション */
@keyframes searchDetailOpen {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes searchDetailClose {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-12px);
    }
}

/* JS で is-open クラスを付与したとき表示 */
.p-search-detail-inner.is-open {
    display: block;
    animation: searchDetailOpen 0.3s ease forwards;
}

/* JS で is-closing クラスを付与したとき閉じるアニメーション */
.p-search-detail-inner.is-closing {
    display: block;
    animation: searchDetailClose 0.3s ease forwards;
}

/* 検索・リセットボタン並び */
.p-search-btn-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

.p-search-btn-group .p-button {
    width: 100%;
    max-width: none;
    border: 1px solid var(--kouiro);
}

.p-search-btn-group .js-search-reset {
    background-color: #F1D9C1; /* --kouiro (#E7C098) を40%明るく */
}

@media (min-width: 1024px) {
    .p-search-btn-group {
        flex-direction: row;
        align-items: center;
    }

    .p-keyword-search input[name="s"] {
        padding: 0 15px;
    }

    .p-keyword-search > button[type="submit"] {
        width: 60px;
    }

    .p-keyword-search > button[type="submit"] svg {
        width: 1.4rem;
        height: 1.4rem;
    }

    .p-keyword-search .p-search-detail {
        font-size: var(--fz14);
        padding: 0 18px;
    }

    .p-search-detail-inner {
        padding-top: 0;
        margin-top: 0;
        border-top: none;
    }
}

/* 検索結果なし：グリッド全幅で表示 */
.p-exhibition-item-container .p-no-results {
    grid-column: 1 / -1;
}

/* =====================================================
   タクソノミーアーカイブ（taxonomy.php）
   ===================================================== */

/* experiences タクソノミー: モバイル 2列（main.css の 3列を上書き） */
.p-exhibition-item-container.p-taxonomy-experiences {
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 1024px) {
    .p-exhibition-item-container.p-taxonomy-experiences {
        grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    }
}