/**
 * Zach's Terminal - Stylesheet
 * A retro terminal-style personal website
 */

/* CSS Variables for easy theming - Authentic Kali Linux */
:root {
  --kali-purple: #7c3aed;
  --kali-cyan: #00d9ff;
  --kali-green: #10b981;
  --kali-yellow: #fbbf24;
  --kali-red: #ef4444;
  --kali-bg-dark: #1e1e2e;
  --kali-bg-darker: #1a1d29;
  --kali-header-bg: #2d2d44;
  --primary-color: #10b981;
  --secondary-color: #00d9ff;
  --prompt-color: #7c3aed;
  --username-color: #00d9ff;
  --hostname-color: #00d9ff;
  --path-color: #7c3aed;
  --command-color: #c084fc;
  --background-color: #1a1d29;
  --font-family: 'Courier New', Courier, monospace;
  --border-width: 2px;
  --glow-size: 15px;
  --base-font-size: 14px;
  --terminal-padding: 20px;
  --terminal-max-width: none;
  --terminal-margin: 0;
}

/* Reset and base styles */
* {
  box-sizing: border-box;
}

html {
  font-size: var(--base-font-size);
  /* Prevent iOS text size adjustment */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: var(--font-family);
  background: linear-gradient(135deg, var(--kali-bg-darker) 0%, #2d3748 100%);
  color: var(--primary-color);
  overflow-x: hidden;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  padding: 0;
  /* Safe area for notched devices (iPhone X, etc.) */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Terminal container styles - Full-screen terminal */
.terminal, #bootScreen {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--terminal-padding);
  border: none;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  background-color: var(--kali-bg-dark);
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  /* Better text rendering on mobile */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Prevent text selection issues on mobile */
  user-select: text;
  -webkit-user-select: text;
  /* Touch actions for better mobile interaction */
  touch-action: pan-y pinch-zoom;
  /* Momentum scrolling on iOS */
  overscroll-behavior: contain;
}

#bootScreen {
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  color: var(--primary-color);
}

/* Input container - transparent wrapper for proper DOM structure */
.input-container {
  display: contents;
}

/* Kali-style two-line prompt */
.prompt-line {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  flex-wrap: nowrap;
  white-space: nowrap;
}

.prompt-line-top {
  margin-bottom: 2px;
}

/* Prompt components with Kali colors */
.prompt-bracket,
.username,
.at-sign,
.hostname,
.path,
.prompt-symbol {
  display: inline;
  white-space: nowrap;
}

.prompt-bracket {
  color: var(--kali-purple);
}

.username {
  color: var(--kali-cyan);
  font-weight: normal;
}

.at-sign {
  color: #a0a0a0;
}

.hostname {
  color: var(--kali-cyan);
  font-weight: normal;
}

.path {
  color: var(--kali-purple);
  font-weight: normal;
}

.prompt-symbol {
  color: var(--kali-yellow);
  margin: 0 5px;
}

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

/* Legacy prompt styling for compatibility */
.line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  width: 100%;
  margin-bottom: 5px;
}

.prompt {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Input field styles - Kali style */
input {
  background: transparent;
  color: #fff;
  border: none;
  font-family: var(--font-family);
  font-size: var(--base-font-size);
  outline: none;
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 2px 0;
  /* Fix mobile input quirks */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  caret-color: var(--kali-purple);
  /* Prevent zoom on focus for iOS */
  font-size: max(16px, var(--base-font-size));
}

/* Prevent iOS zoom on focus */
input:focus {
  font-size: max(16px, var(--base-font-size));
}

input::placeholder {
  color: #555;
  font-style: italic;
}

/* Output text styles - Kali colors */
.output {
  margin-bottom: 15px;
  margin-left: 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  color: #d1d5db;
  line-height: 1.6;
}

/* Kali-style text colors */
.highlight {
  color: var(--kali-yellow);
}

.success {
  color: var(--kali-green);
}

.error {
  color: var(--kali-red);
}

.info {
  color: var(--kali-cyan);
}

/* Link styles */
a {
  color: var(--kali-cyan);
  text-decoration: underline;
}

a:hover {
  color: var(--kali-purple);
  text-decoration: none;
}

/* Screen reader only content */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ====== RESPONSIVE DESIGN ====== */

/* Large desktop screens */
@media (min-width: 1200px) {
  :root {
    --base-font-size: 15px;
    --terminal-padding: 24px;
  }
}

/* Standard desktop */
@media (min-width: 992px) and (max-width: 1199px) {
  :root {
    --base-font-size: 14px;
    --terminal-padding: 20px;
  }
}

/* Tablets and small laptops */
@media (min-width: 768px) and (max-width: 991px) {
  :root {
    --terminal-max-width: none;
    --terminal-padding: 18px;
    --terminal-margin: 0;
    --glow-size: 15px;
  }
}

/* Mobile landscape and large phones */
@media (min-width: 576px) and (max-width: 767px) {
  :root {
    --terminal-max-width: none;
    --terminal-padding: 12px;
    --terminal-margin: 8px;
    --border-width: 1px;
    --glow-size: 10px;
    --base-font-size: 15px;
  }

  .output {
    margin-bottom: 10px;
  }
}

/* Mobile portrait */
@media (max-width: 575px) {
  :root {
    --base-font-size: 13px;
    --terminal-padding: 12px;
  }

  .output {
    margin-bottom: 10px;
    font-size: 0.95em;
  }

  .prompt-line {
    font-size: 13px;
  }

  input {
    /* Ensure input doesn't cause zoom on mobile */
    font-size: 16px;
  }
}

/* Extra small screens */
@media (max-width: 375px) {
  :root {
    --terminal-padding: 8px;
    --terminal-margin: 2px;
    --base-font-size: 13px;
  }

  .output {
    font-size: 0.9em;
  }
}

/* Landscape orientation on mobile */
@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --terminal-margin: 4px;
  }

  .terminal, #bootScreen {
    max-height: 90vh;
  }

  body {
    min-height: 100vh;
  }
}

