/**
 * Fluid Typography System
 * Maklern Theme
 * 
 * Viewport Range: 320px (20rem) to 1920px (120rem)
 * Uses CSS clamp() for automatic scaling between breakpoints
 * 
 */

:root {
	/* ===== FONT FAMILY ===== */
	--font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	/* ===== BASE FONT SIZES ===== */
	/* Body Text: 14px -> 16px -> 18px */
	--font-size-base: clamp(0.875rem, 0.875rem + 0.25 * ((100vw - 20rem) / 100), 1.125rem);
	
	/* Small Text: 12px -> 14px -> 16px */
	--font-size-sm: clamp(0.75rem, 0.75rem + 0.25 * ((100vw - 20rem) / 100), 1rem);
	
	/* Extra Small Text: 11px -> 13px -> 14px */
	--font-size-xs: clamp(0.6875rem, 0.6875rem + 0.1875 * ((100vw - 20rem) / 100), 0.875rem);
	
	/* Large Text: 16px -> 18px -> 20px */
	--font-size-lg: clamp(1rem, 1rem + 0.25 * ((100vw - 20rem) / 100), 1.25rem);
	
	/* Extra Large Text: 18px -> 20px -> 24px */
	--font-size-xl: clamp(1.125rem, 1.125rem + 0.375 * ((100vw - 20rem) / 100), 1.5rem);

	/* ===== HEADINGS SCALE ===== */
	/* H1: 40px -> 56px -> 80px */
	--font-size-h1: clamp(2rem, 2rem + 2.5 * ((100vw - 20rem) / 100), 5rem);
	
	/* H2: 32px -> 44px -> 64px */
	--font-size-h2: clamp(1.75rem, 1.75rem + 2 * ((100vw - 20rem) / 100), 4rem);
	
	/* H3: 24px -> 32px -> 40px */
	--font-size-h3: clamp(1.5rem, 1.5rem + 1 * ((100vw - 20rem) / 100), 2.5rem);
	
	/* H4: 20px -> 24px -> 32px */
	--font-size-h4: clamp(1.25rem, 1.25rem + 0.75 * ((100vw - 20rem) / 100), 2rem);
	
	/* H5: 18px -> 20px -> 24px */
	--font-size-h5: clamp(1.125rem, 1.125rem + 0.375 * ((100vw - 20rem) / 100), 1.5rem);
	
	/* H6: 16px -> 18px -> 20px */
	--font-size-h6: clamp(1rem, 1rem + 0.25 * ((100vw - 20rem) / 100), 1.25rem);

	/* ===== COMPONENT-SPECIFIC SIZES ===== */
	/* Navigation Menu: 14px -> 15px -> 17px */
	--font-size-nav: clamp(0.875rem, 0.875rem + 0.1875 * ((100vw - 20rem) / 100), 1.0625rem);
	
	/* CTA Buttons: 13px -> 16px -> 18px */
	--font-size-cta: clamp(0.8125rem, 0.8125rem + 0.3125 * ((100vw - 20rem) / 100), 1.125rem);
	
	/* Large CTA (Hero): 22px -> 28px -> 32px */
	--font-size-cta-large: clamp(1.375rem, 1.375rem + 0.625 * ((100vw - 20rem) / 100), 2rem);

	/* ===== LINE HEIGHTS ===== */
	/* Tight - for headings */
	--line-height-tight: 1.2;
	
	/* Snug - for subheadings */
	--line-height-snug: 1.3;
	
	/* Normal - for UI elements */
	--line-height-normal: 1.5;
	
	/* Relaxed - for body text */
	--line-height-relaxed: 1.7;
	
	/* Loose - for large body text */
	--line-height-loose: 1.8;

	/* ===== LETTER SPACING ===== */
	/* Tight - for large headings (responsive) */
	--letter-spacing-tight: 0;
	
	/* Normal - default */
	--letter-spacing-normal: 0;
	
	/* Wide - for small caps/labels */
	--letter-spacing-wide: 0.025em;
	
	/* Wider - for uppercase labels */
	--letter-spacing-wider: 0.05em;
}

/* ===== RESPONSIVE LETTER SPACING ===== */
/* Mobile devices: No negative letter spacing to prevent overlapping */
@media (min-width: 480px) {
	:root {
		--letter-spacing-tight: -0.05rem;
	}
}

