/* Belluaire Component — Custom Theme */
/* Built on Bootswatch Darkly — warm amber accent palette */

:root {
  --bc-gold:       #c8921a;
  --bc-gold-light: #e0a820;
  --bc-gold-dim:   #a07010;
  --bc-dark:       #1a1a2e;
  --bc-surface:    #1e1e2e;
  --bc-border:     rgba(200, 146, 26, 0.25);
}

/* ── Typography ──────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.02em;
}

.display-6 {
  font-weight: 700;
}

/* ── Accent color overrides ──────────────────────────────── */

.text-primary { color: var(--bc-gold) !important; }

a:not(.btn):not(.navbar-brand):not(.nav-link):not(.badge):not(.list-group-item) { color: var(--bc-gold) !important; }
a:not(.btn):not(.navbar-brand):not(.nav-link):not(.badge):not(.list-group-item):hover { color: var(--bc-gold-light) !important; }

/* ── Buttons ─────────────────────────────────────────────── */

.btn-primary {
  background-color: var(--bc-gold);
  border-color: var(--bc-gold);
  color: #111 !important;
  font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--bc-gold-light);
  border-color: var(--bc-gold-light);
  color: #111 !important;
}

.btn-outline-light {
  border-color: rgba(255,255,255,0.35);
}
.btn-outline-light:hover {
  background-color: var(--bc-gold);
  border-color: var(--bc-gold);
  color: #111;
}

/* ── Navbar ──────────────────────────────────────────────── */

.navbar {
  border-bottom: 1px solid var(--bc-border);
}

.navbar-brand {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--bc-gold) !important;
}

.nav-link:hover {
  color: var(--bc-gold) !important;
}

/* ── Hero header ─────────────────────────────────────────── */

header.bg-dark {
  background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 60%, #1e1a10 100%) !important;
  border-bottom: 1px solid var(--bc-border);
}

/* ── Cards ───────────────────────────────────────────────── */

.card {
  border-color: var(--bc-border);
  background-color: var(--bc-surface);
}

.card.border-primary {
  border-color: var(--bc-gold) !important;
}

.card.border-secondary {
  border-color: var(--bc-border) !important;
}

/* ── List group ──────────────────────────────────────────── */

.list-group-item {
  background-color: transparent;
  border-color: var(--bc-border);
}

/* ── HR divider ──────────────────────────────────────────── */

hr {
  border-color: var(--bc-border);
  opacity: 1;
}

/* ── Forms ───────────────────────────────────────────────── */

.form-control:focus {
  border-color: var(--bc-gold);
  box-shadow: 0 0 0 0.2rem rgba(200, 146, 26, 0.25);
}

/* ── Footer ──────────────────────────────────────────────── */

footer {
  border-top: 1px solid var(--bc-border);
}

/* ── Utility ─────────────────────────────────────────────── */

.text-uppercase.text-primary.small {
  color: var(--bc-gold) !important;
  letter-spacing: 0.1em;
}

/* ── Blog / Research section ─────────────────────────────── */

.blog-hero {
  background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 60%, #1e1a10 100%);
  border-bottom: 1px solid var(--bc-border);
}

.blog-nav,
section.sticky-top.blog-nav {
  --bs-bg-opacity: 1;              /* kill Bootstrap's bg-opacity variable */
  background-color: #1e1e2e !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: var(--bc-border) !important;
  z-index: 1019;
  box-shadow: 0 2px 12px rgba(0,0,0,0.6);
}

.btn-outline-secondary {
  border-color: var(--bc-border);
  color: rgba(255,255,255,0.65);
}
.btn-outline-secondary:hover {
  background-color: var(--bc-surface);
  border-color: var(--bc-gold);
  color: var(--bc-gold);
}
.blog-nav .btn-warning.active {
  background-color: var(--bc-gold);
  border-color: var(--bc-gold);
  color: #111;
}

/* Ensure headings below sticky nav aren't obscured on anchor jumps */
#posts, #featured, #subscribe {
  scroll-margin-top: 60px;
}

/* Bootstrap/Bootswatch's own .breadcrumb sets an opaque light-gray
   background (~#444) that sat in front of any custom dark background on
   a wrapping element, leaving gold breadcrumb text on an unthemed gray
   pill with borderline contrast. Strip it everywhere so the page's own
   dark background shows through. */
