/* Typography System for Key Finders Luxury Website */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400&family=Inter:wght@200;300;400;500;600&display=swap');

/* Typography Utilities & Fluid Scaling using Clamp */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 300;
  line-height: 1.1;
  color: var(--text-color);
  letter-spacing: -0.02em;
}

/* Fluid sizes: minimum size on mobile, fluid in between, maximum size on large screens */
.display-large {
  font-size: clamp(3rem, 7vw, 7.5rem);
  line-height: 1.0;
  font-weight: 300;
  letter-spacing: -0.03em;
}

.display-medium {
  font-size: clamp(2.2rem, 5vw, 4.5rem);
  line-height: 1.05;
  font-weight: 300;
  letter-spacing: -0.025em;
}

h1, .h1 {
  font-size: clamp(2.5rem, 5.5vw, 5rem);
}

h2, .h2 {
  font-size: clamp(1.8rem, 3.8vw, 3.2rem);
  letter-spacing: -0.02em;
}

h3, .h3 {
  font-size: clamp(1.4rem, 2.5vw, 2.2rem);
  letter-spacing: -0.01em;
}

h4, .h4 {
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 400;
}

p, .body-text {
  font-family: var(--font-body);
  font-size: clamp(0.95rem, 1vw + 0.5rem, 1.1rem);
  line-height: 1.7;
  color: var(--text-muted);
  font-weight: 300;
}

.body-large {
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  line-height: 1.6;
}

.body-small {
  font-size: clamp(0.75rem, 0.9vw, 0.85rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Luxury Magazine Style Subheadings / Labels */
.label-gold {
  color: var(--color-gold);
  font-family: var(--font-body);
  font-size: clamp(0.75rem, 0.9vw, 0.85rem);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-weight: 500;
  display: inline-block;
  margin-block-end: var(--space-sm);
}

/* Arabic Specific Typography Tweaks */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6,
html[lang="ar"] p,
html[lang="ar"] .display-large,
html[lang="ar"] .display-medium,
html[lang="ar"] .body-large,
html[lang="ar"] .body-small,
html[lang="ar"] .label-gold {
  font-weight: 300;
  letter-spacing: 0; /* Remove letter-spacing for Arabic script */
  line-height: 1.5;  /* Adjust line height for Arabic Cairo font */
}

html[lang="ar"] .body-small,
html[lang="ar"] .label-gold,
html[lang="ar"] h4,
html[lang="ar"] .h4 {
  text-transform: none; /* No capitalization in Arabic */
}

blockquote {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-style: italic;
  line-height: 1.3;
  color: var(--color-gold);
  border-inline-start: 2px solid var(--color-gold);
  padding-inline-start: var(--space-md);
  margin: var(--space-lg) 0;
}

html[lang="ar"] blockquote {
  font-style: normal;
}