/* ============================================================
   /pages/_shared/polish.css
   Single shared stylesheet for ALL adsense pages. Layered AFTER
   the per-page assets/css/* and the site-nav.css, so it can:
     - Soften the legacy Webflow look without changing structure
     - Tighten typography
     - Add lazy-load placeholders to images
     - Style the new pre-rendered Latest Articles block

   Note: this file is small (~2 KB gzipped). It replaces ~720 KB
   of dead Bootstrap+jQuery+Webflow+Moment that we stripped from
   every page in the perf cleanup pass.
   ============================================================ */

/* --- Base typography softening --- */
body {
  font-family: "Cera Pro", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #2C3144;
  background: #FAFBFE;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings inherit Recoleta when defined; otherwise fall back to a serif.
   Color softens from black to navy. */
h1, h2, h3, h4, h5, h6 {
  font-family: "Recoleta", "Cera Pro", Georgia, serif;
  color: #20174D;
  letter-spacing: -0.005em;
}

/* Paragraph rhythm — most adsense pages already have these but
   the original CSS used Arial 14px with line-height 20. Tighten. */
p {
  line-height: 1.65;
}

/* Links — brand purple over the legacy red/blue */
a {
  color: #5C31F6;
  text-decoration: none;
  transition: color 0.15s ease, opacity 0.15s ease;
}
a:hover { color: #4521C2; }

/* --- Images: lazy-load fade-in + skeleton bg to fight CLS --- */
img {
  max-width: 100%;
  height: auto;
}
img[loading="lazy"] {
  background: linear-gradient(180deg, #EDEFF7 0%, #DEE2EE 100%);
  background-size: 200% 100%;
  animation: pulse 1.6s ease-in-out infinite;
}
img[loading="lazy"][src] {
  animation: none;
  background: transparent;
}
@keyframes pulse {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* --- Card / scroll-card hover polish (homepages) --- */
.card,
.card.w-inline-block {
  transition: transform 0.18s ease, filter 0.18s ease;
  cursor: pointer;
}
.card:hover,
.card.w-inline-block:hover {
  transform: translateY(-3px);
  filter: drop-shadow(0 12px 18px rgba(8, 26, 68, 0.10));
}

/* --- Buttons: align with the brand pill style --- */
.btn,
button:not(.nl-close):not(.navbar-toggler) {
  font-family: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

/* The CTA pills the original templates emit (.btn-1 / .btn-2 / .btn-3 inside
   the reading-page footer) — make them brand-aligned with a softer radius. */
.btn-1, .btn-2, .btn-3 {
  border-radius: 999px !important;
  padding: 14px 28px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 20px rgba(8, 26, 68, 0.10);
}
.btn-1:hover, .btn-2:hover, .btn-3:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(8, 26, 68, 0.16);
  filter: brightness(1.05);
}

/* --- Pre-rendered "Latest Articles" sidebar block --- */
.latest-articles {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.latest-articles .article-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  align-items: center;
  padding: 8px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(92, 49, 246, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.latest-articles .article-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(8, 26, 68, 0.08);
  border-color: rgba(92, 49, 246, 0.18);
}
.latest-articles .article-thumb {
  width: 80px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  background: #EDEFF7;
}
.latest-articles .article-thumb img,
.latest-articles .article-thumb picture,
.latest-articles .article-thumb source {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.latest-articles .article-meta h3 {
  font-family: "Cera Pro", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #20174D;
  line-height: 1.35;
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.latest-articles .article-meta p {
  font-size: 11px;
  color: #8B91A8;
  margin: 0;
}

/* --- Smooth-out the dense scroll-card grid on small screens --- */
#content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
#content .card {
  max-width: 110px !important;
  margin: 0 !important;
}

/* --- Subtle section dividers --- */
.adsense + .adsense,
section + section {
  border-top: 1px solid rgba(8, 26, 68, 0.04);
}

/* --- Footer fixes --- */
/* Original WP theme forces `.links ul { display: block }` at <900px,
   stacking About / News / Testimonials / Careers / Contact / Site Map
   vertically. Keep them horizontal at every width (left-aligned) —
   they wrap on narrow screens. */
.links ul {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px 22px;
  padding: 0;
  margin: 0;
}
.links ul li {
  margin: 0 !important;
}
@media (max-width: 767px) {
  .links ul { justify-content: center; }
}
@media (max-width: 599px) {
  .links ul { gap: 4px 16px; }
  .links ul li a { line-height: 1.6 !important; font-size: 13px !important; }
}

/* Social icons row — right-aligned on desktop, centered on mobile.
   Uses inline SVGs (not Font Awesome) so no extra font file ships. */
.icons {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center;
  gap: 12px;
}
.icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(92, 49, 246, 0.06);
  color: #5C31F6 !important;
  transition: background 0.15s ease, transform 0.15s ease, color 0.15s ease;
}
.icons a svg { width: 16px; height: 16px; display: block; }
.icons a:hover {
  background: #5C31F6;
  color: #fff !important;
  transform: translateY(-1px);
}
@media (max-width: 767px) {
  .icons { justify-content: center !important; margin-top: 6px; }
}

/* Replace the Font Awesome fa-fire pseudo-icon on the Soul Flame
   button with an inline SVG so adsense pages don't need to load FA
   (~200 KB of CSS + woff2 fonts) just for one glyph. The main site
   still loads FA so this rule wins on adsense via specificity. */
.btn-soul-flame::before {
  content: '' !important;
  font-family: inherit !important;
  width: 12px;
  height: 14px;
  margin-right: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512' fill='%23fff'%3E%3Cpath d='M216 24v0c0-13.31-10.69-24-24-24-13.06 0-23.55 10.43-23.84 23.42-.94 39.16-13.97 78-67.13 121.79C61.41 187.7 0 251.21 0 320c0 105.87 86.13 192 192 192s192-86.13 192-192c0-49.5-39.39-110.83-90.61-128.96-37.05-13.11-77.25-49.99-77.39-167.04zM192 464c-79.41 0-144-64.59-144-144 0-44.32 28.69-78.89 64-103.41V216c0 25.69 16.45 47.96 40 56.16V456C112.92 446.36 80 412.18 80 372c0-30.31 16.95-57.65 44.18-71.35l11.66-5.87C129.85 285.55 112 252.96 112 216c0-22.06 5.84-43.34 17.04-62.41 14.84-25.29 36.42-46.21 62.79-60.84 19.31-10.7 31.04-30.99 31.04-53.16V32c0-2.21-1.79-4-4-4s-4 1.79-4 4v8c0 22.07 11.73 42.46 31.04 53.16 26.37 14.63 47.95 35.55 62.79 60.84 11.2 19.07 17.04 40.35 17.04 62.41 0 36.96-17.85 69.55-43.84 86.78l11.66 5.87C304.05 314.35 320 341.69 320 372c0 40.18-32.92 74.36-72 84V272.16c23.55-8.2 40-30.47 40-56.16v-3.41c35.31 24.52 64 59.09 64 103.41 0 79.41-64.59 144-144 144z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: -1px;
  display: inline-block;
}

/* Softer dividers — the original used #DDD which reads as a hard line
   against the off-white #FAFBFE background. Drop the color so it
   blends into the background. */
hr.solid,
.last-section hr {
  border: 0 !important;
  border-top: 1px solid rgba(8, 26, 68, 0.06) !important;
  background: transparent !important;
  color: transparent !important;
  margin: 18px 0 !important;
}

/* --- Homepage #content scroll-cards — always 2 rows, last row centered ---
   Flex with justify-content: center so when the last row has fewer
   items than the first (e.g. 9 cards = 5+4, 7 cards = 4+3), the
   remaining cards are centered within the row rather than left-aligned.
   The per-page JS at the bottom of every page sets --content-cols to
   ceil(cardCount / 2). */
#content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  max-width: 760px;
  margin: 0 auto;
}
#content .card,
#content .card.w-inline-block {
  max-width: none !important;
  margin: 0 !important;
  /* width = (container - gaps) / cols. The 14px gap × (cols - 1)
     accounts for the gutters. */
  flex: 0 0 calc((100% - (var(--content-cols, 5) - 1) * 14px) / var(--content-cols, 5));
}
/* Phone: cap at 3 cols so 9-card pages don't try to fit 5 per row. */
@media (max-width: 575px) {
  #content .card,
  #content .card.w-inline-block {
    flex: 0 0 calc((100% - 2 * 14px) / 3);
  }
}
/* Tiny phone (<380): 2 cols. */
@media (max-width: 379px) {
  #content .card,
  #content .card.w-inline-block {
    flex: 0 0 calc((100% - 14px) / 2);
  }
}

/* --- AdSense placeholder cleanup --- */
.adsense, .ad-unit {
  border-radius: 8px;
  overflow: hidden;
}
.ads-text {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8B91A8;
  margin-bottom: 6px;
}

/* --- Respect reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================
   Bootstrap-compatible grid + utility classes
   (replaces the Bootstrap 4 CDN we stripped in the perf pass).
   These match Bootstrap 4's class names + breakpoints so the
   .col-lg-2 / .col-md-4 / .col-sm-12 etc. in the legacy adsense
   markup resolve correctly without re-loading the 150KB CDN.
   ============================================================ */

/* Container */
.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
.container-fluid { width: 100%; padding-right: 15px; padding-left: 15px; }

/* Row + columns */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}
.row > * { padding-right: 15px; padding-left: 15px; }
.no-gutters { margin-right: 0; margin-left: 0; }
.no-gutters > [class*="col-"] { padding-right: 0; padding-left: 0; }

