/* ======================
   GLOBAL HEADING COMPONENT - RESPONSIVE DESIGN
   Based on Figma Design with Navigation Standards
   ====================== */

/* Base Heading - Mobile First */
.heading {
  position: relative;
  font-family: 'P22 Mackinac Pro', serif;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.95; /* 95% from Figma */
  text-transform: capitalize;
  color: var(--foreground, #333f5b);
  margin: 0;
  
  /* Performance optimization */
  will-change: auto;
  
  /* Base responsive font size - will be overridden by size variants */
  font-size: clamp(20px, 4vw, 32px);
}

/* ======================
   SIZE VARIANTS
   ====================== */

/* Small heading */
.size-small {
  font-size: clamp(18px, 3vw, 24px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Medium heading */
.size-medium {
  font-size: clamp(24px, 4vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* Large heading */
.size-large {
  font-size: clamp(32px, 6vw, 48px);
  line-height: 1;
  letter-spacing: -0.04em;
}

/* cta heading */
.size-cta {
  font-size: clamp(28px, 4vw + 1rem, 64px);
  letter-spacing: clamp(-0.02em, -0.5vw, -0.04em);
}

/* Hero heading - More reasonable responsive sizing */
.size-hero {
  /* Responsive from mobile 28px to desktop 56px */
  font-size: clamp(28px, 6vw, 56px);
  line-height: 0.95; /* Exact Figma line-height */
  letter-spacing: -0.04em; /* Exact Figma letter-spacing */
  
  /* Additional hero styling for impact */
  font-weight: 500;
  
  /* Responsive width constraint */
  max-width: min(600px, 100%);
}

/* ======================
   ALIGNMENT VARIANTS
   ====================== */

/* Left align (Figma default) */
.align-left {
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Center align */
.align-center {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Right align */
.align-right {
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Responsive left align - center on mobile/tablet, left on desktop */
.align-responsive-left {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  
  @media (min-width: 1025px) {
    text-align: left;
    justify-content: flex-start;
  }
}

/* ======================
   RESPONSIVE BREAKPOINTS
   Following Navigation Standards
   ====================== */

/* Mobile Optimization (0-1024px) */
@media (max-width: 1024px) {
  .heading {
    /* Ensure good mobile readability */
    max-width: 100%;
  }
  
  .size-hero {
    font-size: clamp(32px, 8vw, 64px);
    line-height: 1;
  }
  
  .size-large {
    font-size: clamp(28px, 7vw, 48px);
  }
  
  .size-medium {
    font-size: clamp(24px, 5vw, 40px);
  }
  
  .size-small {
    font-size: clamp(20px, 4vw, 28px);
  }

  .variant-cta {
    text-align: left;
  }
}

/* Compact Desktop (1025-1279px) */
@media (min-width: 1025px) and (max-width: 1279px) {
  .size-hero {
    font-size: clamp(64px, 8vw, 80px);
    max-width: min(700px, 100%);
  }
  
  .size-large {
    font-size: clamp(48px, 6vw, 64px);
  }
  
  .size-medium {
    font-size: clamp(40px, 5vw, 52px);
  }
}

/* Large Desktop (1280px+) */
@media (min-width: 1280px) {
  .size-hero {
    font-size: clamp(72px, 7vw, 100px);
    max-width: min(800px, 100%); /* Figma width constraint */
  }
  
  .size-large {
    font-size: clamp(56px, 5vw, 72px);
  }
  
  .size-medium {
    font-size: clamp(48px, 4vw, 56px);
  }
}

/* Ultra-wide (1921px+) */
@media (min-width: 1921px) {
  .size-hero {
    font-size: 64px; /* More reasonable than 100px */
    max-width: 600px;
  }
  
  .size-large {
    font-size: 52px;
  }
  
  .size-medium {
    font-size: 40px;
  }
  
  .size-small {
    font-size: 28px;
  }
}

/* ======================
   SPECIAL RESPONSIVE BEHAVIORS
   ====================== */

/* Ensure headings don't break on very small screens */
@media (max-width: 320px) {
  .heading {
    word-break: break-word;
    hyphens: auto;
  }
  
  .size-hero {
    font-size: 24px;
    line-height: 1.1;
  }
}

/* Tablet landscape specific adjustments */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .size-hero {
    font-size: clamp(32px, 5vw, 44px);
  }
}

/* ======================
   ACCESSIBILITY & PERFORMANCE
   ====================== */

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .heading {
    /* Ensure text is stable */
    will-change: auto;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .heading {
    color: inherit;
    font-weight: 600; /* Increase weight for better contrast */
  }
}

/* Print styles */
@media print {
  .heading {
    color: black !important;
    background: none !important;
    font-size: 24pt !important;
    line-height: 1.2 !important;
    page-break-after: avoid;
    widows: 2;
    orphans: 2;
  }
  
  .size-hero {
    font-size: 36pt !important;
  }
  
  .size-large {
    font-size: 32pt !important;
  }
  
  .size-medium {
    font-size: 28pt !important;
  }
  
  .size-small {
    font-size: 24pt !important;
  }
}