/* 
 * Minimal Blog CSS - Final Version
 * Dark Theme with Cybersecurity Styling
 * Focus: Readability, Performance, Clean Design
 */

/* CSS Reset & Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

/* Root Variables */
:root {
  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --font-mono: "SF Mono", "Monaco", "Inconsolata", "Fira Code", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
  
  /* Font Sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;
  
  /* Colors - Dark Theme */
  --color-text: #e5e5e5;
  --color-text-muted: #a0a0a0;
  --color-bg: #0a0a0a;
  --color-bg-alt: #1a1a1a;
  --color-border: #2a2a2a;
  --color-link: #4da3ff;
  --color-link-hover: #80bdff;
  --color-code-bg: #1a1a1a;
  
  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  
  /* Layout */
  --max-width: 1200px;
  --content-width: 48rem;
}

/* Base Styles */
html {
  font-size: 18px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-text);
  background-color: var(--color-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

/* Header Styles */
header {
  background: transparent;
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-xl) 0;
  margin-bottom: var(--space-2xl);
}

.header-content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-direction: row;
}

header img {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: block;
}

header h1 {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  display: inline-block;
}

header h1 a {
  color: var(--color-text);
  text-decoration: none;
  transition: color 0.2s ease;
}

header h1 a:hover {
  color: var(--color-link);
}

/* Cybersecurity Title Styles */

/* Terminal Style */
.terminal-style h1 a {
  font-family: var(--font-mono);
  color: #00ff00 !important;
  text-shadow: 0 0 3px #00ff00, 0 0 10px #00ff00;
  font-weight: 400;
  letter-spacing: 0.1em;
  position: relative;
  text-transform: none;
  transition: all 0.3s ease;
}

.terminal-style h1 a::before {
  content: '> ';
  color: #00ff00;
  animation: none;
}

.terminal-style h1 a::after {
  content: '_';
  animation: terminal-blink 1s infinite;
  margin-left: 2px;
}

@keyframes terminal-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.terminal-style h1 a:hover {
  color: #00ff00 !important;
  text-shadow: 0 0 5px #00ff00, 0 0 15px #00ff00, 0 0 25px #00ff00;
}

/* Matrix Digital Rain Style */
.matrix-style h1 a {
  color: #00ff41 !important;
  font-family: var(--font-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  position: relative;
  text-shadow: 
    0 0 5px #00ff41,
    0 0 10px #00ff41,
    0 0 15px #008f11;
  animation: matrix-flicker 0.1s infinite;
}

@keyframes matrix-flicker {
  0%, 100% { opacity: 1; text-shadow: 0 0 5px #00ff41, 0 0 10px #00ff41, 0 0 15px #008f11; }
  50% { opacity: 0.98; text-shadow: 0 0 7px #00ff41, 0 0 14px #00ff41, 0 0 20px #008f11; }
}

/* Encrypted/Decrypted Effect */
.encrypted h1 a {
  font-family: var(--font-mono);
  font-weight: 600;
  color: #4da3ff !important;
  position: relative;
  display: inline-block;
}

.encrypted h1 a::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #4da3ff;
  overflow: hidden;
  animation: decrypt 3s infinite;
}

/* Firewall Scanner Style */
.firewall h1 a {
  color: #00ffff !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  position: relative;
  background: linear-gradient(90deg, #00ffff 0%, #0080ff 50%, #00ffff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: firewall-scan 2s linear infinite;
}

.firewall h1 a::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00ffff, transparent);
  animation: scan-line 2s linear infinite;
}

@keyframes firewall-scan {
  to { background-position: 200% center; }
}

@keyframes scan-line {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Navigation */
.header-nav {
  display: flex;
  gap: var(--space-xl);
  align-items: center;
}

.header-nav a,
.links {
  color: var(--color-text-muted);
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.2s ease;
}

.header-nav a:hover,
.links:hover {
  color: var(--color-link);
}

/* Main Content Container */
main,
body > div:not(header),
article {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

/* Center page titles */
body > h1:first-of-type,
main > h1:first-child,
article > h1:first-child {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.3;
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
  letter-spacing: -0.02em;
  color: var(--color-text);
}

h1 {
  font-size: var(--text-2xl);
  margin-top: 0;
}

h2 {
  font-size: var(--text-xl);
  margin-top: var(--space-3xl);
}

h3 {
  font-size: var(--text-lg);
}

h4, h5, h6 {
  font-size: var(--text-base);
  font-weight: 500;
}

p {
  margin-bottom: var(--space-lg);
}

/* Links */
a {
  color: var(--color-link);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* Lists */
ul, ol {
  margin-bottom: var(--space-lg);
  padding-left: var(--space-xl);
}

li {
  margin-bottom: var(--space-sm);
  color: var(--color-text);
}

/* Post List - Homepage */
.post-list,
ul:has(li a[href*="/notes/"]) {
  list-style: none;
  padding: 0;
}

.post-list li,
ul:has(li a[href*="/notes/"]) li {
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0;
}

.post-list li:last-child,
ul:has(li a[href*="/notes/"]) li:last-child {
  border-bottom: none;
}

.post-list a,
ul:has(li a[href*="/notes/"]) li a {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
}

.post-list a:hover,
ul:has(li a[href*="/notes/"]) li a:hover {
  color: var(--color-link);
}

/* Search Box */
.search,
#search-input,
input[type="search"],
input[type="text"] {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-base);
  font-family: inherit;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background-color: var(--color-bg-alt);
  color: var(--color-text);
  transition: border-color 0.2s ease;
  margin-bottom: 0;
}

#search-input:focus,
input[type="search"]:focus,
input[type="text"]:focus {
  outline: none;
  border-color: var(--color-link);
  background-color: var(--color-bg);
}

/* Code Blocks */
code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background-color: var(--color-code-bg);
  padding: 0.125em 0.25em;
  border-radius: 3px;
  color: var(--color-link);
}

pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background-color: var(--color-code-bg);
  border-radius: 6px;
  line-height: 1.5;
  border: 1px solid var(--color-border);
  margin-bottom: var(--space-lg);
  padding: var(--space-lg);
  overflow-x: auto;
}

pre code {
  background: none;
  padding: 0;
  font-size: inherit;
  color: var(--color-text);
}

/* Blockquotes */
blockquote {
  margin: var(--space-xl) 0;
  padding-left: var(--space-lg);
  border-left: 3px solid var(--color-border);
  font-style: italic;
  color: var(--color-text-muted);
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-lg);
  font-size: var(--text-sm);
}

