/* Custom site theme overrides (Chirpy + Bootstrap)
 *
 * Goal: "hacker" feel — deeper blacks/greys, neon accents (blue/purple/green),
 * high-contrast borders, and gradient borders. Also remove orange-ish highlight
 * feel by pushing links + emphasis into the neon palette.
 *
 * We prefer overriding Chirpy's CSS variables so upgrades remain safe.
 */

/* =========
 * Palette
 * ========= */

:root {
  /* Surfaces */
  --aa-bg-0: #07070a; /* near-black (canonical) */
  --aa-bg-1: #090910; /* slightly lifted surface (cool near-black) */
  --aa-bg-2: #0c0f16; /* lifted panel */
  --aa-bg-3: #0f131c; /* hover/alt surface */

  /* Text */
  --aa-text: #d7dde6;
  --aa-text-muted: #8f9aa8;
  --aa-heading: #eef2f7;

  /* Neon accents */
  --aa-cyan: #00d1ff;
  --aa-cyan-rgb: 0, 209, 255;
  --aa-purple: #a855f7;
  --aa-purple-rgb: 168, 85, 247;
  --aa-green: #22c55e;
  --aa-green-rgb: 34, 197, 94;

  /* Gradients */
  --aa-border-gradient: linear-gradient(135deg, var(--aa-cyan), var(--aa-purple), var(--aa-green));
  /* 1px rule gradient (dark-to-transparent edges, used for HR/footer borders) */
  --aa-rule-gradient: linear-gradient(
    90deg,
    transparent,
    rgba(var(--aa-cyan-rgb), 0.55),
    rgba(var(--aa-purple-rgb), 0.50),
    rgba(var(--aa-green-rgb), 0.45),
    transparent
  );
  /* 1px rule gradient, vertical (used for sidebar divider) */
  --aa-rule-gradient-vertical: linear-gradient(
    180deg,
    transparent,
    rgba(var(--aa-cyan-rgb), 0.55),
    rgba(var(--aa-purple-rgb), 0.50),
    rgba(var(--aa-green-rgb), 0.45),
    transparent
  );
  --aa-glow-cyan: rgba(var(--aa-cyan-rgb), 0.22);
  --aa-glow-purple: rgba(var(--aa-purple-rgb), 0.22);
  --aa-glow-green: rgba(var(--aa-green-rgb), 0.18);

  /* Shadow tuning (overridden for light mode below) */
  --aa-card-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.02) inset,
    0 10px 30px rgba(0, 0, 0, 0.35);
  --aa-tag-shadow: 0 0 18px rgba(var(--aa-cyan-rgb), 0.06);
  --aa-hover-shadow:
    0 0 0 1px rgba(var(--aa-purple-rgb), 0.25) inset,
    0 0 22px rgba(var(--aa-cyan-rgb), 0.12),
    0 0 22px rgba(var(--aa-green-rgb), 0.10);
}

/* =====================================
 * Apply the "hacker" theme in all modes
 * ===================================== */

html {
  /* Text */
  --text-color: var(--aa-text);
  --text-muted-color: var(--aa-text-muted);
  --heading-color: var(--aa-heading);
  --label-color: var(--aa-text-muted);

  /* Links + highlights (ditch orange) */
  --link-color: var(--aa-cyan) !important;
  --link-underline-color: rgba(var(--aa-cyan-rgb), 0.35) !important;
  --toc-highlight: var(--aa-purple);
  --checkbox-checked-color: var(--aa-green);
  --btn-share-hover-color: var(--aa-cyan);

  /* Borders / controls */
  --btn-border-color: rgba(var(--aa-cyan-rgb), 0.30);
  --search-border-color: rgba(var(--aa-green-rgb), 0.22);
  --input-focus-border-color: rgba(var(--aa-purple-rgb), 0.50);
  --blockquote-border-color: rgba(var(--aa-purple-rgb), 0.45);
  --link-underline-color: rgba(var(--aa-cyan-rgb), 0.35) !important;

  /* Sidebar hover */
  --sidebar-hover-bg: rgba(var(--aa-cyan-rgb), 0.08);

  /* Bootstrap primary */
  --bs-primary: var(--aa-purple);
  --bs-primary-rgb: var(--aa-purple-rgb);

  /* Fonts (hacker / terminal vibe) */
  --aa-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --aa-font-mono-tight: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

/* Sidebar divider: Chirpy expects `--sidebar-border-color` to be a color (it’s also used
 * for icon outline shadows), so we keep that var and add a gradient divider with a pseudo-element.
 */
#sidebar {
  border-right: 0 !important;
}

