/* ============================================================================
 * ww-blocks.css — 2G-06B (v2): gentle depth + SMOOTH fade-in for 正文块/条目块.
 * Softer diffuse shadows (float, not a hard-cut box), comfortable padding so text
 * isn't tight to the edges, and a smooth ease-out fade+rise (真淡入, no snappy
 * bounce). Driven by ww-blocks-pop.js (self-cleaning). Site-wide except /test.
 * ========================================================================== */

/* ---------- gentle depth + breathing room ---------- */
#content article.post,
#content article.page {
    border-radius: 16px;
    padding: clamp(18px, 2.6vw, 30px) clamp(20px, 3vw, 34px);                       /* horizontal breathing room */
    box-shadow: 0 12px 38px -18px rgba(0,0,0,.13), 0 3px 12px -8px rgba(0,0,0,.07);
}
.post-list-thumb,
.link-item,
#comments .ww-fl-c-main {
    border-radius: 14px;
    box-shadow: 0 10px 30px -16px rgba(0,0,0,.15), 0 2px 8px -6px rgba(0,0,0,.07);
    transition: transform .28s ease, box-shadow .28s ease;
}
.link-item,
#comments .ww-fl-c-main { padding: 14px 16px; }                       /* item cards: room from text */
.link-item:hover,
#comments .ww-fl-c-main:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 38px -16px rgba(0,0,0,.19), 0 4px 12px -6px rgba(0,0,0,.09);
}

/* ---------- SMOOTH fade-in (真淡入): soft rise + fade, ease-out, no bounce ---------- */
@keyframes ww-blocks-fade {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ww-pop { opacity: 0; }
.ww-pop-show { animation: ww-blocks-fade .85s cubic-bezier(.22,.61,.36,1) both; }
/* upgrade Sakura's archive reveal to the same smooth fade */
.post-list-show { animation: ww-blocks-fade .85s cubic-bezier(.22,.61,.36,1) both !important; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .ww-pop { opacity: 1 !important; }
    .ww-pop-show, .post-list-show { animation: none !important; }
}

/* ============================================================================
 * 2G-06B: article LIST items = casual warm-paper sticky notes. Slight taped tilt
 * (leaning away from the tape side), springy hover, washi tape, fixed right gutter,
 * the read-more "3 dots" removed, and the read/comment count shown as a little bubble
 * that pops on hover (not always on the card).
 * ========================================================================== */
#content article.post.post-list {
    min-height: 160px; box-sizing: border-box;   /* 源头修复:正文空/短时,给绝对定位的缩略图预留高度,避免主图溢出到便签外 */
    background: #fffdf7 !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    border-radius: 7px !important;
    box-shadow: 0 10px 26px -14px rgba(0,0,0,.24), 0 2px 6px -3px rgba(0,0,0,.1) !important;
    padding: 24px 30px 16px 24px !important;
    margin: 0 0 36px 0 !important;
    transition: rotate .34s cubic-bezier(.34,1.5,.5,1), transform .3s ease, box-shadow .24s ease;   /* tilt via independent rotate: -> transform animations can NOT flatten it (no more straight-then-tilt) */
}
/* lean away from the tape side (odd = tape top-right -> lean left; even = tape top-left -> lean right) */
#content article.post.post-list:nth-child(odd)  { rotate: -1deg; }
#content article.post.post-list:nth-child(even) { rotate: 1.1deg; }
#content article.post.post-list:hover { rotate: 0deg; transform: translateY(-4px) scale(1.006);
    transition: transform .32s cubic-bezier(.34,1.5,.5,1), box-shadow .24s ease;   /* smooth only on hover */
    box-shadow: 0 18px 38px -14px rgba(0,0,0,.3), 0 4px 12px -4px rgba(0,0,0,.13) !important; }
/* never let the fade-in animation run on the tilted notes (it would play straight, then snap to tilt) */
#content article.post.post-list.ww-pop, #content article.post.post-list.ww-pop-show,
#content article.post.post-list.post-list-show { animation: none !important; opacity: 1 !important; }
/* hovering anywhere on the note lights up the title (visual feedback that the whole card is the link) */
#content article.post.post-list .entry-title a { transition: color .2s ease; }
#content article.post.post-list:hover .entry-title a { color: #c0532f; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* washi tape */
#content article.post.post-list::before { content:""; position:absolute; top:-10px; width:74px; height:22px;
    opacity:.82; box-shadow:0 2px 5px rgba(0,0,0,.1); border-radius:1px; }
