/**
 * THE WEDDING DJ - Typography System
 * Consistent heading styles across the entire website
 */

/* ========================================
   HERO HEADINGS (H1)
   ======================================== */

/* Main hero heading - used on all hero sections */
.heading-hero {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.125rem;       /* 18px - small mobile */
    font-weight: 700;          /* bold */
    line-height: 1.3;
    letter-spacing: -0.02em;
    word-wrap: normal;
    overflow-wrap: normal;
    hyphens: none;
}

@media (min-width: 640px) {
    .heading-hero {
        font-size: 2.5rem;     /* 40px - mobile */
    }
}

@media (min-width: 768px) {
    .heading-hero {
        font-size: 3.75rem;    /* 60px - tablet */
    }
}

@media (min-width: 1024px) {
    .heading-hero {
        font-size: 4.5rem;     /* 72px - desktop */
    }
}

@media (min-width: 1280px) {
    .heading-hero {
        font-size: 5rem;       /* 80px - large desktop */
    }
}

/* ========================================
   SECTION HEADINGS (H2)
   ======================================== */

/* Main section heading - used for primary content sections */
.heading-section {
    font-family: 'Montserrat', sans-serif;
    font-size: 2.25rem;        /* 36px - mobile */
    font-weight: 700;          /* bold */
    line-height: 1.2;
}

@media (min-width: 768px) {
    .heading-section {
        font-size: 3rem;       /* 48px - tablet/desktop */
    }
}

/* ========================================
   SUBSECTION HEADINGS (H3)
   ======================================== */

/* Subsection heading - used for cards and smaller sections */
.heading-subsection {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;         /* 24px */
    font-weight: 700;          /* bold */
    line-height: 1.3;
}

/* Card heading - smaller than subsection */
.heading-card {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;        /* 20px */
    font-weight: 700;          /* bold */
    line-height: 1.4;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Add uppercase transform when needed */
.heading-uppercase {
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Tighter letter spacing on mobile for uppercase headings */
@media (max-width: 639px) {
    .heading-uppercase {
        letter-spacing: 0;
    }
}

/* Centered text */
.heading-center {
    text-align: center;
}

/* Add margin bottom */
.heading-mb-sm {
    margin-bottom: 1rem;      /* 16px */
}

.heading-mb-md {
    margin-bottom: 1.5rem;    /* 24px */
}

.heading-mb-lg {
    margin-bottom: 2rem;      /* 32px */
}

/* ========================================
   COLOR VARIANTS
   ======================================== */

.heading-white {
    color: #FFFFFF;
}

.heading-primary {
    color: #FFFFFF;
}

.heading-secondary {
    color: #B0B0B0;
}

.heading-gradient {
    background: linear-gradient(135deg, #E60000 0%, #FF6B35 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.heading-dark {
    color: #1F2937;
}