#sidebar::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: var(--aa-rule-gradient-vertical);
  pointer-events: none;
}

/* Apply the font stack across the site */
body {
  font-family: var(--aa-font-mono) !important;
  letter-spacing: 0.15px;
}

/* Headings + sidebar/menu should feel crisp */
header .post-desc,
#toc-bar .label,
#search-results a,
h1, h2, h3, h4, h5,
#sidebar .site-title,
#sidebar ul li.nav-item a.nav-link,
#topbar-title {
  font-family: var(--aa-font-mono-tight) !important;
  letter-spacing: 0.25px;
}

/* TOC popup uses its own font-family in Chirpy */
#toc-popup #toc-popup-content {
  font-family: var(--aa-font-mono-tight) !important;
}

/* Code blocks: keep monospace but slightly smaller for density */
code, pre, kbd, samp {
  font-family: var(--aa-font-mono) !important;
  font-size: 0.95em;
}

/* Dark mode: make sidebar/menu text higher-contrast (less dim) */
@media (prefers-color-scheme: dark) {
  html:not([data-mode]) {
    /* =========================
     * Dark mode surfaces (darker)
     * ========================= */
    --main-bg: var(--aa-bg-0);
    --card-bg: var(--aa-bg-1);
    --sidebar-bg: var(--aa-bg-1);
    --button-bg: var(--aa-bg-1);
    --topbar-bg: rgba(7, 7, 10, 0.78);
    --mask-bg: rgba(7, 7, 10, 0.92);

    --main-border-color: rgba(255, 255, 255, 0.06);
    --sidebar-border-color: rgba(255, 255, 255, 0.07);
    --btn-border-color: rgba(255, 255, 255, 0.10);
    --btn-backtotop-border-color: rgba(255, 255, 255, 0.10);

    /* Hover/tints (Chirpy uses an overlay with opacity) */
    --card-hovor-bg: rgba(255, 255, 255, 0.10);
    --sidebar-hover-bg: rgba(255, 255, 255, 0.05);

    /* Tables */
    --tb-odd-bg: rgba(255, 255, 255, 0.02);
    --tb-even-bg: rgba(255, 255, 255, 0.01);
    --tb-border-color: rgba(255, 255, 255, 0.06);

    /* Code blocks */
    --highlight-bg-color: #07070a;
    --inline-code-bg: rgba(255, 255, 255, 0.05);
    --code-header-muted-color: rgba(255, 255, 255, 0.07);

    /* Body text: brighter + cleaner contrast */
    --text-color: #e3e9f2;
    --text-muted-color: rgba(227, 233, 242, 0.74);
    --heading-color: #f4f7fb;
    --label-color: rgba(227, 233, 242, 0.72);

    /* A few theme-adjacent text vars that otherwise stay too gray */
    --post-list-text-color: rgba(227, 233, 242, 0.80);
    --topbar-text-color: rgba(227, 233, 242, 0.88);

    --sidebar-muted-color: rgba(215, 221, 230, 0.90); /* menu items */
    --sidebar-active-color: var(--aa-cyan); /* active item */
    --site-title-color: var(--aa-heading);
    --site-subtitle-color: rgba(215, 221, 230, 0.72);

    /* Prompts (improve readability + info prompt background tone) */
    --prompt-text-color: rgba(227, 233, 242, 0.88);
    --prompt-info-bg: rgba(3, 62, 120, 0.72);
    --prompt-info-icon-color: var(--aa-cyan);
  }
}

