/* ==========================================================================
   MEHFIL FOOTER — "Premium"
   ==========================================================================

   The client's supplied stylesheet, used as given. Everything is scoped to
   .mehfil-footer exactly as it was written, so it cannot reach anything else
   on the site.

   Four things differ from the file as supplied, each for a reason:

   1. The two Unsplash backgrounds are served from this site's media library
      instead of being hotlinked. They are on every page of the site, so a
      third-party host would be a dependency on every page load, and the
      originals were 550 KB + 790 KB. Re-encoded to WebP they are 114 KB and
      84 KB — the gradient over them is 90-96% opaque, so there is almost no
      detail left to lose.

   2. The logo block takes a real <img> rather than an icon plus a wordmark.
      The reference PNG shows the actual Mehfil logo; the icon-and-text in
      the HTML was standing in for it.

   3. The delivery discs hold the real platform logos rather than CSS-drawn
      text, for the same reason. The --uber / --skip / --dash colour
      modifiers are therefore unused and have been dropped.

   4. .mehfil-footer__motto gets `text-transform: uppercase`. The reference
      hardcoded the motto in capitals; here it comes from a translatable
      string stored in sentence case, so the capitals are applied in CSS.

   Loaded site-wide after footer.css. The old .mf-footer__* rules in that
   file no longer match anything except the newsletter band, which keeps its
   own classes and its own styling.
   ========================================================================== */

.mehfil-footer {
  --gold: #dca638;
  --gold-light: #ffcf68;
  --text: #f5f0e8;
  --muted: #aaa7a1;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 76px 5.5% 0;
  color: var(--text);
  font-family: "DM Sans", sans-serif;
  /* Base colour, deepened along with the gradient below. It shows through
     wherever the photograph does not cover. */
  background: #06070a;
}

.mehfil-footer,
.mehfil-footer * {
  box-sizing: border-box;
}

/* Darkened from the original .96/.90. Both stops are deepened in colour as
   well as raised in opacity — raising alpha alone pushes the panel towards
   whatever grey the stop already was, so the colour has to come down with
   it or it reads as flatter rather than darker. The spice photograph is
   still there, just further back. */
.mehfil-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(110deg, rgba(4,5,7,.985), rgba(7,8,11,.965)),
    url("../../../../uploads/2026/10/mehfil-footer-bg.webp") center/cover;
}

/* This layer was working against the gradient: `mix-blend-mode: screen`
   lightens whatever is beneath it, so at .10 it was adding back some of the
   brightness the gradient had just removed. Dropped to .04 so it still
   breaks up the flat black without lifting it. */
.mehfil-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .04;
  background: url("../../../../uploads/2026/10/mehfil-footer-texture.webp") center/cover;
  mix-blend-mode: screen;
}

.mehfil-footer a {
  text-decoration: none;
}

.mehfil-footer__inner {
  max-width: 1500px;
  margin: 0 auto;
  padding-bottom: 62px;
  display: grid;
  grid-template-columns: 1.18fr .9fr 1.18fr 1.35fr;
  gap: clamp(25px, 3vw, 52px);
}

.mehfil-footer__brand,
.mehfil-footer__column {
  min-width: 0;
}

.mehfil-footer__column {
  padding-left: clamp(22px, 2.5vw, 42px);
  border-left: 1px solid rgba(220,166,56,.23);
}

/* BRAND */
.mehfil-footer__logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 210px;
  max-width: 100%;
  margin-bottom: 24px;
  color: var(--text);
}

/* Real logo image in place of the reference's icon + wordmark. Height is
   capped rather than set, so the natural 135x100 is never upscaled. */
.mehfil-footer__logo img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 104px;
}

.mehfil-footer__logo-rule {
  width: 100%;
  height: 1px;
  margin-top: 12px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.mehfil-footer__intro {
  max-width: 330px;
  margin: 0 0 24px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
}

.mehfil-footer__socials {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.mehfil-footer__socials a {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(220,166,56,.55);
  border-radius: 50%;
  color: #f7f3ec;
  background: rgba(255,255,255,.025);
  transition: .25s ease;
}

.mehfil-footer__socials a:hover {
  color: #111;
  background: var(--gold-light);
  transform: translateY(-4px);
}

.mehfil-footer__halal {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border: 1px solid rgba(220,166,56,.6);
  border-radius: 50px;
  color: #e8e1d6;
  font-size: 14px;
}

.mehfil-footer__halal i {
  color: var(--gold-light);
}

/* HEADINGS */
.mehfil-footer h2,
.mehfil-footer h3 {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0;
  color: #fff9f0;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  line-height: 1.4;
}

.mehfil-footer h2 {
  font-size: clamp(19px, 1.4vw, 25px);
}

.mehfil-footer h3 {
  font-size: 20px;
}

/* footer.css draws a ::after underline on footer headings. These are h2/h3
   rather than h4 so that rule cannot reach them, and the underline here is
   its own element — no risk of two rules drawing two lines. */
.mehfil-footer__heading-line {
  display: block;
  width: 44px;
  height: 3px;
  margin: 15px 0 24px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
}

.mehfil-footer__heading-icon,
.mehfil-footer__contact-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 43px;
  height: 43px;
  border: 1px solid rgba(220,166,56,.38);
  border-radius: 50%;
  color: var(--gold-light);
  background: radial-gradient(circle at 30% 20%, rgba(220,166,56,.2), rgba(220,166,56,.035));
}

/* QUICK LINKS */
.mehfil-footer__links {
  display: grid;
  gap: 17px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mehfil-footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  color: var(--muted);
  font-size: 16px;
  transition: .2s ease;
}

.mehfil-footer__links a i {
  color: var(--gold);
  font-size: 12px;
}

.mehfil-footer__links a:hover {
  color: #fff;
  transform: translateX(4px);
}

/* OPENING HOURS */
.mehfil-footer__hours > p {
  margin: 0;
  padding-left: 56px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.9;
}

.mehfil-footer__hours > p strong {
  color: #f7f2e9;
}

/* DELIVERY */
.mehfil-footer__delivery {
  margin-top: 27px;
  padding-top: 25px;
  border-top: 1px solid rgba(220,166,56,.22);
}

.mehfil-footer__delivery h3 {
  margin-bottom: 20px;
}

.mehfil-footer__delivery-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-left: 56px;
}

