/* 検索機能専用CSSファイル */

/* ========================================
   スマホ版の検索フォーム
======================================== */
/* ========================================
   メニュー本体
======================================== */

/*
 * メニュー内のコンテンツ領域を設定する。
 * スマートフォンでキーボードを表示した際も、
 * メニュー内をスクロールして操作できるようにする。
 */
.globalNav__panel {
    width: 100%;
    /*
     * メニュー本体の高さの上限を設定する。
     *
     * 100dvh：
     *   ブラウザの表示領域の動的な高さを基準にする。
     *
     * var(--header-height) * 2：
     *   ヘッダーの高さを2倍して差し引く。
     *   ヘッダーの高さが56pxの場合は112pxとなる。
     *
     * 画面の高さからヘッダー2個分を差し引くことで、
     * メニューの上下にヘッダー1個分ずつの余裕を
     * 見込んだ高さに制限する。
     *
     * max-heightのため、指定した高さに固定するのではなく、
     * 内容が必要とする高さが上限を超えた場合に制限する。
     */
    max-height: calc(100dvh - var(--header-height) * 2);

    /*
     * コンテンツが高さの上限を超えた場合、
     * メニュー本体の内部を縦方向にスクロールできるようにする。
     *
     * autoのため、スクロールが必要な場合にのみ
     * スクロール可能な状態になる。
     *
     * スマートフォンでキーボードが表示され、
     * 利用できる表示領域が狭くなった場合にも、
     * 検索欄などのメニュー内の要素へアクセスしやすくする。
     */
    overflow-y: auto;

    /*
     * メニュー内でスクロールしきった際に、
     * 背後のページへスクロール操作が伝わるのを抑える。
     *
     * メニューを操作している間に、
     * 背景のページまで動いてしまうことを防ぎやすくする。
     *
     * ※ 背景ページ自体を固定する指定ではない。
     */
    overscroll-behavior-y: contain;

    /*
     * 要素の幅や高さの計算にpaddingとborderを含める。
     *
     * これにより、余白や枠線を追加した際に、
     * 指定した寸法を超えて要素が大きくなるのを防ぎやすくする。
     */
    box-sizing: border-box;
}
/* 検索フォームの配置 */
.headerSearch {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 40px 0;
    box-sizing: border-box;
    border-bottom: 1px solid var(--color-border);
    margin: 0px auto !important;
}
/* 検索ボタン */
.headerSearch__button {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--color-border);
    background: var(--color-border);
    border-radius: 999px;
    cursor: pointer;
    z-index: 1;
    /* box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.1),
    0 8px 24px -8px rgba(50, 50, 93, 0.24),
    0 8px 16px -8px rgba(0, 0, 0, 0.32); */
}
/* 虫眼鏡アイコン */
.headerSearch__icon {
    display: block;
    width: 18px;
    height: 18px;
    content: url("/wp-content/themes/atsu-portfolio-theme/assets/images/icons/magnifying-glass-light-white.svg");
}
/* 検索入力欄 */
.headerSearch__input {
    grid-column: 1;
    grid-row: 1;
    width: 240px;
    height: 38px;
    padding: 12px 12px 12px 48px;
    border-radius: 999px;
    outline: none;
    background: rgba(255, 255, 255, 0.8);
    color: var(--color-text);
    border: 1px solid rgba(136, 136, 136,0.8);
    font: inherit;
    font-size: 12px;
    box-sizing: border-box;
    box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.04),
    0 8px 24px -8px rgba(50, 50, 93, 0.08),
    0 8px 16px -8px rgba(0, 0, 0, 0.16);
}
.headerSearch__input:focus {
    font-size: 16px;
}
/* 入力欄のフォーカス時 */
.headerSearch__input:focus-visible {
    outline: none;
    border-color: rgba(136, 136, 136, 0.8);
}
/* プレースホルダー */
.headerSearch__input::placeholder {
    color: var(--color-sub);
    opacity: 1;
}
/* メニュー本体 */
.globalNav__panel {
    width: 100%;
    max-height: calc(100dvh - var(--header-height) * 2);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    box-sizing: border-box;
}

/* 展開中の検索ボタン */
.headerSearch.is-search-open .headerSearch__button {
    transition:
        background-color .2s ease,
        box-shadow .2s ease;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.36) !important;
}
.headerSearch.is-search-open .headerSearch__button:hover {
    background: #555;
}

.searchText {
    width: fit-content;
    font-weight: 500;
    font-size:clamp(0.9rem, 0.84rem + 0.24vw, 0.88rem);
}
.searchKeyword{
    font-weight: 500;
    font-size: 1.6em;
    color: var(--link-text-color-blue);
    padding: 0 0px;
    letter-spacing: 0.128em;
    position: relative;
    top: -1px;
    left: -6px;
}
.search-count{
    font-size: 1.76em;
    color: rgb(196, 75, 75);
    font-weight: 500;
    position: relative;
    top: 1px;
    padding: 0 6px;
}
.searchKeyword {
    position: relative;
    display: inline-block;
    padding: 0 8px;
}

.searchKeyword {
    position: relative;
    display: inline-block;
    padding: 0 14px 0 22px;
    margin-right: 6px;
}

