/*
Theme Name: TechTexts Child
Theme URI: https://techtexts.com
Description: Custom GeneratePress child theme for TechTexts.com — light/white design with a bold blue accent. Includes auto TOC, related posts, author E-E-A-T box, custom widget areas, and full site-wide visual refresh.
Author: Readoy
Author URI: https://techtexts.com
Template: generatepress
Version: 3.1.0
Text Domain: techtexts-child
*/

/* =========================================================
   TECHTEXTS.COM — LIGHT THEME (v3.1.0)
   ========================================================= */

/* ---------- 1. Design tokens ---------- */
:root {
	--tt-accent:      #2563eb;
	--tt-accent-dark: #1d4ed8;
	--tt-accent-soft: #eaf1ff;
	--tt-ink:         #1a1d23;
	--tt-ink-muted:   #5b6270;
	--tt-border:      #e7e9ee;
	--tt-surface:     #ffffff;
	--tt-surface-alt: #f7f8fb;
	--tt-shadow:      0 8px 24px rgba(20, 30, 60, 0.08);
	--tt-shadow-sm:   0 2px 10px rgba(20, 30, 60, 0.06);
	--tt-radius:      12px;
	--tt-font-body:   'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
	--tt-font-mono:   'JetBrains Mono', 'Courier New', monospace;
}

/* ---------- 2. Base ---------- */
body, .site, .site-content, .inside-article, .entry-content {
	background-color: var(--tt-surface);
	color: var(--tt-ink);
}
body { font-family: var(--tt-font-body); }
h1, h2, h3, h4, h5, h6 {
	font-family: var(--tt-font-body);
	font-weight: 600;
	letter-spacing: -0.01em;
}
.site-header, .main-navigation, .main-navigation .inside-navigation {
	background-color: var(--tt-surface);
	border-bottom: 1px solid var(--tt-border);
}
.main-navigation a { color: var(--tt-ink); }
.main-navigation .current-menu-item > a,
.main-navigation a:hover { color: var(--tt-accent); }

html { scroll-behavior: smooth; }

/* ---------- 3. Emoji ---------- */
img.wp-smiley, img.emoji {
	display: inline !important; border: none !important;
	box-shadow: none !important; height: 1em !important;
	width: 1em !important; margin: 0 0.07em !important;
	vertical-align: -0.1em !important; background: none !important;
	padding: 0 !important;
}

/* ---------- 4. Article wrapper ---------- */
.inside-article { border-bottom: 1px solid var(--tt-border); }

/* ---------- 5. Sidebar widgets ---------- */
.sidebar .widget {
	background: var(--tt-surface);
	border: 1px solid var(--tt-border);
	box-shadow: var(--tt-shadow-sm);
	border-radius: var(--tt-radius);
	padding: 1.25rem;
}
.sidebar .widget-title,
.sidebar .widgettitle {
	color: var(--tt-accent);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-bottom: 2px solid var(--tt-accent-soft);
	padding-bottom: 0.5rem;
}
@media (min-width: 769px) {
	.site-content { display: flex; }
	.inside-right-sidebar { height: 100%; }
	.inside-right-sidebar aside:last-child {
		position: -webkit-sticky;
		position: sticky;
		top: 90px;
	}
}

/* ---------- 6. Images ---------- */
@media (min-width: 769px) {
	.post-image-aligned-left .post-image img {
		margin-top: -20px;
		border-radius: var(--tt-radius);
		box-shadow: var(--tt-shadow) !important;
	}
}
@media (max-width: 769px) {
	.inside-article .post-image a img { margin: -1.1em 1em 0 0 !important; }
}
.wp-block-image img {
	border-radius: var(--tt-radius);
	box-shadow: var(--tt-shadow) !important;
	margin-bottom: 30px !important;
}
.wp-block-image.my-class img { box-shadow: none !important; border: none; }
.inside-article .wp-block-image figcaption,
.wp-block-table > figcaption {
	text-align: center; font-size: 15px; color: var(--tt-ink-muted);
}
.site-logo img { height: 65px; width: 160px; }
img.header-image { margin: 5px 10px 0 0; }

