/* =========================================================
   S S ENTERPRISES — MOBILE EDGE-TO-EDGE FIX
   Append AFTER style.css and premium.css.
   Fixes side gaps, horizontal overflow and narrow mobile layout.
========================================================= */

/* Correct viewport sizing */
html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: clip;
}

/* Prevent Bootstrap rows/columns from creating page-level overflow */
.container,
.container-fluid,
.row,
[class*="col-"] {
    min-width: 0;
}

img,
video,
iframe,
svg {
    max-width: 100%;
}

.hero-section,
.trust-strip,
.section-space,
.values-section,
.consultation-section,
.contact-section,
.site-footer {
    width: 100%;
    max-width: 100%;
}

/* Avoid 100vw on sections; it can include scrollbar width */
@media (max-width: 767.98px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        width: 100%;
        max-width: 100%;
        padding-right: 16px;
        padding-left: 16px;
    }

    .row {
        --bs-gutter-x: 1.25rem;
    }

    /* Hero fills the device width with no artificial side margins */
    .hero-section {
        min-height: auto;
        padding: 104px 0 54px;
        margin: 0;
        overflow: clip;
    }

    .hero-section > .container {
        padding-right: 16px;
        padding-left: 16px;
    }

    .hero-content,
    .hero-form-card,
    .about-copy,
    .contact-copy,
    .contact-form-panel {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    /* Keep headings and long text inside the viewport */
    .hero-content h1,
    .section-heading h2,
    .values-section h2,
    .contact-form-panel h3 {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .hero-description,
    .section-heading > p,
    .service-body p,
    .why-card p,
    .process-step p,
    .footer-description {
        overflow-wrap: anywhere;
    }

    /* Remove accidental fixed widths that cause horizontal scroll */
    .solar-mega-menu,
    .hero-form-card,
    .contact-form-panel,
    .consultation-card,
    .testimonial-card {
        min-width: 0;
        max-width: 100%;
    }

    /* Images and gallery cards should occupy their grid cell */
    .about-visual,
    .about-main-image,
    .service-card,
    .service-image,
    .gallery-card {
        max-width: 100%;
        min-width: 0;
    }

    .about-main-image,
    .service-image img,
    .gallery-card img {
        width: 100%;
    }

    /* Prevent decorative circles/glows from widening the page */
    .hero-section::after,
    .values-section::before,
    .values-section::after,
    .contact-section::after,
    .site-footer::before,
    .site-footer::after {
        max-width: 100%;
        pointer-events: none;
    }

    /* Floating controls stay inside the viewport */
    .floating-contact {
        right: max(8px, env(safe-area-inset-right));
        bottom: max(10px, env(safe-area-inset-bottom));
    }

    .footer-bottom-inner,
    .footer-cta {
        min-width: 0;
    }
}

@media (max-width: 575.98px) {
    .container,
    .container-sm {
        padding-right: 14px;
        padding-left: 14px;
    }

    .row {
        --bs-gutter-x: 1rem;
    }

    /* Don't let nested containers add another side gap */
    .hero-section .container,
    .section-space .container,
    .values-section .container,
    .contact-section .container,
    .site-footer .container {
        padding-right: 14px;
        padding-left: 14px;
    }

    .hero-section {
        padding-top: 96px;
        padding-bottom: 48px;
    }

    .hero-content h1 {
        font-size: clamp(38px, 10.5vw, 54px);
        letter-spacing: -1.5px;
        line-height: 1.08;
    }

    .hero-description {
        font-size: 15px;
        line-height: 1.72;
    }

    .hero-actions {
        width: 100%;
    }

    .hero-actions > a {
        width: 100%;
        max-width: 100%;
    }

    .hero-form-card {
        padding: 20px 15px;
        margin-right: 0;
        margin-left: 0;
    }

    .field-wrap {
        width: 100%;
        min-width: 0;
    }

    .field-wrap input,
    .field-wrap select {
        min-width: 0;
    }

    .trust-strip .row {
        row-gap: 8px;
    }

    .service-image {
        height: 215px;
    }

    .gallery-card {
        height: 225px;
    }

    .footer-cta {
        padding: 21px 16px;
    }
}

/* Use the actual device viewport on modern mobile browsers */
@supports (width: 100dvw) {
    @media (max-width: 767.98px) {
        body,
        .hero-section,
        .trust-strip,
        .section-space,
        .values-section,
        .consultation-section,
        .contact-section,
        .site-footer {
            max-width: 100dvw;
        }
    }
}