/**
 * Dynamika Rozwoju — custom styles.
 *
 * Design tokens from brand/system.md.
 * Uses CSS custom properties for consistency with theme.json palette.
 */

/* ==========================================================================
   1. Custom Properties
   ========================================================================== */

:root {
	/* Accent */
	--drls-accent: #A34430;
	--drls-accent-hover: #8F3726;
	--drls-accent-light: #F4E8E4;

	/* Neutral */
	--drls-bg-primary: #FAFAF7;
	--drls-bg-secondary: #F0F0EC;
	--drls-text-primary: #0F0F0F;
	--drls-text-secondary: #6B6B6B;
	--drls-text-muted: #999999;
	--drls-border: #E0E0DC;
	--drls-bg-dark: #0F0F0F;
	--drls-text-on-dark: #E8E8E5;

	/* Semantic */
	--drls-success: #2D7A4F;
	--drls-error: #C43D3D;
	--drls-warning: #B8860B;

	/* Typography */
	--drls-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--drls-font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

	/* Spacing */
	--drls-space-1: 4px;
	--drls-space-2: 8px;
	--drls-space-3: 12px;
	--drls-space-4: 16px;
	--drls-space-6: 24px;
	--drls-space-8: 32px;
	--drls-space-12: 48px;
	--drls-space-16: 64px;
	--drls-space-24: 96px;

	/* Layout */
	--drls-content-max: 720px;
	--drls-content-wide: 1120px;
	--drls-content-full: 1280px;
	--drls-radius-sm: 6px;
	--drls-radius-md: 12px;
	--drls-shadow-card: 0 2px 20px rgba(0, 0, 0, 0.06);
}

/* ==========================================================================
   2. Base overrides
   ========================================================================== */

.site-main-header-wrap .site-container {
	max-width: 1200px;
}

body {
	font-family: var(--drls-font-body);
	background-color: var(--drls-bg-primary);
	color: var(--drls-text-primary);
}

/* ==========================================================================
   3. Component: Mono label (tagline, section markers)
   ========================================================================== */

.drls-mono-label {
	font-family: var(--drls-font-mono);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--drls-accent);
}

/* ==========================================================================
   4. Component: Stat number
   ========================================================================== */

.drls-stat {
	text-align: center;
}

.drls-stat-number {
	font-family: var(--drls-font-mono);
	font-size: 22px;
	font-weight: 500;
	color: var(--drls-accent);
	line-height: 1.2;
}

.drls-stat-label {
	font-family: var(--drls-font-body);
	font-size: 11px;
	color: var(--drls-text-muted);
	margin-top: var(--drls-space-1);
}

/* ==========================================================================
   5. Component: Card
   ========================================================================== */

.drls-card {
	background: var(--drls-bg-primary);
	border: 1px solid var(--drls-border);
	border-radius: var(--drls-radius-md);
	padding: 28px;
	box-shadow: var(--drls-shadow-card);
}

/* ==========================================================================
   6. Component: CTA Button
   ========================================================================== */

.drls-btn-primary {
	display: inline-block;
	background: var(--drls-accent);
	color: #FFFFFF;
	font-family: var(--drls-font-body);
	font-size: 14px;
	font-weight: 500;
	padding: 12px 28px;
	border: none;
	border-radius: var(--drls-radius-sm);
	cursor: pointer;
	text-decoration: none;
	transition: background 0.2s ease;
}

.drls-btn-primary:hover {
	background: var(--drls-accent-hover);
	color: #FFFFFF;
	text-decoration: none;
}

.drls-btn-secondary {
	display: inline-block;
	background: transparent;
	color: var(--drls-accent);
	font-family: var(--drls-font-body);
	font-size: 14px;
	font-weight: 500;
	padding: 12px 28px;
	border: 1px solid var(--drls-accent);
	border-radius: var(--drls-radius-sm);
	cursor: pointer;
	text-decoration: none;
	transition: all 0.2s ease;
}

