/*
 Theme Name:   80老登 · 成长与青春 (Astra 子主题)
 Template:     astra
 Description:  基于 Astra 免费版的「复古胶片暖色调」美化子主题。站点标题与副标题均走后台「设置→常规」读取。配色：米黄底 + 琥珀 + 深棕 + 手写体标题 + 胶片颗粒质感，与 brand 图标完全对齐。
 Version:      3.3.0
 Author:       小W（为奔跑的鱼丸定制）
*/

/* ============================================================
   0. 设计变量（想换配色，只改这里就够了）
   ============================================================ */
@import url('https://fonts.googleapis.cn/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@600;700&display=swap');

:root {
  --ld-cream:        #f5ecd7;   /* 页面底色：暖米黄 */
  --ld-cream-deep:   #ecdfc0;   /* 强调底/引用块底 */
  --ld-paper:        #fffdf7;   /* 卡片白 */
  --ld-rust:         #c56b3e;   /* 主色：琥珀 */
  --ld-rust-deep:    #a8552c;   /* 主色 hover/阴影 */
  --ld-pine:         #2f5d50;   /* 辅助色：墨绿 */
  --ld-sky:          #4a90d9;   /* 辅助色：浅蓝 */
  --ld-ink:          #3a3226;   /* 正文文字 */
  --ld-ink-soft:     #6b5f4a;   /* 次要文字 */
  --ld-shadow:       0 6px 24px rgba(58,50,38,.10);
  --ld-shadow-hover: 0 12px 32px rgba(197,107,62,.18);
  --ld-radius:       12px;
  --ld-hand:         "Ma Shan Zheng", "STKaiti", "KaiTi", cursive;
  --ld-serif:        "Noto Serif SC", "Songti SC", "STSong", serif;
  --ld-sans:         -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
                     "Noto Sans SC", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ============================================================
   1. 全局：米黄底 + 暖色微光 + 中文系统字体
   ============================================================ */
body {
  background-color: var(--ld-cream);
  color: var(--ld-ink);
  font-family: var(--ld-sans);
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(197,107,62,.07), transparent 42%),
    radial-gradient(circle at 82% 86%, rgba(47,93,80,.05),  transparent 42%);
}

/* 链接 */
a { color: var(--ld-rust); transition: color .2s ease; text-decoration: none; }
a:hover { color: var(--ld-rust-deep); }
.entry-content a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(197,107,62,.35);
}

/* ============================================================
   2. 顶部导航：粘性 + 复古虚线分隔 + 手写体站点标题
   ============================================================ */
.site-header {
  background: rgba(245,236,215,.92);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 2px dashed color-mix(in srgb, var(--ld-rust) 45%, transparent);
  position: sticky;
  top: 0;
  z-index: 999;
}
/* ---- Logo 尺寸：WP 默认按原图(512px)显示，太大，统一收小 ---- */
.custom-logo,
.custom-logo-link img,
.ast-header-logo img,
.ast-site-header-logo img,
.site-branding img,
footer .custom-logo {
  width: 45px !important;
  max-width: 45px !important;
  height: auto !important;
  border-radius: 8px;
}
.ast-sticky-active .custom-logo,
.ast-sticky-active .ast-header-logo img { width: 38px !important; max-width: 38px !important; }
@media (max-width: 600px) {
  .custom-logo, .ast-header-logo img { width: 34px !important; max-width: 34px !important; }
}

.main-header-bar { border-bottom: none; }
.site-header .site-title a {
  font-family: var(--ld-hand);
  font-weight: 400;
  color: var(--ld-rust);
  letter-spacing: 2px;
  font-size: 1.6rem;
}
.site-header .site-title a:hover { color: var(--ld-rust-deep); }
.main-navigation ul li a { font-weight: 500; color: var(--ld-ink-soft); }
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li:hover > a { color: var(--ld-rust); }
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.menu-item-has-children > a {
  position: relative;
}
.main-navigation ul li.current-menu-item > a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -4px;
  border-bottom: 2px solid var(--ld-rust);
}

/* 内容容器宽度：与顶栏对齐，避免导航比内容宽一截 */
.ast-container,
.ast-blog-entry .ast-row,
.ast-page-builder-template .ast-container { max-width: 1100px; }

/* ============================================================
   3. 博客列表：卡片化 + hover 上浮
   ============================================================ */
