/* ==========================================================================
   footer.css — global footer
   --------------------------------------------------------------------------
   Milestone 3 · Global footer

   Spec: Phase 2 §0.4 (Global Footer) · Phase 5 §2.10 (Columns),
   §3.5 (NavigationGroup), §3.10 (FooterNavigation)

   Zones: A — 2px brand-yellow top rule; B — 4-column grid (About, Quick
   Links, Services, Contact); C — bottom bar with copyright.

   Responsive: 1 column <768, 2×2 at 768–1023, 4 columns ≥1024 (Phase 2
   §1.8 / Phase 5 §3.10).

   Inverse scheme on --color-heading: near-white text, links white at 85%,
   hover/focus brand-yellow. All colours derive from design tokens only.
   ========================================================================== */

.site-footer {
  background: var(--color-heading);
  color: color-mix(in srgb, var(--color-white) 85%, transparent);
  border-top: 2px solid var(--color-brand-yellow);
}

/* Focus ring recoloured for the dark surface (token colour only) */
.site-footer :focus-visible {
  outline-color: var(--color-brand-yellow);
}

/* --------------------------------------------------------------------------
   Zone B — 4-column grid (1-col → 2×2 → 4-col)
   -------------------------------------------------------------------------- */
.footer__inner {
  padding-block: var(--section-space-mobile);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-40);
}

@media (min-width: 768px) {
  .footer__inner {
    padding-block: var(--section-space-tablet);
  }

  .footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-40) var(--space-32);
  }
}

@media (min-width: 1024px) {
  .footer__inner {
    padding-block: var(--section-space-laptop);
  }

  .footer__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-32);
  }
}

/* Footer column — group gap `space-16` (Phase 5 §3.5 NavigationGroup) */
.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
}

/* Column label — 13px 600 (Phase 5 §3.5) */
.footer__title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-label-current);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-label);
  letter-spacing: var(--tracking-label);
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Column 1 — logo + blurb + social
   -------------------------------------------------------------------------- */

/* Brand logo — logos/logo.svg (Phase R1). The artwork's brand colours
   (dark purple/green wordmark) are drawn for light surfaces, so it sits on a
   small white chip inside the dark footer column. The img box is sized to the
   visible lockup (wordmark + service banner, object-fit cover) so the empty
   A4 canvas is cropped without stretching the artwork. */
.footer-logo {
  display: inline-block;
  width: fit-content;
  padding: var(--space-8) var(--space-12);
  margin-block-end: var(--space-8);
  background: var(--color-white);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.footer-logo__img {
  display: block;
  width: clamp(180px, 34vw, 248px);
  height: auto;
  aspect-ratio: 3.6 / 1;
  object-fit: cover;
  object-position: 50% 46%;
}

/* Short company description (Phase 3 §1.13) */
.footer__blurb {
  margin: 0;
  max-width: var(--measure);
  font-size: var(--text-body-current);
  line-height: var(--lh-body);
  color: color-mix(in srgb, var(--color-white) 85%, transparent);
}

/* Business-directory profiles — the client's confirmed external presence
   (Phase R7): Justdial and IndiaMART, opened in a new tab. */
.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-16);
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
}

.footer-social__item {
  font-size: var(--text-small-current);
  line-height: var(--lh-small);
  color: color-mix(in srgb, var(--color-white) 85%, transparent);
}

.footer-social__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  font-size: var(--text-small-current);
  line-height: var(--lh-small);
  color: color-mix(in srgb, var(--color-white) 85%, transparent);
  text-decoration: none;
}

.footer-social__link:hover,
.footer-social__link:focus-visible {
  color: var(--color-brand-yellow);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* --------------------------------------------------------------------------
   Columns 2–3 — link lists (link gap `space-8`, Phase 5 §3.5 / §3.10)
   -------------------------------------------------------------------------- */
.footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  font-size: var(--text-body-current);
  line-height: var(--lh-body);
  color: color-mix(in srgb, var(--color-white) 85%, transparent);
  text-decoration: none;
}

.footer__link:hover,
.footer__link:focus-visible {
  color: var(--color-brand-yellow);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* --------------------------------------------------------------------------
   Column 4 — contact (verified facts, Phase 3 §1.13)
   -------------------------------------------------------------------------- */
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  font-style: normal;
}

.footer-contact__line {
  margin: 0;
  font-size: var(--text-body-current);
  line-height: var(--lh-body);
  color: color-mix(in srgb, var(--color-white) 85%, transparent);
}

/* Phone in mono (Phase 2 §0.4) */
.footer-contact__link--mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Zone C — bottom bar
   -------------------------------------------------------------------------- */
.footer__bottom {
  border-top: 1px solid color-mix(in srgb, var(--color-white) 20%, transparent);
}

.footer__bottom-inner {
  display: flex;
  align-items: center;
  padding-block: var(--space-24);
}

.footer__copyright {
  margin: 0;
  font-size: var(--text-small-current);
  line-height: var(--lh-small);
  color: color-mix(in srgb, var(--color-white) 85%, transparent);
}