/* Resource / blog post styling. Sections in the body are inline-styled (ported 1:1 from
   the design); this layer adds the bits that can't be inline: keyframes, the FAQ accordion
   open/closed states, TOC active state, and responsive collapse. Reusable across all
   migrated /resources/* posts. */

@keyframes ogmFloatA { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes ogmFloatB { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes ogmPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } }
@keyframes ogmPop { 0% { opacity: 0; transform: translateY(8px) scale(.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } }

.acb-resource { background: #fff; }
html { scroll-behavior: smooth; }

/* CTA buttons — consistent hover lift across the post (hero, sidebar, final). */
.bp-cta { transition: transform .15s ease, filter .15s ease, box-shadow .15s ease; }
.bp-cta:hover { transform: translateY(-2px); filter: brightness(1.06); }

/* TOC links — active state mirrors the design's JS (also set inline by blog.js as a fallback). */
.bp-toc a { display: block; padding: 6px 0 6px 13px; border-left: 2px solid transparent; color: #5B6F88; font-weight: 500; cursor: pointer; transition: color .15s, border-color .15s; }
.bp-toc a:hover { color: #0B6FB8; }
.bp-toc a.is-active { color: #0B6FB8; font-weight: 700; border-left-color: #109CF1; }

/* FAQ accordion */
.bp-faq-item .bp-faq-a { display: none; }
.bp-faq-item.is-open .bp-faq-a { display: block; animation: ogmPop .25s ease both; }
/* Plus when closed, minus when open — exactly one icon at a time (CSS controls both;
   the spans must NOT set display inline or it overrides these rules). */
.bp-faq-item .bp-faq-ico-closed { display: inline-flex; }
.bp-faq-item .bp-faq-ico-open { display: none; }
.bp-faq-item.is-open .bp-faq-ico-closed { display: none; }
.bp-faq-item.is-open .bp-faq-ico-open { display: inline-flex; }

/* Article body typography — for plain semantic content (migrated posts); the One-Way post's
   inline-styled sections override these. Makes the template reusable without hand-styling. */
.bp-article h2 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 30px; letter-spacing: -0.02em; color: #142B49; line-height: 1.2; margin: 0 0 16px; }
.bp-article h3 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 20px; color: #142B49; margin: 26px 0 10px; }
.bp-article p { font-size: 18px; line-height: 1.7; color: #354A63; margin: 0 0 16px; }
.bp-article ul, .bp-article ol { margin: 0 0 18px; padding-left: 22px; }
.bp-article li { font-size: 17px; line-height: 1.7; color: #354A63; margin: 6px 0; }
.bp-article li::marker { color: #9DB1C7; }
.bp-article strong { color: #142B49; font-weight: 700; }
.bp-article a:not([style]) { color: #109CF1; font-weight: 600; }
.bp-article section { scroll-margin-top: 100px; }
.bp-article section + section { margin-top: 48px; }
.bp-article h4 { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 16.5px; color: #142B49; margin: 22px 0 8px; }

/* Reusable content blocks (comparison tables, quick-answer callouts, stat rows, pros/cons,
   message-bubble examples) shared across resource posts — keeps richer articles consistent
   without repeating inline styles in every post's content. */
.bp-article .bp-table-wrap { overflow-x: auto; margin: 20px 0 28px; border: 1px solid #E7F0F8; border-radius: 14px; box-shadow: 0 10px 26px rgba(20,43,73,0.06); }
.bp-article table { width: 100%; border-collapse: collapse; min-width: 480px; font-size: 14.5px; }
.bp-article table th { background: #F7FAFD; color: #142B49; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 13px; text-align: left; padding: 13px 16px; border-bottom: 1px solid #EAF1F8; }
.bp-article table td { padding: 12px 16px; border-top: 1px solid #F0F4F8; color: #354A63; vertical-align: top; }
.bp-article table tr:first-child td { border-top: none; }
.bp-article table th:not(:first-child), .bp-article table td:not(:first-child) { border-left: 1px solid #F0F4F8; }

.bp-article .bp-callout { background: #FAFCFE; border: 1px solid #ECF2F8; border-left: 4px solid #109CF1; border-radius: 14px; padding: 26px 30px; margin: 8px 0 32px; }
.bp-article .bp-callout .bp-callout-eyebrow { display: block; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #109CF1; }
.bp-article .bp-callout p { font-size: 18px; line-height: 1.65; color: #2C3E57; margin: 10px 0 0; }

.bp-article .bp-stats-row { display: flex; gap: 16px; flex-wrap: wrap; margin: 24px 0 30px; }
.bp-article .bp-stat-card { flex: 1; min-width: 170px; background: #FAFCFE; border: 1px solid #ECF2F8; border-radius: 14px; padding: 20px; }
.bp-article .bp-stat-card .num { font-family: 'Nunito', sans-serif; font-weight: 900; font-size: 32px; color: #109CF1; line-height: 1; }
.bp-article .bp-stat-card .lbl { font-size: 13.5px; color: #5B6F88; margin-top: 8px; line-height: 1.5; }

.bp-article .bp-bubble { background: #F2F5F9; border-radius: 16px; padding: 20px 24px; margin: 16px 0 24px; }
.bp-article .bp-bubble p { margin: 0; }

.bp-article .bp-proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 16px 0 26px; }
.bp-article .bp-proscons > div { background: #FAFCFE; border: 1px solid #ECF2F8; border-radius: 14px; padding: 20px 22px; }
.bp-article .bp-proscons h4 { margin: 0 0 10px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.bp-article .bp-proscons .bp-pros h4 { color: #14A06A; }
.bp-article .bp-proscons .bp-cons h4 { color: #7C8DA4; }
.bp-article .bp-proscons ul { margin: 0; padding: 0; list-style: none; }
.bp-article .bp-proscons li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: #354A63; padding: 5px 0; }
.bp-article .bp-proscons li::marker { content: none; }

/* ---- Responsive ---- */
@media (max-width: 1040px) {
  .bp-grid { grid-template-columns: minmax(0,1fr) !important; }
  .bp-toc, .bp-aside { display: none !important; }
}
@media (max-width: 640px) {
  .bp-article .bp-proscons { grid-template-columns: 1fr !important; }
}
@media (max-width: 900px) {
  .bp-hero-grid { grid-template-columns: 1fr !important; }
  .bp-hero-illu { display: none !important; }
  .bp-hero h1 { font-size: 38px !important; }
  .bp-related-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 760px) {
  .bp-hero, .bp-lead, .bp-grid, .bp-cta-wrap, .bp-related { padding-left: 22px !important; padding-right: 22px !important; }
  .bp-grid > .bp-article section [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

/* Sticky TOC + CTA clear the WP admin bar when logged in. */
body.admin-bar .bp-toc, body.admin-bar .bp-aside { top: 128px; }
@media (max-width: 782px) { body.admin-bar .bp-toc, body.admin-bar .bp-aside { top: 142px; } }