/* ==========================================================================
   COMPONENT: Footer — focal deliverable
   Geometry plate · 4 columns · newsletter · compliance strip · payment row
   --------------------------------------------------------------------------
   DESIGN NOTE — what makes this read as premium rather than merely dark:

     1. DEPTH, NOT DECORATION. Three stacked layers on one ink ground: a soft
        indigo glow rising from the top edge, the lattice motif masked so it
        fades before it reaches the legal bar, and a gradient hairline seam
        along the very top. No drop shadows — on a dark ground they read as
        smudges, so separation is done with light instead.

     2. ONE ACCENT, USED SPARINGLY. Verdigris marks trust and data only:
        column rules, the compliance values, the secure lock. Marigold never
        appears here — it belongs to donate actions alone, and a footer that
        borrowed it would cheapen the one colour that has to mean something.

     3. GLASS, NOT WHITE. Every chip, tile and card is a low-alpha white fill
        behind a hairline. The previous payment marks were solid white blocks,
        which punched holes in the ground and dominated a strip that is meant
        to reassure, not shout.

     4. MOTION IS A HAIRLINE. Link hovers sweep an underline via background-
        size — one composited property, no layout, no colour flash.
   ========================================================================== */

.c-footer {
  position: relative;
  isolation: isolate;
  background-color: var(--c-ink);
  color: var(--c-text-muted-inv);
  overflow: hidden;
  padding-block-start: var(--sp-8);
}

/* Seam — a gradient hairline, brightest at the centre. The one line that tells
   the eye the page has ended and the record begins. */
.c-footer::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 1px;
  background-image: linear-gradient(
    90deg,
    transparent,
    rgb(255 255 255 / 0.06) 12%,
    var(--c-verdigris-lt) 50%,
    rgb(255 255 255 / 0.06) 88%,
    transparent
  );
  opacity: 0.5;
  z-index: -1;
  pointer-events: none;
}

/* Ambient glow rising from the top edge. Solid token colour faded by opacity
   rather than an alpha hex, so the token discipline holds. */
.c-footer::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 60%;
  background-image: radial-gradient(
    120% 100% at 50% 0%,
    var(--c-indigo) 0%,
    transparent 68%
  );
  opacity: 0.5;
  z-index: -1;
  pointer-events: none;
}

/* Geometry-motif plate, masked so the texture fades out before the legal bar
   instead of tiling flatly to the bottom edge. */
.c-footer__plate {
  position: absolute;
  inset-block-start: -12%;
  inset-inline: -10%;
  block-size: 124%;
  opacity: var(--motif-opacity);
  background-image: url("../../icons/geometry/lattice-tile.svg");
  background-size: 260px;
  background-repeat: repeat;
  mask-image: linear-gradient(180deg, var(--mask-opaque) 0%, transparent 62%);
  -webkit-mask-image: linear-gradient(180deg, var(--mask-opaque) 0%, transparent 62%);
  z-index: -1;
  pointer-events: none;
}

.c-footer__inner {
  position: relative;
  width: 100%;
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --------------------------------------------------------------------------
   FIELD REPORTS BAND — the footer's opening statement
   --------------------------------------------------------------------------
   The newsletter used to sit at the bottom of column four, which made the
   tallest column taller still and left a dead band of empty ink beside the
   brand. Promoted to a full-width band it becomes the one thing asked of the
   reader here, and the four columns below settle to even heights.
   -------------------------------------------------------------------------- */

.c-footer__band {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
  padding-block-end: var(--sp-6);
  border-block-end: 1px solid rgb(255 255 255 / 0.10);
}

/* Stacked, the pill must not stretch the full column — a 780px-wide email
   field looks like a mistake rather than an invitation. */
.c-footer__band .c-newsletter { max-width: 28rem; }

@media (min-width: 900px) {
  .c-footer__band {
    grid-template-columns: 1fr minmax(22rem, 26rem);
    gap: var(--sp-7);
    padding-block-end: var(--sp-7);
  }

  .c-footer__band .c-newsletter { max-width: none; }
}

.c-footer__band-title {
  font-family: var(--ff-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-display);
  color: var(--c-text-inv);
  text-wrap: balance;
}

.c-footer__band-note {
  margin-block-start: var(--sp-2);
  max-width: 46ch;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--c-text-muted-inv);
}

/* --------------------------------------------------------------------------
   COLUMNS
   -------------------------------------------------------------------------- */

.c-footer__cols {
  display: grid;
  gap: var(--sp-7) var(--gap-col);
  grid-template-columns: 1fr;
  padding-block-start: var(--sp-7);
  align-items: start;              /* columns are different heights; stretching
                                     them left a dead band above the strip */
  padding-block-end: var(--sp-8);
}

@media (min-width: 600px) {
  .c-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  /* Brand column is wider — it carries the address block. */
  .c-footer__cols { grid-template-columns: 1.7fr 1fr 1fr 1.3fr; }
}

