/* ==========================================================================
   EQUATOR FOOD TECH MACHINES - project styles

   Brand palette (sampled from the logo artwork):
     navy  #1a3761  EQUATOR wordmark      -> primary (buttons, links, accents)
     red   #a12529  chef hat + O ring     -> accent (gradient highlights)
     grey  #5b5b5b  FOOD TECH MACHINES    -> secondary text

   These are eyeballed from the supplied image - if you have the exact brand
   hex values, replace them and re-run a find/replace across assets/css.
   ========================================================================== */

/* --------------------------------------------------- Global Overflow Prevention
   Prevents horizontal scrollbar on mobile caused by elements exceeding viewport width. */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
}

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

.tf-container,
.row,
.container {
    max-width: 100% !important;
    overflow-x: hidden;
}

@media (max-width: 991px) {
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .row > * {
        max-width: 100%;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    iframe {
        max-width: 100% !important;
    }

    table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }

    /* Fix parallax images causing overflow */
    .simpleParallax {
        overflow: hidden !important;
        max-width: 100% !important;
    }

    /* Prevent swiper slides from overflowing */
    .swiper {
        overflow: hidden !important;
        max-width: 100vw !important;
    }
}

/* --------------------------------------------------- Header WhatsApp button */
.eq-wa-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.eq-wa-btn__ico {
    flex: none;
    width: 16px;
    height: 16px;
}

/* The template hides header buttons under 768px via .hide-sm. WhatsApp is
   deliberately left visible there - it replaced the floating bubble, so it is
   the only quick-contact affordance on mobile. */
@media (max-width: 575px) {
    .eq-wa-btn .text-caption-3 {
        display: none;
    }

    .eq-wa-btn {
        padding-left: 12px;
        padding-right: 12px;
    }

    .eq-wa-btn__ico {
        width: 18px;
        height: 18px;
    }
}


/* --------------------------------------------------- Stats section overlap
   .section-figures ships with `margin-top: -521px; padding-top: 618px` at
   >=992px so it can ride up over a banner on its original page. On the
   homepage it sits after the process section, where that pull-up drags the
   dark block over the process steps. Reset it to normal flow here.
   Scoped to .eq-figures-inflow so the original page keeps its design. */
@media (min-width: 992px) {
    .eq-figures-inflow.section-figures {
        margin-top: 0;
        padding-top: 96px;
    }
}






/* keep the icon aligned with the WhatsApp button's icon */
.eq-wa-btn__ico {
    position: relative;
    z-index: 1;
}


/* --------------------------------------------------- Homepage hero spacing
   Tightens the top/bottom breathing room around the hero copy so the banner
   image sits higher and is visible in full without scrolling. Scoped to
   .eq-hero so other pages using .page-title.style-2 are untouched. */
.eq-hero.page-title.style-2 {
    padding-top: 32px;
}

.eq-hero.page-title.style-2 .heading-title {
    margin-bottom: 20px;
    gap: 18px;
}

.eq-hero.page-title.style-2 .slide-inner img {
    min-height: 0;
    max-height: 62vh;
    object-fit: cover;
    width: 100%;
}

@media (min-width: 1200px) {
    .eq-hero.page-title.style-2 .heading-title .title {
        margin-bottom: 0;
    }
}

@media (max-width: 991px) {
    .eq-hero.page-title.style-2 {
        padding-top: 24px;
    }

    .eq-hero.page-title.style-2 .slide-inner img {
        max-height: 46vh;
    }
}


/* --------------------------------------------------- Header contact buttons
   Call and Email match the WhatsApp button exactly: same .tf-btn border
   styling, an inline SVG icon using currentColor, then a text label. Only the
   icon/label spacing is defined here. */
.support {
    display: flex;
    align-items: center;
    gap: 8px;
}

.eq-icon-btn,
.eq-wa-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.eq-icon-btn__ico,
.eq-wa-btn__ico {
    flex: none;
    width: 16px;
    height: 16px;
    position: relative;
    z-index: 1;
}

