/* Blog post page. Loaded only by resources/views/front/page/template-blog-detail.blade.php, after refresh.css,
   whose design tokens (--et-*) it uses.
   Post bodies are pasted from Word and Google Docs, so most carry inline font
   sizes, fonts and colours. Everything inside .blog_desc is reset to one type
   scale; the !important flags are there to beat those inline styles. */
.breadcrumb_content { margin-top: var(--et-header-h); }
.breadcrumb_content > .container, .blog_detail .blogs_list > .container { max-width: var(--et-container); padding: 0 20px; width: 100%; }
.breadcrumb_blk .breadcrumb { color: var(--et-muted); font-size: var(--et-fs-sm); margin: 0; padding: 20px 0 0; }
.breadcrumb_blk .breadcrumb a { color: var(--et-teal); }
.breadcrumb_blk .breadcrumb > li + li::before { color: #b6c2cd; content: "/"; padding: 0 8px; }
.blogs_item_list.blog_detail { padding: var(--et-space-4) 0 var(--et-space-7); }

.blog_img_caption { margin-bottom: var(--et-space-4); }
.blog_title {
	color: var(--et-ink);
	font-size: var(--et-fs-h2);
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.2;
	margin: 0 0 var(--et-space-3);
	text-wrap: balance;
}
@media (min-width: 992px) { .blog_title { font-size: 40px; } }
.blog_detail_dt { color: var(--et-muted); display: inline-block; font-size: var(--et-fs-sm); margin: 0 20px 6px 0; }
.blog_detail_dt i { color: var(--et-teal); margin-right: 4px; }
.blog_image_main img { aspect-ratio: 16 / 9; border-radius: var(--et-radius); display: block; height: auto; object-fit: cover; width: 100%; }
.blog_detail .regular_blog_image { margin-bottom: var(--et-space-4); }
.blog_sharing_btns_block { margin: var(--et-space-4) 0; }

/* Article text: one scale, whatever was pasted in */
.blog_desc { color: var(--et-text); font-size: 17px; line-height: 1.75; max-width: 760px; }
.blog_desc * {
	background: none !important;
	color: inherit !important;
	font-family: var(--et-font) !important;
	font-size: inherit !important;
	letter-spacing: normal !important;
	line-height: inherit !important;
	margin: 0;
	text-align: left !important;
	text-indent: 0 !important;
}
.blog_desc p, .blog_desc div { margin: 0 0 20px !important; }
.blog_desc div:empty, .blog_desc p:empty { display: none; }
.blog_desc h1, .blog_desc h2, .blog_desc h3, .blog_desc h4, .blog_desc h5, .blog_desc h6 {
	color: var(--et-ink) !important;
	font-weight: 600 !important;
	letter-spacing: -.01em !important;
	text-wrap: balance;
}
.blog_desc h1, .blog_desc h2 { font-size: 28px !important; line-height: 1.3 !important; margin: 44px 0 14px !important; }
.blog_desc h3 { font-size: 22px !important; line-height: 1.35 !important; margin: 34px 0 10px !important; }
.blog_desc h4, .blog_desc h5, .blog_desc h6 { font-size: 18px !important; line-height: 1.4 !important; margin: 28px 0 8px !important; }
.blog_desc > :first-child { margin-top: 0 !important; }
.blog_desc strong, .blog_desc b { color: var(--et-ink) !important; font-weight: 600 !important; }
.blog_desc h1 *, .blog_desc h2 *, .blog_desc h3 *, .blog_desc h4 * { font-weight: inherit !important; }
.blog_desc a, .blog_desc a * { color: var(--et-teal) !important; font-weight: 500 !important; text-decoration: underline; text-underline-offset: 3px; }
.blog_desc a:hover, .blog_desc a:hover * { color: var(--et-teal-dark) !important; }

/* Lists: one marker style */
.blog_desc ul, .blog_desc ol { list-style: none !important; margin: 0 0 22px !important; padding: 0 !important; }
.blog_desc li { margin: 0 0 10px !important; padding: 0 0 0 30px !important; position: relative; }
.blog_desc li > ul, .blog_desc li > ol { margin: 10px 0 0 !important; }
.blog_desc ul > li::before {
	background: var(--et-teal);
	border-radius: 50%;
	content: "";
	height: 7px;
	left: 8px;
	position: absolute;
	top: .72em;
	width: 7px;
}
.blog_desc ul ul > li::before { background: none; border: 1.5px solid var(--et-teal); }
.blog_desc ol { counter-reset: et-ol; }
.blog_desc ol > li { counter-increment: et-ol; padding-left: 38px !important; }
.blog_desc ol > li::before {
	background: var(--et-teal-soft);
	border-radius: 50%;
	color: var(--et-teal-dark);
	content: counter(et-ol);
	font-size: 13px;
	font-weight: 600;
	height: 26px;
	left: 0;
	line-height: 26px;
	position: absolute;
	text-align: center;
	top: .18em;
	width: 26px;
}
.blog_desc li p, .blog_desc li div { margin: 0 !important; }

.blog_desc blockquote {
	background: var(--et-bg-tint) !important;
	border-left: 3px solid var(--et-teal);
	border-radius: 0 var(--et-radius-sm) var(--et-radius-sm) 0;
	color: var(--et-ink) !important;
	margin: 0 0 22px !important;
	padding: 16px 20px;
}
.blog_desc code {
	background: var(--et-bg-tint) !important;
	border-radius: 4px;
	font-family: Consolas, "Courier New", monospace !important;
	font-size: .9em !important;
	padding: 2px 6px;
}
.blog_desc img { border-radius: var(--et-radius-sm); display: block; height: auto !important; margin: 24px 0 !important; max-width: 100%; }
.blog_desc iframe { max-width: 100%; }
.blog_desc hr { border: 0; border-top: 1px solid var(--et-line); margin: 32px 0 !important; }
.blog_desc table {
	border-collapse: collapse;
	display: block;
	font-size: var(--et-fs-sm) !important;
	margin: 0 0 24px !important;
	max-width: 100%;
	overflow-x: auto;
	width: 100%;
}
.blog_desc table thead, .blog_desc table tbody, .blog_desc table tr { border: 0; }
.blog_desc table th, .blog_desc table td {
	border: 0;
	border-bottom: 1px solid var(--et-line);
	min-width: 120px;
	padding: 12px 14px !important;
	vertical-align: top;
}
.blog_desc table th { background: var(--et-bg-tint) !important; color: var(--et-ink) !important; font-weight: 600 !important; }

/* Sidebar */
.right_blog_menu { display: grid; gap: 24px; margin: 0; }
.right_blog_menu > .clearfix { display: none; }
.blog_menu_head { color: var(--et-ink); font-size: var(--et-fs-xs); font-weight: 500; letter-spacing: .08em; padding: 0 0 10px; text-transform: uppercase; }
.blog_menu_list { margin-top: -24px; }
.blog_list_item { border-bottom: 1px solid var(--et-line); border-top: 0; padding: 14px 0; }
.blog_list_item:hover { background: none; }
.blog_list_item a { align-items: center; display: flex; gap: 12px; }
.blog_small_img_holder { flex: none; float: none; width: 72px; }
.blog_small_img { background-position: center; background-size: cover; border-radius: 10px; height: 54px; width: 72px; }
.blog_small_img[style*="no_image"] { background: var(--et-grad-soft) !important; }
.blog_list_item_hd { float: none; padding: 0; width: auto; }
.blog_list_title { color: var(--et-ink); font-size: var(--et-fs-sm); font-weight: 500; line-height: 1.4; }
.blog_list_item a:hover .blog_list_title { color: var(--et-teal); }
.blog_list_dt { color: var(--et-muted); font-size: 12px; }
.right_blog_menu .banner_ad_1 {
	background: var(--et-grad-soft);
	border-radius: var(--et-radius);
	margin: 0;
	padding: 28px 24px;
	text-align: left;
}
.right_blog_menu .banner_ad_1:hover { background: var(--et-grad-soft); }
.right_blog_menu .banner_ad_1 + .banner_ad_1 { background: #fff; border: 1px solid var(--et-line); }
.right_blog_menu .banner_ad_1_title { color: var(--et-ink); font-size: 22px; font-weight: 600; line-height: 1.25; }
.right_blog_menu .banner_ad_1_desc { color: var(--et-text); font-size: var(--et-fs-sm); font-weight: 300; margin: 8px 0 18px; }
.right_blog_menu .banner_ad_1_link {
	background: var(--et-grad);
	border-radius: var(--et-radius-pill);
	color: #fff;
	display: inline-block;
	font-size: var(--et-fs-sm);
	font-weight: 500;
	padding: 10px 20px;
}
.right_blog_menu .banner_ad_1 + .banner_ad_1 .banner_ad_1_link { background: #fff; border: 1px solid #c5d0da; color: var(--et-ink); }
@media (max-width: 767px) { .right_blog_menu { margin-top: var(--et-space-6); } }