/* GESCO MOBILE & DESIGN FIXES - May 2026 (v2.1 - Elementor 4.0 compatible) */

/* ====== 0. GLOBAL: prevent horizontal scroll ====== */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* ====== 1. MENU: text stays visible on hover ====== */
.elementor-nav-menu--main .elementor-item {
    color: rgba(255,255,255,0.9) !important;
}
.elementor-nav-menu--main .elementor-item:hover,
.elementor-nav-menu--main .elementor-item:focus,
.elementor-nav-menu--main .elementor-item.highlighted {
    color: #ffffff !important;
    opacity: 1 !important;
}
.elementor-nav-menu--main .elementor-item.elementor-item-active {
    color: #ffffff !important;
}
.elementor-nav-menu--main .e--pointer-underline .elementor-item:before {
    background-color: #8B2418 !important;
}

/* ====== 2. HERO: better text readability ====== */
.elementor-page-14 .e-con:first-child::before,
.elementor-page-14 > .elementor > .e-con:first-child .elementor-background-overlay {
    background: rgba(20,21,24,0.7) !important;
}

/* ====== 3. TABLET RESPONSIVE (max-width:1024px) ====== */
@media(max-width:1024px){
    .e-con > .e-con.e-child,
    .e-con > .e-con-inner > .e-con.e-child {
        --width: 100% !important;
    }
    /* Why Gesco + Process cards: 2 per row on tablet */
    .elementor-14 .elementor-element-yuh2ehm > .e-con.e-child,
    .elementor-14 .elementor-element-yuh2ehm > .e-con-inner > .e-con.e-child,
    .elementor-14 .elementor-element-t5zljfv > .e-con.e-child,
    .elementor-14 .elementor-element-t5zljfv > .e-con-inner > .e-con.e-child {
        --width: 48% !important;
    }
}

