/* =============================================================================
   AYAL TOURS AND TRAVEL — FOOTER STYLES
   Built by Vanquish Brand Design | vanquish.co.ke
   ============================================================================= */


/* =============================================================================
   1. FOOTER MAIN
   ============================================================================= */

.ayal-footer {
    background-color: #14150F;
    color: rgba(247, 245, 239, 0.70);
    font-family: var(--font-body);
}

.ayal-footer__main {
    padding: clamp(56px, 8vw, 96px) 0 clamp(40px, 6vw, 72px);
    border-bottom: 1px solid rgba(247, 245, 239, 0.08);
}

.ayal-footer__container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 56px);
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1.3fr;
    gap: clamp(32px, 4vw, 64px);
    align-items: start;
}


/* =============================================================================
   2. BRAND COLUMN
   ============================================================================= */

.ayal-footer__logo {
    display: inline-block;
    margin-bottom: var(--space-20);
    text-decoration: none;
}

.ayal-footer__logo .custom-logo {
    height: 44px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.88;
    transition: opacity var(--duration-base) var(--ease);
}

.ayal-footer__logo:hover .custom-logo { opacity: 1; }

.ayal-footer__logo-text {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: var(--weight-medium);
    color: #FFFFFF;
    letter-spacing: var(--tracking-wide);
}

.ayal-footer__tagline {
    font-family: var(--font-heading);
    font-size: var(--text-body-sm);
    font-style: normal; /* Qaftan ships one weight, no italic master — see ayal-tokens.css */
    color: #C7B78C;
    margin-bottom: var(--space-16);
    line-height: var(--leading-relaxed);
}

.ayal-footer__description {
    font-size: var(--text-body-sm);
    line-height: var(--leading-loose);
    color: rgba(247, 245, 239, 0.50);
    margin-bottom: var(--space-24);
    max-width: 300px;
}

/* Social links */
.ayal-footer__social {
    display: flex;
    align-items: center;
    gap: var(--space-10);
}

.ayal-footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(247, 245, 239, 0.14);
    border-radius: 6px;
    color: rgba(247, 245, 239, 0.50);
    text-decoration: none;
    transition:
        border-color     var(--duration-base) var(--ease),
        color            var(--duration-base) var(--ease),
        background-color var(--duration-base) var(--ease);
}

.ayal-footer__social-link:hover {
    border-color: #C7B78C;
    color: #C7B78C;
    background-color: rgba(216, 199, 161, 0.08);
}


/* =============================================================================
   3. NAV COLUMNS
   ============================================================================= */

.ayal-footer__heading {
    font-family: var(--font-body);
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: rgba(247, 245, 239, 0.35);
    margin-bottom: var(--space-20);
}

.ayal-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
}

.ayal-footer__links li a {
    font-family: var(--font-body);
    font-size: var(--text-body-sm);
    color: rgba(247, 245, 239, 0.62);
    text-decoration: none;
    display: inline-block;
    transition:
        color        var(--duration-base) var(--ease),
        padding-left var(--duration-base) var(--ease);
}

.ayal-footer__links li a:hover {
    color: #C7B78C;
    padding-left: var(--space-4);
}


/* =============================================================================
   4. CONTACT COLUMN
   ============================================================================= */

