/* ============================================================================
   BLOG STYLES for askmae.ai.

   Off white, not the lavender tint. #f8f8f6 is sampled straight out of
   AI OPERATING SYSTEM BUILDS.jpg, so it matches your own artwork.

     page      #f8f8f6      cards   #ffffff      edges  #e4e1ea
     headings  #2d0068      text    #34303d      accent #5a3696

   The articles were written for Bootstrap. This supplies the handful of
   classes they actually use, in your colors. Single column, dark on light.
   ============================================================================ */

:root{
  --pg:#f8f8f6; --card:#ffffff; --edge:#e4e1ea;
  --ink:#34303d; --head:#2d0068; --accent:#5a3696; --soft:#6b6478;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  padding-top:170px;          /* CLEARANCE for the fixed two-row header */
  background:var(--pg);
  color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.7;
}
a{ color:var(--accent); }
img{ max-width:100%; }

/* ---- the grid those articles use. One column, on purpose. ---- */
.container{ width:100%; max-width:1180px; margin:0 auto; padding:0 5%; }
.row, .row.justify-content-center{ display:block; }
[class*="col-"]{ width:100%; max-width:48rem; margin:0 auto; }

/* ---- masthead ---- */
.blog-masthead{ margin:32px 0 8px; }
.blog-masthead h1{
  font-size:1.05rem; font-weight:700; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--accent); margin-bottom:4px;
}
.blog-masthead p{ font-size:0.9rem; color:var(--soft); font-style:italic; margin:0; }

/* ---- the article card ---- */
.blog-card{
  background:var(--card);
  border:1px solid var(--edge);
  border-radius:12px;
  box-shadow:0 6px 28px rgba(45,0,104,0.06);
  padding:44px 48px;
  margin:16px 0 32px;
}
.blog-header{ border-bottom:1px solid var(--edge); padding-bottom:16px; margin-bottom:26px; }
.blog-category{
  font-size:0.74rem; text-transform:uppercase; letter-spacing:0.12em;
  color:var(--accent); font-weight:600; margin-bottom:8px;
}
.blog-title{ font-size:1.95rem; font-weight:700; line-height:1.25; color:var(--head); margin-bottom:10px; }
.blog-meta{ font-size:0.88rem; color:var(--soft); margin:0; }
.blog-body p{ font-size:1.05rem; line-height:1.8; margin-bottom:1.2rem; color:var(--ink); }
.blog-body h2, .blog-body h3{ color:var(--head); }
.blog-body strong{ color:var(--head); }
.blog-body hr{ margin:34px 0; border:0; border-top:1px solid var(--edge); }
.continue-reading{ display:inline-block; margin-top:1rem; font-size:0.95rem; color:var(--accent); }

/* ---- tables inside articles ---- */
.table-responsive{ width:100%; overflow-x:auto; margin-bottom:1.6rem; }
table.table{ width:100%; border-collapse:collapse; font-size:0.98rem; background:#fff; }
table.table th, table.table td{ padding:0.75rem 0.9rem; text-align:left; vertical-align:top; }
table.table-bordered th, table.table-bordered td{ border:1px solid var(--edge); }
table.table-striped tbody tr:nth-child(odd){ background:#faf9fc; }
table.table thead.thead-dark th{ background:var(--head); color:#fff; border-color:var(--head); }
table.table tbody td{ color:var(--ink); }

/* ---- author box ---- */
.author-box{
  display:block;
  background:#fff; border:1px solid var(--edge); border-radius:12px;
  padding:24px; margin-bottom:36px;
}
.author-avatar{ width:76px; height:76px; border-radius:50%; object-fit:cover; margin-bottom:12px; }
.author-info h4{ font-size:1rem; font-weight:700; margin:0 0 2px; color:var(--head); }
.author-info .author-title{ font-size:0.85rem; color:var(--accent); margin-bottom:8px; }
.author-info p{ font-size:0.92rem; line-height:1.6; color:var(--ink); margin:0; }

@media (max-width:600px){
  .blog-card{ padding:28px 22px; border-radius:10px; }
  .blog-title{ font-size:1.5rem; }
}

@media (max-width:920px){
  body{ padding-top:0; }      /* header is static on phones */
}

/* ============================================================================
   HEADER AND FOOTER ARE NOT BLOG CONTENT.

   The blog page is light, so its body color is a dark grey. That grey was
   being inherited by the navigation links, which sit on the dark header.
   Dark grey on dark purple measured 1.49 to 1. That is the invisible text.

   These rules hand the header and footer back their own colors and stop
   anything in this stylesheet from reaching into them again.
   ============================================================================ */

.site-header,
.site-header *,
.primary-footer,
.primary-footer *,
footer,
footer * {
  /* the blog palette stops at the edge of the page content */
  --ink: inherit;
}

/* Row one: white links on the dark bar. 14.6 to 1. */
.site-header .nav-links a,
.site-header .nav-links a:visited {
  color: #F6F2EA !important;
}
.site-header .nav-links a:hover,
.site-header .nav-links a:focus {
  color: #EFC463 !important;
}

/* Row two: the site's own lilac, lightened enough to pass on this bar. 7.1 to 1. */
.site-header .nav-sub-links a,
.site-header .nav-sub-links a:visited {
  color: #CDC0E4 !important;
}
.site-header .nav-sub-links a:hover,
.site-header .nav-sub-links a:focus {
  color: #EFC463 !important;
}

/* The logo lockup and the Investor Access button keep their own styling. */
.site-header .logo img { max-height: 60px; width: auto; }
.site-header .btn-ghost { color: #F6F2EA !important; border-color: #EFC463 !important; }

/* The footer already carries its own dark palette. Do not tint it. */
.primary-footer a,
footer a { color: inherit; }