/**
 * Post Base Styles
 * Base styles for post list and single post pages
 *
 * @package Errand
 */

/* ==========================================================================
   CSS Variables
   ========================================================================== */

:root {
	--post-primary-color: #2563eb;
	--post-primary-hover: #1d4ed8;
	--post-secondary-color: #64748b;
	--post-secondary-hover: #475569;
	
	--post-accent-color: #10b981;
	--post-accent-hover: #059669;
	--post-warning-color: #f59e0b;
	--post-error-color: #ef4444;
	
	--post-bg-primary: #ffffff;
	--post-bg-secondary: #f8fafc;
	--post-bg-tertiary: #f1f5f9;
	
	--post-text-primary: #1e293b;
	--post-text-secondary: #64748b;
	--post-text-tertiary: #94a3b8;
	
	--post-border-color: #e2e8f0;
	--post-border-hover: #cbd5e1;
	
	--post-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 8%);
	--post-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 8%), 0 2px 4px -1px rgb(0 0 0 / 6%);
	--post-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 8%);
	
	--post-border-radius: 8px;
	--post-border-radius-lg: 12px;
	--post-border-radius-full: 50px;
	
	--post-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--post-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==========================================================================
   Breadcrumb Navigation
   ========================================================================== */

.post-list-page .breadcrumb,
.single-post-page .breadcrumb {
	display: flex;
	align-items: center;
	font-size: 0.875rem;
	margin-bottom: 2rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--post-border-color);
}

.post-list-page .breadcrumb a,
.single-post-page .breadcrumb a {
	color: var(--post-text-secondary);
	text-decoration: none;
	transition: var(--post-transition-fast);
}

.post-list-page .breadcrumb a:hover,
.single-post-page .breadcrumb a:hover {
	color: var(--post-primary-color);
	text-decoration: underline;
}

.post-list-page .breadcrumb .separator,
.single-post-page .breadcrumb .separator {
	margin: 0 0.5rem;
	color: var(--post-text-tertiary);
}

.post-list-page .breadcrumb .current,
.single-post-page .breadcrumb .current {
	color: var(--post-text-primary);
	font-weight: 500;
}

/* ==========================================================================
   Common Styles
   ========================================================================== */

.post-list-page,
.single-post-page {
	background-color: var(--post-bg-secondary);
	padding: 2rem 0;
}

.post-list-page .container,
.single-post-page .container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media screen and (max-width: 782px) {
	.post-list-page,
	.single-post-page {
		padding: 1rem 0;
	}
	
	.post-list-page .container,
	.single-post-page .container {
		padding: 0 0.75rem;
	}
	
	.post-list-page .breadcrumb,
	.single-post-page .breadcrumb {
		font-size: 0.75rem;
		margin-bottom: 1.5rem;
		padding: 0.75rem 0;
	}
}