/* =============================================
   Jared S. Bauer — Theme
   Inspired by GitHub Blog dark mode
   =============================================
   Greens (replacing GitHub's blues):
     #2ea043  links & interactive text
     #238636  buttons & CTAs
     #00b341  highlights, active states, code

   Grays (GitHub's dark palette):
     #e6edf3  headings / primary text
     #c9d1d9  body text
     #8b949e  secondary / muted
     #6e7681  very muted / metadata
     #30363d  borders
     #21262d  subtle borders
     #161b22  surface / cards
     #0d1117  canvas / background
   ============================================= */

/* ── Custom properties ── */
:root {
  --color-bg:             #0d1117;
  --color-surface:        #161b22;
  --color-surface-alt:    #1c2128;
  --color-border:         #30363d;
  --color-border-subtle:  #21262d;

  --color-text:           #c9d1d9;
  --color-text-heading:   #e6edf3;
  --color-text-secondary: #8b949e;
  --color-text-muted:     #6e7681;

  --color-green-link:     #2ea043;
  --color-green-btn:      #238636;
  --color-green-accent:   #00b341;

  /* Bootstrap overrides */
  --bs-body-bg:           #0d1117;
  --bs-body-color:        #c9d1d9;
  --bs-link-color:        #2ea043;
  --bs-link-hover-color:  #00b341;
  --bs-primary:           #238636;
  --bs-border-color:      #30363d;
  --bs-font-sans-serif:   -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
}

/* ── Base ── */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* ── Headings ── */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--color-text-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

/* ── Links ── */
a { color: var(--color-green-link); }
a:hover { color: var(--color-green-accent); text-decoration: underline; }

/* ── Body copy ── */
p { color: var(--color-text); line-height: 1.75; }
li { color: var(--color-text); }
strong { color: var(--color-text-heading); font-weight: 600; }

/* ── Navbar ── */
#mainNav {
  background-color: rgba(13, 17, 23, 0.95) !important;
  border-bottom: 1px solid var(--color-border-subtle);
  backdrop-filter: blur(8px);
}
#mainNav .navbar-brand {
  color: var(--color-text-heading) !important;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
}
#mainNav .navbar-brand:hover { color: var(--color-green-accent) !important; text-decoration: none; }
#mainNav .nav-link {
  color: var(--color-text-secondary) !important;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
#mainNav .nav-link:hover { color: var(--color-green-accent) !important; text-decoration: none; }
#mainNav .nav-link.active { color: var(--color-green-accent) !important; }
#mainNav .navbar-toggler {
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

