/* =============================
    Color Variables
============================= */
:root {
  --clr-lime: lime;
  --clr-green: #80ff80;
  --clr-purple: #9933FF;
  --fs-sm: 0.9rem;
  --fs-base: 1rem;
  --fs-md: 1.2rem;
  --fs-lg: 1.5rem;
  --fs-xl: 1.8rem;
}

/* =============================
    Global Reset & Layout
============================= */
* {
  box-sizing: border-box;
}

body {
  background: black;
  color: var(--clr-green);
  font-family: monospace;
  margin: 0;
  padding: 0;
  font-size: var(--fs-base);
  line-height: 1.5;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Reverted to height: 100vh as in your working code */
  height: 100vh;
  overflow: hidden; /* Added to prevent scroll on body if content overflows viewport */
}

.layout-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Reverted to height: 100vh as in your working code */
  height: 100vh;
  width: 100%;
  /* Add padding to layout-center for smaller screens if needed,
     otherwise content might touch edges */
  padding: 1rem;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Added a max-width to main for better readability on very wide screens */
  max-width: 900px; /* Adjust as needed */
  width: 100%;
}

/* =============================
    Typography Utilities
============================= */
.text-center { text-align: center; }
.text-left { text-align: left; } /* Keep this for specific overrides */
.text-right { text-align: right; }

.text-body {
  font-size: var(--fs-base);
  margin: 0.5em 0;
}

.heading-md {
  font-size: var(--fs-md);
  font-weight: bold;
  margin-bottom: 1rem;
  color: var(--clr-lime);
  width: 100%;
  text-align: center;
}

/* =============================
    Header & Buttons
============================= */
h1 {
  cursor: pointer;
  color: var(--clr-lime);
  text-transform: uppercase;
  font-size: var(--fs-xl);
  line-height: 1.2;
  margin-bottom: 1rem;
  transition: text-shadow 0.3s ease, color 0.3s ease;
  text-align: center; /* Ensures h1 is centered */
}

h1:hover {
  text-shadow: 0 0 8px lime, 0 0 12px black;
}

.button-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.commands {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  max-width: 800px;
  width: 100%;
}

button {
  background: var(--clr-lime);
  color: black;
  padding: 0.5rem 1.2rem;
  border: none;
  font-family: monospace;
  cursor: pointer;
  font-weight: bold;
  font-size: var(--fs-base);
  line-height: 1.2;
  transition: all 0.2s ease;
  flex-basis: auto;
  min-width: 120px; /* Prevents buttons from becoming too small */
}

button:hover {
  background: #99ff99;
  box-shadow: 0 0 4px var(--clr-lime);
}

button:active {
  transform: scale(0.98);
}

button:focus,
#terminal-input:focus {
  outline: 2px solid var(--clr-purple);
  outline-offset: 2px;
}

/* =============================
    Terminal & Prompt Styles
============================= */
.terminal-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

.terminal {
  background: #111;
  padding: 1.5rem;
  border: 1px solid var(--clr-lime);
  color: var(--clr-lime);
  font-family: monospace;
  font-size: var(--fs-base);
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  /* Reverted align-items to center and text-align to center */
  align-items: center;
  justify-content: flex-start;
  overflow-y: auto;
  text-align: center;
  min-height: 200px;
  max-height: 60vh;
  box-sizing: border-box;
  scroll-behavior: smooth;
}

#prompt {
  margin-top: 1rem;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%; /* Important for centering the prompt-line */
}

.prompt-line {
  display: flex;
  align-items: center;
  gap: 0.5em;
  border: 1px solid var(--clr-lime);
  padding: 0.5em;
  width: 100%;
  max-width: 500px; /* Limits the width of the prompt line */
  box-sizing: border-box;
  font-family: monospace;
  font-size: var(--fs-base);
  /* This ensures the content inside the prompt-line is left-aligned */
  justify-content: flex-start;
}

.prompt-char {
  color: var(--clr-lime);
  font-weight: bold;
}

#terminal-input {
  background: black;
  color: var(--clr-lime);
  border: none;
  outline: none;
  font-family: monospace;
  font-size: var(--fs-base);
  width: 100%;
  min-width: 20ch;
  padding-left: 0.2em;
  line-height: 1.4;
  text-align: left; /* Input text should be left-aligned */
}

/* =============================
    Typing, Status & Helpers
============================= */
.terminal-tip {
  color: var(--clr-lime);
  font-size: var(--fs-sm);
  font-style: italic;
  margin-top: 1em;
  line-height: 1.4;
  text-align: center;
  width: 100%;
}

.status-msg {
  text-align: center;
  width: 100%;
  padding: 0.5em 0;
  animation: fadeIn 1s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#typed-text::after {
  content: "_";
  animation: blink 1s step-start infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* IMPORTANT: Removed .hidden class as per your working code's JS
   If you decide to use it again, remember to add it back:
   .hidden { display: none !important; }
*/

/* =============================
    Terminal Header (whoami)
============================= */
.terminal-heading {
  margin-bottom: 1rem;
  line-height: 1.5;
  text-align: center;
  width: 100%;
}

.terminal-heading b {
  color: var(--clr-lime);
  font-size: 1.2rem;
}

.terminal-heading i {
  color: var(--clr-purple);
  font-style: italic;
  font-size: 1rem;
}

.terminal-body {
  color: var(--clr-lime);
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.8;
  padding: 0 1rem;
}

/* =============================
    Shared Box Component
============================= */
.content-box {
  width: 100%;
  max-width: 700px;
  margin: 2rem auto 0;
  padding: 1.5rem;
  background-color: #111;
  color: var(--clr-lime);
  font-family: monospace;
  text-align: center;
  line-height: 1.6;
  border: none;
  box-sizing: border-box;
}

/* =============================
    Section Titles & Content
============================= */
.section-title {
  font-size: var(--fs-md);
  font-weight: bold;
  margin-bottom: 1.5rem;
  color: var(--clr-lime);
}

.section-heading {
  font-weight: bold;
  color: var(--clr-green);
  margin-top: 1.2rem;
}

.section-content {
  font-size: var(--fs-sm);
  opacity: 0.85;
  margin-top: 0.3rem;
}

.section-link a {
  color: var(--clr-purple); /* Explicitly set link color to purple */
  text-decoration: underline;
  font-size: var(--fs-sm);
  display: inline-block;
  margin-top: 1rem;
  transition: color 0.2s ease;
}

.section-link a:hover {
  color: var(--clr-lime);
}

/* =============================
    Project Line Display (final)
============================= */
.project-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: baseline;
  font-size: 0.9rem;
  color: var(--clr-lime);
  margin: 0.5rem 0;
  /* Use text-align: left for content *within* project-line */
  text-align: left;
  line-height: 1.4;
  padding: 0 0.5rem;
  word-break:break-word;
  justify-content: flex-start; /* Aligns content inside project-line to the left */
}

