/* 榆林天气频道页 · 美化样式（与在榆林网首页视觉统一）
   主色：青绿 #1abc9c（站点导航强调色） + 天空蓝 #2f9be0
   说明：本样式表在 header 中最后加载，优先级高于站点 style.min.css；
   除 .site-foot 外均限定在 .wx-page 内，避免影响全站其它页面。 */

:root{
    --wx-bg1:#f3f7fb; --wx-bg2:#e9f0f7;
    --wx-card:#ffffff; --wx-ink:#1f2a37; --wx-sub:#5b6b7b;
    --wx-line:#e6ecf2; --wx-teal:#1abc9c; --wx-teal-d:#15a589;
    --wx-sky:#2f9be0; --wx-sky-d:#1f7fc4;
    --wx-shadow-sm:0 1px 3px rgba(20,40,60,.08);
    --wx-shadow:0 10px 28px rgba(20,40,60,.12);
    --wx-radius:16px;
    --wx-font:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
body{
    margin:0;
    font-family:var(--wx-font);
    color:var(--wx-ink);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
}

/* 频道页容器 */
.wx-page{padding:24px 0 8px;min-height:60vh}

/* SVG 天气图标：以 font-size 控制尺寸，自适应缩放 */
.wico{display:inline-block;width:1em;height:1em;vertical-align:middle;flex:none}

/* 提示条 */
.notice{
    background:#fff7e6;border:1px solid #ffe1a8;color:#8a5a00;
    padding:12px 14px;border-radius:var(--wx-radius);font-size:14px;margin-bottom:18px;
}
.notice code{background:#fff;padding:1px 6px;border-radius:5px;font-size:13px}

/* ===== 聚焦大卡（默认区县） ===== */
.hero{
    position:relative;overflow:hidden;
    background:linear-gradient(135deg,var(--wx-sky) 0%,var(--wx-teal) 100%);
    color:#fff;border-radius:22px;padding:24px 26px;
    box-shadow:var(--wx-shadow);margin-bottom:26px;
}
/* 右上角装饰光晕 */
.hero::after{
    content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;
    background:radial-gradient(circle,rgba(255,255,255,.22),transparent 70%);
    border-radius:50%;pointer-events:none;
}
.hero-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px;position:relative}
.hero-head h1{margin:0;font-size:26px;letter-spacing:.5px}
.hero-tag{font-size:13px;opacity:.92;background:rgba(255,255,255,.18);padding:4px 12px;border-radius:999px}
.hero-body{display:flex;align-items:center;gap:30px;flex-wrap:wrap;margin-top:14px;position:relative}
.hero-now{display:flex;align-items:center;gap:16px}
.hero-ico{font-size:66px;line-height:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.18))}
.hero-temp b{font-size:54px;font-weight:800;line-height:1}
.hero-temp small{display:block;font-size:16px;opacity:.94;margin-top:2px}
.hero-meta{list-style:none;margin:0;padding:0;display:flex;gap:22px;flex-wrap:wrap}
.hero-meta li{font-size:14px;opacity:.96;position:relative;padding-left:14px}
.hero-meta li::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.7)}
.hero-meta b{font-weight:700}

.hero-7d{list-style:none;display:flex;gap:4px;margin:20px 0 0;padding:16px 0 0;
    border-top:1px solid rgba(255,255,255,.25);overflow-x:auto;position:relative}
.hero-7d li{flex:1;min-width:58px;text-align:center;font-size:13px}
.h7-wk{display:block;opacity:.9}
.h7-ico{font-size:28px;display:block;margin:5px 0}
.h7-temp b{font-weight:700}
.updated{margin:12px 0 0;font-size:12px;opacity:.82;position:relative}

/* ===== 区县网格 ===== */
.grid-title{
    font-size:19px;font-weight:700;margin:8px 2px 16px;padding-left:12px;
    position:relative;color:var(--wx-ink);
}
.grid-title::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:4px;
    border-radius:3px;background:linear-gradient(var(--wx-teal),var(--wx-sky))}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}

