/* ================================================
   NorthLink Media Blog — Brand Alignment
   Upload to: wp-content/themes/northlink-theme/
   ================================================ */

/* 1. Base — near-black background + dot grid */
html, body {
  background-color: #09090B !important;
  background-image: radial-gradient(circle, rgba(255,255,255,0.025) 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
  color: #a1a1aa !important;
}

/* 2. Kill old circuit canvas */
#circuitCanvas {
  display: none !important;
}

/* 3. Ensure all content sits above the fixed orb layer */
.main-nav,
.site-main,
.content-container,
.footer {
  position: relative;
  z-index: 1;
}

/* 4. Navigation */
.main-nav {
  background-color: rgba(9, 9, 11, 0.88) !important;
  border-bottom: 1px solid #27272A !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.nav-links a {
  color: #a1a1aa !important;
  transition: color 0.15s !important;
}
.nav-links a:hover {
  color: #fafafa !important;
}

/* 5. Logo — hide old SVG, replace with north arrowhead */
.logo-img {
  display: none !important;
}
.logo::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 10px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2 L28 26 L16 19 L4 26 Z' fill='%233b82f6'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.logo {
  display: flex !important;
  align-items: center !important;
}
.logo-text {
  color: #fafafa !important;
  font-weight: 600 !important;
}
.logo-accent {
  color: #3b82f6 !important;
}

/* 6. CTA button */
.nav-cta,
a.nav-cta {
  background: #3b82f6 !important;
  background-image: none !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
.nav-cta:hover,
a.nav-cta:hover {
  background: #2563eb !important;
  color: #fff !important;
}

/* 7. Blog header — remove gradient text */
.blog-header h1,
.blog-header h2,
h1 {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #fafafa !important;
  color: #fafafa !important;
  font-weight: 600 !important;
}
.blog-header p {
  color: #a1a1aa !important;
}

/* 8. Transparent section wrappers */
.site-main,
.content-container,
.posts-grid,
.blog-header {
  background: transparent !important;
}

/* 9. Post cards */
.post-card {
  background-color: #18181B !important;
  border: 1px solid #27272A !important;
  border-radius: 12px !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  transition: border-color 0.15s !important;
}
.post-card:hover {
  border-color: #3f3f46 !important;
}

/* 10. Card headings */
.post-card h2,
.post-card h3 {
  color: #fafafa !important;
  background: none !important;
  -webkit-text-fill-color: #fafafa !important;
}

/* 11. Card body */
.post-excerpt,
.post-card p {
  color: #a1a1aa !important;
}

/* 12. Post meta — date + category */
.post-meta,
.post-meta span,
.post-meta a {
  color: #3b82f6 !important;
}

/* 13. Read More */
.read-more,
a.read-more {
  color: #3b82f6 !important;
}
.read-more:hover,
a.read-more:hover {
  color: #60a5fa !important;
}

/* 14. Footer */
.footer {
  background-color: #09090B !important;
  border-top: 1px solid #27272A !important;
}
.footer-brand p {
  color: #71717a !important;
}
.footer-links h3,
.footer-links h4 {
  color: #a1a1aa !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
}
.footer-links a {
  color: #71717a !important;
  text-decoration: none !important;
  transition: color 0.15s !important;
}
.footer-links a:hover {
  color: #fafafa !important;
}
.footer-bottom,
.footer-legal {
  border-top: 1px solid #27272A !important;
  color: #52525b !important;
}
.footer-legal a {
  color: #52525b !important;
}
.footer-legal a:hover {
  color: #a1a1aa !important;
}

/* 15. Safety nets */
h2, h3, h4, h5, h6 {
  color: #fafafa !important;
}
a {
  color: #3b82f6 !important;
}
a:hover {
  color: #60a5fa !important;
}