/**
 * UNIVERSAL TEXT ALIGNMENT SYSTEM
 * ===============================
 * 
 * This CSS file provides a centralized alignment system for all themes.
 * Import this file ONCE in your main layout to avoid duplication.
 * 
 * Architecture:
 * - Base classes: .align-start, .align-center, .align-end
 * - Theme overrides: Specific rules for each theme's quirks
 * - Icon centering: Universal rule for all icon containers
 * 
 * Usage:
 * Add classes generated by AlignmentHelper.cs to your HTML elements
 * 
 * @author: StroNow Development Team
 * @version: 1.0
 */

/*--------------------------------------------------------------
# Base Alignment Classes
--------------------------------------------------------------*/
/* Extend Bootstrap's text-* utilities with higher specificity */
.align-start,
.text-start.align-start {
    text-align: left !important;
}

.align-center,
.text-center.align-center {
    text-align: center !important;
}

.align-end,
.text-end.align-end {
    text-align: right !important;
}

.align-justify,
.text-justify.align-justify {
    text-align: justify !important;
}

/* Ensure all child elements inherit alignment */
.align-start *:not(.icon):not([class*="icon-"]) {
    text-align: left !important;
}

.align-center *:not(.icon):not([class*="icon-"]) {
    text-align: center !important;
}

.align-end *:not(.icon):not([class*="icon-"]) {
    text-align: right !important;
}

/*--------------------------------------------------------------
# Theme-Specific Alignment Fixes
--------------------------------------------------------------*/

/* REGNA THEME - Decorative line positioning */
.section-title-regna.align-start h2::before,
.section-title-regna.align-start h2::after,
.regna-about .align-start h2::after,
.about.regna-about .content.align-start h2::after {
    left: 0 !important;
    transform: translateX(0) !important;
}

/* REGNA CTA - Fix paragraph centering */
.regna-cta .align-start p,
.regna-cta .align-start h3 {
    margin-left: 0 !important;
    margin-right: auto !important;
}

.regna-cta .align-end p,
.regna-cta .align-end h3 {
    margin-left: auto !important;
    margin-right: 0 !important;
}

.regna-cta .align-center p,
.regna-cta .align-center h3 {
    margin-left: auto !important;
    margin-right: auto !important;
}

.section-title-regna.align-center h2::before,
.section-title-regna.align-center h2::after,
.regna-about .align-center h2::after,
.about.regna-about .content.align-center h2::after {
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.section-title-regna.align-end h2::before,
.section-title-regna.align-end h2::after,
.regna-about .align-end h2::after,
.about.regna-about .content.align-end h2::after {
    left: auto !important;
    right: 0 !important;
    transform: translateX(0) !important;
}

/* STRATEGY THEME - Override default center alignment */
.strategy-about .section-title.align-start,
.strategy-features .section-title.align-start,
.strategy-services .section-title.align-start,
.strategy-portfolio .section-title.align-start,
.strategy-team .section-title.align-start,
.strategy-testimonials .section-title.align-start,
.strategy-contact .section-title.align-start,
.strategy-hero .content.align-start,
.strategy-cta.align-start {
    text-align: left !important;
}

.strategy-about .section-title.align-end,
.strategy-features .section-title.align-end,
.strategy-services .section-title.align-end,
.strategy-portfolio .section-title.align-end,
.strategy-team .section-title.align-end,
.strategy-testimonials .section-title.align-end,
.strategy-contact .section-title.align-end,
.strategy-hero .content.align-end,
.strategy-cta.align-end {
    text-align: right !important;
}

/* EVOLVE THEME - Section title alignment */
.evolve-section-title.align-start,
.evolve-hero.align-start,
.evolve-about.align-start,
.evolve-services.align-start,
.evolve-features.align-start,
.evolve-portfolio.align-start,
.evolve-testimonials.align-start,
.evolve-team.align-start,
.evolve-contact.align-start,
.evolve-cta.align-start {
    text-align: left !important;
}

.evolve-section-title.align-end,
.evolve-hero.align-end,
.evolve-about.align-end,
.evolve-services.align-end,
.evolve-features.align-end,
.evolve-portfolio.align-end,
.evolve-testimonials.align-end,
.evolve-team.align-end,
.evolve-contact.align-end,
.evolve-cta.align-end {
    text-align: right !important;
}

/* MODERN MINIMALIST & OTHER THEMES */
.modern-minimalist-hero.align-start *:not(.icon),
.bold-creative-hero.align-start *:not(.icon),
.elegant-luxury-hero.align-start *:not(.icon) {
    text-align: left !important;
}

.modern-minimalist-hero.align-end *:not(.icon),
.bold-creative-hero.align-end *:not(.icon),
.elegant-luxury-hero.align-end *:not(.icon) {
    text-align: right !important;
}

/*--------------------------------------------------------------
# Universal Icon Centering
# IMPORTANT: Icons are ALWAYS centered regardless of text alignment
--------------------------------------------------------------*/
.icon,
[class*="icon-box"],
[class*="service-icon"],
[class*="feature-icon"],
.icon-container,
.social-links,
.team-social {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Ensure icon containers don't inherit text alignment */
.icon *,
[class*="icon-box"] *,
[class*="service-icon"] *,
[class*="feature-icon"] * {
    text-align: center !important;
}

/*--------------------------------------------------------------
# Button Alignment
--------------------------------------------------------------*/
.btn-wrapper {
    display: block;
}

.align-start .btn-wrapper {
    text-align: left !important;
}

.align-center .btn-wrapper {
    text-align: center !important;
}

.align-end .btn-wrapper {
    text-align: right !important;
}

/* CTA buttons specific alignment */
.align-start .cta-btn,
.align-start .btn-get-started,
.align-start .btn-primary {
    margin-left: 0;
    margin-right: auto;
}

.align-center .cta-btn,
.align-center .btn-get-started,
.align-center .btn-primary {
    margin-left: auto;
    margin-right: auto;
}

.align-end .cta-btn,
.align-end .btn-get-started,
.align-end .btn-primary {
    margin-left: auto;
    margin-right: 0;
}

/*--------------------------------------------------------------
# Flexbox Alignment Helpers
--------------------------------------------------------------*/
/* Override Bootstrap's justify-content when combined with alignment classes */
.d-flex.align-start,
.align-start .d-flex:not(.icon):not([class*="icon-"]) {
    justify-content: flex-start !important;
}

.d-flex.align-center,
.align-center .d-flex:not(.icon):not([class*="icon-"]) {
    justify-content: center !important;
}

.d-flex.align-end,
.align-end .d-flex:not(.icon):not([class*="icon-"]) {
    justify-content: flex-end !important;
}

/*--------------------------------------------------------------
# Responsive Adjustments
--------------------------------------------------------------*/
@media (max-width: 768px) {
    /* Reduce padding on mobile */
    .ps-5.align-padding-start {
        padding-left: 1.5rem !important;
    }
    
    .pe-5.align-padding-end {
        padding-right: 1.5rem !important;
    }
    
    /* Center align on mobile for better readability */
    .mobile-center {
        text-align: center !important;
    }
    
    .mobile-center * {
        text-align: center !important;
    }
}