/* ==========================================================================
   Footer — "MEDIA EXCHANGE" wordmark, links, services, awards, legal
   Figma: Home Page (1920) — nodes y 13744→14375, frame ends 14430.
          Mobile Home (402) — nodes y 9433→9943, frame ends 9965.
   Every rule is scoped under .site-footer. Shared tokens and components
   (.container, .display, --accent, --grey, --radius-pill, --lh-body) come
   from css/base.css and are only tuned here, never redefined.
   ========================================================================== */

.site-footer {
  /* Top: (13744 − cta pill bottom 13487.61) / 2 = 128.2 (cta.css takes the other 128).
     Bottom: the Figma frame ends 55px below the last node (14375 → 14430). */
  --footer-pad-top: 128px;
  --footer-pad-bottom: 55px;
  /* Four columns, x 100 → 515 → 874 → 1385 → 1820 (contact | services | services | aside) */
  --footer-cols: 415fr 359fr 511fr 435fr;
  /* Space between the Google Partner badge and each award badge (Figma award pitch 198 − 160) */
  --footer-badge-gap: 38px;
  padding: var(--footer-pad-top) 0 var(--footer-pad-bottom);
  font-size: 24px;
  line-height: var(--lh-body);      /* 1.24 → 29.76px lines */
}

/* Underlined text links (every list item, the address block, "Privacy policy") */
.site-footer__links a,
.site-footer__address a,
.site-footer__privacy {
  text-decoration: underline;
  transition: color .2s ease;
}
.site-footer__links a:hover,
.site-footer__address a:hover,
.site-footer__privacy:hover { color: var(--accent); }

/* ---- Wordmark: 185px Blauer Nue Medium / 0.95, one line across the frame --
   At 185px the glyphs measure 1719.6px = the 1720 content width, i.e. the
   wordmark is meant to fill the container exactly. Size it from the container
   width (cqw) so it does so at every viewport, larger screens included. */
.site-footer__inner { container-type: inline-size; }
.site-footer__title {
  font-size: 9.6354vw;              /* fallback: 185 / 1920 */
  font-size: calc(100cqw * 0.10758); /* container width ÷ ink width per px of font-size */
  line-height: 0.95;
  white-space: nowrap;
  margin: 0 0 76px;                 /* line box bottom 13919.75 → columns row 13996 (76.25) */
}
/* Plain wordmark. It is not selectable (so the X easter-egg triple-click never highlights the text). */
.site-footer__title[data-wordmark-shine] {
  cursor: default;
  -webkit-user-select: none;
          user-select: none;
}
/* Easter egg: clicking the X five times lights it green (fades in), then fades back out with the version toast. */
.site-footer__wm-x { transition: color .4s ease, text-shadow .4s ease; }
.site-footer__title.is-x-lit .site-footer__wm-x {
  color: var(--accent);
  text-shadow: 0 0 22px rgba(99, 249, 162, .55);
}

/* ---- Columns row ------------------------------------------------------------ */
.site-footer__body {
  display: grid;
  grid-template-columns: var(--footer-cols);
  align-items: start;
}

/* Col 1 — About us / Blog / Contact, blank line, address (x 103, y 14001, 8 lines) */
.site-footer__contact {
  grid-column: 1;
  padding: 5px 0 0 3px;             /* Figma text box sits 3px right / 5px below the row origin */
}
.site-footer__address {
  font-style: normal;
  margin-top: 1.24em;               /* the empty line between "Contact" and the street address */
}
.site-footer__address a { display: block; }

/* Cols 2–3 — "Services" heading (Blauer Nue Regular 24) over two lists (x 515 and x 874, y 14044) */
.site-footer__services { grid-column: 2 / 4; }
.site-footer__heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.24;
  padding-top: 2px;                 /* y 13998 vs row origin 13996 */
  margin: 0 0 16px;                 /* heading bottom 14027.76 → lists 14044 */
}
/* x 515→874 | 874→1385. The first list never gets narrower than its longest name plus
   a 24px gutter, so "Search Engine Optimisation" stays on one line between 1441 and
   ~1650px, where its 359fr share is smaller than that, and both lists read five rows
   each. At 1920 the share (359) is wider, so the Figma positions hold. */
.site-footer__service-lists {
  display: grid;
  grid-template-columns: minmax(max-content, 359fr) 511fr;
}
.site-footer__service-lists > :first-child { padding-right: 24px; }

/* Col 4 — IMAA badge, blurb, "Let’s be social" + six icons (x 1385) */
.site-footer__aside { grid-column: 4; }
.site-footer__imaa {
  width: 156px;
  margin-bottom: 7px;               /* badge bottom 14045 → paragraph 14052 */
}
.site-footer__blurb {
  font-size: 18px;
  line-height: 1.24;
  max-width: 435px;                 /* Figma box 435 × 88 (fixed height: 4 lines of Europa) */
  min-height: 88px;
}
.site-footer__social { margin-top: 16px; }              /* paragraph box bottom 14140 → label 14156 */
.site-footer__social-label { margin: 0 0 7px; }         /* label bottom 14185.76 → circles 14193 */
.site-footer__social-list {
  display: flex;
  gap: 9px;                         /* circle pitch 47 − 38 */
}
.site-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--accent);
  transition: transform .2s ease;
}
.site-footer__social-link:hover { transform: translateY(-2px); }
.site-footer__social-link img { width: 28px; height: 28px; }