/* ---------- 7. Also Read ---------- */
.alsoread {
	font-weight: 700;
	border: 1px solid var(--tt-border);
	border-radius: var(--tt-radius);
	box-shadow: var(--tt-shadow-sm);
	color: var(--tt-accent-dark);
	padding: 18px 20px;
	background: var(--tt-accent-soft);
	border-left: 4px solid var(--tt-accent);
	font-size: 18px;
}

/* ---------- 8. Breadcrumb ---------- */
.rank-math-breadcrumb p {
	padding: 10px 10px 10px 20px;
	background: var(--tt-surface-alt);
	color: var(--tt-ink-muted);
	font-size: 14.5px;
	box-shadow: none !important;
	border: 1px solid var(--tt-border);
	border-radius: var(--tt-radius);
}

/* ---------- 9. Code ---------- */
code, pre, kbd, samp { font-family: var(--tt-font-mono); }
code {
	background: var(--tt-surface-alt);
	padding: 2px 6px;
	border-radius: 5px;
	font-size: inherit;
	font-weight: 700;
	color: var(--tt-accent-dark);
}
pre.wp-block-code code {
	background: none !important;
	font-weight: normal !important;
	color: var(--tt-ink);
}

/* ---------- 10. Links ---------- */
a { color: var(--tt-accent); transition: color 0.2s ease; }
a:hover { color: var(--tt-accent-dark); }

/* Content links — clearly blue so readers know they're clickable */
.entry-content a:not(.button):not(.wp-block-button__link):not(.gb-button):not(.tt-related-card) {
	color: var(--tt-accent);
	text-decoration: none;
	font-weight: 700;
	background-image: linear-gradient(
		transparent 2px, var(--tt-accent) 2px, var(--tt-accent) 4px, transparent 4px
	), linear-gradient(
		transparent 2px, var(--tt-border) 2px, var(--tt-border) 4px, transparent 4px
	);
	background-size: 0% 6px, 100% 6px;
	background-position: 0 bottom, 0 bottom;
	transition: background-size 0.3s ease-in-out, color 0.2s ease;
	background-repeat: no-repeat;
	padding-bottom: 4px;
}
.entry-content a:hover:not(.button):not(.wp-block-button__link):not(.gb-button):not(.tt-related-card) {
	color: var(--tt-accent-dark);
	background-size: 100% 6px;
}

/* Read More button */
a.read-more.button {
	font-size: 16px;
	background-color: transparent;
	color: var(--tt-accent);
	text-decoration: none;
	background-image: linear-gradient(transparent 2px, var(--tt-accent) 2px, var(--tt-accent) 4px, transparent 4px),
		linear-gradient(transparent 2px, var(--tt-border) 2px, var(--tt-border) 4px, transparent 4px);
	background-size: 0% 6px, 100% 6px;
	background-position: 0 bottom, 0 bottom;
	transition: background-size 0.3s ease-in-out;
	background-repeat: no-repeat;
	padding: 10px;
	font-weight: bolder;
}
a.read-more.button:hover { color: var(--tt-accent-dark); background-size: 100% 6px; }
a.read-more { float: right; }
.tt-read-more-wrap { margin-top: 0.75rem !important; margin-bottom: 0 !important; }

/* ---------- 11. Blockquote ---------- */
blockquote {
	background: var(--tt-surface-alt);
	border-left: 4px solid var(--tt-accent);
	padding: 18px 20px;
	font-style: normal;
	font-size: 18px;
	margin: 0 0 1.5em;
	border-radius: 0 var(--tt-radius) var(--tt-radius) 0;
	color: var(--tt-ink);
}

/* ---------- 12. Rank Math FAQ ---------- */
.rank-math-list-item {
	box-shadow: var(--tt-shadow-sm);
	border: 1px solid var(--tt-border);
	border-radius: var(--tt-radius);
	margin: 1em auto;
	overflow: hidden;
	padding: 0.6em 1em;
	background: var(--tt-surface);
}
p.schema-faq-answer { margin-bottom: 0.5em; }

