/* ============================================================
   FOOTER PANEL - shared by home, faq and contact
   ------------------------------------------------------------
   Layered over css/footer.css, which still draws the panel itself
   (sticky reveal, accent ground, wordmark). This file is the layout
   on top of it: pitch left, contact details right, then one action
   row with the socials and the CTA on a shared line. Link it after
   footer.css and any page sheet, so it wins the cascade on every
   page the same way.
   ============================================================ */

/* A shorter panel than footer.css draws, so less of the last sheet
   is pushed off the top once the footer is fully revealed. */
.footer { padding-top: 3rem; }

.footer-row--top {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: start;
}
.footer-contact { justify-content: flex-start; }
.footer-contact-text { max-width: 34rem; }
/* The handwriting's ascenders all but touched the heading's
   baseline; a clear gap lets the note read as written under the
   title rather than jammed against it. */
.footer-tagline { margin-top: clamp(0.75rem, 1.2vw, 1.25rem); }

.footer-cols {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 2.5rem;
  /* Drops the column labels onto the heading's cap line. */
  padding-top: 0.75rem;
}
/* One column now, held in the right-hand track so "Say hello"
   stays where it was and lines up over the CTA below it. */
.footer-col { grid-column: 2; }

/* Small caps label over a dashed rule - the same rule the
   copyright line uses, so the footer only has one kind of line. */
.footer-label {
  font-family: "sohne-bold", "Inter Tight", sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--fg) 62%, var(--sw-accent));
  padding-bottom: 0.75rem;
  margin-bottom: 1rem;
  border-bottom: 2px dashed var(--fg);
}

.footer-mail {
  color: var(--fg);
  text-decoration: none;
  /* Underline drawn as a background so it can grow in from the
     left on hover rather than snapping on. */
  background: linear-gradient(currentColor, currentColor) left bottom / 0 1.5px no-repeat;
  transition: background-size 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.footer-mail:hover, .footer-mail:focus-visible {
  background-size: 100% 1.5px;
  outline: none;
}
.footer-mail {
  font-family: "sohne-bold", "Inter Tight", sans-serif;
  font-size: clamp(1.05rem, 1.45vw, 1.4rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.footer-meta {
  font-family: "sohne-normal", "Inter Tight", sans-serif;
  font-size: 0.9rem;
  line-height: 1.5;
  color: color-mix(in srgb, var(--fg) 72%, var(--sw-accent));
  margin-top: 0.6rem;
}

/* The action row: socials on the left edge, CTA on the right, both
   centred on one line so each side of the footer ends on something. */
.footer-row--actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2.5rem;
}

.footer-social {
  display: flex;
  gap: 0.25rem;
  /* The tiles carry no edge any more, so the GLYPH is what has to
     line up with the heading above: the row is pulled left by the
     empty half of a tile, (tile - glyph) / 2. */
  margin: 0 0 0 calc((var(--glyph) - var(--tile)) / 2);
  padding: 0;
  list-style: none;
  --tile: 2.75rem;
  --glyph: 1.6rem;
}
/* Bare ink glyphs on the lime, with NO EDGE. The outlined tiles
   (the site's .pg-btn cut, ink edge and all) made three boxes
   beside a fourth, and on a phone their width pushed "Get in Touch"
   onto two lines. Without the edge the row reads as one button and
   three marks, the CTA leads on its own, and the tile can shrink to
   the glyph plus a comfortable tap target.

   The notched white face still fills in on hover and on keyboard
   focus, cut as the CTA is, so the press state stays part of the
   same set. At rest the face is the footer's own accent, so it is
   invisible. */
.footer-social-link {
  --btn-notch: 12px;
  display: grid;
  place-items: center;
  width: var(--tile);
  height: var(--tile);
  position: relative;
  isolation: isolate;
  background-color: transparent;
  color: var(--fg);
  /* Same two-corner chamfer as the button, at the same 14px at
     every size, so the cuts line up along the row. */
  clip-path: polygon(
    var(--btn-notch) 0, 100% 0,
    100% calc(100% - var(--btn-notch)),
    calc(100% - var(--btn-notch)) 100%,
    0 100%, 0 var(--btn-notch)
  );
}
.footer-social-link::before {
  --c: var(--btn-notch);
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--sw-accent);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)),
    calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition: background-color 0.15s ease;
}
/* The glyphs are the brands' own marks (Simple Icons), solid ink. */
.footer-social-link svg {
  display: block;
  width: var(--glyph);
  height: var(--glyph);
  fill: currentColor;
}
.footer-social-link:hover::before,
.footer-social-link:focus-visible::before { background-color: #fff; }
.footer-social-link:focus-visible { outline: none; }

/* The CTA anchors the whole right edge now, so it is set a step
   larger than the inline version, with its arrow riding right. */
.footer-row--actions .footer-btn {
  --btn-notch: 14px;
  display: inline-flex;
  align-items: center;
  gap: 2.5rem;
  padding: 1.25em 1.6em;
  font-size: 0.9rem;
  /* The site's button (css/pages.css .pg-btn) on the lime: an ink
     edge, a face in the footer's own accent, so at rest it is a drawn
     line, and white fills the face on hover - the accent fill every
     other button takes would vanish here. */
  position: relative;
  isolation: isolate;
  background-color: var(--fg);
  color: var(--fg);
}
.footer-row--actions .footer-btn::before {
  --c: calc(var(--btn-notch) - 1.5px * 0.5858);
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1.5px;
  background: var(--sw-accent);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)),
    calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
  transition: background-color 0.15s ease;
}
/* The arrow: a drawn north-east arrow, square-capped and mitred to
   match the notched corners, rather than the font's glyph. Two copies
   sit in a clipped box; on hover the first leaves off the top right
   and the second follows it in from the bottom left. */
