/**
 * Global Page Fixes - Apply homepage styling to ALL pages
 * This ensures consistency across the entire site
 */

/* ============================================
   TEXT ALIGNMENT & CENTERING
   ============================================ */

/* Center all main headings */
h1, h2, .falso-h2 {
    text-align: center !important;
}

/* Center all subtitles and cursiva text */
.cursiva, .page-title-intro {
    text-align: center !important;
}

/* Center all content paragraphs by default */
section .container > p {
    text-align: center !important;
}

/* Keep left-aligned text ONLY in specific contexts */
.accordion-body p,
.form-group {
    text-align: left !important;
}

/* ALL COLUMN CONTENT MUST BE CENTERED */
.col-md-4,
.col-md-4 p,
.col-md-4 div,
.col-md-6,
.col-md-6 p,
.col-md-6 div,
.col-sm-6,
.col-sm-6 p,
.col-sm-7,
.col-sm-7 p {
    text-align: center !important;
}

/* Ensure ALL icons are centered */
.col-md-4 i,
.col-md-6 i {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
}

/* ============================================
   LINK COLORS - NO BLUE LINKS
   ============================================ */

/* All links should be dark grey, not blue */
a {
    color: #333 !important;
    text-decoration: none !important;
}

a:hover {
    color: #f1a820 !important;
}

/* Technology/service links in content */
section a[href*="development"] {
    color: #333 !important;
}

section a[href*="development"]:hover {
    color: #f1a820 !important;
}

/* Navigation links stay white */
.navbar-nav .nav-link {
    color: #fff !important;
}

.dropdown-item {
    color: #333 !important;
}

/* Footer links stay white */
footer a {
    color: #fefefe !important;
}

/* Case study links can be blue */
a[href*="case-studies"] {
    color: #1b1bff !important;
}

/* ============================================
   SPACING & PADDING
   ============================================ */

/* Add proper spacing to all sections */
section {
    padding: 5em 0 !important;
}

/* Orange banner sections have specific padding */
section[style*="background:#f1a820"] {
    padding: 7em 0 !important;
}

/* Sections with padding-top:0 (for triangles) */
section[style*="padding-top:0"] {
    padding-top: 0 !important;
}

/* Add spacing between rows */
.row {
    margin-top: 2em;
}

/* Add spacing to columns */
.col-md-4, .col-md-6, .col-sm-6 {
    margin-top: 2em;
    padding: 0 15px;
}

/* ============================================
   TRIANGLE SEPARATORS
   ============================================ */

/* Triangles should be at the BEGINNING of sections */
/* They are already in the HTML, just ensure they display correctly */
section > .container > div[style*="border-top"] {
    margin: 0 auto !important;
}

/* ============================================
   TITLES & TEXT TRANSFORM
   ============================================ */

/* Section titles should be uppercase where appropriate */
section h2 {
    text-transform: uppercase !important;
}

/* Technology/service  names in grids */
section h3 {
    text-align: center !important;
}

/* ============================================
   BUTTONS
   ============================================ */

/* Ensure all buttons are centered */
.contenedor-btn-default {
    text-align: center !important;
}

/* Button text color */
.btn-default, .falso-btn-default {
    color: #333 !important;
}

.btn-default[style*="background:#f1a820"],
.falso-btn-default[style*="background:#f1a820"] {
    color: #333 !important;
}

/* ============================================
   IMAGES
   ============================================ */

/* Center all images */
img.img-fluid {
    display: block !important;
    margin: 0 auto !important;
}

/* ============================================
   SPECIFIC SECTIONS
   ============================================ */

/* Page title section */
.page-title {
    padding-top: 5em !important;
    padding-bottom: 5em !important;
    text-align: center !important;
}

/* Benefits/Features sections with icons */
.far.fa-check-circle,
.fas.fa-mobile-alt,
.fas.fa-laptop-code,
.fas.fa-exchange-alt {
    color: #333 !important;
}

/* Icon sizes and centering */
section i[class*="fa-"] {
    font-size: 3.4em !important;
}

/* Exception: Form message icons should be normal size */
#form-message i[class*="fa-"] {
    font-size: 1.2em !important;
    display: inline !important;
    width: auto !important;
    margin-right: 0.5em !important;
}

/* Exception: Button icons (like spinner in "Sending...") should be normal size */
button i[class*="fa-"],
.btn i[class*="fa-"],
.btn-primary i[class*="fa-"] {
    font-size: 1rem !important;
    display: inline !important;
    width: auto !important;
    margin-right: 0.5em !important;
}

/* Fix icon alignment in Mobile App Development section */
section i.fab.fa-android,
section i.fab.fa-apple,
section i.fas.fa-random {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}

/* Ensure icon paragraphs are centered */
section p > i[class*="fa-"] {
    display: inline-block !important;
}

section p:has(> i.fab.fa-android),
section p:has(> i.fab.fa-apple),
section p:has(> i.fas.fa-random) {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
}

/* ============================================
   FAQ ACCORDION
   ============================================ */

/* Accordion styling consistency */
.accordion-item {
    border: 1px solid #dee2e6 !important;
    margin-bottom: 0.5em !important;
}

.accordion-button {
    background-color: #f8f9fa !important;
    color: #333 !important;
}

.accordion-button:not(.collapsed) {
    background-color: #e7e7e7 !important;
    color: #333 !important;
}

.accordion-button:focus {
    border-color: #dee2e6 !important;
    box-shadow: none !important;
}

.accordion-button::after {
    background-image: none !important;
    content: "▼" !important;
    transform: rotate(0deg) !important;
}

.accordion-button:not(.collapsed)::after {
    transform: rotate(180deg) !important;
}

/* ============================================
   CONTACT FORM
   ============================================ */

/* Ensure contact section has proper background */
section#contact-us,
section.page-section-contacto {
    background: #e8e8e8 !important;
    padding: 5em 0 !important;
}

/* Form styling */
#contactForm {
    background: #fff;
    padding: 2em;
    border-radius: 7px;
}

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

/* Mobile responsive fixes */
@media (max-width: 768px) {
    section {
        padding: 3em 0 !important;
    }
    
    section[style*="background:#f1a820"] {
        padding: 5em 0 !important;
    }
    
    .col-md-4, .col-md-6 {
        margin-top: 1.5em;
    }
    
    /* Center buttons on mobile */
    .contenedor-btn-default {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .contenedor-btn-default a {
        margin: 0;
        min-width: 200px;
    }
}

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

/* Force center alignment */
.text-center-force {
    text-align: center !important;
}

/* Force left alignment when needed */
.text-left-force {
    text-align: left !important;
}

/* Add bottom margin to sections */
section:not(:last-child) {
    margin-bottom: 0 !important;
}