/**
 * Content & Typography Styles
 *
 * Contains:
 * - Main content layout
 * - Page and post typography
 * - Rich text content styles
 * - Article and page templates
 *
 * @package RWPP_Theme
 * @since 1.0.0
 */

/* ==========================================
   MAIN CONTENT LAYOUT
   ========================================== */

#main-content {
	padding-top: 120px;
	padding-bottom: 4rem;
	min-height: calc(100vh - 120px);
}

/* Hero section - appears after navigation */
#hero {
	margin-top: 72px;
}

/* Container Modifiers */
.container-narrow {
	max-width: 900px;
}

.container-blog {
	max-width: 1200px;
}

/* ==========================================
   PAGE CONTENT
   ========================================== */

.page-content,
.post-content {
	padding: 0 0 4rem 0;
}

/* Page Header */
.page-header {
	margin-bottom: 3rem;
	text-align: center;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--gray-200);
}

.page-title {
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	font-weight: 700;
	color: var(--gray-900);
	margin-bottom: 0.5rem;
	letter-spacing: -0.02em;
}

.page-excerpt {
	font-size: 1.25rem;
	color: var(--gray-600);
	margin-top: 1rem;
	line-height: 1.6;
	font-weight: 400;
}

.page-meta {
	font-size: 0.875rem;
	color: var(--gray-600);
	margin-top: 1rem;
	font-style: italic;
}

/* ==========================================
   POST ENTRIES
   ========================================== */

.posts-grid {
	display: grid;
	gap: 2rem;
}

.post-item {
	background: var(--white);
	border: 1px solid var(--gray-200);
	border-radius: 16px;
	padding: 2rem;
	transition: all 0.3s ease;
}

.post-item:hover {
	box-shadow: var(--shadow-lg);
	border-color: var(--purple-light);
	transform: translateY(-2px);
}

.entry-header {
	margin-bottom: 1.5rem;
}

.entry-title {
	font-size: 1.75rem;
	margin-bottom: 0.75rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.entry-title a {
	color: var(--gray-900);
	text-decoration: none;
	transition: color 0.2s ease;
}

.entry-title a:hover {
	color: var(--purple-primary);
}

.entry-meta {
	color: var(--gray-600);
	font-size: 0.875rem;
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	font-family: var(--font-body);
}

.entry-meta a {
	color: var(--gray-600);
	text-decoration: none;
	transition: color 0.2s ease;
}

.entry-meta a:hover {
	color: var(--purple-primary);
}

/* Post Thumbnail */
.post-thumbnail {
	margin-bottom: 1.5rem;
	border-radius: 12px;
	overflow: hidden;
}

.post-thumbnail img {
	width: 100%;
	height: auto;
	display: block;
	transition: transform 0.3s ease;
}

.post-item:hover .post-thumbnail img {
	transform: scale(1.03);
}

.page-thumbnail {
	margin-bottom: 2rem;
	border-radius: 12px;
	overflow: hidden;
}

.page-thumbnail img {
	width: 100%;
	height: auto;
	display: block;
}

/* Entry Content */
.entry-content {
	color: var(--gray-700);
	line-height: 1.75;
	margin-bottom: 1.5rem;
	font-size: 1.0625rem;
}

.entry-footer {
	padding-top: 1rem;
	border-top: 1px solid var(--gray-200);
}

.read-more {
	color: var(--purple-primary);
	text-decoration: none;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-display);
	transition: all 0.2s ease;
}

.read-more:hover {
	gap: 0.75rem;
	color: var(--purple-dark);
}

/* ==========================================
   RICH TEXT TYPOGRAPHY
   ========================================== */

.page-content,
.entry-content {
	font-size: 1.125rem;
	line-height: 1.8;
	color: var(--gray-700);
}

/* Headings within content */
.page-content h1,
.entry-content h1 {
	font-size: 2.5rem;
	margin: 2.5rem 0 1.25rem;
	color: var(--gray-900);
	letter-spacing: -0.02em;
}

.page-content h2,
.entry-content h2 {
	font-size: 2rem;
	margin: 2.25rem 0 1rem;
	color: var(--gray-900);
	letter-spacing: -0.01em;
}

.page-content h3,
.entry-content h3 {
	font-size: 1.5rem;
	margin: 2rem 0 0.875rem;
	color: var(--gray-900);
}

.page-content h4,
.entry-content h4 {
	font-size: 1.25rem;
	margin: 1.75rem 0 0.75rem;
	color: var(--gray-900);
}

.page-content h5,
.entry-content h5 {
	font-size: 1.125rem;
	margin: 1.5rem 0 0.75rem;
	color: var(--gray-900);
}

