/* ===================================================
   TYPOGRAPHY NORMALIZATION - CreatorFlow
   ===================================================

   CRITICAL: This file MUST be loaded AFTER all page-specific CSS files
   to ensure consistent typography and spacing across ALL pages.

   Purpose:
   - Standardize hero title sizes across all page types
   - Standardize section title sizes
   - Enforce proper heading hierarchy (H1 > H2 > H3)
   - Normalize section padding on mobile/tablet
   - Use consistent breakpoints: 360px, 480px, 640px, 768px, 1024px

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

/* ===================================================
   TYPOGRAPHY SCALE (Desktop)

   H1 (Hero titles): 2.75rem - 3rem
   H2 (Section titles): 2rem - 2.25rem
   H3 (Subsection titles): 1.5rem - 1.75rem
   H4 (Card titles): 1.25rem - 1.375rem
   Body: 1rem - 1.125rem
   Small: 0.875rem - 0.9375rem

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

/* ===================================
   HERO TITLES (H1 Level)
   Desktop: 3rem max, Mobile: 1.75rem min
   =================================== */

.hero-title,
.hero-new .hero-title,
.templates-hero__title,
.comparison-hero .hero-title,
.examples-hero__title,
.resources-hero__title,
.glossary-hero__title,
.guide-hero__title,
.agency-hero__title,
.tools-hero__title,
.tool-hero__title,
h1.hero-title,
.hero-section h1,
.hero h1 {
    font-size: clamp(1.75rem, 5vw, 3rem) !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 1.25rem !important;
}

/* ===================================
   HERO SUBTITLES
   Desktop: 1.25rem, Mobile: 1rem
   =================================== */

.hero-subtitle,
.hero-new .hero-subtitle,
.templates-hero__subtitle,
.comparison-hero .hero-subtitle,
.examples-hero__subtitle,
.resources-hero__subtitle,
.glossary-hero__subtitle,
.guide-hero__subtitle,
.agency-hero__subtitle,
.tools-hero__subtitle,
.tool-hero__subtitle,
.hero-section .hero-subtitle,
.hero p.hero-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.25rem) !important;
    line-height: 1.6 !important;
    margin-bottom: 1.5rem !important;
}

/* ===================================
   SECTION TITLES (H2 Level)
   Desktop: 2.25rem max, Mobile: 1.5rem min
   MUST be smaller than H1 hero titles
   NOTE: Excludes footer (uses main to scope)
   =================================== */

.section-title,
.section-title-center,
.section-title-centered,
h2.section-title,
main section h2,
.comparison-section h2,
.templates-section h2,
.examples-section h2,
.faq-section h2,
.features-section h2,
.benefits-section h2,
.how-it-works h2,
.testimonials-section h2,
.pricing-section h2,
.cta-section h2 {
    font-size: clamp(1.5rem, 4vw, 2.25rem) !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 1rem !important;
}

/* ===================================
   SUBSECTION TITLES (H3 Level)
   Desktop: 1.75rem max, Mobile: 1.25rem min
   MUST be smaller than H2 section titles
   NOTE: Excludes footer, announcement banner, and component-specific h3 elements
   =================================== */

/* Target only generic subsection titles - NOT component-specific h3s */
.subsection-title,
.benefit-title {
    font-size: clamp(1.25rem, 3vw, 1.75rem) !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
}

/*
   REMOVED: main h3, main section h3, .card-title, .feature-title, .step-title
   These selectors were too broad and overrode component-specific h3 styles:
   - .ex-example-card__name (0.9375rem → 1.75rem)
   - .earnings-card h3 (0.875rem → 1.75rem)
   - .feature-preview h3 (1.125rem → 1.75rem)
   - .preview-feature__content h3 (1.125rem → 1.75rem)
   - .verification-step h3 (1.125rem → 1.75rem)
   Component CSS should control their own h3 sizes.
*/

/* ===================================
   CARD TITLES (H4 Level)
   Desktop: 1.375rem, Mobile: 1.125rem
   NOTE: Excludes footer and announcement banner
   =================================== */

