/* ==========================================================================
   MECAS Techsolutions - Site Footer
   --------------------------------------------------------------------------
   Designed only on mockup 09 and applied site-wide. Measured at a 1440 canvas:

     footer band      430px tall
     ground           #002047  (--navy-700)
     column heading   #48C4E4  uppercase, ~15px
     list link        #C1D7F5  ~15px, with a small bullet
     dividers         hairline white at low opacity, between columns only
     bottom bar       rule above, copyright left, legal links right

   Six columns: brand, Products, Services, Industries, Quick Links, and the
   "Engineered in India" block.
   ========================================================================== */

.site-footer {
  background-color: var(--navy-700);
  color: var(--ink-inverse);
  padding-top: var(--space-8);
}

/* --------------------------------------------------------------------------
   Column grid
   -------------------------------------------------------------------------- */

.site-footer__grid {
  display: grid;
  /* Column proportions measured off mockup 09 at a 1440 canvas:
     brand 263, products 238, services 205, industries 202, quick links 162,
     india 194. The link columns must be wide enough that no label wraps -
     every one sits on a single line in the design. */
  grid-template-columns:
    minmax(0, 1.20fr)   /* brand */
    minmax(0, 1.22fr)   /* products */
    minmax(0, 1.05fr)   /* services */
    minmax(0, 1.03fr)   /* industries */
    minmax(0, 0.82fr)   /* quick links */
    minmax(0, 1.08fr); /* engineered in india: map and statement side by side (D-052) */
  gap: var(--space-4);
  padding-bottom: var(--space-7);
}

/* Hairlines sit between columns, never on the outer edges. */
.site-footer__col + .site-footer__col {
  padding-left: var(--space-4);
  border-left: var(--border-w) solid var(--rule-on-dark);
}

.site-footer__heading {
  margin-bottom: var(--space-4);
  font-family: var(--font-heading);
  font-size: 0.875rem;         /* 14px */
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan-400);
}

.site-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__list li {
  position: relative;
  padding-left: var(--space-3);
  margin-bottom: var(--space-3);
}

.site-footer__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 4px;
  height: 4px;
  background-color: var(--ink-footer-link);
  border-radius: var(--radius-round);
}

.site-footer__list a {
  font-size: 0.875rem;
  color: var(--ink-footer-link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease);
}

.site-footer__list a:hover,
.site-footer__list a:focus-visible {
  color: var(--ink-inverse);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------------
   Brand column
   -------------------------------------------------------------------------- */

.site-footer__logo {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--ink-inverse);
}

.site-footer__logo:hover { color: var(--ink-inverse); }

.site-footer__logo img { height: 52px; width: auto; flex: none; }

.site-footer__name {
  display: block;
  font-family: var(--font-heading);
  font-size: 2.25rem;          /* 36px */
  font-weight: var(--fw-extrabold);
  line-height: 0.82;
  letter-spacing: -0.02em;
}

.site-footer__sub {
  display: block;
  margin-top: 5px;
  font-family: var(--font-heading);
  font-size: 0.625rem;         /* 10px */
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: 0.085em;
  white-space: nowrap;
}

.site-footer__tagline {
  margin-top: var(--space-5);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-inverse-muted);
}

/* Social icons - outlined circles, as drawn */
.site-footer__social {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding: 0;
  list-style: none;
}

.site-footer__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: var(--border-w) solid var(--rule-on-dark);
  border-radius: var(--radius-round);
  color: var(--ink-inverse);
  transition:
    background-color var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: var(--ink-inverse);
}

.site-footer__social svg { width: 20px; height: 20px; fill: currentColor; }

/* --------------------------------------------------------------------------
   Engineered in India column
   -------------------------------------------------------------------------- */

/* Map beside the statement, as drawn. The statement keeps its natural width
   and the outline takes whatever the column has left, up to its drawn size,
   so the two never wrap apart at desktop widths (D-052). */
.site-footer__india {
  display: grid;
  grid-template-columns: minmax(40px, 84px) max-content;
  align-items: center;
  gap: var(--space-3);
  /* Without this the fixed-width map and flag push the column past its track
     and the whole page gains a horizontal scrollbar at around 1280. */
  min-width: 0;
}

.site-footer__india > div { min-width: 0; }

/* India outline, as drawn in the footer mockup. Generated from Natural Earth's
   India point-of-view boundaries by design/build-india-map.py, never drawn by
   hand, so the border is the one the Government of India depicts (D-052).
   Decorative: the statement beside it carries the meaning. */
.site-footer__map {
  flex: none;
  /* Drawn 107 wide beside a condensed 88px statement; Archivo sets that
     statement ~111 wide, so the map gives way to keep them side by side. */
  width: 100%;
  height: auto;
}

.site-footer__india-text {
  font-family: var(--font-heading);
  overflow-wrap: break-word;
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* Tricolour bar under the statement, as drawn. */
.site-footer__flag {
  display: block;
  width: min(96px, 100%);
  height: 10px;
  margin-top: var(--space-3);
  background: linear-gradient(
    to bottom,
    #FF9933 0 33.33%,
    #FFFFFF 33.33% 66.66%,
    #138808 66.66% 100%
  );
}

/* --------------------------------------------------------------------------
   Bottom bar
   -------------------------------------------------------------------------- */

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5);
  border-top: var(--border-w) solid var(--rule-on-dark);
  font-size: 0.9375rem;
  color: var(--ink-inverse-muted);
}

.site-footer__legal {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__legal li + li::before {
  content: "|";
  margin-right: var(--space-4);
  color: var(--rule-on-dark);
}

.site-footer__legal a {
  color: var(--ink-inverse-muted);
  text-decoration: none;
}

.site-footer__legal a:hover,
.site-footer__legal a:focus-visible {
  color: var(--ink-inverse);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------
   Six columns collapse in stages. Dividers become horizontal rules once the
   columns stack, so the grouping stays readable.
   -------------------------------------------------------------------------- */

/* Between 1200 and 1366 six columns are too tight: links wrap and the India
   statement overruns its column. The five link columns keep one row and the
   India panel takes its own full-width row beneath, as it already does on
   tablets (D-052). */
@media (max-width: 1365.98px) {
  .site-footer__grid {
    grid-template-columns:
      minmax(0, 1.20fr) minmax(0, 1.22fr) minmax(0, 1.05fr) minmax(0, 1.03fr) minmax(0, 0.82fr);
  }

  .site-footer__col--india {
    grid-column: 1 / -1;
    padding-top: var(--space-5);
    padding-left: 0;
    border-left: none;
    border-top: var(--border-w) solid var(--rule-on-dark);
  }
}

@media (max-width: 1199.98px) {
  .site-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6) var(--space-5);
  }

  /* The brand column takes the full first row, India the full last row. */
  .site-footer__col--brand { grid-column: 1 / -1; }
  .site-footer__col--india { grid-column: 1 / -1; }

  .site-footer__col + .site-footer__col {
    padding-left: 0;
    border-left: none;
  }

  .site-footer__col--india { padding-top: var(--space-5); border-top: var(--border-w) solid var(--rule-on-dark); }
}

@media (max-width: 767.98px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 479.98px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); }

  .site-footer__name { font-size: 1.875rem; }
  .site-footer__logo img { height: 44px; }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}