/* Below 1200px the labels are dropped so the row never wraps; the buttons
   collapse to square icon buttons and stay tappable. */
@media (max-width: 1199px) {

    .eq-icon-btn .text-caption-3,
    .eq-wa-btn .text-caption-3 {
        display: none;
    }

    .eq-icon-btn,
    .eq-wa-btn {
        width: 36px;
        min-width: 36px;
        padding: 0;
        justify-content: center;
    }
}


/* --------------------------------------------------- Long contact strings
   equatorfoodtechmachines@gmail.com is 33 characters - long enough to overflow
   the narrow footer column and the header button tooltip row on small screens.
   Allow it to wrap rather than push the layout wide. */
.footer .contact-item a,
.footer .contact-item span,
.footer-contact a {
    overflow-wrap: anywhere;
    word-break: break-word;
}


/* --------------------------------------------------- Footer social row
   X, Instagram, YouTube, WhatsApp, Email and Call as inline-SVG icon links.
   currentColor keeps them monochrome against the dark footer. */
.eq-soc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    transition: background-color .25s ease, border-color .25s ease;
}

.eq-soc:hover,
.eq-soc:focus-visible {
    color: #fff;
    background-color: #a12529;
    border-color: #a12529;
}

.eq-soc__ico {
    width: 15px;
    height: 15px;
    display: block;
}




/* --------------------------------------------------- Logo
   Real brand artwork, extracted from assets/images/equator/logo.webp (the
   primary horizontal lockup). The supplied files are brand-sheet renders with
   a PAINTED checkerboard rather than real alpha, so web copies were generated:
   checkerboard splits into two lines */
.eq-logo {
    display: block;
    width: auto;
    height: 46px;
    max-width: 100%;
    object-fit: contain;
}

.footer .eq-logo {
    height: 52px;
}

.canvas-mb .eq-logo {
    height: 44px;
}

@media (max-width: 767px) {
    .eq-logo {
        height: 38px;
    }
}




/* --------------------------------------------------- Parallax wrapper
   SimpleParallax injects <div class="simpleParallax"> around the image. The
   theme's own rules (.article-thumb img, .swiper-slide img, ...) still match
   the inner <img>, so the wrapper must stay layout-neutral - forcing width or
   height on it blows images out of their containers. Clip only. */
.simpleParallax {
    display: block;
    overflow: hidden;
    border-radius: inherit;
    max-width: 100%;
}


/* --------------------------------------------------- Thumbnail slots
   Several sidebar/list thumbnails sized themselves from the old 120x120
   template images - the container has flex-shrink:0 and no width. Dropping
   larger photography in blew them out of the sidebar. Pin the intended size. */
.relatest-post-item .image {
    width: 120px;
    height: 120px;
    overflow: hidden;
    border-radius: 12px;
}

.relatest-post-item .image img,
.relatest-post-item .image .simpleParallax {
    width: 120px;
    height: 120px;
}

.relatest-post-item .image img {
    object-fit: cover;
}

/* general guard: an image must never exceed the box it was placed in */
.sidebar img,
.blog-article-item img,
.relatest-post-item img {
    max-width: 100%;
}


/* chips pin width but not height, so portrait photos rendered as ovals */
.challenges-item img,
.challenges-item .simpleParallax {
    width: 48px;
    height: 48px;
}

.challenges-item img {
    object-fit: cover;
    border-radius: 999px;
}

/* blog cards: give the thumb a stable ratio so mixed-orientation photos
   don't change card heights across the grid */
.blog-article-item .article-thumb img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}


/* --------------------------------------------------- Global image guard
   The theme has no `img { max-width:100% }`, so several slots were sized by
   the intrinsic dimensions of the original template images. Swapping in
   larger photography let those images overflow their containers (the sidebar
   thumbnails were the visible case). This stops that happening anywhere. */
img {
    max-width: 100%;
}

