/* ============================================================
   LinuxTeck — Command Article Stylesheet
   Version : 1.0
   Usage   : Link this CSS in every Linux command article HTML
   Font    : JetBrains Mono (code) + Inter (body) via Google Fonts
   ============================================================ */

/* ── Google Fonts import ── */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600&display=swap');

/* ============================================================
   1. CSS VARIABLES (edit here to retheme the whole article)
   ============================================================ */
:root {
  /* Terminal palette */
  --trm-bg       : #0d1117;
  --trm-bg2      : #161b22;
  --trm-border   : #30363d;
  --trm-green    : #3fb950;
  --trm-cyan     : #79c0ff;
  --trm-yellow   : #e3b341;
  --trm-red      : #f85149;
  --trm-purple   : #d2a8ff;
  --trm-muted    : #8b949e;
  --trm-white    : #e6edf3;

  /* Page palette */
  --bg-page      : #f6f8fa;
  --bg-white     : #ffffff;
  --bg-surface   : #f0f3f6;
  --border-light : #d0d7de;
  --border-mid   : #afb8c1;
  --text-primary : #1f2328;
  --text-secondary: #57606a;
  --text-muted   : #8c959f;
  --accent       : #0969da;
  --accent-light : #ddf4ff;
  --accent-text  : #0550ae;

  /* Note box variants */
  --note-info-bg    : #ddf4ff;
  --note-info-border: #79c0ff;
  --note-info-text  : #0550ae;
  --note-tip-bg     : #dcffe4;
  --note-tip-border : #3fb950;
  --note-tip-text   : #116329;
  --note-warn-bg    : #fff8c5;
  --note-warn-border: #e3b341;
  --note-warn-text  : #7d4e00;
  --note-danger-bg  : #ffebe9;
  --note-danger-border: #f85149;
  --note-danger-text  : #82071e;

  /* Layout */
  --max-width    : 860px;
  --radius-sm    : 6px;
  --radius-md    : 8px;
  --radius-lg    : 12px;
  --radius-xl    : 16px;

  /* Typography */
  --font-body    : 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono    : 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family    : var(--font-body);
  font-size      : 16px;
  line-height    : 1.75;
  color          : var(--text-primary);
  background     : var(--bg-page);
  -webkit-font-smoothing: antialiased;
}

/* ── Wrapper ── */
.lt-article {
  max-width  : var(--max-width);
  margin     : 0 auto;
  padding    : 2rem 1.25rem 4rem;
}

/* ── Inline code — red only in body text, not inside terminal blocks ── */
code {
  font-family  : var(--font-mono);
  font-size    : 0.85em;
  background   : #fdf0f0;
  color        : #e05555;
  padding      : 2px 6px;
  border-radius: var(--radius-sm);
  border       : 1px solid #f5c6c6;
}

/* ── Inside terminal blocks, reset to normal terminal colors ── */
.lt-syntax-body code,
.lt-cmd-body code,
.lt-output-body code {
  background : transparent;
  color      : var(--trm-white);
  border     : none;
  padding    : 0;
}

/* ── Links ── */
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============================================================
   3. HERO BANNER
   ============================================================ */
.lt-hero {
  background    : var(--trm-bg);
  border        : 1px solid var(--trm-border);
  border-radius : var(--radius-xl);
  padding       : 2rem 2rem 1.75rem;
  margin-bottom : 1.75rem;
  position      : relative;
  overflow      : hidden;
}

/* top accent bar */
.lt-hero::before {
  content    : '';
  position   : absolute;
  top: 0; left: 0; right: 0;
  height     : 3px;
  background : linear-gradient(90deg, var(--trm-green), var(--trm-cyan), var(--trm-yellow));
}

.lt-hero-category {
  display     : flex;
  align-items : center;
  gap         : 7px;
  font-size   : 11px;
  font-weight : 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color       : var(--trm-green);
  margin-bottom: 0.6rem;
}