/* Tablet devices: Slightly more negative letter spacing */
@media (min-width: 768px) {
	:root {
		--letter-spacing-tight: -0.1rem;
	}
}

/* Desktop devices: Full negative letter spacing for dramatic effect */
@media (min-width: 1024px) {
	:root {
		--letter-spacing-tight: -0.225rem;
	}
}

/* ===== GLOBAL TYPOGRAPHY STYLES ===== */
/* Higher specificity to override GeneratePress defaults */

/* Body Text */
body,
body.generatepress {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base) !important;
	line-height: var(--line-height-relaxed);
	letter-spacing: var(--letter-spacing-normal);
}

/* Headings - Higher specificity to override theme defaults */
h1, .h1 {
	font-family: var(--font-family-base);
	font-size: var(--font-size-h1) !important;
	line-height: var(--line-height-tight) !important;
	letter-spacing: var(--letter-spacing-tight);
	font-weight: 700;
	text-align: center;
}

h2, .h2 {
	font-family: var(--font-family-base);
	font-size: var(--font-size-h2) !important;
	line-height: var(--line-height-tight) !important;
	letter-spacing: var(--letter-spacing-tight);
	font-weight: 600;
	text-align: center;
	color: white;
}

h3, .h3 {
	font-family: var(--font-family-base);
	font-size: var(--font-size-h3) !important;
	line-height: var(--line-height-snug) !important;
	letter-spacing: var(--letter-spacing-tight);
	font-weight: 600;
	text-align: center;
	color: white;
}

h4, .h4 {
	font-family: var(--font-family-base);
	font-size: var(--font-size-h4) !important;
	line-height: var(--line-height-snug) !important;
	font-weight: 600;
	text-align: center;
	color: white;
}

h5, .h5{
	font-family: var(--font-family-base);
	font-size: var(--font-size-h5) !important;
	line-height: var(--line-height-normal) !important;
	font-weight: 500;
	text-align: center;
}

h6, .h6 {
	font-family: var(--font-family-base);
	font-size: var(--font-size-h6) !important;
	line-height: var(--line-height-normal) !important;
	font-weight: 500;
	text-align: center;
}

/* Paragraphs */
/* p,
body p,
.site-content p {
	font-family: var(--font-family-base);
	font-size: var(--font-size-base);
	line-height: var(--line-height-relaxed);
} */

/* Small text */
small, .text-sm {
	font-family: var(--font-family-base);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-normal);
}

.text-xs {
	font-family: var(--font-family-base);
	font-size: var(--font-size-xs);
	line-height: var(--line-height-normal);
}

/* Large text */
.text-lg {
	font-family: var(--font-family-base);
	font-size: var(--font-size-lg);
	line-height: var(--line-height-relaxed);
}

.text-xl {
	font-family: var(--font-family-base);
	font-size: var(--font-size-xl);
	line-height: var(--line-height-relaxed);
}

/* Lead text (intro paragraphs) */
.lead {
	font-family: var(--font-family-base);
	font-size: var(--font-size-lg);
	line-height: var(--line-height-loose);
	font-weight: 400;
}

/* ===== UTILITY CLASSES ===== */

/* Line heights */
.lh-tight { line-height: var(--line-height-tight); }
.lh-snug { line-height: var(--line-height-snug); }
.lh-normal { line-height: var(--line-height-normal); }
.lh-relaxed { line-height: var(--line-height-relaxed); }
.lh-loose { line-height: var(--line-height-loose); }

/* Letter spacing */
.ls-tight { letter-spacing: var(--letter-spacing-tight); }
.ls-normal { letter-spacing: var(--letter-spacing-normal); }
.ls-wide { letter-spacing: var(--letter-spacing-wide); }
.ls-wider { letter-spacing: var(--letter-spacing-wider); }

/* Font weights */
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* ===== RESPONSIVE ADJUSTMENTS ===== */

/* Ensure minimum touch target sizes for accessibility */
@media (max-width: 480px) {
	/* Slightly larger tap targets on very small screens */
	button,
	a.button,
	.button,
	.btn {
		min-height: 44px;
		min-width: 44px;
	}
}

/* Respect user preferences */
@media (prefers-reduced-motion: reduce) {
	* {
		transition-duration: 0.01ms !important;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	body {
		--line-height-relaxed: 1.8;
		--line-height-loose: 2;
	}
}