/* High DPI displays (Retina, etc) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .terminal, #bootScreen {
    /* Reduce glow on high DPI for sharper appearance */
    box-shadow: 0 0 calc(var(--glow-size) * 0.8) rgba(0, 217, 255, 0.5);
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .terminal, #bootScreen {
    scroll-behavior: auto;
  }

  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Dark mode support (already dark, but good practice) */
@media (prefers-color-scheme: light) {
  /* Keep terminal dark even if user prefers light mode - Kali theme */
  :root {
    --primary-color: #4AF626;
    --secondary-color: #00D9FF;
    --background-color: #0A0E14;
  }
}

/* Print styles */
@media print {
  .terminal, #bootScreen {
    border: 1px solid black;
    box-shadow: none;
    max-width: 100%;
  }

  input {
    display: none;
  }

  .output {
    page-break-inside: avoid;
  }
}

/* Terminal Glitch Effect - Mr. Robot Style */
@keyframes terminal-glitch {
  0% {
    opacity: 1;
    transform: translate(0);
    filter: hue-rotate(0deg);
  }
  10% {
    opacity: 0.8;
    transform: translate(-2px, 1px);
    filter: hue-rotate(90deg);
  }
  20% {
    opacity: 1;
    transform: translate(2px, -1px);
    filter: hue-rotate(180deg);
  }
  30% {
    opacity: 0.6;
    transform: translate(-1px, 2px);
    filter: hue-rotate(270deg);
  }
  40% {
    opacity: 1;
    transform: translate(1px, -2px);
    filter: hue-rotate(0deg);
  }
  50% {
    opacity: 0.4;
    transform: translate(-2px, -1px);
    filter: hue-rotate(90deg) contrast(2);
  }
  60% {
    opacity: 1;
    transform: translate(2px, 1px);
    filter: hue-rotate(180deg);
  }
  70% {
    opacity: 0.7;
    transform: translate(-1px, -2px);
    filter: hue-rotate(270deg);
  }
  80% {
    opacity: 1;
    transform: translate(1px, 2px);
    filter: hue-rotate(0deg);
  }
  90% {
    opacity: 0.5;
    transform: translate(-2px, 1px);
    filter: hue-rotate(90deg);
  }
  100% {
    opacity: 1;
    transform: translate(0);
    filter: hue-rotate(0deg);
  }
}

@keyframes terminal-flicker {
  0%, 100% {
    opacity: 1;
  }
  25% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.5;
  }
}

@keyframes text-glitch {
  0% {
    text-shadow:
      2px 0 var(--kali-red),
      -2px 0 var(--kali-cyan);
  }
  25% {
    text-shadow:
      -2px 0 var(--kali-red),
      2px 0 var(--kali-cyan);
  }
  50% {
    text-shadow:
      2px 2px var(--kali-red),
      -2px -2px var(--kali-cyan);
  }
  75% {
    text-shadow:
      -2px 2px var(--kali-red),
      2px -2px var(--kali-cyan);
  }
  100% {
    text-shadow:
      0 0 var(--kali-red),
      0 0 var(--kali-cyan);
  }
}

.terminal-glitching {
  animation: terminal-glitch 0.3s ease-in-out, terminal-flicker 0.15s ease-in-out;
}

.text-glitching {
  animation: text-glitch 0.5s ease-in-out infinite;
}