/* ── Masthead / Hero ── */
.masthead { background-color: var(--color-bg); }
.masthead::before { background: rgba(13, 17, 23, 0.7); }
header.masthead .site-heading h1,
header.masthead .post-heading h1 {
  font-size: calc(2.1rem + 1.2vw);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
@media (min-width: 1200px) {
  header.masthead .site-heading h1,
  header.masthead .post-heading h1 {
    font-size: 3.8rem;
  }
}
.masthead .site-heading h1 a { text-decoration: none; }
.masthead .subheading {
  color: rgba(201, 209, 217, 0.85);
  font-size: 1.1rem;
  font-weight: 400;
}

/* ── Post preview cards ── */
.post-preview {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.post-preview a { text-decoration: none; }
.post-preview a:hover { text-decoration: none; }
.post-title {
  color: var(--color-text-heading) !important;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 0.4rem;
  transition: color 0.15s ease;
}
.post-preview a:hover .post-title,
.post-preview a:hover h2 {
  color: var(--color-green-link) !important;
}
.post-subtitle {
  color: var(--color-text-secondary) !important;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: 0.6rem;
}
.post-meta {
  color: var(--color-text-muted) !important;
  font-size: 14px;
  font-weight: 400;
  font-style: normal !important;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  letter-spacing: 0.01em;
}
.post-meta a {
  color: var(--color-text-muted) !important;
  text-decoration: none;
}
.post-meta a:hover { color: var(--color-green-link) !important; text-decoration: underline; }

/* Post heading meta (individual post page) */
.post-heading .meta {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.8rem;
  font-style: normal !important;
  letter-spacing: 0.01em;
}

/* Post heading (individual post page) */
.post-heading h1 a { text-decoration: none; }
.post-heading .subheading {
  color: rgba(201, 209, 217, 0.85);
  font-size: 1.1rem;
}
.post-heading .meta {
  color: rgba(139, 148, 158, 0.9);
  font-size: 0.85rem;
  font-style: normal !important;
}
.post-heading .meta a { color: rgba(201, 209, 217, 0.8); text-decoration: none; }
.post-heading .meta a:hover { text-decoration: underline; }

/* ── HR / dividers ── */
hr {
  border-color: var(--color-border-subtle);
  opacity: 1;
  margin: 0;
}

/* ── Footer ── */
footer.border-top {
  background-color: var(--color-bg);
  border-color: var(--color-border-subtle) !important;
}
footer .fa-stack .fa-circle { color: var(--color-surface-alt); }
footer a:hover .fa-circle { color: var(--color-green-btn); }
footer .text-muted { color: var(--color-text-muted) !important; }
footer a { color: var(--color-text-muted); text-decoration: none; }
footer a:hover { color: var(--color-green-link); }
footer small, footer .small { color: var(--color-text-muted); font-size: 0.8rem; }

/* ── Buttons ── */
/* Default: #238636 (dark green) — solid, purposeful
   Hover:   #2ea043 (medium green) — brightens on interaction
   Focus:   green glow ring        — accessible */
.btn-primary {
  background-color: var(--color-green-btn);   /* #238636 */
  border-color: var(--color-green-btn);
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  border-radius: 6px;
  padding: 0.5rem 1.25rem;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary:hover {
  background-color: var(--color-green-link);  /* #2ea043 */
  border-color: var(--color-green-link);
  color: #fff;
}
.btn-primary:focus,
.btn-primary:focus-visible {
  background-color: var(--color-green-link);
  border-color: var(--color-green-link);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(46, 160, 67, 0.4);
  outline: none;
}
.btn-primary:active {
  background-color: var(--color-green-accent); /* #00b341 — brightest on press */
  border-color: var(--color-green-accent);
  color: #fff;
}

/* ── Outline button (secondary action, e.g. View Portfolio) ── */
.btn-outline-secondary {
  color: var(--color-text-secondary);
  border-color: var(--color-border);
  background-color: transparent;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  border-radius: 6px;
  padding: 0.5rem 1.25rem;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.btn-outline-secondary:hover {
  color: var(--color-green-accent);
  border-color: var(--color-green-accent);
  background-color: rgba(0, 179, 65, 0.08);
}

/* ── Form inputs ── */
.form-control,
.form-floating > .form-control {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text);
  font-size: 0.95rem;
}
.form-control:focus {
  background-color: var(--color-surface-alt);
  border-color: var(--color-green-accent);
  color: var(--color-text);
  box-shadow: 0 0 0 3px rgba(0, 179, 65, 0.15);
}
.form-control::placeholder { color: var(--color-text-muted); }
.form-floating > label { color: var(--color-text-muted); font-size: 0.9rem; }

/* ── Code ── */
code {
  background-color: var(--color-surface);
  color: var(--color-green-accent);
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  padding: 0.1em 0.45em;
  font-size: 0.875em;
}
pre {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 1rem;
}
pre code {
  background: none;
  border: none;
  padding: 0;
  color: var(--color-text);
}

/* ── Blockquote ── */
blockquote {
  border-left: 3px solid var(--color-green-accent);
  padding: 0.5rem 0 0.5rem 1.25rem;
  color: var(--color-text-secondary);
  margin: 1.5rem 0;
}

/* ── Tables ── */
table { border-color: var(--color-border); }
th { color: var(--color-text-heading); background-color: var(--color-surface); }
td { color: var(--color-text); border-color: var(--color-border-subtle); }

/* ── Tags/pills ── */
.tag-pill {
  display: inline-block;
  background-color: rgba(230, 237, 243, 0.34);
  color: var(--color-text-secondary);
  border: 1px solid rgba(230, 237, 243, 0.4);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 500;
  font-style: normal;
  padding: 0.15rem 0.65rem;
  text-decoration: none;
  letter-spacing: 0.02em;
}
.tag-pill:hover {
  background-color: rgba(230, 237, 243, 0.67);
  color: var(--color-green-accent);
  text-decoration: none;
}

/* ── Misc ── */
small, .small, caption, figcaption { color: var(--color-text-muted); }