#content article.post.post-list:nth-child(odd)::before  { right:30px; transform:rotate(7deg);
    background: repeating-linear-gradient(45deg, rgba(255,196,140,.72), rgba(255,196,140,.72) 6px, rgba(255,178,120,.72) 6px, rgba(255,178,120,.72) 12px); }
#content article.post.post-list:nth-child(even)::before { left:30px; transform:rotate(-7deg);
    background: repeating-linear-gradient(45deg, rgba(165,216,232,.68), rgba(165,216,232,.68) 6px, rgba(142,200,225,.68) 6px, rgba(142,200,225,.68) 12px); }
/* right gutter fix */
#content article.post.post-list h1.entry-title,
#content article.post.post-list p { margin-right: 8% !important; }
#content article.post.post-list .p-time { right: 8px !important; }
/* remove the "3 dots" read-more menu link */
#content article.post.post-list .post-more { display: none !important; }
/* read/comment = a little bubble floating just above the top-right, pops on hover (tail points down) */
#content article.post.post-list .entry-footer { margin: 6px 0 0 17% !important; }
#content article.post.post-list .info-meta {
    position: absolute !important; top: -16px !important; left: 20px !important; right: auto !important; z-index: 6;
    display: flex !important; align-items: center; gap: 9px;
    background: #fff; border-radius: 15px; padding: 5px 13px;
    box-shadow: 0 9px 22px -7px rgba(0,0,0,.24);
    opacity: 0; visibility: hidden; transform: translateY(6px) scale(.9); transform-origin: bottom left;
    transition: opacity .2s ease, transform .26s cubic-bezier(.34,1.56,.64,1);
    border-top: none !important; margin: 0 !important; pointer-events: none;
}
#content article.post.post-list:hover .info-meta { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
#content article.post.post-list .info-meta::after { content:""; position:absolute; bottom:-5px; left:22px;
    width:11px; height:11px; background:#fff; transform:rotate(45deg); box-shadow:2px 2px 4px -2px rgba(0,0,0,.1); }
#content article.post.post-list .info-meta .comnum,
#content article.post.post-list .info-meta .views { float:none !important; }
#content article.post.post-list .info-meta i { float:none !important; margin:0 4px 0 0 !important; }
#content article.post.post-list .info-meta span { display:inline-flex; align-items:center; font-size:12px; color:#5c6470; line-height:1.4; white-space:nowrap; }
#content article.post.post-list .info-meta a { color:#5c6470 !important; }
/* dark */
body.dark #content article.post.post-list { background:#2b2825 !important; box-shadow:0 10px 26px -14px rgba(0,0,0,.55) !important; }
body.dark #content article.post.post-list .info-meta,
body.dark #content article.post.post-list .info-meta::after { background:#3a3632; }
body.dark #content article.post.post-list .info-meta span,
body.dark #content article.post.post-list .info-meta a { color:#cfd2d8 !important; }

/* overlay hover-icon + 3-dots are removed at the SOURCE (child tpl/content.php & content-image.php),
   so nothing to hide here. Keep position:relative for the washi tape + hover bubble. */
#content article.post.post-list { position: relative !important; }
/* toast / notification ("复制成功" etc.) — was an ugly full-width orange bar; restyle to a small
   centered pill in the site palette (this is styling of the existing element, not a cover hack). */
.butterBar { background: transparent !important; box-shadow: none !important; border: 0 !important; text-align: center; }
.butterBar .butterBar-message, .butterBar p.butterBar-message {
    display: inline-block;
    background: rgba(70,76,86,.4) !important;                  /* 更透的石板灰 */
    -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);  /* 毛玻璃 */
    color: #fff !important; border: 1px solid rgba(255,255,255,.28) !important;
    border-radius: 20px !important;                           /* 圆角:单行仍圆润,多行长消息也不裂 */
    max-width: min(92vw, 460px); overflow-wrap: break-word; word-break: break-word; text-align: center;
    padding: 10px 22px !important; margin: 14px auto 0 !important;
    box-shadow: 0 14px 34px -10px rgba(0,0,0,.34) !important; font-size: 14px !important; line-height: 1.5 !important;
}
body.dark .butterBar .butterBar-message, body.dark .butterBar p.butterBar-message { background: rgba(30,32,36,.55) !important; }