html[data-mode="dark"] {
  /* =========================
   * Dark mode surfaces (darker)
   * ========================= */
  --main-bg: var(--aa-bg-0);
  --card-bg: var(--aa-bg-1);
  --sidebar-bg: var(--aa-bg-1);
  --button-bg: var(--aa-bg-1);
  --topbar-bg: rgba(7, 7, 10, 0.78);
  --mask-bg: rgba(7, 7, 10, 0.92);

  --main-border-color: rgba(255, 255, 255, 0.06);
  --sidebar-border-color: rgba(255, 255, 255, 0.07);
  --btn-border-color: rgba(255, 255, 255, 0.10);
  --btn-backtotop-border-color: rgba(255, 255, 255, 0.10);

  --card-hovor-bg: rgba(255, 255, 255, 0.10);
  --sidebar-hover-bg: rgba(255, 255, 255, 0.05);

  --tb-odd-bg: rgba(255, 255, 255, 0.02);
  --tb-even-bg: rgba(255, 255, 255, 0.01);
  --tb-border-color: rgba(255, 255, 255, 0.06);

  --highlight-bg-color: #07070a;
  --inline-code-bg: rgba(255, 255, 255, 0.05);
  --code-header-muted-color: rgba(255, 255, 255, 0.07);

  --text-color: #e3e9f2;
  --text-muted-color: rgba(227, 233, 242, 0.74);
  --heading-color: #f4f7fb;
  --label-color: rgba(227, 233, 242, 0.72);
  --post-list-text-color: rgba(227, 233, 242, 0.80);
  --topbar-text-color: rgba(227, 233, 242, 0.88);

  --sidebar-muted-color: rgba(215, 221, 230, 0.90);
  --sidebar-active-color: var(--aa-cyan);
  --site-title-color: var(--aa-heading);
  --site-subtitle-color: rgba(215, 221, 230, 0.72);

  /* Prompts (improve readability + info prompt background tone) */
  --prompt-text-color: rgba(227, 233, 242, 0.88);
  --prompt-info-bg: rgba(3, 62, 120, 0.72);
  --prompt-info-icon-color: var(--aa-cyan);
}

/* Ensure the main page surface is always the canonical background color.
 * Chirpy doesn't set a background on `#main-wrapper` (it’s transparent), so depending on
 * overlays and compositing, DevTools may show a slightly different computed color.
 */
@media (prefers-color-scheme: dark) {
  html:not([data-mode]) #main-wrapper {
    background-color: var(--main-bg) !important;
  }
}

html[data-mode="dark"] #main-wrapper {
  background-color: var(--main-bg) !important;
}

/* Light mode: keep the palette, but reduce shadow intensity */
@media (prefers-color-scheme: light) {
  html:not([data-mode]) {
    --aa-card-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.02) inset,
      0 10px 24px rgba(0, 0, 0, 0.12);
    --aa-tag-shadow: 0 0 10px rgba(var(--aa-cyan-rgb), 0.04);
    --aa-hover-shadow:
      0 0 0 1px rgba(var(--aa-purple-rgb), 0.16) inset,
      0 0 14px rgba(var(--aa-cyan-rgb), 0.08),
      0 0 12px rgba(var(--aa-green-rgb), 0.06);
  }
}

html[data-mode="light"] {
  --aa-card-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.02) inset,
    0 10px 24px rgba(0, 0, 0, 0.12);
  --aa-tag-shadow: 0 0 10px rgba(var(--aa-cyan-rgb), 0.04);
  --aa-hover-shadow:
    0 0 0 1px rgba(var(--aa-purple-rgb), 0.16) inset,
    0 0 14px rgba(var(--aa-cyan-rgb), 0.08),
    0 0 12px rgba(var(--aa-green-rgb), 0.06);
}

