/* Footer ===================================================================
   Figma: footer · W 1280 · H 312 (hug) · padding 48 · fill Grey (12)
   container: W 1184, two blocks inside with a gap of 12
     1. headline "Thanks for stopping by. Let's talk."  Display (36)
     2. links: Email (+ copy icon) and LinkedIn, stacked with a gap of 72,
        both Display (36), Grey (74)
   ========================================================================== */

.site-footer {
  background: var(--grey-12);
  padding-block: var(--container-pad);
}

/* Grid container: the horizontal padding lives here so columns resolve
   against the content band (1184), not the container's full width (1280). */
.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.site-footer__headline {
  width: 100%;
  /* The <br> fixes where the two sentences part. Below roughly 1090 the
     second one no longer fits on one line (it needs 977px, and the content
     band is 913 at 1024), so it has to wrap there whatever we do.

     pretty, not balance: measured at 1024, balance leaves the last line 72px
     wide — "talk." on its own — because it does not balance across a forced
     <br>. pretty pulls the line back to 156px, keeping "Let's talk."
     together. Browsers without it just wrap normally. */
  text-wrap: pretty;
  font-family: var(--font-display);
  font-size: var(--display-36-size);
  line-height: var(--display-36-leading);
  font-weight: var(--display-36-weight);
  /* The design uses #FBFBFF here, not the Grey (98) token (#FAFAFA).
     Indistinguishable by eye — the design's value was kept. */
  color: #fbfbff;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-72);
  width: 100%;
}

/* Email and phone form one group: they sit closer together than LinkedIn,
   which stays separate below them with the 72 gap. */
.site-footer__contacts {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

/* columns only from 64rem — see hero.css.
   From 1024 the footer container is no longer held to the 1280 frame either,
   so the contacts hug the left outer margin; their width stays tied to the
   frame.

   The headline is the exception: it keeps the full content band so its two
   sentences each sit on one line, broken where the <br> in the markup says,
   not wherever a 6-column track happens to run out. */
@media (width >= 64rem) {
  .site-footer__inner { max-width: none; }

  .site-footer__links { width: min(var(--w-6), var(--w-6-max)); }
}

.site-footer__row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.site-footer__link {
  font-family: var(--font-display);
  font-size: var(--display-36-size);
  line-height: var(--display-36-leading);
  font-weight: var(--display-36-weight);
  color: var(--grey-74);
  text-decoration: none;
  transition: color 150ms ease;
}

.site-footer__link:hover {
  color: var(--grey-98);
}

/* Copy button next to the email address */
.site-footer__copy {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 0.25rem;
  background: transparent;
  color: var(--grey-74);
  cursor: pointer;
  transition: color 150ms ease;
}

.site-footer__copy:hover { color: var(--grey-98); }

.site-footer__copy-icon {
  width: 1.875rem;   /* 30px */
  height: 1.875rem;
}



/* Contact row reset. The address and the icon are two separate targets:
   the address opens the mail client, the icon copies to the clipboard. */
/* The address is a single unit with no spaces. It has to break in a narrow
   view, but the browser would cut it mid-word — a <wbr> in the markup marks
   the only allowed break point, after the @. When it does break, the icon
   lands on the vertical centre of the two lines (from the row's
   align-items: center). */
.site-footer__address {
  text-decoration: none;
}

/* From 1024 the address stays on one line. The 6-column track is 445px here
   while the address needs 451px at 36px — a hair too wide, so it wrapped to
   two lines between 1024 and roughly 1040. Overflowing the track by a few
   pixels is harmless: the footer's content band is 913px wide there.

   white-space: nowrap alone is NOT enough: <wbr> is an explicit break
   opportunity that the browser honours despite nowrap (measured: the address
   stayed 88px tall). So we switch off the break point itself. */
@media (width >= 64rem) {
  .site-footer__address {
    white-space: nowrap;
  }

  .site-footer__address wbr {
    display: none;
  }
}

.site-footer__number {
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

/* The copy icon as a button: the icon rolls through inside the button on
   click, so we clip it here — the same motion as the .btn icons. */
.site-footer__copy {
  overflow: hidden;
  flex-shrink: 0;
}

/* The rolling layer: the copy and check icons move together, and the swap
   between them happens while it is out of frame. */
.site-footer__copy-roll {
  display: grid;
  place-items: center;
}

/* Hidden with a class rather than the hidden attribute: `svg { display: block }`
   in base.css would override hidden's default display: none. */
.site-footer__copy-icon--hidden {
  display: none;
}

.site-footer__contact {
  position: relative;   /* the ::before below anchors to this */
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

/* Touch target, following the .btn::before pattern: the row is 41px tall,
   the area meant for a finger is 4px larger top and bottom (49px). The two
   rows are 12px apart, so the extended areas do not meet. */
.site-footer__contact::before {
  content: "";
  position: absolute;
  inset: -0.25rem 0;
}

/* The label and the icon change colour together wherever the pointer is in
   the row — highlighted separately they would read as two surfaces. */
.site-footer__contact:hover .site-footer__link,
.site-footer__contact:hover .site-footer__copy,
.site-footer__contact:focus-visible .site-footer__link,
.site-footer__contact:focus-visible .site-footer__copy {
  color: var(--grey-98);
}


/* --- Mobile (below 767px) -------------------------------------------------
   Every piece of text in the footer becomes Headline (28). The contact rows
   keep their structure: the address and the number are spelled out at every
   viewport. */

@media (width < 48rem) {
  .site-footer__headline,
  .site-footer__link {
    font-size: var(--headline-28-size);
    line-height: var(--headline-28-leading);
    letter-spacing: var(--headline-28-tracking);
    font-weight: var(--headline-28-weight);
  }
}