/* ============================================
   MOBILE RESPONSIVENESS FIXES
   Comprehensive mobile-first responsive styles
   ============================================ */

/* ===========================================
   1. BASE STYLES & BOX MODEL
   =========================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Ensure images are responsive */
img {
    max-width: 100%;
    height: auto;
}

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

/* Hide mobile toggler by default on desktop */
.cli-header-toggler {
    display: none !important;
}

/* ===========================================
   2. MOBILE-FIRST TYPOGRAPHY (< 480px)
   =========================================== */

@media screen and (max-width: 480px) {

    /* Base font adjustments */
    body {
        font-size: 16px;
        line-height: 1.5;
    }

    /* Headings - scaled down for small screens */
    h1,
    .cli-block-title--gigantic {
        font-size: 24px !important;
        line-height: 1.2 !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    h2,
    .cli-block-title--large {
        font-size: 22px !important;
        line-height: 1.25 !important;
    }

    .cli-block-subtitle--big {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }

    .cli-block-subtitle--middle {
        font-size: 14px !important;
        line-height: 1.4 !important;
    }

    .cli-block-description {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }
}

/* ===========================================
   3. SMALL MOBILE SCREENS (481px - 667px)
   =========================================== */

@media screen and (min-width: 481px) and (max-width: 667px) {

    h1,
    .cli-block-title--gigantic {
        font-size: 28px !important;
        line-height: 1.2 !important;
    }

    .cli-block-subtitle--big {
        font-size: 18px !important;
        line-height: 1.4 !important;
    }
}

/* ===========================================
   4. GENERAL MOBILE STYLES (< 768px)
   =========================================== */

@media screen and (max-width: 767px) {

    /* Block content padding */
    .cli-block__content {
        padding-left: 16px !important;
        padding-right: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Reduce vertical padding on mobile */
    .cli-block__content--normal {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .cli-block__content--cover {
        padding-top: 80px !important;
        padding-bottom: 80px !important;
    }

    /* Header adjustments */
    .cli-header__content,
    .cli-block__header-content {
        padding: 12px 16px !important;
    }

    /* Logo text smaller on mobile */
    .cli-logo__text {
        font-size: 16px !important;
    }

    /* Hide extra header info on mobile by default */
    .cli-header__data {
        display: none !important;
    }

    /* Ensure title sizes are readable */
    h1,
    h2,
    .cli-block-title {
        font-size: 26px !important;
        line-height: 1.3 !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Service list items full width */
    .cli-service-list__item {
        width: 100% !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .cli-service-list__item-text {
        width: 100% !important;
        margin-right: 0 !important;
        white-space: normal !important;
    }

    .cli-service-list__item-price {
        align-self: flex-start !important;
    }

    /* Review cards */
    .cli-flex-list {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .cli-flex-list__item {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Buttons - touch-friendly minimum size */
    .cli-button {
        min-height: 48px !important;
        min-width: 48px !important;
        padding: 12px 24px !important;
        font-size: 16px !important;
    }

    .cli-button--big {
        padding: 14px 28px !important;
        font-size: 18px !important;
    }

    /* Full-width buttons on mobile */
    .cli-buttons {
        width: 100% !important;
    }

    .cli-buttons .cli-button {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* ===========================================
   5. HERO SECTION MOBILE FIXES
   =========================================== */

@media screen and (max-width: 767px) {

    /* Hero title - allow wrapping on mobile */
    #n-b522188a-676b-43c0-ae66-f7f683ec7e2f {
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }

    #n-b522188a-676b-43c0-ae66-f7f683ec7e2f .hero-title-line {
        display: inline !important;
        white-space: normal !important;
    }

    /* Hero subtitle - responsive size */
    #n-c774837b-df38-4290-82b6-634591dd1b26 {
        font-size: 18px !important;
        line-height: 1.4 !important;
        white-space: normal !important;
    }

    #n-c774837b-df38-4290-82b6-634591dd1b26 .hero-subtitle-line {
        display: inline !important;
        white-space: normal !important;
    }

    /* Chevron icon smaller on mobile */
    .cli-chevron .cli-block-icon {
        width: 48px !important;
        height: 48px !important;
    }

    .cli-chevron .cli-svg {
        width: 48px !important;
        height: 48px !important;
    }
}

/* Very small screens */
@media screen and (max-width: 480px) {
    #n-b522188a-676b-43c0-ae66-f7f683ec7e2f {
        font-size: 24px !important;
        line-height: 1.2 !important;
    }

    #n-c774837b-df38-4290-82b6-634591dd1b26 {
        font-size: 16px !important;
        line-height: 1.4 !important;
    }
}

/* ===========================================
   6. FORM SECTION MOBILE FIXES
   =========================================== */

@media screen and (max-width: 767px) {

    /* Form layout - vertical on mobile */
    .cli-form--inline {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
    }

    .cli-form--inline .cli-input,
    .cli-form--inline .cli-form__input {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 16px !important;
        /* Prevents iOS zoom on focus */
    }

    .cli-form--inline .cli-button {
        width: 100% !important;
    }

    /* Form subtitle - allow wrapping */
    #n-01c5f90d-033b-465c-bafe-9d874591eefe {
        white-space: normal !important;
        font-size: 16px !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }

    /* Form description - allow wrapping */
    #n-2e516c3a-3b71-4fdf-860c-baf6d25ecd16 {
        white-space: normal !important;
        font-size: 14px !important;
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        line-height: 1.5 !important;
    }
}

/* ===========================================
   7. SERVICES SECTION FIXES
   =========================================== */

/* Desktop - keep reasonable width */
#n-4d3c0acf-b38e-4de8-aeaa-e8743af267b3,
#n-57125b9f-3b22-4680-a0aa-67269d3b92b9,
#n-8ed39a05-60e8-4d58-8525-251eb7928a63 {
    width: 100% !important;
    max-width: 1000px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    left: auto !important;
    top: auto !important;
}

