/* textfiles - minimalist cyberpunk hugo theme */
/* inspired by: phrack, hackers (1995), monospace web */

:root {
  /* core palette - tokyo night inspired */
  --bg: #16161e;
  --bg-alt: #13131a;
  --bg-code: #16161e;
  --fg: #b4b4b4;
  --fg-dim: #6b6b6b;
  --fg-bright: #e8e8e8;

  /* accent colors - used sparingly */
  --purple: #9d7cd8;
  --purple-dim: rgba(157, 124, 216, 0.2);
  --blue: #7aa2f7;
  --cyan: #7dcfff;
  --teal: #73daca;
  --green: #9ece6a;
  --yellow: #e0af68;
  --orange: #ff9e64;
  --red: #f7768e;

  /* functional */
  --link: var(--blue);
  --link-hover-bg: rgba(122, 162, 247, 0.15);
  --border: #222222;
  --border-bright: #333333;
  --selection-bg: var(--purple-dim);
  --selection-fg: var(--fg-bright);

  /* spacing */
  --space: 1rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;

  /* typography */
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', monospace;
  --font-size: 15px;
  --line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--font-size);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: var(--line-height);
  color: var(--fg);
  background: var(--bg);
  padding: var(--space-lg);
  max-width: 80ch;
  margin: 0 auto;
}

