/* ============================================
   手帳美学 | Journal Aesthetic CSS
   Kadence Theme + luvu.xin
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=ZCOOL+XiaoWei&family=Ma+Shan+Zheng&family=Long+Cang&family=Noto+Serif+SC:wght@400;700&family=Noto+Serif+JP:wght@400;700&family=Zen+Kaku+Gothic+New&display=swap');

/* --- 1. 全局底色：纸纹理 --- */
:root {
  --paper-cream: #faf5ed;
  --paper-warm: #f7f0e3;
  --ink-dark: #3a3226;
  --ink-medium: #5c4e3d;
  --ink-light: #8a7b6b;
  --sakura-pink: #e8a0b4;
  --sakura-light: #f5d6df;
  --washi-blue: #a8c8d8;
  --washi-mint: #b8d4c8;
  --washi-yellow: #f0d78c;
  --tape-pink: rgba(232, 160, 180, 0.35);
  --tape-blue: rgba(168, 200, 216, 0.30);
  --tape-mint: rgba(184, 212, 200, 0.30);
  --polaroid-border: 12px;
}

body {
  background-color: var(--paper-cream) !important;
  background-image:
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4c9b5' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  color: var(--ink-dark);
  font-family: 'Noto Serif SC', serif;
}

/* --- 2. 内容区：笔记本卡片 --- */
.entry, .post, article {
  background: #fffef9 !important;
  border-radius: 4px !important;
  box-shadow: 2px 3px 10px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04) !important;
  padding: 2rem !important;
  margin-bottom: 2rem !important;
}

/* --- 3. 标题：手写体 --- */
h1, h2, h3, h4, .entry-title, .page-title, .site-title {
  font-family: 'ZCOOL XiaoWei', 'Ma Shan Zheng', cursive !important;
  color: var(--ink-dark) !important;
  letter-spacing: 0.03em;
}

.entry-title {
  font-size: 2rem !important;
  line-height: 1.5 !important;
  padding-bottom: 0.5rem;
}

.entry-title::after {
  content: '';
  display: block;
  width: 60%;
  height: 6px;
  margin-top: 8px;
  background: linear-gradient(90deg,
    var(--tape-pink) 0%, var(--tape-pink) 30%,
    transparent 30%, transparent 40%,
    var(--tape-blue) 40%, var(--tape-blue) 65%,
    transparent 65%, transparent 75%,
    var(--tape-mint) 75%, var(--tape-mint) 100%);
  border-radius: 1px;
  transform: rotate(-0.5deg);
}

/* --- 4. 图片：拍立得相框 --- */
.wp-block-image img,
.entry-content img,
.wp-post-image,
.kb-gallery-image img,
.wp-block-gallery img {
  border: var(--polaroid-border) solid #fff !important;
  box-shadow:
    3px 3px 0px rgba(0,0,0,0.05),
    8px 8px 20px rgba(0,0,0,0.08) !important;
  border-bottom-width: 40px !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wp-block-image img:hover,
.entry-content img:hover {
  transform: rotate(0.5deg) scale(1.01);
  box-shadow: 5px 5px 0px rgba(0,0,0,0.06), 12px 12px 30px rgba(0,0,0,0.12) !important;
}

.wp-block-gallery .blocks-gallery-item:nth-child(odd) { transform: rotate(-1deg); }
.wp-block-gallery .blocks-gallery-item:nth-child(even) { transform: rotate(1.5deg); }

/* --- 5. 特色图：纸胶带固定 --- */
.post-thumbnail, .entry-media {
  position: relative;
  display: inline-block;
}

.post-thumbnail::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 80px;
  height: 24px;
  background: var(--tape-pink);
  border-radius: 1px;
  z-index: 2;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.post:nth-child(3n) .post-thumbnail::before {
  background: var(--tape-blue);
  transform: translateX(-50%) rotate(2deg);
}

.post:nth-child(3n+1) .post-thumbnail::before {
  background: var(--tape-mint);
  transform: translateX(-50%) rotate(-1deg);
}

/* --- 6. 链接：高亮笔 --- */
a {
  color: var(--ink-medium) !important;
  text-decoration: none;
  background-image: linear-gradient(180deg, transparent 60%, var(--sakura-light) 60%);
  background-size: 100% 100%;
  transition: background-size 0.2s;
}

a:hover {
  background-size: 100% 200%;
  color: var(--ink-dark) !important;
}

.entry-title a { background-image: none; }

/* --- 7. 引用块：便利贴 --- */
blockquote, .wp-block-quote {
  background: #fffbe6 !important;
  border-left: none !important;
  border: 1px solid #e8dca0 !important;
  border-radius: 2px !important;
  padding: 1.5rem 2rem !important;
  position: relative;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.03), -2px 4px 8px rgba(0,0,0,0.05) !important;
  transform: rotate(0.8deg);
  margin: 2rem 0 !important;
  font-style: italic;
}