[class*="col-"] { position: relative; width: 100%; box-sizing: border-box; }
.col       { flex: 1 0 0%; }
.col-auto  { flex: 0 0 auto; width: auto; }

/* Mobile-first 12-col grid (no breakpoint) */
.col-1  { flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-3  { flex: 0 0 25%; max-width: 25%; }
.col-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
.col-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6  { flex: 0 0 50%; max-width: 50%; }
.col-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
.col-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
.col-9  { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

@media (min-width: 576px) {
  .col-sm-1  { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-sm-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-sm-3  { flex: 0 0 25%; max-width: 25%; }
  .col-sm-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-sm-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-sm-6  { flex: 0 0 50%; max-width: 50%; }
  .col-sm-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-sm-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-sm-9  { flex: 0 0 75%; max-width: 75%; }
  .col-sm-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-sm-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 768px) {
  .col-md-1  { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-md-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-md-3  { flex: 0 0 25%; max-width: 25%; }
  .col-md-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-md-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-md-6  { flex: 0 0 50%; max-width: 50%; }
  .col-md-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-md-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-md-9  { flex: 0 0 75%; max-width: 75%; }
  .col-md-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-md-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 992px) {
  .col-lg-1  { flex: 0 0 8.333333%; max-width: 8.333333%; }
  .col-lg-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-lg-3  { flex: 0 0 25%; max-width: 25%; }
  .col-lg-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-lg-5  { flex: 0 0 41.666667%; max-width: 41.666667%; }
  .col-lg-6  { flex: 0 0 50%; max-width: 50%; }
  .col-lg-7  { flex: 0 0 58.333333%; max-width: 58.333333%; }
  .col-lg-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
  .col-lg-9  { flex: 0 0 75%; max-width: 75%; }
  .col-lg-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
  .col-lg-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
  .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 1200px) {
  .col-xl-2  { flex: 0 0 16.666667%; max-width: 16.666667%; }
  .col-xl-4  { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-xl-6  { flex: 0 0 50%; max-width: 50%; }
  .col-xl-8  { flex: 0 0 66.666667%; max-width: 66.666667%; }
}

/* Common Bootstrap utility classes the legacy markup uses */
.text-left   { text-align: left !important; }
.text-right  { text-align: right !important; }
.text-center { text-align: center !important; }
.text-white  { color: #fff !important; }
.text-muted  { color: #6b748a !important; }
.font-weight-bold { font-weight: 700 !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-center { align-items: center !important; }
.d-flex { display: flex !important; }
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-none { display: none !important; }
@media (min-width: 576px) { .d-sm-block { display: block !important; } }
@media (min-width: 768px) { .d-md-block { display: block !important; } }
.float-right { float: right !important; }
.float-left  { float: left !important; }

/* Spacing utilities — Bootstrap 4 scale */
.m-0  { margin: 0 !important; }
.mt-0 { margin-top: 0 !important; }   .mt-1 { margin-top: .25rem !important; }
.mt-2 { margin-top: .5rem !important; } .mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; } .mt-5 { margin-top: 3rem !important; }
.mb-0 { margin-bottom: 0 !important; } .mb-1 { margin-bottom: .25rem !important; }
.mb-2 { margin-bottom: .5rem !important; } .mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; } .mb-5 { margin-bottom: 3rem !important; }
.ml-1 { margin-left: .25rem !important; } .ml-2 { margin-left: .5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.mr-2 { margin-right: .5rem !important; } .mr-3 { margin-right: 1rem !important; }
.mx-auto { margin-right: auto !important; margin-left: auto !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }
.my-2 { margin-top: .5rem !important; margin-bottom: .5rem !important; }
.p-0 { padding: 0 !important; }
.pt-2 { padding-top: .5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pb-2 { padding-bottom: .5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.pr-2 { padding-right: .5rem !important; }
.py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
.px-2 { padding-left: .5rem !important; padding-right: .5rem !important; }

/* ============================================================
   Footer / nav fixes — Bootstrap-CDN removal broke their column
   widths. Footer was 1-col vertical; nav menu went left-aligned.
   site-nav.css handles the new Astro-style nav, but it's scoped
   to its own selectors. The legacy adsense pages still rely on
   bootstrap's display: flex behavior for .navbar-nav etc. Add it.
   ============================================================ */
.navbar-nav {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav { flex-direction: row; }
  .navbar-expand-lg .navbar-collapse { display: flex !important; flex-basis: auto; }
  .navbar-expand-lg .navbar-toggler  { display: none; }
}