/* ====== 4. MOBILE RESPONSIVE (max-width:767px) ====== */
@media(max-width:767px){
    /* Default: all child containers full width */
    .e-con > .e-con.e-child,
    .e-con > .e-con-inner > .e-con.e-child {
        --width: 100% !important;
    }

    /* ---- Why Gesco cards: 2x2 grid ---- */
    .elementor-14 .elementor-element-yuh2ehm {
        --flex-wrap: wrap !important;
        --gap: 12px !important;
        --row-gap: 12px !important;
        --column-gap: 12px !important;
    }
    .elementor-14 .elementor-element-yuh2ehm > .e-con.e-child,
    .elementor-14 .elementor-element-yuh2ehm > .e-con-inner > .e-con.e-child {
        --width: calc(50% - 6px) !important;
        flex: 0 0 calc(50% - 6px) !important;
        max-width: calc(50% - 6px) !important;
    }

    /* ---- Process steps (01-04): 2x2 grid ---- */
    .elementor-14 .elementor-element-t5zljfv {
        --flex-wrap: wrap !important;
        --gap: 12px !important;
        --row-gap: 12px !important;
        --column-gap: 12px !important;
    }
    .elementor-14 .elementor-element-t5zljfv > .e-con.e-child,
    .elementor-14 .elementor-element-t5zljfv > .e-con-inner > .e-con.e-child {
        --width: calc(50% - 6px) !important;
        flex: 0 0 calc(50% - 6px) !important;
        max-width: calc(50% - 6px) !important;
    }

    /* ---- Section padding reduction ---- */
    .elementor-14 .e-con.e-parent {
        --padding-top: 48px !important;
        --padding-bottom: 48px !important;
        --padding-left: 16px !important;
        --padding-right: 16px !important;
    }
    .elementor-14 .e-con.e-parent > .e-con.e-child {
        --padding-left: 12px !important;
        --padding-right: 12px !important;
    }

    /* Hero specific */
    .elementor-14 .elementor-element-3f4ab23 {
        --padding-top: 80px !important;
        --padding-bottom: 40px !important;
        --padding-left: 16px !important;
        --padding-right: 16px !important;
        --min-height: auto !important;
    }

    /* Trust strip */
    .elementor-14 .elementor-element-b05d4ee {
        --padding-top: 16px !important;
        --padding-bottom: 16px !important;
    }

    /* ---- Gap reduction ---- */
    .elementor-14 .elementor-element-b9e776k {
        --gap: 32px !important;
        --row-gap: 32px !important;
        --column-gap: 32px !important;
    }
    .elementor-14 .elementor-element-t6c60c8,
    .elementor-14 .elementor-element-pq6ecw5,
    .elementor-14 .elementor-element-py0sc0c,
    .elementor-14 .elementor-element-8vr8lhx {
        --gap: 16px !important;
        --row-gap: 16px !important;
        --column-gap: 16px !important;
        --padding-bottom: 32px !important;
    }
    .elementor-14 .elementor-element-1ztlc1s {
        --gap: 12px !important;
        --row-gap: 12px !important;
        --column-gap: 12px !important;
    }
    .elementor-14 .elementor-element-pouis7n,
    .elementor-14 .elementor-element-c0qzb25 {
        --gap: 32px !important;
        --row-gap: 32px !important;
        --column-gap: 32px !important;
    }
    .elementor-14 .elementor-element-k9c0tfw {
        --gap: 24px !important;
        --row-gap: 24px !important;
    }
    .elementor-14 .elementor-element-ggf1fap {
        --padding-top: 24px !important;
        --padding-bottom: 24px !important;
        --padding-left: 20px !important;
        --padding-right: 20px !important;
    }

    /* Section inner bottom padding: 64px -> 24px */
    .elementor-14 .elementor-element-12mml88,
    .elementor-14 .elementor-element-t6c60c8,
    .elementor-14 .elementor-element-pq6ecw5,
    .elementor-14 .elementor-element-py0sc0c,
    .elementor-14 .elementor-element-8vr8lhx {
        --padding-bottom: 24px !important;
    }

    /* Hero stats panel */
    .elementor-14 .elementor-element-5zx86g6 {
        --padding-top: 24px !important;
        --padding-bottom: 24px !important;
        --padding-left: 20px !important;
        --padding-right: 20px !important;
    }

    /* Why Gesco / Process cards: compact padding for 2x2 */
    .elementor-14 .elementor-element-0jt23kk,
    .elementor-14 .elementor-element-yyxoffp,
    .elementor-14 .elementor-element-15a2vk1,
    .elementor-14 .elementor-element-4umrmhj,
    .elementor-14 .elementor-element-2lmgqh2,
    .elementor-14 .elementor-element-4liw8v9,
    .elementor-14 .elementor-element-750paa0,
    .elementor-14 .elementor-element-u4ixoah {
        --padding-top: 20px !important;
        --padding-bottom: 20px !important;
        --padding-left: 14px !important;
        --padding-right: 14px !important;
    }

    /* Service columns */
    .elementor-14 .elementor-element-41pwg9i,
    .elementor-14 .elementor-element-0notnwz,
    .elementor-14 .elementor-element-rqyck7f {
        --padding-top: 24px !important;
        --padding-bottom: 24px !important;
        --padding-left: 16px !important;
        --padding-right: 16px !important;
    }

    /* ---- Typography ---- */
    .e-con h2.elementor-heading-title,
    .e-con .elementor-heading-title[style*="font-size"] {
        word-break: break-word;
    }

    /* ---- Buttons: full width on mobile ---- */
    .e-con .elementor-widget-button {
        width: 100%;
    }
    .e-con .elementor-widget-button .elementor-button {
        width: 100% !important;
        justify-content: center !important;
    }

    /* ---- Borders: remove right borders in 2x2 layout ---- */
    .elementor-14 .elementor-element-0jt23kk,
    .elementor-14 .elementor-element-yyxoffp,
    .elementor-14 .elementor-element-15a2vk1,
    .elementor-14 .elementor-element-4umrmhj {
        --border-right-width: 0px !important;
        border-right: none !important;
    }
    .elementor-14 .elementor-element-2lmgqh2,
    .elementor-14 .elementor-element-4liw8v9,
    .elementor-14 .elementor-element-750paa0,
    .elementor-14 .elementor-element-u4ixoah {
        --border-right-width: 0px !important;
        border-right: none !important;
    }

    /* ---- Gallery grid: single column ---- */
    .elementor-14 .elementor-element-3qkw4qq {
        --gap: 8px !important;
    }
    .elementor-14 .elementor-element-3qkw4qq > .e-con.e-child,
    .elementor-14 .elementor-element-3qkw4qq > .e-con-inner > .e-con.e-child {
        --width: 100% !important;
        min-height: 200px !important;
    }

    /* ---- Map: reduce height on mobile ---- */
    .elementor-14 .elementor-widget-google_maps iframe {
        height: 250px !important;
    }

    /* ---- Prevent overflow from any element ---- */
    .e-con,
    .elementor-widget-wrap,
    .elementor-widget,
    .elementor-section,
    .elementor-container {
        max-width: 100% !important;
    }
    img, video, iframe, table {
        max-width: 100% !important;
    }
}