/* ---------- 13. Subscribe ---------- */
#wp-subscribe.wp-subscribe-2,
#wp-subscribe.wp-subscribe-1 {
	margin: 15px 0;
	border-radius: var(--tt-radius);
	border: 1px solid var(--tt-border);
}

/* ---------- 14. Block containers ---------- */
.gb-container.clickable-container .gb-inside-container { position: relative; }
.gb-container.clickable-container a:before {
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	z-index: 999;
}
ol, ul { margin: 0 0 1.5em 2em; }
.gb-container-7041c1a1 {
	box-sizing: border-box;
	box-shadow: var(--tt-shadow-sm);
	border-radius: var(--tt-radius);
	counter-reset: wplogout-list;
	background: var(--tt-surface);
	border: 1px solid var(--tt-border);
	padding: 1rem 1.25rem;
}
.gb-container-7041c1a1 p { counter-increment: wplogout-list; }
.gb-container-7041c1a1 p::before {
	content: counter(wplogout-list) ". ";
	color: var(--tt-accent);
	font-weight: 700;
	padding-right: 5px;
}
#block-7, #block-11 { background: var(--tt-accent); }
.entry-meta { font-size: 15px !important; color: var(--tt-ink-muted); }
.inside-article .wp-block-buttons > .wp-block-button { margin: 0 0 20px 0 !important; }
.wp-block-button__link, .button, button[type="submit"] {
	background-color: var(--tt-accent);
	border-radius: 8px;
	transition: background-color 0.2s ease, transform 0.15s ease;
}
.wp-block-button__link:hover, .button:hover, button[type="submit"]:hover {
	background-color: var(--tt-accent-dark);
	transform: translateY(-1px);
}

