/*
Theme Name: BlankSlate Child
Template: blankslate
Description: CRT terminal-styled child theme for KatanyxisLabs
Version: 0.4
*/

/* download the VT323 pixel/terminal font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

/*===================================================================
  CONTROL PANEL — change these values, everything below follows.
  A "CSS variable" is defined once here and reused with var(--name).
===================================================================*/
:root {
  /*—————— background color ——————*/
  --bg-color: #0a0a0a;

  /*—————— main text / phosphor color ——————*/
  --text-color: #33ff33;

  /*—————— dim green used for borders ——————*/
  --border-color: #135c13;

  /*—————— site title (top-left) font size ——————*/
  --site-title-size: 32px;

  /*—————— page/post title font size ——————*/
  --page-title-size: 28px;

  /*—————— header size (top padding / bottom padding) ——————*/
  --header-pad-top: 4px;
  --header-pad-bottom: 10px;

  /*—————— footer size ——————*/
  --footer-pad: 10px;

  /*—————— scanline color ——————
     currently your test pink; classic green is rgba(51,255,51,0.08) */
  --scanline-color: rgba(57, 78, 62, 0.4);

  /*—————— scanline size ——————
     gap = dark space between lines, thickness = the line itself */
  --scanline-gap: 2px;
  --scanline-thickness: 1px;

  /*—————— scanline speed ——————
     time for the lines to crawl down by one full line.
     SMALLER = FASTER. 0.15s is subtle; try 1s to clearly see it */
  --scanline-speed: 0.15s;

  /*—————— scanline flicker speed ——————
     length of one full flicker cycle */
  --flicker-speed: 4s;
}

/*===================================================================
  GENERAL RULES
===================================================================*/

/*—————— page background + base text style ——————*/
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: 'VT323', 'Courier New', monospace;
  font-size: 20px;
  line-height: 1.4;
  text-shadow: 0 0 4px rgba(51, 255, 51, 0.6); /* phosphor glow */
  padding: 0 24px; /* breathing room on left/right edges */
}

/*—————— links: green underline, invert on hover ——————*/
a { color: var(--text-color); text-decoration: underline; }
a:hover { background-color: var(--text-color); color: var(--bg-color); text-shadow: none; }

/*—————— headings: green, "> " prompt prefix on h1/h2 ——————*/
h1, h2, h3, h4, h5, h6 { color: var(--text-color); margin: 1em 0 0.5em; }
h1::before, h2::before { content: "> "; }

/*—————— images never overflow their container ——————*/
img { max-width: 100%; height: auto; }

/*===================================================================
  SCANLINE RULES
  One invisible layer pinned over the whole screen (position: fixed),
  filled with repeating horizontal stripes. Clicks pass through it.
===================================================================*/

/*—————— the scanline layer itself ——————*/
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  /* stripe pattern: gap of nothing, then one thin colored line, repeat */
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent var(--scanline-gap),
    var(--scanline-color) var(--scanline-gap),
    var(--scanline-color) calc(var(--scanline-gap) + var(--scanline-thickness))
  );
  /* two animations at once: crawl downward + brightness flicker */
  animation:
    scanline-scroll var(--scanline-speed) linear infinite,
    scanline-flicker var(--flicker-speed) infinite;
}

/*—————— scanline movement ——————
   slides the pattern down by exactly one line-repeat, then loops.
   Because the shift equals the pattern size, the loop is seamless */
@keyframes scanline-scroll {
  from { background-position-y: 0; }
  to   { background-position-y: calc(var(--scanline-gap) + var(--scanline-thickness)); }
}

/*—————— scanline flicker ——————
   irregular little dips in opacity, like an unstable tube.
   Lower the dip values (0.7, 0.85...) for a harsher flicker */
@keyframes scanline-flicker {
  0%, 100% { opacity: 1; }
  7%       { opacity: 0.7; }
  8%       { opacity: 1; }
  36%      { opacity: 0.85; }
  38%      { opacity: 1; }
  61%      { opacity: 0.65; }
  62%      { opacity: 1; }
  87%      { opacity: 0.9; }
  89%      { opacity: 1; }
}