main h4,
main .card h4,
.feature-card h4,
.template-card h4 {
    font-size: clamp(1.125rem, 2.5vw, 1.375rem) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

/* ===================================
   TABLET BREAKPOINT (max-width: 1024px)
   =================================== */

@media (max-width: 1024px) {
    .hero-title,
    .hero-new .hero-title,
    .templates-hero__title,
    .comparison-hero .hero-title,
    .examples-hero__title,
    .resources-hero__title,
    .glossary-hero__title,
    .guide-hero__title,
    .agency-hero__title,
    .tools-hero__title,
    .tool-hero__title,
    h1.hero-title,
    .hero-section h1,
    .hero h1 {
        font-size: clamp(1.625rem, 5vw, 2.5rem) !important;
    }

    .section-title,
    .section-title-center,
    .section-title-centered,
    h2.section-title,
    main section h2 {
        font-size: clamp(1.375rem, 4vw, 2rem) !important;
    }
}

/* ===================================
   MOBILE BREAKPOINT (max-width: 768px)
   =================================== */

@media (max-width: 768px) {
    /* Hero titles - constrained for mobile */
    .hero-title,
    .hero-new .hero-title,
    .templates-hero__title,
    .comparison-hero .hero-title,
    .examples-hero__title,
    .resources-hero__title,
    .glossary-hero__title,
    .guide-hero__title,
    .agency-hero__title,
    .tools-hero__title,
    .tool-hero__title,
    h1.hero-title,
    .hero-section h1,
    .hero h1 {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
        margin-bottom: 1rem !important;
    }

    /* Hero subtitles */
    .hero-subtitle,
    .hero-new .hero-subtitle,
    .templates-hero__subtitle,
    .comparison-hero .hero-subtitle,
    .examples-hero__subtitle,
    .resources-hero__subtitle,
    .glossary-hero__subtitle,
    .guide-hero__subtitle,
    .agency-hero__subtitle,
    .tools-hero__subtitle,
    .tool-hero__subtitle,
    .hero-section .hero-subtitle,
    .hero p.hero-subtitle {
        font-size: clamp(0.9375rem, 4vw, 1.125rem) !important;
        margin-bottom: 1.25rem !important;
    }

    /* Section titles - must be smaller than hero */
    .section-title,
    .section-title-center,
    .section-title-centered,
    h2.section-title,
    main section h2,
    .comparison-section h2,
    .templates-section h2,
    .examples-section h2,
    .faq-section h2,
    .features-section h2,
    .benefits-section h2,
    .how-it-works h2,
    .testimonials-section h2,
    .pricing-section h2,
    .cta-section h2 {
        font-size: clamp(1.25rem, 5vw, 1.75rem) !important;
        margin-bottom: 0.875rem !important;
    }

    /* Subsection titles - only generic classes, not component-specific h3s */
    .subsection-title,
    .benefit-title {
        font-size: clamp(1.125rem, 4vw, 1.5rem) !important;
    }

    /* Card titles */
    main h4,
    main .card h4,
    .feature-card h4,
    .template-card h4 {
        font-size: clamp(1rem, 3vw, 1.25rem) !important;
    }
}

/* ===================================
   SMALL MOBILE (max-width: 480px)
   Further constrained sizes
   =================================== */

@media (max-width: 480px) {
    /* Hero titles - tight constraints */
    .hero-title,
    .hero-new .hero-title,
    .templates-hero__title,
    .comparison-hero .hero-title,
    .examples-hero__title,
    .resources-hero__title,
    .glossary-hero__title,
    .guide-hero__title,
    .agency-hero__title,
    .tools-hero__title,
    .tool-hero__title,
    h1.hero-title,
    .hero-section h1,
    .hero h1 {
        font-size: 1.625rem !important;
        line-height: 1.2 !important;
    }

    /* Hero subtitles */
    .hero-subtitle,
    .hero-new .hero-subtitle,
    .templates-hero__subtitle,
    .comparison-hero .hero-subtitle,
    .examples-hero__subtitle,
    .resources-hero__subtitle,
    .glossary-hero__subtitle,
    .guide-hero__subtitle,
    .agency-hero__subtitle,
    .tools-hero__subtitle,
    .tool-hero__subtitle,
    .hero-section .hero-subtitle,
    .hero p.hero-subtitle {
        font-size: 1rem !important;
    }

    /* Section titles - smaller than hero */
    .section-title,
    .section-title-center,
    .section-title-centered,
    h2.section-title,
    main section h2,
    .comparison-section h2,
    .templates-section h2,
    .examples-section h2,
    .faq-section h2,
    .features-section h2,
    .benefits-section h2,
    .how-it-works h2,
    .testimonials-section h2,
    .pricing-section h2,
    .cta-section h2 {
        font-size: 1.375rem !important;
    }

    /* Subsection titles - only generic classes */
    .subsection-title,
    .benefit-title {
        font-size: 1.25rem !important;
    }
}

/* ===================================
   EXTRA SMALL MOBILE (max-width: 360px)
   Minimum readable sizes
   =================================== */

@media (max-width: 360px) {
    .hero-title,
    .hero-new .hero-title,
    .templates-hero__title,
    .comparison-hero .hero-title,
    .examples-hero__title,
    .resources-hero__title,
    .glossary-hero__title,
    .guide-hero__title,
    .agency-hero__title,
    .tools-hero__title,
    .tool-hero__title,
    h1.hero-title,
    .hero-section h1,
    .hero h1 {
        font-size: 1.5rem !important;
    }

    .hero-subtitle,
    .hero-new .hero-subtitle,
    .templates-hero__subtitle,
    .comparison-hero .hero-subtitle,
    .examples-hero__subtitle,
    .hero-section .hero-subtitle {
        font-size: 0.9375rem !important;
    }

    .section-title,
    .section-title-center,
    .section-title-centered,
    h2.section-title,
    main section h2 {
        font-size: 1.25rem !important;
    }

    /* Subsection titles - only generic classes */
    .subsection-title,
    .benefit-title {
        font-size: 1.125rem !important;
    }
}

/* ===================================================
   SECTION PADDING NORMALIZATION
   Consistent vertical padding across all sections
   NOTE: Scoped to main content area only (excludes footer)
   =================================================== */

/* Desktop section padding */
main section,
main .section,
.comparison-section,
.features-section,
.benefits-section,
.how-it-works-section,
.testimonials-section,
.faq-section,
.cta-section,
.templates-section,
.examples-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* Tablet section padding */
@media (max-width: 1024px) {
    main section,
    main .section,
    .comparison-section,
    .features-section,
    .benefits-section,
    .how-it-works-section,
    .testimonials-section,
    .faq-section,
    .cta-section,
    .templates-section,
    .examples-section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

/* Mobile section padding */
@media (max-width: 768px) {
    main section,
    main .section,
    .comparison-section,
    .features-section,
    .benefits-section,
    .how-it-works-section,
    .testimonials-section,
    .faq-section,
    .cta-section,
    .templates-section,
    .examples-section {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
}

/* Small mobile section padding */
@media (max-width: 480px) {
    main section,
    main .section,
    .comparison-section,
    .features-section,
    .benefits-section,
    .how-it-works-section,
    .testimonials-section,
    .faq-section,
    .cta-section,
    .templates-section,
    .examples-section {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
}

/* ===================================================
   CONTAINER PADDING NORMALIZATION
   =================================================== */

/* Desktop container padding */
.container,
.hero-container,
.hero-new-container,
.section-container {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

/* Tablet container padding */
@media (max-width: 1024px) {
    .container,
    .hero-container,
    .hero-new-container,
    .section-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

/* Mobile container padding */
@media (max-width: 768px) {
    .container,
    .hero-container,
    .hero-new-container,
    .section-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Small mobile container padding */
@media (max-width: 480px) {
    .container,
    .hero-container,
    .hero-new-container,
    .section-container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

/* Extra small mobile container padding */
@media (max-width: 360px) {
    .container,
    .hero-container,
    .hero-new-container,
    .section-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ===================================================
   HERO SECTION PADDING
   NOTE: padding-top is handled by mobile-hero-fixes.css for proper
   header/banner accounting. Only set padding-bottom here.
   =================================================== */

/* Desktop hero padding-bottom */
.hero-section,
.hero-new,
.templates-hero,
.comparison-hero,
.examples-hero,
.resources-hero,
.glossary-hero,
.guide-hero,
.agency-hero,
.tools-hero,
.tool-hero {
    padding-bottom: 3rem;
}

/* Tablet hero padding-bottom */
@media (max-width: 1024px) {
    .hero-section,
    .hero-new,
    .templates-hero,
    .comparison-hero,
    .examples-hero,
    .resources-hero,
    .glossary-hero,
    .guide-hero,
    .agency-hero,
    .tools-hero,
    .tool-hero {
        padding-bottom: 2.5rem;
    }
}

/* Mobile hero padding-bottom */
@media (max-width: 768px) {
    .hero-section,
    .hero-new,
    .templates-hero,
    .comparison-hero,
    .examples-hero,
    .resources-hero,
    .glossary-hero,
    .guide-hero,
    .agency-hero,
    .tools-hero,
    .tool-hero {
        padding-bottom: 2rem;
    }
}

/* Small mobile hero padding-bottom */
@media (max-width: 480px) {
    .hero-section,
    .hero-new,
    .templates-hero,
    .comparison-hero,
    .examples-hero,
    .resources-hero,
    .glossary-hero,
    .guide-hero,
    .agency-hero,
    .tools-hero,
    .tool-hero {
        padding-bottom: 1.5rem;
    }
}

/* Extra small mobile hero padding-bottom */
@media (max-width: 360px) {
    .hero-section,
    .hero-new,
    .templates-hero,
    .comparison-hero,
    .examples-hero,
    .resources-hero,
    .glossary-hero,
    .guide-hero,
    .agency-hero,
    .tools-hero,
    .tool-hero {
        padding-bottom: 1.25rem;
    }
}

/* ===================================================
   GAP AND SPACING NORMALIZATION
   =================================================== */

/* Grid gaps */
.grid,
.cards-grid,
.features-grid,
.templates-grid {
    gap: 1.5rem;
}

@media (max-width: 768px) {
    .grid,
    .cards-grid,
    .features-grid,
    .templates-grid {
        gap: 1.25rem;
    }
}

@media (max-width: 480px) {
    .grid,
    .cards-grid,
    .features-grid,
    .templates-grid {
        gap: 1rem;
    }
}

/* ===================================================
   CTA SECTION SPACING
   =================================== */

.cta-section,
.final-cta,
.bottom-cta {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (max-width: 768px) {
    .cta-section,
    .final-cta,
    .bottom-cta {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

@media (max-width: 480px) {
    .cta-section,
    .final-cta,
    .bottom-cta {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
}

/* ===================================================
   FAQ SECTION SPACING
   =================================== */

.faq-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

@media (max-width: 768px) {
    .faq-section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

@media (max-width: 480px) {
    .faq-section {
        padding-top: 2.5rem;
        padding-bottom: 2.5rem;
    }
}

/* ===================================================
   BODY TEXT NORMALIZATION
   NOTE: Scoped to main content area only
   =================================== */

main p,
main .body-text,
main .description,
.hero-subtitle,
.hero-description {
    font-size: 1rem;
    line-height: 1.6;
}

@media (max-width: 480px) {
    main p,
    main .body-text,
    main .description {
        font-size: 0.9375rem;
        line-height: 1.5;
    }
}

/* ===================================================
   BADGE/LABEL NORMALIZATION
   NOTE: Scoped to main content area only
   =================================== */

main .badge,
.hero-badge,
.section-badge,
main .label {
    font-size: 0.8125rem;
    padding: 0.5rem 1rem;
}

@media (max-width: 480px) {
    main .badge,
    .hero-badge,
    .section-badge,
    main .label {
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
    }
}