/* ==========================================================================
   Layout: footer  (partials/site/footer.blade.php)
   --------------------------------------------------------------------------
   A big rounded navy card: closing line + quote pill, a 4-column grid,
   the Al-Ameen Group row; © and legal links sit under the card.
   ========================================================================== */

.ftr { padding-top: var(--section); padding-bottom: var(--s-4); }
.ftr__card { padding: clamp(1.75rem, 1rem + 3vw, 3.5rem); font-size: var(--fs-sm); color: var(--on-dark-soft); }
.ftr__card a { color: #fff; }
.ftr__card a:hover { color: var(--lemon); }

/* ── Closing line ────────────────────────────────────────────────────────── */
.ftr__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-5);
    padding-bottom: var(--s-7);
    border-bottom: 1px solid var(--line-dark);
}
.ftr__cta-title { max-width: 20ch; color: #fff; font-family: var(--font-head); font-weight: 700; font-size: var(--fs-xl); line-height: var(--lh-head); }
:lang(en) .ftr__cta-title { letter-spacing: -0.02em; }
.ftr__card .btn--primary, .ftr__card .btn--primary:hover { color: var(--navy); }

/* ── Grid ────────────────────────────────────────────────────────────────── */
.ftr__cta + .ftr__grid { padding-top: var(--s-7); }
.ftr__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.5fr; gap: var(--s-7); padding-block: 0 var(--s-7); }

.ftr__logo { display: block; width: 150px; color: #fff; }
.ftr__tagline { margin-top: var(--s-4); color: var(--lemon); font-weight: 600; }
.ftr__about { max-width: 28rem; margin-top: var(--s-2); }
.ftr__socials { display: flex; gap: var(--s-2); margin-top: var(--s-5); }
.ftr__socials a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.08);
    font-size: 1.1rem;
}

.ftr__heading { margin-bottom: var(--s-4); color: #fff; font-size: var(--fs-sm); font-weight: 700; }
.ftr__col ul { display: grid; gap: var(--s-2); }
.ftr__col a[aria-current="page"] { color: var(--lemon); }
.ftr__contact li { display: flex; align-items: flex-start; gap: var(--s-2); }
.ftr__contact .icon { margin-top: 0.35em; color: var(--sky); }

/* ── Last row: the group brands at the start, the HiTech credit at the end ── */
.ftr__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4) var(--s-5);
    padding-top: var(--s-5);
    border-top: 1px solid var(--line-dark);
}
.ftr__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-5);
}
.ftr__group-label { display: inline-flex; align-items: center; gap: var(--s-2); color: #fff; font-weight: 600; }
.ftr__group-label .mark { width: 20px; color: var(--lemon); }
.ftr__group a { display: inline-flex; align-items: center; gap: 0.35em; font-weight: 600; }
.ftr__group a .icon { font-size: 0.85em; }
.ftr__group small { margin-inline-start: 0.3em; padding: 0.1em 0.6em; border-radius: var(--r-pill); background: rgb(255 255 255 / 0.1); color: var(--sky); }

/* "Designed & Developed by HiTech" (the logo is white, so it stays inside the navy card) */
.ftr__credit {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin-inline-start: auto;
    color: rgb(255 255 255 / 0.7);
    font-size: var(--fs-xs);
}
.ftr__credit img { height: 22px; width: auto; transition: opacity 0.2s; }
.ftr__credit:hover img { opacity: 0.8; }

/* ── Under the card ──────────────────────────────────────────────────────── */
.ftr__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-2) 0;
    color: var(--ink-faint);
    font-size: var(--fs-xs);
}
.ftr__legal { display: flex; gap: var(--s-4); }
.ftr__legal a:hover { color: var(--navy); }

@media (max-width: 991.98px) {
    .ftr__grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
    .ftr__brand, .ftr__contact { grid-column: 1 / -1; }
    .ftr__cta .btn { width: 100%; }
}