/* ============================================================
   securitybreached.org — Kali/Metasploit-style terminal landing
   Themes: dark (default) + light. Palette is CSS variables.
   ============================================================ */

:root,
html[data-theme="dark"] {
  --bg: #05070d;
  --bg-glow: #0d1526;
  --term: #0a0e17;
  --term-edge: #1b2434;
  --bar: #10151f;
  --text: #c9d4e3;
  --dim: #5d6b80;
  --green: #3dfa6b;
  --green-soft: rgba(61, 250, 107, 0.12);
  --cyan: #5cc8ff;
  --blue: #7a8cff;
  --red: #ff5f57;
  --yellow: #febc2e;
  --lgreen: #28c840;
  --cursor: #d7e4f2;
  --glow: 0 0 10px rgba(61, 250, 107, 0.28);
  --glow-red: 0 0 10px rgba(255, 95, 87, 0.3);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}

html[data-theme="light"] {
  --bg: #e9edf3;
  --bg-glow: #f7fafc;
  --term: #ffffff;
  --term-edge: #d4dbe4;
  --bar: #e4e9f0;
  --text: #26303d;
  --dim: #76828f;
  --green: #0a7c2f;
  --green-soft: rgba(10, 124, 47, 0.09);
  --cyan: #0369a1;
  --blue: #3b5bdb;
  --red: #e0443c;
  --yellow: #e8a300;
  --lgreen: #1ea534;
  --cursor: #33404f;
  --glow: none;
  --glow-red: none;
  --shadow: 0 20px 50px rgba(30, 42, 60, 0.18);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: radial-gradient(1100px 640px at 50% -12%, var(--bg-glow), var(--bg)) fixed, var(--bg);
  color: var(--text);
  font-family: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex;
  min-height: 100vh;
  padding: 2.2rem 1rem;
}

/* margin:auto centers when there is room and safely top-aligns when the
   terminal is taller than the viewport, so the top never gets clipped
   (grid place-items:center pushes overflowing content out of reach) */
.stage { width: 100%; display: grid; place-items: center; margin: auto; }

/* ------- terminal window ------- */
.terminal {
  width: min(880px, 100%);
  background: var(--term);
  border: 1px solid var(--term-edge);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.titlebar {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--bar);
  border-bottom: 1px solid var(--term-edge);
  padding: 0.55rem 0.9rem;
  user-select: none;
}
.lights { display: flex; gap: 7px; }
.lights i {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--red);
}
.lights i:nth-child(2) { background: var(--yellow); }
.lights i:nth-child(3) { background: var(--lgreen); }
.title {
  flex: 1;
  text-align: center;
  font-size: 0.78rem;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.controls { display: flex; gap: 0.4rem; }
.controls button {
  display: grid;
  place-items: center;
  width: 28px; height: 26px;
  background: transparent;
  color: var(--dim);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
}
.controls button:hover { color: var(--text); border-color: var(--term-edge); background: var(--green-soft); }
html[data-theme="dark"] .icon-sun { display: none; }
html[data-theme="light"] .icon-moon { display: none; }

/* ------- terminal body ------- */
.term-body {
  padding: 1.1rem 1.25rem 1.6rem;
  min-height: 430px;
  font-size: 0.95rem;
  overflow-x: hidden;
}

.line { white-space: pre-wrap; word-break: break-word; min-height: 1.55em; }
.line.spacer { min-height: 0.7em; }

a { color: var(--cyan); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
a:hover { text-decoration-style: solid; filter: brightness(1.15); }
a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 2px; }

/* kali zsh prompt */
.pp { color: var(--green); }
.uh { color: var(--green); font-weight: 700; }
.uh-red { color: var(--red); font-weight: 700; }
.pth { color: var(--blue); font-weight: 700; }

/* output styles */
.b-green { color: var(--green); font-weight: 700; text-shadow: var(--glow); }
.b-red { color: var(--red); font-weight: 700; text-shadow: var(--glow-red); }
.dimtext { color: var(--dim); }
.label { color: var(--text); }

/* brand favicon icons inline with social links */
.brand-icon { display: inline-block; margin-right: 0.45em; }
.brand-icon svg { height: 1.05em; width: 1.05em; vertical-align: -0.1em; }
.ic-x { color: var(--text); }
.ic-fb { color: #1877f2; }
.ic-li { color: #0a66c2; }
.ic-gh { color: var(--text); }
.ic-ig { color: #e4405f; }

/* hacker quote loop (./wisdom.sh --loop) */
.quote-box { min-height: 5.6em; margin-top: 0.15em; }
.quote { color: var(--green); opacity: 0.92; }
.quote-mark { color: var(--red); font-weight: 700; }
.quote-attr { color: var(--red); opacity: 0.85; padding-left: 1.1em; }

.banner-pre {
  color: var(--green);
  text-shadow: var(--glow);
  /* single-line banner is 143 columns: scale it to always fit one row */
  font-size: clamp(2px, calc((100vw - 44px) / 86), 9.6px);
  line-height: 1.3;
  margin: 0 0 0.4rem;
  white-space: pre;
  overflow: hidden;
}
.banner-caption { color: var(--dim); font-size: 0.8rem; margin-bottom: 0.8rem; white-space: pre-wrap; }

/* blinking block cursor */
.cursor {
  display: inline-block;
  width: 0.62em;
  height: 1.12em;
  margin-left: 1px;
  background: var(--red);
  vertical-align: text-bottom;
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
}

/* ------- small screens ------- */
@media (max-width: 640px) {
  body { padding: 1rem 0.6rem; font-size: 14px; }
  .term-body { padding: 0.9rem 0.9rem 1.2rem; font-size: 0.86rem; min-height: 66vh; }
  .title { font-size: 0.68rem; }
}