/* Blog theme alignment with BastionTech main pages.
   Loaded only by blog templates so article pages inherit the same dark,
   layered, glass-card treatment used throughout the primary site pages. */
:root {
  --bt-primary: #48668b;
  --bt-sand: #cfab6e;
  --bt-ink: #0f172a;
  --bt-coal: #0b0f14;
  --bt-white-soft: rgba(255, 255, 255, .72);
  --bt-white-muted: rgba(255, 255, 255, .58);
  --bt-line: rgba(255, 255, 255, .10);
  --bt-panel: rgba(255, 255, 255, .055);
}

html {
  background: var(--bt-ink);
}

body {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(60rem 45rem at 18% 4rem, rgba(72, 102, 139, .42), transparent 62%),
    radial-gradient(42rem 36rem at 86% 10rem, rgba(207, 171, 110, .32), transparent 64%),
    radial-gradient(36rem 30rem at 8% 72%, rgba(72, 102, 139, .28), transparent 68%),
    var(--bt-ink) !important;
  color: #fff !important;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

body::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, .065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .065) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at 50% 22%, rgba(0, 0, 0, 1) 28%, rgba(0, 0, 0, 0) 72%);
}

body::after {
  opacity: .05;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><defs><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter></defs><rect width="100%25" height="100%25" filter="url(%23n)" opacity="0.4"></rect></svg>');
  background-size: 300px 300px;
}

body > header.fixed {
  background: rgba(15, 23, 42, .94) !important;
  border-color: var(--bt-line) !important;
  color: #fff !important;
  backdrop-filter: blur(14px);
}

body > header.fixed img[src*="BastionBlkLogo"] {
  filter: brightness(0) invert(1);
}

body > header.fixed [data-dropdown-panel],
body > header.fixed #mobileMenu {
  background: rgba(15, 23, 42, .98) !important;
  border-color: var(--bt-line) !important;
  color: #fff !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .3);
}

body > header.fixed a:hover,
body > header.fixed button:hover {
  color: var(--bt-sand) !important;
}

body > header.fixed [class*="hover:bg-ink/5"]:hover,
body > header.fixed [class*="hover:bg-white/10"]:hover {
  background: rgba(255, 255, 255, .10) !important;
}

body > main {
  position: relative;
}

body > main > article.max-w-3xl {
  max-width: 64rem !important;
}

body > main > article > header:first-child {
  position: relative;
  overflow: hidden;
  margin-bottom: 2rem !important;
  border: 1px solid var(--bt-line);
  border-radius: 1.5rem;
  background:
    linear-gradient(135deg, rgba(72, 102, 139, .28), rgba(207, 171, 110, .12)),
    rgba(255, 255, 255, .055);
  padding: clamp(1.5rem, 4vw, 3rem);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  backdrop-filter: blur(10px);
}

body > main > article > header:first-child::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto 45%;
  height: 18rem;
  background: radial-gradient(circle, rgba(207, 171, 110, .28), transparent 62%);
  pointer-events: none;
}

body > main > article > header:first-child > * {
  position: relative;
}

body > main > article > header:first-child h1,
body > main > article h1,
body > main > article h2,
body > main > article h3,
body > main > article h4 {
  color: #fff !important;
}

body > main > article > header:first-child h1 {
  letter-spacing: -.035em;
}

body > main > article > header:first-child p:first-child,
body > main > article [class*="text-ink/60"],
body > main > article [class*="text-gray-700"],
body > footer [class*="text-ink/60"] {
  color: var(--bt-white-muted) !important;
}

body > main > article .lead,
body > main > article p,
body > main > article li,
body > main > article blockquote,
body > main > article td,
body > main > article th,
body > main > article span,
body > main > article div,
body > footer {
  color: var(--bt-white-soft) !important;
}

body > main > article strong,
body > main > article b {
  color: rgba(255, 255, 255, .94) !important;
}

body > main > article a {
  color: #fff !important;
  text-decoration-color: rgba(207, 171, 110, .75) !important;
  text-underline-offset: .18em;
}

body > main > article a:hover {
  color: var(--bt-sand) !important;
}

body > main > article .prose,
body > main > article section.prose,
body > main > article section:not([id="help"]):not(:first-child) {
  font-size: 1.05rem;
  line-height: 1.8;
}

body > main > article .prose h2,
body > main > article section h2 {
  margin-top: 2.5rem;
  padding-top: .25rem;
}

body > main > article .prose ul,
body > main > article .prose ol {
  padding-left: 1.25rem;
}

body > main > article .prose li,
body > main > article section li {
  margin-top: .45rem;
}

body > main > article img,
body > main > article table,
body > main > article iframe {
  border-radius: 1rem;
}

body > main > article aside,
body > main > article .rounded-2xl,
body > main > article .commercial-service-cta,
body > main > article section[id="help"] > div {
  border-color: var(--bt-line) !important;
  background: var(--bt-panel) !important;
  color: var(--bt-white-soft) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .18);
  backdrop-filter: blur(10px);
}

body > main > article .bg-primary\/5,
body > main > article .bg-gray-50,
body > main > article .bg-white {
  background: var(--bt-panel) !important;
}

body > main > article .border-gray-200,
body > main > article .border-ink\/10,
body > main > article .border-primary\/20,
body > main > article .border-primary\/40 {
  border-color: var(--bt-line) !important;
}

body > main > article .bg-primary,
body > main > article a.bg-primary,
body > main > article button.bg-primary,
body > header.fixed .bg-primary {
  background-color: var(--bt-primary) !important;
  color: #fff !important;
  box-shadow: 0 10px 30px rgba(72, 102, 139, .3);
  text-decoration: none !important;
}

body > main > article .bg-primary:hover,
body > main > article a.bg-primary:hover,
body > header.fixed .bg-primary:hover {
  background-color: rgba(72, 102, 139, .9) !important;
  color: #fff !important;
}

body > footer {
  border-color: rgba(255, 255, 255, .08) !important;
  color: var(--bt-white-muted) !important;
}

body > footer a {
  color: rgba(255, 255, 255, .78) !important;
}

body > footer a:hover {
  color: #fff !important;
}

/* Blog index cards already use the dark system; these additions keep spacing
   and hover treatment consistent with the main-page portfolio cards. */
body .group.rounded-2xl.border-white\/10.bg-white\/5 {
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .16);
}

@media (max-width: 640px) {
  body > main > article {
    padding-top: 2rem !important;
  }

  body > main > article > header:first-child {
    border-radius: 1.1rem;
  }
}