/* Blog Archive — page-scoped visual reset to match the new site */
/*
 * Additional CSS variables and styling for blog archive and post pages.
 * These definitions ensure the archive cards have a stronger border on hover
 * and that the legacy blog navbar matches the new marketing site header.
 */

/* Define a stronger border color for hover states. Fall back to the
 * standard border colour if custom properties are unavailable.
 */
:root {
  --color-border-strong: #d2cdf5;
}
[data-theme='dark'] {
  --color-border-strong: #39365a;
}

/* Navbar overhaul: apply marketing styles to the old .navbar used in
 * blog pages. This makes the header sticky with a blurred backdrop,
 * uses the primary colour for the logo and menu highlights, and aligns
 * spacing and typography with the main site. On mobile, the JS from
 * /static/script.js will toggle the .open class on the mobile menu.
 */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast);
}
[data-theme='dark'] .navbar {
  background-color: rgba(14, 14, 23, 0.9);
}

.navbar .logo,
.navbar .neon-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-primary);
  text-decoration: none;
}
.navbar .logo img,
.navbar .neon-logo img {
  height: 24px;
  width: auto;
  vertical-align: middle;
  margin-right: 6px;
}

/* Horizontal nav list for desktop */
.navbar .nav-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.navbar .nav-menu a {
  color: var(--color-text);
  font-size: 0.95rem;
  font-weight: 500;
  transition: color var(--transition-fast);
  text-decoration: none;
}
.navbar .nav-menu a:hover,
.navbar .nav-menu a:focus-visible {
  color: var(--color-primary);
}

/* Mobile toggle (hamburger) */
.menu-toggle {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 24px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.menu-toggle .bar {
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
  border-radius: 1px;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
/* Cards -> light, clean surface (same feel as .feature-card) */
.archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.archive-card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 16px 18px;
  text-decoration: none;
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.archive-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-border-strong);
}

.archive-card h3 {
  margin: 0 0 .5rem 0;
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--color-text); /* ensure no neon */
}

.archive-card time {
  display: block;
  margin-bottom: .35rem;
  font-size: .85rem;
  color: var(--color-muted);
}

.archive-card .excerpt {
  margin: .25rem 0 .5rem 0;
  color: var(--color-muted);
}

.archive-card .read-more {
  font-weight: 600;
  color: var(--color-primary); /* brand accent */
}

.features[aria-label="Blog archive list"] .container {
  max-width: 1100px; /* match content width of other pages */
}

/* Search input styling */
#blog-search {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  min-width: 280px;
  padding: .7rem .9rem;
  outline: none;
  box-shadow: var(--shadow-sm) inset;
}
#blog-search::placeholder { color: var(--color-muted); }

/* Hero image balance (smaller on desktop, room for copy) */
.hero .device-frame {
  max-width: 420px;
  margin-left: auto;
}
@media (min-width: 1400px) {
  .hero .device-frame { max-width: 460px; }
}
@media (max-width: 767px) {
  .hero .device-frame { max-width: 85%; }
}

/* Reduce bright badge links in older markup if any slip through */
.archive-card a, .archive-card a:visited {
  color: var(--color-primary);
}

/*
 * Override neon-styled cards from legacy stylesheets. In both light and
 * dark themes the archive cards should use the neutral surface and text
 * colours from our palette. Use !important to trump older hero.css rules.
 */
.archive-card {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text) !important;
}
.archive-card h3 {
  color: var(--color-text) !important;
}
.archive-card time,
.archive-card .excerpt {
  color: var(--color-muted) !important;
}
.archive-card .read-more {
  color: var(--color-primary) !important;
}

/* Sidebar (monthly archives) styling. Apply our card treatment to any
 * sidebar block listing months or categories. This targets common
 * class names used in the old template. */
.blog-archives,
.archive-sidebar,
.blog-archive-sidebar {
  background-color: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}
.blog-archives a,
.archive-sidebar a,
.blog-archive-sidebar a {
  color: var(--color-primary);
  text-decoration: none;
}
.blog-archives a:hover,
.archive-sidebar a:hover,
.blog-archive-sidebar a:hover {
  color: var(--color-primary-dark);
}