/* ===========================================================
 * YJZ's Security Lab — 日系简约 · 青
 * Clean, warm, minimal aesthetic with teal accents
 * =========================================================== */

/* ---------- CSS Variables ---------- */
:root {
  --teal: #0d9488;
  --teal-light: #14b8a6;
  --teal-dark: #0f766e;
  --teal-bg: rgba(13, 148, 136, 0.06);
  --teal-border: rgba(13, 148, 136, 0.25);

  --bg-body: #f8f7f4;
  --bg-card: #ffffff;
  --bg-code-inline: rgba(13, 148, 136, 0.08);
  --text-primary: #2d2d2d;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;
  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-hover: rgba(13, 148, 136, 0.3);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.06);
  --radius: 10px;
  --radius-sm: 6px;
}

[data-theme='dark'] {
  --bg-body: #1a1a1e;
  --bg-card: #242428;
  --bg-code-inline: rgba(13, 148, 136, 0.12);
  --text-primary: #e4e4e7;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-hover: rgba(13, 148, 136, 0.35);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ===========================================================
 * Global
 * =========================================================== */
html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg-body);
}

/* ===========================================================
 * Navigation
 * =========================================================== */
#nav {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle) !important;
  transition: all 0.3s ease;
}

[data-theme='dark'] #nav {
  background: rgba(26, 26, 30, 0.85) !important;
  border-bottom-color: var(--border-subtle) !important;
}

#nav a {
  color: var(--text-primary) !important;
  font-weight: 450;
  transition: color 0.25s ease;
}

#nav a:hover {
  color: var(--teal) !important;
}

#nav #site-name {
  font-weight: 600;
  font-size: 1.25rem;
  letter-spacing: 0.5px;
  color: var(--teal) !important;
}

/* ===========================================================
 * Banner / Top Image
 * =========================================================== */
#page-header:not(.not-top-img):before {
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.35) 0%,
    rgba(248, 247, 244, 0.85) 100%
  );
}

[data-theme='dark'] #page-header:not(.not-top-img):before {
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(26, 26, 30, 0.9) 100%
  );
}

#page-header #site-title {
  font-weight: 700;
  letter-spacing: 2px;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
}

#page-header #site-subtitle {
  letter-spacing: 1px;
  opacity: 0.9;
}

/* ===========================================================
 * Cards
 * =========================================================== */
#recent-posts > .recent-post-item,
.layout > .post,
.layout > aside > .card-widget,
.layout-page > *,
.flink-list > a,
#post > *,
.recent-post-item,
.card-widget {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-card) !important;
  transition: all 0.3s ease !important;
}

#recent-posts > .recent-post-item:hover {
  border-color: var(--border-hover) !important;
  box-shadow: var(--shadow-hover) !important;
  transform: translateY(-2px);
}

/* Remove default butterfly box-shadows */
#recent-posts > .recent-post-item,
.layout > .post,
.layout > aside > .card-widget {
  box-shadow: var(--shadow-card) !important;
}

/* ===========================================================
 * Post Content
 * =========================================================== */
.post-content h1,
.layout > .post h1,
.layout-page h1 {
  color: var(--text-primary) !important;
  border-bottom: 2px solid var(--border-subtle);
  padding-bottom: 0.5rem;
}

.post-content h2,
.layout > .post h2,
.layout-page h2 {
  color: var(--teal-dark) !important;
  font-weight: 600;
}

[data-theme='dark'] .post-content h2 {
  color: var(--teal-light) !important;
}

.post-content h3,
.layout > .post h3,
.layout-page h3 {
  color: var(--text-primary) !important;
  font-weight: 550;
}

.post-content h4 {
  color: var(--text-secondary) !important;
}

/* Links */
.post-content a {
  color: var(--teal) !important;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}

.post-content a:hover {
  border-bottom-color: var(--teal);
}

/* ===========================================================
 * Code
 * =========================================================== */
code:not(pre code) {
  color: #dc2626 !important;
  background: var(--bg-code-inline) !important;
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  font-size: 0.88em;
}

[data-theme='dark'] code:not(pre code) {
  color: #f87171 !important;
}

.highlight,
pre,
figure.highlight {
  border-radius: var(--radius) !important;
  border: 1px solid var(--border-subtle) !important;
  background: #fafaf9 !important;
}

[data-theme='dark'] .highlight,
[data-theme='dark'] pre,
[data-theme='dark'] figure.highlight {
  background: #18181b !important;
}

/* ===========================================================
 * Tables
 * =========================================================== */
table {
  border-collapse: collapse;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
}

table thead th {
  background: var(--teal-bg) !important;
  color: var(--teal-dark) !important;
  border-bottom: 2px solid var(--teal);
  font-weight: 600;
  padding: 10px 14px;
}

[data-theme='dark'] table thead th {
  color: var(--teal-light) !important;
}

table tbody tr {
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.2s ease;
}

