/* =========================================================
   Theme overrides — loaded AFTER bootstrap.min.css.
   Bootstrap 5.3 exposes its whole design system as CSS custom
   properties (--bs-*), so re-pointing those to our palette
   re-themes every Bootstrap component (buttons, cards, badges,
   forms, navbar...) without touching Bootstrap's own file or
   fighting its specificity. Only the handful of things Bootstrap
   has no equivalent for (status board, typewriter tagline, dot
   grid) are hand-written below.
   ========================================================= */

[data-bs-theme="dark"] {
  --bs-body-bg: #0a0e14;
  --bs-body-color: #e4e9f0;
  --bs-body-font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  --bs-emphasis-color: #ffffff;
  --bs-secondary-color: #8b96a6;
  --bs-border-color: #232936;
  --bs-border-color-translucent: #232936;
  --bs-tertiary-bg: #10141c;
  --bs-secondary-bg: #171c26;

  --bs-primary: #00d4ff;
  --bs-primary-rgb: 0, 212, 255;
  --bs-link-color: #00d4ff;
  --bs-link-hover-color: #33ddff;
  --bs-link-color-rgb: 0, 212, 255;
  --bs-link-hover-color-rgb: 51, 221, 255;

  --bs-card-bg: #10141c;
  --bs-card-border-color: #232936;
  --bs-card-cap-bg: #10141c;

  --bs-list-group-bg: transparent;
  --bs-list-group-border-color: #232936;
  --bs-list-group-color: #e4e9f0;

  --bs-focus-ring-color: rgba(0, 212, 255, 0.4);

  color-scheme: dark;
}

body {
  background-image: radial-gradient(circle, rgba(139, 150, 166, 0.14) 1px, transparent 1px);
  background-size: 24px 24px;
  min-height: 100vh;
  min-height: 100dvh; /* see note on the equivalent fix in the previous version — same iOS Safari address-bar issue, same fix */
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
#main-content {
  flex: 1;
}

.font-mono {
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}

::selection {
  background-color: var(--bs-primary);
  color: var(--bs-body-bg);
}
:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Navbar ---- */
.navbar {
  background-color: rgba(10, 14, 20, 0.9) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--bs-border-color);
}
.navbar-brand span {
  color: var(--bs-primary);
}
.nav-link {
  color: var(--bs-secondary-color) !important;
}
.nav-link:hover,
.nav-link.active {
  color: var(--bs-primary) !important;
}

/* ---- Badges: Bootstrap supplies size/padding/radius via .badge;
   these just add our brand color variants on top. ---- */
.badge-violet {
  color: #b084f5;
  background-color: rgba(176, 132, 245, 0.12);
  border: 1px solid rgba(176, 132, 245, 0.4);
}
.badge-cyan {
  color: #00d4ff;
  background-color: rgba(0, 212, 255, 0.12);
  border: 1px solid rgba(0, 212, 255, 0.4);
}
.badge-green {
  color: #39ff88;
  background-color: rgba(57, 255, 136, 0.12);
  border: 1px solid rgba(57, 255, 136, 0.4);
}
.badge-dashed {
  border-style: dashed !important;
}

/* ---- Buttons: btn-primary already themes correctly via --bs-primary
   above; btn-outline-secondary and btn-link get light brand touches. ---- */
.btn-outline-secondary {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-color: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-hover-bg: transparent;
}
.btn-link {
  color: var(--bs-secondary-color);
  text-decoration: none;
}
.btn-link:hover {
  color: var(--bs-body-color);
}

/* ---- Status dot (used inside the status board list-group) ---- */
@keyframes status-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.status-dot {
  position: relative;
  display: inline-flex;
  width: 0.5rem;
  height: 0.5rem;
  flex-shrink: 0;
}
.status-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #39ff88;
  opacity: 0.75;
  animation: status-pulse 2s ease-in-out infinite;
}
.status-dot::after {
  content: "";
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #39ff88;
}

/* ---- Hero tagline (typewriter) ----
   Same fragility as before applies to any nowrap+ch-width+overflow-hidden
   element: on a narrow container the width gets clamped and whatever
   doesn't fit is silently cut off rather than wrapped. Rather than pick a
   pixel breakpoint by feel, this is now tied to the SAME breakpoint as
   the 2-column hero grid (lg / 992px) — the animated, exact-width version
   only runs once we already know there's a wide enough column for it;
   everywhere else it's just normal wrapping text. */
.hero-tagline-wrap {
  overflow: hidden;
}
.hero-tagline {
  display: inline-block;
  white-space: nowrap;
  border-right: 2px solid var(--bs-primary);
  padding-right: 0.25rem;
  color: var(--bs-primary);
}
@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}
@media (max-width: 991.98px) {
  .hero-tagline-wrap {
    width: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
  }
  .hero-tagline {
    display: block !important;
    white-space: normal !important;
    border-right: none !important;
    padding-right: 0 !important;
    animation: none !important;
  }
}

/* ---- Status board card ---- */
.status-board .card-header {
  background-color: var(--bs-card-bg);
}
.window-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  display: inline-block;
}

/* ---- Prose (Markdown body content) ---- */
.prose {
  color: var(--bs-secondary-color);
  line-height: 1.75;
}
.prose h2 {
  font-family: "JetBrains Mono", monospace;
  color: var(--bs-body-color);
  font-size: 1.375rem;
  font-weight: 600;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
.prose h3 {
  font-family: "JetBrains Mono", monospace;
  color: var(--bs-body-color);
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.prose blockquote {
  border-left: 2px solid #b084f5;
  padding-left: 1rem;
  color: var(--bs-body-color);
  font-style: italic;
  margin: 1.5rem 0;
}
.prose pre {
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  padding: 1rem;
  overflow-x: auto;
  font-size: 0.875rem;
}
.prose :not(pre) > code {
  background: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.25rem;
  padding: 0.125rem 0.375rem;
  color: var(--bs-primary);
}
.prose table {
  width: 100%;
}
.prose th {
  color: var(--bs-body-color);
  font-family: "JetBrains Mono", monospace;
}

/* ---- Timeline (About page) — built from Bootstrap utilities plus this
   handful of connector-line rules Bootstrap has no component for. ---- */
.timeline-marker {
  position: absolute;
  left: -1.6rem;
  top: 0.4rem;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--bs-primary);
}

/* ---- Contact form honeypot ---- */
.honeypot-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Mobile spacing ---- */
@media (max-width: 767.98px) {
  .section-py {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }
  .hero-name {
    font-size: 1.75rem !important;
  }
}