.ast-blog-entry .ast-article-post {
  background: var(--ld-paper);
  border: 1px solid var(--ld-cream-deep);
  border-radius: var(--ld-radius);
  padding: 28px 32px;
  margin-bottom: 24px;
  box-shadow: var(--ld-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}
.ast-blog-entry .ast-article-post:hover {
  transform: translateY(-4px);
  box-shadow: var(--ld-shadow-hover);
}

/* 特色图圆角 */
.ast-blog-entry .post-thumb img,
.ast-article-single .post-thumb img,
.ast-single-post-featured-image img {
  border-radius: var(--ld-radius);
}

/* 文章标题：手写体 + 主色（核心标志） */
.ast-blog-entry .entry-title,
.ast-article-single .entry-title,
.page-header .page-title {
  font-family: var(--ld-hand);
  font-weight: 400;
  color: var(--ld-rust);
  letter-spacing: 1px;
  line-height: 1.35;
  font-size: 1.75rem;
}
.ast-blog-entry .entry-title a:hover { color: var(--ld-rust-deep); }

/* 元信息（日期 / 作者 / 分类） */
.ast-blog-entry .entry-meta,
.ast-article-single .entry-meta {
  font-family: var(--ld-hand);
  color: var(--ld-rust-deep);
  font-size: 1rem;
  letter-spacing: .5px;
}
.ast-blog-entry .entry-meta a,
.ast-article-single .entry-meta a { color: var(--ld-rust-deep); }
.ast-blog-entry .entry-meta a:hover,
.ast-article-single .entry-meta a:hover { color: var(--ld-rust); }

/* 分类 / 标签胶囊 */
.entry-meta .cat-links a,
.entry-meta .tags-links a {
  background: rgba(197,107,62,.10);
  color: var(--ld-rust);
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  margin-right: 4px;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.entry-meta .cat-links a:hover {
  background: var(--ld-rust);
  color: var(--ld-paper);
  text-decoration: none;
}

/* 「阅读全文」胶囊按钮 */
.ast-blog-entry a.read-more {
  display: inline-block;
  margin-top: 10px;
  color: var(--ld-rust);
  font-weight: 600;
  border: 1px solid var(--ld-rust);
  padding: 6px 16px;
  border-radius: 999px;
  transition: all .2s ease;
}
.ast-blog-entry a.read-more:hover {
  background: var(--ld-rust);
  color: var(--ld-paper);
  text-decoration: none;
}

/* ============================================================
   4. 单篇文章：舒服阅读宽度
   ============================================================ */
.ast-single-post .entry-content { font-size: 17px; line-height: 1.9; }
.ast-single-post .entry-content h2,
.ast-single-post .entry-content h3 {
  font-family: var(--ld-serif);
  font-weight: 700;
  margin-top: 1.6em;
  letter-spacing: -.01em;
  color: var(--ld-ink);
}
.ast-single-post .entry-content h2 {
  border-left: 4px solid var(--ld-rust);
  padding-left: 12px;
}

/* 引用块 */
.entry-content blockquote {
  border-left: 4px solid var(--ld-rust);
  background: var(--ld-cream-deep);
  padding: 16px 20px;
  border-radius: 0 var(--ld-radius) var(--ld-radius) 0;
  margin: 1.5em 0;
  color: var(--ld-ink-soft);
  font-style: normal;
}

/* 行内代码 + 代码块 */
.entry-content code {
  background: var(--ld-cream-deep);
  border-radius: 6px;
  padding: 2px 6px;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: .92em;
  color: var(--ld-rust-deep);
}
.entry-content pre {
  background: #2b2b2b;
  color: #f5f5f5;
  border-radius: var(--ld-radius);
  padding: 18px 20px;
  overflow: auto;
  font-size: .9em;
  line-height: 1.6;
  border-left: 3px solid var(--ld-rust);
}
.entry-content pre code { background: none; color: inherit; padding: 0; }

/* 图片 */
.entry-content img { border-radius: var(--ld-radius); }

/* ------------------------------------------------------------
   内文配图 figure（带图注）：米黄内衬 + 细边框，复古像纸感
   ------------------------------------------------------------ */
.entry-content figure.ld-fig {
  margin: 2em 0;
  padding: 10px 10px 0;
  background: var(--ld-cream-deep);
  border: 1px solid rgba(58,50,38,.10);
  border-radius: var(--ld-radius);
  box-shadow: 0 6px 18px rgba(58,50,38,.06);
}
.entry-content figure.ld-fig img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--ld-radius) - 4px);
}
.entry-content figure.ld-fig figcaption {
  margin: 0;
  padding: 12px 8px 14px;
  text-align: center;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ld-ink-soft);
  letter-spacing: .01em;
}
/* 宽幅：突破正文宽度一点点，更有冲击力 */
@media (min-width: 922px) {
  .entry-content figure.ld-fig.is-wide { margin-left: -60px; margin-right: -60px; }
}

