/* tq.css —— 多语言改造新增的结构样式（common.css / province.css / theme-light.css 之后加载）
   配色沿用主题：主色 #2b7de9，正文 #1f2d3d，次要文字 #5b6b7c / #9aa7b5，卡片圆角 20px。 */

/* 1. 头部：语言条 + 站内导航 */
.mod-head .inner,
.mod-foot .inner {
    max-width: 1200px;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}
.mod-head .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 12px;
    padding-bottom: 12px;
}
.mod-head .inner.tq-head-row2 {
    justify-content: flex-start;
    padding: 0 0 14px;
}
.tq-head-right {
    display: flex;
    align-items: center;
    gap: 14px;
}
.tq-langbar {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 4px 6px;
    background: rgba(255, 255, 255, .74);
    border: 1px solid rgba(31, 77, 120, .08);
    border-radius: 999px;
    font-size: .82rem;
}
.tq-langbar > i {
    margin: 0 4px 0 6px;
    color: #9aa7b5;
}
.tq-langbar a {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    color: #5b6b7c;
    white-space: nowrap;
}
.tq-langbar a:hover {
    color: #2b7de9;
    background: rgba(43, 125, 233, .08);
}
.tq-langbar a.on {
    /* common.css 里有 a:hover{color:#2b7de9 !important}，不盖上去悬停就是蓝字压蓝底 */
    color: #fff !important;
    background: linear-gradient(135deg, #2b7de9, #4a9eff);
}
.tq-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.tq-nav a {
    padding: 6px 12px;
    border-radius: 10px;
    font-size: .92rem;
    color: #5b6b7c;
}
.tq-nav a:hover {
    color: #2b7de9;
    background: rgba(43, 125, 233, .08);
}

/* 2. 首页 hero */
.tq-hero {
    margin: 0 0 24px;
    padding: 40px 24px;
    background: linear-gradient(150deg, rgba(43, 125, 233, .10) 0%, rgba(74, 158, 255, .04) 60%, rgba(255, 255, 255, .7) 100%);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(31, 77, 120, .08);
}
.tq-hero-inner {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}
.tq-hero-inner h1 {
    font-size: 1.7rem;
    line-height: 1.35;
    color: #1f2d3d;
}
.tq-hero-sub {
    margin: 12px 0 20px;
    color: #5b6b7c;
    line-height: 1.7;
}
.tq-page-title {
    margin: 0 0 18px;
    font-size: 1.5rem;
    color: #1f2d3d;
}
.tq-updated {
    margin: -8px 0 14px;
    color: #9aa7b5;
    font-size: .85rem;
}

/* 3. 搜索框：hero 里的这一个不在 .mod-head 下，套不到主题里的头部规则 */
.tq-search {
    position: relative;
    max-width: 520px;
    margin: 0 auto;
}
.tq-search form {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(31, 77, 120, .12);
    border-radius: 999px;
    box-shadow: 0 6px 18px rgba(31, 77, 120, .08);
}
.tq-search form:focus-within {
    border-color: #2b7de9;
}
.tq-search .input-text {
    flex: 1;
    min-width: 0;
    padding: 12px 18px;
    border: none;
    outline: none;
    background: none;
    color: #1f2d3d;
}
.tq-search button {
    padding: 0 22px;
    border: none;
    outline: none;
    cursor: pointer;
    background: linear-gradient(135deg, #2b7de9, #4a9eff);
    color: #fff;
    white-space: nowrap;
}
.tq-search button:hover {
    transform: scale(1.03);
}
.tq-search-hint {
    margin-top: 10px;
    color: #9aa7b5;
    font-size: .85rem;
    line-height: 1.6;
}

/* 4. 正文小标题与卡片内说明 */
.tq-block-intro {
    margin-bottom: 14px;
    color: #5b6b7c;
    line-height: 1.7;
}

/* 5. 链接格子（地区、城市、同城推荐） */
.tq-linkgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}
.tq-linkgrid a {
    padding: 9px 12px;
    background: rgba(43, 125, 233, .06);
    border-radius: 10px;
    color: #1f2d3d;
    font-size: .9rem;
    text-align: center;
    overflow-wrap: anywhere;
}
.tq-linkgrid a:hover {
    color: #fff !important;
    background: #2b7de9;
}

/* 6. 两段式内容栅格（教程、为什么用它） */
.tq-grid {
    display: grid;
    /* 280px 写死的话，320 宽的手机上卡片缩不下去，整页多出一条横向滚动：min(280px,100%) 让它能收到容器宽 */
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 14px;
}
.tq-grid .tech-card {
    margin: 0;
}

/* 7. FAQ 折叠 */
.tq-faq {
    display: grid;
    gap: 8px;
}
.tq-faq-item {
    padding: 12px 16px;
    background: rgba(43, 125, 233, .04);
    border: 1px solid rgba(31, 77, 120, .06);
    border-radius: 12px;
}
.tq-faq-item summary {
    cursor: pointer;
    color: #1f2d3d;
    font-weight: 600;
    list-style: none;
}
.tq-faq-item summary::-webkit-details-marker {
    display: none;
}
.tq-faq-item summary::before {
    content: "+";
    display: inline-block;
    width: 18px;
    color: #2b7de9;
    font-weight: 700;
}
.tq-faq-item[open] summary::before {
    content: "−";
}
.tq-faq-a {
    margin: 10px 0 2px 18px;
    color: #5b6b7c;
    line-height: 1.75;
}

/* 8. 页脚导航 */
.tq-footnav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
    margin: 10px 0;
}
.tq-footnav a {
    color: #5b6b7c;
}
.tq-footnav a:hover {
    color: #2b7de9;
}