.footer-btn-arrow {
  position: relative;
  display: block;
  flex: none;
  width: 1.15em;
  height: 1.15em;
  overflow: hidden;
}
.footer-btn-arrow svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: square;
  stroke-linejoin: miter;
  transition: transform 0.5s cubic-bezier(0.7, 0, 0.2, 1);
}
.footer-btn-arrow svg + svg { transform: translate(-110%, 110%); }
.footer-row--actions .footer-btn:hover .footer-btn-arrow svg:first-child,
.footer-row--actions .footer-btn:focus-visible .footer-btn-arrow svg:first-child { transform: translate(110%, -110%); }
.footer-row--actions .footer-btn:hover .footer-btn-arrow svg + svg,
.footer-row--actions .footer-btn:focus-visible .footer-btn-arrow svg + svg { transform: none; }
.footer-row--actions .footer-btn:hover,
.footer-row--actions .footer-btn:focus-visible { background-color: var(--fg); color: var(--fg); outline: none; }
.footer-row--actions .footer-btn:hover::before,
.footer-row--actions .footer-btn:focus-visible::before { background-color: #fff; }

@media (max-width: 1000px) {
  .footer-row--top { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-contact { padding-bottom: 0; }
  .footer-cols { padding-top: 0; gap: 1.5rem; grid-template-columns: 1fr; }
  .footer-col { grid-column: auto; }
  .footer-row--actions { margin-top: 2.5rem; }
  /* 2.5rem (40px) is still a sound tap target, and with no edge to
     draw the tiles no longer have to match the CTA's height. */
  .footer-social { gap: 0.125rem; --tile: 2.5rem; --glyph: 1.4rem; }
  /* nowrap: the label is two words and must never break - the
     narrower tiles leave it the room. */
  .footer-row--actions .footer-btn { gap: 1.25rem; padding: 1.1em 1.3em; font-size: 0.8rem; white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-mail,
  .footer-btn-arrow svg { transition: none; }
}