/* assets/css/search.css
   Search UI (フォームの見た目のみ)
   ※ ヘッダーのレイアウトは header.css が担当
================================================ */

@layer comp {

  .site-search[hidden]{ display: none; }

  .site-search{
    border-top: 1px solid var(--cd-border);
    /* --cd-surface が無い場合は cd-card-bg を使う */
    background: var(--cd-surface, var(--cd-card-bg));
  }

  /* 中身は「上限 + ガター」：変数ベースに統一 */
  .site-search .container{
    max-width: var(--container-max);
    margin-inline: auto;
    padding-block: 12px;
    padding-inline: var(--cd-gutter);
  }

  /* ==== 検索フォーム（カスタム） ==== */
  .cd-search-form{
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0;
    transition:
      box-shadow .18s ease,
      border-color .18s ease,
      background-color .18s ease;
  }

  .cd-search-input{
    flex: 1 1 auto;
    height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--cd-border);
    background: color-mix(in oklab, var(--cd-surface, var(--cd-card-bg)), white 2%);
    color: var(--cd-fg);

    transition:
      border-color .18s ease,
      box-shadow .18s ease,
      background-color .18s ease;
  }

  /* submit は視覚非表示（Enterで送信） */
  .cd-search-submit{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
  }

  .cd-search-input:focus-visible{
    outline: none;
    border-color: var(--cd-accent, #66e0ff);
    box-shadow:
      0 0 0 1px rgba(102,224,255,.45),
      0 0 18px rgba(102,224,255,.30);
    background: color-mix(in oklab, var(--cd-bg, #0b1016), white 7%);
  }

  /* 互換（WP標準のフォームにも効かせる） */
  .search-form{
    display:flex;
    gap:8px;
    align-items:center;
    margin:0;
  }

  .search-form .search-field{
    flex:1 1 auto;
    height:38px;
    padding:0 12px;
    border-radius:10px;
    border:1px solid var(--cd-border);
    background: color-mix(in oklab, var(--cd-surface, var(--cd-card-bg)), white 2%);
    color: var(--cd-fg);
  }

  .search-form .search-submit{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
  }

  @media (max-width:428px){
    .cd-search-input{ height: 36px; padding: 0 10px; }
  }
}


/* ============================================
   Search results layout (cards grid)
   ホームと同じカードグリッドを検索結果にも適用
============================================ */
@layer pages {

  /* ベースグリッド：検索結果専用 */
  body.search-results .entry-grid{
    container-type: inline-size;
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    margin-top: 12px;
  }

  /* 横一列スクロール（将来用に is-one-row も揃えておく） */
  body.search-results .entry-grid.is-one-row{
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 1fr);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-gutter: stable;
  }

  /* コンテナが小さい時の自動詰め */
  @container (max-width: 60rem){
    body.search-results .entry-grid{
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 20px;
    }
    body.search-results .entry-grid.is-one-row{
      grid-auto-columns: minmax(220px, 1fr);
    }
  }

  /* Fallback：コンテナクエリ非対応ブラウザ */
  @supports not (container-type: inline-size){
    body.search-results .entry-grid{
      display: grid;
      gap: 24px;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      margin-top: 12px;
    }
    body.search-results .entry-grid.is-one-row{
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: minmax(260px, 1fr);
      overflow-x: auto;
      overscroll-behavior-x: contain;
    }
    @media (max-width: 1320px){
      body.search-results .entry-grid{
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 20px;
      }
    }
  }
}