/*
Theme Name: Serverboy
Theme URI: https://serverboy.net
Author: Saad Momekh
Author URI: https://serverboy.net
Description: A console-style child theme of Twenty Twenty-Five for self-hosting and homelab blogs. JetBrains Mono headlines, Inter body, leaf-green accent.
Template: twentytwentyfive
Version: 1.1.0
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: serverboy
Tags: blog, one-column, custom-colors, custom-menu, editor-style, full-site-editing, block-patterns, block-styles, wide-blocks
*/

/* ───────────────────────────────────────────────────────────────────
   Serverboy — front-end overrides on top of TT5
   Most styling is driven by theme.json. This file adds the
   console/terminal flourishes that JSON can't express.
   ─────────────────────────────────────────────────────────────────── */

:root {
  --sb-accent: #1FBA6B;
  --sb-accent-soft: #E5F6EC;
  --sb-accent-ink: #0B5A34;
  --sb-cyan: #0EA5B7;
  --sb-rose: #C53A5C;
  --sb-amber: #D97706;
  --sb-ink: #0E0E0C;
  --sb-ink-2: #3A3A36;
  --sb-bg: #FAFAF7;
  --sb-surface: #FFFFFF;
  --sb-surface-2: #F2F1EC;
  --sb-hairline: #E6E4DC;
  --sb-muted: #7A7A72;
}

::selection { background: var(--sb-accent); color: var(--sb-ink); }

body {
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11", "ss01";
}

/* All headings get the console treatment */
h1, h2, h3, h4, h5, h6,
.wp-block-post-title,
.wp-block-site-title {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace !important;
  letter-spacing: -0.015em;
  font-weight: 700;
}

/* The blinking cursor on h1 */
.entry-content h1::after,
.wp-block-post-title a::after {
  /* opt-in via .has-cursor class */
}
.has-cursor::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.95em;
  background: currentColor;
  vertical-align: -0.1em;
  margin-left: 4px;
  animation: sb-blink 1s steps(1) infinite;
}
@keyframes sb-blink { 50% { opacity: 0; } }

/* Site title — terminal prompt */
.wp-block-site-title a {
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.wp-block-site-title a::after {
  content: "_";
  color: var(--sb-accent);
}

/* Categories rendered as monospace tags */
.wp-block-post-terms a,
.wp-block-term-description ~ * .wp-block-post-terms a {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sb-ink-2);
  background: rgba(58, 58, 54, 0.08);
  padding: 4px 8px;
  border-radius: 4px;
  text-decoration: none !important;
  font-weight: 600;
}
.wp-block-post-terms a:hover {
  background: var(--sb-accent);
  color: var(--sb-ink);
}

/* Date / author meta — monospace muted */
.wp-block-post-date,
.wp-block-post-author-name,
.wp-block-post-author,
.wp-block-read-more {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--sb-muted);
}

/* Read-more arrow */
.wp-block-read-more::after { content: " →"; }

/* Code blocks — bordered with filename header */
.wp-block-code,
.wp-block-preformatted {
  background: var(--sb-surface) !important;
  border: 1px solid var(--sb-hairline) !important;
  border-radius: 8px;
  padding: 0 !important;
  overflow: hidden;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 13.5px;
  line-height: 1.65;
  margin: 28px 0;
}
.wp-block-code code,
.wp-block-preformatted {
  display: block;
  padding: 18px 20px !important;
  background: transparent !important;
  font-family: inherit !important;
}
/* Filename header — opt-in via aria-label or data-filename */
.wp-block-code[data-filename]::before,
.wp-block-preformatted[data-filename]::before {
  content: "● " attr(data-filename);
  display: block;
  font-size: 12px;
  padding: 10px 16px;
  background: var(--sb-surface-2);
  border-bottom: 1px solid var(--sb-hairline);
  color: var(--sb-ink);
  font-weight: 500;
}
/* Inline code */
:not(pre) > code {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.92em;
  background: var(--sb-surface-2);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--sb-ink);
}

/* Buttons */
.wp-block-button__link {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0;
  border-radius: 6px !important;
  padding: 12px 18px !important;
}
.wp-block-button.is-style-outline .wp-block-button__link {
  border-color: var(--sb-hairline) !important;
}

/* Search form — terminal prompt */
.wp-block-search__inside-wrapper {
  border: 2px solid var(--sb-ink) !important;
  border-radius: 10px;
  padding: 6px 10px 6px 16px;
  background: var(--sb-surface);
}
.wp-block-search__inside-wrapper::before {
  content: "$";
  font-family: "JetBrains Mono", monospace;
  color: var(--sb-accent);
  font-weight: 700;
  font-size: 16px;
  margin-right: 10px;
}
.wp-block-search__input {
  font-family: "JetBrains Mono", monospace !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
}
.wp-block-search__button {
  font-family: "JetBrains Mono", monospace !important;
  background: var(--sb-ink) !important;
  color: var(--sb-bg) !important;
  border: 0 !important;
  border-radius: 6px !important;
}

/* Post cards — hairline */
.sb-card {
  border: 1px solid var(--sb-hairline);
  border-radius: 12px;
  background: var(--sb-surface);
  padding: 24px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sb-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -16px rgba(14,14,12,0.18);
}

