/* ==========================================================================
   Al Meer Sourcing & Cargo Company
   FOOTER FIX — compact, balanced 4-column footer that fits one screen
   --------------------------------------------------------------------------
   Loaded LAST, after style.css / responsive.css / header-fix.css.
   ONLY touches the footer (.site-footer / .footer-widget__*).
   Layout and spacing only — the template's own flex structure is kept.
   No HTML or existing CSS file is modified. Remove the <link> tag to revert.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. NEWSLETTER STRIP — was 110px top + 73px bottom padding, far too tall
   -------------------------------------------------------------------------- */
.footer-widget__newsletter {
    padding: 42px 0 38px;
    gap: 28px;
}

.site-footer__top {
    border-bottom: 1px dashed rgba(var(--tanspot-white-rgb), .18);
}

.footer-widget__newsletter-title {
    font-size: 30px;
    line-height: 1.25em;
    margin-bottom: 0;
}

/* subscribe field: same flex row as the template, just sized properly
   so the input and the button match and the arrow is not cramped */
.footer-widget__newsletter-form {
    gap: 12px;
}

.footer-widget__newsletter-form-input-box input[type="email"] {
    height: 58px;
    border-radius: 29px;
    background-color: rgba(var(--tanspot-white-rgb), .08);
    border: 1px solid rgba(var(--tanspot-white-rgb), .16);
    padding-left: 24px;
    padding-right: 24px;
    transition: all 400ms ease;
}

.footer-widget__newsletter-form-input-box input[type="email"]:focus {
    border-color: rgba(var(--tanspot-base-rgb), .70);
    background-color: rgba(var(--tanspot-white-rgb), .12);
}

.footer-widget__newsletter-form-input-box input[type="email"]::placeholder {
    color: rgba(var(--tanspot-white-rgb), .55);
}

.footer-widget__newsletter-btn.thm-btn {
    height: 58px;
    gap: 10px;
    padding: 0 8px 0 26px;
    border-radius: 29px;
    font-size: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .20);
}

.footer-widget__newsletter-btn.thm-btn > span {
    height: 42px;
    width: 42px;
    font-size: 13px;
}


/* --------------------------------------------------------------------------
   2. MIDDLE AREA — the 4 columns
   -------------------------------------------------------------------------- */
.site-footer__middle {
    padding: 46px 0 50px;
}

.site-footer__middle > .row {
    align-items: flex-start;
}

/* the template pushed columns around with big left margins (80px / 70px),
   which squashed the text. Proportional widths are used below instead. */
.footer-widget__usefull-link,
.footer-widget__services,
.footer-widget__contact-box,
.footer-widget__right-bottom {
    margin-left: 0;
}

.footer-widget__about {
    margin-top: 0;
}

/* logo was rendering at its full 360x160 and pushing the column down */
.footer-widget__logo img {
    height: 68px;
    width: auto;
    max-width: 100%;
}

.footer-widget__about-text {
    font-size: 15.5px;
    line-height: 1.75em;
    margin-top: 16px;
    margin-bottom: 0;
}

.site-footer__social {
    margin-top: 18px;
    padding-top: 18px;
}

.site-footer__social a {
    height: 38px;
    width: 38px;
    font-size: 15px;
}

/* column headings */
.footer-widget__title-box {
    margin-bottom: 18px;
}

.footer-widget__title {
    font-size: 21px;
    line-height: 30px;
}

/* link lists */
.footer-widget__link li + li {
    margin-top: 10px;
}

.footer-widget__link li a {
    font-size: 15.5px;
    line-height: 1.6em;
}

/* contact list */
.footer-widget__contact li {
    gap: 11px;
}

.footer-widget__contact li + li {
    margin-top: 12px;
}

.footer-widget__contact li .icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
}

.footer-widget__contact li .content p,
.footer-widget__contact li .content p a {
    font-size: 15.5px;
    line-height: 1.55em;
}

/* the email address and phone number must never break across two lines */
.footer-widget__contact li .content p a[href^="mailto:"],
.footer-widget__contact li .content p a[href^="tel:"] {
    white-space: nowrap;
}


/* --------------------------------------------------------------------------
   3. BOTTOM BAR
   -------------------------------------------------------------------------- */
.site-footer__bottom-inner {
    padding: 18px 0 17px;
    gap: 12px;
}