/* ====== 5. HEADER MOBILE (Section/Column layout) ====== */
@media(max-width:1024px){
    .elementor-279 .elementor-section .elementor-container {
        flex-wrap: nowrap !important;
        align-items: center !important;
        padding: 8px 16px !important;
        min-height: 56px !important;
    }
    .elementor-279 .elementor-column {
        width: auto !important;
        flex-shrink: 0 !important;
    }
    .elementor-279 .elementor-element-7a18b7e {
        flex-grow: 1 !important;
        width: auto !important;
    }
    .elementor-279 .elementor-element-8ef8d86 img {
        width: 40px !important;
        height: auto !important;
    }
    .elementor-279 .elementor-element-3d8f8bd .elementor-widget-wrap {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
    }
    .elementor-279 .elementor-element-ea010c1 .elementor-heading-title {
        font-size: 12px !important;
        white-space: nowrap !important;
    }
    .elementor-279 .elementor-element-fcc740b .elementor-button {
        padding: 8px 12px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }
}

/* ====== 6. MOBILE DROPDOWN MENU ====== */
.elementor-nav-menu--dropdown.elementor-nav-menu__container {
    background: #1E2024 !important;
}
.elementor-nav-menu--dropdown li a {
    color: #fff !important;
    padding: 12px 24px !important;
    font-size: 15px !important;
}
.elementor-nav-menu--dropdown .sub-menu {
    background: rgba(0,0,0,0.15) !important;
    border: none !important;
    box-shadow: none !important;
}
.elementor-nav-menu--dropdown .sub-menu a {
    padding-left: 40px !important;
}
.elementor-menu-toggle {
    color: #fff !important;
}
.elementor-menu-toggle svg {
    fill: #fff !important;
}

/* ====== 7. DESKTOP SUBMENU ====== */
.elementor-nav-menu--main .sub-menu {
    background: #1E2024 !important;
    min-width: 240px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
    padding: 4px 0 !important;
    margin-top: 0 !important;
}
.elementor-nav-menu--main .sub-menu .sub-menu {
    top: 0 !important;
    left: 100% !important;
}
.elementor-nav-menu--main .sub-menu li a {
    color: rgba(255,255,255,0.85) !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
}
.elementor-nav-menu--main .sub-menu li a:hover {
    color: #fff !important;
    background: rgba(139,36,24,0.15) !important;
}
.elementor-nav-menu--main .sub-menu .elementor-item::after,
.elementor-nav-menu--main .sub-menu .elementor-sub-item::after,
.elementor-nav-menu--main .elementor-nav-menu__arrow {
    display: none !important;
}

/* ====== 8. FAB PHONE ====== */
.gesco-fab-phone {
    position: fixed; right: 20px; bottom: 20px; width: 60px; height: 60px;
    background: #8B2418; border-radius: 50%; display: none;
    align-items: center; justify-content: center;
    box-shadow: 0 10px 24px rgba(139,36,24,0.45);
    color: #fff; font-size: 24px; z-index: 40; text-decoration: none;
}
@media(max-width:767px) { .gesco-fab-phone { display: flex; } }

/* ====== 9. FORM on dark bg ====== */
.elementor-widget-form select {
    color: #fff !important;
    background-color: rgba(255,255,255,0.08) !important;
    -webkit-appearance: none !important;
}
.elementor-widget-form select option {
    background: #141518 !important;
    color: #fff !important;
}
.elementor-widget-form input::placeholder,
.elementor-widget-form textarea::placeholder {
    color: rgba(255,255,255,0.35) !important;
}

/* ====== 10. FOOTER icon-list fix ====== */
.elementor-location-footer .elementor-icon-list-icon {
    display: none !important;
}