blockquote::before {
  content: '📎 ';
  position: absolute;
  top: -12px;
  left: 20px;
  font-size: 1.2rem;
  transform: rotate(-15deg);
}

/* --- 8. 按钮：和风 --- */
button, .button, .wp-block-button__link, input[type="submit"] {
  font-family: 'ZCOOL XiaoWei', cursive !important;
  border-radius: 20px !important;
  border: 2px solid var(--ink-medium) !important;
  background: transparent !important;
  color: var(--ink-medium) !important;
  padding: 8px 24px !important;
  transition: all 0.2s;
}

button:hover, .button:hover {
  background: var(--ink-dark) !important;
  color: #fffef9 !important;
}

/* --- 9. Header：简约笔记本风 --- */
.site-header,
.site-header-wrap,
.site-header-inner-wrap,
.site-header-upper-wrap,
#main-header {
  background: rgba(255,254,249,0.97) !important;
  border-bottom: 1px solid #e8dcc8;
}

.site-branding a, .site-title a {
  color: var(--ink-dark) !important;
}

.site-branding .site-description {
  color: var(--ink-light) !important;
}

/* --- 10. 导航菜单 --- */
.header-navigation a, .main-navigation a, .menu-item a {
  color: var(--ink-medium) !important;
}

.header-navigation a:hover, .main-navigation a:hover, .menu-item a:hover {
  color: var(--ink-dark) !important;
}

/* --- 11. 手机端侧滑菜单（手账统一风格）--- */
.popup-drawer,
.drawer-overlay {
  background: rgba(58,50,38,0.4) !important;  /* 半透明遮罩 */
}

.drawer-inner,
.drawer-content,
.mobile-drawer-content {
  background: #fffef9 !important;
  color: var(--ink-dark) !important;
}

.drawer-header {
  background: var(--paper-cream) !important;
  border-bottom: 1px solid #e8dcc8 !important;
}

.drawer-header .drawer-toggle {
  color: var(--ink-dark) !important;
}

.mobile-navigation a,
.drawer-navigation a,
.mobile-menu-container a {
  color: var(--ink-medium) !important;
  font-family: 'Noto Serif SC', serif !important;
  border-bottom: 1px dashed #e8dcc8 !important;
}

.mobile-navigation a:hover,
.drawer-navigation a:hover,
.mobile-menu-container a:hover {
  color: var(--ink-dark) !important;
  background: var(--paper-cream) !important;
}

.mobile-navigation .current-menu-item > a,
.drawer-navigation .current-menu-item > a {
  color: var(--sakura-pink) !important;
  font-weight: bold !important;
}

/* 汉堡菜单按钮 */
.mobile-toggle-open-container .menu-toggle-open {
  color: var(--ink-dark) !important;
}

.mobile-toggle-open-container .menu-toggle-open:hover {
  color: var(--sakura-pink) !important;
}

/* --- 12. 页脚 --- */
.site-footer,
.site-footer-wrap,
.footer-widget-area {
  background: var(--ink-dark) !important;
  color: #c4b99a !important;
  font-size: 0.85rem;
}

.site-footer a {
  color: #d4c9b5 !important;
  background-image: none;
}