.ayal-footer__contact {
    list-style: none;
    margin: 0 0 var(--space-24);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.ayal-footer__contact li {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ayal-footer__contact-label {
    font-family: var(--font-body);
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: rgba(247, 245, 239, 0.28);
}

.ayal-footer__contact-link {
    font-family: var(--font-body);
    font-size: var(--text-body-sm);
    color: rgba(247, 245, 239, 0.65);
    text-decoration: none;
    transition: color var(--duration-base) var(--ease);
}

.ayal-footer__contact-link:hover {
    color: #C7B78C;
}

.ayal-footer__contact-link--whatsapp:hover {
    color: #25D366;
}

/* CTA button */
.ayal-footer__cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px var(--space-20);
    background-color: #283618;
    border: 2px solid #283618;
    border-radius: 8px;
    font-family: var(--font-body);
    font-size: var(--text-body-sm);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: #F5F2EB;
    cursor: pointer;
    transition:
        background-color var(--duration-base) var(--ease),
        border-color     var(--duration-base) var(--ease),
        transform        var(--duration-base) var(--ease),
        box-shadow       var(--duration-base) var(--ease);
}

.ayal-footer__cta-btn:hover {
    background-color: #1B2410;
    border-color: #1B2410;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(75, 93, 58, 0.24);
}


/* =============================================================================
   5. FOOTER BAR
   ============================================================================= */

.ayal-footer__bar {
    padding: var(--space-20) 0;
}

.ayal-footer__bar-inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 56px);
    /* minmax(0,1fr) / auto / minmax(0,1fr) — the two outer tracks are
       forced to equal width (the min:0 lets them shrink below their
       content's natural width if needed) regardless of how long the
       copyright text vs. the legal links happen to be, so the credit
       line in the centre column always sits at the true centre of the
       bar rather than drifting toward whichever side has less content. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-20);
}

.ayal-footer__copy {
    justify-self: start;
    font-size: var(--text-micro);
    color: rgba(247, 245, 239, 0.28);
    margin: 0;
}

.ayal-footer__legal {
    justify-self: end;
}

.ayal-footer__legal {
    display: flex;
    align-items: center;
    gap: var(--space-12);
}

.ayal-footer__legal a {
    font-size: var(--text-micro);
    color: rgba(247, 245, 239, 0.28);
    text-decoration: none;
    transition: color var(--duration-base) var(--ease);
}

.ayal-footer__legal a:hover {
    color: rgba(247, 245, 239, 0.60);
}

.ayal-footer__legal span {
    color: rgba(247, 245, 239, 0.18);
    font-size: var(--text-micro);
}

.ayal-footer__credit {
    font-size: var(--text-micro);
    color: rgba(247, 245, 239, 0.22);
    margin: 0;
    justify-self: center;
    text-align: center;
    white-space: nowrap;
}

.ayal-footer__credit a {
    color: rgba(247, 245, 239, 0.36);
    text-decoration: none;
    transition: color var(--duration-base) var(--ease);
}

.ayal-footer__credit a:hover { color: #C7B78C; }


/* =============================================================================
   6. RESPONSIVE
   ============================================================================= */

@media (max-width: 1023px) {
    .ayal-footer__container {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-40);
    }

    .ayal-footer__brand {
        grid-column: 1 / -1;
    }

    .ayal-footer__description {
        max-width: 480px;
    }
}

@media (max-width: 767px) {
    .ayal-footer__container {
        grid-template-columns: 1fr;
        gap: var(--space-32);
    }

    .ayal-footer__brand {
        grid-column: auto;
    }

    .ayal-footer__bar-inner {
        grid-template-columns: 1fr;
        justify-items: flex-start;
        gap: var(--space-8);
    }

    /* Stacked order: copyright, then the Vanquish credit, then legal
       links — same left-to-right reading order as desktop, top to
       bottom instead of left to right. */
    .ayal-footer__copy { order: 1; }

    .ayal-footer__credit {
        order: 2;
        justify-self: flex-start;
        text-align: left;
    }

    .ayal-footer__legal {
        order: 3;
        justify-self: flex-start;
        flex-wrap: wrap;
    }
}

/* =============================================================================
   7. FLOATING WHATSAPP CAPSULE — site-wide, bottom-left
   ============================================================================= */

.ayal-float-capsule {
    position: fixed;
    left: clamp(16px, 3vw, 28px);
    bottom: clamp(16px, 3vw, 28px);
    z-index: 300;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px 13px 15px;
    border-radius: 999px;
    background-color: #25D366;
    color: #FFFFFF;
    box-shadow: 0 8px 24px rgba(16, 20, 12, 0.28);
    transition: transform var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease);
}

.ayal-float-capsule:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(16, 20, 12, 0.34);
}

.ayal-float-capsule svg { flex-shrink: 0; }

.ayal-float-capsule__label {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

@media (max-width: 560px) {
    /* Collapse to an icon-only circle on small screens so it doesn't
       compete with the mobile nav / enquiry CTA for thumb space. */
    .ayal-float-capsule {
        padding: 14px;
    }
    .ayal-float-capsule__label { display: none; }
}