/* ==========================================================================
   RetroCosi Custom Styles (Overrides for hugo-theme-re-terminal)
   ========================================================================== */

/* CRT phosphor text glow effect on main headings */
.logo {
  font-weight: 700;
  letter-spacing: 0.05em;
  text-shadow: 0 0 8px rgba(120, 226, 160, 0.4);
  position: relative;
}

/* Blinking terminal cursor on site logo */
.logo::after {
  content: " █";
  display: inline-block;
  margin-left: 4px;
  animation: retro-cursor 1s steps(2, start) infinite;
}

@keyframes retro-cursor {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Enhanced retro look for framed intro */
.index-content.framed {
  background: color-mix(in srgb, var(--accent) 3%, var(--background) 97%);
  border: 1px solid var(--accent);
  box-shadow: 0 0 15px rgba(120, 226, 160, 0.08);
  position: relative;
  overflow: hidden;
}

/* CRT subtle scanline effect on post covers */
.post-cover {
  border: 1px solid var(--border-color);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.post-cover:hover {
  border-color: var(--accent);
  box-shadow: 0 0 16px rgba(120, 226, 160, 0.2);
}

/* Buttons retro accent enhancement */
.button, a.read-more {
  border: 1px solid var(--accent);
  transition: all 0.2s ease;
}

.button:hover, a.read-more:hover {
  background: var(--accent);
  color: var(--background) !important;
  box-shadow: 0 0 10px rgba(120, 226, 160, 0.4);
}

/* ASCII art pre blocks formatting */
pre {
  border: 1px solid var(--border-color);
  border-radius: 4px;
}

/* Post tags style */
.post-tags a {
  text-decoration: none;
  opacity: 0.85;
}

.post-tags a:hover {
  color: var(--accent);
  opacity: 1;
}

/* Clean table styling for hardware specs */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 0.95rem;
}

table th {
  background: color-mix(in srgb, var(--accent) 15%, var(--background) 85%);
  color: var(--accent);
  text-align: left;
  padding: 10px;
  border: 1px solid var(--border-color);
}

table td {
  padding: 8px 10px;
  border: 1px solid var(--border-color);
}

table tr:nth-child(even) {
  background: color-mix(in srgb, var(--accent) 4%, var(--background) 96%);
}