/* Status pill (uptime indicator) */
.sb-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--sb-muted);
}
.sb-status::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sb-accent);
  box-shadow: 0 0 0 3px rgba(31,186,107,0.2);
}

/* Section eyebrow — ./section */
.sb-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--sb-muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Pagination */
.wp-block-query-pagination .page-numbers {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--sb-hairline);
  border-radius: 6px;
  text-decoration: none;
  color: var(--sb-ink);
}
.wp-block-query-pagination .page-numbers.current {
  background: var(--sb-ink);
  color: var(--sb-bg);
  border-color: var(--sb-ink);
}

/* 404 — giant numeral */
.sb-404 {
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(80px, 18vw, 180px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 0;
}
.sb-404 .zero { color: var(--sb-accent); }

/* Pull-quote / callout */
.sb-callout {
  margin: 28px 0;
  padding: 18px 22px;
  background: var(--sb-accent-soft);
  border: 1px solid rgba(31,186,107,0.4);
  border-radius: 8px;
  font-size: 15.5px;
  line-height: 1.55;
}

/* Hide TT5 mascot if it shows up */
.wp-block-image.is-style-rounded { border-radius: 8px; }

/* ─── Terminal-window post cards (blog index) ──────────────────────── */
.sb-term-grid {
  gap: 24px !important;
}

.sb-term-card {
  background: var(--sb-ink);
  border: 1px solid var(--sb-ink);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(14,14,12,0.06), 0 24px 48px -28px rgba(14,14,12,0.25);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  margin: 0 !important;
}
.sb-term-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 0 rgba(14,14,12,0.06), 0 32px 56px -22px rgba(14,14,12,0.35);
}

/* title bar */
.sb-term-titlebar {
  padding: 10px 14px !important;
  background: #1A1A17;
  border-bottom: 1px solid #25251F;
  display: flex !important;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap !important;
  margin: 0 !important;
}
.sb-term-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.sb-term-dots i {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block;
}
.sb-term-dots i:nth-child(1) { background: #FF5F57; }
.sb-term-dots i:nth-child(2) { background: #FEBC2E; }
.sb-term-dots i:nth-child(3) { background: #28C840; }

.sb-term-filename,
.sb-term-filename a {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #7A7A72 !important;
  margin: 0 0 0 4px !important;
  letter-spacing: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  text-decoration: none !important;
  pointer-events: none;
}
.sb-term-filename::before { content: "~/posts/"; }
.sb-term-filename::after  { content: ".md"; }

/* body — cover with featured image, or default line-art when no image */
.sb-term-body {
  flex: 1 !important;
  min-height: 280px !important;
  margin: 0 !important;
}
.sb-term-body .wp-block-cover__inner-container {
  position: relative;
  z-index: 2;
  margin-top: auto !important;
  width: 100%;
}

/* When there's no featured image, the cover block has no <img>.
   We paint our own line-art SVG via ::before. */
.sb-term-body:not(:has(img.wp-block-cover__image-background))::before,
.sb-term-body.has-no-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: var(--sb-ink);
  background-image:
    /* network nodes */
    radial-gradient(circle at 60% 30%, var(--sb-accent) 0 3px, transparent 4px),
    radial-gradient(circle at 80% 50%, var(--sb-accent) 0 3px, transparent 4px),
    radial-gradient(circle at 70% 75%, var(--sb-accent) 0 3px, transparent 4px),
    radial-gradient(circle at 50% 65%, var(--sb-accent) 0 3px, transparent 4px),
    /* faint grid */
    linear-gradient(to right, rgba(31,186,107,0.18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(31,186,107,0.18) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 24px 24px, 24px 24px;
  opacity: 0.7;
}
.sb-term-body:not(:has(img.wp-block-cover__image-background))::after,
.sb-term-body.has-no-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* server rack outlines, as repeating thin lines top-left */
    linear-gradient(180deg, transparent 50%, transparent 100%);
  pointer-events: none;
}

/* prompt + content */
.sb-term-prompt {
  font-family: "JetBrains Mono", monospace !important;
  color: var(--sb-accent) !important;
  margin: 0 0 10px !important;
  font-size: 12px !important;
}

.sb-term-title,
.sb-term-title a {
  font-family: "JetBrains Mono", monospace !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  margin: 0 !important;
  font-size: 1.375rem !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  text-wrap: balance;
}
.sb-term-title a:hover { color: var(--sb-accent) !important; }

.sb-term-excerpt,
.sb-term-excerpt p {
  font-family: "Inter", system-ui, sans-serif !important;
  color: #B8B8B0 !important;
  font-size: 0.875rem !important;
  line-height: 1.55 !important;
  margin: 12px 0 0 !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sb-term-excerpt .wp-block-post-excerpt__more-text { display: none; }

.sb-term-readmore {
  font-family: "JetBrains Mono", monospace;
  color: var(--sb-accent);
  font-size: 12px;
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sb-cursor {
  display: inline-block;
  width: 7px;
  height: 13px;
  background: var(--sb-accent);
  animation: sb-blink 1s steps(1) infinite;
  margin-left: 2px;
}

/* clickable card — make whole card clickable via title link */
.sb-term-card a { position: relative; z-index: 3; }