/* ====== 11. BUTTON HOVER STATES ====== */
.elementor-widget-text-editor a[style*="background:#8B2418"],
.elementor-widget-text-editor a[style*="background: #8B2418"] {
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
}
.elementor-widget-text-editor a[style*="background:#8B2418"]:hover,
.elementor-widget-text-editor a[style*="background: #8B2418"]:hover {
    background: #6e1c12 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139,36,24,0.4);
}
.elementor-widget-text-editor a[style*="border: 1px solid rgba(255"],
.elementor-widget-text-editor a[style*="border:1px solid rgba(255"] {
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease !important;
}
.elementor-widget-text-editor a[style*="border: 1px solid rgba(255"]:hover,
.elementor-widget-text-editor a[style*="border:1px solid rgba(255"]:hover {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.7) !important;
    transform: translateY(-1px);
}
.elementor-button {
    transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
}
.elementor-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* ====== 12. FIX SUBMENU SPACING ====== */
.elementor-nav-menu--main .sub-menu,
.elementor-nav-menu--main .sub-menu .sub-menu {
    margin: 0 !important;
    padding: 4px 0 !important;
    margin-block-start: 0 !important;
}
.elementor-nav-menu--main .sub-menu li,
.elementor-nav-menu--main .sub-menu .sub-menu li {
    margin-block-start: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.elementor-nav-menu--main .sub-menu li a,
.elementor-nav-menu--main .sub-menu .sub-menu li a {
    padding: 8px 20px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}
.elementor-nav-menu--dropdown li,
.elementor-nav-menu--dropdown .sub-menu,
.elementor-nav-menu--dropdown .sub-menu li {
    margin-block-start: 0 !important;
    margin: 0 !important;
}

/* ====== 13. LOGO: fix white background (temp until proper transparent PNG) ====== */
.elementor-279 .elementor-element-986e43b img {
    mix-blend-mode: lighten;
}

/* ====== 14. HERO TITLE: fluid scaling ====== */
.elementor-14 .elementor-element-2wuppml .elementor-heading-title {
    font-size: clamp(42px, 5vw + 16px, 84px) !important;
}

/* ====== 15. GUTENBERG PAGES: responsive padding ====== */
@media (max-width: 1024px) {
    .page-id-20 > .entry-content > .wp-block-group,
    .page-id-21 > .entry-content > .wp-block-group,
    .page-id-22 > .entry-content > .wp-block-group,
    .page-id-23 > .entry-content > .wp-block-group {
        padding: 60px 24px !important;
    }
}
@media (max-width: 767px) {
    .page-id-20 > .entry-content > .wp-block-group,
    .page-id-21 > .entry-content > .wp-block-group,
    .page-id-22 > .entry-content > .wp-block-group,
    .page-id-23 > .entry-content > .wp-block-group {
        padding: 48px 16px !important;
    }
}

/* ====== 16. GUTENBERG PAGES: hero height mobile ====== */
@media (max-width: 767px) {
    .page-id-20 .wp-block-cover:first-child,
    .page-id-21 .wp-block-cover:first-child,
    .page-id-22 .wp-block-cover:first-child,
    .page-id-23 .wp-block-cover:first-child {
        min-height: 300px !important;
    }
}

/* ====== 17. STATS NUMBERS: mobile scaling ====== */
@media (max-width: 767px) {
    .elementor-14 .elementor-element-l47uz4p .elementor-heading-title,
    .elementor-14 .elementor-element-domeao2 .elementor-heading-title,
    .elementor-14 .elementor-element-wiixuo6 .elementor-heading-title {
        font-size: 32px !important;
    }
}

/* ====== 18. SECTION HEADINGS: tablet scaling ====== */
@media (max-width: 1024px) {
    .elementor-14 h2.elementor-heading-title {
        font-size: 40px !important;
    }
}

/* ====== 19. STEP NUMBERS: mobile scaling ====== */
@media (max-width: 767px) {
    .elementor-14 .elementor-element-t8e1wxg .elementor-heading-title,
    .elementor-14 .elementor-element-5wy56qc .elementor-heading-title,
    .elementor-14 .elementor-element-bcb8kj4 .elementor-heading-title,
    .elementor-14 .elementor-element-uglrnb3 .elementor-heading-title {
        font-size: 40px !important;
    }
}

/* ====== 20. HEADER LOGO: correct selector for mobile ====== */
@media (max-width: 1024px) {
    .elementor-279 .elementor-element-986e43b img {
        width: 40px !important;
        height: auto !important;
    }
}

/* ====== 21. SERVICE LIST: single column on mobile ====== */
@media (max-width: 767px) {
    .elementor-14 .elementor-icon-list-items[style*=grid-template-columns] {
        grid-template-columns: 1fr !important;
    }
}

/* ====== 22. HEADER: reduce padding on tablet ====== */
@media (max-width: 1024px) {
    .elementor-279 .elementor-element-d7fe0e4 {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}


/* ====== 24. SERVICE CARDS: responsive grid + hover ====== */
.gesco-service-card {
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.15s ease !important;
}
.gesco-service-card:hover {
    border-color: #8B2418 !important;
    box-shadow: 0 4px 16px rgba(139,36,24,0.10) !important;
    transform: translateY(-2px);
}
@media (max-width: 1024px) {
    .gesco-service-card {
        --width: calc(50% - 12px) !important;
        flex: 0 0 calc(50% - 12px) !important;
        max-width: calc(50% - 12px) !important;
    }
}
@media (max-width: 767px) {
    .gesco-service-card {
        --width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ====== 25. VERSION BUMP ====== */
/* v3.1 - May 2026 - Added service cards responsive + hover */