/* --- 13. 分类/标签：小贴纸 --- */
.cat-links a, .tags-links a, .post-categories a, .post-tags a {
  display: inline-block;
  background: #fffef9 !important;
  border: 1px solid var(--sakura-pink) !important;
  color: var(--sakura-pink) !important;
  padding: 2px 12px !important;
  border-radius: 12px !important;
  font-size: 0.8rem !important;
  margin: 2px !important;
  font-family: 'ZCOOL XiaoWei', cursive !important;
  background-image: none !important;
  transition: all 0.2s;
}

.cat-links a:hover, .tags-links a:hover {
  background: var(--sakura-pink) !important;
  color: #fff !important;
}

/* --- 14. 搜索框 --- */
.search-form input[type="search"],
.widget_search .search-field {
  border: 1px solid #e8dcc8 !important;
  border-radius: 20px !important;
  background: #fffef9 !important;
  color: var(--ink-dark) !important;
  padding: 8px 16px !important;
}

/* --- 15. 归档/小工具 --- */
.widget {
  background: #fffef9 !important;
  border-radius: 4px !important;
  padding: 1.5rem !important;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.04) !important;
  margin-bottom: 1.5rem !important;
}

.widget-title {
  font-family: 'ZCOOL XiaoWei', cursive !important;
  color: var(--ink-dark) !important;
  border-bottom: 2px solid var(--sakura-light) !important;
  padding-bottom: 0.5rem !important;
  margin-bottom: 1rem !important;
}

/* --- 16. 移动端适配 --- */
@media (max-width: 768px) {
  .entry, .post, article {
    padding: 1rem !important;
  }
  .wp-block-image img, .entry-content img {
    border-bottom-width: 30px !important;
  }
  .entry-title {
    font-size: 1.5rem !important;
  }
}

/* --- 17. Kadence 主题微调 --- */
.content-bg, .content-area {
  background: transparent !important;
}

.site-container {
  background: transparent !important;
}

/* === WP Admin Editor Sidebar: light handnote style === */
.edit-post-sidebar,
.interface-complementary-area,
.interface-complementary-area-header,
.edit-post-layout__metaboxes {
  background: #faf5ed !important;
  color: #3a3226 !important;
  border-color: #e8dcc8 !important;
}

.edit-post-sidebar .components-panel,
.edit-post-sidebar .components-panel__body,
.interface-complementary-area .components-panel {
  background: #faf5ed !important;
  border-color: #e8dcc8 !important;
  color: #3a3226 !important;
}

.edit-post-sidebar .components-panel__body-title button,
.interface-complementary-area .components-panel__body-title button {
  background: #fffef9 !important;
  color: #3a3226 !important;
  border-bottom: 1px solid #e8dcc8 !important;
}

.edit-post-sidebar .components-panel__body-title button:hover,
.interface-complementary-area .components-panel__body-title button:hover {
  background: var(--sakura-light) !important;
}

.edit-post-sidebar label,
.edit-post-sidebar .components-base-control__label,
.interface-complementary-area label,
.components-base-control__label {
  color: #3a3226 !important;
}

.edit-post-sidebar .components-button,
.interface-complementary-area .components-button {
  color: #5c4e3d !important;
}

.edit-post-sidebar .components-button.is-primary {
  background: #e8a0b4 !important;
  color: #fff !important;
}

.edit-post-sidebar input,
.edit-post-sidebar select,
.edit-post-sidebar textarea,
.interface-complementary-area input,
.interface-complementary-area select,
.interface-complementary-area textarea {
  background: #fffef9 !important;
  border: 1px solid #e8dcc8 !important;
  color: #3a3226 !important;
}

.edit-post-sidebar .components-form-token-field__input-container {
  background: #fffef9 !important;
  border-color: #e8dcc8 !important;
}

/* editor header toolbar */
.edit-post-header,
.editor-header {
  background: #fffef9 !important;
  border-bottom: 1px solid #e8dcc8 !important;
}

.edit-post-header__settings {
  border-left: 1px solid #e8dcc8 !important;
}

/* inserter sidebar */
.edit-post-layout__inserter-panel {
  background: #faf5ed !important;
}

.edit-post-layout__inserter-panel input {
  background: #fffef9 !important;
  border-color: #e8dcc8 !important;
  color: #3a3226 !important;
}