/* selection */
::selection {
  background: var(--selection-bg);
  color: var(--selection-fg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LINKS
   ═══════════════════════════════════════════════════════════════════════════ */

a {
  color: var(--link);
  text-decoration: none;
  transition: background-color 0.1s;
}

a::before {
  content: '[';
}

a::after {
  content: ']';
}

a:hover {
  background-color: var(--link-hover-bg);
}

/* Anchor links (in-page) - no brackets, underlined, blue on hover */
a[href^="#"] {
  text-decoration: underline;
  text-decoration-color: var(--fg-dim);
  text-underline-offset: 2px;
}

a[href^="#"]::before,
a[href^="#"]::after {
  content: none;
}

a[href^="#"]:hover {
  color: var(--blue);
  background-color: transparent;
  text-decoration-color: var(--blue);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════════════════════ */

header {
  margin-bottom: var(--space-lg);
}

header nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space);
}

header nav .nav-link {
  color: var(--link);
}

/* nav-links inherit bracket styling from a::before/after */

header nav .nav-link:hover {
  background-color: var(--link-hover-bg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MAIN CONTENT
   ═══════════════════════════════════════════════════════════════════════════ */

main {
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */

footer {
  margin-top: var(--space-lg);
  font-size: 0.85rem;
  color: var(--fg-dim);
}

footer p {
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ═══════════════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  color: var(--fg-bright);
  font-weight: normal;
  margin: var(--space-lg) 0 var(--space) 0;
  line-height: 1.3;
}

h1 { font-size: 1.4rem; }

h2, h3, h4, h5, h6 {
  text-decoration: underline;
  text-decoration-color: var(--fg-dim);
  text-underline-offset: 4px;
}

h2 { font-size: 1.2rem; }
h3 { font-size: 1.1rem; }
h4, h5, h6 { font-size: 1rem; }


p {
  margin: var(--space) 0;
}

strong {
  color: var(--fg-bright);
  font-weight: bold;
}

em {
  font-style: italic;
  color: var(--yellow);
}

del, s {
  color: var(--red);
  text-decoration: line-through;
  text-decoration-color: var(--red);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LISTS
   ═══════════════════════════════════════════════════════════════════════════ */

ul, ol {
  margin: var(--space) 0;
  padding-left: var(--space-lg);
}

li {
  margin: var(--space-sm) 0;
}

ul {
  list-style-type: disc;
}

ul ul {
  list-style-type: circle;
}

ul li::marker, ol li::marker {
  color: var(--fg-dim);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CODE
   ═══════════════════════════════════════════════════════════════════════════ */

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-code);
  color: var(--orange);
  padding: 0.1em 0.4em;
  border: 1px solid var(--border);
}

pre {
  margin: var(--space) 0;
  padding: var(--space);
  background: var(--bg-code);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  overflow-x: auto;
}

pre code {
  background: none;
  border: none;
  padding: 0;
}

/* Code block wrapper */
.code-block {
  margin: var(--space) 0;
}

.code-lang {
  font-size: 0.75rem;
  color: var(--fg-dim);
  padding: var(--space-xs) var(--space-sm);
  background: var(--bg);
  border: 1px solid var(--border);
  border-bottom: none;
  display: inline-block;
}

/* Chroma syntax highlighting */
.code-block .highlight {
  margin: 0;
}

.highlight {
  margin: var(--space) 0;
}

.highlight pre {
  margin: 0;
  background: var(--bg);
}

.highlight code {
  background: transparent;
  border: none;
  padding: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BLOCKQUOTES
   ═══════════════════════════════════════════════════════════════════════════ */

blockquote {
  margin: var(--space) 0;
  padding: var(--space);
  border-left: 3px solid var(--orange);
  color: var(--fg);
  font-style: italic;
}


blockquote p:first-child {
  margin-top: 0;
  display: inline;
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HORIZONTAL RULE
   ═══════════════════════════════════════════════════════════════════════════ */

hr {
  border: none;
  margin: var(--space-lg) 0;
  text-align: center;
  color: var(--border-bright);
}

hr::before {
  content: '────────────────────────────────────────';
}

/* ═══════════════════════════════════════════════════════════════════════════
   FILE LISTING (Homepage)
   ═══════════════════════════════════════════════════════════════════════════ */

.file-listing {
  margin: var(--space) 0;
}

.file-listing-header {
  color: var(--fg-dim);
  margin-bottom: var(--space);
  font-size: 0.9rem;
}

/* ls -la style permission colors */
.perm-d { color: var(--blue); }
.perm-r { color: var(--yellow); }
.perm-w { color: var(--red); }
.perm-x { color: var(--green); }
.perm-none { color: var(--fg-dim); }
.ls-count { color: var(--green); }
.ls-dir { color: var(--yellow); }

.file-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.file-item {
  margin: 0;
  padding: var(--space-xs) 0;
  display: flex;
  align-items: baseline;
  gap: var(--space);
}

.file-item::before {
  content: none;
}

.file-bullet {
  color: var(--fg-dim);
  flex-shrink: 0;
}

.file-link {
  color: var(--link);
}

.file-link:hover {
  background-color: var(--link-hover-bg);
}

.file-date {
  color: var(--fg-dim);
  font-size: 0.85rem;
  margin-left: auto;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   POST SUMMARY (List page) - keeping for tags/categories
   ═══════════════════════════════════════════════════════════════════════════ */

.post-summary {
  margin: var(--space-lg) 0;
  padding: var(--space) 0;
  border-bottom: 1px dashed var(--border);
}

.post-summary:last-child {
  border-bottom: none;
}

.summary-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.summary-date {
  color: var(--fg-dim);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.summary-separator {
  color: var(--fg-dim);
}

.summary-header h2 {
  margin: 0;
  font-size: 1rem;
}

.summary-header h2::before {
  content: none;
}

.summary-header h2 a {
  color: var(--link);
}

.summary-header h2 a:hover {
  background-color: var(--link-hover-bg);
}

.summary-tags {
  margin-top: var(--space-xs);
}

.summary-tags a {
  color: var(--fg-dim);
  font-size: 0.8rem;
  margin-right: var(--space-sm);
}

.summary-tags a::before,
.summary-tags a::after {
  content: none;
}

.summary-tags a:hover {
  color: var(--fg-bright);
  background-color: var(--link-hover-bg);
}

.summary-content {
  margin-top: var(--space-sm);
  color: var(--fg-dim);
  font-size: 0.9rem;
}

.read-more {
  color: var(--cyan);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SINGLE POST
   ═══════════════════════════════════════════════════════════════════════════ */

.post {
  margin: 0;
}

.post-header {
  margin-bottom: var(--space-lg);
  border: none;
  padding: 0;
}

.post-meta-top {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--fg-dim);
  margin-bottom: var(--space-sm);
}

.file-path {
  color: var(--yellow);
}

.file-perms {
  color: var(--fg-dim);
}

.post-header h1 {
  margin: var(--space-sm) 0;
  color: var(--fg-bright);
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space);
  font-size: 0.85rem;
  margin-top: var(--space);
}

.meta-item {
  display: inline-flex;
  gap: var(--space-xs);
}

.meta-label {
  color: var(--fg-dim);
}

.meta-item time,
.meta-item span:not(.meta-label) {
  color: var(--fg-dim);
}

.meta-item .tags a {
  color: var(--fg-dim);
  margin-right: var(--space-sm);
}

.meta-item .tags a::before,
.meta-item .tags a::after {
  content: none;
}

.meta-item .tags a:hover {
  color: var(--fg-bright);
  background-color: var(--link-hover-bg);
}

/* Post content */
.post-content {
  margin: var(--space-lg) 0;
}

/* Post navigation */
.post-nav {
  margin-top: var(--space-xl);
  padding-top: var(--space);
}

.nav-divider {
  color: var(--border-bright);
  font-size: 0.85rem;
  margin-bottom: var(--space);
  text-align: center;
}

.nav-links {
  display: flex;
  justify-content: space-between;
  gap: var(--space);
}

.nav-prev,
.nav-next {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-width: 45%;
}

.nav-next {
  text-align: right;
  margin-left: auto;
}

.nav-label {
  color: var(--cyan);
  font-size: 0.8rem;
}

.nav-title {
  color: var(--fg);
  font-size: 0.9rem;
}

.nav-prev:hover .nav-title,
.nav-next:hover .nav-title {
  color: var(--fg-bright);
}

.nav-prev::before,
.nav-prev::after,
.nav-next::before,
.nav-next::after {
  content: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════════════════ */

table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space) 0;
  font-size: 0.9rem;
}

th, td {
  text-align: left;
  padding: var(--space-sm);
  border: 1px solid var(--border);
}

th {
  background: var(--bg-alt);
  color: var(--cyan);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
}

tr:hover td {
  background: var(--bg-alt);
}

/* ═══════════════════════════════════════════════════════════════════════════
   IMAGES
   ═══════════════════════════════════════════════════════════════════════════ */

img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border);
}

figure {
  margin: var(--space) 0;
}

figcaption {
  color: var(--fg-dim);
  font-size: 0.85rem;
  text-align: center;
  margin-top: var(--space-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════════════════════════ */

.pagination {
  margin-top: var(--space-xl);
  display: flex;
  justify-content: center;
  gap: var(--space);
}

.pagination a,
.pagination span {
  padding: var(--space-sm) var(--space);
  border: 1px solid var(--border);
}

.pagination a::before,
.pagination a::after {
  content: none;
}

.pagination a:hover {
  border-color: var(--fg-dim);
  background: var(--link-hover-bg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   404 ERROR PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

.error-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

.error-container {
  text-align: center;
}

.error-ascii {
  color: var(--red);
  font-size: 0.6rem;
  line-height: 1.2;
  margin-bottom: var(--space-lg);
  border-left-color: var(--red);
}

.error-code {
  color: var(--red);
  font-size: 1.2rem;
  margin-bottom: var(--space);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.error-details {
  text-align: left;
  margin: var(--space-lg) 0;
}

.error-details pre {
  background: none;
  border: none;
  border-left: 3px solid var(--red);
  font-size: 0.85rem;
  line-height: 1.5;
}

.error-prompt {
  margin-top: var(--space-lg);
}

.error-prompt .prompt {
  color: var(--green);
}

.error-prompt .cursor {
  color: var(--fg-dim);
}

.blink {
  animation: blink 1s step-end infinite;
}

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

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR (hidden by default)
   ═══════════════════════════════════════════════════════════════════════════ */

aside {
  display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHORTCODES - CALLOUTS
   ═══════════════════════════════════════════════════════════════════════════ */

.callout {
  margin: var(--space) 0;
  padding: var(--space-sm) var(--space);
  background: var(--bg-alt);
  border: 1px solid var(--fg-dim);
  border-left-width: 3px;
}

.callout-title {
  font-weight: bold;
  color: var(--fg-bright);
}

.callout-content {
  margin-top: var(--space-sm);
}

.callout-content p:first-child {
  margin-top: 0;
}

.callout-content p:last-child {
  margin-bottom: 0;
}

.callout-note {
  background: rgba(122, 162, 247, 0.15);
  border-color: var(--blue);
}

.callout-note .callout-title::before {
  content: '✎ ';
}

.callout-note .callout-title {
  color: var(--blue);
}

.callout-info {
  background: rgba(122, 162, 247, 0.15);
  border-color: var(--blue);
}

.callout-info .callout-title::before {
  content: '⊙ ';
}

.callout-info .callout-title {
  color: var(--blue);
}

.callout-important {
  background: rgba(157, 124, 216, 0.15);
  border-color: var(--purple);
}

.callout-important .callout-title::before {
  content: '★ ';
}

.callout-important .callout-title {
  color: var(--purple);
}

.callout-tip {
  background: rgba(158, 206, 106, 0.15);
  border-color: var(--green);
}

.callout-tip .callout-title::before {
  content: '⟳ ';
}

.callout-tip .callout-title {
  color: var(--green);
}

.callout-warning {
  background: rgba(224, 175, 104, 0.15);
  border-color: var(--yellow);
}

.callout-warning .callout-title::before {
  content: '△ ';
}

.callout-warning .callout-title {
  color: var(--yellow);
}

.callout-danger {
  background: rgba(247, 118, 142, 0.15);
  border-color: var(--red);
}

.callout-danger .callout-title::before {
  content: '⚡ ';
}

.callout-danger .callout-title {
  color: var(--red);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHORTCODES - TABLE OF CONTENTS
   ═══════════════════════════════════════════════════════════════════════════ */

.toc {
  margin: var(--space) 0 var(--space-lg) 0;
  font-size: 0.9rem;
}

.toc-title {
  color: var(--fg);
  margin-bottom: var(--space-sm);
  font-weight: normal;
}

.toc nav,
.toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.toc li {
  margin: var(--space-xs) 0;
}

.toc a {
  color: var(--fg-dim);
  text-decoration: none;
}

.toc a:hover {
  color: var(--link);
  background-color: var(--link-hover-bg);
}

.toc a::before,
.toc a::after {
  content: none;
}

.toc ul ul {
  padding-left: var(--space);
}

/* ASCII style TOC */
.toc-ascii {
  border-left: none;
  padding-left: 0;
}

.toc-ascii ul {
  list-style: decimal;
  padding-left: 2em;
}

.toc-ascii ul ul {
  list-style: lower-alpha;
}

.toc-ascii li {
  color: var(--orange);
}

.toc-ascii li::marker {
  color: var(--orange);
}

.toc-ascii a {
  color: var(--orange);
}

.toc-ascii a:hover {
  color: var(--fg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SYSTEM INFO TABLE (ASCII style)
   ═══════════════════════════════════════════════════════════════════════════ */

.system-info {
  margin: var(--space) 0;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--fg-dim);
  font-size: 0.85rem;
  line-height: 1.4;
  overflow-x: auto;
}

.si-label {
  color: var(--fg);
}

.si-value {
  color: var(--fg);
}

.si-status {
  font-weight: normal;
}

.si-online {
  color: var(--green);
}

.si-offline {
  color: var(--red);
}

.si-maintenance {
  color: var(--yellow);
}

.si-degraded {
  color: var(--orange);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHORTCODES - ASCII DIAGRAMS
   ═══════════════════════════════════════════════════════════════════════════ */

.ascii-diagram {
  color: var(--fg);
  background: transparent;
  border: none;
  padding: 0;
  margin: var(--space) 0;
  overflow-x: auto;
  line-height: 1.2;
}

.ascii-teal {
  color: var(--teal);
}

.ascii-orange {
  color: var(--orange);
}

.ascii-red {
  color: var(--red);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHORTCODES - ASCII TABLES
   ═══════════════════════════════════════════════════════════════════════════ */

.ascii-table table {
  border-collapse: collapse;
  margin: var(--space) 0;
  font-size: 0.9rem;
}

.ascii-table th,
.ascii-table td {
  padding: 0.3em 1em;
  border: 1px solid var(--fg);
  text-align: left;
  color: var(--fg) !important;
  background: transparent;
  font-weight: normal;
  font-size: inherit;
}

.ascii-table th {
  border: 1px dashed var(--fg);
}

.ascii-table tbody tr:first-child td {
  border-top: 1px dashed var(--fg);
}

/* Table color variants */
.ascii-table-teal th,
.ascii-table-teal td {
  border-color: var(--teal);
  color: var(--teal) !important;
}

.ascii-table-teal th,
.ascii-table-teal tbody tr:first-child td {
  border-top-style: dashed;
}

.ascii-table-orange th,
.ascii-table-orange td {
  border-color: var(--orange);
  color: var(--orange) !important;
}

.ascii-table-orange th,
.ascii-table-orange tbody tr:first-child td {
  border-top-style: dashed;
}

.ascii-table-red th,
.ascii-table-red td {
  border-color: var(--red);
  color: var(--red) !important;
}

.ascii-table-red th,
.ascii-table-red tbody tr:first-child td {
  border-top-style: dashed;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHORTCODES - MARKS
   ═══════════════════════════════════════════════════════════════════════════ */

.mark {
  padding: 0.1em 0.3em;
  border-radius: 2px;
  background: transparent;
  color: inherit;
}

.mark-yellow {
  background: rgba(224, 175, 104, 0.3);
  color: var(--yellow);
}

.mark-blue {
  background: rgba(122, 162, 247, 0.3);
  color: var(--blue);
}

.mark-green {
  background: rgba(158, 206, 106, 0.3);
  color: var(--green);
}

.mark-red {
  background: rgba(247, 118, 142, 0.3);
  color: var(--red);
}

.mark-purple {
  background: rgba(157, 124, 216, 0.3);
  color: var(--purple);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOMELAB LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */

.homelab-main {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--space-lg);
  width: max-content;
  margin-left: calc(-180px - var(--space-lg));
}

.homelab-content {
  min-width: 0;
  max-width: 80ch;
}

.homelab-content .file-listing {
  margin-top: 0;
}

.homelab-description {
  margin-top: var(--space-lg);
  color: var(--fg-dim);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FILETREE SIDEBAR
   ═══════════════════════════════════════════════════════════════════════════ */

.filetree {
  padding-right: var(--space);
  border-right: 1px solid var(--border);
  font-size: 0.85rem;
}

.filetree-header {
  margin-bottom: var(--space-sm);
}

.filetree-root {
  color: var(--yellow);
  font-weight: bold;
}

.filetree-root::before,
.filetree-root::after {
  content: none;
}

.filetree-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.filetree-section {
  margin: 0;
}

.filetree-files {
  list-style: none;
  padding: 0;
  margin: 0;
}

.filetree-files li {
  margin: 0;
}

.filetree-line {
  color: var(--fg-dim);
  white-space: pre;
}

.filetree-dir {
  color: var(--yellow);
}

.filetree-dir::before,
.filetree-dir::after,
.filetree-file::before,
.filetree-file::after {
  content: none;
}

.filetree-file {
  color: var(--fg);
}

.filetree-current {
  color: var(--fg-bright);
  background: var(--link-hover-bg);
  padding: 0 0.25em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BREADCRUMBS
   ═══════════════════════════════════════════════════════════════════════════ */

.breadcrumbs {
  margin-bottom: var(--space);
  font-size: 0.85rem;
}

.bc-home {
  color: var(--blue);
}

.bc-sep {
  color: var(--fg-dim);
}

.bc-dir {
  color: var(--yellow);
}

.bc-dir::before,
.bc-dir::after {
  content: none;
}

.bc-dir:hover {
  background: var(--link-hover-bg);
}

.bc-current {
  color: var(--fg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   STATUS BADGES
   ═══════════════════════════════════════════════════════════════════════════ */

.status-badge {
  font-size: 0.7rem;
  padding: 0.15em 0.5em;
  border-radius: 2px;
  text-transform: uppercase;
  font-weight: normal;
  vertical-align: middle;
  margin-left: var(--space-sm);
}

.status-online {
  background: rgba(158, 206, 106, 0.2);
  color: var(--green);
  border: 1px solid var(--green);
}

.status-offline {
  background: rgba(247, 118, 142, 0.2);
  color: var(--red);
  border: 1px solid var(--red);
}

.status-maintenance {
  background: rgba(224, 175, 104, 0.2);
  color: var(--yellow);
  border: 1px solid var(--yellow);
}

.status-degraded {
  background: rgba(255, 158, 100, 0.2);
  color: var(--orange);
  border: 1px solid var(--orange);
}

/* Environment badges */
.env-badge {
  font-size: 0.7rem;
  padding: 0.15em 0.5em;
  border-radius: 2px;
  text-transform: uppercase;
  font-weight: normal;
  vertical-align: middle;
  margin-left: var(--space-sm);
}

.env-prod {
  background: rgba(247, 118, 142, 0.2);
  color: var(--red);
  border: 1px solid var(--red);
}

.env-stage {
  background: rgba(224, 175, 104, 0.2);
  color: var(--yellow);
  border: 1px solid var(--yellow);
}

.env-dev {
  background: rgba(122, 162, 247, 0.2);
  color: var(--blue);
  border: 1px solid var(--blue);
}

/* Version badge (git hash) */
.version-badge {
  font-size: 0.7rem;
  padding: 0.15em 0.5em;
  border-radius: 2px;
  font-weight: normal;
  vertical-align: middle;
  margin-left: var(--space-sm);
  background: rgba(157, 124, 216, 0.2);
  color: var(--purple);
  border: 1px solid var(--purple);
  font-family: inherit;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TAGS (Terminal-style)
   ═══════════════════════════════════════════════════════════════════════════ */

.tag {
  color: var(--fg-dim);
  margin-right: var(--space-sm);
}

.tag::before {
  content: '#';
}

.tag::after {
  content: none;
}

.tag:hover {
  color: var(--blue);
  background: var(--link-hover-bg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {
  :root {
    --font-size: 14px;
  }

  body {
    padding: var(--space);
  }

  .post-meta {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .nav-links {
    flex-direction: column;
  }

  .nav-prev,
  .nav-next {
    max-width: 100%;
    text-align: left;
  }

  .file-item {
    flex-wrap: wrap;
  }

  .file-date {
    margin-left: calc(var(--space) + 1ch);
    width: 100%;
  }

  /* Homelab responsive */
  .homelab-main {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-left: 0;
  }

  .filetree {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding-right: 0;
    padding-bottom: var(--space);
    margin-bottom: var(--space);
  }
}