.wx-card{
    background:var(--wx-card);border:1px solid var(--wx-line);border-radius:var(--wx-radius);
    box-shadow:var(--wx-shadow-sm);overflow:hidden;
    transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.wx-card:hover{transform:translateY(-3px);box-shadow:var(--wx-shadow);border-color:#cfe9e3}
.wx-card[open]{border-color:var(--wx-teal)}

.card-sum{
    display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;
    list-style:none;outline:none;transition:background .15s ease;
}
.card-sum::-webkit-details-marker{display:none}
.card-sum:hover{background:#f7fafc}
.wx-card[open] > .card-sum{background:linear-gradient(90deg,#f1fbf9,#ffffff)}
/* 折叠箭头 */
.card-sum::after{
    content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid var(--wx-sub);
    border-bottom:2px solid var(--wx-sub);transform:rotate(45deg);transition:transform .2s ease;flex:none;
}
.wx-card[open] > .card-sum::after{transform:rotate(-135deg)}

.c-badge{
    flex:none;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
    font-size:30px;
    background:linear-gradient(135deg,rgba(47,155,224,.14),rgba(26,188,156,.18));
    box-shadow:inset 0 0 0 1px rgba(26,188,156,.15);
}
.c-main{display:flex;flex-direction:column;min-width:0;flex:1}
.c-name{font-weight:700;font-size:16px;color:var(--wx-ink);text-decoration:none;transition:color .15s ease}
a.c-name:hover{color:var(--wx-teal-d)}
.c-text{font-size:12.5px;color:var(--wx-sub);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-temp{font-size:22px;font-weight:800;color:var(--wx-ink);min-width:52px;text-align:right}
.c-hilo{font-size:12.5px;color:var(--wx-sub);min-width:64px;text-align:right}
.c-empty{padding:10px 16px;color:var(--wx-sub);font-size:14px}

/* 7 天明细 */
.dlist{list-style:none;margin:0;padding:4px 8px 12px;border-top:1px solid var(--wx-line)}
.drow{display:grid;grid-template-columns:62px 32px 1fr auto;align-items:center;gap:8px;
    padding:8px 10px;border-radius:10px;font-size:14px}
.drow:nth-child(odd){background:#f7fafd}
.d-date{font-size:13px;color:var(--wx-sub)}
.d-date small{display:block;font-size:11px;opacity:.8}
.d-ico{font-size:22px;text-align:center}
.d-txt{font-size:14px;color:var(--wx-ink)}
.d-temp{font-size:14px;text-align:right;white-space:nowrap;color:var(--wx-sub)}
.d-temp b{font-weight:700;color:var(--wx-ink)}

/* 卡片内「查看完整预报」入口 */
.c-more{
    display:inline-block;margin:2px 16px 14px;font-size:13.5px;font-weight:600;
    color:var(--wx-teal-d);text-decoration:none;
}
.c-more::after{content:" →";}
.c-more:hover{text-decoration:underline}

/* 区县详情页：面包屑 / 返回 */
.crumbs{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--wx-sub);margin:4px 2px 16px}
.crumbs a{color:var(--wx-teal-d);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span{color:var(--wx-sub)}
.back-row{margin:22px 0 4px}
.btn-back{
    display:inline-block;padding:10px 18px;border-radius:999px;
    background:var(--wx-card);border:1px solid var(--wx-line);color:var(--wx-ink);
    font-size:14px;font-weight:600;text-decoration:none;box-shadow:var(--wx-shadow-sm);
    transition:transform .15s ease,border-color .15s ease,color .15s ease;
}
.btn-back:hover{transform:translateY(-2px);border-color:#cfe9e3;color:var(--wx-teal-d)}

/* 详情页 7 天明细：整宽卡片列表 */
.dlist-full{background:var(--wx-card);border:1px solid var(--wx-line);border-radius:var(--wx-radius);
    box-shadow:var(--wx-shadow-sm);padding:6px 10px}
.dlist-full .drow{grid-template-columns:90px 36px 1fr auto;font-size:15px;padding:12px 14px}
.dlist-full .drow:nth-child(odd){background:#f7fafd}

/* ===== 统一页脚（深色，与在榆林网一致） ===== */
.site-foot{background:#2b3440;color:#cdd5de;font-size:13px;padding:26px 0;margin-top:36px}
.site-foot .container{max-width:1320px}
.site-foot .copyright p{margin:4px 0;line-height:1.7}
.site-foot a{color:#9fe3d6;text-decoration:none}
.site-foot a:hover{color:#fff;text-decoration:underline}
.site-foot .wx-attr{margin-top:8px;color:#aeb8c4}
.site-foot .nav-footer ul{justify-content:flex-start;flex-wrap:wrap}
.site-foot .nav-footer ul li{width:auto;margin:0 4px 4px 0}
.site-foot .nav-footer a{color:#cdd5de;font-size:.72rem}
.site-foot .nav-footer a:hover{color:#fff}

/* ===== 无障碍 ===== */
a:focus-visible,.card-sum:focus-visible{outline:3px solid var(--wx-teal);outline-offset:2px;border-radius:8px}

@media (prefers-reduced-motion: reduce){
    *{transition:none!important;animation:none!important}
}

/* ===== 响应式 ===== */
@media (min-width:720px){
    .grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
}
@media (max-width:560px){
    .hero{padding:20px 18px;border-radius:18px}
    .hero-temp b{font-size:46px}
    .hero-ico{font-size:56px}
    .hero-meta{gap:16px}
    .hero-7d li{min-width:50px}
    .c-hilo{display:none} /* 窄屏只保留名称+图标+当前温，更清爽 */
}