/**
 * Responsive Typography
 * 
 * Overrides WordPress custom properties for headlines at different breakpoints.
 * Desktop values are defined in theme.json.
 */

/* Global Font Application */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
.wp-block-heading,
.wp-block-paragraph,
.wp-block-list {
	font-family: "Gotham SSm", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Font Weight & Style Overrides */
.has-paragraph-1-bold-font-size,
.has-paragraph-2-bold-font-size {
	font-weight: 700 !important;
}

.has-paragraph-2-italic-font-size {
	font-style: italic !important;
	font-weight: 400 !important;
}

.has-paragraph-3-medium-font-size {
	font-weight: 350 !important;
}

/* List Typography Styles */

/**
 * Base list styles
 * Typography for ordered and unordered lists 
 */
.wp-block-list {
	font-feature-settings: "pnum" on, "lnum" on, "calt" off;
}

.wp-block-list li {

	/* Spacing between list items */
	margin-bottom: 10px;
}

.wp-block-list li:last-child {
	margin-bottom: 0;
}

/* List markers (bullets and numbers) */
.wp-block-list li::marker {
	color: currentcolor;
}

/* Tablet: 769px - 1280px */
@media (width <= 1280px) and (width >= 769px) {

	:root {

		/* Headline 1 - Tablet */
		--wp--custom--typography--headline-1--font-size: 50px;
		--wp--custom--typography--headline-1--line-height: 1.2;
		
		/* Headline 2 - Tablet */
		--wp--custom--typography--headline-2--font-size: 36px;
		--wp--custom--typography--headline-2--line-height: 1.111;
		
		/* Paragraph 3 - Tablet */
		--wp--custom--typography--paragraph-3--font-size: 18px;
		--wp--custom--typography--paragraph-3--line-height: 1.333;
		
		/* Paragraph 3 Medium - Tablet */
		--wp--custom--typography--paragraph-3-medium--font-size: 18px;
		--wp--custom--typography--paragraph-3-medium--line-height: 1.333;
	}
}

/* Mobile: up to 768px */
@media (width <= 768px) {

	:root {

		/* Headline 1 - Mobile */
		--wp--custom--typography--headline-1--font-size: 40px;
		--wp--custom--typography--headline-1--line-height: 1.25;
		
		/* Headline 2 - Mobile */
		--wp--custom--typography--headline-2--font-size: 32px;
		--wp--custom--typography--headline-2--line-height: 1.25;
		
		/* Headline 3 - Mobile */
		--wp--custom--typography--headline-3--font-size: 28px;
		--wp--custom--typography--headline-3--line-height: 1.214;
		
		/* Headline 5 - Mobile */
		--wp--custom--typography--headline-5--font-size: 18px;
		--wp--custom--typography--headline-5--line-height: 1.111;
		
		/* Paragraph 1 - Mobile */
		--wp--custom--typography--paragraph-1--font-size: 14px;
		--wp--custom--typography--paragraph-1--line-height: 1.429;
		
		/* Paragraph 1 Bold - Mobile */
		--wp--custom--typography--paragraph-1-bold--font-size: 14px;
		--wp--custom--typography--paragraph-1-bold--line-height: 1.429;
		
		/* Paragraph 2 - Mobile */
		--wp--custom--typography--paragraph-2--font-size: 10px;
		--wp--custom--typography--paragraph-2--line-height: 1.6;
		
		/* Paragraph 2 Italic - Mobile */
		--wp--custom--typography--paragraph-2-italic--font-size: 10px;
		--wp--custom--typography--paragraph-2-italic--line-height: 1.6;
		
		/* Paragraph 2 Bold - Mobile */
		--wp--custom--typography--paragraph-2-bold--font-size: 10px;
		--wp--custom--typography--paragraph-2-bold--line-height: 1.6;
		
		/* Paragraph 3 - Mobile */
		--wp--custom--typography--paragraph-3--font-size: 18px;
		--wp--custom--typography--paragraph-3--line-height: 1.333;
		
		/* Paragraph 3 Medium - Mobile */
		--wp--custom--typography--paragraph-3-medium--font-size: 18px;
		--wp--custom--typography--paragraph-3-medium--line-height: 1.333;
	}
	
	/* List-specific line-heights for mobile (different from paragraphs) */
	
	/* P1 Lists - Mobile: 14px / 20px line-height */
	.wp-block-list.has-paragraph-1-font-size,
	.wp-block-list.has-paragraph-1-font-size li,
	.wp-block-list.has-paragraph-1-bold-font-size,
	.wp-block-list.has-paragraph-1-bold-font-size li {
		line-height: 20px;
	}
	
	/* P2 Lists - Mobile: 10px / 16px line-height */
	.wp-block-list.has-paragraph-2-font-size,
	.wp-block-list.has-paragraph-2-font-size li,
	.wp-block-list.has-paragraph-2-italic-font-size,
	.wp-block-list.has-paragraph-2-italic-font-size li,
	.wp-block-list.has-paragraph-2-bold-font-size,
	.wp-block-list.has-paragraph-2-bold-font-size li {
		line-height: 16px;
	}
}

/* Component Typography Styles */

/**
 * Component-specific typography styles
 * These styles are NOT responsive - same values across all breakpoints
 */

/* Apply Founders Grotesk font to button and label components */
.has-button-text-font-size,
.has-label-font-size {
	font-family: "Founders Grotesk", sans-serif !important;
}

/* Apply font-feature-settings to all component typography */
.has-nav-1-font-size,
.has-nav-2-font-size,
.has-text-link-font-size,
.has-button-text-font-size,
.has-label-font-size {
	font-feature-settings: "pnum" on, "lnum" on, "calt" off;
}

/* Text Link */
.has-text-link-font-size {
	text-decoration: underline;
}

/* Typography Utility Classes */

/**
 * Content Width
 * Limits text width to 65 characters for optimal readability.
 * Research shows lines between 50-75 characters are easiest to read.
 */
.content-width {
	max-width: 65ch;
}

/**
 * Text Truncation Utilities
 * Truncate text with ellipsis when it overflows.
 */

/* Single line truncation */
.truncate-line {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Two-line truncation */
.truncate-2-lines {
	-webkit-box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Three-line truncation */
.truncate-3-lines {
	-webkit-box-orient: vertical;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	text-overflow: ellipsis;
}