/* HTTPLocalhost Terminal Theme CSS
 * Based on docs/httplocalhost/style.md specifications
 * Design: Geek/Hacker Terminal with Dark Mode
 */

/* ========================================
   CSS Variables (Design Tokens)
   ======================================== */
:root {
  /* Color Palette */
  --bg-primary: #020617;     /* slate-950 background */
  --text-primary: #e2e8f0;   /* slate-200 primary text */
  --text-secondary: #94a3b8; /* slate-400/500 secondary text */
  --accent-primary: #22d3ee;  /* cyan-400 primary accent */
  --accent-secondary: #a3e635; /* lime-400 secondary accent */
  --accent-tertiary: #e879f9; /* fuchsia-400 tertiary accent */
  
  /* Borders and Surfaces */
  --border-color: #1e293b;    /* slate-800 borders */
  --surface-code: #0f172a;    /* slate-900 code blocks */
  --surface-inline: #1e293b;  /* slate-800 inline code */
  
  /* Typography */
  --font-family: 'Fira Code', 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Droid Sans Mono', 'Source Code Pro', monospace;
  
  /* Layout */
  --content-max-width: 80rem; /* 4xl equivalent */
  --content-padding: 2rem;
  
  /* Severity Colors */
  --severity-high: #ef4444;   /* red-500 */
  --severity-medium: #f59e0b; /* amber-500 */
  --severity-low: #10b981;    /* emerald-500 */
}

/* ========================================
   Reset and Base Styles
   ======================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body.terminal-body {
  font-family: var(--font-family);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ========================================
   Typography Hierarchy
   ======================================== */
.terminal-heading-1 {
  font-size: 3rem;    /* 4xl */
  font-weight: 700;
  color: var(--accent-primary);
  margin-bottom: 1rem;
  border-left: 4px solid var(--accent-primary);
  padding-left: 1rem;
}

.terminal-heading-2 {
  font-size: 1.5rem;  /* 2xl */
  font-weight: 700;
  color: var(--accent-primary);
  margin: 2.5rem 0 1.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.terminal-heading-3 {
  font-size: 1.25rem; /* xl */
  font-weight: 600;
  color: var(--accent-secondary);
  margin: 2rem 0 1rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Section Markers */
.section-marker,
.subsection-marker {
  color: var(--accent-primary);
  font-weight: 700;
  font-size: 1.2em;
}

.subsection-marker {
  color: var(--accent-secondary);
}

/* ========================================
   Layout Structure
   ======================================== */
.terminal-header {
  background-color: rgba(2, 6, 23, 0.8); /* bg-primary with transparency */
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 100;
}

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

.terminal-prompt {
  font-family: var(--font-family);
  font-size: 1.1rem;
  color: var(--text-primary);
}

.prompt-user { color: var(--accent-secondary); }
.prompt-at { color: var(--text-secondary); }
.prompt-host { color: var(--accent-primary); }
.prompt-colon { color: var(--text-secondary); }
.prompt-path { color: var(--accent-tertiary); }
.prompt-hash { color: var(--accent-primary); }

.nav-links {
  display: flex;
  gap: 2rem;
}

.nav-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
  padding: 0.5rem 0;
}

.nav-link:hover {
  color: var(--accent-primary);
}

/* Main Content */
.terminal-main {
  flex: 1;
  padding: 2rem 0;
}

.content-container {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--content-padding);
}

/* ========================================
   Terminal Window Components
   ======================================== */
.terminal-window {
  background-color: var(--surface-code);
  border: 1px solid var(--border-color);
  border-radius: 0; /* Sharp corners as per spec */
  margin: 2rem 0;
  overflow: hidden;
}

.window-header {
  background-color: var(--border-color);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-color);
}

.window-controls {
  display: flex;
  gap: 0.5rem;
}

.control-btn {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
}

