/* ======================

   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;color: var(--foreground, #333f5b);margin: 0;will-change: auto;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{font-size: clamp(28px, 6vw, 56px);line-height: 0.95;letter-spacing: -0.04em;font-weight: 500;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{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%);}
  .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;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{will-change: auto;}
}

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

/* 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;}
}