/* Custom dark theme – advanced infosec look */

/* Deeper darks and accent */
html[data-mode="dark"],
html:not([data-mode]) {
  color-scheme: dark;
}

html[data-mode="dark"],
html:not([data-mode]) {
  --main-bg: #0d0d0f;
  --mask-bg: #1a1a1e;
  --main-border-color: #252528;
  --text-color: #c8c9cb;
  --text-muted-color: #7a7b7e;
  --heading-color: #e4e5e7;
  --link-color: #7eb8fa;
  --link-underline-color: #3d5a80;
  --sidebar-bg: #0f0f12;
  --sidebar-border-color: #1c1c1f;
  --sidebar-muted-color: #7a7b7e;
  --sidebar-active-color: #fff;
  --sidebar-hover-bg: #1a1a1e;
  --sidebar-btn-bg: #18181b;
  --topbar-bg: rgb(13 13 15 / 85%);
  --card-bg: #121215;
  --card-hover-bg: #1e1e22;
  --card-shadow: rgb(0 0 0 / 45%) 0 6px 20px 0, rgb(60 60 65 / 25%) 0 0 0 1px;
  --highlight-bg-color: #0c0c0e;
  --btn-border-color: #2a2a2e;
  --tag-border: #2d3a42;
  --tag-hover: #1e2a32;
}

/* Sidebar accent line */
#sidebar {
  border-right-width: 1px;
  box-shadow: 1px 0 0 0 rgba(126, 184, 250, 0.06);
}

#sidebar .site-title {
  color: var(--heading-color);
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* Hide empty tagline/subtitle so layout stays clean */
#sidebar .site-subtitle:empty {
  display: none;
}

#sidebar .sidebar-bottom a:hover,
#sidebar .sidebar-bottom #mode-toggle:hover {
  color: var(--link-color);
}

/* Cards and content */
.post-preview {
  border-radius: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.post-preview:hover {
  transform: translateY(-2px);
  box-shadow: rgb(0 0 0 / 5%) 0 12px 28px 0, rgb(126 184 250 / 0.08) 0 0 0 1px;
}

/* Subtle grid background on main */
#main-wrapper {
  background-image: 
    linear-gradient(rgba(126, 184, 250, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 184, 250, 0.02) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Code blocks stay readable */
html[data-mode="dark"] .highlight,
html:not([data-mode]) .highlight {
  background-color: #0a0a0c;
  border: 1px solid var(--main-border-color);
}

/* Links and tags */
.content a:not(.img-link):hover,
#sidebar a:hover {
  color: var(--link-color) !important;
}

.post-tag:hover,
.tag:hover {
  border-color: var(--link-color);
  color: var(--link-color);
}

/* Avatar: ensure img fills the circle */
#sidebar #avatar {
  box-shadow: 0 0 0 2px var(--sidebar-border-color), 0 0 0 4px rgba(126, 184, 250, 0.15);
  display: block;
  overflow: hidden;
}
#sidebar #avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  vertical-align: middle;
}

/* Footer: copyright left, socials right */
footer {
  padding-bottom: 1.25rem;
}
footer p {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
footer .footer-socials {
  margin-left: auto;
  color: var(--text-muted-color);
  font-size: 0.9em;
}

/* Back-to-top button: sit lower, below the footer line */
#back-to-top {
  bottom: 1.25rem !important;
}
@media all and (min-width: 850px) {
  #back-to-top {
    bottom: 1.25rem !important;
  }
}