/**
 * Retro terminal theme — inspired by ysap.sh
 * Adapted for Jekyll blog readability
 *
 * Accessibility: WCAG AA compliant contrast ratios throughout.
 * All text colors verified against their backgrounds.
 */

/* terminal palette */
:root {
  --cyan:    #5fffff; /* links — 12.3:1 on black */
  --pink:    #ff87af; /* accents — 7.4:1 on black */
  --green:   #87ff87; /* titles — 12.5:1 on black */
  --dim:     #999;    /* secondary text — 6.3:1 on black (AA pass) */
  --cream:   #ffd7af; /* body text — 11.5:1 on black */
  --bg:      #000;
  --bg-alt:  #111;
  --bg-hover:#1a0c10;
  --orange:  #ffaf5f;
  --red:     #ff5f5f;
  --glow:    #87ff8734;
  --glow-md: #87ff8748;
  --border:  #87ff8755;
}

/* force dark regardless of OS preference */
html {
  color-scheme: dark only;
}

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

ul, ol { list-style-position: inside; }

/* layout */
body {
  background-color: var(--bg);
  color: var(--cream);
  font-family: "Fira Mono", "Fira Code", "Cascadia Mono", "Consolas", monospace;
  font-size: 15px;
  line-height: 1.7;
}

#container {
  max-width: 800px;
  margin: 0 auto;
  padding: 10px 16px 60px;
}

/* typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--green);
  font-weight: 900;
  margin-top: 2em;
  margin-bottom: 0.5em;
}

h1 { font-size: 1.5em; }
h2 {
  font-size: 1.25em;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}
h3 { font-size: 1.1em; color: var(--cyan); }
h4 { font-size: 1em; color: var(--pink); }

p {
  margin-bottom: 1em;
  max-width: 75ch;
}

strong, b { font-weight: 900; color: var(--green); }
em, i { color: var(--pink); font-style: italic; }

/* links */
a, a:visited { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--pink); text-decoration: underline; }

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

/* navigation */
nav {
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--red), var(--orange), #ffd75f, var(--orange), var(--red)) 1;
  margin-bottom: 24px;
  overflow: hidden;
}

nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}

nav li a {
  display: block;
  padding: 12px 14px;
  color: var(--cream);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.15s, background-color 0.15s;
}

nav li a:hover {
  background-color: #111;
  color: var(--cyan);
  text-decoration: none;
}

nav li a.active { color: var(--green); }

.site-title {
  color: var(--green);
  font-weight: 900;
  font-size: 1.1em;
  padding: 12px 14px 12px 0;
  text-decoration: none;
  text-shadow: 0 0 12px var(--glow-md);
}

.site-title:hover { text-decoration: none; }

/* home page */
.intro {
  margin-bottom: 2em;
}

.intro .greeting {
  color: var(--green);
  font-size: 1.3em;
  font-weight: 900;
  text-shadow: 0 0 20px var(--glow);
}

.avatar {
  border-radius: 50%;
  float: right;
  margin-left: 16px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  box-shadow: 0 0 80px var(--glow);
}

/* post list */
.post-list {
  list-style: none;
}

.post-list li {
  display: flex;
  gap: 16px;
  padding: 14px 8px;
  border-bottom: 1px solid #1a1a1a;
  align-items: flex-start;
  transition: background-color 0.15s;
}

.post-list li:hover {
  background-color: var(--bg-hover);
}

.post-thumb {
  flex-shrink: 0;
  width: 120px;
  height: 80px;
  object-fit: cover;
  border: 1px solid var(--border);
  border-radius: 2px;
  opacity: 0.85;
  transition: opacity 0.2s, box-shadow 0.2s;
}

.post-list li:hover .post-thumb {
  opacity: 1;
  box-shadow: 0 0 30px var(--glow);
}

.post-info {
  flex: 1;
  min-width: 0;
}

.post-list .post-date {
  color: var(--pink);
  font-size: 13px;
  margin-right: 12px;
}

.post-list .post-title a {
  color: var(--cyan);
}

.post-list .post-excerpt {
  color: var(--dim);
  font-size: 13px;
  margin-top: 4px;
}

@media (max-width: 600px) {
  .post-thumb { width: 80px; height: 56px; }
}

/* blog post */
.post-banner {
  width: 100%;
  max-height: 280px;
  object-fit: cover;
  border: 1px solid #ffaf5f55;
  border-radius: 2px;
  margin-bottom: 24px;
  box-shadow: 0 0 60px #ffaf5f22;
  filter: saturate(0.7) contrast(1.1);
}

.post-header {
  margin-bottom: 2em;
}

.post-header h1 {
  margin-top: 0;
  margin-bottom: 4px;
}

.post-meta {
  color: var(--pink);
  font-size: 13px;
  margin-bottom: 8px;
}

.post-content ul, .post-content ol {
  margin-bottom: 1em;
  padding-left: 1.5em;
}

.post-content li {
  margin-bottom: 0.3em;
}

