/* ==========================================
   Custom styles (loaded after theme css)
   ========================================== */

/* ---------- Dark smoked glass global (matches black bg video) ---------- */
:root {
  /* Glass surfaces */
  --card-bg: rgba(35, 35, 38, 0.6);
  --glass-bg: rgba(35, 35, 38, 0.6);
  --glass-border: rgba(255, 255, 255, 0.14);
  --card-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  --card-hover-box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);

  /* Light text on dark glass */
  --font-color: rgba(255, 255, 255, 0.78);
  --text-highlight-color: rgba(255, 255, 255, 0.92);
  --white: rgba(255, 255, 255, 0.92);
  --light-grey: rgba(255, 255, 255, 0.5);
  --dark-grey: rgba(255, 255, 255, 0.28);
  --card-meta: rgba(235, 235, 240, 0.62);
  --card-text-color: rgba(235, 235, 240, 0.85);
  --blockquote-color: rgba(255, 255, 255, 0.68);
  --blockquote-bg: rgba(255, 255, 255, 0.06);
  --toc-link-color: rgba(255, 255, 255, 0.6);
  --hr-border: rgba(255, 255, 255, 0.16);
  --hr-before-color: rgba(255, 255, 255, 0.4);
  --mark-bg: rgba(255, 255, 255, 0.18);
  --scrollbar-color: rgba(255, 255, 255, 0.35);

  /* Panels & widgets that use opaque vars in light mode */
  --global-bg: transparent;
  --sidebar-bg: transparent;
  --sidebar-menu-bg: rgba(255, 255, 255, 0.08);
  --search-bg: rgba(35, 35, 38, 0.95);
  --search-input-color: rgba(255, 255, 255, 0.8);
  --search-a-color: rgba(255, 255, 255, 0.8);
  --zoom-bg: rgba(35, 35, 38, 0.85);

  /* Buttons */
  --btn-hover-color: #ff7242;
}

[data-theme='dark'] {
  --card-bg: rgba(35, 35, 38, 0.6);
}

/* Fixed background image so the glass has something to blur
   (bg video overlays it once loaded; this is the loading fallback) */
body {
  background: url('/images/bg2.jpg') center center / cover no-repeat fixed;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro SC', 'SF Pro Text', 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}

/* ---------- Full-screen background video ---------- */
#bg-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
}

/* Home header must stay transparent so the video shows through */
#page-header.full_page {
  background-image: none !important;
  background-color: transparent !important;
}

/* Inner pages: header fallback color should not be blue */
#page-header:not(.full_page) {
  background-color: transparent !important;
}

/* Semi-transparent dark smoked glass cards */
.card-widget,
.layout > div:first-child:not(.nc),
.recent-post-item {
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--glass-border);
}

[data-theme='dark'] .card-widget,
[data-theme='dark'] .layout > div:first-child:not(.nc),
[data-theme='dark'] .recent-post-item {
  border-color: rgba(255, 255, 255, 0.1);
}

/* Frosted nav bar */
#nav {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Nav bar when scrolled / fixed / on pages without top img */
#page-header.nav-fixed > #nav,
#page-header.not-top-img > #nav {
  background: rgba(35, 35, 38, 0.6);
}

/* ---------- Home page header ---------- */
#page-header {
  height: 100vh !important;
  min-height: 100vh !important;
}

/* Center the home site info (title + typing quote) */
#page-header.full_page #site-info {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
}

/* Hide the big site title on home (only the typing quote stays) */
#page-header.full_page #site-info #site-title {
  display: none;
}

/* Center the page title on inner pages */
#page-header #page-site-info {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
  width: 100%;
}

/* Profound quote typing effect */
#site-subtitle {
  font-size: 1.15rem !important;
  color: white !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
  line-height: 1.8;
  min-height: 2.6em;
}

/* Don·Lab title above typing text */
.home-lab-title {
  font-family: 'Poppins', sans-serif;
  font-size: 2.8rem;
  font-weight: 300;
  color: white !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  margin-bottom: 4px;
  letter-spacing: 2px;
}

/* ---------- Post card layout ---------- */
#post-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  padding: 20px 0;
}

.post-card {
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  border: 1px solid var(--glass-border);
}

[data-theme='dark'] .post-card {
  border-color: rgba(255, 255, 255, 0.1);
}

.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-hover-box-shadow);
}

.post-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.post-card-cover {
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.post-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.post-card:hover .post-card-cover img {
  transform: scale(1.05);
}

.post-card-info {
  padding: 16px;
}

.post-card-title {
  font-size: 1.1em;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card-meta {
  font-size: 0.85em;
  color: var(--card-meta);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.post-card-cat a,
.post-card-tags a {
  color: var(--theme-color, #49b1f5);
  text-decoration: none;
}

.post-card-cat a:hover,
.post-card-tags a:hover {
  text-decoration: underline;
}

.page-title {
  font-size: 1.8em;
  font-weight: 600;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--light-grey);
}

/* ---------- Blog page ---------- */
/* Remove the white page card so frosted recent-post-item cards stand alone */
#page:has(#blog-posts) {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
}

.blog-empty {
  text-align: center;
  color: var(--card-meta);
  padding: 60px 0;
}

/* ---------- Blog page: strip #page card, add cardHover to .recent-post-item ---------- */
#body-wrap.type-blog #page {
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
}

#body-wrap.type-blog #page .recent-post-items,
#body-wrap.type-blog #page .recent-post-item {
  width: 100%;
}

#body-wrap.type-blog #page .recent-post-item {
  display: flex;
  align-items: center;
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--card-box-shadow);
  transition: all 0.3s ease 0.1s;
  min-height: 16.8em;
}

#body-wrap.type-blog #page .recent-post-item:hover {
  box-shadow: var(--card-hover-box-shadow);
}

#body-wrap.type-blog #page .post_cover {
  flex-shrink: 0;
  height: auto;
  overflow: hidden;
  position: relative;
  width: 35%;
}

#body-wrap.type-blog #page .post_cover img {
  display: block;
  height: 100%;
  object-fit: cover;
  transition: all 0.6s;
}

#body-wrap.type-blog #page .post_cover:hover img {
  transform: scale(1.05);
}

#body-wrap.type-blog #page .recent-post-info {
  flex: 1;
  padding: 20px 30px;
  overflow: hidden;
}

#body-wrap.type-blog #page .article-title {
  color: var(--font-color);
  font-size: 1.43em;
  line-height: 1.4;
  transition: color 0.3s;
  display: inline;
}

#body-wrap.type-blog #page .article-meta-wrap {
  margin-top: 8px;
  font-size: 0.85em;
  color: var(--card-meta);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

#body-wrap.type-blog #page .article-meta-wrap i {
  margin-right: 4px;
}

#body-wrap.type-blog #page .content {
  margin-top: 8px;
  color: var(--card-text-color);
  font-size: 0.95em;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Footer text ---------- */
#footer {
  background-color: transparent;
}

#footer,
#footer a,
#footer .footer-other-left {
  color: rgba(255, 255, 255, 0.72);
}

#footer a:hover {
  color: #ff7242;
}

/* ---------- Footer webinfo ---------- */
.footer-webinfo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin: 0;
  font-size: 0.9em;
  color: var(--card-meta);
}

.footer-webinfo span {
  white-space: nowrap;
}

.footer-webinfo #busuanzi_value_site_uv,
.footer-webinfo #busuanzi_value_site_pv {
  color: var(--font-color);
}