/* =========================================================
   NAGHAM PERFUME — site footer
   Shared by index / products / about.

   Two zones split by a vertical gold rule: identity on the
   inline-start (the mark and what the shop promises) and action on
   the inline-end (links, contacts, social). Two wide zones read as
   deliberate where three thin columns read as a gap — and side by
   side keeps the whole block about as tall as the logo.

   RTL-first: no left/right, only inline-start / inline-end.
   ========================================================= */

.site-footer {
  margin-block-start: clamp(2rem, 4vw, 3rem);
  background: linear-gradient(180deg, #fdfcf9 0%, #faf8f3 100%);
  border-block-start: 1px solid color-mix(in srgb, var(--gold) 26%, transparent);
  color: var(--ink);
}

.footer__inner {
  max-inline-size: 1060px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: clamp(1.4rem, 2.4vw, 2rem) clamp(1.1rem, 1.8vw, 1.4rem);

  /* Equal halves with the rule dead centre.
     minmax(0, 1fr) — NOT plain 1fr. A bare `1fr` is minmax(auto, 1fr),
     and that `auto` floor lets a track grow past its share whenever its
     content's min-content is wide, stealing the width from the other
     half. On the products page that squeezed the links column down to
     a few characters. Pinning the floor to 0 keeps both halves equal
     no matter what the page around them is doing. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.2rem);
}

/* ---------- Zones ---------- */
.footer__brand,
.footer__side {
  display: grid;
  justify-items: center;
  text-align: center;
  inline-size: 100%;
  min-inline-size: 0;
}
.footer__brand { gap: .75rem; }
.footer__side  { gap: .85rem; }

/* The rule fades at both ends so it reads as a seam rather than a
   hard border cutting the footer in half. */
.footer__divider {
  align-self: stretch;
  min-block-size: 120px;
  background: linear-gradient(180deg,
    transparent,
    color-mix(in srgb, var(--gold) 42%, transparent) 18%,
    color-mix(in srgb, var(--gold) 42%, transparent) 82%,
    transparent);
}

/* ---------- Mark ---------- */
.footer__logo-link {
  display: block;
  transition: opacity .35s var(--ease-luxe);
}
.footer__logo-link:hover { opacity: .82; }
.footer__logo-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 6px; }

.footer__logo {
  display: block;
  inline-size: clamp(148px, 14vw, 186px);
  block-size: auto;
}

.footer__tagline {
  font-size: .98rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink-soft);
}

/* ---------- Nav ---------- */
.footer__nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer__link {
  position: relative;
  white-space: nowrap;
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--ink);
  transition: color .3s var(--ease-luxe);
}
.footer__link::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: -4px;
  inline-size: 0;
  block-size: 1px;
  background: var(--gold);
  transition: inline-size .35s var(--ease-luxe);
}
.footer__link:hover { color: var(--gold-deep); }
.footer__link:hover::after { inline-size: 100%; }
.footer__link:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 3px; }

/* Gold lozenge between the two links — the same gem that divides
   the sections upstairs, shrunk to punctuation size. */
.footer__dot {
  inline-size: 5px;
  aspect-ratio: 1;
  rotate: 45deg;
  background: var(--gold);
  opacity: .75;
}

/* ---------- Contact + social, one line ---------- */
.footer__contacts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem .9rem;
}

.footer__contact {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: .5rem;
  font-size: .97rem;
  font-weight: 300;
  color: var(--ink-soft);
  transition: color .3s var(--ease-luxe);
}
.footer__contact svg { inline-size: 18px; block-size: 18px; color: var(--gold-deep); flex: 0 0 auto; }
.footer__contact:hover { color: var(--gold-deep); }
.footer__contact:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* Latin strings inside an RTL line — isolate them so the +970 and
   the e-mail never reorder around the Arabic. */
.footer__ltr {
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;   /* "+970 59 123 4567" is one thing, not four */
}

.footer__sep {
  inline-size: 1px;
  block-size: 15px;
  background: color-mix(in srgb, var(--gold) 35%, transparent);
}

/* ---------- Social ---------- */
.footer__social {
  display: inline-flex;
  gap: .5rem;
}

.footer__social a {
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  border-radius: 50%;
  color: var(--gold-deep);
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
  transition:
    background-color .35s var(--ease-luxe),
    color .35s var(--ease-luxe),
    border-color .35s var(--ease-luxe),
    translate .35s var(--ease-luxe);
}
.footer__social a:hover {
  background: var(--gold-deep);
  border-color: var(--gold-deep);
  color: #fff;
  translate: 0 -2px;
}
.footer__social a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.footer__social svg { inline-size: 16px; block-size: 16px; }

/* ---------- Bottom bar ---------- */
.footer__bar { border-block-start: 1px solid color-mix(in srgb, var(--gold) 16%, transparent); }

.footer__bar-inner {
  max-inline-size: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: .7rem;
  text-align: center;
  font-size: .84rem;
  font-weight: 300;
  color: var(--muted);
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  /* Two zones need width. On a narrow screen they stack, and the rule
     turns on its side to keep doing the same job. */
  .footer__inner {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }
  .footer__divider {
    justify-self: center;
    inline-size: min(220px, 60%);
    block-size: 1px;
    min-block-size: 0;
    background: linear-gradient(90deg,
      transparent,
      color-mix(in srgb, var(--gold) 42%, transparent) 18%,
      color-mix(in srgb, var(--gold) 42%, transparent) 82%,
      transparent);
  }
}

@media (max-width: 560px) {
  .footer__tagline { font-size: .94rem; }

  /* The vertical rules only make sense while the row is one line;
     once it wraps they become stray marks, so they step out and
     the row breathes on its own gaps instead. */
  .footer__sep { display: none; }
  .footer__contacts { gap: .8rem 1rem; }
  .footer__social { inline-size: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .footer__logo-link,
  .footer__link, .footer__link::after,
  .footer__contact, .footer__social a { transition: none; }
}