/*
Theme Name: Twenty Twenty Child
Theme URI: https://wordpress.org/themes/twentytwenty/
Description: A child theme for the Twenty Twenty WordPress theme with single post and sidebar controls.
Author: Twenty Twenty Child
Author URI: https://wwww.m2sys.com/
Template: twentytwenty
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwenty-child
Tags: blog, one-column, two-columns, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
*/

/*
Add custom CSS below.
This file loads after the Twenty Twenty parent theme style.css.
*/
img.custom-logo { max-width: 200px; }

/* ================================================================
   Custom Blog Posts Shortcode — [custom_blog_posts]
   All rules are scoped under #cbp-blog-posts so they cannot
   conflict with Elementor widgets, Bootstrap globals, or any other
   theme/plugin styles on the same page.
   ================================================================ */

/* 2-column grid — fills the full container, each card stays narrow
   enough for comfortable reading without a fixed max-width hack.   */
#cbp-blog-posts {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 28px;
	align-items: stretch;
	width: 100%;
	padding: 16px 0 48px;
	font-family: 'Roboto', sans-serif;
	color: inherit;
}

/* pagination + "no posts" message span both columns */
#cbp-blog-posts .custom-pagination,
#cbp-blog-posts > p {
	grid-column: 1 / -1;
}

/* ---- Post card ---- */
#cbp-blog-posts .custom-post {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #ddd;
	border-top: 3px solid #a81010;
	border-radius: 6px;
	padding: 28px 28px 24px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.2s ease, border-top-color 0.2s ease, transform 0.2s ease;
}

#cbp-blog-posts .custom-post:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.11);
	border-top-color: #7a0c0c;
	transform: translateY(-2px);
}

/* ---- Title ---- */
#cbp-blog-posts .custom-post h2 {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.45;
	margin: 0 0 12px;
}

#cbp-blog-posts .custom-post h2 a {
	text-decoration: none;
	color: #111;
	transition: color 0.2s ease;
}

#cbp-blog-posts .custom-post h2 a:hover {
	color: #a81010;
}

/* ---- Meta row ---- */
#cbp-blog-posts .post-meta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin-bottom: 14px;
	line-height: 1;
}

/* category pill badge */
#cbp-blog-posts .post-meta-row .post-category,
#cbp-blog-posts .post-meta-row .post-category a {
	display: inline-block;
	background: #f5e8e8;
	color: #a81010;
	padding: 4px 11px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
}

#cbp-blog-posts .post-meta-row .post-category a:hover {
	background: #a81010;
	color: #fff;
}

#cbp-blog-posts .post-meta-row .post-date,
#cbp-blog-posts .post-meta-row .post-author {
	color: #555;
	font-size: 13px;
}

/* dot separator between date and author */
#cbp-blog-posts .post-meta-row .post-author::before {
	content: '·';
	margin-right: 8px;
	color: #bbb;
}

/* ---- Excerpt ---- */
#cbp-blog-posts .post-excerpt {
	flex: 1;
	display: flex;
	flex-direction: column;
	font-size: 15px;
	line-height: 1.8;
	color: #222;
}

#cbp-blog-posts .post-excerpt p {
	margin: 0 0 6px;
}

/* ---- Continue Reading button ---- */
#cbp-blog-posts .post-excerpt > a {
	display: inline-block;
	margin-top: auto;         /* pushes button to bottom of every card */
	padding: 10px 20px;
	align-self: flex-start;
	background: #a81010;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	border-radius: 4px;
	letter-spacing: 0.02em;
	transition: background 0.2s ease, transform 0.15s ease;
}

#cbp-blog-posts .post-excerpt > a:hover {
	background: #7a0c0c;
	color: #fff;
	transform: translateY(-1px);
}

/* ---- Hide <hr> — cards handle visual separation ---- */
#cbp-blog-posts hr {
	display: none;
}

/* ---- Pagination ---- */
#cbp-blog-posts .custom-pagination {
	grid-column: 1 / -1;
	margin-top: 40px;
	padding: 36px 0 8px;
	border-top: 2px solid #f0f0f0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	font-family: 'Roboto', sans-serif;
}

/* Number / page buttons */
#cbp-blog-posts .custom-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 50px;
	height: 50px;
	padding: 0 18px;
	border: 2px solid #ddd;
	border-radius: 6px;
	color: #222;
	text-decoration: none;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	background: #fff;
	transition: background 0.2s ease, color 0.2s ease,
	            border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Hover: red outline */
#cbp-blog-posts .custom-pagination .page-numbers:hover {
	background: #f5e8e8;
	border-color: #a81010;
	color: #a81010;
}