.project-title {
  font-weight: bold;
  color: var(--clr-purple); /* Explicitly set project title color to purple */
}

.project-title a {
  color: var(--clr-purple); /* Ensure links within project title are purple */
  text-decoration: underline;
}

.project-title a:hover {
  color: var(--clr-lime);
}

.project-dash {
  white-space: nowrap;
}

.project-desc {
  flex: 1;
  min-width: 50%;
}

/* =============================
    Command List Grid
============================= */
.command-list {
  display: grid;
  grid-template-columns: 2em 12ch auto;
  column-gap: 1.5em;
  row-gap: 0.4em;
  margin: 2rem auto 0;
  font-family: monospace;
  width: fit-content;
  max-width: 100%;
  padding: 0 1rem;
  /* Center the command-list within its container */
  justify-content: center;
}

.arrow {
  color: var(--clr-purple);
  text-align: right;
  width: 2em;
  display: inline-block;
  padding-right: 0.2em;
}

.cmd,
.desc,
.cmd-header,
.desc-header {
  font-size: var(--fs-base);
  font-family: monospace;
  white-space: pre-wrap; /* Changed from pre to pre-wrap for better text flow */
  line-height: 1.4;
  color: var(--clr-lime);
  word-break: break-word;
}

.cmd {
  font-weight: bold;
  text-align: left;
}

.desc {
  text-align: left;
  font-style: italic;
  opacity: 0.85;
  font-size: var(--fs-sm);
}

.cmd-header,
.desc-header {
  font-style: italic;
  opacity: 0.7;
  text-shadow: 0 0 2px var(--clr-lime);
  text-align: left;
}

/* =============================
    Responsive (Mobile)
============================= */
@media (max-width: 768px) {
  body {
    align-items: flex-start; /* Changed to flex-start for mobile scrolling */
    height: auto; /* Allow body to grow on mobile */
  }

  .layout-center {
    height: auto; /* Allow layout-center to grow on mobile */
    padding: 0.5rem;
    align-items: stretch; /* Stretch to fill width for better content flow */
  }

  h1 {
    font-size: var(--fs-lg);
  }

  .button-wrapper,
  .commands {
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
  }

  .commands button {
    width: 100%;
    font-size: 1rem;
    padding: 0.75rem 1rem;
  }

  .content-box {
    padding: 1rem;
    margin: 1.5rem auto 0;
  }

  .prompt-line {
    flex-wrap: wrap;
    width: 100%;
    font-size: var(--fs-sm);
    padding: 0.4em;
  }

  #terminal-input {
    width: 100%;
    font-size: 1rem;
  }

  .terminal {
    height: auto;
    max-height: 70vh;
    overflow-y: auto;
    padding: 1rem;
    font-size: var(--fs-sm);
    /* For mobile, if you want general text left-aligned, set: */
    /* align-items: flex-start; */
    /* text-align: left; */
  }

  /* Command List Grid for Mobile */
  .command-list {
    grid-template-columns: 1fr; /* Stack columns on mobile */
    text-align: left;
    width: 100%; /* Takes full width on mobile */
    padding: 0 0.5rem; /* Adjust padding */
    margin: 1.5rem auto 0; /* Adjust margin */
    justify-content: flex-start; /* Align content left on mobile */
  }

  .arrow {
    display: none; /* Hide the arrow on mobile for cleaner look if stacking */
  }

  .cmd {
    font-size: var(--fs-base); /* Keep command font a bit larger */
    margin-bottom: 0.2em; /* Space between cmd and desc */
  }

  .desc {
    font-size: var(--fs-sm);
    margin-bottom: 0.8em; /* Space after description */
  }

  .cmd-header,
  .desc-header {
    display: none; /* Hide headers on mobile for a cleaner look if stacking */
  }

  .project-line {
    font-size: 0.85rem;
    padding: 0 0.25rem;
  }
}

@media (max-width: 480px) {
  /* Smaller adjustments for very small mobile devices */
  :root {
    --fs-sm: 0.8rem;
    --fs-base: 0.9rem;
    --fs-md: 1.1rem;
    --fs-lg: 1.3rem;
    --fs-xl: 1.6rem;
  }

  .layout-center {
    padding: 0.25rem;
  }

  .terminal {
    padding: 0.8rem;
  }

  .commands button {
    padding: 0.6rem 0.8rem;
  }
}

/* =============================
    Links
============================= */
.terminal-link:link,
.terminal-link:visited {
  color: var(--clr-purple);
  text-decoration: underline;
}

.terminal-link:hover,
.terminal-link:active {
  color: var(--clr-lime);
}