/* 9. 面包屑：主题是 display:flex 不换行，中文地名短没暴露问题，拼音名（Enshidaxiagu）会顶破手机宽度 */
.tech-breadcrumb {
    flex-wrap: wrap;
    row-gap: 4px;
}
.tech-breadcrumb a,
.tech-breadcrumb strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* 10. 城市页首屏：主题里 1fr/auto 两列没有对应的窄屏规则，5rem 的大字温度和 130px 图标
   各自把列撑到超出卡片（min-width:auto），手机宽度下整页横向溢出 */
@media screen and (max-width: 768px) {
    .weather-hero {
        padding: 22px 18px;
        gap: 14px;
    }
    .weather-hero .wh-left,
    .weather-hero .wh-right,
    .weather-hero .detail-item {
        min-width: 0;
    }
    .weather-hero .temp-main {
        font-size: 3.2rem;
    }
    .weather-hero .wh-right .weather-icon {
        width: 92px;
        height: 92px;
    }
    .weather-hero .details-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding-top: 16px;
    }
    .weather-hero .detail-item {
        padding: 14px 8px;
        overflow-wrap: anywhere;
    }
    .weather-hero .detail-item .value {
        font-size: 1rem;
    }
}

/* 11. 站标：中英文各一张图（logo-zh / logo-en），只锁高度等比缩放，重新出图不用改样式 */
.mod-head .logo .tq-logo {
    display: inline-flex;
    align-items: center;
}
.mod-head .logo .tq-logo-img {
    height: 44px;
    width: auto;
    max-width: 100%;
    display: block;
}