/* Light mode: links should be purple (match the gradient palette) */
@media (prefers-color-scheme: light) {
  html:not([data-mode]) {
    --link-color: var(--aa-purple) !important;
    --link-underline-color: rgba(var(--aa-purple-rgb), 0.35) !important;
  }
}

html[data-mode="light"] {
  --link-color: var(--aa-purple) !important;
  --link-underline-color: rgba(var(--aa-purple-rgb), 0.35) !important;
}

/* ======================
 * Gradient border "skins"
 * ====================== */

/* Cards/previews: keep Chirpy layout but give them a neon gradient border */
.post-preview {
  border: 1px solid transparent !important;
  background:
    linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
    var(--aa-border-gradient) border-box !important;
  box-shadow: var(--aa-card-shadow) !important;
}

/* Chips/tags: gradient border + slightly brighter text */
.post-tag,
.tag {
  border: 1px solid transparent !important;
  background:
    linear-gradient(var(--main-bg), var(--main-bg)) padding-box,
    var(--aa-border-gradient) border-box !important;
  color: var(--text-color) !important;
  box-shadow: var(--aa-tag-shadow);
}

.post-tag i,
.tag i {
  color: inherit !important;
}

.post-tags .post-tag:hover,
.tag:hover {
  background:
    linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
    var(--aa-border-gradient) border-box !important;
  box-shadow: var(--aa-hover-shadow);
}

/* HR: subtle neon line */
hr {
  border: 0;
  height: 1px;
  background: var(--aa-rule-gradient);
}

/* Footer: replace Chirpy's solid top border with the neon gradient */
#tail-wrapper > footer,
footer[aria-label="Site Info"] {
  position: relative;
  border-top: 0 !important; /* override `border-top: 1px solid var(--main-border-color)` */
}

#tail-wrapper > footer::before,
footer[aria-label="Site Info"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--aa-rule-gradient);
}

/* Prompts: neon left border */
blockquote[class^="prompt-"],
blockquote[class*=" prompt-"] {
  border-left-color: rgba(var(--aa-cyan-rgb), 0.55) !important;
}

/* Prompt (info): blue gradient + better contrast */
blockquote.prompt-info {
  background: linear-gradient(
    135deg,
    rgba(2, 132, 199, 0.28),
    rgba(29, 78, 216, 0.22),
    rgba(30, 58, 138, 0.22)
  ) !important;
  color: var(--text-color) !important;
  box-shadow:
    0 0 0 1px rgba(var(--aa-cyan-rgb), 0.14) inset,
    0 0 18px rgba(var(--aa-cyan-rgb), 0.10),
    0 0 18px rgba(29, 78, 216, 0.10) !important;
}

blockquote.prompt-info::before {
  color: var(--aa-cyan) !important;
}

blockquote.prompt-info a {
  color: var(--aa-cyan) !important;
  border-bottom-color: rgba(var(--aa-cyan-rgb), 0.45) !important;
}

/* Light mode: reuse theme variables for prompt-info link color */
@media (prefers-color-scheme: light) {
  html:not([data-mode]) blockquote.prompt-info a {
    color: var(--prompt-info-icon-color) !important;
    border-bottom-color: currentColor !important;
  }
}

html[data-mode="light"] blockquote.prompt-info a {
  color: var(--prompt-info-icon-color) !important;
  border-bottom-color: currentColor !important;
}

/* Selection highlight */
::selection {
  background: rgba(var(--aa-purple-rgb), 0.35);
}

/* ======================
 * Link hover (replace Chirpy orange)
 * ====================== */
/* Chirpy hardcodes an orange hover color (#d2603a) for most links.
 * Override it to use our neon green accent used in the site's gradients.
 */