.drls-btn-secondary:hover {
	background: var(--drls-accent);
	color: #FFFFFF;
	text-decoration: none;
}

/* ==========================================================================
   7. Section: Hero
   ========================================================================== */

.drls-hero {
	padding: var(--drls-space-24) 0;
	max-width: var(--drls-content-wide);
	margin: 0 auto;
}

.drls-hero h1 {
	font-size: 2.5rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--drls-text-primary);
}

.drls-hero .drls-subtitle {
	font-size: 16px;
	color: var(--drls-text-secondary);
	margin-top: var(--drls-space-4);
	margin-bottom: var(--drls-space-6);
	max-width: 600px;
	line-height: 1.6;
}

/* ==========================================================================
   8. Section: Stats row
   ========================================================================== */

.drls-stats-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: var(--drls-space-6);
	padding: var(--drls-space-8) 0;
	border-top: 1px solid var(--drls-border);
	border-bottom: 1px solid var(--drls-border);
	max-width: var(--drls-content-wide);
	margin: var(--drls-space-12) auto;
}

/* ==========================================================================
   9. Section: Alternating background
   ========================================================================== */

.drls-section-alt {
	background-color: var(--drls-bg-secondary);
	padding: var(--drls-space-16) 0;
}

/* ==========================================================================
   10. Dark section (optional hero variant)
   ========================================================================== */

.drls-section-dark {
	background-color: var(--drls-bg-dark);
	color: var(--drls-text-on-dark);
	padding: var(--drls-space-16) 0;
}

.drls-section-dark h1,
.drls-section-dark h2,
.drls-section-dark h3 {
	color: #FFFFFF;
}

.drls-section-dark .drls-mono-label {
	color: #d4795e; /* lighter terracotta for dark bg */
}

.drls-section-dark .drls-stat-number {
	color: #d4795e;
}

/* ==========================================================================
   11. Responsive
   ========================================================================== */

@media (max-width: 767px) {
	.drls-hero h1 {
		font-size: 1.75rem;
	}

	.drls-stat-number {
		font-size: 18px;
	}

	.drls-stats-row {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--drls-space-4);
	}
}

/* ==========================================================================
   12. Footer
   ========================================================================== */

.site-footer-wrap a,
.site-footer-wrap a:visited {
	color: #E0E0DC;
}

.site-footer-wrap a:hover,
.site-footer-wrap a:focus {
	color: #FFFFFF;
}

/* ==========================================================================
   13. Palette color classes (Kadence block recovery fix)
   Kadence generates .has-theme-palette-N-color but block recovery
   outputs .has-palette-N-color — bridge the gap.
   ========================================================================== */

.has-palette-1-color {
	color: var(--global-palette1, #A34430);
}

.has-palette-2-color {
	color: var(--global-palette2, #8F3726);
}

.has-palette-3-color {
	color: var(--global-palette3, #0F0F0F);
}

.has-palette-4-color {
	color: var(--global-palette4, #6B6B6B);
}

.has-palette-5-color {
	color: var(--global-palette5, #F4E8E4);
}

.has-palette-7-color {
	color: var(--global-palette7, #FAFAF7);
}

.has-palette-9-color {
	color: var(--global-palette9, #FFFFFF);
}

.has-palette-1-background-color {
	background-color: var(--global-palette1, #A34430);
}

.has-palette-9-background-color {
	background-color: var(--global-palette9, #FFFFFF);
}

.wp-block-button.is-style-outline > .wp-block-button__link.has-palette-1-color,
.wp-block-button.is-style-outline .wp-block-button__link.has-palette-1-color {
	color: var(--global-palette1, #A34430);
	border-color: var(--global-palette1, #A34430);
}

.wp-block-button.is-style-outline > .wp-block-button__link.has-palette-9-color,
.wp-block-button.is-style-outline .wp-block-button__link.has-palette-9-color {
	color: var(--global-palette9, #FFFFFF);
	border-color: var(--global-palette9, #FFFFFF);
}