.footer .image img,
.footer .image .simpleParallax {
    display: block;
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------------- Mobile Menu Redesign
   Improves touch targets, typography, and spacing in the mobile offcanvas menu. */

.nav-ul-mb {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 20px 10px;
}

.nav-ul-mb .menu-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.nav-ul-mb .menu-item:last-child {
    border-bottom: none;
}

.mb-menu-link {
    display: block;
    padding: 14px 0;
    font-size: 18px;
    font-weight: 500;
    color: #1a3761; /* Primary navy */
    transition: color 0.3s ease;
}

.mb-menu-link:hover,
.mb-menu-link:focus,
.menu-item.current-menu .mb-menu-link {
    color: #a12529; /* Accent red */
}

.mb-other-content {
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 12px;
    margin: 10px 20px 20px;
}

.mb-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.mb-info li p {
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    color: #5b5b5b;
}

.mb-info li a span {
    display: block;
    color: #1a3761;
    font-size: 15px;
    font-weight: 500;
    margin-top: 4px;
    transition: color 0.3s ease;
}

.mb-info li a:hover span {
    color: #a12529;
}

.mb-wrap-btn {
    flex-direction: column !important;
    gap: 12px;
}

.mb-wrap-btn .tf-btn {
    width: 100%;
    justify-content: center;
    border-radius: 8px !important;
}

/* Animated Gradient Background */
.animated-gradient-bg {
    background: linear-gradient(-45deg, #ffffff, #f0f4f8, #e2e8f0, #ffffff);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Fix footer parallax image height */
.footer.style-1 .footer-wrap .right .image .simpleParallax {
    height: 100%;
}
.footer.style-1 .footer-wrap .right .image img.parallax-img {
    height: 100% !important;
    object-fit: cover;
}


/* --------------------------------------------------- Hero Responsive
   On small screens: buttons stack vertically, badges shrink, and heading
   text scales down so nothing overflows or looks cramped. */
@media (max-width: 767px) {
    .eq-hero .heading-title {
        flex-direction: column !important;
        gap: 16px !important;
    }

    .eq-hero .heading-title .left,
    .eq-hero .heading-title .right {
        flex: 1 1 100% !important;
        width: 100% !important;
    }

    .eq-hero .heading-title .title {
        font-size: 26px !important;
        line-height: 1.2 !important;
    }

    .eq-hero .heading-title .sub {
        font-size: 12px !important;
    }

    .eq-hero .heading-title .sub-heading {
        font-size: 14px !important;
    }

    /* Stack all hero buttons vertically */
    .eq-hero .wrap-btn {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .eq-hero .wrap-btn .tf-btn {
        width: 100% !important;
        justify-content: center;
        font-size: 13px !important;
        padding: 10px 16px !important;
    }

    /* Scale down trust badges on mobile */
    .hero-badges {
        gap: 16px !important;
        margin-top: 20px !important;
        padding-top: 16px !important;
        justify-content: center;
    }

    .hero-badges img {
        height: 40px !important;
    }
}

@media (max-width: 480px) {
    .eq-hero .heading-title .title {
        font-size: 22px !important;
        line-height: 1.2 !important;
    }

    .eq-hero .heading-title .sub {
        font-size: 11px !important;
        letter-spacing: 0.5px;
    }

    .hero-badges {
        gap: 12px !important;
    }

    .hero-badges img {
        height: 34px !important;
    }
}


/* --------------------------------------------------- Vision & Mission Responsive
   The heading uses inline font-size:56px which overflows on mobile. */
@media (max-width: 767px) {
    .section-vision-mission .heading-section h2.title {
        font-size: 32px !important;
    }

    .section-vision-mission .heading-section p {
        font-size: 15px !important;
    }

    .section-vision-mission .tf-box-icon {
        padding: 24px !important;
    }

    .section-vision-mission .tf-box-icon h4 {
        font-size: 18px !important;
    }

    .section-vision-mission .tf-box-icon p {
        font-size: 14px !important;
    }
}

@media (max-width: 480px) {
    .section-vision-mission .heading-section h2.title {
        font-size: 26px !important;
    }
}