/**
 * Brand Section Styles
 * Professional brand section with title and description
 * Following CodLion development guide standards
 */

/* ==========================================================================
   CSS VARIABLES - BRAND SECTION
   ========================================================================== */

:root {
    /* Brand Section Colors */
    --brand-bg-color: #f8f9fa;
    --brand-title-color: var(--text-color);
    --brand-description-color: var(--text-secondary-color);
    
    /* Brand Section Typography - Using Theme Variables (H3 for homepage sections) */
    --brand-title-size: var(--h3-font-size);
    --brand-title-weight: var(--heading-font-weight);
    --brand-description-size: var(--body-font-size);
    --brand-description-weight: var(--body-font-weight);
    --brand-line-height: var(--body-line-height);
    
    /* Brand Section Spacing */
    --brand-section-padding: 40px 0;
    --brand-container-max-width: 800px;
    --brand-title-margin: 0 0 15px 0;
    --brand-description-margin: 0;
    
    /* Mobile Brand Section */
    --brand-mobile-padding: 40px 0;
    --brand-mobile-title-size: calc(var(--h3-font-size) * 0.9);
    --brand-mobile-description-size: calc(var(--body-font-size) * 0.9);
}

/* ==========================================================================
   BRAND SECTION LAYOUT
   ========================================================================== */

.brand-section {
    background: var(--brand-bg-color);
    padding: var(--brand-section-padding);
    text-align: center;
}

.brand-container {
    max-width: var(--brand-container-max-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================================================
   BRAND SECTION TYPOGRAPHY
   ========================================================================== */

.brand-title {
    font-size: var(--h3-font-size);
    font-weight: var(--heading-font-weight);
    color: var(--text-color);
    margin: 0 0 20px 0;
    font-family: var(--main-font);
    line-height: var(--heading-line-height);
    letter-spacing: var(--letter-spacing);
    text-align: center;
}

.brand-description {
    font-size: var(--h4-font-size);
    font-weight: var(--body-font-weight);
    color: var(--text-secondary-color);
    margin: 0;
    font-family: var(--main-font);
    line-height: var(--body-line-height);
    letter-spacing: var(--letter-spacing);
    text-align: center;
}

/* ==========================================================================
   RESPONSIVE DESIGN - PROFESSIONAL BREAKPOINT STRATEGY
   ========================================================================== */

/* Mobile/Tablet styles (Following dev guide: max-width: 991px) */
@media (max-width: 991px) {
    .brand-section {
        padding: 30px 0;
    }
    
    .brand-title {
        font-size: calc(var(--h3-font-size) * 0.9);
        font-weight: 500; /* Lighter weight for mobile readability */
        margin-bottom: 15px;
    }
    
    .brand-description {
        font-size: calc(var(--h4-font-size) * 0.9);
        font-weight: 400; /* Normal weight for mobile subtitles */
    }
}

/* Desktop styles (Following dev guide: min-width: 992px) */
@media (min-width: 992px) {
    .brand-container {
        padding: 0 30px;
    }
    
    .brand-title {
        font-size: var(--h3-font-size);
        margin-bottom: 20px;
    }
    
    .brand-description {
        font-size: var(--h4-font-size);
    }
}

/* ==========================================================================
   RTL/LTR LANGUAGE MODE SUPPORT
   ========================================================================== */

/* RTL Support */
html[dir="rtl"] .brand-title,
html[dir="rtl"] .brand-description,
body.rtl-mode .brand-title,
body.rtl-mode .brand-description,
body.arabic-mode .brand-title,
body.arabic-mode .brand-title {
    text-align: center;
    margin-bottom: 15px;
}

/* ==========================================================================
   ACCESSIBILITY AND PERFORMANCE
   ========================================================================== */

/* Focus states for accessibility */
.brand-section:focus-within {
    outline: none;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .brand-section * {
        transition: none;
    }
}

/* Print styles */
@media print {
    .brand-section {
        background: white;
        padding: 20px 0;
    }
    
    .brand-title,
    .brand-description {
        color: black;
    }
}