/* ------------------------------------------------------------
   「那年那剧」信息卡：增加信息量，又不打断叙事
   ------------------------------------------------------------ */
.entry-content .ld-card {
  margin: 2em 0;
  padding: 18px 22px;
  background: var(--ld-cream-deep);
  border: 1px solid rgba(58,50,38,.10);
  border-left: 4px solid var(--ld-rust);
  border-radius: var(--ld-radius);
}
.entry-content .ld-card h4 {
  margin: 0 0 12px;
  font-family: var(--ld-serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--ld-ink);
}
.entry-content .ld-card dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 16px;
  font-size: 15px;
  line-height: 1.7;
}
.entry-content .ld-card dt {
  color: var(--ld-rust);
  font-weight: 700;
  white-space: nowrap;
}
.entry-content .ld-card dd { margin: 0; color: var(--ld-ink-soft); }

/* 歌词 / 台词引用块：居中、带引号装饰 */
.entry-content blockquote.ld-quote {
  border-left: none;
  background: none;
  text-align: center;
  padding: 14px 10px;
  margin: 1.8em 0;
  font-family: var(--ld-serif);
  font-size: 18px;
  line-height: 1.9;
  color: var(--ld-rust-deep);
}
.entry-content blockquote.ld-quote::before { content: "「"; opacity: .45; }
.entry-content blockquote.ld-quote::after  { content: "」"; opacity: .45; }

/* ============================================================
   5. 按钮（提交 / 评论 / 区块按钮）：胶囊 + 主色 + 下沉阴影
   ============================================================ */
.button, .wp-block-button__link,
.ast-custom-button, input[type="submit"],
.ast-comment-respond .form-submit .submit {
  border-radius: 999px !important;
  background: var(--ld-rust) !important;
  color: var(--ld-paper) !important;
  border: none !important;
  box-shadow: 0 3px 0 var(--ld-rust-deep);
  transition: background .2s ease, transform .12s ease, box-shadow .12s ease;
  font-weight: 600;
}
.button:hover, .wp-block-button__link:hover,
input[type="submit"]:hover,
.ast-comment-respond .form-submit .submit:hover {
  background: var(--ld-rust-deep) !important;
  color: var(--ld-paper) !important;
  box-shadow: 0 1px 0 var(--ld-rust-deep);
  transform: translateY(1px);
}

/* 表单输入 */
input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], textarea {
  background: var(--ld-paper);
  border: 1px solid var(--ld-cream-deep);
  border-radius: 6px;
  color: var(--ld-ink);
}
input:focus, textarea:focus {
  border-color: var(--ld-rust);
  outline: none;
  box-shadow: 0 0 0 2px rgba(197,107,62,.20);
}

/* ============================================================
   6. 侧栏小工具：卡片化
   ============================================================ */
.sidebar-main .widget {
  background: var(--ld-paper);
  border: 1px solid var(--ld-cream-deep);
  border-radius: var(--ld-radius);
  padding: 20px 22px;
  margin-bottom: 20px;
  box-shadow: var(--ld-shadow);
}
.sidebar-main .widget-title {
  font-family: var(--ld-serif);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--ld-ink);
  border-bottom: 2px dashed color-mix(in srgb, var(--ld-rust) 45%, transparent);
  padding-bottom: 6px;
}
.sidebar-main .widget a:hover { color: var(--ld-rust); }

/* ============================================================
   7. 分页
   ============================================================ */
.ast-pagination .page-numbers {
  border-radius: 8px;
  border-color: var(--ld-cream-deep);
  color: var(--ld-rust);
}
.ast-pagination .page-numbers.current,
.ast-pagination a.page-numbers:hover {
  background: var(--ld-rust);
  color: var(--ld-paper);
  border-color: var(--ld-rust);
}