/* ---- Bottom row: Google Partner + three award badges | Privacy + Back to top ---
   Client change (feedback 28 Sep, #45): the award badges follow the Google Partner
   badge in one left-aligned row rather than starting at the services column (the
   Figma's x 521), keeping the Figma's 38px badge spacing and centre line. */
.site-footer__bottom {
  display: grid;
  grid-template-columns: var(--footer-cols);
  align-items: end;                 /* everything sits on y 14373–14375 */
  margin-top: 83px;                 /* contact column bottom 14239.08 → Google Partner 14322 */
}
.site-footer__badges {
  grid-column: 1 / 4;
  display: flex;
  align-items: center;              /* Figma centres: Google Partner 14348.5, awards 14348 */
  gap: var(--footer-badge-gap);
  min-width: 0;
}
.site-footer__google {
  flex: none;
  width: 185px;                     /* 185.06 × 53 at x 104 */
  margin-left: 4px;
}
/* Linked badge (partner_badge.url): dims on hover. The fade is on the image because
   the reveal tween leaves an inline opacity on the link itself. */
.site-footer__google img { width: 100%; transition: opacity .2s ease; }
a.site-footer__google:hover img { opacity: .75; }
.site-footer__awards {
  display: flex;
  align-items: center;
  gap: var(--footer-badge-gap);
}
.site-footer__awards img { width: 160px; }
.site-footer__legal {
  grid-column: 4;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-left: 24px;               /* "Privacy policy" at x 1409 */
}
.site-footer__privacy {
  font-size: 20px;
  line-height: 1.24;
  color: var(--grey);
  white-space: nowrap;              /* Figma box is auto-width: one line */
}
/* "Back to top" pill: Rectangle 134 — 169 × 36, 2px inside green stroke, r50;
   text box starts 19px in from the outer left edge (x 1670 = 1651 + 2 border + 17);
   "Arrow 17" is a 15px line rotated -90° about x 1798, so the 15 × 16 up-arrow is
   centred on 1798 (1790.5→1805.5), i.e. its right edge sits 14px inside the outer
   right edge (1820 − 2 border − 12 padding = 1806). */
.site-footer__top {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 169px;
  height: 36px;
  padding: 0 12px 0 17px;
  border: 2px solid var(--accent);
  border-radius: var(--radius-pill);
  font-size: 20px;
  line-height: 1.24;
  color: var(--fg);
  white-space: nowrap;
  margin-bottom: 2px;               /* pill bottom 14373 vs "Privacy policy" line bottom 14375 */
  transition: background-color .2s ease, color .2s ease;
}
.site-footer__top img { width: 15px; height: 16px; }
.site-footer__top:hover { background: var(--accent); color: var(--black); }
.site-footer__top:hover img { filter: brightness(0); }

/* ---- Narrow desktop (1201–1440): same four-column layout, one type step down ----
   Not a Figma frame. At 24px the 310px email address forces column 1 to its
   min-content width and the service links wrap mid-phrase below ~1400px. So: 20px
   type (the step base.css takes at 1440), the first service list sized to its
   content so neither list wraps, award badges at 140px with 20px gaps (the Google
   Partner + awards row is 669px, inside columns 1–3 down to 1201px; it may wrap
   rather than overflow), and the legal cell allowed to wrap so it never widens
   column 4 of the bottom grid past the body grid above. */
@media (max-width: 1440px) {
  .site-footer { font-size: 20px; --footer-badge-gap: 20px; }
  .site-footer__heading { font-size: 20px; }
  .site-footer__blurb { font-size: 16px; min-height: 0; }
  .site-footer__service-lists { grid-template-columns: max-content minmax(0, 1fr); column-gap: 24px; }
  .site-footer__service-lists > :first-child { padding-right: 0; }
  .site-footer__badges { flex-wrap: wrap; row-gap: 16px; }
  .site-footer__awards { flex-wrap: wrap; row-gap: 16px; }
  .site-footer__awards img { width: 140px; }
  .site-footer__legal { flex-wrap: wrap; gap: 12px 16px; padding-left: 0; }
}

/* ---- Tablet ------------------------------------------------------------------
   The footer collapses to two columns at 1200px rather than the site-wide 1024px:
   below ~1210px the four Figma columns cannot hold the email address, both service
   lists and the social row without mid-phrase wrapping. */
