/* ==========================================================================
   Single post header
   ========================================================================== */
.single-hero { padding: 50px 0 44px; }
.single-hero h1 { font-size: 38px; line-height: 1.25; max-width: 900px; }
.single-hero .tul-cat { color: #fff; background: rgba(255,255,255,.16); padding: 4px 12px; }
.single-hero .tul-cat:hover { background: rgba(255,255,255,.28); color: #fff; }
.single-hero .hero-author { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.single-hero .hero-author img { border-radius: 50%; border: 2px solid rgba(255,255,255,.7); }
.single-hero .hero-author .name a { color: #fff; font-weight: 600; }
.single-hero .hero-author .tul-meta { margin: 2px 0 0; }
@media (max-width: 767.98px) { .single-hero h1 { font-size: 26px; } }

.single-layout { padding-top: 44px; }

/* ==========================================================================
   Article body
   ========================================================================== */
.entry-thumb { margin-bottom: 30px; border-radius: var(--tul-radius); overflow: hidden; }
.entry-thumb img { width: 100%; display: block; }
.entry-thumb figcaption { font-size: 13px; color: var(--tul-muted); padding-top: 8px; }

.entry-content { font-size: 17px; line-height: 1.85; color: #2b2b30; }
.entry-content > * + * { margin-top: 0; }
.entry-content p { margin-bottom: 22px; }
.entry-content h2 { font-size: 28px; margin: 44px 0 16px; }
.entry-content h3 { font-size: 22px; margin: 34px 0 12px; }
.entry-content h4 { font-size: 18px; margin: 28px 0 10px; }
.entry-content a { text-decoration: underline; text-decoration-color: rgba(106,49,200,.35); text-underline-offset: 3px; }
.entry-content a:hover { text-decoration-color: var(--tul-magenta); }
.entry-content ul, .entry-content ol { margin: 0 0 22px; padding-left: 24px; }
.entry-content li { margin-bottom: 8px; }
.entry-content ul li::marker { color: var(--tul-magenta); }
.entry-content blockquote {
	margin: 30px 0; padding: 22px 26px; background: var(--tul-grad-soft);
	border-left: 4px solid var(--tul-magenta); font-size: 18px; font-style: italic; color: var(--tul-ink);
}
.entry-content blockquote p:last-child { margin: 0; }
.entry-content img { border-radius: var(--tul-radius); }
.entry-content figure { margin: 30px 0; }
.entry-content figcaption { font-size: 13px; color: var(--tul-muted); text-align: center; margin-top: 8px; }
.entry-content table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 15px; display: block; overflow-x: auto; }
.entry-content th, .entry-content td { border: 1px solid var(--tul-line); padding: 10px 12px; text-align: left; }
.entry-content th { background: var(--tul-wash); font-family: "Poppins", sans-serif; font-weight: 600; }
.entry-content pre { background: #1f1f1f; color: #eee; padding: 18px; border-radius: var(--tul-radius); overflow-x: auto; font-size: 14px; }
.entry-content code { background: var(--tul-wash); padding: 2px 6px; border-radius: 3px; font-size: .9em; }
.entry-content pre code { background: none; padding: 0; }

.entry-footer { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--tul-line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.entry-tags a { display: inline-block; font-size: 13px; border: 1px solid var(--tul-line); padding: 4px 12px; margin: 0 6px 6px 0; color: var(--tul-text); }
.entry-tags a:hover { background: var(--tul-purple); border-color: var(--tul-purple); color: #fff; }
.entry-share { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--tul-muted); }
.entry-share a { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: #fff; border-radius: 50%; }
.entry-share .fb { background: #3b5998; } .entry-share .tw { background: #111; }
.entry-share .li { background: #0a66c2; } .entry-share .em { background: var(--tul-magenta); }
.entry-share a:hover { opacity: .85; color: #fff; }

/* ==========================================================================
   Table of contents (right column, sticky)
   ========================================================================== */
.tul-toc-col { position: relative; }
.tul-toc-sticky { position: sticky; top: calc(var(--tul-header-h) + 20px); }
.tul-toc {
	border: 1px solid var(--tul-line); border-radius: var(--tul-radius); background: #fff;
	box-shadow: var(--tul-shadow); overflow: hidden; margin-bottom: 24px;
}
.tul-toc-head {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 14px 18px; background: var(--tul-grad); color: #fff;
}
.tul-toc-head h2 { color: #fff; font-size: 15px; margin: 0; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }
.tul-toc-head h2 i { margin-right: 8px; }
.tul-toc-toggle { background: none; border: 0; color: #fff; font-size: 16px; cursor: pointer; padding: 0 4px; }
.tul-toc-progress { height: 3px; background: #f0eef6; }
.tul-toc-progress span { display: block; height: 100%; width: 0; background: var(--tul-magenta); transition: width .15s linear; }
.tul-toc nav { max-height: calc(100vh - var(--tul-header-h) - 190px); overflow-y: auto; padding: 10px 0; }
.tul-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.tul-toc li { margin: 0; }
.tul-toc a {
	display: block; position: relative; padding: 7px 18px 7px 44px; font-size: 14px; line-height: 1.45;
	color: var(--tul-text); border-left: 3px solid transparent;
}
.tul-toc > nav > ol > li { counter-increment: toc; }
.tul-toc > nav > ol > li > a:before {
	content: counter(toc, decimal-leading-zero); position: absolute; left: 16px; top: 8px;
	font-size: 11px; font-weight: 700; color: var(--tul-muted); font-family: "Poppins", sans-serif;
}
.tul-toc ol ol a { padding-left: 58px; font-size: 13.5px; color: var(--tul-muted); }
.tul-toc ol ol a:before { content: ""; position: absolute; left: 44px; top: 16px; width: 6px; height: 1px; background: #bbb; }
.tul-toc a:hover { color: var(--tul-magenta); background: #faf8fd; }
.tul-toc a.active { color: var(--tul-purple); font-weight: 600; border-left-color: var(--tul-magenta); background: #f6f1fd; }
.tul-toc a.active:before { color: var(--tul-magenta) !important; }
.tul-toc.collapsed nav, .tul-toc.collapsed .tul-toc-progress { display: none; }

.tul-toc-cta { background: var(--tul-grad); color: #fff; border-radius: var(--tul-radius); padding: 22px; text-align: center; }
.tul-toc-cta h4 { color: #fff; font-size: 17px; margin-bottom: 8px; }
.tul-toc-cta p { color: rgba(255,255,255,.9); font-size: 14px; line-height: 1.55; }
.tul-toc-cta a { display: inline-block; background: #fff; color: var(--tul-purple); font-weight: 700; font-size: 13px; padding: 8px 20px; letter-spacing: .5px; }
.tul-toc-cta a:hover { background: var(--tul-ink); color: #fff; }

/* Below lg the TOC moves above the article as a collapsible box. */
@media (max-width: 991.98px) {
	.tul-toc-col { order: -1; }
	.tul-toc-sticky { position: static; }
	.tul-toc nav { max-height: 320px; }
	.tul-toc-cta { display: none; }
}

/* ==========================================================================
   Author box (end of every post)
   ========================================================================== */
.tul-author-box {
	display: flex; gap: 24px; margin-top: 44px; padding: 28px; border-radius: var(--tul-radius);
	background: var(--tul-grad-soft); border: 1px solid #ece6f7;
}
.tul-author-box .avatar-wrap { flex: 0 0 auto; }
.tul-author-box .avatar-wrap img { border-radius: 50%; border: 3px solid #fff; box-shadow: 0 4px 16px rgba(106,49,200,.2); }
.tul-author-box .label { font-size: 11.5px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; color: var(--tul-magenta); margin-bottom: 2px; }
.tul-author-box h3 { font-size: 21px; margin: 0 0 2px; }
.tul-author-box h3 a { color: var(--tul-ink); }
.tul-author-box h3 a:hover { color: var(--tul-magenta); }
.tul-author-box .role { font-size: 14px; color: var(--tul-muted); margin-bottom: 10px; }
.tul-author-box .bio { font-size: 15px; line-height: 1.7; margin-bottom: 14px; color: var(--tul-text); }
.tul-author-box .author-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.tul-author-social { display: flex; gap: 8px; }
.tul-author-social a {
	width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%; background: #fff; color: var(--tul-purple); border: 1px solid #e3d9f4;
}
.tul-author-social a:hover { background: var(--tul-purple); color: #fff; border-color: var(--tul-purple); }
@media (max-width: 575.98px) { .tul-author-box { flex-direction: column; align-items: center; text-align: center; } .tul-author-box .author-actions { justify-content: center; } }

/* Prev / next */
.tul-post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--tul-line); }
.tul-post-nav a { display: block; border: 1px solid var(--tul-line); padding: 16px 18px; border-radius: var(--tul-radius); color: var(--tul-ink); font-weight: 600; font-size: 15px; line-height: 1.4; background: #fff; }
.tul-post-nav a:hover { border-color: var(--tul-purple); color: var(--tul-purple); box-shadow: var(--tul-shadow); }
.tul-post-nav small { display: block; font-size: 11.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--tul-muted); font-weight: 700; margin-bottom: 4px; }
.tul-post-nav .next { text-align: right; grid-column: 2; }
@media (max-width: 575.98px) { .tul-post-nav { grid-template-columns: 1fr; } .tul-post-nav .next { grid-column: 1; } }

/* Featured posts strip (end of every post) */
.tul-featured-posts { background: var(--tul-wash); padding: 56px 0 30px; margin-top: 60px; }
.tul-featured-posts .tul-section-title { border-bottom-color: #e2e2e6; }

/* Comments */
.comments-area { margin-top: 44px; padding-top: 30px; border-top: 1px solid var(--tul-line); }
.comment-list { list-style: none; padding: 0; margin: 0 0 30px; }
.comment-list .children { list-style: none; padding-left: 28px; border-left: 2px solid var(--tul-line); }
.comment-body { padding: 18px 0; border-bottom: 1px solid #f0f0f3; }
.comment-author img { border-radius: 50%; margin-right: 10px; vertical-align: middle; }
.comment-meta { font-size: 12.5px; color: var(--tul-muted); margin-bottom: 8px; }
.comment-meta a { color: var(--tul-muted); }
.comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url], .comment-form textarea {
	width: 100%; border: 1px solid var(--tul-line); padding: 10px 12px; font-size: 15px; margin-bottom: 12px;
}
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--tul-purple); outline: none; }

/* ==========================================================================
   Author archive page
   ========================================================================== */
.author-hero { padding: 54px 0 48px; }
.author-profile { display: flex; align-items: center; gap: 30px; }
.author-profile .avatar-wrap img { border-radius: 50%; border: 4px solid rgba(255,255,255,.85); box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.author-profile h1 { font-size: 36px; margin-bottom: 4px; }
.author-profile .role { color: rgba(255,255,255,.85); font-size: 16px; margin-bottom: 12px; }
.author-profile .bio { color: rgba(255,255,255,.92); max-width: 760px; font-size: 15.5px; }
.author-stats { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 16px; }
.author-stats div { line-height: 1.2; }
.author-stats strong { display: block; font-family: "Poppins", sans-serif; font-size: 24px; color: #fff; }
.author-stats span { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.8); }
.author-hero .tul-author-social { margin-top: 18px; }
.author-hero .tul-author-social a { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.35); color: #fff; }
.author-hero .tul-author-social a:hover { background: #fff; color: var(--tul-purple); }
@media (max-width: 767.98px) {
	.author-profile { flex-direction: column; text-align: center; gap: 16px; }
	.author-profile h1 { font-size: 28px; }
	.author-stats, .author-hero .tul-author-social { justify-content: center; }
}