/**
 * Responsive Typography for Company Widgets
 * Phase 6 - Responsive Design & Mobile Optimization
 * Created: November 21, 2025
 *
 * Mobile-First Typography Scaling
 * Breakpoints: Mobile (<768px), Tablet (768-1023px), Desktop (1024px+)
 *
 * Typography Strategy:
 * - Base font sizes for mobile (readable on small screens)
 * - Proportional scaling for tablet and desktop
 * - Optimal line heights for readability
 * - Responsive font weights
 */

/* ==========================================================================
   Base Mobile Typography (<768px)
   ========================================================================== */

/* Root Font Size (Mobile) */
.drvws-widget-typography {
	font-size: 16px;
	line-height: 1.6;
	color: #1F2937;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Headings - Mobile Scale */

/* H1 - Main Page Titles */
.drvws-widget-typography h1,
.drvws-widget-typography .h1 {
	font-size: 28px;
	line-height: 1.2;
	font-weight: 700;
	margin-bottom: 16px;
	color: #111827;
	letter-spacing: -0.02em;
}

/* H2 - Section Titles */
.drvws-widget-typography h2,
.drvws-widget-typography .h2 {
	font-size: 24px;
	line-height: 1.3;
	font-weight: 700;
	margin-bottom: 12px;
	color: #1F2937;
	letter-spacing: -0.01em;
}

/* H3 - Widget Titles, Card Headers */
.drvws-widget-typography h3,
.drvws-widget-typography .h3 {
	font-size: 20px;
	line-height: 1.3;
	font-weight: 600;
	margin-bottom: 10px;
	color: #1F2937;
}

/* H4 - Subsection Titles */
.drvws-widget-typography h4,
.drvws-widget-typography .h4 {
	font-size: 18px;
	line-height: 1.4;
	font-weight: 600;
	margin-bottom: 8px;
	color: #374151;
}

/* H5 - Minor Headings */
.drvws-widget-typography h5,
.drvws-widget-typography .h5 {
	font-size: 16px;
	line-height: 1.4;
	font-weight: 600;
	margin-bottom: 6px;
	color: #4B5563;
}

/* H6 - Label Headings */
.drvws-widget-typography h6,
.drvws-widget-typography .h6 {
	font-size: 14px;
	line-height: 1.4;
	font-weight: 600;
	margin-bottom: 4px;
	color: #4B5563;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* Body Text Variants */

/* Body Large */
.drvws-widget-typography .text-lg,
.drvws-widget-typography p.large {
	font-size: 18px;
	line-height: 1.7;
}

/* Body Regular (Default) */
.drvws-widget-typography p,
.drvws-widget-typography .text-base {
	font-size: 16px;
	line-height: 1.6;
	margin-bottom: 12px;
	color: #4B5563;
}

/* Body Small */
.drvws-widget-typography .text-sm,
.drvws-widget-typography p.small {
	font-size: 14px;
	line-height: 1.5;
	color: #6B7280;
}

/* Body Extra Small (Captions, Dates) */
.drvws-widget-typography .text-xs,
.drvws-widget-typography .caption {
	font-size: 12px;
	line-height: 1.4;
	color: #6B7280;
}

/* Display Text (Hero Sections) */
.drvws-widget-typography .display-1 {
	font-size: 32px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #111827;
}

.drvws-widget-typography .display-2 {
	font-size: 28px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #111827;
}

/* Lead Text (Introductions) */
.drvws-widget-typography .lead {
	font-size: 18px;
	line-height: 1.7;
	font-weight: 400;
	color: #4B5563;
	margin-bottom: 20px;
}

/* Font Weights */
.drvws-widget-typography .font-light {
	font-weight: 300;
}

.drvws-widget-typography .font-normal {
	font-weight: 400;
}

.drvws-widget-typography .font-medium {
	font-weight: 500;
}

.drvws-widget-typography .font-semibold {
	font-weight: 600;
}

.drvws-widget-typography .font-bold {
	font-weight: 700;
}

.drvws-widget-typography .font-extrabold {
	font-weight: 800;
}

/* Text Colors */
.drvws-widget-typography .text-primary {
	color: #7C3AED; /* Purple 600 */
}

.drvws-widget-typography .text-secondary {
	color: #6B7280; /* Gray 500 */
}

.drvws-widget-typography .text-success {
	color: #10B981; /* Green 500 */
}

.drvws-widget-typography .text-danger {
	color: #EF4444; /* Red 500 */
}

.drvws-widget-typography .text-warning {
	color: #F59E0B; /* Amber 500 */
}

.drvws-widget-typography .text-info {
	color: #3B82F6; /* Blue 500 */
}

.drvws-widget-typography .text-muted {
	color: #9CA3AF; /* Gray 400 */
}

.drvws-widget-typography .text-white {
	color: #FFFFFF;
}

.drvws-widget-typography .text-black {
	color: #111827;
}

/* Text Alignment */
.drvws-widget-typography .text-left {
	text-align: left;
}

.drvws-widget-typography .text-center {
	text-align: center;
}

.drvws-widget-typography .text-right {
	text-align: right;
}

.drvws-widget-typography .text-justify {
	text-align: justify;
}

/* Text Truncation */
.drvws-widget-typography .truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.drvws-widget-typography .line-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.drvws-widget-typography .line-clamp-3 {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Links */
.drvws-widget-typography a {
	color: #7C3AED;
	text-decoration: none;
	transition: color 0.2s ease;
}

.drvws-widget-typography a:hover {
	color: #6D28D9;
	text-decoration: underline;
}

.drvws-widget-typography a:active {
	color: #5B21B6;
}

/* Lists */
.drvws-widget-typography ul,
.drvws-widget-typography ol {
	margin-bottom: 16px;
	padding-left: 24px;
}

.drvws-widget-typography li {
	margin-bottom: 8px;
	line-height: 1.6;
}

/* Blockquotes */
.drvws-widget-typography blockquote {
	padding: 16px 20px;
	margin: 16px 0;
	border-left: 4px solid #7C3AED;
	background: #F9FAFB;
	font-style: italic;
	color: #4B5563;
}

.drvws-widget-typography blockquote cite {
	display: block;
	margin-top: 8px;
	font-size: 14px;
	font-style: normal;
	color: #6B7280;
}

/* Code */
.drvws-widget-typography code {
	padding: 2px 6px;
	font-size: 14px;
	font-family: 'Courier New', Courier, monospace;
	background: #F3F4F6;
	border-radius: 4px;
	color: #DC2626;
}

/* ==========================================================================
   Tablet Typography (768px - 1023px)
   ========================================================================== */

@media (min-width: 768px) {
	/* Root Font Size (Tablet) */
	.drvws-widget-typography {
		font-size: 16px;
		line-height: 1.65;
	}

	/* Headings - Tablet Scale */
	.drvws-widget-typography h1,
	.drvws-widget-typography .h1 {
		font-size: 32px;
		margin-bottom: 20px;
	}

	.drvws-widget-typography h2,
	.drvws-widget-typography .h2 {
		font-size: 28px;
		margin-bottom: 16px;
	}

	.drvws-widget-typography h3,
	.drvws-widget-typography .h3 {
		font-size: 24px;
		margin-bottom: 12px;
	}

	.drvws-widget-typography h4,
	.drvws-widget-typography .h4 {
		font-size: 20px;
		margin-bottom: 10px;
	}

	.drvws-widget-typography h5,
	.drvws-widget-typography .h5 {
		font-size: 18px;
		margin-bottom: 8px;
	}

	.drvws-widget-typography h6,
	.drvws-widget-typography .h6 {
		font-size: 15px;
		margin-bottom: 6px;
	}

	/* Body Text - Tablet Scale */
	.drvws-widget-typography .text-lg,
	.drvws-widget-typography p.large {
		font-size: 20px;
		line-height: 1.75;
	}

	.drvws-widget-typography p,
	.drvws-widget-typography .text-base {
		font-size: 17px;
		line-height: 1.65;
		margin-bottom: 14px;
	}

	.drvws-widget-typography .text-sm,
	.drvws-widget-typography p.small {
		font-size: 15px;
		line-height: 1.6;
	}

	.drvws-widget-typography .text-xs,
	.drvws-widget-typography .caption {
		font-size: 13px;
		line-height: 1.5;
	}

	/* Display Text - Tablet Scale */
	.drvws-widget-typography .display-1 {
		font-size: 40px;
	}

	.drvws-widget-typography .display-2 {
		font-size: 36px;
	}

	/* Lead Text - Tablet Scale */
	.drvws-widget-typography .lead {
		font-size: 20px;
		line-height: 1.75;
		margin-bottom: 24px;
	}

	/* Lists */
	.drvws-widget-typography ul,
	.drvws-widget-typography ol {
		margin-bottom: 20px;
		padding-left: 28px;
	}

	.drvws-widget-typography li {
		margin-bottom: 10px;
		line-height: 1.65;
	}

	/* Blockquotes */
	.drvws-widget-typography blockquote {
		padding: 20px 24px;
		margin: 20px 0;
		font-size: 17px;
	}

	.drvws-widget-typography blockquote cite {
		font-size: 15px;
	}

	/* Code */
	.drvws-widget-typography code {
		font-size: 15px;
	}
}

/* ==========================================================================
   Desktop Typography (1024px+)
   ========================================================================== */

@media (min-width: 1024px) {
	/* Root Font Size (Desktop) */
	.drvws-widget-typography {
		font-size: 17px;
		line-height: 1.7;
	}

	/* Headings - Desktop Scale */
	.drvws-widget-typography h1,
	.drvws-widget-typography .h1 {
		font-size: 40px;
		margin-bottom: 24px;
	}

	.drvws-widget-typography h2,
	.drvws-widget-typography .h2 {
		font-size: 32px;
		margin-bottom: 20px;
	}

	.drvws-widget-typography h3,
	.drvws-widget-typography .h3 {
		font-size: 28px;
		margin-bottom: 16px;
	}

	.drvws-widget-typography h4,
	.drvws-widget-typography .h4 {
		font-size: 24px;
		margin-bottom: 12px;
	}

	.drvws-widget-typography h5,
	.drvws-widget-typography .h5 {
		font-size: 20px;
		margin-bottom: 10px;
	}

	.drvws-widget-typography h6,
	.drvws-widget-typography .h6 {
		font-size: 16px;
		margin-bottom: 8px;
	}

	/* Body Text - Desktop Scale */
	.drvws-widget-typography .text-lg,
	.drvws-widget-typography p.large {
		font-size: 22px;
		line-height: 1.8;
	}

	.drvws-widget-typography p,
	.drvws-widget-typography .text-base {
		font-size: 18px;
		line-height: 1.7;
		margin-bottom: 16px;
	}

	.drvws-widget-typography .text-sm,
	.drvws-widget-typography p.small {
		font-size: 16px;
		line-height: 1.65;
	}

	.drvws-widget-typography .text-xs,
	.drvws-widget-typography .caption {
		font-size: 14px;
		line-height: 1.6;
	}

	/* Display Text - Desktop Scale */
	.drvws-widget-typography .display-1 {
		font-size: 56px;
		line-height: 1.1;
	}

	.drvws-widget-typography .display-2 {
		font-size: 48px;
		line-height: 1.15;
	}

	/* Lead Text - Desktop Scale */
	.drvws-widget-typography .lead {
		font-size: 22px;
		line-height: 1.8;
		margin-bottom: 28px;
	}

	/* Lists */
	.drvws-widget-typography ul,
	.drvws-widget-typography ol {
		margin-bottom: 24px;
		padding-left: 32px;
	}

	.drvws-widget-typography li {
		margin-bottom: 12px;
		line-height: 1.7;
	}

	/* Blockquotes */
	.drvws-widget-typography blockquote {
		padding: 24px 28px;
		margin: 24px 0;
		font-size: 18px;
	}

	.drvws-widget-typography blockquote cite {
		margin-top: 12px;
		font-size: 16px;
	}

	/* Code */
	.drvws-widget-typography code {
		font-size: 16px;
		padding: 3px 8px;
	}
}

/* ==========================================================================
   Extra Large Desktop (1200px+)
   ========================================================================== */

@media (min-width: 1200px) {
	/* Root Font Size (XL Desktop) */
	.drvws-widget-typography {
		font-size: 18px;
	}

	/* Headings - XL Desktop Scale */
	.drvws-widget-typography h1,
	.drvws-widget-typography .h1 {
		font-size: 48px;
	}

	.drvws-widget-typography h2,
	.drvws-widget-typography .h2 {
		font-size: 36px;
	}

	.drvws-widget-typography h3,
	.drvws-widget-typography .h3 {
		font-size: 30px;
	}

	/* Display Text - XL Desktop Scale */
	.drvws-widget-typography .display-1 {
		font-size: 64px;
	}

	.drvws-widget-typography .display-2 {
		font-size: 56px;
	}
}

/* ==========================================================================
   Responsive Typography Utilities
   ========================================================================== */

/* Responsive Text Alignment */
.drvws-widget-typography .text-center-mobile {
	text-align: center;
}

@media (min-width: 768px) {
	.drvws-widget-typography .text-center-mobile {
		text-align: left;
	}

	.drvws-widget-typography .text-center-tablet {
		text-align: center;
	}
}

@media (min-width: 1024px) {
	.drvws-widget-typography .text-center-tablet {
		text-align: left;
	}

	.drvws-widget-typography .text-center-desktop {
		text-align: center;
	}
}

/* ==========================================================================
   Accessibility & Performance
   ========================================================================== */

/* High Contrast Mode */
@media (prefers-contrast: high) {
	.drvws-widget-typography {
		font-weight: 500;
	}

	.drvws-widget-typography h1,
	.drvws-widget-typography h2,
	.drvws-widget-typography h3,
	.drvws-widget-typography h4,
	.drvws-widget-typography h5,
	.drvws-widget-typography h6 {
		font-weight: 700;
	}

	.drvws-widget-typography a {
		text-decoration: underline;
	}
}

/* Dark Mode Support (Optional) */
@media (prefers-color-scheme: dark) {
	.drvws-widget-typography {
		color: #F9FAFB;
	}

	.drvws-widget-typography h1,
	.drvws-widget-typography h2,
	.drvws-widget-typography h3,
	.drvws-widget-typography h4,
	.drvws-widget-typography h5,
	.drvws-widget-typography h6 {
		color: #FFFFFF;
	}

	.drvws-widget-typography p,
	.drvws-widget-typography .text-base {
		color: #D1D5DB;
	}

	.drvws-widget-typography .text-sm,
	.drvws-widget-typography .text-xs {
		color: #9CA3AF;
	}

	.drvws-widget-typography blockquote {
		background: #1F2937;
		color: #D1D5DB;
	}

	.drvws-widget-typography code {
		background: #374151;
		color: #F87171;
	}
}

/* Print Styles */
@media print {
	.drvws-widget-typography {
		font-size: 12pt;
		color: #000;
	}

	.drvws-widget-typography h1 {
		font-size: 24pt;
		page-break-after: avoid;
	}

	.drvws-widget-typography h2 {
		font-size: 20pt;
		page-break-after: avoid;
	}

	.drvws-widget-typography h3 {
		font-size: 16pt;
		page-break-after: avoid;
	}

	.drvws-widget-typography a {
		color: #000;
		text-decoration: underline;
	}

	.drvws-widget-typography blockquote {
		page-break-inside: avoid;
	}
}

/* ==========================================================================
   End of Responsive Typography
   ========================================================================== */