/* =====================================================================
   在商言法 · 法律问答社区（zsyf-qa）前端样式
   ---------------------------------------------------------------------
   背景：本插件原不含任何样式表，[zsyf_qa_list] / [zsyf_qa_ask] 渲染的
   .zsyf-qa 区块在 /qa 页面输出为「裸 HTML」（搜索框、问题列表、提问表单
   均无边框/圆角/间距），与站点其它板块视觉割裂。
   本文件按站点设计令牌（--wh-navy/--wh-blue/--wh-line/--wh-radius/
   --wh-shadow）补齐完整布局与响应式，并保证移动端触控热区 ≥44px。
   令牌在 wh.css :root 中定义；若未加载则回退为下方本地默认值。
   ===================================================================== */

.zsyf-qa {
    --qa-navy: var(--wh-navy, #0a2f5c);
    --qa-blue: var(--wh-blue, #1668c4);
    --qa-blue-d: var(--wh-blue-d, #0f4f96);
    --qa-ink: var(--wh-ink, #1f2d3d);
    --qa-muted: var(--wh-muted, #5b6b7c);
    --qa-line: var(--wh-line, #e3ebf4);
    --qa-bg: var(--wh-bg, #f5f8fc);
    --qa-gold: var(--wh-gold, #ffc582);
    --qa-radius: var(--wh-radius, 10px);
    --qa-shadow: var(--wh-shadow, 0 8px 28px rgba(10, 47, 92, .08));
    box-sizing: border-box;
    color: var(--qa-ink);
    font-size: 15px;
    line-height: 1.75;
}
.zsyf-qa *,
.zsyf-qa *::before,
.zsyf-qa *::after { box-sizing: border-box; }

/* ---------- 搜索条 ---------- */
.zsyf-qa__search {
    display: flex;
    gap: 10px;
    margin: 0 0 22px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--qa-line);
    border-radius: var(--qa-radius);
    box-shadow: var(--qa-shadow);
}
.zsyf-qa__search input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    padding: 0 16px;
    font-size: 15px;
    color: var(--qa-ink);
    background: var(--qa-bg);
    border: 1px solid var(--qa-line);
    border-radius: 8px;
    transition: border-color .15s, box-shadow .15s;
}
.zsyf-qa__search input[type="text"]:focus {
    outline: none;
    border-color: var(--qa-blue);
    box-shadow: 0 0 0 3px rgba(22, 104, 196, .15);
}
.zsyf-qa__search button {
    flex: 0 0 auto;
    height: 46px;
    padding: 0 26px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(180deg, var(--qa-blue) 0%, var(--qa-blue-d) 100%);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: filter .15s, transform .15s;
}
.zsyf-qa__search button:hover { filter: brightness(1.06); }
.zsyf-qa__search button:active { transform: translateY(1px); }

/* ---------- 问题列表 ---------- */
.zsyf-qa__list {
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.zsyf-qa__item {
    position: relative;
    padding: 18px 20px 16px;
    background: #fff;
    border: 1px solid var(--qa-line);
    border-left: 3px solid var(--qa-blue);
    border-radius: var(--qa-radius);
    box-shadow: 0 2px 10px rgba(10, 47, 92, .05);
    transition: transform .18s, box-shadow .18s, border-color .18s;
}
.zsyf-qa__item:hover {
    transform: translateY(-3px);
    border-left-color: var(--qa-navy);
    box-shadow: 0 10px 26px rgba(10, 47, 92, .12);
}
.zsyf-qa__badge {
    display: inline-block;
    margin: 0 0 10px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.7;
    color: var(--qa-blue-d);
    background: #eaf2fd;
    border-radius: 999px;
}
.zsyf-qa__title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
}
.zsyf-qa__title a {
    color: var(--qa-navy);
    text-decoration: none;
    background-image: linear-gradient(var(--qa-blue), var(--qa-blue));
    background-size: 0 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size .22s, color .18s;
}
.zsyf-qa__title a:hover {
    color: var(--qa-blue);
    background-size: 100% 2px;
}
.zsyf-qa__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: var(--qa-muted);
}
.zsyf-qa__empty {
    margin: 0 0 24px;
    padding: 18px 20px;
    color: var(--qa-muted);
    background: var(--qa-bg);
    border: 1px dashed var(--qa-line);
    border-radius: var(--qa-radius);
}
.zsyf-qa__empty a { color: var(--qa-blue); font-weight: 600; }

/* ---------- 提问区 ---------- */
.zsyf-qa__ask {
    margin: 8px 0 0;
    padding: 26px 24px;
    background: linear-gradient(180deg, #f8fbff 0%, #fff 100%);
    border: 1px solid var(--qa-line);
    border-radius: var(--qa-radius);
    box-shadow: var(--qa-shadow);
    scroll-margin-top: calc(var(--wh-head, 80px) + 16px);
}
.zsyf-qa__ask h3 {
    position: relative;
    margin: 0 0 8px;
    padding-left: 14px;
    font-size: 20px;
    color: var(--qa-navy);
}
.zsyf-qa__ask h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: .18em;
    bottom: .18em;
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--qa-blue), var(--qa-gold));
}
.zsyf-qa__tip {
    margin: 0 0 18px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--qa-muted);
    background: #fff7ec;
    border: 1px solid #ffe3bf;
    border-radius: 8px;
}
.zsyf-qa__form { margin: 0; }
.zsyf-qa__row { margin: 0 0 16px; display: flex; flex-direction: column; gap: 6px; }
.zsyf-qa__row label { font-size: 14px; font-weight: 600; color: var(--qa-ink); }
.zsyf-qa__row input[type="text"],
.zsyf-qa__row input[type="tel"],
.zsyf-qa__row textarea {
    width: 100%;
    padding: 11px 14px;
    font-size: 15px;
    font-family: inherit;
    color: var(--qa-ink);
    background: #fff;
    border: 1px solid var(--qa-line);
    border-radius: 8px;
    transition: border-color .15s, box-shadow .15s;
}
.zsyf-qa__row input:focus,
.zsyf-qa__row textarea:focus {
    outline: none;
    border-color: var(--qa-blue);
    box-shadow: 0 0 0 3px rgba(22, 104, 196, .15);
}
.zsyf-qa__row textarea { resize: vertical; min-height: 96px; }
.zsyf-qa__form button[type="submit"] {
    display: inline-block;
    min-height: 46px;
    padding: 0 34px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(180deg, var(--qa-blue) 0%, var(--qa-blue-d) 100%);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: filter .15s, transform .15s;
}
.zsyf-qa__form button[type="submit"]:hover { filter: brightness(1.06); }
.zsyf-qa__form button[type="submit"]:active { transform: translateY(1px); }
.zsyf-qa__ask-result {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--qa-blue-d);
}
.zsyf-qa__ask-result:empty { display: none; }

/* ---------- 响应式 ---------- */
@media (max-width: 860px) {
    .zsyf-qa__list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .zsyf-qa__search { flex-direction: column; padding: 12px; }
    .zsyf-qa__search input[type="text"],
    .zsyf-qa__search button { width: 100%; }
    .zsyf-qa__ask { padding: 20px 16px; }
    .zsyf-qa__title { font-size: 16px; }
    /* 触控热区兜底 */
    .zsyf-qa__title a,
    .zsyf-qa__empty a { display: inline-block; min-height: 44px; padding: 4px 0; }
}