/* Service item text proper wrapping */
.cli-service-list__item-text {
    flex-grow: 1;
    margin-right: 20px !important;
    min-width: 200px;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

.cli-service-list__item-price {
    white-space: nowrap;
    flex-shrink: 0;
}

@media screen and (max-width: 1199px) {

    /* Services block container */
    #n-2da5441f-1b53-422a-bd4b-a52482f2be3a,
    #n-58aa333b-d301-4892-a59d-f189afae68e5,
    #n-57125b9f-3b22-4680-a0aa-67269d3b92b9,
    #n-8ed39a05-60e8-4d58-8525-251eb7928a63,
    #n-4d3c0acf-b38e-4de8-aeaa-e8743af267b3 {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        top: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        height: auto !important;
    }

    #n-2da5441f-1b53-422a-bd4b-a52482f2be3a {
        padding: 40px 20px !important;
        gap: 20px !important;
    }

    #n-57125b9f-3b22-4680-a0aa-67269d3b92b9,
    #n-8ed39a05-60e8-4d58-8525-251eb7928a63 {
        text-align: center !important;
    }
}

/* Service items - green text fix */
@media screen and (max-width: 767px) {
    .cli-service-list__item .wysiwyg-fs {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    .cli-service-list__item-text span {
        font-size: 16px !important;
    }
}

/* ===========================================
   8. REVIEWS SECTION FIXES
   =========================================== */

/* Center the entire reviews section */
.cli-reviews .cli-block__content {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1200px !important;
    width: 100% !important;
}

/* Reviews grid container */
#n-9709bcf1-bc86-45f2-b1d9-c3a1dcf3854f {
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1200px !important;
    width: 100% !important;
    display: grid !important;
    justify-items: center !important;
}

/* Reviews column */
.cli-reviews .cli-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
}