.control-btn.close { background-color: #ef4444; }
.control-btn.minimize { background-color: #f59e0b; }
.control-btn.maximize { background-color: #10b981; }

.window-title {
  color: var(--text-primary);
  font-size: 0.875rem;
  font-weight: 500;
}

.window-content {
  padding: 1.5rem;
}

.terminal-prompt-line {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  font-family: var(--font-family);
}

.prompt {
  color: var(--accent-secondary);
  font-weight: 600;
}

.command {
  color: var(--text-primary);
}

/* ========================================
   Content Blocks and Sections
   ======================================== */
.port-section {
  margin-bottom: 3rem;
}

.content-block {
  background-color: rgba(15, 23, 42, 0.3); /* surface-code with transparency */
  border: 1px solid var(--border-color);
  padding: 2rem;
  margin: 1rem 0;
}

/* Port Header Specific */
.port-title {
  margin-top: 1rem;
}

.port-number {
  color: var(--accent-primary);
}

.port-separator {
  color: var(--text-secondary);
  margin: 0 0.5rem;
}

.port-name {
  color: var(--text-primary);
}

.port-description {
  color: var(--text-secondary);
  font-size: 1.1rem;
  margin-top: 1rem;
  font-style: normal;
}

/* ========================================
   Code Blocks and Inline Code
   ======================================== */
.code-block {
  background-color: var(--surface-code);
  border: 1px solid var(--border-color);
  margin: 1.5rem 0;
  position: relative;
  overflow: hidden;
}

.code-header {
  background-color: var(--border-color);
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.code-lang {
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: lowercase;
}

.terminal-code {
  display: block;
  padding: 1.5rem;
  color: var(--text-primary);
  font-family: var(--font-family);
  font-size: 0.9rem;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
}

.inline-code {
  background-color: var(--surface-inline);
  color: var(--accent-primary);
  padding: 0.2rem 0.4rem;
  font-family: var(--font-family);
  font-size: 0.9em;
  border: 1px solid var(--border-color);
}

/* Copy Button */
.copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  background-color: var(--accent-primary);
  color: var(--bg-primary);
  border: none;
  padding: 0.5rem 1rem;
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  opacity: 0;
}

.code-block:hover .copy-btn {
  opacity: 1;
}

.copy-btn:hover {
  background-color: var(--accent-secondary);
}

.copy-btn.copied {
  background-color: var(--severity-low);
}

/* ========================================
   Services and Categories
   ======================================== */
.service-category {
  margin-bottom: 2.5rem;
}

.service-list {
  margin-left: 1rem;
}

.service-item {
  margin-bottom: 1.5rem;
  padding-left: 1.5rem;
  border-left: 2px solid var(--border-color);
}

.service-name {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.bullet {
  color: var(--accent-primary);
  font-weight: 700;
  font-size: 1.2em;
}

.service-title {
  color: var(--accent-secondary);
  font-weight: 600;
}

.service-description {
  color: var(--text-secondary);
  margin-left: 2rem;
  line-height: 1.6;
}

/* ========================================
   Usage Steps
   ======================================== */
.steps-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.usage-step {
  background-color: rgba(15, 23, 42, 0.5);
  border: 1px solid var(--border-color);
  padding: 1.5rem;
  border-left: 4px solid var(--accent-secondary);
}

.step-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.step-number {
  background-color: var(--accent-primary);
  color: var(--bg-primary);
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
}

.step-title {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 1.1rem;
}

.step-description {
  color: var(--text-secondary);
  margin-bottom: 1rem;
  line-height: 1.6;
}

/* ========================================
   Problems and Solutions
   ======================================== */
.problems-severity {
  margin-bottom: 2rem;
}

.severity-badge {
  background-color: var(--severity-medium);
  color: var(--bg-primary);
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.severity-badge.severity-high {
  background-color: var(--severity-high);
}

.severity-badge.severity-low {
  background-color: var(--severity-low);
}

.problems-list {
  margin-left: 1rem;
}

.problem-item {
  margin-bottom: 1.5rem;
  padding: 1rem;
  border-left: 4px solid var(--severity-medium);
  background-color: rgba(15, 23, 42, 0.3);
}

.problem-item.severity-high {
  border-left-color: var(--severity-high);
}

.problem-item.severity-low {
  border-left-color: var(--severity-low);
}

.problem-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.problem-indicator {
  color: var(--accent-tertiary);
  font-size: 1.2em;
}

.problem-title {
  color: var(--text-primary);
  font-weight: 600;
}

.problem-description {
  color: var(--text-secondary);
  margin-left: 2rem;
  line-height: 1.6;
}

/* Platform Solutions */
.platform-solutions {
  margin-bottom: 2.5rem;
}

.platform-badge {
  background-color: var(--accent-primary);
  color: var(--bg-primary);
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.solutions-list {
  margin-left: 1rem;
}

.solution-item {
  margin-bottom: 2rem;
  padding: 1.5rem;
  border: 1px solid var(--border-color);
  background-color: rgba(15, 23, 42, 0.2);
}

.solution-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.solution-title {
  color: var(--accent-secondary);
  font-weight: 600;
  font-size: 1.1rem;
}

.solution-problem {
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-style: italic;
}

.solution-steps {
  margin-bottom: 1.5rem;
}

.steps-label {
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.steps-list {
  margin-left: 1.5rem;
  color: var(--text-secondary);
}

.solution-step {
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

/* ========================================
   Footer
   ======================================== */
.terminal-footer {
  border-top: 1px solid var(--border-color);
  background-color: rgba(2, 6, 23, 0.8);
  backdrop-filter: blur(8px);
  padding: 2rem 0;
  margin-top: auto;
}

.footer-container {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--content-padding);
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.terminal-output {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-family);
}

.output-prefix {
  color: var(--accent-primary);
  font-weight: 700;
}

.output-text {
  color: var(--text-secondary);
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: var(--accent-primary);
}

.footer-separator {
  color: var(--border-color);
}

/* ========================================
   Summary Section
   ======================================== */
.summary-window .window-content {
  padding: 2rem;
}

.summary-text {
  margin-bottom: 0.75rem;
  line-height: 1.6;
}

.summary-text strong {
  color: var(--accent-secondary);
}

/* ========================================
   FAQ Section Styles
   ======================================== */
.faq-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.faq-item {
  background-color: rgba(15, 23, 42, 0.3);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--accent-primary);
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.faq-item:hover {
  background-color: rgba(15, 23, 42, 0.5);
  border-left-color: var(--accent-secondary);
}

.faq-question {
  margin-bottom: 1rem;
}

.question-title {
  color: var(--text-primary);
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.question-marker {
  color: var(--accent-primary);
  font-weight: 700;
  font-size: 1.2em;
  flex-shrink: 0;
}

.faq-answer {
  padding-left: 0;
}

.answer-content {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.answer-marker {
  color: var(--accent-secondary);
  font-weight: 700;
  font-size: 1.1em;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.answer-text {
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
  flex: 1;
}

/* ========================================
   Navigation Language Selector Styles
   ======================================== */
.language-selector-nav {
  display: flex;
  align-items: center;
  margin-left: 1rem;
}

.lang-select {
  background-color: var(--surface-code);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  color: var(--text-primary);
  font-size: 0.875rem;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 100px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1rem;
  padding-right: 2.5rem;
}

.lang-select:hover {
  border-color: var(--accent-primary);
  background-color: var(--surface-inline);
}

.lang-select:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.2);
}

.lang-select option {
  background-color: var(--surface-code);
  color: var(--text-primary);
  padding: 0.5rem;
  font-family: var(--font-family);
}

.lang-indicator {
  background-color: var(--accent-primary);
  color: var(--bg-primary);
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.875rem;
  font-family: var(--font-family);
  border: 1px solid var(--accent-primary);
}

/* ========================================
   Responsive Design
   ======================================== */
@media (max-width: 768px) {
  :root {
    --content-padding: 1rem;
  }
  
  .nav-container {
    flex-direction: column;
    gap: 1rem;
  }
  
  .nav-links {
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .language-selector-nav {
    margin-left: 0;
    margin-top: 0.5rem;
  }
  
  .lang-select {
    min-width: 80px;
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
    padding-right: 2rem;
  }
  
  .terminal-heading-1 {
    font-size: 2rem;
  }
  
  .solution-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .footer-content {
    flex-direction: column;
    text-align: center;
  }
  
  .window-header {
    padding: 0.5rem;
  }
  
  .window-content {
    padding: 1rem;
  }
  
  .content-block {
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .terminal-prompt {
    font-size: 0.9rem;
  }
  
  .nav-links {
    flex-direction: column;
    width: 100%;
  }
  
  .nav-link {
    text-align: center;
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
  }
  
  .nav-link:last-child {
    border-bottom: none;
  }
}

/* ========================================
   SEO Enhancements
   ======================================== */

/* Breadcrumb Navigation */
.breadcrumb-nav {
    padding: 12px 0;
    margin-bottom: 20px;
}

.breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: var(--font-mono);
    font-size: 14px;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

.breadcrumb-item:not(:last-child)::after {
    content: '/';
    margin: 0 8px;
    color: var(--terminal-green);
    opacity: 0.7;
}

.breadcrumb-link {
    color: var(--terminal-blue);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-link:hover {
    color: var(--terminal-green);
    text-decoration: underline;
}

.breadcrumb-item.active {
    color: var(--terminal-white);
    font-weight: 500;
}

/* Structured Data (Hidden from users) */
.structured-data {
    display: none;
}

/* Breadcrumb responsive */
@media (max-width: 768px) {
    .breadcrumb-nav {
        padding: 8px 0;
        margin-bottom: 15px;
    }
    
    .breadcrumb-list {
        font-size: 12px;
    }
    
    .breadcrumb-item:not(:last-child)::after {
        margin: 0 4px;
    }
}

/* ========================================
   Terminal Animation Styles
   ======================================== */

/* 1. 为动画容器 .port-description 添加样式 - 参照新设计 */
.port-description {
    background-color: #282a36; 
    color: #f8f8f2;
    font-family: 'Fira Code', monospace;
    font-style: normal !important;
    font-weight: normal !important;
    padding: 16px 24px;
    border-radius: 5px;
    border: 1px solid #44475a;
    min-height: 150px;
    white-space: pre-wrap;
    word-break: break-all;
    box-shadow: 
        inset 0 0 15px rgba(0, 0, 0, 0.7),
        0 4px 15px rgba(0, 0, 0, 0.5);
    margin-top: 15px;
    font-size: 13px;
    line-height: 1.4;
    position: relative; 
    overflow: hidden;   
}

/* 2. 新的"Blueprint Grid"背景效果 */
.port-description::after {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    background-image: 
        linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px; 
    z-index: 0;
    opacity: 0.5;
}

/* 2. 为动画中的每一行 .shell-line 添加基础样式 */
.shell-line {
    display: block;      /* 确保每行都独占一行空间 */
    min-height: 1.2em;   /* 即使是空行也保持一致的行高 */
    margin-bottom: 2px;  /* 行间距 */
    font-style: normal !important;  /* 确保字体不倾斜 */
    font-weight: normal !important; /* 确保字体粗细正常 */
}

/* 3. 定义打字机光标 .typewriter-cursor 的外观和闪烁动画 */
.typewriter-cursor {
    display: inline-block;
    width: 9px;                /* 光标宽度 */
    height: 1.1em;             /* 光标高度 */
    background-color: #f8f8f2; /* 光标颜色 */
    vertical-align: text-bottom; /* 对齐方式 */
    animation: blink 1.06s infinite; /* 应用名为 blink 的动画，周期1.06秒，无限循环 */
    margin-left: 1px;          /* 与文字保持间距 */
}

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

/* 响应式适配 */
@media (max-width: 768px) {
    .port-description {
        padding: 12px 16px;
        font-size: 12px;
        min-height: 120px;
    }
    
    .typewriter-cursor {
        width: 8px;
        height: 1em;
    }
}