/*
Theme Name: yx-modern
Theme URI: http://disk.local
Author: Yooox
Description: 现代、高端、响应式的独立主题
Version: 1.0.0
Text Domain: yx-modern
*/

/* ====== Modern Responsive Base ====== */
:root {
  --bg: #ffffff; --fg: #111827; --muted:#6b7280;
  --primary:#2563eb; --primary-700:#1d4ed8; --border:#e5e7eb; --surface:#f9fafb;
  --radius: 10px; --shadow: 0 10px 30px rgba(0,0,0,.08);
  --space-3:.5rem; --space-4:.75rem; --space-5:1rem; --space-6:1.25rem; --space-8:2rem;
  --container-sm:640px; --container-md:768px; --container-lg:1024px; --container-xl:1280px;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#0b0f16; --fg:#e5e7eb; --muted:#94a3b8; --border:#1f2937; --surface:#0f172a; --primary:#60a5fa; --primary-700:#3b82f6; }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans","PingFang SC","Microsoft YaHei",sans-serif;line-height:1.6}
img,video{max-width:100%;height:auto;border-radius:8px}

/* fluid type */
h1{font-size:clamp(1.8rem,1.2rem + 2vw,2.6rem);line-height:1.2}
h2{font-size:clamp(1.4rem,1rem + 1.2vw,2rem)}
h3{font-size:clamp(1.2rem,.95rem + .8vw,1.5rem)}
p,li{font-size:clamp(.95rem,.9rem + .2vw,1.05rem)}

/* links & buttons */
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline;color:var(--primary-700)}
.button,.btn,button,input[type=submit],.wp-block-button__link{appearance:none;border:1px solid transparent;border-radius:8px;background:var(--primary);color:#fff;padding:.6rem 1rem;line-height:1.2;transition:.2s}
.button:hover,.btn:hover,button:hover,input[type=submit]:hover,.wp-block-button__link:hover{background:var(--primary-700);transform:translateY(-1px)}

/* layout */
.container{width:100%;margin-inline:auto;padding-inline:clamp(var(--space-5),3vw,var(--space-8))}
@media(min-width:640px){.container{max-width:var(--container-sm)}}
@media(min-width:768px){.container{max-width:var(--container-md)}}
@media(min-width:1024px){.container{max-width:var(--container-lg)}}
@media(min-width:1280px){.container{max-width:var(--container-xl)}}

.site-header{position:sticky;top:0;z-index:1100;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:0 2px 8px rgba(0,0,0,.04)}
.site-header .inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);padding-block:var(--space-5)}
.site-brand{display:flex;align-items:center;gap:.6rem;font-weight:700}
.site-nav ul{display:flex;gap:var(--space-5);margin:0;padding:0;list-style:none}
@media(max-width:768px){.site-nav ul{gap:var(--space-4)}}

/* header tools */
.site-tools{display:flex;align-items:center;gap:1rem;flex:1 1 auto}
.site-tools form.search-form{display:flex;gap:.5rem}
.site-tools input[type=search]{padding:.5rem .75rem;border:1px solid var(--border);border-radius:8px}
.site-tools .cat-menu{position:relative}
.site-tools .cat-menu .cat-dropdown{
  position:absolute; right:0; top:calc(100% + .5rem);
  background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow);
  padding:.5rem; width:clamp(280px, 50vw, 720px); max-height:min(60vh, 520px); overflow:auto; display:none; z-index:10;
}
/* 点击或悬停都可展开 */
.site-tools .cat-menu.is-open .cat-dropdown{display:block}
.site-tools .cat-menu:hover .cat-dropdown{display:block}
/* 多列布局 */
.site-tools .cat-menu .cat-dropdown ul{columns:2; column-gap:1rem; list-style:none; margin:0; padding:.25rem 0}
@media(min-width:1280px){ .site-tools .cat-menu .cat-dropdown ul{columns:3} }
@media(max-width:640px){ .site-tools .cat-menu .cat-dropdown ul{columns:1} }
.site-tools .cat-menu .cat-dropdown li{break-inside:avoid; -webkit-column-break-inside:avoid; padding:.35rem .5rem; border-radius:6px}
.site-tools .cat-menu .cat-dropdown li a{display:block; color:var(--fg)}
.site-tools .cat-menu .cat-dropdown li:hover{background:var(--surface)}