.lt-hero-category::before {
  content      : '';
  display      : inline-block;
  width        : 7px;
  height       : 7px;
  border-radius: 50%;
  background   : var(--trm-green);
  box-shadow   : 0 0 6px var(--trm-green);
}

.lt-hero h1 {
  font-family : var(--font-body);
  font-size   : 28px;
  font-weight : 600;
  color       : var(--trm-white);
  line-height : 1.3;
  margin-bottom: 0.6rem;
}

.lt-hero-syntax {
  font-family : var(--font-mono);
  font-size   : 13px;
  color       : var(--trm-muted);
  margin-bottom: 1.1rem;
}

.lt-hero-syntax span { color: var(--trm-cyan); }

.lt-hero-meta {
  display    : flex;
  flex-wrap  : wrap;
  gap        : 1rem;
  padding-top: 1rem;
  border-top : 1px solid var(--trm-border);
}

.lt-hero-meta-item {
  display    : flex;
  align-items: center;
  gap        : 6px;
  font-size  : 12px;
  color      : var(--trm-muted);
}

.lt-hero-meta-item svg {
  width : 13px;
  height: 13px;
  opacity: 0.7;
}

/* ============================================================
   4. INTRO PARAGRAPH
   ============================================================ */
.lt-intro {
  background    : var(--bg-white);
  border        : 1px solid var(--border-light);
  border-left   : 4px solid var(--trm-cyan);
  border-radius : 0 var(--radius-md) var(--radius-md) 0;
  padding       : 1.1rem 1.4rem;
  margin-bottom : 1.75rem;
  font-size     : 15px;
  color         : var(--text-secondary);
  line-height   : 1.85;
}

/* ============================================================
   5. SYNTAX BLOCK
   ============================================================ */
.lt-syntax {
  background    : var(--trm-bg);
  border        : 1px solid var(--trm-border);
  border-radius : var(--radius-md);
  margin-bottom : 1.75rem;
  overflow      : hidden;
}

.lt-syntax-header {
  background    : var(--trm-bg2);
  border-bottom : 1px solid var(--trm-border);
  padding       : 8px 16px;
  display       : flex;
  align-items   : center;
  justify-content: space-between;
}

.lt-syntax-dots {
  display : flex;
  gap     : 6px;
}

.lt-syntax-dots span {
  width        : 11px;
  height       : 11px;
  border-radius: 50%;
}

