/*
 * @Description: OneNav 子主题自定义样式
 *               主要服务 core/module-shortcode.php 与 module-content.php 输出的结构。
 *               类名统一 sub- 前缀，避免与父主题样式冲突。
 */

/* ---------------- 提示框 [sub_notice] ---------------- */
.sub-notice {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    margin: 16px 0;
    border-radius: 8px;
    border-left: 4px solid;
    font-size: 14px;
    line-height: 1.7;
}
.sub-notice-title {
    font-weight: 600;
}
.sub-notice-info {
    background: rgba(47, 112, 208, .08);
    border-color: #2f70d0;
    color: #1f4e8c;
}
.sub-notice-success {
    background: rgba(39, 174, 96, .08);
    border-color: #27ae60;
    color: #1e7e46;
}
.sub-notice-warning {
    background: rgba(240, 160, 32, .1);
    border-color: #f0a020;
    color: #8a5a00;
}
.sub-notice-error {
    background: rgba(224, 60, 49, .08);
    border-color: #e03c31;
    color: #a02a22;
}
/* 深色模式适配（父主题通过 html[data-mode] 切换） */
html[data-mode="dark"] .sub-notice-info    { color: #9cc3f0; }
html[data-mode="dark"] .sub-notice-success { color: #7fd6a4; }
html[data-mode="dark"] .sub-notice-warning { color: #f0c36d; }
html[data-mode="dark"] .sub-notice-error   { color: #f09a93; }

/* ---------------- 按钮 [sub_btn] ---------------- */
.sub-btn {
    display: inline-block;
    padding: 8px 22px;
    margin: 8px 4px 8px 0;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none !important;
    transition: opacity .2s ease, transform .2s ease;
}
.sub-btn:hover {
    opacity: .85;
    transform: translateY(-1px);
}
.sub-btn-blue  { background: #2f70d0; color: #fff !important; }
.sub-btn-green { background: #27ae60; color: #fff !important; }
.sub-btn-red   { background: #e03c31; color: #fff !important; }
.sub-btn-gray  { background: #6c757d; color: #fff !important; }

/* ---------------- 时间线 [sub_timeline] ---------------- */
.sub-timeline {
    list-style: none;
    margin: 16px 0;
    padding: 0;
}
.sub-timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 0 0 18px 0;
}
.sub-timeline-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 108px;
    top: 22px;
    bottom: 0;
    width: 2px;
    background: rgba(127, 127, 127, .25);
}
.sub-timeline-time {
    flex: 0 0 96px;
    text-align: right;
    font-size: 13px;
    color: #999;
    padding-top: 2px;
}
.sub-timeline-dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin-top: 5px;
    border-radius: 50%;
    background: #2f70d0;
    box-shadow: 0 0 0 3px rgba(47, 112, 208, .2);
}
.sub-timeline-content {
    flex: 1;
    font-size: 14px;
    line-height: 1.7;
}

/* ---------------- 倒计时 [sub_countdown] ---------------- */
.sub-countdown {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 6px 14px;
    margin: 8px 0;
    border-radius: 6px;
    background: rgba(47, 112, 208, .08);
    font-size: 13px;
    color: #2f70d0;
}
.sub-countdown span {
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---------------- 点击复制 [sub_copy] ---------------- */
.sub-copy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
}
.sub-copy code {
    padding: 3px 8px;
    border-radius: 4px;
    background: rgba(127, 127, 127, .12);
    font-size: 13px;
    word-break: break-all;
}
.sub-copy-btn {
    flex: 0 0 auto;
    padding: 3px 10px;
    border: none;
    border-radius: 4px;
    background: #2f70d0;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    transition: opacity .2s ease;
}
.sub-copy-btn:hover { opacity: .85; }
.sub-copy-btn.copied { background: #27ae60; }

/* ---------------- 网址详情页相关推荐 ---------------- */
.sub-related-sites {
    margin-top: 24px;
}
.sub-related-title {
    font-size: 18px;
    margin-bottom: 12px;
    padding-left: 10px;
    border-left: 3px solid #2f70d0;
}

/* ---------------- 兜底网址列表 ---------------- */
.sub-sites-fallback {
    list-style: none;
    margin: 12px 0;
    padding: 0;
    columns: 2;
}
.sub-sites-fallback li {
    padding: 4px 0;
    break-inside: avoid;
}