/* oxicrypt site — minimal overrides on Bootstrap 5 */

:root {
  --navy: #0f172a;
  --navy-light: #1e293b;
  --accent: #0ea5e9;
  --accent-hover: #0284c7;
}

/* ---- Global ---- */

body {
  color: #334155;
}

.bg-navy {
  background-color: var(--navy) !important;
}

.text-accent {
  color: var(--accent) !important;
}

.btn-accent {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn-accent:hover,
.btn-accent:focus {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  color: #fff;
}

/* ---- Section headings ---- */

.section-heading {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--navy);
}

/* ---- Hero ---- */

.hero-section {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 60%, #0f2940 100%);
}

.logo-hero {
  filter: brightness(0) invert(1);
}
.logo-hero text {
  fill: #fff;
}

/* ---- Nav ---- */

.logo-nav {
  filter: brightness(0) invert(1);
}

.navbar-dark .nav-link {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ---- Algorithm table ---- */

.algo-table thead {
  background-color: var(--navy);
  color: #fff;
}

.algo-table th,
.algo-table td {
  font-size: 0.875rem;
  vertical-align: middle;
}

.algo-table td:first-child {
  white-space: nowrap;
}

/* ---- Property cards ---- */

.property-card {
  transition: transform 0.15s ease;
}
.property-card:hover {
  transform: translateY(-3px);
}

.prop-icon {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
}

/* ---- Doc cards ---- */

.doc-icon {
  font-size: 2rem;
}

.doc-card {
  transition: transform 0.15s ease;
}
.doc-card:hover {
  transform: translateY(-3px);
}

/* ---- Code blocks ---- */

.code-block {
  background-color: var(--navy);
  color: #e2e8f0;
  border-radius: 0.5rem;
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  font-size: 0.85rem;
  line-height: 1.7;
}

.code-block code {
  color: inherit;
  font-size: inherit;
}

.code-comment {
  color: #64748b;
}

/* ---- Footer ---- */

footer a:hover {
  color: var(--accent) !important;
}

/* ---- Smooth scroll ---- */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 70px;
}