/**
 * Section Badges - Global Reusable Component
 * 
 * This file contains all styles for section badges used across the website.
 * All styling has been removed for a clean, simple appearance.
 * 
 * Usage: Add class "section-badge" to any span or div element
 * Example: <span class="section-badge">About TCL</span>
 * 
 * @package TCLTheme
 * @version 3.0.0 - Clean & Simple
 */

/* ========================================
   GLOBAL SECTION BADGE STYLES
   ======================================== */

/**
 * Main section badge styling
 * Completely unstyled - no background, borders, or effects
 */
.section-badge {
    /* Remove all styling */
    display: inline-block !important;
    position: relative !important;
    
    /* Remove all spacing */
    padding: 0 !important;
    margin: 0 !important;
    
    /* Remove all colors */
    background: none !important;
    color: inherit !important;
    border: none !important;
    
    /* Remove all typography styling */
    font-weight: inherit !important;
    font-size: inherit !important;
    text-transform: none !important;
    letter-spacing: inherit !important;
    text-shadow: none !important;
    
    /* Remove all borders and shapes */
    border-radius: 0 !important;
    outline: none !important;
    
    /* Remove all effects */
    box-shadow: none !important;
    
    /* Remove all animations */
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    visibility: visible !important;
    
    /* Remove overflow */
    overflow: visible !important;
}

/**
 * Remove all hover effects
 */
.section-badge:hover {
    background: none !important;
    color: inherit !important;
    border: none !important;
    transform: none !important;
    box-shadow: none !important;
    transition: none !important;
}

/**
 * Remove all focus effects
 */
.section-badge:focus {
    outline: none !important;
    background: none !important;
}

/* ========================================
   SECTION HEADER STYLES
   ======================================== */

/**
 * Section header container
 * Centers the badge and title
 */
.section-header {
    text-align: center !important;
    margin-bottom: 2.5rem !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    
    /* Disable animations */
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
}

/**
 * Section title styling
 * Large, bold heading below the badge
 */
.section-title {
    color: #1f2937 !important;
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding-bottom: 1rem !important;
    letter-spacing: -0.5px !important;
    line-height: 1.3 !important;
    
    /* Disable animations */
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/**
 * Mobile devices (768px and below)
 */
@media (max-width: 768px) {
    .section-badge {
        /* No mobile-specific styling */
    }
    
    .section-title {
        font-size: 1.8rem !important;
    }
    
    .section-header {
        margin-bottom: 2rem !important;
    }
}

/**
 * Small mobile devices (480px and below)
 */
@media (max-width: 480px) {
    .section-title {
        font-size: 1.5rem !important;
    }
    
    .section-header {
        margin-bottom: 1.5rem !important;
    }
}