/**
 * Wosol Theme - Typography Styles
 *
 * Heading and body text styles for the Wosol brand.
 * Primary font: Poppins (sans-serif) via Google Fonts.
 * Secondary font: Cormorant Garamond (serif) for headings.
 * Caption font: Inter Light for Journal captions only.
 *
 * Font faces are loaded from Google Fonts via @import — this is acceptable
 * given the small number of weights we use and provides guaranteed fallback
 * without shipping large font files in the child theme.
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Poppins:wght@300;400;600&family=Inter:wght@300&display=swap');

:root {
  --wosol-font-serif: 'Cormorant Garamond', Georgia, serif;
  --wosol-font-sans: 'Poppins', system-ui, -apple-system, Segoe UI, sans-serif;
  --wosol-font-caption: 'Inter', sans-serif;
}

body,
.wosol-body {
  font-family: var(--wosol-font-sans);
  font-weight: 300;
  color: var(--wosol-ink);
  line-height: 1.8;
}

/* Higher-specificity anchor so no later stylesheet (e.g. custom.css) can
   override the body font-family set by the Figma token above. */
html body {
  font-family: var(--wosol-font-sans);
}

h1, h2, h3, .wosol-heading {
  font-family: var(--wosol-font-serif);
  font-weight: 400;
  line-height: 1.2;
  color: var(--wosol-ink);
}

h1, .wosol-heading--hero {
  font-size: 64px;
  line-height: 1.15;
}

h2, .wosol-heading--section {
  font-size: 40px;
}

.wosol-eyebrow {
  font-family: var(--wosol-font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.24px;
  text-transform: uppercase;
  color: var(--wosol-gold);
}

/* =============================================
   HEADINGS
   Each heading has a paired utility class (.heading-N) so
   any element can be styled as a semantic heading level.
   ============================================= */

h1,
.heading-1 {
	font-family: var(--font-primary);
	font-size: var(--font-size-4xl);          /* 48px */
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text);
	margin: 0 0 var(--spacing-lg);
}

/* Scoped to generic content blocks only — section h2s use per-section .wosol-*__title selectors */
.wosol-content h2,
.wp-block-heading h2,
.heading-2 {
	font-family: var(--font-primary);
	font-size: var(--font-size-3xl);          /* 40px */
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text);
	margin: 0 0 var(--spacing-lg);
}

h3,
.heading-3 {
	font-family: var(--font-primary);
	font-size: var(--font-size-2xl);          /* 32px */
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-snug);
	letter-spacing: var(--letter-spacing-tight);
	color: var(--color-text);
	margin: 0 0 var(--spacing-md);
}

h4,
.heading-4 {
	font-family: var(--font-primary);
	font-size: var(--font-size-xl);           /* 24px */
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-snug);
	letter-spacing: var(--letter-spacing-normal);
	color: var(--color-text);
	margin: 0 0 var(--spacing-md);
}

h5,
.heading-5 {
	font-family: var(--font-primary);
	font-size: var(--font-size-lg);           /* 20px */
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-normal);
	letter-spacing: var(--letter-spacing-normal);
	color: var(--color-text);
	margin: 0 0 var(--spacing-sm);
}

h6,
.heading-6 {
	font-family: var(--font-primary);
	font-size: var(--font-size-base);         /* 16px */
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-normal);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-light);
	margin: 0 0 var(--spacing-sm);
}

/* =============================================
   DISPLAY / HERO HEADINGS
   Larger than H1 for landing pages and hero sections.
   ============================================= */

.display-1 {
	font-family: var(--font-primary);
	font-size: var(--font-size-5xl);          /* 60px */
	font-weight: var(--font-weight-extrabold);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tighter);
	color: var(--color-text);
}

.display-2 {
	font-family: var(--font-primary);
	font-size: var(--font-size-4xl);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tighter);
}

/* Accent headings using serif font (e.g. luxury quotes). */
.heading-serif {
	font-family: var(--font-secondary);
	font-weight: var(--font-weight-regular);
	font-style: italic;
	letter-spacing: var(--letter-spacing-normal);
}

/* =============================================
   BODY TEXT
   ============================================= */

body,
p,
.body {
	font-family: var(--font-primary);
	font-size: var(--font-size-base);         /* 16px */
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-relaxed);
	letter-spacing: var(--letter-spacing-normal);
	color: var(--color-text);
}

/* Lead paragraph (intro text). */
.lead {
	font-size: var(--font-size-md);           /* 18px */
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-relaxed);
	color: var(--color-text-light);
}

/* Small / helper text. */
small,
.small,
.text-small {
	font-size: var(--font-size-sm);           /* 14px */
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
}

/* Caption (image captions, meta info). */
.caption,
.text-caption {
	font-size: var(--font-size-xs);           /* 12px */
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height-normal);
	letter-spacing: var(--letter-spacing-wide);
	color: var(--color-text-muted);
}

/* Labels (form labels, badges, meta). */
.label,
.text-label {
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-normal);
	letter-spacing: var(--letter-spacing-wider);
	text-transform: uppercase;
	color: var(--color-text-light);
}

