/**
 * Global Typography Components - Figma Design System
 * Reusable title and text styles
 */

/* Title with Madagascar Flag Underline */
.title-flag {
    display: inline-block;
    text-align: center;
}

.title-flag-text {
    font-size: 45px;
    font-weight: 700;
    color: #333333;
    margin: 0 0 0.5rem 0;
    line-height: 100%;
    letter-spacing: 0;
    text-align: center;
}

/* Flag underline - White, Red, Green (Madagascar colors) */
.title-flag-underline {
    display: flex;
    height: 4px;
    width: 100%;
    border-radius: 2px;
    overflow: hidden;
}

.title-flag-underline .flag-white {
    flex: 1;
    background-color: #FFFFFF;
    border: 1px solid #e0e0e0;
    border-right: none;
}

.title-flag-underline .flag-red {
    flex: 1;
    background-color: #ED2024;
}

.title-flag-underline .flag-green {
    flex: 1;
    background-color: #2e7d32;
}

/* Centered title wrapper */
.title-flag-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

/* Size variants */
.title-flag.title-flag-sm .title-flag-text {
    font-size: 1.25rem;
}

.title-flag.title-flag-sm .title-flag-underline {
    height: 3px;
}

.title-flag.title-flag-lg .title-flag-text {
    font-size: 2rem;
}

.title-flag.title-flag-lg .title-flag-underline {
    height: 5px;
}

/* Section heading (green, no flag) */
.section-heading {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2e7d32;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Section heading with flag underline */
.section-heading-flag {
    text-align: center;
    margin-bottom: 2rem;
}

.section-heading-flag .title-flag {
    margin: 0 auto;
}