th, td {
  text-align: left;
  padding: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

th {
  font-weight: 600;
  border-bottom: 2px solid var(--color-border);
  color: var(--color-text);
}

/* Images */
img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

/* Post Meta */
.post-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xl);
}

.post-meta time {
  font-weight: 500;
}

.tags {
  display: inline-flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.tags a {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-transform: none;
}

.tags a:hover {
  color: var(--color-link);
  text-decoration: none;
}

/* Footer */
footer,
body > p:last-child {
  margin-top: var(--space-3xl);
  padding-top: var(--space-xl);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
}

/* Utilities */
hr,
.separator {
  height: 1px;
  background-color: var(--color-border);
  margin: var(--space-xl) 0;
  border: none;
}

/* Syntax Highlighting - Rouge/Monokai Theme */
.highlight {
  background: #272822;
  color: #f8f8f2;
  padding: var(--space-lg);
  border-radius: 6px;
  overflow-x: auto;
  margin-bottom: var(--space-lg);
  position: relative;
}

.highlight pre {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

/* Rouge Token Styles */
.highlight .c { color: #75715e } /* Comment */
.highlight .err { color: #f8f8f2; background-color: #ff5555 } /* Error */
.highlight .k { color: #66d9ef } /* Keyword */
.highlight .l { color: #ae81ff } /* Literal */
.highlight .n { color: #f8f8f2 } /* Name */
.highlight .o { color: #f92672 } /* Operator */
.highlight .p { color: #f8f8f2 } /* Punctuation */
.highlight .ch { color: #75715e } /* Comment.Hashbang */
.highlight .cm { color: #75715e } /* Comment.Multiline */
.highlight .cp { color: #75715e } /* Comment.Preproc */
.highlight .cpf { color: #75715e } /* Comment.PreprocFile */
.highlight .c1 { color: #75715e } /* Comment.Single */
.highlight .cs { color: #75715e } /* Comment.Special */
.highlight .gd { color: #ff5555 } /* Generic.Deleted */
.highlight .ge { font-style: italic } /* Generic.Emph */
.highlight .gi { color: #50fa7b } /* Generic.Inserted */
.highlight .gs { font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #75715e } /* Generic.Subheading */
.highlight .kc { color: #66d9ef } /* Keyword.Constant */
.highlight .kd { color: #66d9ef } /* Keyword.Declaration */
.highlight .kn { color: #f92672 } /* Keyword.Namespace */
.highlight .kp { color: #66d9ef } /* Keyword.Pseudo */
.highlight .kr { color: #66d9ef } /* Keyword.Reserved */
.highlight .kt { color: #66d9ef } /* Keyword.Type */
.highlight .ld { color: #e6db74 } /* Literal.Date */
.highlight .m { color: #ae81ff } /* Literal.Number */
.highlight .s { color: #e6db74 } /* Literal.String */
.highlight .na { color: #a6e22e } /* Name.Attribute */
.highlight .nb { color: #f8f8f2 } /* Name.Builtin */
.highlight .nc { color: #a6e22e } /* Name.Class */
.highlight .no { color: #66d9ef } /* Name.Constant */
.highlight .nd { color: #a6e22e } /* Name.Decorator */
.highlight .ni { color: #f8f8f2 } /* Name.Entity */
.highlight .ne { color: #a6e22e } /* Name.Exception */
.highlight .nf { color: #a6e22e } /* Name.Function */
.highlight .nl { color: #f8f8f2 } /* Name.Label */
.highlight .nn { color: #f8f8f2 } /* Name.Namespace */
.highlight .nx { color: #a6e22e } /* Name.Other */
.highlight .py { color: #f8f8f2 } /* Name.Property */
.highlight .nt { color: #f92672 } /* Name.Tag */
.highlight .nv { color: #f8f8f2 } /* Name.Variable */
.highlight .ow { color: #f92672 } /* Operator.Word */
.highlight .w { color: #f8f8f2 } /* Text.Whitespace */
.highlight .mb { color: #ae81ff } /* Literal.Number.Bin */
.highlight .mf { color: #ae81ff } /* Literal.Number.Float */
.highlight .mh { color: #ae81ff } /* Literal.Number.Hex */
.highlight .mi { color: #ae81ff } /* Literal.Number.Integer */
.highlight .mo { color: #ae81ff } /* Literal.Number.Oct */
.highlight .sa { color: #e6db74 } /* Literal.String.Affix */
.highlight .sb { color: #e6db74 } /* Literal.String.Backtick */
.highlight .sc { color: #e6db74 } /* Literal.String.Char */
.highlight .dl { color: #e6db74 } /* Literal.String.Delimiter */
.highlight .sd { color: #e6db74 } /* Literal.String.Doc */
.highlight .s2 { color: #e6db74 } /* Literal.String.Double */
.highlight .se { color: #e6db74 } /* Literal.String.Escape */
.highlight .sh { color: #e6db74 } /* Literal.String.Heredoc */
.highlight .si { color: #e6db74 } /* Literal.String.Interpol */
.highlight .sx { color: #e6db74 } /* Literal.String.Other */
.highlight .sr { color: #ff5555 } /* Literal.String.Regex */
.highlight .s1 { color: #e6db74 } /* Literal.String.Single */
.highlight .ss { color: #e6db74 } /* Literal.String.Symbol */
.highlight .bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */
.highlight .fm { color: #a6e22e } /* Name.Function.Magic */
.highlight .vc { color: #f8f8f2 } /* Name.Variable.Class */
.highlight .vg { color: #f8f8f2 } /* Name.Variable.Global */
.highlight .vi { color: #f8f8f2 } /* Name.Variable.Instance */
.highlight .vm { color: #f8f8f2 } /* Name.Variable.Magic */
.highlight .il { color: #ae81ff } /* Literal.Number.Integer.Long */

/* Hide language labels in code blocks */
.highlight:before,
.highlight:after {
  display: none !important;
}

/* Line numbers (if enabled) */
.highlight .lineno {
  color: #75715e;
  display: inline-block;
  padding: 0 .75rem 0 .25rem;
  border-right: 1px solid #2a2a2a;
  margin-right: 1rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* Inline code */
code.highlighter-rouge {
  background-color: #1e1e1e;
  color: #50fa7b;
  padding: 0.125rem 0.375rem;
  border-radius: 3px;
  font-size: 0.875em;
}

/* Responsive Design */
@media (max-width: 768px) {
  html {
    font-size: 16px;
  }
  
  .header-content {
    flex-direction: column;
    text-align: center;
    gap: var(--space-lg);
    padding: 0 var(--space-md);
  }
  
  .header-brand {
    flex-direction: row;
    gap: var(--space-sm);
  }
  
  .header-nav {
    gap: var(--space-md);
    flex-wrap: wrap;
    justify-content: center;
  }
  
  main,
  body > div:not(header) {
    padding: 0 var(--space-md);
  }
  
  .highlight {
    margin-left: calc(var(--space-md) * -1);
    margin-right: calc(var(--space-md) * -1);
    border-radius: 0;
    padding: var(--space-md);
  }
}

/* Print Styles */
@media print {
  body {
    color: #000;
    background: #fff;
  }
  
  header, nav, footer, .search {
    display: none;
  }
  
  a {
    color: #000;
    text-decoration: underline;
  }
  
  h1, h2, h3 {
    page-break-after: avoid;
  }
  
  .highlight {
    background: #f5f5f5 !important;
    border: 1px solid #ddd;
  }
  
  .highlight * {
    color: #000 !important;
  }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background: #444;
}

/* Code Block Scrollbar */
.highlight::-webkit-scrollbar {
  height: 8px;
}

.highlight::-webkit-scrollbar-track {
  background: #1e1e1e;
}

.highlight::-webkit-scrollbar-thumb {
  background: #44475a;
  border-radius: 4px;
}

.highlight::-webkit-scrollbar-thumb:hover {
  background: #6272a4;
}