table tbody tr:hover {
  background: var(--teal-bg);
}

table tbody td {
  padding: 8px 14px;
  color: var(--text-primary);
}

/* ===========================================================
 * Blockquote
 * =========================================================== */
blockquote {
  border-left: 3px solid var(--teal) !important;
  background: var(--teal-bg) !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 10px 16px;
  margin: 1.5em 0;
}

blockquote p {
  color: var(--text-secondary) !important;
  margin: 0;
}

/* ===========================================================
 * Sidebar
 * =========================================================== */
.card-widget .card-title,
.card-widget .aside-title {
  color: var(--teal-dark) !important;
  font-weight: 600;
  font-size: 1em;
}

[data-theme='dark'] .card-widget .card-title {
  color: var(--teal-light) !important;
}

.card-widget .item-count {
  background: var(--teal-bg) !important;
  color: var(--teal) !important;
  border-radius: 999px;
  padding: 0 8px;
  font-size: 0.82em;
}

.card-widget a {
  color: var(--text-primary) !important;
  transition: color 0.25s ease;
}

.card-widget a:hover {
  color: var(--teal) !important;
}

/* ===========================================================
 * Footer
 * =========================================================== */
#footer {
  background: var(--bg-card) !important;
  border-top: 1px solid var(--border-subtle);
  padding: 2rem 0 !important;
}

#footer-wrap {
  color: var(--text-secondary) !important;
  font-size: 0.92em;
}

#footer-wrap a {
  color: var(--teal) !important;
}

/* ===========================================================
 * Scrollbar
 * =========================================================== */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-subtle);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--teal);
}

/* ===========================================================
 * Selection
 * =========================================================== */
::selection {
  background: rgba(13, 148, 136, 0.2);
  color: var(--text-primary);
}

/* ===========================================================
 * Tags & Buttons
 * =========================================================== */
.tag-link {
  border-radius: var(--radius-sm) !important;
  transition: all 0.25s ease !important;
}

.tag-link:hover {
  background: var(--teal-bg) !important;
  color: var(--teal) !important;
}

.pagination .page-number.current {
  background: var(--teal) !important;
  color: #fff !important;
  border-radius: 50% !important;
}

.pagination .page-number {
  transition: color 0.25s ease;
}

.pagination .page-number:hover {
  color: var(--teal) !important;
}

/* ===========================================================
 * Post Meta
 * =========================================================== */
.post-meta-date,
.post-meta__tags {
  color: var(--text-muted) !important;
  font-size: 0.9em;
}

.post-meta > a,
.post-meta .post-meta__tags a {
  color: var(--teal) !important;
}

.post-meta > a:hover {
  opacity: 0.75;
}

/* ===========================================================
 * Search
 * =========================================================== */
#search .search-dialog {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius) !important;
}

.search-dialog .search-input {
  background: var(--bg-body) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
}

.search-dialog .search-input:focus {
  border-color: var(--teal) !important;
  outline: none;
}

.search-dialog .search-result a {
  color: var(--teal) !important;
}

/* ===========================================================
 * Related Posts
 * =========================================================== */
.relatedPosts {
  border-top: 1px solid var(--border-subtle);
  margin-top: 2rem;
  padding-top: 1.5rem;
}

.relatedPosts .relatedPosts-title {
  color: var(--teal-dark) !important;
}

[data-theme='dark'] .relatedPosts .relatedPosts-title {
  color: var(--teal-light) !important;
}

.relatedPosts .relatedPosts-list .content .title {
  color: var(--text-primary) !important;
  transition: color 0.25s ease;
}

.relatedPosts .relatedPosts-list .content:hover .title {
  color: var(--teal) !important;
}

/* ===========================================================
 * Recent Post Titles
 * =========================================================== */
.recent-post-item .post-title a {
  color: var(--text-primary) !important;
  transition: color 0.25s ease;
}

.recent-post-item .post-title a:hover {
  color: var(--teal) !important;
}

/* ===========================================================
 * TOC
 * =========================================================== */
#sidebar #toc {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius) !important;
  padding: 16px !important;
}

#sidebar #toc a {
  color: var(--text-secondary) !important;
  transition: color 0.25s ease;
}

#sidebar #toc a:hover {
  color: var(--teal) !important;
}

/* ===========================================================
 * Table of Contents (in-post)
 * =========================================================== */
#toggle-sidebar {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-sm) !important;
}

/* ===========================================================
 * Subtle divider (hr) styling
 * =========================================================== */
hr {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: 2em 0;
}

/* ===========================================================
 * Responsive
 * =========================================================== */
@media screen and (max-width: 768px) {
  #nav {
    background: rgba(255, 255, 255, 0.95) !important;
  }

  [data-theme='dark'] #nav {
    background: rgba(26, 26, 30, 0.95) !important;
  }

  #recent-posts > .recent-post-item {
    border-radius: var(--radius-sm) !important;
  }
}