/* Base theme colors */
body {
  --background-primary: #1e2233;  /* Dark grey-blue background */
  --background-secondary: #282d3f; /* Slightly lighter for contrast */
  --text-normal: #dee2e6;         /* Light grey text for readability */
  --text-muted: #a8b1bf;          /* Subdued text color */
  --text-accent: #89ddff;         /* Bright blue for accents/links */
}

/* Theme override */
.theme-dark {
  --text-normal: #dee2e6;
  --text-muted: #dee2e6;
}

/* Main content area */
.publish-renderer {
  background-color: #1e2233;
}

.published-container {
  --page-width: 1200px;
}

.markdown-preview-view {
  background-color: rgba(108, 103, 131, 0.05);
  padding: 20px;
}

/* Headers styling */
.markdown-rendered h1 {
  color: #c792ea;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  font-weight: var(--h1-weight);
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-size: 2em;
  padding-bottom: 0.3em;
}

.nav-file-title h1, .nav-folder-title h1 {
  letter-spacing: -0.02em;
}

.markdown-rendered h2 { color: #b594e3; }
.markdown-rendered h3 { color: #a396dc; }
.markdown-rendered h4 { color: #9198d5; }
.markdown-rendered h5 { color: #7f9ace; }
.markdown-rendered h6 { color: #6d9cc7; }

/* Common header styles */
.markdown-rendered h2, 
.markdown-rendered h3, 
.markdown-rendered h4, 
.markdown-rendered h5, 
.markdown-rendered h6 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

/* Header borders */
.markdown-rendered h1, 
.markdown-rendered h2 {
  padding-bottom: 0.3em;
  border-bottom: 1px solid rgba(108, 103, 131, 0.2);
}

/* Enhanced Callout Styling */
.callout {
  --callout-padding: 0.8rem;  /* Reduced from 1.2rem */
  --callout-radius: 8px;      /* Reduced from 12px */
  --callout-content-padding: 0.4rem 0.8rem;  /* Reduced from 0.8rem 1rem */
  
  /* Rest of the base styling remains the same */
  --callout-border-width: 0px;
  --callout-border-opacity: 1;
  --callout-blend-mode: normal;
  
  background: linear-gradient(
    to right,
    rgba(108, 103, 131, 0.15),
    rgba(108, 103, 131, 0.05)
  );
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 
              0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border-radius: var(--callout-radius);
  padding: var(--callout-padding);
  margin: 1em 0;  /* Reduced from 1.5em */
  position: relative;
  overflow: hidden;
}

/* Add subtle left border accent */
.callout::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--callout-color);
  border-radius: 4px 0 0 4px;
}

/* Title styling */
.callout-title {
  --callout-title-size: 1em;  /* Reduced from 1.1em */
  --callout-title-padding: 0;
  --callout-title-weight: 600;
  
  display: flex;
  align-items: center;
  gap: 8px;  /* Reduced from 10px */
  margin-bottom: 0.3em;  /* Reduced from 0.5em */
}

/* Icon styling */
.callout-icon {
  color: var(--callout-color);
  opacity: 0.9;
}

.callout-icon svg {
  width: 18px;    /* Reduced from 22px */
  height: 18px;   /* Reduced from 22px */
  stroke-width: 2;
}

/* Make the accent line thinner */
.callout::before {
  width: 3px;  /* Reduced from 4px */
}

/* Content styling */
.callout-content {
  color: var(--text-normal);
  line-height: 1.5;
  margin-left: 26px; /* Align with title text */
}

/* Make sure all text in callout content is visible */
.callout-content p {
  color: var(--text-normal) !important;
}

/* Type-specific styling */
.callout[data-callout="note"] {
  --callout-color: #c792ea;
}

.callout[data-callout="tip"] {
  --callout-color: #a8e6cf;
  background: linear-gradient(
    to right,
    rgba(168, 230, 207, 0.15),
    rgba(168, 230, 207, 0.05)
  );
}

.callout[data-callout="warning"] {
  --callout-color: #ffcb6b;
  background: linear-gradient(
    to right,
    rgba(255, 203, 107, 0.15),
    rgba(255, 203, 107, 0.05)
  );
}

.callout[data-callout="info"] {
  --callout-color: #89ddff;
  background: linear-gradient(
    to right,
    rgba(137, 221, 255, 0.15),
    rgba(137, 221, 255, 0.05)
  );
}

.callout[data-callout="error"] {
  --callout-color: #ff869a;
  background: linear-gradient(
    to right,
    rgba(255, 134, 154, 0.15),
    rgba(255, 134, 154, 0.05)
  );
}

.callout[data-callout="success"] {
  --callout-color: #9ee37d;
  background: linear-gradient(
    to right,
    rgba(158, 227, 125, 0.15),
    rgba(158, 227, 125, 0.05)
  );
}

/* Check callout styling */
.callout[data-callout="check"] {
  --callout-color: #a8e6cf;
  background: linear-gradient(
    to right,
    rgba(168, 230, 207, 0.15),
    rgba(168, 230, 207, 0.05)
  );
}

/* Important callout - reddish tone */
.callout[data-callout="important"] {
  --callout-color: #ff6b6b;
  background: linear-gradient(
    to right,
    rgba(255, 107, 107, 0.15),
    rgba(255, 107, 107, 0.05)
  );
}

/* Caution callout - amber/orange */
.callout[data-callout="caution"] {
  --callout-color: #ffd43b;
  background: linear-gradient(
    to right,
    rgba(255, 212, 59, 0.15),
    rgba(255, 212, 59, 0.05)
  );
}


/* Security callout - blue */
.callout[data-callout="security"] {
  --callout-color: #74c0fc;
  background: linear-gradient(
    to right,
    rgba(116, 192, 252, 0.15),
    rgba(116, 192, 252, 0.05)
  );
}

/* Hide default pencil icon for security callouts */
.callout[data-callout="security"] .callout-icon {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 4px;  /* Add some space after the icon */
}

.callout[data-callout="security"] .callout-icon svg {
  opacity: 0;
}

.callout[data-callout="security"] .callout-icon::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E");
  -webkit-mask-size: cover;
  mask-size: cover;
}

.callout[data-callout="security"] .callout-title {
  display: flex;
  align-items: center;
  gap: 12px;  /* Increased gap between icon and text */
}

.callout[data-callout="security"] .callout-title-inner {
  margin-left: 4px;  /* Additional left margin for the text */
}

/* Hover effect */
.callout:hover {
  transform: translateY(-1px);
  transition: all 0.2s ease;
  box-shadow: 0 6px 8px -1px rgba(0, 0, 0, 0.15),
              0 3px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Text color inheritance */
.markdown-rendered .markdown-preview-section {
  color: #dee2e6;
}

/* Tables */
table {
  border-collapse: collapse;
  margin: 1em 0;
  width: 100%;
}

th, td {
  border: 1px solid rgba(108, 103, 131, 0.2);
  padding: 0.8em;
  text-align: left;
}

th {
  background-color: rgba(108, 103, 131, 0.1);
  font-weight: 600;
  color: #c792ea;
}

tr:nth-child(even) {
  background-color: rgba(108, 103, 131, 0.05);
}

/* Links */
a {
  color: #89ddff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  color: #c792ea;
}

/* Obsidian Publish Table Styling */
.markdown-rendered table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1.5em 0;
  background: #1e2233;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
              0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.markdown-rendered thead tr {
  background: rgba(199, 146, 234, 0.15);  /* Solid purple background */
}

.markdown-rendered th {
  color: #c792ea;
  font-weight: 600;
  text-align: left;
  padding: 1em;
  border: none;
  border-bottom: 2px solid rgba(108, 103, 131, 0.2);
}

.markdown-rendered td {
  padding: 0.8em 1em;
  color: #dee2e6;
  border: none;
  border-bottom: 1px solid rgba(108, 103, 131, 0.1);
}

.markdown-rendered tr:last-child td {
  border-bottom: none;
}

/* Alternating row colors */
.markdown-rendered tbody tr:nth-child(even) {
  background-color: rgba(108, 103, 131, 0.05);
}

/* Hover effect */
.markdown-rendered tbody tr:hover {
  background-color: rgba(137, 221, 255, 0.05);
}

/* Priority column styling */
.markdown-rendered td:first-child {
  font-family: var(--font-monospace);
  color: #89ddff;
}

/* Action column styling */
.markdown-rendered td:last-child {
  font-weight: 500;
}

/* Color for Allow text */
.markdown-rendered td:last-child {
  color: #9ee37d;
}

/* Specific styling for cells containing "Deny" */
.markdown-rendered td:last-child:contains("Deny") {
  color: #ff6b6b !important;
}

/* Responsive design */
@media (max-width: 768px) {
  .markdown-rendered table {
      display: block;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
  }
}

.markdown-rendered code:not(.code-block) {
  background: rgba(199, 146, 234, 0.1);
  color: #ff79c6;
  padding: 0.2em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: var(--font-monospace);
  border: 1px solid rgba(255, 121, 198, 0.2);
  transition: all 0.2s ease;
}

.markdown-rendered code:not(.code-block):hover {
  background: rgba(199, 146, 234, 0.2);
  border-color: rgba(255, 121, 198, 0.3);
}

.markdown-rendered em {
  font-style: italic;
  background: linear-gradient(90deg, #89ddff, #36f9c5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  position: relative;
  /* Add a subtle glow effect */
  text-shadow: 0 0 8px rgba(137, 221, 255, 0.2);
}

.markdown-rendered strong {
  font-weight: 600;
  color: #ff9f66;  /* Warm orange color */
}

/* Inline code styling */
.markdown-rendered code:not(.code-block) {
  background: rgba(199, 146, 234, 0.1);
  color: #ff79c6;
  padding: 0.2em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: var(--font-monospace);
  border: 1px solid rgba(255, 121, 198, 0.2);
  transition: all 0.2s ease;
}

.markdown-rendered code:not(.code-block):hover {
  background: rgba(199, 146, 234, 0.2);
  border-color: rgba(255, 121, 198, 0.3);
}

/**********************************CODE BLOCKS***********************************************/

/* Code Block Base Styling */
pre[class*="language-"] {
  position: relative;
  margin: 2em 0 1em 0;
  padding: 0.4em 0.4em 0.4em 0.4em;
  background-color: #1e2233;
  border-radius: 8px;
  border: 1px solid rgba(137, 221, 255, 0.2);
  box-shadow: 0 4px 12px rgba(30, 34, 51, 0.3);
}

/* Code block container */
.markdown-rendered .pre-wrap {
  position: relative;
  background: #1e2233;
  border-radius: 8px;
  margin: 1em 0;
}

.markdown-rendered pre {
  background-color: #1e2233 !important;
}

/* Code Container */
pre code {
  display: block;
  color: #f8f8f2;
  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  line-height: 1.5;
  counter-reset: line;
  white-space: pre;
  tab-size: 2;
}

/* Language Labels */
div.el-pre {
  position: relative;
  margin-top: 2em;
}

div.el-pre::before {
  position: absolute;
  top: -1.8em;
  left: 0;
  margin-top: -0.5em;
  font-size: 0.7em;
  padding: 0.3em 0.6em;
  border-radius: 4px;
  text-transform: uppercase;
  background: rgba(137, 221, 255, 0.1);
  color: #89ddff;
  z-index: 1;
}

/* Space Between Code Blocks */
div.el-pre + div.el-pre {
  margin-top: 3em;
}

/* Line Numbers */
.line {
  display: inline-block;
  width: 100%;
  position: relative;
  padding-left: 3em;
}

.line::before {
  counter-increment: line;
  content: counter(line);
  position: absolute;
  left: 0;
  color: #6272a4;
  width: 2em;
  text-align: right;
  padding-right: 1em;
  user-select: none;
}

/* Copy Button */
.copy-code-button {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  opacity: 0;
  transition: opacity 0.2s;
}

pre:hover .copy-code-button {
  opacity: 1;
}

/* Inline Code */
.markdown-rendered code:not(.code-block) {
  background: rgba(137, 221, 255, 0.1);
  color: #89ddff;
  padding: 0.2em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
  font-family: var(--font-monospace);
  border: 1px solid rgba(137, 221, 255, 0.2);
  transition: all 0.2s ease;
}

.markdown-rendered code:not(.code-block):hover {
  background: rgba(137, 221, 255, 0.15);
  border-color: rgba(137, 221, 255, 0.3);
}

/**************************** Language-Specific Syntax Highlighting ***********************************/

/* PowerShell - Purple Theme with Red/White Accents */
.language-powershell {
  color: #e4e4e4;  /* Soft white base text */
}

.language-powershell .token.comment {
  color: #b5f3a5;  /* Muted green for comments */
  font-style: italic;
}

.language-powershell .token.function {
  color: #bd93f9;  /* Bright purple for functions */
}

.language-powershell .token.parameter {
  color: #ff9cac;  /* Soft red for parameters */
}

.language-powershell .token.string {
  color: #e4e4e4;  /* Soft pink/purple for strings */
}

.language-powershell .token.operator {
  color: #c792ea;  /* Purple for operators */
}

.language-powershell .token.keyword {
  color: #c88ee9;  /* Soft orange for keywords */
}

.language-powershell .token.variable {
  color: #ff9cac;  /* red for variables */
}

.language-powershell .token.punctuation {
  color: #b4b4b4;  /* Lighter grey for punctuation */
}

.language-powershell .token.namespace {
  color: #c792ea;  /* Purple for namespaces */
}

.language-powershell .token.property {
  color: #e4e4e4;  /* Soft white for properties */
}

.language-powershell .token.builtin {
  color: #bd93f9;  /* Bright purple for built-ins */
}

/* Bash - Purple Theme */
.language-bash {
  color: #bd93f9;  /* Base purple */
}

.language-bash .token.function,
.language-bash .token.command {
  color: #c792ea;  /* Main purple for commands */
}

.language-bash .token.comment {
  color: #b5f3a5;  /* Muted green for comments */
  font-style: italic;
}

.language-bash .token.string {
  color: #fdd282;  /* Light colour for strings */
}

.language-bash .token.operator {
  color: #bd93f9;  /* Base purple for operators */
}

.language-bash .token.keyword,
.language-bash .token.builtin {
  color: #c792ea;  /* Main purple for keywords */
}

.language-bash .token.variable {
  color: #bd93f9;  /* Base purple for variables */
}

.language-bash .token.punctuation {
  color: #6d9cc7;  /* Muted blue for punctuation */
}

.language-bash .token.parameter,
.language-bash .token.option {
  color: #e4e4e4;  /* Soft white for parameters/flags */
}

/* Special highlighting for sudo and similar commands */
.language-bash .token.important {
  color: #ff9cac;  /* Soft red for important commands */
  font-weight: bold;
}

/* Path-like strings */
.language-bash .token.class-name,
.language-bash .token.filename {
  color: #89ddff;  /* Light blue for paths */
}

/* Shell - Cyan Theme */
.language-shell {
  color: #8be9fd;
}

.language-shell .token.comment {
  color: #6bbbcf;
  font-style: italic;
}

.language-shell .token.function {
  color: #50fae6;
}

.language-shell .token.builtin {
  color: #8be9fd;
}

.language-shell .token.string {
  color: #a3f7e9;
}

.language-shell .token.operator {
  color: #50fae6;
}

.language-shell .token.keyword {
  color: #50fae6;
}

.language-shell .token.variable {
  color: #8be9fd;
}

.language-shell .token.punctuation {
  color: #6bbbcf;
}

.language-shell .token.parameter {
  color: #a3e0f0;
}

/* Python */
.language-python .token.keyword,
.language-python .token.def {
  color: #82aaff;
}

.language-python .token.function {
  color: #82aaff;
}

.language-python .token.string {
  color: #a8e6cf;
}

.language-python .token.builtin {
  color: #89ddff;
}

/* JavaScript */
.language-javascript .token.keyword {
  color: #82aaff;
}

.language-javascript .token.function {
  color: #82aaff;
}

.language-javascript .token.string {
  color: #a8e6cf;
}

.language-javascript .token.operator {
  color: #89ddff;
}

/* Common Tokens */
.token.comment {
  color: #6d9cc7;
  font-style: italic;
}

.token.punctuation {
  color: #6d9cc7;
}

.token.operator {
  color: #89ddff;
}

/* C++ Syntax Highlighting */
.language-cpp {
  color: #f8f8f2;  /* Base text color */
}

.language-cpp .token.keyword {
  color: #c792ea;  /* Purple for keywords */
}

.language-cpp .token.function {
  color: #82aaff;  /* Light blue for functions */
}

.language-cpp .token.class-name {
  color: #ffcb6b;  /* Golden for class names */
}

.language-cpp .token.operator {
  color: #FFB86C;  /* Cyan for operators */
}

.language-cpp .token.string {
  color: #BD93F9;  /* theme matching colour for strings */
}

.language-cpp .token.number {
  color: #f78c6c;  /* Coral for numbers */
}

.language-cpp .token.preprocessor {
  color: #ff9cac;  /* Soft red for preprocessor directives */
}

.language-cpp .token.comment {
  color: #9edd8e;  /* Muted colour for comments */
  font-style: italic;
}

.language-cpp .token.type-declaration {
  color: #ffd700;  /* Gold for type declarations */
}

/* Language Labels */
div.el-pre:has(pre.language-cpp)::before { content: "C++"; }
div.el-pre:has(pre.language-c)::before { content: "C"; }
div.el-pre:has(pre.language-csharp)::before,
div.el-pre:has(pre.language-cs)::before { content: "C#"; }
div.el-pre:has(pre.language-asm)::before,
div.el-pre:has(pre.language-assembly)::before { content: "ASSEMBLY"; }

/* C++ Syntax Highlighting */
.language-cpp {
  color: #f8f8f2;  /* Base text color */
}

.language-cpp .token.keyword {
  color: #c792ea;  /* Purple for keywords */
}

.language-cpp .token.function {
  color: #82aaff;  /* Light blue for functions */
}

.language-cpp .token.class-name {
  color: #ffcb6b;  /* Golden for class names */
}

.language-cpp .token.operator {
  color: #FFB86C;  /* Warm orange for operators */
}

.language-cpp .token.string {
  color: #FF9CAC;  /* Vibrant coral pink for strings */
}

.language-cpp .token.number {
  color: #f78c6c;  /* Coral for numbers */
}

.language-cpp .token.preprocessor {
  color: #ff9cac;  /* Soft red for preprocessor directives */
}

.language-cpp .token.comment {
  color: #90d475;  /* Muted blue for comments */
  font-style: italic;
}



/* C Syntax Highlighting */
.language-c {
  color: #f8f8f2;  /* Base text color */
}

.language-c .token.keyword {
  color: #c792ea;  /* Purple for keywords */
}

.language-c .token.function {
  color: #d66880;
  font-weight: bold;  /* Light blue for functions */
}

.language-c .token.macro {
  color: #ff9cac;  /* Soft red for macros */
}

.language-c .token.string {
  color: #f3d369;  /* Mint green for strings */
}

.language-c .token.number {
  color: #f86081;  /* Coral for numbers */
}

.language-c .token.comment {
  color: #9edd8e;  /* Muted blue for comments */
  font-style: italic;
}

.language-c .token.type {
  color: #ffd700;  /* Gold for types */
}

/* C# Syntax Highlighting - Consolidated */
.language-csharp, 
.language-cs {
  color: #f8f8f2;  /* Base text color */
}

.language-csharp .token.keyword,
.language-cs .token.keyword {
  color: #c792ea;  /* Purple for keywords */
  font-weight: bold;
}

.language-csharp .token.function,
.language-cs .token.function {
  color: #82aaff;  /* Light blue for functions */
}

.language-csharp .token.string,
.language-cs .token.string {
  color: #a8e6cf;  /* Mint green for strings */
}

.language-csharp .token.number,
.language-cs .token.number {
  color: #f78c6c;  /* Coral for numbers */
}

.language-csharp .token.comment,
.language-cs .token.comment {
  color: #6272a4;  /* Muted blue for comments */
  font-style: italic;
}

.language-csharp .token.class-name,
.language-cs .token.class-name {
  color: #ffcb6b;  /* Golden for class names */
  font-weight: bold;
}

.language-csharp .token.namespace,
.language-cs .token.namespace {
  color: #ff9cac;  /* Soft red for namespaces */
}

.language-csharp .token.annotation,
.language-cs .token.annotation {
  color: #50fa7b;  /* Bright green for annotations */
}

.language-csharp .token.property,
.language-cs .token.property {
  color: #80cbc4;  /* Teal for properties */
}

.language-csharp .token.punctuation,
.language-cs .token.punctuation {
  color: #89ddff;  /* Light blue for punctuation */
}

.language-csharp .token.operator,
.language-cs .token.operator {
  color: #f78c6c;  /* Coral for operators */
}

.language-csharp .token.boolean,
.language-cs .token.boolean {
  color: #ff5874;  /* Pink for boolean values */
}

.language-csharp .token.builtin,
.language-cs .token.builtin {
  color: #82aaff;  /* Light blue for built-in types */
  font-style: italic;
}

.language-csharp .token.type,
.language-cs .token.type {
  color: #ffcb6b;  /* Golden for types */
}

.language-csharp .token.decorator,
.language-cs .token.decorator {
  color: #50fa7b;  /* Bright green for decorators/attributes */
  font-weight: bold;
}

/* Set base styles for C# code blocks */
code[class*="language-csharp"],
code[class*="language-cs"],
pre[class*="language-csharp"],
pre[class*="language-cs"] {
  color: #f8f8f2;
  background: none;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
}

/* Assembly Syntax Highlighting */
.language-asm,
.language-assembly {
  color: #f8f8f2;  /* Base text color */
}

.language-asm .token.instruction,
.language-assembly .token.instruction {
  color: #c792ea;  /* Purple for instructions */
}

.language-asm .token.register,
.language-assembly .token.register {
  color: #82aaff;  /* Light blue for registers */
}

.language-asm .token.label,
.language-assembly .token.label {
  color: #ffcb6b;  /* Golden for labels */
}

.language-asm .token.comment,
.language-assembly .token.comment {
  color: #6272a4;  /* Muted blue for comments */
  font-style: italic;
}

.language-asm .token.directive,
.language-assembly .token.directive {
  color: #ff9cac;  /* Soft red for directives */
}

.language-asm .token.number,
.language-assembly .token.number {
  color: #f78c6c;  /* Coral for numbers */
}

.language-asm .token.string,
.language-assembly .token.string {
  color: #a8e6cf;  /* Mint green for strings */
}

.language-asm .token.operator,
.language-assembly .token.operator {
  color: #89ddff;  /* Cyan for operators */
}

/* Common syntax elements for all languages */
.token.punctuation {
  color: #89ddff;  /* Cyan for punctuation */
}

.token.operator {
  color: #89ddff;  /* Cyan for operators */
}

.token.function-variable {
  color: #82aaff;  /* Light blue for function variables */
}

.token.important {
  color: #ff9cac;  /* Soft red for important elements */
  font-weight: bold;
}

.language-assembly .token.operator {
  color: #89ddff;  /* Cyan for operators */
}

/* XML Syntax Highlighting */
.language-xml {
  color: #f8f8f2;  /* Base text color */
}

.language-xml .token.tag {
  color: #c792ea;  /* Purple for tags */
}

.language-xml .token.attr-name {
  color: #82aaff;  /* Light blue for attribute names */
}

.language-xml .token.attr-value {
  color: #a8e6cf;  /* Mint green for attribute values */
}

.language-xml .token.string {
  color: #a8e6cf;  /* Mint green for strings */
}

.language-xml .token.comment {
  color: #6272a4;  /* Muted blue for comments */
  font-style: italic;
}

.language-xml .token.cdata {
  color: #ff9cac;  /* Soft red for CDATA sections */
}

.language-xml .token.prolog,
.language-xml .token.doctype {
  color: #6272a4;  /* Muted blue for document type declarations */
  font-style: italic;
}

.language-xml .token.namespace {
  color: #ffcb6b;  /* Golden for namespaces */
}

/* NASM/Assembly Syntax Highlighting - Obsidian Specific */
.language-nasm {
  color: #f8f8f2;  /* Base text color */
  background: rgba(30, 34, 51, 0.6);
  padding: 1em;
  border-radius: 6px;
  font-family: 'JetBrains Mono', monospace;
}

/* Match the exact token classes we see in the DOM */
.language-nasm .token.register-variable,
.language-nasm span[class*="register"] {
  color: #82aaff !important;  /* Light blue for registers */
}

.language-nasm .token.number,
.language-nasm span[class*="number"] {
  color: #f78c6c !important;  /* Coral for numbers */
}

.language-nasm .token.operator,
.language-nasm span[class*="operator"] {
  color: #89ddff !important;  /* Cyan for operators */
}

.language-nasm .token.comment,
.language-nasm span[class*="comment"] {
  color: #9edd8e !important;  /* Bright green for comments */
  font-style: italic;
  margin-left: 0.5em;
}

/* Target instructions like mov, syscall */
.language-nasm .token.instruction,
.language-nasm span[class*="instruction"] {
  color: #c792ea !important;  /* Purple for instructions */
}

/* Target labels */
.language-nasm .token.label {
  color: #ffcb6b !important;  /* Golden for labels */
  font-weight: 500;
}

/* Target directives like section, global */
.language-nasm .token.directive {
  color: #ff9cac !important;  /* Soft red for directives */
  font-weight: 500;
}

/* Target hex values */
.language-nasm span:contains("0x") {
  color: #f78c6c !important;  /* Coral for hex values */
}

/* Target the _asm block */
.language-nasm span:contains("_asm") {
  color: #c792ea !important;  /* Purple for asm keyword */
  font-weight: bold;
}

/* Code block container */
pre.language-nasm {
  background: rgba(30, 34, 51, 0.6) !important;
  padding: 0.5em !important;
  border-radius: 8px !important;
  border: 1px solid rgba(137, 221, 255, 0.2);
  margin: 1.5em 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Line numbers styling */
.language-nasm .line-numbers {
  color: #6272a4;
  border-right: 1px solid rgba(137, 221, 255, 0.2);
  padding-right: 1em;
  margin-right: 1em;
}

/* Hover effect on the code block */
pre.language-nasm:hover {
  border-color: rgba(137, 221, 255, 0.3);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
}

/* Language label */
div.el-pre:has(pre.language-nasm)::before {
  content: "NASM";
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  font-size: 0.9em;
  font-weight: 500;
  color: #c792ea;
  margin-bottom: 0.5em;
  display: block;
  letter-spacing: 0.5px;
}

/* Handle specific NASM syntax */
.language-nasm .token.section {
  color: #ff9cac !important;  /* Soft red for section declarations */
  font-weight: 500;
}

.language-nasm .token.macro {
  color: #ffcb6b !important;  /* Golden for macros */
  font-style: italic;
}

/* Ensure proper line height and spacing */
.language-nasm code {
  line-height: 1.5 !important;
  display: block !important;
}

/* Language Labels - Consolidated */
div.el-pre:has(pre.language-powershell)::before { content: "POWERSHELL"; }
div.el-pre:has(pre.language-python)::before { content: "PYTHON"; }
div.el-pre:has(pre.language-javascript)::before,
div.el-pre:has(pre.language-js)::before { content: "JAVASCRIPT"; }
div.el-pre:has(pre.language-bash)::before { content: "BASH"; }
div.el-pre:has(pre.language-css)::before { content: "CSS"; }
div.el-pre:has(pre.language-html)::before { content: "HTML"; }
div.el-pre:has(pre.language-json)::before { content: "JSON"; }
div.el-pre:has(pre.language-yaml)::before { content: "YAML"; }
div.el-pre:has(pre.language-sql)::before { content: "SQL"; }
div.el-pre:has(pre.language-cpp)::before { content: "C++"; }
div.el-pre:has(pre.language-c)::before { content: "C"; }
div.el-pre:has(pre.language-csharp)::before,
div.el-pre:has(pre.language-cs)::before { content: "C#"; }
div.el-pre:has(pre.language-asm)::before,
div.el-pre:has(pre.language-assembly)::before { content: "ASSEMBLY"; }
div.el-pre:has(pre.language-nasm)::before { content: "NASM"; }
div.el-pre:has(pre.language-xml)::before { content: "XML"; }

/* Hide language indicators on non-code elements */
div.el-pre:not(:has(pre[class*="language-"]))::before {
  content: none !important;
}

.el-pre.mod-frontmatter::before {
  display: none !important;
}

/********************************************************************************************/

/* Remove external link icon */
.external-link {
  background-image: none !important;
  padding-right: 0 !important;
  background: none !important;
}

/* Additional selectors to ensure icon removal */
.markdown-preview-view .external-link {
  background-image: none !important;
  padding-right: 0 !important;
  background: none !important;
}

/* Override any background positioning */
.external-link::after {
  display: none !important;
  background: none !important;
}

/* Left Column Container Alignment */
.site-body-left-column {
  width: clamp(200px, 20vw, 300px);
  min-width: 200px;
  padding: 2rem clamp(0.5rem, 1vw, 1rem);
  height: 100vh;
  position: sticky;
  top: 0;
}

/* Tree Logo Container */
.site-body-left-column img {
  width: clamp(120px, 15vw, 180px);
  height: auto;
  margin: 0 auto 1.5rem;
  display: block;
}

/* Site Title Alignment */
.site-body-left-column-site-name {
  text-align: center;
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  padding: 0.5em 0.5em 1.5em 0.5em;
  margin-top: -0.5em;
}

/* Search Box Container */
.search-container {
  width: 100%;
  max-width: clamp(180px, 18vw, 260px);
  margin: 1rem auto;
}

/****************************Navigation Menu *************************************/

/* Left column sizing */
.published-container.is-readable-line-width .site-body-left-column {
  flex-basis: clamp(var(--left-col-min), calc((100vw - var(--page-width)) / 2), var(--left-col-max)) !important;
  min-width: var(--left-col-min) !important;
  max-width: var(--left-col-max) !important;
}

/* Reset default Obsidian navigation styles */
.nav-view-outer .tree-item-self:not(.mod-collapsible),
.nav-view-outer .tree-item-children .tree-item-children .tree-item-children {
  border-left: none !important;
}

/* Base navigation container */
.tree-item-children {
  position: relative;
  margin-left: 0.5rem;
  border-left: 2px solid transparent;
  transition: all 0.2s ease;
}

/* Tree item base styles */
.tree-item {
  position: relative;
  margin: 2px 0;
}

/* Navigation item styling */
.tree-item-self {
  font-size: clamp(0.875rem, 1vw, 1rem);
  display: flex;
  align-items: center;
  padding: 4px clamp(4px, 0.5vw, 8px);
  border-radius: 4px;
  transition: all 0.2s ease;
  position: relative;
  cursor: pointer;
}

/* Remove any existing borders */
.tree-item-self::before,
.tree-item-children::before,
.tree-item::before {
  display: none !important;
}

/* Top-level folder styling */
.tree-item > .tree-item-self.mod-collapsible {
  color: #c792ea; /* Purple for parent folders */
  font-weight: 500;
}

/* Second-level folder styling */
.tree-item > .tree-item-children > .tree-item > .tree-item-self.mod-collapsible {
  color: #89ddff; /* Blue for second level folders */
  font-weight: 500;
}

/* Third-level folder styling */
.tree-item > .tree-item-children > .tree-item > .tree-item-children > .tree-item > .tree-item-self.mod-collapsible {
  color: #6dc6ff; /* Lighter blue for third level folders */
  font-weight: 500;
}

/* Article styling (non-collapsible items) */
.tree-item-self:not(.mod-collapsible) {
  color: #a8b1bf; /* Muted color for articles */
  padding-left: 12px; /* Indent articles slightly */
}

/* Hover effects */
.tree-item-self:hover {
  background: rgba(137, 221, 255, 0.1);
  transform: translateX(2px);
}

/* Active state */
.tree-item-self.is-active {
  background: rgba(137, 221, 255, 0.15);
  color: #ffffff !important;
  font-weight: 600;
}

/* Left border coloring for hierarchy */
.tree-item > .tree-item-children {
  border-left-color: rgba(199, 146, 234, 0.3); /* Purple tint */
}

.tree-item > .tree-item-children > .tree-item > .tree-item-children {
  border-left-color: rgba(137, 221, 255, 0.3); /* Blue tint */
}

.tree-item > .tree-item-children > .tree-item > .tree-item-children > .tree-item > .tree-item-children {
  border-left-color: rgba(109, 198, 255, 0.3); /* Lighter blue tint */
}

/* Spacing adjustments */
.tree-item-children {
  padding-left: 0.75rem;
}

/* Remove any animation that might cause jumping */
.tree-item,
.tree-item-self,
.tree-item-children {
  animation: none !important;
}

/* Ensure stable positioning */
.nav-view-outer {
  position: relative;
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

/* Fix for any icon-related spacing issues */
.tree-item-inner {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Ensure text doesn't wrap awkwardly */
.tree-item-inner span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Add subtle folder indicators */
.tree-item-self.mod-collapsible::before {
  content: '›';
  display: inline-block;
  margin-right: 4px;
  transition: transform 0.2s ease;
}

.tree-item-self.mod-collapsible.is-collapsed::before {
  transform: rotate(0deg);
}

.tree-item-self.mod-collapsible:not(.is-collapsed)::before {
  transform: rotate(90deg);
}

.nav-view-outer .tree-item-self:not(.mod-collapsible) {
  border-left: 0px solid !important;
}

.nav-view-outer .tree-item-children .tree-item-children .tree-item-children {
  border-left: 0px solid !important;
}

.nav-view-outer .nav-view > .tree-item > .tree-item-children > .tree-item > .tree-item-self {
  color: #c792ea !important;
  font-weight: bold !important;
  border: none !important;
}

/******************END NAV***************************************************************************/

.site-body-left-column-site-name {
  transition: all 0.3s ease;
  padding: 0.5em 0.5em 1.5em 0.5em; 
  margin-top: -0.5em;  
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
}

.site-body-left-column-site-name:hover {
  background: linear-gradient(120deg, #89ddff, #c792ea);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transform: scale(1.05);
}

.site-body-left-column-site-name {
  background: linear-gradient(120deg, #c792ea, #89ddff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.2;
  font-size: 1.5em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  animation: glow 1.5s ease-in-out infinite alternate;
  padding: 0.5em 0;
  cursor: pointer;
}

@keyframes glow {
  from {
    text-shadow: 0 0 10px rgba(199, 146, 234, 0.3),
                 0 0 20px rgba(137, 221, 255, 0.3);
  }
  to {
    text-shadow: 0 0 15px rgba(199, 146, 234, 0.5),
                 0 0 25px rgba(137, 221, 255, 0.5);
  }
}

.search-bar {
  color: #ffffff !important;
  font-weight: 600;  /* Dark text for better contrast */
  background-color: rgba(199, 146, 234, 0.25);  /* Light purple background */
  border-radius: 8px;
  padding: 0.7em 1em;
  width: 100%;
  border: 1px solid rgba(199, 146, 234, 0.3);
  transition: all 0.2s ease;
}

.search-bar::placeholder {
  color: rgba(30, 34, 51, 0.6);  /* Darker placeholder text */
}

.search-bar:focus {
  background-color: rgba(199, 146, 234, 0.25);
  border-color: rgba(199, 146, 234, 0.5);
  box-shadow: 0 0 0 2px rgba(199, 146, 234, 0.2);
  outline: none;
}

input[type="search"] {
  color: #ffffff !important;
  font-weight: 600;
  background-color: rgba(199, 146, 234, 0.15);
  border: 1px solid rgba(199, 146, 234, 0.3);
  border-radius: 8px;
  padding: 0.7em 1em;
}

input[type="search"]::placeholder {
  color: rgba(30, 34, 51, 0.6);
}

input[type="search"]:focus {
  background-color: rgba(199, 146, 234, 0.25);
  border-color: rgba(199, 146, 234, 0.5);
  box-shadow: 0 0 0 2px rgba(199, 146, 234, 0.2);
  outline: none;
}

/* Search Results Hover Effect */
.suggestion-item {
  transition: all 0.2s ease;
  border-radius: 4px;
  margin: 2px 0;
}

.suggestion-item:hover {
  background: rgba(199, 146, 234, 0.15);
  transform: translateX(4px);
}

.suggestion-content {
  padding: 8px 12px;
  border-radius: 4px;
}

.suggestion-item.is-selected {
  background: rgba(199, 146, 234, 0.25);
}

/* Override any background positioning */
.external-link::after {
  display: none !important;
  background: none !important;
}

/* Custom HR styling with separated elements */
.markdown-rendered hr {
  border: none;
  position: relative;
  margin: 1em 0;
  height: 40px;
  background: transparent;
}

.markdown-rendered hr::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(
    90deg,
    rgba(137, 221, 255, 0.1) 0%,
    rgba(199, 146, 234, 0.4) 30%,
    rgba(137, 221, 255, 0.8) 50%,
    rgba(199, 146, 234, 0.4) 70%,
    rgba(137, 221, 255, 0.1) 100%
  );
}

.markdown-rendered hr::before {
  content: "§";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #c792ea;
  background: #222537;
  padding: 4px 16px;
  font-size: 1.4em;
  z-index: 1;
  height: 32px;
  line-height: 32px;
  border-radius: 4px;
  box-shadow: 
    0 0 10px rgba(30, 34, 51, 0.5),
    0 0 20px rgba(30, 34, 51, 0.3);
}

/**********************************************************/

/* Blockquote styling */
.markdown-rendered blockquote {
  border-left: 2px solid rgba(255, 255, 255, 0.1);
  text-align: left;
  padding: 1em 0 1em 2em;
  position: relative;
  background: rgba(255, 255, 255, 0.01);
  margin: 2em 0 1.5em 1em;
  font-size: 1em;
  border-radius: 2px;
  max-width: 95%;
}

.markdown-rendered blockquote p {
  margin: 0;
  line-height: 1.6;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.8);
}

/* Add a subtle indent to any text after the blockquote */
.markdown-rendered blockquote + p {
  margin-top: 2em;
}

/*******************************************Home Page Cards********************************************/

/* Grid Layout */
.re-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

/* Updated Card Layout */
.re-card {
  display: flex;
  flex-direction: column;
  background: rgba(30, 34, 51, 0.4);
  border: 1px solid rgba(199, 146, 234, 0.15);
  border-radius: 12px;
  padding: 1.8rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  height: 100%; /* Ensure all cards are same height */
}

.re-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(137, 221, 255, 0.1), rgba(199, 146, 234, 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 12px;
  pointer-events: none;
  z-index: -1; /* Move it behind the content */
}

.re-card:hover::before {
  opacity: 1;
}

/* Ensure content stays above the hover effect */
.re-card-title,
.re-card-description,
.re-article-list {
  position: relative;
  z-index: 2;
}

.re-card:hover::before {
  opacity: 1;
}

.re-card:hover {
  transform: translateY(-4px);
  border-color: rgba(199, 146, 234, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* Center the card title. */
.re-card-title {
  text-align: center;
  color: #c792ea;
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 1rem;
  letter-spacing: 0.5px;
}

/* Center the card description */
.re-card-description {
  text-align: center;
  color: #a8b1bf;
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 1rem 0 2rem 0;
  flex-grow: 1;
}

/* Article list container */
.re-article-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: auto; /* Push to bottom of card */
}


.re-article-item {
  display: flex;
  justify-content: center; /* Center the text */
  align-items: center;
  padding: 1rem 1.2rem;
  background: rgba(137, 221, 255, 0.05);
  border: 1px solid rgba(137, 221, 255, 0.1);
  border-radius: 8px;
  transition: all 0.2s ease;
  text-decoration: none;
  width: 100%; /* Full width */
}

/* Article item hover */
.re-article-item:hover {
  background: rgba(137, 221, 255, 0.1);
  border-color: rgba(137, 221, 255, 0.2);
  transform: translateX(4px);
}

.re-article-title {
  color: #89ddff;
  font-size: 0.95rem;
  font-weight: 500;
}

.re-article-date {
  color: #c792ea;
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.3rem 0.8rem;
  background: rgba(199, 146, 234, 0.1);
  border-radius: 12px;
}

/* Coming soon item */
.re-article-item.re-coming-soon {
  color: #6d9cc7;
  font-style: italic;
  justify-content: center;
  background: rgba(108, 103, 131, 0.1);
  border: 1px solid rgba(108, 103, 131, 0.2);
}

.re-article-item.re-coming-soon:hover {
  transform: none;
  background: rgba(108, 103, 131, 0.15);
}

/* Recent Content Section */
.re-recent {
  background: rgba(30, 34, 51, 0.4);
  border: 1px solid rgba(199, 146, 234, 0.15);
  border-radius: 12px;
  padding: 1.8rem;
  margin-top: 2.5rem;
}

.re-recent-title {
  color: #c792ea;
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  letter-spacing: 0.5px;
}

/* Page Title Styling */
.markdown-rendered h1 {
  background: linear-gradient(90deg, #c792ea, #89ddff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

/*************************************************************************/

/* All Articles main title */
.re-all-articles-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: #c792ea;
  font-size: 1.4rem;
  font-weight: 600;
  margin: 1.5rem 0;
}

/* Category container */
.re-category {
  margin-bottom: 1rem;
  border-radius: 12px;
  transition: all 0.3s ease;
  background: rgba(30, 34, 51, 0.4);  /* Darker background */
}

/* Category toggle button */
.re-category-toggle {
  width: 100%;
  padding: 1rem 1.2rem;
  background: rgba(30, 34, 51, 0.4);  /* Match the theme background */
  border: 1px solid rgba(137, 221, 255, 0.1);
  border-radius: 8px;
  color: #89ddff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1rem;
}

.re-category-toggle:hover {
  background: rgba(137, 221, 255, 0.05);
  border-color: rgba(137, 221, 255, 0.2);
  transform: translateX(4px);
}

/* Arrow indicator */
.re-category-arrow {
  transition: transform 0.3s ease;
  opacity: 0.7;
  font-size: 0.8rem;
  margin-left: 0.5rem;
}

.re-category.expanded .re-category-arrow {
  transform: rotate(180deg);
}

/* Content area */
.re-category-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  margin: 0 0.5rem;
}

/* Expanded state */
.re-category.expanded .re-category-content {
  max-height: 1000px;
  opacity: 1;
  margin-top: 0.5rem;
}

/* Article links */
.re-category-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 1rem;
  margin: 0.4rem 0;
  background: rgba(30, 34, 51, 0.4);
  border: 1px solid rgba(137, 221, 255, 0.1);
  border-radius: 8px;
  color: #89ddff;
  text-decoration: none;
  transition: all 0.2s ease;
}

/* Article link hover effect */
.re-category-link:hover {
  background: rgba(137, 221, 255, 0.05);
  border-color: rgba(137, 221, 255, 0.2);
}

/* Date badge */
.re-article-date {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 500;
  margin-left: auto;
  white-space: nowrap;
  transition: all 0.2s ease;
  background: rgba(199, 146, 234, 0.1);
  color: #c792ea;
}

/* Coming soon styling */
.re-coming-soon {
  display: block;
  padding: 1rem;
  text-align: center;
  color: #6d9cc7;
  font-style: italic;
  background: rgba(108, 103, 131, 0.1);
  border: 1px solid rgba(108, 103, 131, 0.2);
  border-radius: 8px;
  margin: 0.5rem 0;
}

/* Count badge styling */
.re-category-count {
  font-size: 0.9rem;
  color: #a8b1bf;
  margin-left: 0.5rem;
  opacity: 0.8;
}

/* Latest badge */
[class*="Latest"] {
  background: rgba(199, 146, 234, 0.1);
  color: #c792ea;
  padding: 0.3rem 0.8rem;
  border-radius: 12px;
  font-size: 0.85rem;
}

.re-category-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  margin: 0 0.5rem;
}

/* Article links default state */
.re-category-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 1rem;
  margin: 0.4rem 0;
  background: rgba(30, 34, 51, 0.4);  /* Dark background */
  border: 1px solid rgba(137, 221, 255, 0.1);
  border-radius: 8px;
  color: #89ddff;
  text-decoration: none;
  transition: all 0.2s ease;
}

/* Count badge styling */
.re-category-count {
  background: transparent;  /* Remove any background */
  color: #a8b1bf;
  font-size: 0.9rem;
  margin-left: 0.5rem;
  opacity: 0.8;
}

/* Ensure text colors remain visible */
.re-category-name, 
.re-category-title {
  color: #89ddff;
}

/* Override theme button styles */
button.re-category-toggle {
  background-color: rgba(30, 34, 51, 0.4) !important; /* Force override theme */
  background: rgba(30, 34, 51, 0.4) !important; /* Double property for maximum compatibility */
  color: #89ddff !important;
  box-shadow: none !important;
}

/* Hover state */
button.re-category-toggle:hover {
  background-color: rgba(137, 221, 255, 0.05) !important;
  background: rgba(137, 221, 255, 0.05) !important;
  border-color: rgba(137, 221, 255, 0.2) !important;
  transform: translateX(4px);
}

/* Not clickable icon override */
button.re-category-toggle:not(.clickable-icon) {
  background-color: rgba(30, 34, 51, 0.4) !important;
  background: rgba(30, 34, 51, 0.4) !important;
}

/* Mobile-specific overrides */
@media (max-width: 767px) {
  /* Make links more tappable */
  .re-category-link,
  .re-article-item,
  .re-category-toggle {
    padding: 12px 16px; /* Increased padding for better touch targets */
    min-height: 44px; /* Minimum touch target size for iOS */
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(137, 221, 255, 0.1); /* Add tap highlight */
  }

  /* Remove hover effects that might interfere with touch */
  .re-category-link:hover,
  .re-article-item:hover,
  .re-category-toggle:hover {
    transform: none;
  }

  /* Ensure links are properly clickable */
  .re-category-link,
  .re-article-item {
    display: flex;
    align-items: center;
    width: 100%;
    text-decoration: none;
    position: relative;
    z-index: 1; /* Ensure it's clickable */
  }

  /* Make sure the entire button area is clickable */
  .re-category-toggle {
    width: 100%;
    text-align: left;
    position: relative;
    z-index: 2;
  }

  /* Adjust date badge position for better touch */
  .re-article-date {
    margin-left: 8px;
    padding: 4px 8px;
  }

  /* Fix any pointer-events issues */
  .re-category-content {
    pointer-events: auto;
  }

  /* Ensure content is clickable */
  .re-category.expanded .re-category-content {
    pointer-events: auto;
    position: relative;
    z-index: 1;
  }
}

  /* Ensure proper click area */
  .re-category-link,
  .re-article-item {
      display: block;
      width: 100%;
      position: relative;
      z-index: 1;
      justify-content: center;
      text-align: center;
  }

  /* Fix pointer events for content */
  .re-category-content {
      pointer-events: auto !important;
  }

  /* Ensure links work within content areas */
  .re-category.expanded .re-category-content {
      pointer-events: auto !important;
  }

  /* Remove transform animations that might interfere with touch */
  .re-category-link:hover,
  .re-article-item:hover,
  .re-category-toggle:hover {
      transform: none !important;
  }

  /* Add visible feedback for touch */
  .re-category-link:active,
  .re-article-item:active,
  .re-category-toggle:active {
      background-color: rgba(137, 221, 255, 0.1);
  }
  
  /* Fix any scrolling issues */
  .publish-renderer {
      -webkit-overflow-scrolling: touch;
  }

/* Latest Content Grid Layout */
.latest-content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

/* Category Styling */
.latest-content-category {
  background: rgba(30, 34, 51, 0.4);
  border: 1px solid rgba(199, 146, 234, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.latest-content-category:hover {
  border-color: rgba(199, 146, 234, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Category Title */
.latest-category-title {
  color: #c792ea;
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(199, 146, 234, 0.2);
}

/* Content Items Container */
.latest-content-items {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/* Individual Content Item */
.latest-content-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 1rem;
  background: rgba(137, 221, 255, 0.05);
  border: 1px solid rgba(137, 221, 255, 0.1);
  border-radius: 8px;
  transition: all 0.2s ease;
  text-decoration: none;
}

.latest-content-item:hover {
  background: rgba(137, 221, 255, 0.1);
  border-color: rgba(137, 221, 255, 0.2);
  transform: translateX(4px);
}

/* Content Title */
.latest-content-title {
  color: #89ddff;
  font-size: 0.95rem;
  font-weight: 500;
}

/* Meta Information */
.latest-content-meta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

/* Tags and Dates */
.latest-content-tag {
  background: rgba(158, 227, 125, 0.1);
  color: #9ee37d;
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
}

.latest-content-date {
  color: #a8b1bf;
  font-size: 0.85rem;
}

/* Featured Link Styling */
.re-article-item.re-featured {
  background: linear-gradient(
    90deg,
    rgba(199, 146, 234, 0.1),
    rgba(137, 221, 255, 0.1)
  );
  border: 1px solid rgba(199, 146, 234, 0.2);
}

.re-article-item.re-featured:hover {
  background: linear-gradient(
    90deg,
    rgba(199, 146, 234, 0.15),
    rgba(137, 221, 255, 0.15)
  );
  border-color: rgba(199, 146, 234, 0.3);
}

.re-article-item.re-featured .re-article-title {
  font-weight: 600;
  background: linear-gradient(90deg, #c792ea, #89ddff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Section Divider */
.section-divider {
  text-align: center;
  font-size: 1.5em;
  color: #c792ea;
  margin: 2em 0;
  position: relative;
}

.section-divider::before,
.section-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 45%;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(137, 221, 255, 0.1) 0%,
    rgba(199, 146, 234, 0.4) 100%
  );
}

.section-divider::before {
  left: 0;
}

.section-divider::after {
  right: 0;
}

/* Enhanced Card Animations */
.re-card {
  transform-origin: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.re-card:hover {
  transform: translateY(-4px) scale(1.01);
}

/* Card Content Fade In */
.re-card-description,
.re-article-list {
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

.re-card:hover .re-card-description,
.re-card:hover .re-article-list {
  opacity: 1;
}

/**************************HOME PAGE *******************************************************/

/* Home page specific h1 styling */
.markdown-rendered h1:has(+ p + .re-grid),
.home-title {
    font-size: 2.8em;
    text-align: center;
    margin-bottom: 1em;
    padding-bottom: 0.5em;
    background: linear-gradient(120deg, #c792ea, #89ddff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: glow 1.5s ease-in-out infinite alternate;
}

/* Glow animation */
@keyframes glow {
    from {
        text-shadow: 0 0 10px rgba(199, 146, 234, 0.3),
                     0 0 20px rgba(137, 221, 255, 0.3);
    }
    to {
        text-shadow: 0 0 15px rgba(199, 146, 234, 0.5),
                     0 0 25px rgba(137, 221, 255, 0.5);
    }
}

/* Welcome Text Styling - Scoped to home page */
.markdown-rendered p:has(+ .re-grid) {
  text-align: center;
  font-size: 1.1em;
  color: #a8b1bf;
  max-width: 800px;
  margin: 0 auto 3em auto;
  line-height: 1.6;
}

/* Alternative welcome text styling if :has() is not supported */
.home-welcome {
  text-align: center;
  font-size: 1.1em;
  color: #a8b1bf;
  max-width: 800px;
  margin: 0 auto 3em auto;
  line-height: 1.6;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .latest-content-grid {
    grid-template-columns: 1fr;
  }
  
  .latest-content-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .latest-content-meta {
    width: 100%;
    justify-content: flex-end;
  }
}

/* Latest Content Compact Style */
.latest-content-compact {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  max-width: 800px;
  margin: 2rem auto;
}

.latest-content-compact .latest-content-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.2rem;
  background: rgba(30, 34, 51, 0.4);
  border: 1px solid rgba(137, 221, 255, 0.1);
  border-radius: 8px;
  transition: all 0.2s ease;
  text-decoration: none;
}

.latest-content-compact .latest-content-item:hover {
  background: rgba(137, 221, 255, 0.05);
  border-color: rgba(137, 221, 255, 0.2);
  transform: translateX(4px);
}

.latest-content-compact .latest-content-title {
  color: #89ddff;
  font-size: 1rem;
  font-weight: 500;
}

/* All Articles Section */
.re-category {
  margin-bottom: 1rem;
  background: rgba(30, 34, 51, 0.2);
  border-radius: 8px;
  overflow: hidden;
}

.re-category-toggle {
  width: 100%;
  padding: 1rem 1.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(30, 34, 51, 0.4);
  border: 1px solid rgba(137, 221, 255, 0.1);
  border-radius: 8px;
  color: #89ddff;
  cursor: pointer;
  transition: all 0.2s ease;
}

.re-category-toggle:hover {
  background: rgba(137, 221, 255, 0.05);
  border-color: rgba(137, 221, 255, 0.2);
}

.re-category-count {
  color: #a8b1bf;
  font-size: 0.9rem;
  margin: 0 1rem;
}

.re-category-arrow {
  font-size: 0.8rem;
  transition: transform 0.3s ease;
}

.re-category.expanded .re-category-arrow {
  transform: rotate(180deg);
}

.re-category-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.3s ease-in-out;
  padding: 0 0.5rem;
}

.re-category.expanded .re-category-content {
  max-height: 1000px;
  opacity: 1;
  padding: 0.5rem;
}

.re-category-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 1rem;
  margin: 0.4rem 0;
  background: rgba(30, 34, 51, 0.4);
  border: 1px solid rgba(137, 221, 255, 0.1);
  border-radius: 8px;
  color: #89ddff;
  text-decoration: none;
  transition: all 0.2s ease;
}

.re-category-link:hover {
  background: rgba(137, 221, 255, 0.05);
  border-color: rgba(137, 221, 255, 0.2);
  transform: translateX(4px);
}

/* Subcategory Styling */
.re-subcategory {
  color: #c792ea;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.8rem 0.5rem 0.4rem 0.5rem;
  margin-top: 0.5rem;
  border-bottom: 1px solid rgba(199, 146, 234, 0.1);
}

/* First subcategory shouldn't have top margin */
.re-category-content .re-subcategory:first-child {
  margin-top: 0;
}

/* Adjust spacing for links following subcategories */
.re-subcategory + .re-category-link {
  margin-top: 0.5rem;
}

/* Enhanced category toggle */
.re-category-toggle {
  background: rgba(30, 34, 51, 0.6);
  border-color: rgba(199, 146, 234, 0.2);
}

.re-category-toggle:hover {
  background: rgba(199, 146, 234, 0.1);
  border-color: rgba(199, 146, 234, 0.3);
}

/* Latest Content Grid Layout */
.latest-content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

/* Latest Content Card */
.latest-content-card {
  display: flex;
  flex-direction: column;
  background: rgba(30, 34, 51, 0.4);
  border: 1px solid rgba(137, 221, 255, 0.1);
  border-radius: 12px;
  padding: 1.5rem;
  text-decoration: none !important;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Gradient overlay for hover effect */
.latest-content-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(137, 221, 255, 0.1), rgba(199, 146, 234, 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 12px;
  pointer-events: none;
}

.latest-content-card:hover {
  transform: translateY(-4px);
  border-color: rgba(199, 146, 234, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  text-decoration: none !important; 
}

.latest-content-card:hover::before {
  opacity: 1;
}

/* Card Header */
.latest-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

/* Ensure content stays above the gradient */
.latest-card-header,
.latest-card-description {
    position: relative;
    z-index: 2;
}

/* Card Description */
.latest-card-description {
  color: #a8b1bf;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-top: auto;
  margin-bottom: 2rem; /* Add space for the date badge */
  min-height: 3rem; /* Ensure consistent height for description */
}

.latest-card-category {
  background: rgba(199, 146, 234, 0.1);
  color: #c792ea;
  padding: 0.3rem 0.8rem;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  margin-left: 1rem;
}

/* Card Description */
.latest-card-description {
  color: #a8b1bf;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-top: auto;
}

/* Date Badge */
.latest-card-date {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  background: rgba(199, 146, 234, 0.1);
  border-radius: 12px;
  color: #c792ea;
  font-size: 0.85rem;
  font-weight: 500;
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: 2;
}

/* Responsive Design */
@media (max-width: 768px) {
  .latest-content-grid {
      grid-template-columns: 1fr;
  }
  
  .latest-content-card {
      margin-bottom: 1rem;
  }
}

/* Enhanced All Articles Section */
.all-articles-section {
  margin: 2rem 0;
}

/* Category Container */
.re-category {
  background: rgba(30, 34, 51, 0.4);
  border: 1px solid rgba(137, 221, 255, 0.1);
  border-radius: 12px;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
  overflow: hidden;
}

.re-category:hover {
  border-color: rgba(137, 221, 255, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Category Toggle Button */
.re-category-toggle {
  width: 100%;
  padding: 1.2rem;
  background: rgba(30, 34, 51, 0.6);
  border: none;
  color: #89ddff;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1.1rem;
  font-weight: 500;
}

/* Category Count Badge */
.re-category-count {
  margin-left: auto;
  padding: 0.3rem 0.8rem;
  background: rgba(199, 146, 234, 0.1);
  border-radius: 12px;
  color: #c792ea;
  font-size: 0.85rem;
  font-weight: 500;
}

/* Expand/Collapse Arrow */
.re-category-arrow {
  margin-left: 12px;
  color: #89ddff;
  transition: transform 0.3s ease;
  opacity: 0.7;
  width: 20px;
  height: 20px;
}

.re-category.expanded .re-category-arrow {
  transform: rotate(180deg);
}

/* Category Content */
.re-category-content {
  padding: 0 1.2rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.re-category.expanded .re-category-content {
  max-height: 1000px;
  opacity: 1;
  padding: 1.2rem;
}

/* Article Links */
.re-category-link {
  display: flex;
  align-items: center;
  padding: 0.8rem 1rem;
  margin: 0.5rem 0;
  background: rgba(137, 221, 255, 0.05);
  border: 1px solid rgba(137, 221, 255, 0.1);
  border-radius: 8px;
  color: #89ddff;
  text-decoration: none;
  transition: all 0.2s ease;
}

.re-category-link:hover {
  background: rgba(137, 221, 255, 0.1);
  border-color: rgba(137, 221, 255, 0.2);
  transform: translateX(4px);
}

/* Date Badge */
.re-article-date {
  margin-left: auto;
  padding: 0.3rem 0.8rem;
  background: rgba(199, 146, 234, 0.1);
  border-radius: 12px;
  color: #c792ea;
  font-size: 0.85rem;
  font-weight: 500;
}

/* Coming Soon Section */
.re-category[data-section="coming-soon"] {
  opacity: 0.7;
}

.re-category[data-section="coming-soon"] .re-category-toggle {
  cursor: default;
}

/* Responsive Design */
@media (max-width: 768px) {
  .re-category-toggle {
    padding: 1rem;
    font-size: 1rem;
  }
  
  .re-category-content {
    padding: 0 1rem;
  }
  
  .re-category.expanded .re-category-content {
    padding: 1rem;
  }
  
  .re-category-link {
    padding: 0.7rem;
  }
}

/* Category Icons */
.re-category-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 12px;
}

.re-category-icon svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/******************************************* All Articles Categories ************************************/

/* Category-specific icon colors */
.re-category[data-section="malware-lab"] .re-category-icon {
  color: #9ee37d;  /* Bright green for lab */
}

.re-category[data-section="core-fundamentals"] .re-category-icon {
  color: #89ddff;  /* Cyan blue for fundamentals */
}

.re-category[data-section="dynamic-analysis"] .re-category-icon {
  color: #c792ea;  /* Purple for analysis */
}

.re-category[data-section="windows-internals"] .re-category-icon {
  color: #82aaff;  /* Light blue for Windows */
}

.re-category[data-section="exploit-research"] .re-category-icon {
  color: #ff9cac;  /* Soft red for exploits */
}

/* Enhanced hover effects */
.re-category-toggle:hover .re-category-icon {
  filter: brightness(1.2);
  transform: scale(1.05);
  transition: all 0.2s ease;
}

/* Hover effects specific to Malware Lab section */
.re-category[data-section="malware-lab"] .re-category-toggle:hover {
  background: rgba(158, 227, 125, 0.1);
  border-color: rgba(158, 227, 125, 0.2);
}

/* Category link styling for Malware Lab */
.re-category[data-section="malware-lab"] .re-category-link:hover {
  background: rgba(158, 227, 125, 0.05);
  border-color: rgba(158, 227, 125, 0.2);
}

/* Ensure proper spacing */
.re-category[data-section="malware-lab"] {
  margin-bottom: 1rem;
}

/* Hover effects */
.re-category-toggle:hover .re-category-icon {
  transform: scale(1.1);
  transition: transform 0.2s ease;
}

/* Override default Obsidian icons */
.nav-folder-title-icon,
.nav-file-title-icon,
.tree-item-icon,
.clickable-icon,
.nav-file-icon {
    display: none !important;
}

/* Ensure our custom icons are shown */
.re-category-icon {
    display: inline-flex !important;
}

/* Fix any default icon padding */
.nav-folder-title,
.nav-file-title {
    padding-left: 0 !important;
}

/* Remove any default icon backgrounds */
.nav-folder-title[data-path],
.nav-file-title[data-path] {
    background-image: none !important;
}

/* Section Container */
.content-section {
  margin: 2rem 0;
}

/* Section Headings */
.content-section h2.section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(137, 221, 255, 0.1);
  background: linear-gradient(135deg, #c792ea, #89ddff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Section Icons */
.content-section h2.section-heading::before {
  content: '';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, rgba(199, 146, 234, 0.1), rgba(137, 221, 255, 0.1));
  border-radius: 8px;
  padding: 6px;
  margin-right: 12px;
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
}

/* Latest Content Icon - Updated SVG */
#latest-content h2.section-heading::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2389ddff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E");
  opacity: 0.9;
  transition: all 0.3s ease;
}

/* All Articles Icon */
.content-section:has(.all-articles-section) h2.section-heading::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c792ea' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/%3E%3Cline x1='8' y1='7' x2='16' y2='7'/%3E%3Cline x1='8' y1='12' x2='16' y2='12'/%3E%3Cline x1='8' y1='17' x2='12' y2='17'/%3E%3C/svg%3E");
}

/* Hover Effects */

#latest-content h2.section-heading:hover::before {
  transform: scale(1.05) rotate(15deg);
  opacity: 1;
}

.content-section h2.section-heading::before {
  transition: transform 0.2s ease;
}

.content-section h2.section-heading:hover::before {
  transform: scale(1.05);
}

.content-section h2.section-heading:hover {
  text-shadow: 0 0 20px rgba(199, 146, 234, 0.3);
  transition: text-shadow 0.2s ease;
}

/*************************** Gr00ts Homepage Safari Support **************************************/

/* Complete Safari-specific CSS */
@supports (-webkit-touch-callout: none) {
  /* Base styles for all interactive elements */
  .re-card,
  .latest-content-card,
  .re-article-item {
      -webkit-tap-highlight-color: rgba(137, 221, 255, 0.15) !important;
      -webkit-touch-callout: default !important;
      -webkit-user-select: auto !important;
  }

  /* Direct link styling (for article items) */
  .re-article-item {
      position: relative !important;
      display: block !important;
      width: 100% !important;
      min-height: 54px !important;
      margin: 0.5rem 0 !important;
      background: rgba(30, 34, 51, 0.4) !important;
      border: 1px solid rgba(137, 221, 255, 0.1) !important;
      border-radius: 8px !important;
      pointer-events: auto !important;
  }

  /* Style for links within article items */
  .re-article-item a {
      display: block !important;
      width: 100% !important;
      height: 100% !important;
      padding: 1rem !important;
      color: #89ddff !important;
      text-decoration: none !important;
      pointer-events: auto !important;
  }

  /* Latest content card styling */
  .latest-content-card {
      position: relative !important;
      display: block !important;
      width: 100% !important;
      padding: 0 !important;
      margin: 0.5rem 0 !important;
      background: rgba(30, 34, 51, 0.4) !important;
      border: 1px solid rgba(137, 221, 255, 0.1) !important;
      border-radius: 12px !important;
      overflow: hidden !important;
      text-decoration: none !important;
  }

  /* Container for latest content card elements */
  .latest-card-header,
  .latest-card-description {
      padding: 1rem 1.5rem !important;
      pointer-events: none !important;
  }

  .latest-card-header {
      padding-bottom: 0.5rem !important;
  }

  /* Top section re-card styling */
  .re-card {
      position: relative !important;
      display: block !important;
      padding: 1.5rem !important;
      background: rgba(30, 34, 51, 0.4) !important;
      border: 1px solid rgba(137, 221, 255, 0.1) !important;
      border-radius: 12px !important;
      margin-bottom: 1.5rem !important;
  }

  /* Ensure content is visible */
  .re-card-title {
      color: #89ddff !important;
      margin-bottom: 1rem !important;
  }

  .re-card-description {
      color: #a8b1bf !important;
      margin-bottom: 1.5rem !important;
  }

  /* Touch feedback */
  .re-article-item:active,
  .latest-content-card:active {
      background: rgba(137, 221, 255, 0.15) !important;
  }

  /* Grid layout fixes */
  .re-grid {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 1rem !important;
      width: 100% !important;
      padding: 1rem !important;
  }

  .latest-content-grid {
      display: flex !important;
      flex-direction: column !important;
      gap: 1rem !important;
      width: 100% !important;
  }

  /* Force enable pointer events */
  .latest-content-card,
  .re-article-item,
  .re-article-item a {
      pointer-events: auto !important;
      cursor: pointer !important;
  }

  /* Date badge */
  [data-publish-date]::after {
      content: attr(data-publish-date);
      position: absolute !important;
      bottom: 1rem !important;
      right: 1rem !important;
      padding: 0.3rem 0.8rem !important;
      background: rgba(199, 146, 234, 0.1) !important;
      border-radius: 12px !important;
      color: #c792ea !important;
      font-size: 0.85rem !important;
      pointer-events: none !important;
  }
}

/******************End Safari Support*************************************************************/

.markdown-rendered p {
  padding-bottom: 0.5em !important;
}

.markdown-rendered ul > li {
  padding-bottom: 0.5em !important;
}

.markdown-rendered div:is(.el-p,.el-pre,.el-table,.el-ul,.el-ol) + div > :is(h1,h2,h3,h4,h5,h6) {
  padding-bottom: 0.5em !important;
}

/* Media Queries for different screen sizes */
@media screen and (max-width: 768px) {
  .site-body-left-column {
    width: 100%;
    min-width: unset;
    height: auto;
    position: relative;
    padding: 1rem;
  }
  
  .site-body-left-column img {
    width: 120px;
  }
  
  .search-container {
    max-width: 100%;
  }
  
  .tree-item-self {
    padding: 8px;
  }
}

/* Tablet optimization */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .site-body-left-column {
    width: clamp(180px, 25vw, 250px);
  }
}

/* Larger screens */
@media screen and (min-width: 1920px) {
  .site-body-left-column {
    width: clamp(250px, 15vw, 350px);
  }
}

/****************************Highlight title***************************/

/* Fix for C# syntax highlighting - ensure all possible class combinations are covered */
pre[class*="language-csharp"],
pre[class*="language-cs"],
pre.language-csharp,
pre.language-cs,
code[class*="language-csharp"],
code[class*="language-cs"],
code.language-csharp,
code.language-cs {
  color: #f8f8f2 !important;
  background: none;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
}

/* Additional language label marker for C# */
div.el-pre:has(pre.language-csharp)::before,
div.el-pre:has(pre.language-cs)::before,
div.el-pre:has(.language-csharp)::before,
div.el-pre:has(.language-cs)::before { 
  content: "C#" !important; 
  color: #c792ea;
  display: block;
}

/* Enhanced C# syntax highlighting with stronger selectors */
.language-csharp .token, 
.language-cs .token,
[class*="language-csharp"] .token,
[class*="language-cs"] .token {
  color: inherit;
}

.language-csharp .token.keyword, 
.language-cs .token.keyword,
[class*="language-csharp"] .token.keyword,
[class*="language-cs"] .token.keyword {
  color: #c792ea !important; /* Purple for keywords */
  font-weight: bold;
}

.language-csharp .token.function, 
.language-cs .token.function,
[class*="language-csharp"] .token.function,
[class*="language-cs"] .token.function {
  color: #82aaff !important; /* Light blue for functions */
}

.language-csharp .token.string, 
.language-cs .token.string,
[class*="language-csharp"] .token.string,
[class*="language-cs"] .token.string {
  color: #a8e6cf !important; /* Mint green for strings */
}

.language-csharp .token.comment, 
.language-cs .token.comment,
[class*="language-csharp"] .token.comment,
[class*="language-cs"] .token.comment {
  color: #6272a4 !important; /* Muted blue for comments */
  font-style: italic;
}

.language-csharp .token.class-name, 
.language-cs .token.class-name,
[class*="language-csharp"] .token.class-name,
[class*="language-cs"] .token.class-name {
  color: #ffcb6b !important; /* Golden for class names */
  font-weight: bold;
}

/* Ensure C# specific code blocks are properly detected */
code[data-language="csharp"],
code[data-language="cs"],
pre[data-language="csharp"],
pre[data-language="cs"] {
  font-family: monospace;
}

code[data-language="csharp"]::before,
code[data-language="cs"]::before {
  content: "C#";
  color: #c792ea;
  font-weight: bold;
  display: block;
  margin-bottom: 0.5em;
}

/* Force syntax highlighting for code blocks marked as C# */
.markdown-rendered pre:has(code[class*="language-csharp"]),
.markdown-rendered pre:has(code[class*="language-cs"]) {
  background-color: rgba(30, 34, 51, 0.6) !important;
  border-radius: 6px;
  padding: 0.4em;
  margin: 1em 0;
  position: relative;
}