/* ============================================================
   8. 页脚：复古虚线 + 居中版权
   ============================================================ */
.site-footer {
  border-top: 2px dashed color-mix(in srgb, var(--ld-rust) 40%, transparent);
  background: transparent;
  margin-top: 60px;
}
.site-footer .footer-inner-wrap { padding: 32px 0; }
.site-footer a { color: var(--ld-rust); }
.site-footer .ast-footer-copyright { color: var(--ld-ink-soft); font-size: 13px; }

/* 隐藏 Astra Footer Builder 默认版权（含 Powered by Astra） */
.site-footer .ast-footer-copyright { display: none !important; }

/* 底部版权 + ICP 备案号：独立居中两行（工信部合规要求） */
.ld-legal {
  text-align: center;
  padding: 0 12px 30px;
  margin: 0;
  font-size: 13px;
  letter-spacing: .5px;
  line-height: 1.9;
  color: var(--ld-ink-soft);
}
.ld-legal p { margin: 0; }
.ld-legal-icp a {
  color: var(--ld-ink-soft);
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, var(--ld-rust) 45%, transparent);
  transition: color .2s ease, border-color .2s ease;
}
.ld-legal-icp a:hover,
.ld-legal-icp a:focus { color: var(--ld-rust); border-bottom-color: var(--ld-rust); }

/* ============================================================
   9. 复古胶片颗粒叠加（极轻，不影响阅读）
   ============================================================ */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============================================================
   10. 选中高亮 + 滚动条（细节）
   ============================================================ */
::selection { background: var(--ld-rust); color: var(--ld-paper); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ld-rust); border-radius: 5px; }
::-webkit-scrollbar-track { background: var(--ld-cream-deep); }

/* ============================================================
   11. 移动端适配
   ============================================================ */
@media (max-width: 768px) {
  .ast-blog-entry .ast-article-post { padding: 20px; }
  .ast-single-post .entry-content { font-size: 16px; }
  .ast-blog-entry .entry-title { font-size: 1.5rem; }
  .site-header .site-title a { font-size: 1.35rem; }
}

/* 尊重用户的"减少动画"系统设置 */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ============================================================
   12. 首页 hero（复刻 Astro 黑胶+自行车插画）
   ============================================================ */
.ld-hero {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 30px;
  align-items: center;
  padding: 48px 0 24px;
}
.ld-hero h1 {
  font-family: var(--ld-serif);
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.1rem);
  margin: 0 0 14px;
  color: var(--ld-ink);
  line-height: 1.2;
}
.ld-tagline {
  font-family: var(--ld-hand);
  font-size: 1.35rem;
  color: var(--ld-rust);
  margin: 0 0 18px;
}
.ld-lead { font-size: 1.05rem; color: var(--ld-ink-soft); margin: 0 0 24px; max-width: 46ch; }
.ld-hero p > a { margin-right: 10px; }
.ld-hero-art { display: flex; justify-content: center; }
.ld-hero-art svg { width: 100%; max-width: 420px; height: auto; }
.ld-vinyl { transform-box: fill-box; transform-origin: center; animation: ld-spin 9s linear infinite; }
@keyframes ld-spin { to { transform: rotate(360deg); } }