/* 留言框背景 = 站主自己 P 的定制图(小巫巫最棒了),原本从作者的远程 view.moezx.cc 加载;
   现改为子主题内的本地副本 —— 不再外链,而且是"你那张"图。样式复刻旧站(contain / no-repeat / right)。 */
.comment-respond textarea, #comment, .commentbody {
    background-image: url(../img/comment-bg.png) !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: right !important;
}

/* fix: selecting text that touches an avatar/image turned the whole page black in Safari
   (images became part of the selection). Make images non-selectable + give text a soft
   selection colour instead of the browser default. (selection-turns-black) */
img, svg, .avatar, .comment-user-avatar, .comment-user-avatar img, .header-user-avatar img { -webkit-user-select: none; user-select: none; }
::selection { background: rgba(92,100,112,.22); }
::-moz-selection { background: rgba(92,100,112,.22); }

/* site-owner verified badge in comments (icon + bilingual tooltip; replaces the old level system) */
.ww-owner-badge { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; margin: 0 5px;
    padding: 1px 9px 1px 5px; border-radius: 999px; line-height: 1.7;
    background: linear-gradient(135deg, #c0532f, #8d3f22); box-shadow: 0 2px 7px -2px rgba(192,83,47,.6);
    color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; }
.ww-owner-badge svg { display: block; }
.ww-owner-badge-t { line-height: 1; }

/* ww search box polish — bilingual placeholders (footer.php) + a gentle rounded look */
.m-search-form .m-search-input { border-radius: 22px !important; padding-left: 18px !important; }
#search-input.text-input::placeholder, .m-search-input::placeholder { color: rgba(92,100,112,.6); letter-spacing: .2px; }


/* ===== WW 搜索:分「页面/文章」两栏 + 页面卡=紧凑图标卡(左强调条)===== */
.ww-search-section{ margin:0 0 8px; }
.ww-search-sec-title{ font-size:15px; font-weight:600; color:#3a3e49; margin:30px 0 16px; display:flex; align-items:center; gap:8px; }
.ww-search-sec-title .en{ color:#9aa0a6; font-weight:400; font-size:12px; }
.ww-search-pages .ww-search-sec-title{ color:#2f7d78; }
body.dark .ww-search-sec-title{ color:#e6e6e6; }
body.dark .ww-search-pages .ww-search-sec-title{ color:#5bbfb4; }

/* 页面卡:清掉文章卡的贴纸/倾斜/预留高度,换成紧凑横向卡 */
#content article.post.post-list.post-list--page{
	min-height:auto !important; padding:0 !important; margin:0 0 16px 0 !important;
	background:transparent !important; box-shadow:none !important; border:none !important;
	transform:none !important; rotate:0deg !important;
}
#content article.post.post-list.post-list--page::before{ content:none !important; display:none !important; }
.ww-pagecard{
	display:flex; align-items:center; gap:15px;
	background:#fff; border-left:5px solid #3a8891; border-radius:12px;
	box-shadow:0 8px 22px -14px rgba(60,70,90,.24);
	padding:15px 20px; text-decoration:none; position:relative;
	transition:transform .22s ease, box-shadow .22s ease;
}
.ww-pagecard:hover{ transform:translateY(-3px); box-shadow:0 15px 32px -15px rgba(60,70,90,.32); }
.ww-pagecard-ico{ flex:0 0 46px; width:46px; height:46px; border-radius:12px; background:#e8f3f1; color:#2f7d78; display:flex; align-items:center; justify-content:center; }
.ww-pagecard-ico svg{ width:24px; height:24px; display:block; }
.ww-pagecard-body{ display:flex; flex-direction:column; min-width:0; flex:1; }
.ww-pagecard-title{ font-size:17px; font-weight:600; color:#3a3e49; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:56px; }
.ww-pagecard:hover .ww-pagecard-title{ color:#2f7d78; }
.ww-pagecard-desc{ font-size:13px; color:#6b7280; line-height:1.55; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ww-pagecard-tag{ position:absolute; top:11px; right:16px; font-size:11px; color:#2f7d78; font-weight:600; letter-spacing:.03em; }
body.dark .ww-pagecard{ background:#252a2b; }
body.dark .ww-pagecard-title{ color:#e6e6e6; }
body.dark .ww-pagecard-ico{ background:#2f3a38; color:#5bbfb4; }
body.dark .ww-pagecard-tag{ color:#5bbfb4; }