/* ==========================================================================
   全新美化版：紧凑、精致的下排搜索框样式
   ========================================================================== */

/* 1. 桌面端美化（屏幕宽度 >= 992px 时生效） */
@media (min-width: 992px) {
    .container {
        display: flex;
        flex-wrap: wrap; 
        align-items: center;
        justify-content: space-between;
        row-gap: 8px; /* 核心修改：大幅缩减第一行(菜单)与第二行(搜索框)的垂直间隙 */
    }

    /* 搜索表单外层包裹盒 */
    .header-search-form {
        width: 100%;
        display: flex;
        justify-content: flex-end; /* 保持靠右对齐 */
        margin-top: 2px; /* 极小的外边距，精确微调与菜单的距离 */
    }

    /* 限制标准 WordPress 搜索表单的容器宽度 */
    .header-search-form form {
        position: relative;
        width: 200px;
        max-width: 200px;
    }

    /* 输入框本体高级美化 */
    .header-search-form input[type="search"],
    .header-search-form .search-field {
        width: 100%;
        height: 36px;
        padding: 0 35px 0 15px; /* 右侧留出 35px 空间给放大镜图标 */
        font-size: 13px;
        color: #333333;
        background-color: #f7f7f7; /* 改用轻微的高级灰底色 */
        border: 1px solid #e5e5e5;
        border-radius: 18px; /* 极具现代感的圆角胶囊外形 */
        outline: none;
        box-sizing: border-box;
        transition: all 0.25s ease-in-out;
    }

    /* 鼠标悬浮和聚焦（激活）时的惊艳视效 */
    .header-search-form input[type="search"]:hover,
    .header-search-form .search-field:hover {
        background-color: #f1f1f1;
        border-color: #cccccc;
    }

    .header-search-form input[type="search"]:focus,
    .header-search-form .search-field:focus {
        background-color: #ffffff;
        border-color: #111111; /* 激活时边框变深 */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); /* 带有淡淡的下沉阴影 */
    }

    /* 隐藏原生的繁琐提交按钮 */
    .header-search-form input[type="submit"] {
        display: none;
    }

    /* 【点睛之笔】利用 CSS 伪元素绘制一个极其精致、不占带宽的原生放大镜图标 */
    .header-search-form form::after {
        content: '';
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        width: 10px;
        height: 10px;
        border: 2px solid #999999;
        border-radius: 50%;
        pointer-events: none; /* 防止遮挡鼠标点击输入框 */
        transition: border-color 0.25s;
    }

    .header-search-form form::before {
        content: '';
        position: absolute;
        right: 12px;
        top: 56%;
        width: 5px;
        height: 2px;
        background: #999999;
        transform: rotate(45deg);
        pointer-events: none;
        transition: background 0.25s;
    }

    /* 当输入框激活时，放大镜图标也同步变深 */
    .header-search-form form:focus-within::after { border-color: #111111; }
    .header-search-form form:focus-within::before { background: #111111; }
}

/* 2. 移动端优化（屏幕宽度 < 992px 时生效） */
@media (max-width: 991px) {
    .container {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .header-search-form {
        width: 100%;
        box-sizing: border-box;
        border-top: 1px solid #f0f0f0;
        padding-top: 10px;
    }
    
    .header-search-form input[type="search"],
    .header-search-form .search-field {
        width: 100%;
        height: 42px;
        padding: 0 15px;
        font-size: 15px;
        background-color: #f7f7f7;
        border: 1px solid #eeeeee;
        border-radius: 21px; /* 手机端同步变为舒适的圆角 */
        box-sizing: border-box;
        -webkit-appearance: none; /* 消除 iOS 默认输入框内阴影 */
    }
    
    .header-search-form .search-submit,
    .header-search-form input[type="submit"] {
        display: none;
    }
}