/* AI Infrastructure Architect - Cool Minimal Design */

/* Fonts loaded via head for better performance (see head-extra.html) */

/* Command line nerd color scheme */
:root {
  --accent-green: #00b359;
  --accent-cyan: #2eb88a;
  --accent-glow: rgba(0, 179, 89, 0.2);
  --terminal-bg: #0a0e0a;
  --terminal-text: #00b359;
  --card-bg: rgba(10, 20, 10, 0.8);
}

/* Animated gradient background */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

html {
  background: #000000 !important;
  background-image:
    repeating-linear-gradient(0deg, rgba(0, 255, 65, 0.03) 0px, transparent 1px, transparent 2px, rgba(0, 255, 65, 0.03) 3px),
    repeating-linear-gradient(90deg, rgba(0, 255, 65, 0.03) 0px, transparent 1px, transparent 2px, rgba(0, 255, 65, 0.03) 3px) !important;
  background-size: 4px 4px !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}

body {
  background: transparent !important;
  transition: none;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-weight: 400;
  letter-spacing: 0;
  text-shadow: 0 0 2px rgba(0, 255, 65, 0.3);
  min-height: 100vh;
}

/* Force black background on all main containers */
.wrapper,
.main,
main,
.content,
#content,
.site-main,
article,
section {
  background: transparent !important;
}

/* Ensure header/nav has terminal background */
header,
.site-header,
nav {
  background: rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(10px);
}

/* Terminal-style title with cursor */
#home-title, h1 {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  line-height: 1.3;
  color: var(--accent-green);
  text-shadow: 0 0 10px rgba(0, 255, 65, 0.5);
}

#home-title::before {
  content: '$ ';
  color: var(--accent-cyan);
}

/* Blinking cursor animation */
@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.cursor {
  animation: blink 1s infinite;
  color: var(--accent-green);
  font-weight: 400;
}

/* Subtitle - terminal output style */
#home-subtitle {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-weight: 400;
  font-size: clamp(0.8rem, 1.8vw, 0.95rem);
  letter-spacing: 0.01em;
  line-height: 1.6;
  color: rgba(0, 217, 255, 0.85);
  text-shadow: 0 0 5px rgba(0, 217, 255, 0.3);
}

#home-subtitle::before {
  content: '> ';
  color: var(--accent-green);
  opacity: 0.7;
}

/* Animated gradient text for hero subtitle */
.intro .subtitle {
  background: linear-gradient(135deg, var(--gradient-1) 0%, var(--gradient-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* Terminal-style link hover effects */
a {
  will-change: color;
  transition: color 0.2s ease;
  color: var(--accent-cyan);
  text-decoration: none;
  border-bottom: 1px dotted rgba(0, 217, 255, 0.3);
}

a:hover {
  color: var(--accent-green);
  text-shadow: 0 0 8px rgba(0, 255, 65, 0.5);
  border-bottom: 1px solid var(--accent-green);
}

/* Terminal window design for posts/content */
.post-item, .content-wrapper {
  background: var(--card-bg);
  border: 1px solid rgba(0, 255, 65, 0.2);
  border-radius: 4px;
  box-shadow: 0 0 20px rgba(0, 255, 65, 0.1);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.post-item:hover, .content-wrapper:hover {
  border-color: rgba(0, 255, 65, 0.5);
  box-shadow: 0 0 30px var(--accent-glow);
}

/* Terminal-style code blocks */
pre, code {
  background: rgba(0, 0, 0, 0.9) !important;
  border: 1px solid rgba(0, 255, 65, 0.3);
  border-radius: 3px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  color: var(--accent-green);
  text-shadow: 0 0 3px rgba(0, 255, 65, 0.4);
}

/* Optimize font loading for performance */
body {
  font-display: swap;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Terminal-style social icons */
.social-icons a {
  will-change: transform;
  transition: transform 0.2s ease, filter 0.2s ease;
  filter: drop-shadow(0 0 5px rgba(0, 255, 65, 0.3));
}

.social-icons a:hover {
  transform: translateY(-2px) scale(1.1);
  filter: drop-shadow(0 0 15px var(--accent-green));
}

/* Performance: Reduce paint areas */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Terminal-style footer */
footer {
  border-top: 1px solid rgba(0, 255, 65, 0.2);
  opacity: 0.7;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.85rem;
  color: rgba(0, 217, 255, 0.6);
}

/* Terminal-style headings */
h2, h3 {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  color: var(--accent-green);
  font-weight: 500;
  letter-spacing: 0.01em;
  text-shadow: 0 0 8px rgba(0, 255, 65, 0.4);
}

h2 {
  font-size: clamp(1.35rem, 3vw, 1.75rem);
}

h2::before {
  content: '## ';
  color: var(--accent-cyan);
  opacity: 0.6;
}

h3 {
  font-size: clamp(1.125rem, 2.5vw, 1.35rem);
}

h3::before {
  content: '### ';
  color: var(--accent-cyan);
  opacity: 0.6;
}

/* Terminal output paragraph styling */
p {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-weight: 400;
  font-size: clamp(0.85rem, 1.5vw, 0.95rem);
  line-height: 1.7;
  letter-spacing: 0;
  color: rgba(200, 255, 200, 0.8);
}

/* Ensure all links use terminal colors */
.posts-list .post-item .meta,
.post-list-item time,
.post-meta {
  color: rgba(0, 217, 255, 0.6);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

.posts-list .post-item .post-title,
.post-list-item .post-title {
  color: var(--accent-green);
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

/* Site header/navigation */
.site-header,
.site-nav,
.site-title {
  background: transparent;
  border-color: rgba(0, 255, 65, 0.2);
}

.site-title a {
  color: var(--accent-green);
  text-shadow: 0 0 10px rgba(0, 255, 65, 0.5);
}

/* List items */
li::marker {
  color: var(--accent-cyan);
}

/* Responsive minimal spacing */
@media (max-width: 768px) {
  .intro .subtitle {
    font-size: 0.9rem;
  }
}

/* Accessibility - Skip to content link */
.skip-to-main {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--accent-green);
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
  z-index: 9999;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-weight: 500;
  border: 1px solid var(--accent-green);
  border-radius: 3px;
}

.skip-to-main:focus {
  top: 10px;
  left: 10px;
  outline: 2px solid var(--accent-cyan);
  outline-offset: 2px;
}