#n-fb6ee1fd-1f2d-4471-a6b3-187a596b82d6 {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-column: 1 / -1 !important;
}

/* Reviews title and subtitle alignment */
/* Reviews title and subtitle alignment */
/* Default for desktop: inherit (usually left) or explicitly set left if needed in base styles */
/* Only force center on mobile/tablet */
@media screen and (max-width: 1199px) {

    #n-5a4217b5-9c54-440e-8141-0363f3dfd0ac,
    #n-06751a62-1b9c-4ec1-a280-937b95e6625f {
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
        align-self: stretch !important;
    }

    .cli-reviews .cli-block-title--gigantic,
    .cli-reviews .cli-block-subtitle--big {
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 !important;
        align-self: stretch !important;
    }
}

/* Review cards text alignment */
.cli-review-card {
    text-align: left !important;
    width: 100% !important;
}

.cli-review-card__text {
    text-align: left !important;
    text-align-last: left !important;
    text-indent: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    line-height: 1.6 !important;
    white-space: normal !important;
}

.cli-review-card__text * {
    text-indent: 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.cli-review-card__name,
.cli-review-card__position {
    text-align: left !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    text-indent: 0 !important;
}

/* ===========================================
   9. MOBILE HEADER & NAVIGATION
   =========================================== */

/* Default state - hidden open/close logic will be handled below */
.cli-header-toggler__open {
    display: block !important;
}

.cli-header-toggler__close {
    display: none !important;
}

/* Toggle icons based on menu state (sibling selector) */
.cli-header__info.opened~.cli-header-toggler .cli-header-toggler__open {
    display: none !important;
}

.cli-header__info.opened~.cli-header-toggler .cli-header-toggler__close {
    display: block !important;
}

@media screen and (max-width: 767px) {

    /* Show hamburger menu */
    .cli-header-toggler {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 48px !important;
        height: 48px !important;
        padding: 0 !important;
        background: transparent;
        border: none;
        cursor: pointer;
    }

    /* Header button smaller on mobile */
    .cli-header__button {
        padding: 10px 16px !important;
        font-size: 14px !important;
    }

    /* Mobile menu overlay */
    .cli-header__info {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(255, 255, 255, 0.98) !important;
        z-index: 10000 !important;
        display: none;
        /* Hidden by default */
        flex-direction: column !important;
        padding: 80px 20px 20px !important;
        overflow-y: auto;
    }

    /* Shown when 'opened' class is added by JS */
    .cli-header__info.opened {
        display: flex !important;
    }

    /* Mobile menu items */
    .cli-header__info .cli-menu {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .cli-header__info .cli-menu__link {
        font-size: 18px !important;
        padding: 12px 0 !important;
    }
}

/* ===========================================
   10. FOOTER MOBILE FIXES
   =========================================== */

@media screen and (max-width: 767px) {
    .cli-footer__content {
        flex-direction: column !important;
        gap: 24px !important;
        padding: 40px 16px !important;
    }

    .cli-footer__col {
        width: 100% !important;
        text-align: center !important;
    }

    .cli-social-list {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    .cli-social-list__button {
        min-width: 48px !important;
        min-height: 48px !important;
    }

    /* Hide menu in footer on mobile */
    .cli-footer .cli-menu {
        display: none !important;
    }

    .cli-footer__copyright {
        font-size: 14px !important;
        order: 10;
    }
}

/* ===========================================
   11. IMAGES & MEDIA MOBILE FIXES
   =========================================== */

@media screen and (max-width: 767px) {

    /* Cover section background positioning */
    .cli-background[data-image="true"] {
        background-position: center center !important;
    }

    /* Image cards responsive */
    .cli-image-card {
        width: 100% !important;
        height: auto !important;
        max-height: 300px !important;
    }

    .cli-image-card .cli-image {
        object-fit: cover !important;
    }

    /* Half-content sections stack on mobile */
    .cli-content-half-left,
    .cli-content-half-right {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
    }
}

/* ===========================================
   12. TABLET STYLES (768px - 1023px)
   =========================================== */

@media screen and (min-width: 768px) and (max-width: 1023px) {

    h1,
    .cli-block-title--gigantic {
        font-size: 36px !important;
        line-height: 1.2 !important;
    }

    .cli-block-subtitle--big {
        font-size: 20px !important;
    }

    .cli-block__content--cover {
        padding-top: 120px !important;
        padding-bottom: 120px !important;
    }

    /* Form still inline but adjusted */
    .cli-form--inline {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    .cli-form--inline .cli-input {
        flex: 1 1 200px !important;
    }

    /* Service list items */
    .cli-service-list__item {
        flex-direction: row !important;
        align-items: center !important;
    }

    /* Reviews 2 columns on tablet */
    .cli-flex-list--col-md-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ===========================================
   13. DESKTOP LARGE STYLES (> 1200px)
   =========================================== */

@media screen and (min-width: 1200px) {

    /* Hero title - 2 lines with controlled breaks */
    #n-b522188a-676b-43c0-ae66-f7f683ec7e2f {
        white-space: normal !important;
        word-break: keep-all !important;
        overflow-wrap: normal !important;
    }

    #n-b522188a-676b-43c0-ae66-f7f683ec7e2f .hero-title-line {
        display: inline-block !important;
        white-space: nowrap !important;
    }

    /* Hero subtitle styling */
    #n-c774837b-df38-4290-82b6-634591dd1b26 {
        font-size: 26px !important;
        line-height: 110% !important;
        font-weight: bold !important;
        text-align: center !important;
        white-space: normal !important;
    }

    #n-c774837b-df38-4290-82b6-634591dd1b26 .hero-subtitle-line {
        display: inline-block !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    /* Form section texts */
    #n-01c5f90d-033b-465c-bafe-9d874591eefe {
        white-space: nowrap !important;
        font-size: 20px !important;
        display: inline-block !important;
        width: auto !important;
    }

    #n-2e516c3a-3b71-4fdf-860c-baf6d25ecd16 {
        white-space: nowrap !important;
        font-size: 20px !important;
        display: inline-block !important;
        width: auto !important;
    }
}