/* hero 胶囊按钮（与全局按钮同语言） */
.ld-btn {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--ld-rust);
  color: #fff !important;
  font-weight: 600;
  box-shadow: 0 4px 0 var(--ld-rust-deep);
  transition: transform .12s, box-shadow .12s;
}
.ld-btn:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--ld-rust-deep); }
.ld-btn-ghost { background: transparent; color: var(--ld-pine) !important; border: 2px solid var(--ld-pine); box-shadow: none; }
.ld-btn-ghost:hover { background: var(--ld-pine); color: #fff !important; }

/* 虚线分隔（随手写，慢慢更） */
.ld-route { display: flex; align-items: center; gap: 14px; margin: 36px 0 28px; color: var(--ld-rust); }
.ld-route::before, .ld-route::after { content: ""; flex: 1; border-top: 2px dashed var(--ld-rust); opacity: .55; }
.ld-route span { font-family: var(--ld-hand); font-size: 1.3rem; }

/* ============================================================
   13. 拍立得卡片（复刻 Astro Polaroid）
   ============================================================ */
.ld-polaroid-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin: 6px 0 40px; }
.ld-polaroid {
  display: block;
  background: var(--ld-paper);
  padding: 14px 14px 18px;
  border-radius: 4px;
  box-shadow: var(--ld-shadow);
  transition: transform .18s, box-shadow .18s;
  color: var(--ld-ink);
  text-decoration: none;
}
.ld-polaroid:hover { transform: translateY(-5px) rotate(0deg) !important; box-shadow: var(--ld-shadow-hover); color: var(--ld-ink); }
.ld-photo {
  aspect-ratio: 4 / 3;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.4rem;
  color: #fff;
  overflow: hidden;
  position: relative;
}
.ld-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ld-photo.music   { background: linear-gradient(135deg, var(--ld-pine), #1f3d35); }
.ld-photo.cycling { background: linear-gradient(135deg, var(--ld-sky), #2f6fb0); }
.ld-photo.essays  { background: linear-gradient(135deg, var(--ld-rust), var(--ld-rust-deep)); }
.ld-photo.cinema  { background: linear-gradient(135deg, #8B3A2A, #54241a); }
.ld-cap { padding: 12px 6px 2px; }
.ld-cap .ld-cat { font-family: var(--ld-hand); font-size: .85rem; color: var(--ld-rust); letter-spacing: .5px; }
.ld-cap h3 { font-family: var(--ld-hand); font-weight: 400; font-size: 1.15rem; margin: 4px 0 6px; line-height: 1.35; color: var(--ld-ink); }
.ld-cap .ld-date { font-size: .8rem; color: var(--ld-ink-soft); }
@media (max-width: 820px) { .ld-polaroid-grid { grid-template-columns: repeat(2, 1fr); } .ld-hero { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .ld-polaroid-grid { grid-template-columns: 1fr; } }

/* ============================================================
   14. 分类页黑胶播放器（复刻 Astro VinylPlayer）
   ============================================================ */
.ld-cat-hero { display: flex; align-items: center; gap: 26px; justify-content: center; flex-wrap: wrap; padding: 30px 0 12px; text-align: center; }
.ld-vinyl-player { display: flex; align-items: center; gap: 22px; }
.ld-cat-hero svg { width: 150px; height: 150px; }
.ld-vinyl2 { transform-box: fill-box; transform-origin: center; animation: ld-spin 9s linear infinite; }
.ld-cat-head h1 { font-family: var(--ld-hand); font-weight: 400; color: var(--ld-rust); font-size: 2.2rem; margin: 0; }
.ld-cat-head p { color: var(--ld-ink-soft); font-family: var(--ld-hand); font-size: 1.1rem; margin: 6px 0 0; }
.ld-eq { display: flex; align-items: flex-end; gap: 6px; height: 90px; }
.ld-eq span { width: 10px; background: var(--ld-rust); border-radius: 3px 3px 0 0; animation: ld-eq 1.1s ease-in-out infinite; }
.ld-eq span:nth-child(2){ animation-delay:.15s; background: var(--ld-pine); }
.ld-eq span:nth-child(3){ animation-delay:.30s; background: var(--ld-sky); }
.ld-eq span:nth-child(4){ animation-delay:.45s; background: var(--ld-rust); }
.ld-eq span:nth-child(5){ animation-delay:.60s; background: var(--ld-pine); }
.ld-eq span:nth-child(6){ animation-delay:.75s; background: var(--ld-sky); }
@keyframes ld-eq { 0%,100%{ height:18px; } 50%{ height:84px; } }

/* 减少动画：关掉旋转与跳动 */
@media (prefers-reduced-motion: reduce) {
  .ld-vinyl, .ld-vinyl2 { animation: none; }
  .ld-eq span { animation: none; height: 50px; }
}

/* ============================================================
   15. 大屏布局修正（Astra 桌面端把 .ast-container 设为横向 flex
       是给「内容+侧边栏」用的；本主题无侧边栏，改回纵向堆叠）
   ============================================================ */
@media (min-width: 922px) {
  body .site-content .ast-container {
    display: block;
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* 阅读型页面（单篇文章 / 页面）保持舒适行宽，一行约 30–40 字 */
  body.single-post .site-content .ast-container,
  body.page .site-content .ast-container {
    max-width: 920px !important;
  }
}

/* 超窄屏（≤600px）：两侧留白收紧，手机上看不至于太空 */
@media (max-width: 600px) {
  .site-content .ast-container { padding-left: 16px; padding-right: 16px; }
}