.lt-syntax-dots .d-red  { background: #ff5f57; }
.lt-syntax-dots .d-yel  { background: #febc2e; }
.lt-syntax-dots .d-grn  { background: #28c840; }

.lt-syntax-label {
  font-family  : var(--font-mono);
  font-size    : 11px;
  font-weight  : 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color        : var(--trm-muted);
}

.lt-syntax-body {
  padding: 1rem 1.5rem;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--trm-white);   /* ← this line already exists, keep it */
  line-height: 1.7;
  overflow-x: auto;
}

.lt-syntax-body .kw   { color: var(--trm-yellow); }
.lt-syntax-body .op   { color: var(--trm-muted); }
.lt-syntax-body .arg  { color: var(--trm-cyan); }

/* ============================================================
   6. OPTIONS TABLE
   ============================================================ */
.lt-options {
  border        : 1px solid var(--border-light);
  border-radius : var(--radius-lg);
  overflow      : hidden;
  margin-bottom : 1.75rem;
}

.lt-options-header {
  background    : var(--trm-bg);
  padding       : 10px 18px;
  font-family   : var(--font-mono);
  font-size     : 12px;
  font-weight   : 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color         : var(--trm-green);
  border-bottom : 1px solid var(--trm-border);
}

.lt-options table {
  width          : 100%;
  border-collapse: collapse;
  font-size      : 13.5px;
}

.lt-options thead th {
  background    : var(--bg-surface);
  padding       : 9px 18px;
  text-align    : left;
  font-size     : 11px;
  font-weight   : 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color         : var(--text-muted);
  border-bottom : 1px solid var(--border-light);
}

.lt-options tbody td {
  padding       : 10px 18px;
  border-bottom : 1px solid var(--border-light);
  color         : var(--text-primary);
  vertical-align: top;
  line-height   : 1.6;
}

.lt-options tbody tr:last-child td { border-bottom: none; }
.lt-options tbody tr:hover td      { background: var(--bg-surface); }

/* flag badge inside table */
.lt-flag {
  display         : inline-block;
  font-family     : var(--font-mono);
  font-size       : 12px;
  font-weight     : 500;
  background      : var(--accent-light);
  color           : var(--accent-text);
  padding         : 2px 9px;
  border-radius   : var(--radius-sm);
  border          : 1px solid #b6e3ff;
  white-space     : nowrap;
}

/* ============================================================
   7. TABLE OF CONTENTS
   ============================================================ */
.lt-toc {
  border        : 1px solid var(--border-light);
  border-radius : var(--radius-lg);
  margin-bottom : 2rem;
  overflow      : hidden;
  background    : var(--bg-white);
}

.lt-toc-header {
  background    : var(--trm-bg);
  padding       : 10px 18px;
  font-family   : var(--font-mono);
  font-size     : 11px;
  font-weight   : 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color         : var(--trm-yellow);
  border-bottom : 1px solid var(--trm-border);
  display       : flex;
  align-items   : center;
  gap           : 8px;
}

.lt-toc-list {
  list-style : none;
  padding    : 0.5rem 0.75rem;
}

.lt-toc-list li a {
  display       : flex;
  align-items   : center;
  gap           : 10px;
  padding       : 6px 10px;
  border-radius : var(--radius-md);
  font-size     : 13.5px;
  color         : var(--text-secondary);
  text-decoration: none;
  transition    : background 0.15s, color 0.15s;
}

.lt-toc-list li a:hover {
  background : var(--bg-surface);
  color      : var(--text-primary);
  text-decoration: none;
}

.lt-toc-num {
  display      : flex;
  align-items  : center;
  justify-content: center;
  min-width    : 24px;
  height       : 24px;
  border-radius: var(--radius-sm);
  background   : var(--trm-bg);
  border       : 1px solid var(--trm-border);
  font-family  : var(--font-mono);
  font-size    : 11px;
  font-weight  : 600;
  color        : var(--trm-green);
  flex-shrink  : 0;
}

/* ============================================================
   8. SECTION DIVIDER
   ============================================================ */
.lt-section {
  display    : flex;
  align-items: center;
  gap        : 12px;
  margin     : 2.25rem 0 1.25rem;
}

.lt-section-num {
  font-family   : var(--font-mono);
  font-size     : 12px;
  font-weight   : 700;
  color         : var(--trm-green);
  background    : var(--trm-bg);
  border        : 1px solid var(--trm-border);
  padding       : 4px 12px;
  border-radius : var(--radius-sm);
  white-space   : nowrap;
  letter-spacing: 0.05em;
}

.lt-section h2 {
  font-family : var(--font-body);
  font-size   : 17px;
  font-weight : 600;
  color       : var(--text-primary);
  line-height : 1.4;
}

/* ============================================================
   9. COMMAND BLOCK
   ============================================================ */
.lt-cmd {
  background    : var(--trm-bg);
  border        : 1px solid var(--trm-border);
  border-radius : var(--radius-md);
  margin-bottom : 0.75rem;
  overflow      : hidden;
}

.lt-cmd-header {
  background     : var(--trm-bg2);
  border-bottom  : 1px solid var(--trm-border);
  padding        : 7px 14px;
  display        : flex;
  align-items    : center;
  justify-content: space-between;
}

.lt-cmd-type {
  font-family   : var(--font-mono);
  font-size     : 11px;
  color         : var(--trm-muted);
  letter-spacing: 0.04em;
  display       : flex;
  align-items   : center;
  gap           : 6px;
}

.lt-cmd-type::before {
  content      : '';
  display      : inline-block;
  width        : 7px;
  height       : 7px;
  border-radius: 50%;
  background   : var(--trm-green);
}

/* copy button */
.lt-copy-btn {
  background   : transparent;
  border       : 1px solid var(--trm-border);
  color        : var(--trm-muted);
  font-family  : var(--font-body);
  font-size    : 11px;
  padding      : 3px 10px;
  border-radius: var(--radius-sm);
  cursor       : pointer;
  transition   : all 0.15s;
  user-select  : none;
}

.lt-copy-btn:hover { background: var(--trm-border); color: var(--trm-white); }
.lt-copy-btn.copied { color: var(--trm-green); border-color: var(--trm-green); }

/* code body */
.lt-cmd-body {
  padding    : 1rem 1.25rem;
  font-family: var(--font-mono);
  font-size  : 13.5px;
  line-height: 1.8;
  color      : var(--trm-white);
  overflow-x : auto;
  white-space: pre;
}

/* syntax tokens */
.lt-cmd-body .p  { color: var(--trm-green);  user-select: none; }  /* prompt # */
.lt-cmd-body .f  { color: var(--trm-yellow); }                      /* flag -h */
.lt-cmd-body .a  { color: var(--trm-cyan);   }                      /* argument */
.lt-cmd-body .s  { color: var(--trm-purple); }                      /* string */
.lt-cmd-body .c  { color: var(--trm-muted);  font-style: italic; }  /* # comment */
.lt-cmd-body .o  { color: var(--trm-muted);  }                      /* output line */
.lt-cmd-body .e  { color: var(--trm-red);    }                      /* error/warn */

/* ============================================================
   10. OUTPUT BLOCK (shown below command block)
   ============================================================ */
.lt-output {
  background    : #090d12;
  border        : 1px solid var(--trm-border);
  border-top    : none;
  border-radius : 0 0 var(--radius-md) var(--radius-md);
  padding       : 0.75rem 1.25rem 1rem;
  margin-top    : -8px;
  margin-bottom : 0.75rem;
}

.lt-output-label {
  font-family   : var(--font-mono);
  font-size     : 10px;
  font-weight   : 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color         : #3a4049;
  margin-bottom : 6px;
}

.lt-output-body {
  font-family: var(--font-mono);
  font-size  : 12.5px;
  line-height: 1.9;
  color      : var(--trm-muted);
  overflow-x : auto;
  white-space: pre;
}

.lt-output-body .col  { color: var(--trm-cyan);   }  /* column header */
.lt-output-body .val  { color: var(--trm-white);  }  /* highlighted value */
.lt-output-body .warn { color: var(--trm-yellow); }
.lt-output-body .err  { color: var(--trm-red);    }

/* ============================================================
   11. NOTE / TIP / WARNING / DANGER BOXES
   ============================================================ */
.lt-note {
  border-radius : 0 var(--radius-md) var(--radius-md) 0;
  border-left   : 3px solid var(--note-info-border);
  background    : var(--note-info-bg);
  padding       : 0.9rem 1.2rem;
  margin-bottom : 1.25rem;
  font-size     : 13.5px;
  color         : var(--note-info-text);
  line-height   : 1.75;
}

.lt-note-label {
  font-family   : var(--font-body);
  font-size     : 10.5px;
  font-weight   : 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom : 4px;
  color         : inherit;
}

/* variants */
.lt-note.tip     { border-left-color: var(--note-tip-border);    background: var(--note-tip-bg);    color: var(--note-tip-text);    }
.lt-note.warning { border-left-color: var(--note-warn-border);   background: var(--note-warn-bg);   color: var(--note-warn-text);   }
.lt-note.danger  { border-left-color: var(--note-danger-border); background: var(--note-danger-bg); color: var(--note-danger-text); }

/* ============================================================
   12. RELATED POSTS
   ============================================================ */
.lt-related {
  margin-top : 3rem;
  padding-top: 2rem;
  border-top : 1px solid var(--border-light);
}

.lt-related-title {
  font-size    : 14px;
  font-weight  : 600;
  color        : var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.lt-related-grid {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap                  : 10px;
}

.lt-related-card {
  background   : var(--bg-white);
  border       : 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding      : 12px 14px;
  text-decoration: none;
  transition   : border-color 0.15s, box-shadow 0.15s;
  display      : block;
}

.lt-related-card:hover {
  border-color: var(--trm-cyan);
  text-decoration: none;
}

.lt-related-card-cmd {
  font-family  : var(--font-mono);
  font-size    : 13px;
  font-weight  : 700;
  color        : var(--trm-cyan);
  margin-bottom: 3px;
}

.lt-related-card-desc {
  font-size : 12px;
  color     : var(--text-muted);
  line-height: 1.5;
}

/* ============================================================
   13. SCROLLBAR (terminal blocks)
   ============================================================ */
.lt-cmd-body::-webkit-scrollbar,
.lt-output-body::-webkit-scrollbar,
.lt-syntax-body::-webkit-scrollbar { height: 4px; }

.lt-cmd-body::-webkit-scrollbar-track,
.lt-output-body::-webkit-scrollbar-track,
.lt-syntax-body::-webkit-scrollbar-track { background: var(--trm-bg); }

.lt-cmd-body::-webkit-scrollbar-thumb,
.lt-output-body::-webkit-scrollbar-thumb,
.lt-syntax-body::-webkit-scrollbar-thumb { background: var(--trm-border); border-radius: 4px; }

/* ============================================================
   14. RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .lt-article       { padding: 1rem 1rem 3rem; }
  .lt-hero          { padding: 1.25rem 1.25rem 1.25rem; }
  .lt-hero h1       { font-size: 21px; }
  .lt-hero-meta     { gap: 0.75rem; }
  .lt-options table { font-size: 12px; }
  .lt-options thead th,
  .lt-options tbody td { padding: 8px 12px; }
  .lt-cmd-body,
  .lt-output-body   { font-size: 12px; }
  .lt-related-grid  { grid-template-columns: 1fr; }


.lt-syntax-body,
.lt-syntax-body code,
.lt-cmd-body,
.lt-cmd-body code,
.lt-output-body,
.lt-output-body code {
  color: var(--trm-white) !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

.lt-syntax-body .kw, .lt-cmd-body .kw { color: var(--trm-yellow) !important; }
.lt-syntax-body .op, .lt-cmd-body .op { color: var(--trm-muted)  !important; }
.lt-syntax-body .arg,.lt-cmd-body .arg { color: var(--trm-cyan)  !important; }
.lt-syntax-body .cmt,.lt-cmd-body .cmt { color: var(--trm-muted) !important; font-style: italic; }
}

.lt-syntax-body .w, .lt-cmd-body .w { color: var(--trm-white) !important; }

div.lt-syntax-body,
div.lt-syntax-body *:not(.kw):not(.op):not(.arg):not(.cmt) {
  color: #e6edf3 !important;
}

div.lt-syntax-body .kw  { color: #e3b341 !important; }
div.lt-syntax-body .op  { color: #8b949e !important; }
div.lt-syntax-body .arg { color: #79c0ff !important; }
div.lt-syntax-body .cmt { color: #8b949e !important; font-style: italic !important; }

div.lt-cmd-body,
div.lt-cmd-body *:not(.kw):not(.op):not(.arg):not(.cmt):not(.p) {
  color: #e6edf3 !important;
}

div.lt-cmd-body .kw  { color: #e3b341 !important; }
div.lt-cmd-body .op  { color: #8b949e !important; }
div.lt-cmd-body .arg { color: #79c0ff !important; }
div.lt-cmd-body .cmt { color: #8b949e !important; font-style: italic !important; }
div.lt-cmd-body .p   { color: #3fb950 !important; }


/* Hide WordPress auto-generated ToC — we use our own */
.ez-toc-container,
#toc_container,
.wp-block-table-of-contents,
[id*="ez-toc"],
.table-of-contents {
  display: none !important;
}



.lt-output-label,
.lt-output-body,
.lt-output-body * {
  color: #ffffff !important;
}