.page-content h6,
.entry-content h6 {
	font-size: 1rem;
	margin: 1.5rem 0 0.75rem;
	color: var(--gray-700);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* First heading has no top margin */
.page-content > h1:first-child,
.page-content > h2:first-child,
.page-content > h3:first-child,
.entry-content > h1:first-child,
.entry-content > h2:first-child,
.entry-content > h3:first-child {
	margin-top: 0;
}

/* Paragraphs */
.page-content p,
.entry-content p {
	margin-bottom: 1.5rem;
}

.page-content p:last-child,
.entry-content p:last-child {
	margin-bottom: 0;
}

/* Lead paragraph (first paragraph after heading) */
.page-content > p:first-of-type,
.entry-content > p:first-of-type {
	font-size: 1.25rem;
	line-height: 1.7;
	color: var(--gray-600);
}

/* Links */
.page-content a,
.entry-content a {
	color: var(--purple-primary);
	text-decoration: underline;
	text-decoration-color: var(--purple-light);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: all 0.2s ease;
}

.page-content a:hover,
.entry-content a:hover {
	color: var(--purple-dark);
	text-decoration-color: var(--purple-primary);
}

/* Lists */
.page-content ul,
.page-content ol,
.entry-content ul,
.entry-content ol {
	margin: 1.5rem 0;
	padding-left: 2rem;
}

.page-content ul li,
.page-content ol li,
.entry-content ul li,
.entry-content ol li {
	margin-bottom: 0.75rem;
	line-height: 1.8;
}

.page-content ul li:last-child,
.page-content ol li:last-child,
.entry-content ul li:last-child,
.entry-content ol li:last-child {
	margin-bottom: 0;
}

/* Styled list items */
.page-content ul,
.entry-content ul {
	list-style: none;
}

.page-content ul li,
.entry-content ul li {
	position: relative;
	padding-left: 0.5rem;
}

.page-content ul li::before,
.entry-content ul li::before {
	content: "→";
	position: absolute;
	left: -1.5rem;
	color: var(--purple-primary);
	font-weight: 600;
}

/* Ordered lists */
.page-content ol,
.entry-content ol {
	list-style: decimal;
	list-style-position: outside;
}

.page-content ol li::marker,
.entry-content ol li::marker {
	color: var(--purple-primary);
	font-weight: 600;
	font-family: var(--font-display);
}

/* Nested lists */
.page-content ul ul,
.page-content ol ol,
.page-content ul ol,
.page-content ol ul,
.entry-content ul ul,
.entry-content ol ol,
.entry-content ul ol,
.entry-content ol ul {
	margin: 0.75rem 0;
}

/* Blockquotes */
.page-content blockquote,
.entry-content blockquote {
	margin: 2rem 0;
	padding: 1.5rem 2rem;
	background: var(--gray-50);
	border-left: 4px solid var(--purple-primary);
	border-radius: 8px;
	font-style: italic;
	font-size: 1.125rem;
	color: var(--gray-700);
}

.page-content blockquote p:last-child,
.entry-content blockquote p:last-child {
	margin-bottom: 0;
}

.page-content blockquote cite,
.entry-content blockquote cite {
	display: block;
	margin-top: 1rem;
	font-size: 0.9375rem;
	font-style: normal;
	color: var(--gray-600);
	font-weight: 600;
}

.page-content blockquote cite::before,
.entry-content blockquote cite::before {
	content: "— ";
}

/* Code */
.page-content code,
.entry-content code {
	background: var(--gray-100);
	padding: 0.2rem 0.5rem;
	border-radius: 4px;
	font-size: 0.9em;
	font-family: "SF Mono", Monaco, Consolas, monospace;
	color: var(--purple-dark);
}

.page-content pre,
.entry-content pre {
	background: var(--gray-900);
	color: var(--gray-100);
	padding: 1.5rem;
	border-radius: 8px;
	overflow-x: auto;
	margin: 2rem 0;
	line-height: 1.6;
}

.page-content pre code,
.entry-content pre code {
	background: none;
	padding: 0;
	color: inherit;
	font-size: 0.875rem;
}

/* Horizontal Rule */
.page-content hr,
.entry-content hr {
	border: none;
	height: 1px;
	background: var(--gray-200);
	margin: 3rem 0;
}

/* Tables */
.page-content table,
.entry-content table {
	width: 100%;
	margin: 2rem 0;
	border-collapse: collapse;
	font-size: 1rem;
}

.page-content table th,
.entry-content table th {
	background: var(--gray-100);
	padding: 0.875rem 1rem;
	text-align: left;
	font-weight: 600;
	border-bottom: 2px solid var(--gray-300);
	color: var(--gray-900);
}

.page-content table td,
.entry-content table td {
	padding: 0.875rem 1rem;
	border-bottom: 1px solid var(--gray-200);
}

.page-content table tr:last-child td,
.entry-content table tr:last-child td {
	border-bottom: none;
}

.page-content table tr:hover,
.entry-content table tr:hover {
	background: var(--gray-50);
}

/* Images */
.page-content img,
.entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	margin: 2rem 0;
}

.page-content figure,
.entry-content figure {
	margin: 2rem 0;
}

.page-content figcaption,
.entry-content figcaption {
	margin-top: 0.75rem;
	font-size: 0.9375rem;
	color: var(--gray-600);
	text-align: center;
	font-style: italic;
}

/* WordPress Alignment Classes */
.alignleft {
	float: left;
	margin: 0.5rem 2rem 1rem 0;
}

.alignright {
	float: right;
	margin: 0.5rem 0 1rem 2rem;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================
   PAGINATION
   ========================================== */

.pagination {
	margin-top: 4rem;
	text-align: center;
}

.page-links {
	margin-top: 2rem;
	padding-top: 2rem;
	border-top: 1px solid var(--gray-200);
	font-family: var(--font-display);
}

.page-links a {
	display: inline-block;
	padding: 0.5rem 1rem;
	margin: 0 0.25rem;
	background: var(--gray-100);
	color: var(--gray-700);
	text-decoration: none;
	border-radius: 8px;
	transition: all 0.2s ease;
}

.page-links a:hover {
	background: var(--purple-primary);
	color: var(--white);
}

/* ==========================================
   NO RESULTS / 404
   ========================================== */

.no-results {
	text-align: center;
	padding: 6rem 2rem;
}

.no-results h1 {
	font-size: 2rem;
	margin-bottom: 1rem;
	color: var(--gray-900);
}

.no-results p {
	color: var(--gray-600);
	font-size: 1.125rem;
	margin-bottom: 2rem;
	line-height: 1.6;
}

/* ==========================================
   COMMENTS
   ========================================== */

.comments-section {
	margin-top: 4rem;
	padding-top: 3rem;
	border-top: 1px solid var(--gray-200);
}