@media (max-width: 1200px) {
  .site-footer { font-size: 20px; --footer-badge-gap: 24px; }
  .site-footer__title { margin-bottom: 48px; }
  /* Two columns: contact | IMAA + social on row 1, the services lists across row 2.
     Rows are pinned — with auto-placement the full-width services block would
     otherwise push the aside down into a third row. Bottom: the badges row across
     the full width, then Privacy | Back to top. */
  .site-footer__body { grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .site-footer__contact { grid-row: 1; padding: 0; }
  .site-footer__aside { grid-column: 2; grid-row: 1; }
  .site-footer__services { grid-column: 1 / -1; grid-row: 2; margin-top: 48px; }
  .site-footer__heading { padding-top: 0; }
  .site-footer__service-lists { grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .site-footer__bottom { grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 40px; margin-top: 56px; }
  .site-footer__badges { grid-column: 1 / -1; row-gap: 24px; }   /* the awards drop under Google Partner when the row runs out */
  .site-footer__google { margin-left: 0; }
  .site-footer__awards { row-gap: 24px; }
  .site-footer__legal { grid-column: 1 / -1; padding-left: 0; }
}

/* ---- Mobile (Figma "Mobile Home", 402 wide, 20px gutters) -------------------- */
@media (max-width: 640px) {
  .site-footer {
    --footer-pad-top: 91px;         /* (9433 − cta paragraph bottom 9252) / 2 = 90.5 (cta takes 90) */
    --footer-pad-bottom: 22px;      /* frame ends 9965, last node bottom 9943 */
    font-size: 12px;                /* 14.88px lines */
  }

  /* Wordmark: 38px / 0.95 at x 22 (kept fluid between 402 and 640) */
  .site-footer__title {
    margin: 0 0 19px 2px;           /* line bottom 9469.1 → row 9488; size stays container-driven (≈38px at 402) */
  }

  /* Row 1: contact (x 22) | social (x 207); row 2: services; row 3: IMAA + blurb */
  .site-footer__body {
    grid-template-columns: 184px minmax(0, 1fr);   /* minmax: the right column may wrap its links below 360 instead of widening the page */
    column-gap: 0;
    padding-left: 2px;
  }
  .site-footer__contact { grid-column: 1; grid-row: 1; padding: 0; }
  .site-footer__link--contact { display: none; }        /* no "Contact" link on the mobile frame */
  .site-footer__address { margin-top: 0; }              /* and no blank line */

  .site-footer__aside { display: contents; }            /* lets about / social take their own grid cells */
  .site-footer__social {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding-left: 1px;              /* x 207 */
  }
  .site-footer__social-label { white-space: nowrap; margin-bottom: 3px; }   /* 9502.9 → circles 9506 */
  .site-footer__social-list { flex-wrap: wrap; gap: 4px; }   /* pitch ~23.2 − 19; wraps rather than widen the page below 360 */
  .site-footer__social-link { width: 19px; height: 19px; }
  .site-footer__social-link img { width: 13px; height: 13px; }

  .site-footer__services {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 33px;               /* contact bottom 9577.3 → lists 9610 */
  }
  /* The mobile frame has no "Services" heading — keep it for screen readers only */
  .site-footer__heading {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .site-footer__service-lists { grid-template-columns: 184px minmax(0, 1fr); column-gap: 0; }   /* x 22 | 206 */

  .site-footer__about {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 36px 0 0 -2px;          /* lists bottom 9699.3 → badge 9735; badge at x 20 */
  }
  .site-footer__imaa { width: 114px; margin-bottom: 1px; }   /* 114 × 36; bottom 9771 → paragraph 9772 */
  .site-footer__blurb {
    font-size: 12px;
    max-width: 318px;               /* Figma box 318 × 49 at x 23 */
    min-height: 49px;
    margin-left: 3px;
  }

  /* Bottom: awards row, then Google Partner (both left-aligned, x 22 / 23), then Privacy | Back to top.
     The Google Partner badge comes first in the DOM; column-reverse puts the awards row above it. */
  .site-footer__bottom {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 0;
    margin-top: 21px;               /* paragraph box bottom 9821 → awards 9842 */
  }
  .site-footer__badges {
    grid-column: 1;
    grid-row: 1;
    flex-direction: column-reverse;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 21px;                      /* awards bottom 9868 → Google Partner 9889 */
  }
  .site-footer__awards {
    flex-wrap: nowrap;
    gap: 22px;                      /* 22→105, 127→211, 233→316 */
    margin: 0 0 0 2px;
  }
  .site-footer__awards img { width: 83px; }
  .site-footer__google {
    width: 87px;                    /* 87.29 × 25 at x 23 */
    margin: 0 0 0 3px;
  }
  .site-footer__legal {
    grid-column: 1;
    grid-row: 2;
    padding: 0;
    margin-top: 7px;                /* Google Partner bottom 9914 → pill 9921 */
  }
  .site-footer__privacy { font-size: 12px; }
  .site-footer__top {
    width: 107px;
    height: 21px;
    padding: 0 9px 0 8px;           /* text x 271 = 262 + 1 border + 8; 8px arrow centred on x 355 → 351→359 (369 − 1 − 9) */
    border-width: 1px;
    font-size: 12px;
    margin: 0 13px 1px 0;           /* right edge 369 (container edge 382); bottom 9942 vs text 9943 */
  }
  .site-footer__top img { width: 8px; height: auto; }
}