/* Eyebrow text (kicker/pre-heading). */
.eyebrow {
	display: inline-block;
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	line-height: 1;
	letter-spacing: var(--letter-spacing-widest);
	text-transform: uppercase;
	color: var(--color-secondary);
	margin-bottom: var(--spacing-sm);
}

/* Blockquote emphasis text. */
.quote {
	font-family: var(--font-secondary);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-regular);
	font-style: italic;
	line-height: var(--line-height-relaxed);
	color: var(--color-text);
}

/* =============================================
   TEXT COLOR UTILITIES
   ============================================= */

.text-primary       { color: var(--color-primary) !important; }
.text-primary-dark  { color: var(--color-primary-dark) !important; }
.text-secondary     { color: var(--color-secondary) !important; }
.text-accent        { color: var(--color-accent) !important; }
.text-default       { color: var(--color-text) !important; }
.text-light         { color: var(--color-text-light) !important; }
.text-muted         { color: var(--color-text-muted) !important; }
.text-inverse       { color: var(--color-text-inverse) !important; }
.text-white         { color: var(--color-white) !important; }
.text-success       { color: var(--color-success) !important; }
.text-error         { color: var(--color-error) !important; }
.text-warning       { color: var(--color-warning) !important; }

/* =============================================
   TEXT ALIGNMENT UTILITIES
   ============================================= */

.text-left    { text-align: left !important; }
.text-center  { text-align: center !important; }
.text-right   { text-align: right !important; }
.text-justify { text-align: justify !important; }

/* =============================================
   TEXT TRANSFORM UTILITIES
   ============================================= */

.text-uppercase   { text-transform: uppercase !important; }
.text-lowercase   { text-transform: lowercase !important; }
.text-capitalize  { text-transform: capitalize !important; }
.text-normal-case { text-transform: none !important; }

/* =============================================
   FONT WEIGHT UTILITIES
   ============================================= */

.font-light      { font-weight: var(--font-weight-light) !important; }
.font-regular    { font-weight: var(--font-weight-regular) !important; }
.font-medium     { font-weight: var(--font-weight-medium) !important; }
.font-semibold   { font-weight: var(--font-weight-semibold) !important; }
.font-bold       { font-weight: var(--font-weight-bold) !important; }
.font-extrabold  { font-weight: var(--font-weight-extrabold) !important; }

/* =============================================
   FONT SIZE UTILITIES
   ============================================= */

.text-xs   { font-size: var(--font-size-xs) !important; }
.text-sm   { font-size: var(--font-size-sm) !important; }
.text-base { font-size: var(--font-size-base) !important; }
.text-md   { font-size: var(--font-size-md) !important; }
.text-lg   { font-size: var(--font-size-lg) !important; }
.text-xl   { font-size: var(--font-size-xl) !important; }
.text-2xl  { font-size: var(--font-size-2xl) !important; }
.text-3xl  { font-size: var(--font-size-3xl) !important; }
.text-4xl  { font-size: var(--font-size-4xl) !important; }
.text-5xl  { font-size: var(--font-size-5xl) !important; }

/* =============================================
   LINE HEIGHT UTILITIES
   ============================================= */

.leading-tight   { line-height: var(--line-height-tight) !important; }
.leading-snug    { line-height: var(--line-height-snug) !important; }
.leading-normal  { line-height: var(--line-height-normal) !important; }
.leading-relaxed { line-height: var(--line-height-relaxed) !important; }
.leading-loose   { line-height: var(--line-height-loose) !important; }

/* =============================================
   FONT FAMILY UTILITIES
   ============================================= */

.font-primary   { font-family: var(--font-primary) !important; }
.font-secondary { font-family: var(--font-secondary) !important; }
.font-mono      { font-family: var(--font-mono) !important; }

/* =============================================
   MISC TEXT UTILITIES
   ============================================= */

.text-italic       { font-style: italic !important; }
.text-not-italic   { font-style: normal !important; }
.text-underline    { text-decoration: underline !important; }
.text-line-through { text-decoration: line-through !important; }
.text-no-underline { text-decoration: none !important; }

.text-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

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

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

/* =============================================
   RESPONSIVE TYPOGRAPHY
   Fluid scaling for smaller viewports.
   ============================================= */

@media (max-width: 1023px) {
	h1, .heading-1 { font-size: var(--font-size-3xl); }   /* 40px */
	h2, .heading-2 { font-size: var(--font-size-2xl); }   /* 32px */
	h3, .heading-3 { font-size: var(--font-size-xl); }    /* 24px */

	.display-1 { font-size: var(--font-size-4xl); }
	.display-2 { font-size: var(--font-size-3xl); }
}

@media (max-width: 767px) {
	h1, .heading-1 { font-size: var(--font-size-2xl); }   /* 32px */
	h2, .heading-2 { font-size: var(--font-size-xl); }    /* 24px */
	h3, .heading-3 { font-size: var(--font-size-lg); }    /* 20px */
	h4, .heading-4 { font-size: var(--font-size-md); }    /* 18px */

	.display-1 { font-size: var(--font-size-3xl); }
	.display-2 { font-size: var(--font-size-2xl); }

	.lead { font-size: var(--font-size-base); }
	.quote { font-size: var(--font-size-lg); }
}