.c-footer__brand svg {
  height: 46px;
  width: auto;
  color: var(--c-text-inv);
}

/* The mission is the one line of voice in the footer, so it is set in the
   display serif at lead size — not another 15px sans paragraph. */
.c-footer__mission {
  margin-block-start: var(--sp-5);
  max-width: 30ch;
  font-family: var(--ff-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--c-text-inv);
}

.c-footer__contact {
  margin-block-start: var(--sp-6);
  display: grid;
  gap: var(--sp-4);
  font-size: var(--fs-sm);
  font-style: normal;
}

.c-footer__contact-row {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: var(--sp-4);
  align-items: start;
  line-height: var(--lh-normal);
}

/* Phone, WhatsApp and email are the three links in the footer most likely to be
   tapped on a phone and were the three smallest: 18px-tall inline boxes. On a
   touch device they get the 44px floor. Kept off the desktop rule because
   stretching them there would open gaps in a tight address block. */
@media (pointer: coarse) {
  .c-footer__contact-row a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Icons sit in a glass tile, so the address block reads as a set of records
   rather than three loose lines with dots beside them. */
.c-footer__contact-row svg {
  box-sizing: content-box;
  inline-size: 16px;
  block-size: 16px;
  padding: 8px;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--r-md);
  background-color: rgb(255 255 255 / 0.04);
  color: var(--c-verdigris-lt);
  flex: none;
}

.c-footer__contact-row strong {
  display: block;
  margin-block-end: 2px;
  font-family: var(--ff-utility);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-text-muted-inv);
}

.c-footer__contact a {
  color: var(--c-text-inv);
  text-decoration: none;
}

.c-footer__contact a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   COLUMN HEADINGS — micro-caps over a short verdigris rule
   -------------------------------------------------------------------------- */

.c-footer__col-title {
  position: relative;
  font-family: var(--ff-utility);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-text-inv);
  padding-block-end: var(--sp-3);
  margin-block-end: var(--sp-4);
}

.c-footer__col-title::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 22px;
  block-size: 2px;
  background-color: var(--c-verdigris-lt);
  border-radius: var(--r-full);
}

/* --------------------------------------------------------------------------
   LINK LISTS — hover sweeps a hairline underline in from the left
   -------------------------------------------------------------------------- */

.c-footer__list {
  display: grid;
  gap: var(--sp-3);
}

.c-footer__list a {
  display: inline-block;
  font-size: var(--fs-sm);
  color: var(--c-text-muted-inv);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition:
    color var(--d-fast) var(--e-out),
    background-size var(--d-base) var(--e-out);
}

.c-footer__list a:hover,
.c-footer__list a:focus-visible {
  color: var(--c-text-inv);
  background-size: 100% 1px;
}

/* --------------------------------------------------------------------------
   NEWSLETTER — input and submit share one pill, so the field reads as a
   single control rather than a box next to a button
   -------------------------------------------------------------------------- */

.c-newsletter { display: grid; gap: var(--sp-3); min-width: 0; }

/* min-width: 0 and a 100% input, for the same reason as .c-amount: the pill is a
   flex row whose min-content is the email input's UA preferred width plus the
   submit button, and min-width: auto let that win. At 320px the field measured
   332px inside a 288px column, so the Subscribe button sat outside the footer —
   clipped rather than scrolled, because .c-footer is overflow: hidden for the
   motif plate, which is why nothing looked broken until it was measured. */
.c-newsletter__field {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  padding: var(--sp-1);
  background-color: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--r-full);
  transition: border-color var(--d-fast) var(--e-out),
              background-color var(--d-fast) var(--e-out);
}

.c-newsletter__field:focus-within {
  border-color: var(--c-verdigris-lt);
  background-color: rgb(255 255 255 / 0.08);
}

.c-newsletter__input {
  flex: 1 1 8rem;
  width: 100%;
  min-width: 0;
  min-height: 40px;
  padding-inline: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--c-text-inv);
  background-color: transparent;
  border: 0;
}

.c-newsletter__input:focus { outline: none; }   /* the pill shows the focus */
.c-newsletter__input::placeholder { color: var(--c-text-muted-inv); }

.c-newsletter__input[aria-invalid="true"] { color: var(--c-text-inv); }

.c-newsletter__field:has(.c-newsletter__input[aria-invalid="true"]) {
  border-color: var(--c-marigold);
}

/* The submit inherits .c-btn but must not inherit its light-ground colours —
   ink-on-ink was invisible here. Overriding the custom properties keeps the
   button component untouched for every other ground. */
.c-newsletter__field .c-btn {
  --btn-bg: var(--c-verdigris-lt);
  --btn-fg: var(--c-ink);
  --btn-border: transparent;
  flex: none;
  min-height: 40px;
  padding-inline: var(--sp-5);
}

.c-newsletter__field .c-btn:hover {
  --btn-bg: var(--c-text-inv);
  --btn-fg: var(--c-ink);
  --btn-border: transparent;
}