/* Current / active page */
#cbp-blog-posts .custom-pagination .page-numbers.current {
	background: #a81010;
	border-color: #a81010;
	color: #fff;
	box-shadow: 0 4px 14px rgba(168, 16, 16, 0.35);
}

/* Dots (…) */
#cbp-blog-posts .custom-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	color: #aaa;
	cursor: default;
	font-size: 22px;
	letter-spacing: 2px;
	min-width: auto;
	padding: 0 8px;
}

/* Prev / Next arrow links */
#cbp-blog-posts .custom-pagination .prev.page-numbers,
#cbp-blog-posts .custom-pagination .next.page-numbers {
	min-width: auto;
	padding: 0 22px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: #111;
	border-color: #111;
	color: #fff;
	border-radius: 6px;
}

#cbp-blog-posts .custom-pagination .prev.page-numbers:hover,
#cbp-blog-posts .custom-pagination .next.page-numbers:hover {
	background: #a81010;
	border-color: #a81010;
	color: #fff;
	box-shadow: 0 4px 14px rgba(168, 16, 16, 0.30);
}

.custom-pagination { font-size: 18px; }
a.page-numbers { background: #a81010; display: inline-block; padding: 4px 12px; border-radius: 5px; color: #fff; }
span.page-numbers.current { background: #ffe1e1; display: inline-block; padding: 4px 12px; border-radius: 5px; color: #222; }

/* ---- No posts fallback ---- */
#cbp-blog-posts > p {
	color: #666;
	font-style: italic;
}

/* ---- Responsive: single column below 700 px ---- */
@media ( max-width: 700px ) {
	#cbp-blog-posts {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	#cbp-blog-posts .custom-post {
		padding: 22px 18px 20px;
	}
}

/* ================================================================
   Single Post — .ttc-single-post
   Fonts: Merriweather (titles) + Roboto (body/meta).
   Content width: overrides TwentyTwenty's .thin / .medium caps.
   ================================================================ */

/* ---- Widen content: override parent theme width classes ---- */
.ttc-single-post .post-inner.thin,
.ttc-single-post .post-inner {
	max-width: 100%;
}

.ttc-single-post .entry-header-inner.section-inner {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.ttc-single-post .featured-media-inner.section-inner {
	max-width: 100%;
}

/*
 * TwentyTwenty parent theme constrains every direct child of .entry-content
 * with max-width: 58rem via a long :not() selector chain. Override it here
 * with the same specificity + the .ttc-single-post ancestor so the rule wins.
 */
.ttc-single-post .entry-content > *:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright):not(.is-style-wide) {
	max-width: 100%;
	width: 100%;
}

/* ---- Post header / title area ---- */
.ttc-single-post .entry-header {
	text-align: left;
	padding: 40px 0 24px;
	border-bottom: 2px solid #f0f0f0;
	margin-bottom: 36px;
}

.ttc-single-post .entry-title {
	font-family: 'Merriweather', Georgia, serif;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.3;
	color: #111;
	margin: 12px 0 20px;
}

/* ---- Category badges ---- */
.ttc-single-post .entry-categories-inner a {
	display: inline-block;
	font-family: 'Roboto', sans-serif;
	background: #f5e8e8;
	color: #a81010;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 4px 12px;
	border-radius: 20px;
	text-decoration: none;
	margin-right: 4px;
}

.ttc-single-post .entry-categories-inner a:hover {
	background: #a81010;
	color: #fff;
}

/* ---- Post meta (date, author) ---- */
.ttc-single-post .post-meta {
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	color: #555;
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
}

.ttc-single-post .post-meta li::before {
	display: none;
}

.ttc-single-post .post-meta a {
	color: #a81010;
	text-decoration: none;
}

.ttc-single-post .post-meta a:hover {
	text-decoration: underline;
}

/* ---- Featured image ---- */
.ttc-single-post .featured-media {
	margin-bottom: 40px;
}

.ttc-single-post .featured-media img {
	width: 100%;
	height: auto;
	border-radius: 6px;
	display: block;
}

/* ---- Body content ---- */
.ttc-single-post .entry-content {
	font-family: 'Roboto', sans-serif;
	font-size: 17px;
	line-height: 1.85;
	color: #222;
}

.ttc-single-post .entry-content p {
	margin-bottom: 22px;
}

.ttc-single-post .entry-content h2,
.ttc-single-post .entry-content h3,
.ttc-single-post .entry-content h4,
.ttc-single-post .entry-content h5 {
	font-family: 'Merriweather', Georgia, serif;
	color: #111;
	line-height: 1.35;
	margin: 40px 0 14px;
}

