/**
 * CRPF Plugin Styles
 * Standalone CSS for all CRPF shortcodes and widgets
 */

/* Design Tokens */
:root {
	--crpf-terracotta: #c9622e;
	--crpf-terracotta-light: #e67e2f;
	--crpf-terracotta-dark: #9a4c23;
	--crpf-text-primary: #2c2c2c;
	--crpf-text-secondary: #666666;
	--crpf-text-light: #999999;
	--crpf-bg-light: #f9f9f9;
	--crpf-bg-lighter: #fafafa;
	--crpf-border-color: #e0e0e0;
	--crpf-font-mono: 'JetBrains Mono', 'Courier New', monospace;
	--crpf-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

/* Reset and Base */
.crpf-stat-card,
.crpf-stat-grid,
.crpf-stat-grid--1col,
.crpf-stat-grid--2col,
.crpf-stat-grid--3col,
.crpf-stat-grid--4col,
.crpf-debt-counter-wrapper,
.crpf-debt-counter,
.crpf-policy-grid,
.crpf-policy-item,
.crpf-callout,
.crpf-data-bar,
.crpf-newsletter,
.crpf-widget-key-figures {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/**
 * Stat Cards
 */
.crpf-stat-card {
	text-align: center;
	padding: 40px 20px;
	background-color: var(--crpf-bg-light);
	border: 1px solid var(--crpf-border-color);
	border-radius: 4px;
	transition: all 0.3s ease;
}

.crpf-stat-card:hover {
	border-color: var(--crpf-terracotta);
	background-color: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.crpf-stat-number {
	font-family: var(--crpf-font-mono);
	font-size: 48px;
	font-weight: 700;
	color: var(--crpf-terracotta);
	line-height: 1.2;
	margin-bottom: 12px;
	letter-spacing: -0.5px;
}

.crpf-stat-label {
	font-family: var(--crpf-font-body);
	font-size: 14px;
	color: var(--crpf-text-secondary);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/**
 * Stat Grid
 */
.crpf-stat-grid {
	display: grid;
	gap: 20px;
	margin: 20px 0;
	width: 100%;
}

.crpf-stat-grid--1col {
	grid-template-columns: 1fr;
}

.crpf-stat-grid--2col {
	grid-template-columns: repeat(2, 1fr);
}

.crpf-stat-grid--3col {
	grid-template-columns: repeat(3, 1fr);
}

.crpf-stat-grid--4col {
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
	.crpf-stat-grid--4col,
	.crpf-stat-grid--3col {
		grid-template-columns: repeat(2, 1fr);
	}

	.crpf-stat-grid--2col {
		grid-template-columns: 1fr;
	}

	.crpf-stat-number {
		font-size: 36px;
	}
}

@media (max-width: 480px) {
	.crpf-stat-grid--4col,
	.crpf-stat-grid--3col,
	.crpf-stat-grid--2col {
		grid-template-columns: 1fr;
	}

	.crpf-stat-number {
		font-size: 28px;
	}

	.crpf-stat-label {
		font-size: 12px;
	}

	.crpf-stat-card {
		padding: 30px 15px;
	}
}

/**
 * Debt Counter
 */
.crpf-debt-counter-wrapper {
	text-align: center;
	padding: 40px 20px;
	background: linear-gradient(135deg, #f5f5f5 0%, #fafafa 100%);
	border: 2px solid var(--crpf-terracotta);
	border-radius: 8px;
	margin: 20px 0;
}

.crpf-debt-counter {
	font-family: var(--crpf-font-mono);
	font-size: 64px;
	font-weight: 700;
	color: var(--crpf-terracotta);
	line-height: 1.2;
	margin-bottom: 16px;
	letter-spacing: -1px;
	word-break: break-word;
}

.crpf-debt-counter-value {
	display: inline-block;
}

.crpf-debt-counter-label {
	font-family: var(--crpf-font-body);
	font-size: 16px;
	color: var(--crpf-text-secondary);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0;
}

@media (max-width: 768px) {
	.crpf-debt-counter {
		font-size: 48px;
	}

	.crpf-debt-counter-wrapper {
		padding: 30px 15px;
	}
}

@media (max-width: 480px) {
	.crpf-debt-counter {
		font-size: 32px;
	}

	.crpf-debt-counter-label {
		font-size: 14px;
	}

	.crpf-debt-counter-wrapper {
		padding: 20px 10px;
	}
}

/**
 * Policy Grid
 */
.crpf-policy-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
	margin: 20px 0;
	width: 100%;
}

.crpf-policy-item {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: #fff;
	border: 1px solid var(--crpf-border-color);
	border-radius: 4px;
	overflow: hidden;
	transition: all 0.3s ease;
	position: relative;
}

.crpf-policy-item:hover {
	border-color: var(--crpf-terracotta);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

.crpf-policy-item-image {
	width: 100%;
	height: 200px;
	overflow: hidden;
	background-color: var(--crpf-bg-light);
}

.crpf-policy-item-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.crpf-policy-item:hover .crpf-policy-item-image img {
	transform: scale(1.05);
}

.crpf-policy-item-content {
	flex: 1;
	padding: 24px;
	display: flex;
	flex-direction: column;
}

.crpf-policy-number {
	font-family: var(--crpf-font-mono);
	font-size: 12px;
	color: var(--crpf-text-light);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 8px;
	font-weight: 700;
}

.crpf-policy-title {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 12px 0;
	line-height: 1.4;
	color: var(--crpf-text-primary);
}

.crpf-policy-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s ease;
}

.crpf-policy-title a:hover {
	color: var(--crpf-terracotta);
}

.crpf-policy-savings {
	font-family: var(--crpf-font-mono);
	font-size: 20px;
	font-weight: 700;
	color: var(--crpf-terracotta);
	margin: 12px 0;
}

.crpf-policy-category {
	display: inline-block;
	background-color: var(--crpf-bg-light);
	color: var(--crpf-text-secondary);
	padding: 6px 12px;
	border-radius: 3px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-top: auto;
	margin-bottom: 12px;
	width: fit-content;
}

.crpf-policy-item--prune .crpf-policy-category {
	background-color: #ffe0d5;
	color: #8b3d1f;
}

.crpf-policy-item--grow .crpf-policy-category {
	background-color: #d5e8d5;
	color: #2d6a2d;
}

.crpf-policy-item--reform .crpf-policy-category {
	background-color: #d5dff1;
	color: #2d4a7a;
}

.crpf-policy-item--invest .crpf-policy-category {
	background-color: #f0e8d5;
	color: #8b7a2d;
}

.crpf-policy-link {
	display: inline-block;
	color: var(--crpf-terracotta);
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	transition: all 0.3s ease;
	margin-top: 12px;
}

.crpf-policy-link:hover {
	color: var(--crpf-terracotta-dark);
	text-decoration: underline;
}

@media (max-width: 768px) {
	.crpf-policy-grid {
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
		gap: 20px;
	}
}

@media (max-width: 480px) {
	.crpf-policy-grid {
		grid-template-columns: 1fr;
	}

	.crpf-policy-item-content {
		padding: 16px;
	}

	.crpf-policy-title {
		font-size: 16px;
	}
}

/**
 * Callout / Blockquote
 */
.crpf-callout {
	margin: 30px 0;
	padding: 0;
}

.crpf-callout-quote {
	border-left: 4px solid var(--crpf-terracotta);
	padding: 20px;
	padding-left: 24px;
	background-color: var(--crpf-bg-light);
	margin: 0;
	border-radius: 0 4px 4px 0;
}

.crpf-callout-quote p {
	font-size: 18px;
	line-height: 1.6;
	color: var(--crpf-text-primary);
	margin: 0 0 12px 0;
	font-weight: 500;
	font-style: italic;
}

.crpf-callout-quote p:last-child {
	margin-bottom: 0;
}

.crpf-callout-cite {
	font-size: 14px;
	color: var(--crpf-text-secondary);
	font-weight: 600;
	font-style: normal;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-top: 12px;
}

@media (max-width: 480px) {
	.crpf-callout-quote {
		padding: 16px;
		padding-left: 16px;
		border-left: 3px solid var(--crpf-terracotta);
	}

	.crpf-callout-quote p {
		font-size: 16px;
	}
}

/**
 * Data Bar
 */
.crpf-data-bar {
	margin: 20px 0;
	padding: 16px 0;
}

.crpf-data-bar-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--crpf-text-primary);
	margin-bottom: 8px;
}

.crpf-data-bar-container {
	width: 100%;
	height: 24px;
	background-color: #e8e8e8;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 8px;
	position: relative;
}

.crpf-data-bar-fill {
	height: 100%;
	background-color: var(--crpf-terracotta);
	transition: width 0.3s ease;
	border-radius: 12px;
}

.crpf-data-bar--terracotta .crpf-data-bar-fill {
	background-color: var(--crpf-terracotta);
}

.crpf-data-bar-value {
	font-family: var(--crpf-font-mono);
	font-size: 12px;
	color: var(--crpf-text-secondary);
	text-align: right;
}

/**
 * Newsletter Form
 */
.crpf-newsletter {
	background-color: var(--crpf-bg-light);
	border: 1px solid var(--crpf-border-color);
	border-radius: 4px;
	padding: 40px;
	margin: 30px 0;
	text-align: center;
}

.crpf-newsletter-content {
	margin-bottom: 30px;
}

.crpf-newsletter-heading {
	font-size: 24px;
	font-weight: 700;
	color: var(--crpf-text-primary);
	margin: 0 0 12px 0;
}

.crpf-newsletter-description {
	font-size: 16px;
	color: var(--crpf-text-secondary);
	margin: 0;
	line-height: 1.6;
}

.crpf-newsletter-form {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
}

.crpf-newsletter-form-group {
	display: flex;
	gap: 12px;
	width: 100%;
	max-width: 500px;
}

.crpf-newsletter-input {
	flex: 1;
	padding: 12px 16px;
	border: 1px solid var(--crpf-border-color);
	border-radius: 4px;
	font-size: 14px;
	font-family: var(--crpf-font-body);
	transition: border-color 0.3s ease;
	min-width: 200px;
}

.crpf-newsletter-input:focus {
	outline: none;
	border-color: var(--crpf-terracotta);
	box-shadow: 0 0 0 3px rgba(201, 98, 46, 0.1);
}

.crpf-newsletter-submit {
	padding: 12px 32px;
	background-color: var(--crpf-terracotta);
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	cursor: pointer;
	transition: all 0.3s ease;
	font-family: var(--crpf-font-body);
	white-space: nowrap;
}

.crpf-newsletter-submit:hover {
	background-color: var(--crpf-terracotta-dark);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(201, 98, 46, 0.3);
}

.crpf-newsletter-submit:active {
	transform: translateY(0);
}

@media (max-width: 768px) {
	.crpf-newsletter {
		padding: 30px;
	}

	.crpf-newsletter-form-group {
		flex-direction: column;
	}

	.crpf-newsletter-submit {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.crpf-newsletter {
		padding: 20px;
		margin: 20px 0;
	}

	.crpf-newsletter-heading {
		font-size: 20px;
	}

	.crpf-newsletter-input {
		font-size: 16px; /* Prevent zoom on iOS */
	}
}

/**
 * Widget Styles
 */
.crpf-widget-key-figures {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.crpf-widget-stat {
	text-align: center;
	padding: 20px;
	background-color: var(--crpf-bg-light);
	border-radius: 4px;
	border: 1px solid var(--crpf-border-color);
}

.crpf-widget-stat-number {
	font-family: var(--crpf-font-mono);
	font-size: 32px;
	font-weight: 700;
	color: var(--crpf-terracotta);
	margin-bottom: 8px;
	line-height: 1.2;
}

.crpf-widget-stat-label {
	font-size: 12px;
	color: var(--crpf-text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 600;
}

/**
 * Responsive Typography
 */
@media (max-width: 480px) {
	.crpf-widget-stat-number {
		font-size: 24px;
	}

	.crpf-widget-stat {
		padding: 16px;
	}
}

/**
 * Utility Classes
 */
.crpf-clearfix::after {
	content: '';
	display: table;
	clear: both;
}

/* Ensure compatibility with various WordPress themes */
.entry-content .crpf-stat-card,
.the-content .crpf-stat-card,
.post-content .crpf-stat-card {
	margin: 20px auto;
}

/* Prevent theme styles from overriding */
.crpf-policy-grid,
.crpf-stat-grid,
.crpf-debt-counter-wrapper,
.crpf-callout,
.crpf-data-bar,
.crpf-newsletter {
	font-family: inherit;
}

.crpf-policy-grid img,
.crpf-policy-item-image img {
	max-width: 100%;
	height: auto;
	display: block;
}