/* 12. 历史天气：区间查询表单 + 月份格子当前项 */
.tq-histform {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}
.tq-histform label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #5b6b7c;
    font-size: .85rem;
}
.tq-histform input {
    padding: 10px 12px;
    background: #fff;
    border: 1px solid rgba(31, 77, 120, .12);
    border-radius: 10px;
    color: #1f2d3d;
    font: inherit;
}
.tq-histform button {
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    background: linear-gradient(135deg, #2b7de9, #4a9eff);
    color: #fff;
    font: inherit;
    white-space: nowrap;
}
.tq-histform button:hover {
    transform: scale(1.03);
}
/* 写在 .tq-linkgrid a:hover 之后，当前月份的格子悬停时不会被主题的全局 a:hover 顶成蓝字压蓝底 */
.tq-linkgrid a.on {
    color: #fff !important;
    background: #2b7de9;
}

/* 13. 历史天气日历：主题的日历规则挂在 .mod-list .bd 下，动态历史页套不到，
   少了 table-layout:fixed，长天气名（Fog to Thunderstorm）会把七列撑成一行宽页 */
.calendar {
    margin-bottom: 4px;
}
.calendar table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    color: #546d7e;
}
.calendar thead {
    background: #f5f8fa;
}
.calendar th,
.calendar td {
    padding: 8px 5px;
    border: 1px solid #e4eaee;
    line-height: 20px;
    text-align: center;
    vertical-align: top;
    overflow-wrap: anywhere;
}
.calendar th {
    padding: 5px 2px;
}
.calendar p {
    margin: 0 0 5px;
}
.calendar p.day {
    color: #8a9baf;
}
.calendar p.icon {
    line-height: 36px;
}
.calendar p.icon img {
    vertical-align: middle;
}
.calendar p.name {
    color: #1f2d3d;
    font-size: .82rem;
}
.calendar p.temperature {
    font-weight: 600;
}
.calendar p.sun {
    font-size: .78rem;
    color: #999;
}
.calendar p.sun .sunset {
    margin-left: 6px;
}
/* 七列日历要每格 100px 以上才放得下拉丁语气的天气名（Overcast to Cloudy）和日出日落，
   窄于此就只能折成五六行，整块高度失控。下面这些宽度改看逐日表格，信息是一样的。 */
@media screen and (max-width: 899px) {
    .section-card#calendar {
        display: none;
    }
}

/* 14. 广告位：后台没填代码时整块不输出，这里只管排版。
    min-height 是给 AdSense 异步撑开留的位置，不然单元一到就把下面的内容顶下去，
    手机上表现为点什么都没反应（Google 的「误点击」判定也吃这个）。 */
.tq-ad {
    max-width: 1180px;
    margin: 0 auto 18px;
    padding: 0 12px;
    overflow: hidden;
    text-align: center;
}
.tq-ad ins,
.tq-ad iframe {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}
.tq-ad-top {
    margin-top: 14px;
    min-height: 90px;
}
.tq-ad-bottom {
    margin-top: 22px;
    min-height: 250px;
}
/* 手机端 90px 的横幅太小，AdSense 更推荐 320x100 的自适应单元，
   窄屏只留必要的高度，别让空位把正文挤出首屏 */
@media screen and (max-width: 727px) {
    .tq-ad-top {
        min-height: 100px;
    }
    .tq-ad-bottom {
        min-height: 100px;
    }
}

/* 15. 窄屏 */
@media screen and (max-width: 727px) {
    .tq-histform label {
        flex: 1 1 46%;
    }
    .tq-histform input {
        width: 100%;
        box-sizing: border-box;
    }
    .mod-head .inner {
        padding: 10px;
    }
    .tq-hero {
        padding: 26px 16px;
        border-radius: 16px;
    }
    .tq-hero-inner h1 {
        font-size: 1.35rem;
    }
    .tq-linkgrid {
        grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    }
    .tq-langbar {
        font-size: .78rem;
    }
    .tq-langbar a {
        padding: 4px 8px;
    }
    .mod-head .logo .tq-logo-img {
        height: 34px;
    }
}

/* 320 宽的手机上四个语言名排一行放不开（实测 271px > 容器 223px），整页会横向滚 2px。
   换成两行居中，横向滚动就没了，也不用把字小到看不清。 */
@media screen and (max-width: 400px) {
    .tq-head-right {
        justify-content: center;
    }
    .tq-langbar {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 2px;
    }
    .tq-langbar a {
        padding: 3px 7px;
    }
}