.ttc-single-post .entry-content h2 { font-size: 28px; }
.ttc-single-post .entry-content h3 { font-size: 23px; }
.ttc-single-post .entry-content h4 { font-size: 20px; }
.ttc-single-post .entry-content h5 { font-size: 17px; font-weight: 700; }

.ttc-single-post .entry-content a {
	color: #a81010;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.ttc-single-post .entry-content a:hover {
	color: #7a0c0c;
}

/* ---- Blockquote ---- */
.ttc-single-post .entry-content blockquote {
	border-left: 4px solid #a81010;
	margin: 32px 0;
	padding: 16px 24px;
	background: #fdf6f6;
	font-style: italic;
	color: #444;
	border-radius: 0 4px 4px 0;
}

.ttc-single-post .entry-content blockquote p:last-child {
	margin-bottom: 0;
}

/* ---- Code blocks ---- */
.ttc-single-post .entry-content pre,
.ttc-single-post .entry-content code {
	font-size: 15px;
	background: #f5f5f5;
	border-radius: 4px;
}

.ttc-single-post .entry-content pre {
	padding: 20px 24px;
	overflow-x: auto;
}

/* ---- Images in content ---- */
.ttc-single-post .entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

/* ---- Tags ---- */
.ttc-single-post .post-tags {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid #eee;
}

.ttc-single-post .post-tags a {
	display: inline-block;
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	color: #444;
	border: 1px solid #ddd;
	padding: 4px 12px;
	border-radius: 4px;
	text-decoration: none;
	margin: 0 4px 6px 0;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.ttc-single-post .post-tags a:hover {
	background: #a81010;
	border-color: #a81010;
	color: #fff;
}

/* ---- Author bio ---- */
.ttc-single-post .author-bio {
	margin-top: 40px;
	padding: 28px;
	background: #fafafa;
	border: 1px solid #eee;
	border-left: 4px solid #a81010;
	border-radius: 0 6px 6px 0;
}

.ttc-single-post .author-bio .author-title {
	font-family: 'Merriweather', Georgia, serif;
	font-size: 18px;
	color: #111;
	margin: 0 0 10px;
}

.ttc-single-post .author-bio .author-description {
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	line-height: 1.7;
	color: #444;
}

.ttc-single-post .author-bio .author-description p:last-child {
	margin-bottom: 0;
}

/* ---- Post navigation (prev / next) ---- */
.post-navigation {
	font-family: 'Roboto', sans-serif;
	margin-top: 60px;
	padding-top: 0;
	border-top: none;
}

/* "Continue Reading" label above the cards */
.post-navigation::before {
	content: 'Continue Reading';
	display: block;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #999;
	margin-bottom: 14px;
}

.post-navigation .nav-links {
	display: flex;
	gap: 20px;
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
	flex: 1;
	min-width: 0;
}

/* Each nav item is a card */
.post-navigation a {
	display: block;
	height: 100%;
	padding: 22px 24px;
	border: 1px solid #e0e0e0;
	border-top: 3px solid #e0e0e0;
	border-radius: 6px;
	text-decoration: none;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	transition: border-top-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.post-navigation a:hover {
	border-top-color: #a81010;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
	transform: translateY(-2px);
}

/* Direction label */
.post-navigation .nav-subtitle {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: #a81010;
	margin-bottom: 10px;
}

/* ← arrow before "Previous" */
.post-navigation .nav-previous .nav-subtitle::before {
	content: '←';
	font-size: 15px;
	line-height: 1;
}

/* → arrow after "Next" */
.post-navigation .nav-next .nav-subtitle::after {
	content: '→';
	font-size: 15px;
	line-height: 1;
}

/* Right-align the Next card */
.post-navigation .nav-next {
	text-align: right;
}

.post-navigation .nav-next .nav-subtitle {
	justify-content: flex-end;
}

/* Post title */
.post-navigation .nav-title {
	display: block;
	font-family: 'Merriweather', Georgia, serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.45;
	color: #111;
}

.post-navigation a:hover .nav-title {
	color: #a81010;
}

/* ---- Responsive: stack on mobile ---- */
@media ( max-width: 640px ) {
	.post-navigation .nav-links {
		flex-direction: column;
		gap: 14px;
	}

	.post-navigation .nav-next {
		text-align: left;
	}

	.post-navigation .nav-next .nav-subtitle {
		justify-content: flex-start;
	}
}

/* ---- Responsive ---- */
@media ( max-width: 700px ) {
	.ttc-single-post .entry-title {
		font-size: 26px;
	}

	.ttc-single-post .entry-content {
		font-size: 16px;
	}

	.ttc-single-post .entry-content h2 { font-size: 22px; }
	.ttc-single-post .entry-content h3 { font-size: 19px; }
}