/* ========================
   主导航栏容器和搜索框
   ======================== */

/* 主导航栏容器
   - 作用位置：LOGO 下方深红色横条
   - 用途：承载一级导航和右侧搜索框
*/
#templatemo_menu {
    width: 100%;
    height: 50px;
    background-color: #750a20;
    /* 原模板这里还叠加了背景图片，这里仅用纯色模拟 */
    border-bottom: 1px solid #333;
    display: flex;
    align-items: center;
}

/* 导航内层布局容器
   - 左侧：导航列表
   - 右侧：搜索框
*/
.menu-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0;
    /* 确保没有内边距 */
}

/* 导航右侧搜索框外层容器 */
.menu-search {
    position: relative;
    margin-right: 0;
    /* 与广告区域右边缘对齐 */
}

/* 导航右侧搜索输入框样式 */
.menu-search input {
    padding: 4px 28px 4px 8px;
    border-radius: 16px;
    border: 1px solid #ffffff;
    font-size: 12px;
}

/* 搜索框中的放大镜图标 */
.menu-search-icon {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.menu-search-icon svg {
    width: 16px;
    height: 16px;
}

/* ========================
   移动端响应式适配（手机等小屏幕）
   - 断点：768px 及以下
   ======================== */
@media (max-width: 768px) {

    /* 导航栏容器：红色背景占满整个宽度 */
    #templatemo_menu {
        width: 100%;
        height: auto;
        min-height: 50px;
    }

    /* 导航内层布局：改为纵向排列，内容宽度与内容区一致 */
    .menu-inner {
        flex-direction: column;
        align-items: stretch;
        padding: 10px 20px;
        max-width: 1200px;
        margin: 0 auto;
        box-sizing: border-box;
    }

    /* 导航列表：占满宽度，order确保在搜索栏上方 */
    #templatemo_menu>.menu-inner>ul {
        width: 100%;
        padding: 0;
        margin: 0;
        order: 1;
    }

    /* 搜索栏：单独一行，占满宽度，在导航下方，使用导航栏背景色 */
    .menu-search {
        width: 100%;
        margin: 10px 0 0 0;
        order: 2;
        /* 使用导航栏背景色，保持视觉统一 */
        background-color: #750a20;
        padding: 10px 0 0 0;
    }

    /* 搜索输入框：占满宽度 */
    .menu-search input {
        width: 100%;
        box-sizing: border-box;
        padding: 8px 28px 8px 12px;
        font-size: 14px;
    }
}