/* ===================================
   Qlabbir Heading Styles - Modern Professional
   Bootstrap 5 Compatible
   =================================== */

/* 
   Default Bootstrap 5 heading sizes for reference:
   h1: 2.5rem (40px)
   h2: 2rem (32px)
   h3: 1.75rem (28px)
   h4: 1.5rem (24px) 
   h5: 1.25rem (20px)
   h6: 1rem (16px)
   
   PROBLEM: These are too large for admin/form labels!
*/

/* ===================================
   PROFESSIONAL HEADING SCALE
   =================================== */

/* Page Titles - Use for main page headers */
h1, .h1 {
    font-size: 2rem !important;          /* 32px - Main page title */
    font-weight: 600;
    color: #212529;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

/* Section Headers - Use for major sections */
h2, .h2 {
    font-size: 1.5rem !important;        /* 24px - Section header */
    font-weight: 600;
    color: #212529;
    margin-bottom: 1rem;
    line-height: 1.3;
}

/* Subsection Headers - Use for subsections */
h3, .h3 {
    font-size: 1.25rem !important;       /* 20px - Subsection header */
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

/* Labels/Names - Use for form sections, admin labels */
h4, .h4 {
    font-size: 1rem !important;          /* 16px - Form section label */
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

/* Small Labels - Use for minor labels */
h5, .h5 {
    font-size: 0.875rem !important;      /* 14px - Small label */
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

/* Tiny Labels - Rarely used */
h6, .h6 {
    font-size: 0.75rem !important;       /* 12px - Tiny label */
    font-weight: 600;
    color: #6c757d;
    margin-bottom: 0.5rem;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ===================================
   SPECIFIC OVERRIDES FOR QLABBIR
   =================================== */

/* Page Title Component */
.page-title h4 {
    font-size: 1rem !important;          /* Keep h4 small for labels */
    margin: 0 0 0.5rem;
    font-weight: 600;
}

.page-title h4 label {
    margin: 0;
    color: #666;
    font-size: 1rem;
}

.page-title h2 {
    font-size: 1.75rem !important;       /* Slightly smaller than default */
    margin-bottom: 1rem;
}

/* Admin Sections - Make h4 more appropriate for labels */
.user-admin h4, 
.useradmin-tabcontent2 h4,
.site-admin h4,
.admin-section h4 {
    font-size: 0.9375rem !important;     /* 15px - Perfect for admin labels */
    color: #444444;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* Popup/Modal Headers */
.popup h2,
.modal-header h2 {
    font-size: 1.25rem !important;       /* 20px - Good for modal titles */
    margin: 0;
    font-weight: 600;
}

.popup h3,
.modal-body h3 {
    font-size: 1.125rem !important;      /* 18px */
    margin: 0.75rem 0;
}

/* Help Content */
.helpContent h2,
.help-popup .modal-body h2 {
    font-size: 1.125rem !important;      /* 18px - Readable but not huge */
    font-weight: 600;
}

/* Tab Content */
.tab-content h2,
.main-content h2:first-of-type {
    font-size: 1.5rem !important;        /* 24px - Good for tab headers */
    margin-bottom: 1rem;
}

/* Wizard Sections */
.wizardpreviewmode h2,
.wizardpreviewmodedescription h2 {
    font-size: 1.25rem !important;       /* 20px */
    text-transform: capitalize;
    line-height: 1.4 !important;
    margin-top: 1rem !important;
}

/* Event/Card Headers */
.event-window h4,
.card-header h4 {
    font-size: 1rem !important;
    margin: 0;
    font-weight: 600;
}

/* Question Titles */
.question-title h1,
.question-title h2,
.question-title h3,
.question-title h4,
.question-title h5,
.question-title h6 {
    color: #000;
    font-weight: 600;
}

.results-heading h2 {
    font-size: 1rem !important;
    margin: 0.5rem 0;
}

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

/* Use these classes when you need specific sizes */
.heading-xl {
    font-size: 2.5rem !important;        /* 40px - Extra large */
}

.heading-lg {
    font-size: 2rem !important;          /* 32px - Large */
}

.heading-md {
    font-size: 1.5rem !important;        /* 24px - Medium */
}

.heading-sm {
    font-size: 1.125rem !important;      /* 18px - Small */
}

.heading-xs {
    font-size: 0.875rem !important;      /* 14px - Extra small */
}

/* Text weights */
.heading-light {
    font-weight: 300;
}

.heading-normal {
    font-weight: 400;
}

.heading-semibold {
    font-weight: 600;
}

.heading-bold {
    font-weight: 700;
}

/* ===================================
   RESPONSIVE ADJUSTMENTS
   =================================== */

@media (max-width: 768px) {
    h1, .h1 {
        font-size: 1.75rem !important;   /* Smaller on mobile */
    }
    
    h2, .h2 {
        font-size: 1.375rem !important;
    }
    
    h3, .h3 {
        font-size: 1.125rem !important;
    }
    
    /* h4, h5, h6 stay the same - they're already small */
}

/* ===================================
   DARK MODE SUPPORT (Optional)
   =================================== */

@media (prefers-color-scheme: dark) {
    h1, h2, h3, .h1, .h2, .h3 {
        color: #f8f9fa;
    }
    
    h4, h5, h6, .h4, .h5, .h6 {
        color: #dee2e6;
    }
}