#page-category a:hover,
#page-tag a:hover,
#access-lastmod a:hover,
.post-tail-wrapper .license-wrapper > a:hover,
#search-results a:hover,
footer a:hover,
#topbar #breadcrumb a:hover,
.post-meta a:not([class]):hover,
.content a:not(.img-link):not(.btn):hover {
  color: var(--aa-green) !important;
  border-bottom: 1px solid var(--aa-green) !important;
  text-decoration: none;
}

/* Global link hover: ensure *all* links (not buttons) use the same neon-green hover
 * text + underline across the theme (sidebar/topbar/etc.).
 */
a:not(.btn):hover,
a:not(.btn):focus {
  color: var(--aa-green) !important;
  border-bottom-color: var(--aa-green) !important;
  text-decoration-color: var(--aa-green) !important;
}

a:not(.btn):hover > code.highlighter-rouge,
a:not(.btn):focus > code.highlighter-rouge {
  color: var(--aa-green) !important;
}

/* ======================
 * Home: Services preview
 * ====================== */
.aa-home-section {
  margin-top: 1.25rem;
}

/* Bootstrap vertical gutters (prod-safe):
 * Some later CSS (theme/custom/extension) can accidentally override `.row > * { margin-top: ... }`,
 * collapsing vertical spacing. Reinforce the canonical Bootstrap rules with `!important`.
 *
 * Safe because `--bs-gutter-y` defaults to 0 and is only non-zero when you add `g-*` / `gy-*`.
 */
.row {
  margin-top: calc(-1 * var(--bs-gutter-y)) !important;
}

.row > * {
  margin-top: var(--bs-gutter-y) !important;
}

/* Bootstrap gutter utility variables (prod-safe):
 * If any later-loaded CSS re-declares `.row { --bs-gutter-y: 0; }` after Bootstrap utilities,
 * the `g-* / gx-* / gy-*` classes can stop affecting `--bs-gutter-*`.
 *
 * Re-assert the variables here (custom.css loads last), so `.row.g-3` always yields vertical spacing.
 * Mirrors Bootstrap’s spacing scale.
 */
.g-0, .gx-0 { --bs-gutter-x: 0 !important; }
.g-0, .gy-0 { --bs-gutter-y: 0 !important; }
.g-1, .gx-1 { --bs-gutter-x: 0.25rem !important; }
.g-1, .gy-1 { --bs-gutter-y: 0.25rem !important; }
.g-2, .gx-2 { --bs-gutter-x: 0.5rem !important; }
.g-2, .gy-2 { --bs-gutter-y: 0.5rem !important; }
.g-3, .gx-3 { --bs-gutter-x: 1rem !important; }
.g-3, .gy-3 { --bs-gutter-y: 1rem !important; }
.g-4, .gx-4 { --bs-gutter-x: 1.5rem !important; }
.g-4, .gy-4 { --bs-gutter-y: 1.5rem !important; }
.g-5, .gx-5 { --bs-gutter-x: 3rem !important; }
.g-5, .gy-5 { --bs-gutter-y: 3rem !important; }

.aa-services .aa-services-engines .post-tag i {
  opacity: 0.9;
}

.aa-services-card {
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.aa-services-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--aa-hover-shadow) !important;
  filter: saturate(1.05);
}

.aa-services-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Gradient button utility (use anywhere) */
.aa-btn-gradient {
  border: 1px solid transparent !important;
  background:
    linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
    var(--aa-border-gradient) border-box !important;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

/* When used on Bootstrap primary buttons, ensure text stays readable in light mode too */
.btn.aa-btn-gradient.btn-primary {
  color: var(--text-color) !important;
}

.btn.aa-btn-gradient:hover,
.btn.aa-btn-gradient:focus {
  box-shadow: var(--aa-hover-shadow) !important;
  transform: translateY(-1px);
  filter: saturate(1.06);
}

.btn.aa-btn-gradient.btn-primary:hover,
.btn.aa-btn-gradient.btn-primary:focus {
  color: var(--heading-color) !important;
}