@charset "utf-8";

/* =================================================================
   Design System: "Vibrant Clarity" (Client-First)
   - Brand Color: #0393D3
   ================================================================= */

:root {
  /* Color Palette */
  --color-primary: #0393D3;
  --color-primary-dark: #0276a8;
  --color-primary-glow: rgba(3, 147, 211, 0.1);
  --color-gradient: linear-gradient(45deg, #0393D3, #bfecf8);

  --color-background: #F9FAFB;
  --color-surface: #FFFFFF;
  --color-border: #E5E7EB;
  
  --color-text-primary: #1F2937;
  --color-text-secondary: #6B7280;
  --color-text-header: #111827;
  
  /* Typography */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-heading: 'Inter', sans-serif;
  --font-code: 'JetBrains Mono', monospace;

  /* Sizing & Spacing */
  --sidebar-width: 250px;
  --content-max-width: 850px;
  --radius: 8px;
  --transition: all 0.2s ease-out;
}

/* =================================================================
   Base Styles
   ================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; }

body {
  margin: 0; padding: 0;
  background-color: var(--color-background);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.3;
  font-weight: 800;
  color: var(--color-text-header);
}
a { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-dark); }
::selection { background-color: var(--color-primary); color: white; }
ul, ol { list-style: none; padding: 0; margin: 0; }

/* ======================================================
   Layout
   ================================================================= */
#wrap { display: flex; }

#sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background-color: var(--color-surface);
  border-right: 1px solid var(--color-border);
  z-index: 200;
  transition: transform 0.3s ease-out;
}

#sidebar .sidebar-inner {
  /* display: flex; */
  flex-direction: column;
  padding: 2.5rem;
  height: 100%;
  overflow-y: auto;
}

/* [THE KEY CHANGE] Gradient title style restored and enhanced */
.blog-title-wrapper {
  flex-shrink: 0;
}
.blog-title-wrapper h1 {
  /* font-size: 22px; */
  margin: 0;
  line-height: 1.4;
}
.blog-title-wrapper h1 a {
  font-size: 20px !important;
  background: var(--color-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline; /* Required for background-clip to work correctly */
}

.sidebar-content-centered {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    min-height: 0;
}
.sidebar-content-centered > .widget {
  margin: 1.5rem 0;
}

#sidebar a {
  display: block;
  font-size: 15px;
  padding: 0.5rem 0;
  color: var(--color-text-secondary);
  transition: var(--transition);
}
#sidebar .category a:hover { color: var(--color-primary); transform: translateX(3px); }
#sidebar .category .selected { color: var(--color-primary); font-weight: 700; }
#sidebar .category_list { padding-left: 1.5rem; }

/* [THE KEY CHANGE] Footer for search and ads */
.sidebar-footer {
    margin-top: auto;
    padding-top: 1.5rem;
    flex-shrink: 0;
}
.sidebar-footer .revenue_unit_wrap {
    margin-top: 1.5rem;
    text-align: center;
}
.sidebar-footer .revenue_unit_info {
    display: none;
}
.search .search-input {
  width: 100%;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  font-size: 14px;
  outline: none;
}
.search .search-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-glow);
}

#content {
  flex-grow: 1;
  margin-left: var(--sidebar-width);
  padding: 2.5rem;
  width: calc(100% - var(--sidebar-width));
}
#content-inner { max-width: var(--content-max-width); margin: 0 auto; }

/* ======================================================
   Wrappers & Headers
   ================================================================= */
.list-wrapper, .entry-wrapper {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 2.5rem;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
}

#head {
  text-align: center;
  margin-bottom: 2rem;
  padding: 1.5rem 0;
}
#head h1 {
  font-size: 24px;
  font-weight: 700;
}
.article #head h1 {
    font-size: 36px;
}
.post-meta-header {
  margin-top: 1rem;
  color: var(--color-text-secondary);
  font-size: 13px;
}
.post-meta-header .meta-notice {
    background: var(--color-primary);
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
}

/* ======================================================
   Post List
   ================================================================= */
.post-list li { list-style: none; }
.post-list .post-link {
  display: block;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  border-radius: 6px;
  transition: all 0.2s;
}
.post-list .post-link:hover {
  background-color: var(--color-background);
  transform: translateY(-2px);
}
.post-list li:first-child { padding-top: 0; }
.post-list li:last-child .post-link { border-bottom: none; }