/* 左右の括弧 */
.searchKeyword::before,
.searchKeyword::after {
    content: "";
    position: absolute;
    width: 8px;
    height: 20px;
    border-color: currentColor;
    border-style: solid;
}

/* 開き括弧「 */
.searchKeyword::before {
    top: 2px;
    left: 6px;
    border-width: 1px 0 0 1px;
}

/* 閉じ括弧」 */
.searchKeyword::after {
    right: 0;
    bottom: 10px;
    border-width: 0 1px 1px 0;
}

/* =========================
   PC版
========================= */
@media (min-width:1024px){
    .globalNav__panel{
        display: flex;
        align-items: center;
        /* 高さの上限を解除 */
        max-height: none;
        /* メニュー内部のスクロールを無効化 */
        overflow-y: visible;
        /* 内部スクロールを使わないため解除 */
        overscroll-behavior-y: auto;
    }
     /* 検索フォームの基本設定 */
     .headerSearch {
        position: relative;
        display: block;
        width: 38px;
        height: 38px;
        padding: 0;
        border-bottom: none;
        transition: width .3s ease;
    }
    /* 検索ボタン：左端に固定 */
    .headerSearch__button {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        border: none;
        background: transparent;
        transition: background-color .3s ease;
    }
    /* ホバー時・展開時の背景 */
    .headerSearch__button:hover,
    .headerSearch.is-search-open .headerSearch__button {
        background: #333;
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
    }
    /* 通常時の黒い虫眼鏡 */
    .headerSearch__icon {
        content: url("/wp-content/themes/atsu-portfolio-theme/assets/images/icons/magnifying-glass-light.svg");
    }
    /* ホバー時・展開時は白い虫眼鏡 */
    .headerSearch__button:hover .headerSearch__icon,
    .headerSearch.is-search-open .headerSearch__icon {
        content: url("/wp-content/themes/atsu-portfolio-theme/assets/images/icons/magnifying-glass-light-white.svg");
    }
    .headerSearch.is-search-open{
        margin-left: 4px !important;
    }
    /* 検索入力欄の初期状態 */
    .headerSearch__input {
        width: 0;
        opacity: 0;
        transition:
            width .3s ease,
            opacity .2s ease;
    }
    /* 展開時：左から右へ広げる */
    .headerSearch.is-search-open {
        width: 240px;
    }
    .headerSearch.is-search-open .headerSearch__input {
        padding: 0 14px 0 48px;
        width: 240px;
        border: 1px solid rgba(136, 136, 136, 0.8);
        background: rgba(255, 255, 255, 0.8);
        opacity: 1;
        pointer-events: auto;
    }
    /* 入力欄のフォーカス時 */
    .headerSearch__input:focus {
        outline: none;
        font-size: 12px;
    }
}


/* ========================================
   検索0件の場合の処理
   → ハンバーガーメニューを開いて再検索する手間を省くため、
      検索結果画面にも検索窓を設置。
   → PC表示ではヘッダーから直接再検索できるため、
      検索窓を非表示にする。
======================================== */
.searchNoResults .wp-block-search__inside-wrapper {
    display: block;
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}
/* =======================================
   検索入力欄
======================================== */
.wp-block-search {
    margin: 32px auto !important;
}
.searchNoResults .wp-block-search__inside-wrapper {
    border: none;
    background: none;
    padding: 0;
}
.searchNoResults .wp-block-search__label {
    display: none;
}
.searchNoResults .wp-block-search__input {
    display: block;
    width: 100%;
    min-width: 0;
    height: 44px;
    margin: 0 !important;
    padding: 0 14px 2px 56px;
    box-sizing: border-box;
    border-radius: 999px;
    outline: none;
    background: rgba(255, 255, 255, 0.8);
    color: var(--color-text);
    border: 1px solid rgba(136, 136, 136, 0.8);
    font: inherit;
    font-size: 12px;
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.04),
        0 8px 24px -8px rgba(50, 50, 93, 0.08),
        0 8px 16px -8px rgba(0, 0, 0, 0.16);
}
/* 入力欄のフォーカス時 */
.searchNoResults .wp-block-search__input:focus {
    font-size: 16px;
}
.searchNoResults .wp-block-search__input:focus-visible {
    outline: none;
    border-color: rgba(136, 136, 136, 0.8);
}
/* ========================================
   検索ボタン
======================================== */
.searchNoResults .wp-block-search__button {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--color-border);
    cursor: pointer;
}
/* ========================================
   検索アイコン
======================================== */
/* WordPress標準のSVGを非表示 */
.searchNoResults .wp-block-search__button svg {
    display: none;
}
/* 独自の虫眼鏡アイコン */
.searchNoResults .wp-block-search__button::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background-image: url("/wp-content/themes/atsu-portfolio-theme/assets/images/icons/magnifying-glass-light-white.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* 検索結果がある場合検索窓は全て非表示 */
.search-results .searchNoResults {
    display: none;
}

/* ========================================
   PC版
   → 1024px以降はPC横並びメニュー表示となるため、
      検索結果直下の検索窓は非表示に。
======================================== */
@media (min-width: 1024px) {
    .searchNoResults {
        display: none;
    }
}