.site-footer__bottom-text {
    font-size: 15.5px;
    margin-bottom: 0;
}

.site-footer__bottom-menu li a {
    font-size: 15.5px;
}


/* --------------------------------------------------------------------------
   4. DESKTOP 1200px and up — balanced 4 columns on ONE row
   Widths are uneven on purpose: Quick Links holds short words and gives
   its space to Contact, so the email address fits on one line.
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 1200px) {

    .site-footer__middle > .row > [class*="col-"]:nth-child(1) {
        flex: 0 0 30%;
        max-width: 30%;
    }

    .site-footer__middle > .row > [class*="col-"]:nth-child(2) {
        flex: 0 0 15%;
        max-width: 15%;
    }

    .site-footer__middle > .row > [class*="col-"]:nth-child(3) {
        flex: 0 0 27%;
        max-width: 27%;
    }

    .site-footer__middle > .row > [class*="col-"]:nth-child(4) {
        flex: 0 0 28%;
        max-width: 28%;
    }

    /* keep the headings on a single line */
    .footer-widget__title {
        white-space: nowrap;
    }

    /* small optical nudge so the 3 list columns line up with the logo */
    .footer-widget__usefull-link,
    .footer-widget__services,
    .footer-widget__contact-box {
        padding-top: 4px;
    }
}


/* --------------------------------------------------------------------------
   5. TABLET / SMALL LAPTOP 768px – 1199px — clean 2 x 2 grid
   -------------------------------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 1199px) {

    .footer-widget__newsletter {
        padding: 40px 0 36px;
    }

    .footer-widget__newsletter-title {
        font-size: 26px;
    }

    .site-footer__middle {
        padding: 42px 0 45px;
    }

    /* row 1 of the grid needs bottom spacing, row 2 does not */
    .site-footer__middle > .row > [class*="col-"]:nth-child(1),
    .site-footer__middle > .row > [class*="col-"]:nth-child(2) {
        margin-bottom: 38px;
    }

    .footer-widget__services,
    .footer-widget__contact-box {
        margin-top: 0;
    }
}


/* --------------------------------------------------------------------------
   6. MOBILE up to 767px — single column, even spacing
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {

    .footer-widget__newsletter {
        padding: 40px 0 34px;
        gap: 18px;
    }

    .footer-widget__newsletter-title {
        font-size: 24px;
        margin-bottom: 6px;
    }

    .footer-widget__newsletter-form {
        gap: 14px;
        max-width: 100%;
    }

    .footer-widget__newsletter-form-input-box {
        max-width: 100%;
    }

    .footer-widget__newsletter-form-input-box input[type="email"] {
        height: 54px;
        text-align: center;
    }

    .footer-widget__newsletter-btn.thm-btn {
        height: 54px;
        margin: 0 auto;
        padding: 0 8px 0 26px;
        border-radius: 27px;
    }

    .site-footer__middle {
        padding: 38px 0 34px;
    }

    /* every column gets the same rhythm instead of mixed margins */
    .footer-widget__usefull-link,
    .footer-widget__services,
    .footer-widget__contact-box {
        margin-top: 0;
        margin-bottom: 0;
        padding-top: 30px;
    }

    .footer-widget__logo img {
        height: 62px;
    }

    .footer-widget__title {
        font-size: 20px;
    }

    .site-footer__bottom-inner {
        flex-direction: column;
        text-align: center;
        padding: 20px 0;
        gap: 14px;
    }

    .site-footer__bottom-text {
        margin-bottom: 0;
    }

    /* the template stacked these vertically — a wrapping row reads better */
    .site-footer__bottom-menu {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 22px;
    }

    .site-footer__bottom-menu li + li {
        margin-left: 0;
        margin-top: 0;
    }
}


/* --------------------------------------------------------------------------
   7. SMALL PHONES up to 480px
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 480px) {

    .footer-widget__newsletter-title {
        font-size: 22px;
    }

    .footer-widget__about-text,
    .footer-widget__link li a,
    .footer-widget__contact li .content p,
    .footer-widget__contact li .content p a,
    .site-footer__bottom-text,
    .site-footer__bottom-menu li a {
        font-size: 15px;
    }

    .site-footer__social a {
        height: 36px;
        width: 36px;
    }

    .site-footer__social a + a {
        margin-left: 8px;
    }
}