/* GEOLINK MOBILE HEADER FIX v2
   Keep CTA + language + hamburger visible without horizontal scroll.
*/

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

#smooth-wrapper,
#smooth-content,
.body-wrapper,
.header-area,
.hero-area,
.image-area,
.services-area,
.work-area,
.about-area,
.clients-area,
.blog-area,
.footer-area {
    width: 100%;
    max-width: 100%;
}

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

@media (max-width: 1199px) {

    .header-area .header__nav {
        display: none !important;
    }

    .header-area .container {
        width: 100%;
        max-width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }

    .header-area .header-area__inner {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        position: relative;
    }

    /* Logo */
    .header-area .header__logo {
        flex: 0 1 auto;
        min-width: 0;
    }

    .header-area .geolink-logo {
        display: block;
        white-space: nowrap;
        font-size: 25px;
        line-height: 1;
        letter-spacing: -1.4px;
    }

    /* Keep CTA visible, but compact it */
    .header-area .header__button {
        display: flex !important;
        flex: 0 1 auto;
        min-width: 0;
        align-items: center;
        position: relative;
        margin-left: auto;
    }

    .header-area .header__button .wc-btn-group {
        display: flex !important;
        align-items: center;
        max-width: 100%;
        gap: 0;
    }

    /* Original Arolax group contains circle / text / circle.
       Hide the first duplicate circle on mobile. */
    .header-area .header__button .wc-btn-group > .wc-btn-circle:first-child {
        display: none !important;
    }

    .header-area .header__button .wc-btn-primary {
        min-width: 0 !important;
        width: auto !important;
        height: 46px !important;
        padding: 0 15px !important;
        font-size: 12px !important;
        line-height: 46px !important;
        white-space: nowrap;
    }

    .header-area .header__button .wc-btn-circle {
        flex: 0 0 46px !important;
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
    }

    /* Language stays under the CTA, without taking horizontal width. */
    .header-area .geolink-lang {
        display: block !important;
        position: absolute;
        top: calc(100% + 2px);
        left: 14px;
        margin: 0 !important;
        font-size: 11px;
        line-height: 1;
        font-weight: 800;
        z-index: 10;
    }

    /* Hamburger */
    .header-area .header__navicon {
        display: flex !important;
        flex: 0 0 38px;
        width: 38px;
        height: 44px;
        margin-left: 2px;
        align-items: center;
        justify-content: flex-end;
        position: relative;
        z-index: 50;
    }

    .header-area .header__navicon .open-offcanvas {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 44px;
        padding: 0;
        margin: 0;
        border: 0;
        background: transparent;
        font-size: 24px;
        color: #111;
    }

    .offcanvas-3__area {
        position: fixed !important;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        max-width: 100vw;
    }

    .hero-area-inner,
    .hero-area .section-content,
    .hero-area .section-title-wrapper,
    .hero-area .title-wrapper,
    .hero-area .content-last,
    .services-area-inner,
    .services-area .section-header,
    .services-area .section-title-wrapper,
    .services-area .title-wrapper {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .hero-area .section-title,
    .services-area .section-title {
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 767px) {

    .header-area .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .header-area .geolink-logo {
        font-size: 23px;
    }

    .header-area .header__button .wc-btn-primary {
        height: 44px !important;
        line-height: 44px !important;
        padding: 0 12px !important;
        font-size: 11px !important;
    }

    .header-area .header__button .wc-btn-circle {
        flex-basis: 44px !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
    }

    .hero-area .section-title {
        font-size: clamp(56px, 15vw, 76px) !important;
        line-height: 0.94 !important;
        letter-spacing: -0.045em !important;
    }

    .services-area .section-title {
        font-size: clamp(46px, 12vw, 66px) !important;
        line-height: 0.98 !important;
        letter-spacing: -0.04em !important;
    }
}

@media (max-width: 390px) {
    .header-area .geolink-logo {
        font-size: 21px;
    }

    .header-area .header__button .wc-btn-primary {
        padding: 0 10px !important;
        font-size: 10px !important;
    }

    .header-area .header__button .wc-btn-circle {
        flex-basis: 40px !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }

    .header-area .header__navicon {
        flex-basis: 34px;
        width: 34px;
    }
}


/* Geolink approved compact logo */
.header-area .geolink-logo-image-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.header-area .geolink-logo-image {
    display: block;
    width: auto;
    height: 46px;
    max-width: 220px;
    object-fit: contain;
}

@media (max-width: 1199px) {
    .header-area .geolink-logo-image {
        height: 40px;
        max-width: 175px;
    }
}

@media (max-width: 767px) {
    .header-area .geolink-logo-image {
        height: 36px;
        max-width: 150px;
    }
}

@media (max-width: 390px) {
    .header-area .geolink-logo-image {
        height: 33px;
        max-width: 135px;
    }
}


/* =========================================================
   GEOLINK MOBILE HEADER v3
   - larger logo
   - language + flag in header row
   - no green CTA in mobile header
   - project CTA remains in hero section below copy
   ========================================================= */

.mobile-lang {
    display: none;
}

@media (max-width: 1199px) {

    /* On mobile/tablet the big header CTA is removed from the first row. */
    .header-area .header__button {
        display: none !important;
    }

    .header-area .header-area__inner {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto auto;
        align-items: center;
        gap: 10px;
        width: 100%;
        max-width: 100%;
    }

    .header-area .header__logo {
        min-width: 0;
        max-width: 100%;
    }

    .header-area .geolink-logo-image-link {
        display: inline-flex;
        max-width: 100%;
    }

    .header-area .geolink-logo-image {
        height: 46px !important;
        width: auto !important;
        max-width: 195px !important;
        object-fit: contain;
    }

    .mobile-lang {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        min-height: 42px;
        padding: 5px 2px;
        color: #111;
        text-decoration: none;
        font-weight: 800;
        line-height: 1;
        white-space: nowrap;
        position: relative;
        z-index: 60;
    }

    .mobile-lang-flag {
        font-size: 20px;
        line-height: 1;
    }

    .mobile-lang-code {
        font-size: 12px;
        letter-spacing: .02em;
    }

    .header-area .header__navicon {
        display: flex !important;
        width: 42px;
        height: 46px;
        flex: 0 0 42px;
        margin: 0;
        align-items: center;
        justify-content: flex-end;
    }

    .header-area .header__navicon .open-offcanvas {
        width: 42px;
        height: 46px;
        font-size: 26px;
    }

    /* Keep the CTA where it belongs on mobile: in the hero, below the text. */
    .hero-area .hero-mobile-cta {
        display: block !important;
        width: 100%;
        max-width: 100%;
        margin-top: 28px;
    }

    .hero-area .hero-mobile-cta .wc-btn-group {
        display: inline-flex !important;
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .header-area .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .header-area .geolink-logo-image {
        height: 44px !important;
        max-width: 178px !important;
    }

    .mobile-lang {
        gap: 4px;
    }

    .mobile-lang-flag {
        font-size: 19px;
    }

    .mobile-lang-code {
        font-size: 11px;
    }

    .hero-area .hero-mobile-cta .wc-btn-primary {
        font-size: 13px !important;
        padding-left: 22px !important;
        padding-right: 22px !important;
        white-space: nowrap;
    }
}

@media (max-width: 390px) {
    .header-area .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .header-area .header-area__inner {
        gap: 7px;
    }

    .header-area .geolink-logo-image {
        height: 40px !important;
        max-width: 158px !important;
    }

    .mobile-lang-flag {
        font-size: 17px;
    }

    .mobile-lang-code {
        font-size: 10px;
    }

    .header-area .header__navicon,
    .header-area .header__navicon .open-offcanvas {
        width: 38px;
        flex-basis: 38px;
    }
}


/* Desktop language selector: same row as CTA */
@media (min-width: 1200px) {
    .header-area .header__button {
        display: flex !important;
        align-items: center;
        gap: 12px;
    }

    .header-area .geolink-lang {
        position: static !important;
        display: inline-flex !important;
        align-items: center;
        gap: 5px;
        margin: 0 0 0 10px !important;
        line-height: 1;
        text-decoration: none;
        color: #111;
        font-weight: 800;
        white-space: nowrap;
    }

    .desktop-lang-flag {
        font-size: 18px;
        line-height: 1;
    }

    .desktop-lang-code {
        font-size: 12px;
        line-height: 1;
        letter-spacing: .02em;
    }
}

/* Hide desktop-specific flag spans in the dedicated mobile language selector context */
@media (max-width: 1199px) {
    .header-area .geolink-lang {
        display: none !important;
    }
}