/*
 * PC Buhera theme: dark, terminal-flavoured palette on top of Bootstrap 5.3.
 * The layout sets data-bs-theme="dark" on <html>; colours are expressed as Bootstrap
 * CSS variables so components (links, buttons, borders, forms) pick them up.
 * Fonts (Inter + JetBrains Mono) are self-hosted; @font-face rules are in fonts.css.
 */

:root {
  --site-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --site-font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --site-accent: #3ddc84;          /* terminal green */
  --site-accent-rgb: 61, 220, 132;
  --site-accent-hover: #6ee7a4;
  --site-accent-active: #2fc372;
  --site-accent-2: #38bdf8;        /* cyan, secondary accent */
  --site-accent-2-rgb: 56, 189, 248;
  --site-on-accent: #07110b;       /* text on accent backgrounds */

  --bs-font-sans-serif: var(--site-font-sans);
  --bs-font-monospace: var(--site-font-mono);
  --bs-body-font-family: var(--site-font-sans);
}

[data-bs-theme=dark] {
  --bs-body-bg: #0d1117;
  --bs-body-bg-rgb: 13, 17, 23;
  --bs-body-color: #e6edf3;
  --bs-body-color-rgb: 230, 237, 243;
  --bs-emphasis-color: #ffffff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-heading-color: #f0f6fc;

  --bs-secondary-color: rgba(230, 237, 243, 0.72);
  --bs-secondary-color-rgb: 230, 237, 243;
  --bs-secondary-bg: #161b22;
  --bs-secondary-bg-rgb: 22, 27, 34;
  --bs-tertiary-color: rgba(230, 237, 243, 0.5);
  --bs-tertiary-color-rgb: 230, 237, 243;
  --bs-tertiary-bg: #11161d;
  --bs-tertiary-bg-rgb: 17, 22, 29;

  --bs-border-color: #2a313c;
  --bs-border-color-translucent: rgba(240, 246, 252, 0.12);

  --bs-primary: var(--site-accent);
  --bs-primary-rgb: var(--site-accent-rgb);
  --bs-primary-text-emphasis: #8ff0bb;
  --bs-primary-bg-subtle: #0c2a1a;
  --bs-primary-border-subtle: #1f7a4a;
  --bs-info: var(--site-accent-2);
  --bs-info-rgb: var(--site-accent-2-rgb);

  --bs-link-color: var(--site-accent);
  --bs-link-color-rgb: var(--site-accent-rgb);
  --bs-link-hover-color: var(--site-accent-hover);
  --bs-link-hover-color-rgb: 110, 231, 164;
  --bs-code-color: var(--site-accent-2);

  --bs-focus-ring-color: rgba(var(--site-accent-rgb), 0.35);
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  /* Faint dot grid for a "circuit board" feel; low enough contrast not to hurt legibility. */
  background-image: radial-gradient(rgba(var(--bs-body-color-rgb), 0.045) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: var(--site-font-mono);
  font-weight: 700;
  letter-spacing: -0.02em;
}

code, kbd, pre, samp, .font-mono {
  font-family: var(--site-font-mono);
}

::selection {
  background-color: rgba(var(--site-accent-rgb), 0.35);
  color: var(--bs-emphasis-color);
}

/* Bootstrap compiles button colours into per-variant variables, so re-point them at the accent. */
.btn-primary {
  --bs-btn-color: var(--site-on-accent);
  --bs-btn-bg: var(--site-accent);
  --bs-btn-border-color: var(--site-accent);
  --bs-btn-hover-color: var(--site-on-accent);
  --bs-btn-hover-bg: var(--site-accent-hover);
  --bs-btn-hover-border-color: var(--site-accent-hover);
  --bs-btn-focus-shadow-rgb: var(--site-accent-rgb);
  --bs-btn-active-color: var(--site-on-accent);
  --bs-btn-active-bg: var(--site-accent-active);
  --bs-btn-active-border-color: var(--site-accent-active);
  --bs-btn-disabled-color: var(--site-on-accent);
  --bs-btn-disabled-bg: var(--site-accent);
  --bs-btn-disabled-border-color: var(--site-accent);
  font-weight: 600;
}

.btn-outline-primary {
  --bs-btn-color: var(--site-accent);
  --bs-btn-border-color: var(--site-accent);
  --bs-btn-hover-color: var(--site-on-accent);
  --bs-btn-hover-bg: var(--site-accent);
  --bs-btn-hover-border-color: var(--site-accent);
  --bs-btn-focus-shadow-rgb: var(--site-accent-rgb);
  --bs-btn-active-color: var(--site-on-accent);
  --bs-btn-active-bg: var(--site-accent-active);
  --bs-btn-active-border-color: var(--site-accent-active);
  --bs-btn-disabled-color: var(--site-accent);
  --bs-btn-disabled-border-color: var(--site-accent);
}

.btn-secondary {
  --bs-btn-color: var(--bs-emphasis-color);
  --bs-btn-bg: #2a313c;
  --bs-btn-border-color: #3a4350;
  --bs-btn-hover-color: var(--bs-emphasis-color);
  --bs-btn-hover-bg: #343c48;
  --bs-btn-hover-border-color: #4a5462;
  --bs-btn-focus-shadow-rgb: var(--site-accent-rgb);
  --bs-btn-active-color: var(--bs-emphasis-color);
  --bs-btn-active-bg: #3a4350;
  --bs-btn-active-border-color: #4a5462;
}

.btn-outline-secondary {
  --bs-btn-color: var(--bs-secondary-color);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-color: var(--bs-emphasis-color);
  --bs-btn-hover-bg: #2a313c;
  --bs-btn-hover-border-color: #3a4350;
  --bs-btn-focus-shadow-rgb: var(--site-accent-rgb);
  --bs-btn-active-color: var(--bs-emphasis-color);
  --bs-btn-active-bg: #3a4350;
  --bs-btn-active-border-color: #4a5462;
}

.btn:focus-visible, .btn:active:focus-visible, .btn-link.nav-link:focus-visible,
.form-control:focus, .form-select:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--bs-body-bg), 0 0 0 0.25rem rgba(var(--site-accent-rgb), 0.6);
}

.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--site-accent);
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Brand mark, shared by the navbar and the footer (both rendered from _Layout). */
.site-brand {
  font-family: var(--site-font-mono);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--bs-emphasis-color);
  text-decoration: none;
}

.site-brand:hover, .site-brand:focus {
  color: var(--bs-emphasis-color);
}

.brand-prompt {
  color: var(--site-accent);
  margin-right: 0.15em;
}

.brand-cursor {
  animation: brand-blink 1.1s steps(1) infinite;
}

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

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

/* Form validation messages from the validation tag helpers / jQuery unobtrusive validation. */
.field-validation-error {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--bs-form-invalid-color);
}

.input-validation-error {
  border-color: var(--bs-form-invalid-border-color);
}

.input-validation-error:focus {
  border-color: var(--bs-form-invalid-border-color);
  box-shadow: 0 0 0 0.1rem var(--bs-body-bg), 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.5);
}