/* ---------- 15. Social share ---------- */
.wplogout-social-wrapper {
	margin: 20px auto; font-size: 0;
	text-align: center; display: flex; flex-wrap: wrap;
}
.wplogout-social-sharing { padding: 12px; flex: 1; }
@media only screen and (max-width: 600px) {
	.wplogout-social-sharing { display: inline-block; }
}
.wplogout-social-sharing svg { position: relative; top: 0.15em; display: inline-block; }
.wplogout-social-sharing:first-of-type { border-radius: 6px 0 0 6px; }
.wplogout-social-sharing:last-of-type { border-radius: 0 6px 6px 0; }
.wplogout-social-facebook { fill: #fff; background-color: rgba(59,89,152,1); }
.wplogout-social-twitter  { fill: #fff; background-color: rgba(15,20,25,1); }
.wplogout-social-pinterest{ fill: #fff; background-color: rgba(189,8,28,1); }
.wplogout-social-whatsapp { fill: #fff; background-color: rgba(37,211,102,1); }
.wplogout-social-reddit   { fill: #fff; background-color: rgba(255,87,0,1); }
.wplogout-float-social-wrapper {
	position: fixed; top: 65%;
	transform: translateY(-50%); z-index: 9999;
}
.wplogout-float-social-sharing {
	display: flex; flex-wrap: nowrap; flex-direction: column;
	align-items: flex-start; min-height: 40px; font-size: 12px; padding: 5px 10px;
}
.wplogout-float-social-sharing svg { position: relative; top: 0.5em; fill: #fff; }
a.wplogout-social-sharing:hover,
a.wplogout-float-social-sharing:hover { opacity: 0.85; }

/* ---------- 16. Author box ---------- */
.author-box {
	padding: 32px;
	margin-top: 40px;
	font-size: 0.95em;
	background: linear-gradient(135deg, var(--tt-surface-alt) 0%, #fff 100%);
	display: flex;
	align-items: center;
	border-radius: 16px;
	box-shadow: var(--tt-shadow);
	border: 1px solid var(--tt-border);
}
.author-box .avatar {
	width: 96px; height: 96px;
	border-radius: 100%;
	margin-right: 28px;
	box-shadow: 0 0 0 4px var(--tt-accent-soft), 0 0 0 5px var(--tt-accent);
	overflow: hidden; flex-shrink: 0;
}
.author-box .avatar img {
	width: 100%; height: 100%;
	object-fit: cover; object-position: center top;
	border-radius: 100%;
}
p.author-title {
	margin-bottom: 0.6em; font-weight: 600;
	color: var(--tt-accent); text-transform: uppercase;
	font-size: 0.72em; letter-spacing: 0.06em;
}
.author-description { line-height: 1.65em; color: var(--tt-ink-muted); margin-bottom: 1em; }
.author-links a {
	display: inline-flex; align-items: center;
	font-size: 0.85em; font-weight: 600;
	color: var(--tt-accent); margin-right: 0.75em;
	margin-top: 0; line-height: 1.4; float: none;
	text-decoration: none; background-image: none;
	padding: 6px 14px;
	border: 1px solid var(--tt-accent-soft);
	background-color: var(--tt-accent-soft);
	border-radius: 999px;
}
.author-links a:hover {
	color: #fff;
	background-color: var(--tt-accent);
	border-color: var(--tt-accent);
}
@media (max-width: 768px) {
	.author-box { padding: 28px 24px; flex-direction: column; text-align: center; }
	.author-box .avatar { margin-right: 0; margin-bottom: 18px; width: 88px; height: 88px; }
	.author-links { display: flex; justify-content: center; }
}

/* ---------- 17. Layout width ---------- */
.blog .site-content,
.single-post .site-content,
.archive .site-content { max-width: 1200px; width: 95%; margin: 0 auto; }
.single-post .content-area,
.blog .content-area { max-width: 1000px; }

/* ---------- 18. Post cards (tt-* components) ---------- */
.tt-post-card {
	background: var(--tt-surface);
	border: 1px solid var(--tt-border);
	border-radius: var(--tt-radius);
	padding: 1.5rem; margin-bottom: 1.5rem;
	box-shadow: var(--tt-shadow-sm);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.tt-post-card:hover { box-shadow: var(--tt-shadow); transform: translateY(-2px); }
.tt-post-card__category {
	display: inline-block;
	font-family: var(--tt-font-mono);
	font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
	color: var(--tt-accent); background: var(--tt-accent-soft);
	padding: 0.25rem 0.6rem; border-radius: 999px; margin-bottom: 0.75rem;
}
.tt-post-card__title { font-size: 1.3rem; margin: 0.4rem 0; }
.tt-post-card__meta { font-size: 0.85rem; color: var(--tt-ink-muted); font-family: var(--tt-font-mono); }
.tt-post-card__excerpt { color: var(--tt-ink-muted); margin-top: 0.6rem; }
.tt-single-post .entry-content { font-size: 1.08rem; line-height: 1.75; }
.tt-single-post .entry-content h2 {
	border-left: 4px solid var(--tt-accent);
	padding-left: 0.75rem; margin-top: 2.2rem;
}
.tt-single-post .entry-content h2,
.tt-single-post .entry-content h3 { scroll-margin-top: 100px; }

/* ---------- 19. tt-author-box (E-E-A-T, PHP generated) ---------- */
.tt-author-box {
	display: flex; gap: 1.25rem; align-items: flex-start;
	background: var(--tt-surface-alt);
	border: 1px solid var(--tt-border);
	border-radius: var(--tt-radius);
	padding: 1.5rem; margin: 2.5rem 0;
}
.tt-author-box__avatar {
	width: 72px; height: 72px;
	flex-shrink: 0; border-radius: 50%; overflow: hidden;
}
.tt-author-box__avatar img {
	display: block;
	width: 72px !important; height: 72px !important; max-width: 72px !important;
	border-radius: 50%; object-fit: cover; object-position: center top;
}
.tt-author-box__name { font-weight: 600; font-size: 1.05rem; margin: 0 0 0.25rem; }
.tt-author-box__role {
	font-family: var(--tt-font-mono); font-size: 0.75rem;
	color: var(--tt-accent); text-transform: uppercase;
	letter-spacing: 0.04em; margin-bottom: 0.5rem;
}
.tt-author-box__bio { color: var(--tt-ink-muted); font-size: 0.95rem; line-height: 1.6; }
.tt-author-box__links a { margin-right: 0.75rem; font-size: 0.85rem; }

/* ---------- 20. Related Posts ---------- */
.tt-related-posts {
	margin: 2.5rem 0 1rem; padding-top: 2rem;
	border-top: 1px solid var(--tt-border);
}
.tt-related-posts__heading {
	font-size: 1.15rem; font-weight: 600;
	margin: 0 0 1.25rem; color: var(--tt-ink);
}
.tt-related-posts__heading::before {
	content: ''; display: inline-block;
	width: 18px; height: 3px; background: var(--tt-accent);
	margin-right: 10px; vertical-align: middle; border-radius: 2px;
}
.tt-related-posts__grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
}
.tt-related-card {
	display: flex; flex-direction: column;
	background: var(--tt-surface);
	border: 1px solid var(--tt-border);
	border-radius: var(--tt-radius);
	overflow: hidden; text-decoration: none; background-image: none;
	box-shadow: var(--tt-shadow-sm);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.tt-related-card:hover { box-shadow: var(--tt-shadow); transform: translateY(-3px); }
.tt-related-card__thumb {
	width: 100%; aspect-ratio: 16 / 10;
	overflow: hidden; background: var(--tt-surface-alt);
}
.tt-related-card__thumb img {
	width: 100%; height: 100%; object-fit: cover;
	margin: 0 !important; border-radius: 0 !important;
	box-shadow: none !important; display: block;
}
.tt-related-card__body { padding: 1rem 1.1rem 1.2rem; }
.tt-related-card__category {
	display: inline-block; font-family: var(--tt-font-mono);
	font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em;
	color: var(--tt-accent); background: var(--tt-accent-soft);
	padding: 0.2rem 0.55rem; border-radius: 999px; margin-bottom: 0.6rem;
}
.tt-related-card__title {
	font-size: 1rem; font-weight: 600;
	line-height: 1.4; margin: 0; color: var(--tt-ink);
}
.tt-related-card:hover .tt-related-card__title { color: var(--tt-accent); }
@media (max-width: 768px) {
	.tt-related-posts__grid { grid-template-columns: 1fr; }
}

/* ---------- 21. Post Navigation ---------- */
.post-navigation { margin: 2rem 0; padding: 0; border: none; }
.post-navigation .nav-previous,
.post-navigation .nav-next {
	display: flex; align-items: center; gap: 0.6rem;
	background: var(--tt-surface); border: 1px solid var(--tt-border);
	border-radius: var(--tt-radius); padding: 0.85rem 1.1rem;
	box-shadow: var(--tt-shadow-sm);
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
	margin-bottom: 0.75rem; width: 100%; float: none;
}
.post-navigation .nav-previous:hover,
.post-navigation .nav-next:hover {
	box-shadow: var(--tt-shadow); transform: translateY(-2px); border-color: var(--tt-accent);
}
.post-navigation .nav-previous a,
.post-navigation .nav-next a,
.post-navigation .nav-previous span.prev,
.post-navigation .nav-next span.next {
	text-decoration: none; background-image: none;
	color: var(--tt-ink); font-weight: 600; font-size: 0.95rem;
}
.post-navigation .nav-previous a:hover,
.post-navigation .nav-next a:hover { color: var(--tt-accent); }
.post-navigation .gp-icon { color: var(--tt-accent); flex-shrink: 0; width: 14px; height: 14px; }
.post-navigation .nav-next { flex-direction: row-reverse; text-align: right; }
.post-navigation .nav-next .gp-icon { transform: scaleX(-1); }
@media (min-width: 600px) {
	.post-navigation { display: flex; gap: 1rem; }
	.post-navigation .nav-previous,
	.post-navigation .nav-next { margin-bottom: 0; }
}
span.cat-links, .posted-in {
	display: inline-flex; align-items: center; gap: 0.4rem;
	font-size: 0.85rem; margin-bottom: 0.75rem;
}
span.cat-links a, .posted-in a {
	color: var(--tt-accent); font-weight: 600;
	text-decoration: none; background-image: none;
	background: var(--tt-accent-soft);
	padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.8rem;
}
span.cat-links a:hover, .posted-in a:hover { background: var(--tt-accent); color: #fff; }

/* ---------- 22. Blog Index Pagination ---------- */
.paging-navigation { margin: 2.5rem 0 1rem; }
.paging-navigation .nav-links {
	display: flex; flex-wrap: wrap;
	align-items: center; justify-content: center; gap: 0.4rem;
}
.paging-navigation .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 38px; height: 38px; padding: 0 0.6rem;
	border-radius: 8px; border: 1px solid var(--tt-border);
	background: var(--tt-surface); color: var(--tt-ink);
	font-weight: 600; font-size: 0.9rem;
	text-decoration: none; background-image: none;
	transition: all 0.2s ease;
}
.paging-navigation .page-numbers.current {
	background: var(--tt-accent); border-color: var(--tt-accent); color: #fff;
}
.paging-navigation a.page-numbers:hover {
	border-color: var(--tt-accent); color: var(--tt-accent);
	transform: translateY(-2px); box-shadow: var(--tt-shadow-sm);
}
.paging-navigation .page-numbers.dots {
	border: none; background: none;
	color: var(--tt-ink-muted); min-width: auto;
}
.paging-navigation .page-numbers.next,
.paging-navigation .page-numbers.prev {
	font-weight: 600; padding: 0 1rem;
	background: var(--tt-accent-soft);
	border-color: var(--tt-accent-soft); color: var(--tt-accent);
}
.paging-navigation .page-numbers.next:hover,
.paging-navigation .page-numbers.prev:hover {
	background: var(--tt-accent); border-color: var(--tt-accent); color: #fff;
}
#nav-below .nav-previous,
#nav-below .nav-next { display: none; }

/* ---------- 23. Categories widget ---------- */
.widget_categories ul {
	margin: 0; list-style: none;
	max-height: 360px; overflow-y: auto; padding-right: 4px;
}
.widget_categories ul::-webkit-scrollbar { width: 6px; }
.widget_categories ul::-webkit-scrollbar-thumb {
	background: var(--tt-border); border-radius: 999px;
}
.widget_categories .cat-item {
	display: flex; align-items: center; justify-content: space-between;
	padding: 0.5rem 0; border-bottom: 1px solid var(--tt-surface-alt);
	font-size: 0.88rem;
}
.widget_categories .cat-item:last-child { border-bottom: none; }
.widget_categories .cat-item a {
	color: var(--tt-ink); text-decoration: none;
	background-image: none; font-weight: 500;
}
.widget_categories .cat-item a:hover { color: var(--tt-accent); }

/* ---------- 24. Tables ---------- */
.entry-content table {
	width: 100%; border-collapse: collapse;
	font-size: 0.9rem; margin: 1.5rem 0; display: table;
}
.entry-content .wp-block-table {
	overflow-x: auto; -webkit-overflow-scrolling: touch;
	display: block; width: 100%;
}
.entry-content table th,
.entry-content table td {
	padding: 0.75rem 1rem;
	border: 1px solid var(--tt-border);
	text-align: left; vertical-align: top;
}
.entry-content table th {
	background: var(--tt-accent-soft);
	color: var(--tt-accent-dark); font-weight: 600; font-size: 0.85rem;
}
.entry-content table tr:nth-child(even) td { background: var(--tt-surface-alt); }
.entry-content table tr:hover td { background: var(--tt-accent-soft); }
@media (max-width: 600px) {
	.entry-content .wp-block-table table { min-width: 500px; }
}

/* ---------- 25. Post Tags ---------- */
.tags-links {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 0.5rem; margin: 1.75rem 0;
	padding-top: 1.5rem; border-top: 1px solid var(--tt-border);
}
.tags-links .gp-icon { color: var(--tt-ink-muted); flex-shrink: 0; margin-right: 0.15rem; }
.tags-links a {
	display: inline-flex; align-items: center;
	background: var(--tt-surface-alt);
	border: 1px solid var(--tt-border);
	color: var(--tt-ink-muted); font-size: 0.82rem; font-weight: 500;
	text-decoration: none; background-image: none;
	padding: 0.35rem 0.85rem; border-radius: 999px;
	transition: all 0.2s ease;
}
.tags-links a::before {
	content: '#'; margin-right: 0.2rem;
	color: var(--tt-accent); font-weight: 700;
}
.tags-links a:hover {
	background: var(--tt-accent); border-color: var(--tt-accent); color: #fff;
}
.tags-links a:hover::before { color: #fff; }

/* ---------- 26. Table of Contents ---------- */
.tt-toc {
	background: var(--tt-surface-alt);
	border: 1px solid var(--tt-border);
	border-radius: var(--tt-radius);
	margin: 0 0 2rem; overflow: hidden;
}
.tt-toc__toggle {
	display: flex; align-items: center; justify-content: space-between;
	width: 100%; background: none; border: none; cursor: pointer;
	padding: 1rem 1.25rem; font-family: var(--tt-font-body); text-align: left;
}
.tt-toc__title { font-weight: 600; font-size: 1rem; color: var(--tt-ink); }
.tt-toc__title::before {
	content: ''; display: inline-block;
	width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px;
	background: var(--tt-accent); border-radius: 3px;
}
.tt-toc__icon {
	width: 10px; height: 10px;
	border-right: 2px solid var(--tt-accent);
	border-bottom: 2px solid var(--tt-accent);
	transform: rotate(45deg); transition: transform 0.25s ease; flex-shrink: 0;
}
.tt-toc.is-closed .tt-toc__icon { transform: rotate(-45deg); }
.tt-toc__list {
	list-style: none; margin: 0; padding: 0 1.25rem 1.1rem;
	max-height: 2000px; overflow: hidden;
	transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.2s ease;
}
.tt-toc.is-closed .tt-toc__list {
	max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0;
}
.tt-toc__item {
	padding: 0.4rem 0; border-bottom: 1px solid var(--tt-border);
}
.tt-toc__item:last-child { border-bottom: none; }
.tt-toc__item a {
	color: var(--tt-ink-muted); text-decoration: none; background-image: none;
	font-size: 0.92rem; font-weight: 500; transition: color 0.15s ease;
}
.tt-toc__item a:hover { color: var(--tt-accent); }
.tt-toc__item--h3 { padding-left: 1.1rem; }
.tt-toc__item--h3 a { font-weight: 400; font-size: 0.88rem; }
.tt-toc__item--h3::before { content: '–'; margin-right: 0.4rem; color: var(--tt-border); }
.tt-toc__item--h4 { padding-left: 2rem; }
.tt-toc__item--h4 a { font-weight: 400; font-size: 0.84rem; color: var(--tt-ink-muted); }
.tt-toc__item--h4::before { content: '›'; margin-right: 0.4rem; color: var(--tt-border); }

/* ---------- 27. Widget areas ---------- */
.tt-widget-area {
	background: var(--tt-surface); border: 1px solid var(--tt-border);
	border-radius: var(--tt-radius); padding: 1.25rem; margin-bottom: 1.5rem;
}
.tt-widget-area .widget-title,
.tt-widget-area .widgettitle {
	font-family: var(--tt-font-mono); font-size: 0.85rem;
	text-transform: uppercase; letter-spacing: 0.05em;
	color: var(--tt-accent); border-bottom: 2px solid var(--tt-accent-soft);
	padding-bottom: 0.5rem; margin-bottom: 0.75rem;
}
.tt-sidebar-sticky { position: sticky; top: 100px; }

@media (max-width: 768px) {
	.tt-author-box { flex-direction: column; text-align: center; align-items: center; }
	.tt-sidebar-sticky { position: static; }
}