/* 顶部搜索按钮图标样式 */
.search-form{display:flex;align-items:center;gap:.5rem;flex:1 1 auto; width:100%}
.search-form .search-submit{width:36px;height:36px;padding:0;display:inline-grid;place-items:center}
.search-form .search-submit svg{width:18px;height:18px;fill:#fff}
.search-form label{flex:1 1 auto; min-width:0}
.search-form .search-field{width:100%}

/* 分类目录图标按钮样式，与搜索按钮保持一致 */
.site-tools .cat-menu > .btn{width:36px;height:36px;padding:0;display:inline-grid;place-items:center}
.site-tools .cat-menu > .btn svg{width:18px;height:18px;fill:#fff}

/* cards */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.card__body{padding:var(--space-6)}
.card__meta{color:var(--muted);font-size:.9rem;margin-top:.4rem}
.card__actions{display:flex;gap:.75rem}
.card__actions .btn{white-space:nowrap}

/* content */
.main{padding-block:clamp(1.5rem,3vw,3rem)}
.grid{display:grid;gap:var(--space-6)}
@media(min-width:768px){.grid.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1280px){.grid.posts{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* post list rows */
.post-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.25rem}
.post-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;padding:.6rem .75rem;border-bottom:1px solid var(--border);}
.post-row:nth-child(odd){background:color-mix(in srgb, var(--surface) 60%, transparent)}
.post-row:hover{background:color-mix(in srgb, var(--surface) 90%, transparent)}
.post-thumb{display:block;width:64px;height:64px;overflow:hidden;border-radius:8px}
.post-thumb img{width:100%;height:100%;object-fit:cover}
.post-title{font-weight:600;min-width:0}
.post-title a{
  color:var(--fg);
  /* 移除 -webkit-line-clamp 相关与重复 display，改为单行省略方案 */
  display:inline-flex; align-items:center; gap:.5rem;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.post-icon{width:20px;height:20px;border-radius:4px;object-fit:cover;flex:0 0 20px}
.post-meta{color:var(--muted);font-size:.9rem}
.btn-download{width:38px;height:38px;padding:0;border-radius:8px;display:inline-grid;place-items:center}
.btn-download svg{width:15px;height:15px;fill:#fff}
.btn,.wp-block-button__link{display:inline-flex;align-items:center;gap:.35rem;padding:.45rem .8rem;line-height:1;}
.post-row .btn-download{justify-self:end; margin-left:auto;}
/* 让下载按钮与顶部搜索图标右缘对齐 */
.post-row{ --row-pad-x: .75rem; padding: .6rem var(--row-pad-x); }
.post-row .btn-download{ margin-right: calc(-1 * var(--row-pad-x)); }
@media(max-width:768px){
  .post-row{grid-template-columns:auto 1fr auto;gap:.75rem}
  .post-meta{display:none}
}

/* pagination */
.pagination{display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-8)}
.pagination .page-numbers{display:flex;gap:.5rem}
.pagination .page-numbers a{display:block;padding:.4rem .6rem;border:1px solid var(--border);border-radius:8px;transition:.2s}
.pagination .page-numbers a:hover{background:var(--primary);color:#fff}
.pagination .screen-reader-text{display:none}
.pagination.is-hidden{display:none}
#infinite-sentinel{height:1px}

/* 登录后台显示管理工具条时的偏移处理 */
@media screen and (min-width:782px){.admin-bar .site-header{top:32px}}
@media screen and (max-width:781px){.admin-bar .site-header{top:46px}}

/* 搜索栏占据剩余空间 */
.site-nav{flex:0 0 auto}
.site-tools{flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:.5rem}
.search-form{flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:.5rem}
.search-form label{flex:1 1 auto; min-width:0}
.search-form .search-field{width:100%}
.site-tools .cat-menu{flex:0 0 auto}

/* 搜索联想下拉样式 */
.search-wrap{position:relative; flex:1 1 auto;}
.search-suggest{position:absolute; left:0; right:0; top:100%; margin-top:.25rem; background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow); display:none; z-index:1000; max-height:50vh; overflow:auto}
.search-suggest ul{list-style:none; margin:0; padding:.25rem}
.search-suggest li{padding:.5rem .75rem; border-radius:6px; cursor:pointer}
.search-suggest li.is-active, .search-suggest li:hover{background:var(--surface)}
.search-suggest a{color:inherit; text-decoration:none; display:block}

/* 底部版权信息居中显示 */
.site-footer, .site-footer .inner, .site-info, .site-info p {
  text-align: center;
  justify-content: center;
}
.site-footer .inner{ display:flex; justify-content:center; }