/* ----------------------------------------------------------------------------
 * Blog article styling, v3 design system.
 *
 * Replaces the old navy (#0f2748) + gold (#ffcf5c) blog theme with the brand
 * palette used across the rest of the site. Every class name is unchanged, so
 * none of the ~15 post views needed editing — they are restyled in place.
 *
 * Loaded by views/blog_style.php, which every post includes. Tokens come from
 * v3-shell.css (:root), loaded alongside it by views/partials/v3_head.php.
 * -------------------------------------------------------------------------- */

.blog-article{color:var(--v3-ink);font-family:var(--v3-body);background:var(--v3-paper);font-size:17px;line-height:1.65}
.blog-article *,.blog-article *::before,.blog-article *::after{box-sizing:border-box}
.blog-article .bwrap{max-width:820px;margin:0 auto;padding-inline:clamp(16px,4vw,24px)}
.blog-article a:focus-visible,.blog-article summary:focus-visible{outline:3px solid var(--v3-lime);outline-offset:3px}

/* hero */
.blog-hero{background:var(--v3-ink);color:#f2f4ea;position:relative;overflow:hidden;padding:clamp(44px,6vw,72px) 0 clamp(32px,4vw,48px)}
.blog-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(229,245,56,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(229,245,56,.05) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse 70% 80% at 80% 30%,#000 25%,transparent 78%);-webkit-mask-image:radial-gradient(ellipse 70% 80% at 80% 30%,#000 25%,transparent 78%);pointer-events:none}
.blog-hero .bwrap{position:relative}
.blog-hero h1{color:#f7f9ef;font-family:var(--v3-display);font-weight:800;text-transform:uppercase;font-size:clamp(34px,5vw,62px);line-height:.92;letter-spacing:-.005em;margin:14px 0 14px;text-wrap:balance}
.blog-eyebrow{font-family:var(--v3-mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--v3-steel-2);font-weight:400;margin:0;display:flex;align-items:center;gap:10px}
.blog-eyebrow::before{content:"";width:28px;height:2px;background:var(--v3-lime);flex:none}
.blog-meta{color:var(--v3-steel-2);font-family:var(--v3-mono);font-size:13px}

/* body copy */
.blog-body{padding:clamp(36px,5vw,56px) 0 20px}
.blog-body h2{color:var(--v3-ink);font-family:var(--v3-display);font-weight:800;text-transform:uppercase;font-size:clamp(28px,3.4vw,40px);line-height:1;margin:44px 0 14px;text-wrap:balance}
.blog-body h3{color:var(--v3-ink);font-family:var(--v3-body);font-weight:700;font-size:20px;line-height:1.3;margin:28px 0 8px}
.blog-body p,.blog-body li{font-size:17px;line-height:1.7;color:#3b4235}
.blog-body ul,.blog-body ol{padding-left:22px}
.blog-body li{margin-bottom:6px}
.blog-body a{color:var(--v3-ink);border-bottom:2px solid var(--v3-lime);font-weight:600}
.blog-body a:hover{background:var(--v3-lime);text-decoration:none}
.blog-body strong{color:var(--v3-ink)}

/* callout */
.blog-callout{background:var(--v3-card);border:1px solid var(--v3-rule);border-left:4px solid var(--v3-lime);border-radius:4px;padding:18px 22px;margin:26px 0}
.blog-callout strong{color:var(--v3-ink)}

/* ranked item cards */
.blog-rank{background:var(--v3-card);border:1px solid var(--v3-rule);border-radius:6px;padding:22px 24px;margin:18px 0}
.blog-rank h3{margin-top:0;font-family:var(--v3-display);font-weight:800;text-transform:uppercase;font-size:26px;line-height:1.05}
.blog-rank .tag{display:inline-block;background:var(--v3-ink);color:#fff;font-family:var(--v3-mono);font-size:11.5px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;border-radius:20px;padding:4px 12px;margin-left:8px;vertical-align:middle}
.blog-rank .tag-top{background:var(--v3-lime);color:var(--v3-ink)}

/* numbered steps */
.blog-steps{counter-reset:step;list-style:none;padding-left:0}
.blog-steps li{position:relative;padding:0 0 18px 48px}
.blog-steps li::before{counter-increment:step;content:"0" counter(step);position:absolute;left:0;top:2px;font-family:var(--v3-mono);font-size:13px;color:var(--v3-olive);font-weight:500}
.blog-steps li::after{content:"";position:absolute;left:0;top:26px;bottom:8px;width:2px;background:var(--v3-rule)}
.blog-steps li:last-child::after{display:none}

/* tables */
.blog-table-wrap{overflow-x:auto;margin:26px 0;border:1px solid var(--v3-rule);background:var(--v3-card)}
table.blog-table{width:100%;border-collapse:collapse;font-size:15.5px;min-width:520px}
table.blog-table th,table.blog-table td{border-bottom:1px solid var(--v3-rule);padding:14px 16px;text-align:left;vertical-align:top}
table.blog-table th{background:var(--v3-ink);color:#f2f4ea;font-family:var(--v3-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:400;border-bottom:0}
table.blog-table tr:last-child td{border-bottom:0}
table.blog-table td:first-child{font-weight:700;color:var(--v3-ink)}

/* faq */
.blog-faq{margin:10px 0 6px}
.blog-faq details{border-bottom:1px solid var(--v3-rule);border-radius:0}
.blog-faq summary{cursor:pointer;padding:20px 40px 20px 0;font-weight:700;color:var(--v3-ink);font-size:17.5px;list-style:none;position:relative}
.blog-faq summary::-webkit-details-marker{display:none}
.blog-faq summary::after{content:"+";position:absolute;right:4px;top:14px;font-family:var(--v3-mono);font-size:24px;font-weight:400;color:var(--v3-olive)}
.blog-faq details[open] summary::after{content:"\2013"}
.blog-faq .blog-ans{padding:0 0 20px;color:var(--v3-steel);line-height:1.65}

/* closing cta */
.blog-cta{background:var(--v3-lime);color:var(--v3-ink);text-align:left;padding:clamp(32px,4vw,48px);border-radius:6px;margin:44px 0 10px}
.blog-cta h2{color:var(--v3-ink);font-family:var(--v3-display);font-weight:800;text-transform:uppercase;font-size:clamp(30px,3.8vw,46px);line-height:.95;margin:0 0 18px;text-wrap:balance}
.blog-cta p{color:#3d4400}
.blog-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 24px;border-radius:var(--v3-radius-btn);font-weight:700;text-decoration:none;margin:6px 8px 0 0;font-size:16px;font-family:var(--v3-body);border:2px solid transparent;transition:transform .15s ease}
.blog-btn:hover{transform:translateY(-2px);text-decoration:none}
.blog-btn-primary{background:var(--v3-ink);color:#fff}
.blog-btn-call{background:transparent;border-color:var(--v3-ink);color:var(--v3-ink)}
.blog-btn-call:hover{background:var(--v3-ink);color:#fff}

.blog-disclaimer{font-size:13.5px;color:var(--v3-steel);border-top:1px solid var(--v3-rule);padding-top:16px;margin-top:34px}

@media (max-width:640px){
  .blog-article{font-size:16px}
  .blog-body p,.blog-body li{font-size:16px}
  .blog-btn{width:100%;justify-content:center;margin-right:0}
}
@media (prefers-reduced-motion:reduce){
  .blog-article *{transition:none!important;animation:none!important}
}

/* ----------------------------------------------------------------------------
 * Overrides for assets/modules/home/css/style.css:13536, which forces
 *   table thead th { background-color:#c6ced6 !important; border:0 none!important;
 *                    border-right:1px solid #fff!important; position:sticky;
 *                    white-space:nowrap; text-overflow:ellipsis }
 * on every table on the marketing site. That rule already beat the old blog
 * stylesheet (its header colour never applied), so !important is needed here to
 * take the blog tables back. Scoped to .blog-table so nothing else changes.
 * -------------------------------------------------------------------------- */
table.blog-table thead th{
  background-color:var(--v3-ink)!important;
  color:#f2f4ea!important;
  border:0 none!important;
  border-right:1px solid var(--v3-rule-dark)!important;
  position:static!important;
  white-space:normal!important;
  text-overflow:clip!important;
  overflow:visible!important;
  font-size:12px!important;
  font-weight:400!important;
}
table.blog-table thead th:last-child{border-right:0!important}