.post-list .post-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--color-text-header);
}
.post-list .post-link:hover .post-title { color: var(--color-primary); }
.post-list .post-meta {
  color: var(--color-text-secondary);
  font-size: 13px;
  display: flex;
  gap: 1rem;
}

/* ======================================================
   Article View & Entry Footer
   ================================================================= */
.article { font-size: 17px; line-height: 1.8; }
#article-view h2, #article-view h3 {
  /* margin: 3rem 0 1.5rem; */
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
}
#article-view h2 { font-size: 28px; }
#article-view h3 { font-size: 24px; }

#article-view a {
  text-decoration: none;
  background-image: linear-gradient(var(--color-primary), var(--color-primary));
  background-position: 0% 100%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  transition: background-size .3s;
}
#article-view a:hover { background-size: 100% 2px; }

#article-view blockquote {
  background: var(--color-background);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.5rem 2rem;
  margin: 2.5rem 0;
  font-size: 16px;
  color: var(--color-text-secondary);
}

#article-view pre {
  margin: 2.5rem 0;
  border-radius: var(--radius);
  padding: 1.5rem;
  background-color: #f6f8fa;
  border: 1px solid var(--color-border);
  overflow-x: auto;
}
#article-view pre code {
  font-family: var(--font-code);
  font-size: 15px;
  line-height: 1.7;
  background: none;
  color: #24292e;
}
#article-view p code {
  font-family: var(--font-code);
  color: var(--color-primary-dark);
  background-color: var(--color-primary-glow);
  padding: 0.2em 0.5em;
  border-radius: 6px;
  font-size: 0.9em;
}

.hljs-comment, .hljs-quote { color: #6a737d; }
.hljs-keyword, .hljs-selector-tag, .hljs-subst { color: #d73a49; }
.hljs-number, .hljs-literal, .hljs-variable, .hljs-template-variable, .hljs-regexp { color: #005cc5; }
.hljs-string, .hljs-doctag { color: #032f62; }
.hljs-title, .hljs-section, .hljs-selector-id, .hljs-selector-class { color: #6f42c1; }
.hljs-type, .hljs-attribute, .hljs-name, .hljs-built_in, .hljs-bullet { color: #005cc5; }
.hljs-params { color: #24292e; }

/* [THE KEY CHANGE] Minimal footer with comma removal */
.entry-footer {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}
.entry-footer a {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-right: 0.75rem;
  margin-bottom: 0.5rem;
  display: inline-block;
  text-decoration: none;
}
.entry-footer a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}
.entry-footer a::before {
  content: '#';
  margin-right: 2px;
}
/* This removes the comma between tags */
.entry-footer .tags font {
    display: none;
}

.postbtn_like {
    margin-top: 2.5rem;
}

/* ======================================================
   Pagination
   ================================================================= */
#paging {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
}
#paging a {
  color: var(--color-text-secondary);
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
  transition: var(--transition);
}
#paging a:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

#paging a:has(> .selected) {
  background-color: var(--color-primary-glow);
  color: var(--color-primary-dark);
  border-color: var(--color-primary);
  box-shadow: none;
  transform: none;
}
#paging a:has(> .selected) .selected {
    color: inherit;
    background: none;
}

#paging .prev.no-more-prev, #paging .next.no-more-next {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  background-color: transparent;
}

/* ======================================================
   Responsive
   ================================================================= */
#sidebar-toggle {
  display: none;
  position: fixed;
  right: 1.5rem; bottom: 1.5rem;
  width: 48px; height: 48px;
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  align-items: center; justify-content: center;
  font-size: 20px; cursor: pointer;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

@media all and (max-width: 1024px) {
  #sidebar { transform: translateX(calc(var(--sidebar-width) * -1)); }
  html.open #sidebar { transform: translateX(0); }
  #content { margin-left: 0; width: 100%; padding: 1.5rem; }
  #sidebar-toggle { display: flex; }
}

@media all and (max-width: 768px) {
  .article { font-size: 16px; }
  #head h1 { font-size: 22px; }
  .list-wrapper, .entry-wrapper { padding: 1.5rem; border-radius: 0; }
  .post-list .post-title { font-size: 16px; }
}