.breadcrumb {
  background-color: transparent;
}

.blog-breadcrumb {
  background-color: rgba(255,255,255,0.04);
  border-bottom: 1px solid var(--bc-border);
}
.blog-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: var(--bc-gold);
  content: "›";
}
.blog-breadcrumb .breadcrumb-item a {
  color: var(--bc-gold);
  text-decoration: none;
}

/* ── Pagination ──────────────────────────────────────────── */
/* Bootswatch Darkly's unthemed default rendered this in bright
   teal/green, totally off the site's navy/gold palette, with gold-on-
   teal text at ~1.1:1 contrast (effectively invisible). */

.page-link {
  background-color: var(--bc-surface);
  border-color: var(--bc-border);
  color: var(--bc-gold);
}
.page-link:hover {
  background-color: rgba(200,146,26,0.08);
  border-color: var(--bc-gold);
  color: var(--bc-gold-light);
}
.page-item.active .page-link {
  background-color: var(--bc-gold);
  border-color: var(--bc-gold);
  color: #111;
}
.page-item.disabled .page-link {
  background-color: var(--bc-surface);
  border-color: var(--bc-border);
  color: rgba(255,255,255,0.3);
}

/* ── Inline code ─────────────────────────────────────────── */
/* Bootstrap's default code color is an unthemed pink/magenta that falls
   just under WCAG AA contrast on this dark surface. */
code {
  color: var(--bc-gold-light);
}

.blog-featured-card {
  border-left: 4px solid var(--bc-gold) !important;
  background-color: var(--bc-surface);
}

.blog-post-card {
  border-left: 3px solid transparent !important;
  transition: border-color 0.2s ease, transform 0.2s ease;
  background-color: var(--bc-surface);
}
.blog-post-card:hover {
  border-left-color: var(--bc-gold) !important;
  transform: translateY(-2px);
}

.blog-back-bar {
  background-color: rgba(255,255,255,0.03);
  border-top: 1px solid var(--bc-border);
}

/* ── Article content typography ──────────────────────────── */

.article-content {
  font-size: 1.05rem;
  line-height: 1.85;
}
.article-content h2 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: 600;
  color: var(--bc-gold-light);
  border-bottom: 1px solid var(--bc-border);
  padding-bottom: 0.4rem;
}
.article-content h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
}
.article-content p {
  margin-bottom: 1.2rem;
}
.article-content ul,
.article-content ol {
  margin-bottom: 1.2rem;
  padding-left: 1.5rem;
}
.article-content li {
  margin-bottom: 0.4rem;
}
.article-content blockquote {
  border-left: 4px solid var(--bc-gold);
  padding-left: 1.5rem;
  margin: 1.5rem 0;
  font-style: italic;
  color: rgba(255,255,255,0.6);
}
.article-content code {
  background-color: rgba(255,255,255,0.08);
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  font-size: 0.875em;
  color: var(--bc-gold-light);
}

.article-excerpt {
  border-left: 4px solid var(--bc-gold);
  background-color: rgba(200,146,26,0.07);
}

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

/* ── Table of contents ───────────────────────────────────── */

#table-of-contents .nav-link {
  color: rgba(255,255,255,0.55);
  padding: 0.25rem 0;
  border-left: 2px solid transparent;
  transition: all 0.2s ease;
  font-size: 0.875rem;
}
#table-of-contents .nav-link:hover,
#table-of-contents .nav-link.active {
  color: var(--bc-gold);
  border-left-color: var(--bc-gold);
  padding-left: 0.5rem;
}

/* ── Sidebar cards for blog ──────────────────────────────── */

.card-header {
  background-color: rgba(255,255,255,0.05);
  border-bottom: 1px solid var(--bc-border);
}
.card-header.bg-warning {
  background-color: var(--bc-gold) !important;
}

.list-group-item-action:hover {
  background-color: rgba(200,146,26,0.08);
  color: var(--bc-gold);
}
.list-group-item.active {
  background-color: var(--bc-gold);
  border-color: var(--bc-gold);
  color: #111;
}