/* ===========================================
   14. TOUCH DEVICE ENHANCEMENTS
   =========================================== */

@media (hover: none) and (pointer: coarse) {

    /* Larger tap targets */
    a,
    button,
    .cli-button {
        min-height: 44px;
        min-width: 44px;
    }

    /* Remove hover effects that don't work on touch */
    .cli-button:hover {
        transform: none !important;
    }

    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
    }
}

/* ===========================================
   15. ACCESSIBILITY IMPROVEMENTS
   =========================================== */

/* Focus states for keyboard navigation */
a:focus-visible,
button:focus-visible,
.cli-button:focus-visible,
.cli-input:focus-visible {
    outline: 2px solid #5552E8 !important;
    outline-offset: 2px !important;
}

/* Ensure sufficient color contrast - links */
@media screen and (max-width: 767px) {

    .cli-service-list__item-text span[style*="color: rgb(11, 236, 53)"],
    .cli-service-list__item-text span[style*="color: rgba(21,238,12,1)"],
    .cli-service-list__item-text span[style*="color: rgb(28, 234, 12)"],
    .cli-service-list__item-text span[style*="color: rgb(9, 234, 51)"] {
        text-shadow: 0 0 1px rgba(0, 0, 0, 0.3) !important;
    }
}

/* ===========================================
   16. PRINT STYLES (BONUS)
   =========================================== */

@media print {

    .cli-header,
    .cli-footer,
    .cli-chevron,
    .cli-header-toggler {
        display: none !important;
    }

    .cli-block__content {
        padding: 20px !important;
    }

    .cli-background {
        background: white !important;
    }
}