/*
 Theme Name:  GeneratePress Child
 Theme URI:   https://generatepress.com
 Description: A child theme for GeneratePress.
 Author:      Biao
 Template:    generatepress
 Version:     1.0.0
*/

/* 在这里编写你的自定义 CSS */

/* =========================
 *  头部搜索条样式（重点）
 * ========================= */

/* 整个搜索条外层：跟 grid-container 一样居中 */
.header-search-wrapper {
    margin: 15px auto;
}

/* 内层容器占满版心宽度 */
.header-search-bar {
    width: 100%;
}

/* 搜索表单：横向布局 */
.header-search-bar .search-form {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
}

/* label 占满一行，用来撑开输入框 */
.header-search-bar .search-form label {
    flex: 1 1 auto;
    width: 100%;
    margin: 0;
}

/* 搜索输入框：在按钮前尽可能长 */
.header-search-bar .search-form .search-field,
.header-search-bar .search-form input[type="search"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px 12px;
    font-size: 16px;
    box-sizing: border-box;
}

/* 搜索按钮：在右侧，保持一行 */
.header-search-bar .search-form .search-submit,
.header-search-bar .search-form input[type="submit"] {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 10px 18px;
    font-size: 16px;
    box-sizing: border-box;
}

/* 如果你觉得输入框还不够长，可以再“加长一点” */
@media (min-width: 992px) {
    .header-search-bar .search-form .search-field,
    .header-search-bar .search-form input[type="search"] {
        /* 这个相当于在宽屏时再加长一点点 */
        padding: 12px 14px;
        font-size: 17px;
    }
}