.post-content li::marker {
  color: var(--pink);
}

/* code */
code {
  font-family: inherit;
  color: var(--pink);
  background-color: #1a0a10;
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 0.92em;
}

pre {
  background-color: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 14px 16px;
  overflow-x: auto;
  margin-bottom: 1.2em;
  line-height: 1.5;
  box-shadow: 0 0 60px var(--glow);
}

pre code {
  color: var(--cream);
  background: none;
  padding: 0;
}

/* blinking cursor on terminal blocks */
pre.terminal code::after {
  content: "";
  width: 7px;
  height: 14px;
  background: var(--cream);
  display: inline-block;
  animation: cursor-blink 1.5s step-start infinite;
}

@keyframes cursor-blink {
  50% { opacity: 0; }
}

/* blockquotes — for citations */
blockquote {
  border-left: 3px solid var(--pink);
  padding: 10px 16px;
  margin: 1.2em 0;
  background-color: #0d0508;
  color: var(--cream);
  box-shadow: inset 4px 0 12px -4px #ff87af22;
}

blockquote p { margin-bottom: 0.5em; }
blockquote p:last-child { margin-bottom: 0; }
blockquote cite {
  display: block;
  color: var(--dim);
  font-size: 13px;
  margin-top: 4px;
}

/* tables */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.2em;
  font-size: 14px;
}

th {
  font-weight: 900;
  padding: 8px 12px;
  text-align: left;
  color: var(--green);
  border-bottom: 1px solid var(--border);
}

td {
  padding: 6px 12px;
  border-bottom: 1px solid #1a1a1a;
}

tr:nth-child(odd) { background-color: #080808; }
tr:hover { background-color: #151515; }

/* images */
.post-content img {
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 2px;
  margin: 1em 0;
}

.post-content img + em {
  display: block;
  color: var(--dim);
  font-size: 13px;
  margin-top: -0.5em;
  margin-bottom: 1em;
}

/* tags */
.tag {
  display: inline-block;
  background-color: var(--bg-alt);
  border: 1px solid var(--border);
  color: var(--green);
  padding: 2px 8px;
  font-size: 12px;
  margin-right: 4px;
  margin-bottom: 4px;
  border-radius: 2px;
  transition: background-color 0.15s;
}

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

/* footer */
footer {
  text-align: center;
  color: var(--dim);
  font-size: 12px;
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid #1a1a1a;
}

footer a { color: var(--dim); }
footer a:hover { color: var(--pink); }

/* social links */
.socials {
  text-align: center;
  margin: 20px 0;
}

.socials a {
  color: var(--cream);
  padding: 0 8px;
  font-size: 14px;
}

.socials a:hover { color: var(--cyan); }

/* responsive */
@media (max-width: 600px) {
  body { font-size: 14px; }
  #container { padding: 10px 12px 40px; }
  .avatar { float: none; display: block; margin: 0 auto 16px; }
  nav ul { flex-direction: column; }
}

/* hr */
hr {
  border: none;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--orange), transparent) 1;
  margin: 2em 0;
}

/* references / bibliography section */
.references {
  font-size: 13px;
  color: var(--dim);
  border-top: 1px solid #1a1a1a;
  padding-top: 1em;
  margin-top: 2em;
}

.references h2 {
  font-size: 1em;
  color: var(--dim);
  border-bottom: none;
}

.references ol {
  padding-left: 2em;
}

.references li {
  margin-bottom: 0.5em;
}

/* -----------------------------------------------
   Accessibility: forced light mode fallback
   Not a feature — graceful degradation for users
   with prefers-color-scheme: light (photosensitivity,
   OS-level settings). You never see this unless you
   or the OS force it.
   ----------------------------------------------- */
/* Light mode fallback — only activates when html has data-theme="light".
   This lets users with photosensitivity opt in via a bookmarklet or
   browser extension, but dark is always the default regardless of OS. */
html[data-theme="light"] {
  --cyan:    #005f87;
  --pink:    #87004f;
  --green:   #1a7a1a;
  --dim:     #666;
  --cream:   #1a1a1a;
  --bg:      #f5f0eb;
  --bg-alt:  #ebe5df;
  --bg-hover:#e0ebe0;
  --glow:    #1a7a1a18;
  --glow-md: #1a7a1a28;
  --border:  #1a7a1a44;
}

html[data-theme="light"] .post-banner { filter: none; }
html[data-theme="light"] code { background-color: #f0e8e4; }
html[data-theme="light"] blockquote { background-color: #f5eeed; box-shadow: none; }
html[data-theme="light"] tr:nth-child(odd) { background-color: #efe9e3; }
html[data-theme="light"] ::selection { background: var(--green); color: #fff; }

/* high contrast mode */
@media (prefers-contrast: more) {
  :root {
    --dim:     #bbb;
    --border:  #87ff87aa;
  }

  a:hover { text-decoration: underline; }
  .post-banner { filter: contrast(1.3); }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  pre.terminal code::after { animation: none; }
  * { transition: none !important; }
}