/*===================================================================
  HEADER RULES
===================================================================*/

/*—————— header block: hugs the top, dim line underneath ——————*/
#header {
  padding: var(--header-pad-top) 0 var(--header-pad-bottom);
  border-bottom: 1px solid var(--border-color);
}

/*—————— site title: big, no underline, no extra margin ——————*/
#site-title,
#site-title h1 { margin: 0; font-size: var(--site-title-size); }
#site-title a { text-decoration: none; }

/*—————— blinking cursor after the site title ——————
   a hand-drawn rectangle (0.4em wide) instead of the █ character,
   so WE control the thickness, not the font */
#site-title a::after {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.85em;
  margin-left: 6px;
  background: var(--text-color);
  animation: blink 1s steps(1) infinite;
}

/*—————— kill the OLD cursor rule ——————
   an earlier version attached a second cursor to the #site-title box
   itself (the "extra thing" under the title). That old rule still
   exists outside this file (check Customize → Additional CSS!).
   !important forces this cancel rule to win no matter what order
   the stylesheets load in */
#site-title::after,
.site-title::after { content: none !important; }

/*—————— cursor blink animation ——————*/
@keyframes blink { 50% { opacity: 0; } }

/*—————— tagline: right under the title, slightly dim ——————*/
#site-description { margin: 0 0 8px; opacity: 0.8; }

/*—————— nav menu: one horizontal row, "> " before each link ——————*/
#menu ul { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0; }
#menu a { text-decoration: none; }
#menu a::before { content: "> "; }

/*—————— search row: input + button side by side, "$" prompt ——————*/
#search { margin-top: 6px; }
#search form { display: flex; gap: 6px; align-items: center; }
#search form::before { content: "$"; }

/*—————— header links: no leftover hover background ——————*/
header a { background: transparent; }

/*===================================================================
  CONTENT RULES
===================================================================*/

/*—————— each post/page sits in its own dim green box ——————*/
#content article {
  border: 1px solid var(--border-color);
  padding: 14px 18px;
  margin: 16px 0;
}

/*—————— post/page titles: bigger, flush with top of the box ——————*/
.entry-title { font-size: var(--page-title-size); }
#content article .entry-title { margin-top: 0; }

/*—————— "author | date" line: smaller and dimmer ——————*/
.entry-meta { font-size: 16px; opacity: 0.6; }

/*—————— "Edit This" link (only visible to logged-in you) ——————*/
.post-edit-link { font-size: 16px; opacity: 0.6; }

/*===================================================================
  FORM RULES (search box, buttons)
===================================================================*/

/*—————— text/search boxes: black, green text, green border ——————*/
input[type="search"], input[type="text"] {
  background: var(--bg-color);
  color: var(--text-color);
  border: 1px solid var(--text-color);
  font-family: inherit;
  font-size: inherit;
  padding: 2px 6px;
  caret-color: var(--text-color); /* green typing cursor */
}

/*—————— focused box: green glow instead of blue outline ——————*/
input[type="search"]:focus, input[type="text"]:focus {
  outline: none;
  box-shadow: 0 0 6px rgba(51, 255, 51, 0.8);
}

/*—————— buttons: black/green box, invert on hover ——————*/
input[type="submit"], button {
  background: var(--bg-color);
  color: var(--text-color);
  border: 1px solid var(--text-color);
  font-family: inherit;
  font-size: inherit;
  padding: 2px 10px;
  cursor: pointer;
}
input[type="submit"]:hover, button:hover {
  background: var(--text-color);
  color: var(--bg-color);
  text-shadow: none;
}

/*===================================================================
  FOOTER RULES
===================================================================*/

/*—————— footer: dim line above, padded, slightly dim text ——————*/
#footer {
  border-top: 1px solid var(--border-color);
  padding: var(--footer-pad) 0;
  margin-top: 16px;
  opacity: 0.8;
}