.c-newsletter__error,
.c-newsletter__success {
  font-size: var(--fs-2xs);
  min-height: 1.2em;
}

.c-newsletter__error { color: var(--c-marigold); }

/* Animated success — the tick draws, the message wipes in. */
.c-newsletter__success {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--c-verdigris-lt);
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--d-slow) var(--e-wipe);
}

.c-newsletter.is-success .c-newsletter__success { clip-path: inset(0 0 0 0); }

.c-newsletter__tick path {
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  transition: stroke-dashoffset var(--d-slow) var(--e-out) var(--d-fast);
}

.c-newsletter.is-success .c-newsletter__tick path { stroke-dashoffset: 0; }

/* --------------------------------------------------------------------------
   SOCIAL
   -------------------------------------------------------------------------- */

.c-footer__social {
  display: flex;
  gap: var(--sp-3);
  margin-block-start: var(--sp-6);
}

.c-footer__social a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background-color: rgb(255 255 255 / 0.04);
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--r-full);
  color: var(--c-text-inv);
  transition:
    color var(--d-fast) var(--e-out),
    background-color var(--d-fast) var(--e-out),
    border-color var(--d-fast) var(--e-out),
    transform var(--d-fast) var(--e-out);
}

.c-footer__social a:hover,
.c-footer__social a:focus-visible {
  color: var(--c-ink);
  background-color: var(--c-text-inv);
  border-color: var(--c-text-inv);
  transform: translateY(-2px);
}

.c-footer__social svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   COMPLIANCE STRIP — 12A / 80G / CSR-1 / FCRA / Darpan
   Values come from site-config.json. Never invented. Unset values render as
   a visible TODO_CLIENT marker, not a plausible-looking number.

   Presented as credential cards: on a charity site these registrations are
   the product of the trust argument, so they get real surfaces rather than
   six loose label/value pairs.
   -------------------------------------------------------------------------- */

.c-compliance {
  padding-block: var(--sp-7);
  border-block-start: 1px solid rgb(255 255 255 / 0.10);
  display: grid;
  gap: var(--sp-5);
}

.c-compliance__grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.c-compliance__item {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background-color: rgb(255 255 255 / 0.035);
  border: 1px solid rgb(255 255 255 / 0.10);
  border-radius: var(--r-md);
  transition: border-color var(--d-fast) var(--e-out),
              background-color var(--d-fast) var(--e-out);
}

.c-compliance__item:hover {
  background-color: rgb(255 255 255 / 0.06);
  border-color: rgb(255 255 255 / 0.18);
}

.c-compliance__label {
  font-family: var(--ff-utility);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-text-muted-inv);
}

.c-compliance__value {
  font-family: var(--ff-utility);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--c-text-inv);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

.c-compliance__note {
  font-size: var(--fs-2xs);
  line-height: var(--lh-normal);
  color: var(--c-text-muted-inv);
  max-width: 68ch;
}

.c-compliance__note a { color: var(--c-verdigris-lt); }

/* --------------------------------------------------------------------------
   PAYMENT ROW — UPI first, per Indian giving behaviour
   -------------------------------------------------------------------------- */

.c-payments {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  border-block-start: 1px solid rgb(255 255 255 / 0.10);
}

.c-payments__label {
  font-family: var(--ff-utility);
  font-size: var(--fs-3xs);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--c-text-muted-inv);
}

.c-payments__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

/* Glass marks, not solid white blocks — these reassure, they do not shout. */
.c-payments__item {
  display: grid;
  place-items: center;
  height: 32px;
  padding-inline: var(--sp-4);
  background-color: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--r-sm);
  font-family: var(--ff-utility);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  color: var(--c-text-inv);
}

.c-payments__secure {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-inline-start: auto;
  font-family: var(--ff-utility);
  font-size: var(--fs-2xs);
  color: var(--c-verdigris-lt);
}

.c-payments__secure svg { width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   LEGAL BAR
   -------------------------------------------------------------------------- */

.c-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--sp-5);
  border-block-start: 1px solid rgb(255 255 255 / 0.10);
  font-size: var(--fs-2xs);
}

.c-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
}

/* Privacy · Terms · Cookies · Complaints are 20px-tall link boxes 24px apart, on
   every page. On a phone that is four mis-taps waiting to happen, so on a touch
   device each one gets a 44px box and the gap comes down to compensate — the
   targets grow, the row does not. The underline still draws at the text edge
   because it is a background gradient, not a border. */
@media (pointer: coarse) {
  .c-footer__legal-links { gap: var(--sp-2) var(--sp-4); }

  .c-footer__legal-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

.c-footer__legal a {
  color: var(--c-text-muted-inv);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition:
    color var(--d-fast) var(--e-out),
    background-size var(--d-base) var(--e-out);
}

.c-footer__legal a:hover,
.c-footer__legal a:focus-visible {
  color: var(--c-text-inv);
  background-size: 100% 1px;
}