/* MarketInOut blog (/blog/blog.php). Colors inherit from the site theme, so light and dark both work. */

.blog { max-width: 780px; padding: 10px 14px 0 14px; line-height: 1.6; }
.blog h1.blog-title { margin: 6px 0 6px 0; line-height: 1.25; }
.blog .blog-lead { font-size: 1.05em; opacity: 0.85; margin: 0 0 14px 0; }
.blog .blog-meta { font-size: 0.9em; opacity: 0.7; margin: 0 0 16px 0; }
.blog .blog-crumbs { font-size: 0.9em; margin: 0 0 4px 0; }
.blog .blog-preview { padding: 8px 12px; margin: 0 0 12px 0; border: 1px solid #e0a000; background: rgba(224, 160, 0, 0.12); }

/* topic tabs reuse the site's button-h1 / button-link */
.blog .blog-topics { margin: 0 0 18px 0; }

/* list */
.blog .blog-item { padding: 0 0 18px 0; margin: 0 0 18px 0; border-bottom: 1px solid rgba(128, 128, 128, 0.25); }
.blog .blog-item h2 { margin: 0 0 2px 0; font-size: 1.3em; line-height: 1.3; }
.blog .blog-item .blog-meta { margin-bottom: 6px; }
.blog .blog-item p { margin: 0 0 6px 0; }
.blog .blog-more { font-weight: bold; }

.blog .blog-pages { margin: 4px 0 20px 0; }
.blog .blog-pages a, .blog .blog-pages span { display: inline-block; padding: 4px 10px; margin: 0 4px 4px 0; border: 1px solid rgba(128, 128, 128, 0.35); border-radius: 3px; }
.blog .blog-pages .blog-page-cur { font-weight: bold; background: rgba(128, 128, 128, 0.15); }

/* article body */
.blog-article h2 { margin: 28px 0 8px 0; font-size: 1.35em; line-height: 1.3; }
.blog-article h3 { margin: 22px 0 6px 0; font-size: 1.1em; }
.blog-article p { margin: 0 0 12px 0; }
.blog-article ul, .blog-article ol { margin: 0 0 12px 0; padding-left: 24px; }
.blog-article li { margin: 0 0 4px 0; }
@media (min-width: 601px) {
	.blog-article p, .blog-article li { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
	.blog-article .note, .blog-article .cta, .blog-article .ta-list li, .blog-article .ta-classic li { text-align: left; hyphens: manual; -webkit-hyphens: manual; }
}
.blog-article blockquote { margin: 0 0 12px 0; padding: 6px 14px; border-left: 3px solid rgba(128, 128, 128, 0.5); opacity: 0.9; }
.blog-article pre { margin: 0 0 12px 0; padding: 10px 12px; white-space: pre-wrap; overflow-wrap: anywhere; background: rgba(128, 128, 128, 0.12); border-radius: 3px; font-size: 0.95em; }
.blog-article .table-wrap { overflow-x: auto; margin: 0 0 14px 0; }
.blog-article table { border-collapse: collapse; width: 100%; font-size: 0.95em; }
.blog-article th, .blog-article td { padding: 7px 10px; border: 1px solid rgba(128, 128, 128, 0.3); text-align: left; vertical-align: top; }
.blog-article th { background: rgba(128, 128, 128, 0.12); }
.blog-article .cta { margin: 20px 0; }
.blog-article .cta a { display: inline-block; margin: 0 10px 8px 0; padding: 8px 16px; border: 1px solid; border-radius: 4px; font-weight: bold; text-decoration: none; }
.blog-article .note { font-size: 0.9em; opacity: 0.7; }
.blog-article img { max-width: 100%; height: auto; }
.blog-article code { padding: 1px 4px; background: rgba(128, 128, 128, 0.12); border-radius: 3px; font-size: 0.95em; }

.blog .blog-related { margin: 30px 0 10px 0; padding: 14px 0 0 0; border-top: 1px solid rgba(128, 128, 128, 0.25); }
.blog .blog-related h2 { font-size: 1.15em; margin: 0 0 6px 0; }
.blog .blog-related ul { margin: 0; padding-left: 20px; }

/* Technical Analysis A-Z (/technical-analysis/ta.php) */
.ta .ta-group { margin: 0 0 26px 0; }
.ta .ta-group h2 { font-size: 1.3em; margin: 26px 0 10px 0; }
.ta .ta-list { list-style: none; padding: 0; margin: 0; }
.ta .ta-list li { margin: 0 0 12px 0; }
.ta .ta-list span { opacity: 0.8; }
.ta .ta-classic { columns: 2; column-gap: 32px; padding-left: 18px; margin: 0; }
.ta .ta-classic li { margin: 0 0 4px 0; break-inside: avoid; }
@media (max-width: 600px) { .ta .ta-classic { columns: 1; } }
.blog-article .ta-chart { margin: 18px 0 4px 0; }