.mehfil-footer__delivery-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  padding: 9px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 5px 18px rgba(0,0,0,.2);
  transition: transform .2s ease;
}

.mehfil-footer__delivery-logo:hover {
  transform: translateY(-4px);
}

/* The three marks arrive at different aspect ratios and with different
   built-in padding, so they are boxed to one optical size. */
.mehfil-footer__delivery-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* CONTACT */
.mehfil-footer__contact {
  display: flex;
  flex-direction: column;
}

.mehfil-footer__contact-row {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 24px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

.mehfil-footer__contact-row p {
  margin: 0 0 10px;
}

.mehfil-footer__contact-row a {
  color: var(--muted);
  overflow-wrap: anywhere;
  transition: color .2s ease;
}

.mehfil-footer__contact-row a:hover {
  color: var(--gold-light);
}

.mehfil-footer__contact-row .mehfil-footer__contact-icon {
  width: 42px;
  height: 42px;
}

.mehfil-footer__contact-row .mehfil-footer__directions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--gold-light);
  font-weight: 600;
}

/* BOTTOM BAR */
.mehfil-footer__bottom {
  position: relative;
  max-width: 1500px;
  min-height: 88px;
  margin: 0 auto;
  padding: 22px 0;
  border-top: 1px solid rgba(220,166,56,.48);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
}

.mehfil-footer__bottom p {
  margin: 0;
  color: #85827d;
  font-size: 13px;
  line-height: 1.6;
}

.mehfil-footer__bottom p a {
  color: var(--gold-light);
  font-weight: 700;
}

.mehfil-footer__motto {
  color: var(--gold-light) !important;
  letter-spacing: 2.5px;
  font-size: 10px !important;
  text-align: center;
  white-space: nowrap;
  /* The string is stored in sentence case so it stays ordinary text for
     translation; the capitals are presentation. */
  text-transform: uppercase;
}

.mehfil-footer__motto span {
  padding: 0 6px;
}

.mehfil-footer__legal {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
}

.mehfil-footer__legal a {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.mehfil-footer__legal a:hover {
  color: var(--gold-light);
}

.mehfil-footer__legal > span {
  width: 1px;
  height: 20px;
  background: var(--gold);
}

/* BACK TO TOP */
.mehfil-footer__top {
  position: absolute;
  right: 4%;
  bottom: 62px;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  color: #15120b;
  background: linear-gradient(135deg, #ffcf68, #c68a19);
  box-shadow: 0 7px 24px rgba(0,0,0,.35);
  cursor: pointer;
  transition: transform .2s ease;
}

.mehfil-footer__top:hover {
  transform: translateY(-4px);
}

/* TABLET */
@media (max-width: 1100px) {
  .mehfil-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 44px;
  }

  .mehfil-footer__column:nth-child(3) {
    border-left: 0;
    padding-left: 0;
  }

  .mehfil-footer__bottom {
    grid-template-columns: 1fr 1fr;
  }

  .mehfil-footer__motto {
    display: none;
  }
}

/* MOBILE */
@media (max-width: 640px) {
  .mehfil-footer {
    padding: 52px 22px 0;
  }

  .mehfil-footer__inner {
    grid-template-columns: 1fr;
    gap: 38px;
    padding-bottom: 42px;
  }

  .mehfil-footer__column,
  .mehfil-footer__column:nth-child(3) {
    padding: 28px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(220,166,56,.22);
  }

  .mehfil-footer__brand {
    padding-bottom: 4px;
  }

  .mehfil-footer__logo {
    align-items: flex-start;
    width: 175px;
  }

  .mehfil-footer__logo-rule {
    background: linear-gradient(90deg, var(--gold), transparent);
  }

  .mehfil-footer__hours > p,
  .mehfil-footer__delivery-links {
    padding-left: 0;
  }

  .mehfil-footer__bottom {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 22px 0 30px;
  }

  .mehfil-footer__legal {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
  }

  .mehfil-footer__bottom p {
    font-size: 12px;
  }

  .mehfil-footer__top {
    right: 22px;
    bottom: 104px;
    width: 46px;
    height: 46px;
  }
}

/* Hover transforms are the only motion here; honour the system setting. */
@media (prefers-reduced-motion: reduce) {
  .mehfil-footer__socials a,
  .mehfil-footer__links a,
  .mehfil-footer__delivery-logo,
  .mehfil-footer__top {
    transition: none;
  }

  .mehfil-footer__socials a:hover,
  .mehfil-footer__links a:hover,
  .mehfil-footer__delivery-logo:hover,
  .mehfil-footer__top:hover {
    transform: none;
  }
}