/* 1. The CRT Phosphor Palette */
:root {
  --bg-color: #050505; /* Deep monitor black */
  --text-color: #4af626; /* Bright phosphor green */
  --dim-text: #228b22; /* Dimmer green for borders/secondary text */
  --glow: 0 0 4px rgba(74, 246, 38, 0.6);
}

/* Optional: A harsh, high-contrast inverse for light mode */
@media (prefers-color-scheme: light) {
  :root {
    --bg-color: #f4f4f4;
    --text-color: #000000;
    --dim-text: #555555;
    --glow: none;
  }
}

/* 2. Base Terminal Styling */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: "Courier New", Consolas, Monaco, monospace;
  font-weight: bold;
  padding: 30px;
  text-shadow: var(--glow); /* The magic CRT glow */

  /* Subtle CSS-only scanlines for the background */
  background-image: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.15),
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 2px
  );
}

/* 3. Links and Highlights */
a {
  color: var(--text-color);
  text-decoration: none;
  border-bottom: 1px solid var(--dim-text);
}

a:hover {
  background-color: var(--text-color);
  color: var(--bg-color);
  text-shadow: none;
}

/* Terminal-style text selection (click and drag) */
::selection {
  background: var(--text-color);
  color: var(--bg-color);
  text-shadow: none;
}

/* 4. Structural Elements */
nav {
  text-align: center;
  margin-bottom: 20px;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline;
}

nav li a {
  padding: 2px 8px;
  border: none;
}

/* Add square brackets around nav links for a TUI feel */
nav li a::before {
  content: "[ ";
  color: var(--dim-text);
}
nav li a::after {
  content: " ]";
  color: var(--dim-text);
}

h1,
h2,
h3 {
  text-transform: uppercase;
}

h3 a.ablack {
  font-size: xx-large;
  border: none;
}

/* A blinking block cursor on the main title */
h3 a.ablack::after {
  content: "█";
  animation: blink 1.2s step-start infinite;
  margin-left: 8px;
}

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

li,
ul.sublist {
  padding-top: 3px;
}

/* 6. Long-Form Reading Pane */
article.long-form {
  /* 1. Match the homepage box aesthetics */
  border: 2px dashed var(--dim-text);

  /* The homepage uses rgba(0, 20, 0, 0.4), which is transparent and will let 
     the CSS scanlines bleed through. To get the solid color you wanted 
     for readability, we use the base background color. */
  background-color: var(--bg-color);

  /* 2. Constrain width and center for readability */
  /* max-width: 160ch; */
  max-width: 100%;

  /* 3. Internal spacing */
  padding: 30px;
}

/* Optional: Slight typography adjustments inside the article */
article.long-form p {
  margin-bottom: 1.5em;
}

article.long-form h2 {
  border-bottom: 1px dashed var(--dim-text);
  padding-bottom: 5px;
  margin-top: 1.5em;
}

/* Targets any link within your nav that is currently active */
nav a[aria-current="page"] {
  font-weight: bold;
  text-decoration: underline;
  text-underline-offset: 4px; /* Gives a bit of breathing room */
}

/* Optional: You might want to disable the hover effect on the active page */
nav a[aria-current="page"]:hover {
  cursor: default;
  /* Keep the color the same so it doesn't look like a clickable link */
}

dt {
  font-weight: bold;
  margin-top: 1.5rem; /* Adds space above each new term */
}

/* Remove the top margin from the very first term so it aligns nicely with your headers */
dt:first-of-type {
  margin-top: 0;
}

/* Adjust the description text and add a little spacing below it */
dd {
  margin-bottom: 0.5rem;
  margin-left: 1rem; /* Keeps the default browser indent, but standardizes it */
  line-height: 1.5;
}

/* Remove default list styling for the project grid */
.item-grid {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 2rem; /* Creates space between your project cards */
}

.item-card {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 1.5rem;
}

/* Style the nested tech list to look like pills */
.tech-tags {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tech-tags li {
  background-color: #f0f0f0;
  color: #333;
  padding: 0.25rem 0.75rem;
  border-radius: 16px;
  font-size: 0.85rem;
}

/* If you implement Dark Mode, remember to invert the pill colors! */
@media (prefers-color-scheme: dark) {
  .tech-tags li {
    background-color: #333;
    color: #eee;
  }
}

/* 5. ASCII-Art Style Layout Borders */
@media screen and (min-width: 768px) {
  .flex-container {
    display: flex;
  }

  .flex-container > section {
    margin: 10px;
    padding: 15px;
    width: 50%;
    border: 2px dashed var(--dim-text); /* Dashed lines feel more like CLI UI */
    background-color: rgba(0, 20, 0, 0.4); /* Slight tint for content boxes */
  }
}