/* 
=================================================================
UNIVERSAL CENTERING SYSTEM - Mobile Robust
Ensures all content is perfectly centered across all screen sizes
=================================================================
*/

/* ================================================================
   FLEXBOX CENTERING UTILITIES
   ================================================================ */

/* Universal Flexbox Centering - Center items both horizontally & vertically */
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Horizontal only */
.flex-center-x {
    display: flex;
    justify-content: center;
}

/* Vertical only */
.flex-center-y {
    display: flex;
    align-items: center;
}

/* Column layout centered */
.flex-center-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Content centered with wrap */
.flex-center-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

/* ================================================================
   GRID CENTERING UTILITIES
   ================================================================ */

/* Center content in CSS Grid */
.grid-center {
    display: grid;
    place-items: center;
}

/* Grid with content centered horizontally */
.grid-center-x {
    display: grid;
    justify-items: center;
}

/* Grid with content centered vertically */
.grid-center-y {
    display: grid;
    align-items: center;
}

/* ================================================================
   AUTO MARGIN CENTERING (Traditional)
   ================================================================ */

/* Center block elements with auto margin */
.center-block {
    margin-left: auto;
    margin-right: auto;
}

/* Center flexbox children with auto margin on sides */
.center-flex-child {
    margin: 0 auto;
}

/* ================================================================
   TEXT ALIGNMENT UTILITIES
   ================================================================ */

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

/* ================================================================
   WIDTH & MAX-WIDTH UTILITIES (Prevent overflow)
   ================================================================ */

.w-full {
    width: 100%;
}

.w-auto {
    width: auto;
}

.max-w-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.max-w-tablet {
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
}

.max-w-mobile {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* ================================================================
   PADDING & MARGIN CENTERING
   ================================================================ */

.p-center {
    padding-left: auto;
    padding-right: auto;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.my-auto {
    margin-top: auto;
    margin-bottom: auto;
}

/* ================================================================
   SECTION CENTERING - Major Sections
   ================================================================ */

section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

section > * {
    width: 100%;
    max-width: 1200px;
}

section > .container {
    width: 100%;
}

/* ================================================================
   CONTAINER CENTERING - Primary containers
   ================================================================ */

.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container > * {
    width: 100%;
}

/* ================================================================
   HERO SECTION CENTERING
   ================================================================ */

.hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.hero h1,
.hero h2,
.hero p {
    text-align: center;
    width: 100%;
}

/* ================================================================
   CARD & GRID CENTERING
   ================================================================ */

.card,
.product-card,
.service-card,
.process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.grid,
.service-grid,
.process-grid {
    display: grid;
    place-items: stretch;
    justify-content: center;
    width: 100%;
}

/* ================================================================
   FORM CENTERING
   ================================================================ */

form,
.form-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

form > * {
    width: 100%;
    max-width: 500px;
}

input,
textarea,
select,
.form-group {
    width: 100%;
    display: block;
    margin: 0 auto;
}

/* ================================================================
   BUTTON CENTERING
   ================================================================ */

.btn-group,
.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    width: 100%;
}

.btn {
    margin: 0 auto;
}

/* ================================================================
   IMAGE & MEDIA CENTERING
   ================================================================ */

img,
picture,
video,
svg {
    display: block;
    margin: 0 auto;
}

.image-container,
.img-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* ================================================================
   SLIDER/CAROUSEL CENTERING
   ================================================================ */

.swiper,
.slider-container,
.carousel {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 auto;
}

.swiper-slide,
.slider-item {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ================================================================
   FOOTER & BOTTOM SECTIONS CENTERING
   ================================================================ */

footer,
.footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
}

footer > *,
.footer > * {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* ================================================================
   LIST & NAVIGATION CENTERING
   ================================================================ */

nav,
.nav-links,
.navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

ul, ol {
    display: flex;
    flex-direction: column;
    align-items: center;
}

li {
    text-align: center;
}

/* ================================================================
   RESPONSIVE CENTERING - Mobile Specific
   ================================================================ */

@media (max-width: 480px) {
    .container {
        padding: 0 1rem;
    }

    section {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .hero {
        padding: 1.5rem;
    }

    .card,
    .product-card,
    .service-card {
        padding: 1rem;
    }

    form > * {
        max-width: 100%;
    }

    .btn-group {
        gap: 0.5rem;
    }

    /* Ensure all text is centered on mobile */
    h1, h2, h3, h4, h5, h6 {
        text-align: center !important;
    }

    p {
        text-align: center;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 1.5rem;
    }

    section {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .service-grid {
        grid-template-columns: 1fr;
    }

    form > * {
        max-width: 100%;
    }

    /* Override any left align on mobile */
    h1, h2, h3 {
        text-align: center !important;
    }
}

@media (max-width: 1024px) {
    .container {
        max-width: 100%;
        padding: 0 1.5rem;
    }

    .grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

/* ================================================================
   FIX OVERFLOW & CENTERING ISSUES
   ================================================================ */

/* Prevent horizontal overflow */
body,
html {
    width: 100%;
    overflow-x: hidden;
}

/* Fix centered content that might overflow */
.overflow-hidden {
    overflow: hidden;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

/* ================================================================
   ALIGNMENT HELPERS - Last Resort
   ================================================================ */

/* Force centering on stubborn elements */
.force-center {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

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

/* ================================================================
   SPACING UTILITIES FOR CENTERING
   ================================================================ */

.space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.space-around {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.space-evenly {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

/* ================================================================
   ACCESSIBILITY - Ensure centered content is still readable
   ================================================================ */

.centered-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
}

/* Ensure links in centered content are properly aligned */
a {
    display: inline-block;
}

/* ================================================================
   DEBUG MODE - Uncomment to visualize centered areas
   ================================================================ */

/* 
.flex-center,
.grid-center,
.container,
.card {
    border: 1px solid red;
}
*/