/* ============================================================
   TG MEDIA — GLOBAL FOOTER
   Endless look: white paper, ink type, chromatic hologram accent.
   Fully scoped under #tg-global-footer — cannot touch the theme.
   ============================================================ */

/* this footer replaces the theme's own */
.wp-site-blocks > footer.wp-block-template-part { display: none !important; }

#tg-global-footer {
  --f-ink: #0a0a0a;
  --f-paper: #ffffff;
  --f-gray: #6b6b6b;   /* 5.3:1 on white: the lightest gray small text may use */
  --f-line: #e6e6e6;

  /* THE CHROMATIC SYSTEM — hologram photo over a gradient fallback */
  --f-holo-img: url('https://thomasgardea.com/wp-content/uploads/2026/07/abstract-hologram-gradient-background_1048-10069.avif');
  --f-holo: linear-gradient(100deg, #ffd6e8 0%, #ffe9d6 20%, #fdffd6 40%, #d6ffe4 60%, #d6ecff 80%, #e6d6ff 100%);
  --f-holo-metal: linear-gradient(120deg, #c7ccd6 0%, #a9b2bf 45%, #d3cbd8 100%);
  --f-holo-stack: var(--f-holo-img), var(--f-holo);
  --f-holo-stack-ink: var(--f-holo-img), var(--f-holo-metal);

  --f-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* the square the liquid metal is drawn in */
  --f-blob: clamp(230px, 27vw, 400px);

  display: block;
  position: relative;
  overflow: hidden; /* the metal hangs off the left edge, like the wordmark's neighbour in the reference */
  background: var(--f-paper);
  border-top: 1px solid var(--f-ink);
  padding: 56px clamp(16px, 3vw, 40px) 0;
  font-size: 14px;
  line-height: 1.3; /* the theme's taller line spacing would stretch the link columns */
  font-family: var(--f-display);
  color: var(--f-ink);
}

#tg-global-footer *,
#tg-global-footer *::before,
#tg-global-footer *::after { box-sizing: border-box; margin: 0; padding: 0; }

#tg-global-footer .tgf-in {
  position: relative;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- the liquid metal. It rests in the .tgf-blob square (top-left, part
        of it off the edge) but is drawn on a canvas covering the whole
        footer, behind everything, so a glob can be dragged anywhere ---- */
#tg-global-footer .tgf-blob {
  position: absolute;
  z-index: 0;
  top: -46px;
  left: calc(var(--f-blob) * -0.3);
  width: var(--f-blob);
  height: var(--f-blob);
  pointer-events: none;
}
#tg-global-footer .tgf-metal {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  -webkit-tap-highlight-color: transparent;
}
/* the metal is behind the text, so the footer itself shows the grab hand
   when a glob is under the pointer, and nothing highlights while one is held */
#tg-global-footer.tgf-can-grab,
#tg-global-footer.tgf-can-grab *:not(a) { cursor: grab; }
#tg-global-footer.tgf-grabbing,
#tg-global-footer.tgf-grabbing * {
  cursor: grabbing;
  -webkit-user-select: none;
  user-select: none;
}

/* ---- top row: link columns and contact, held to the right ---- */
#tg-global-footer .tgf-top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto auto;
  column-gap: clamp(28px, 5vw, 84px);
  row-gap: 20px;
  align-items: start;
  padding-left: calc(var(--f-blob) * 0.62);
}
#tg-global-footer .tgf-quick { grid-column: 2; grid-row: 1 / span 2; }
#tg-global-footer .tgf-contact { grid-column: 3; grid-row: 1; }
#tg-global-footer .tgf-tagline { grid-column: 3; grid-row: 2; }

/* chromatic tagline — photo × metallic gray (never a rainbow).
   Under the phone and site, level with the last row of links. On phones
   it moves down to open the small print instead. */
#tg-global-footer .tgf-tagline {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--f-gray);
}
#tg-global-footer .tgf-tagline b {
  font-weight: 700;
  background-image: var(--f-holo-stack-ink);
  background-size: 160% 160%, 100% 100%;
  background-position: 30% 50%;
  background-blend-mode: multiply;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: saturate(2) contrast(1.25);
}

#tg-global-footer a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--f-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s, color 0.25s, background-color 0.25s;
  -webkit-tap-highlight-color: transparent;
}
#tg-global-footer a:hover { border-color: var(--f-ink); }

#tg-global-footer .tgf-quick { display: flex; gap: clamp(28px, 4vw, 64px); }
#tg-global-footer .tgf-quick ul { list-style: none; display: grid; gap: 14px; align-content: start; }
#tg-global-footer .tgf-quick li { list-style: none; }
#tg-global-footer .tgf-contact { display: grid; gap: 14px; justify-items: start; }

/* ---- small print ---- */
#tg-global-footer .tgf-fine {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px 32px;
  margin-top: 34px;
  padding-left: calc(var(--f-blob) * 0.62); /* keeps the tagline clear of the metal */
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--f-gray);
}
#tg-global-footer .tgf-fine a { font-size: 10px; color: var(--f-gray); }
#tg-global-footer .tgf-fine a:hover { color: var(--f-ink); }

/* ---- the wordmark: the company's full name in bold slanted Helvetica,
        filling the width. The JS sets the exact size; this is the no-JS
        fallback. ---- */
#tg-global-footer .tgf-big {
  position: relative;
  z-index: 2;
  margin-top: 18px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 7vw;
  letter-spacing: -0.03em;
  line-height: 0.86;
  white-space: nowrap;
  color: var(--f-ink);
}
#tg-global-footer .tgf-big-in { display: inline-block; padding-bottom: 0.06em; }
/* fills with the hologram texture on hover. This plain swap is the fallback
   (no JS, or reduced motion); normally the JS adds .tgf-pour and the metal
   is poured over the letters instead. */
#tg-global-footer .tgf-big:not(.tgf-pour):hover .tgf-big-in,
#tg-global-footer .tgf-big-metal {
  background-image: var(--f-holo-stack);
  background-size: 200% 200%, 100% 100%;
  animation: tgf-holo-drift 9s ease-in-out infinite alternate;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* the pour: two copies of the word, ink underneath and metal on top. The JS
   cuts each one along the same moving liquid edge, so the metal runs down
   over the ink and drains back off it. */
#tg-global-footer .tgf-pour .tgf-big-in { position: relative; padding-bottom: 0; }
#tg-global-footer .tgf-big-ink,
#tg-global-footer .tgf-big-metal { display: block; padding-bottom: 0.06em; }
#tg-global-footer .tgf-big-metal {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
#tg-global-footer .tgf-pouring .tgf-big-metal { display: block; }
#tg-global-footer .tgf-pour-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
@keyframes tgf-holo-drift {
  0%   { background-position: 0% 50%, 0% 50%; }
  100% { background-position: 100% 50%, 100% 50%; }
}

/* ---- narrower screens ---- */
/* Phones: links, then the phone and site, then the small print, each under
   a hairline. The metal rests low on the left, half behind the "TH",
   poking up into the space left above it. Its size follows the name's
   type size (--f-word, set by the JS), so the two stay in proportion. */
@media (max-width: 760px) {
  #tg-global-footer { --f-blob: calc(var(--f-word, 28px) * 2.6); padding-top: 40px; }
  #tg-global-footer .tgf-blob { top: auto; bottom: calc(var(--f-blob) * -0.1); left: calc(var(--f-blob) * -0.15); }
  #tg-global-footer .tgf-top { grid-template-columns: 1fr; row-gap: 0; padding-left: 0; }
  #tg-global-footer .tgf-tagline,
  #tg-global-footer .tgf-quick,
  #tg-global-footer .tgf-contact { grid-column: 1; grid-row: auto; }
  #tg-global-footer .tgf-quick { gap: 28px; }
  #tg-global-footer .tgf-quick ul { gap: 18px; }
  #tg-global-footer .tgf-contact {
    gap: 16px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--f-line);
  }
  /* the tagline opens the small print, under its own hairline */
  #tg-global-footer .tgf-tagline {
    order: 3;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--f-line);
  }
  #tg-global-footer .tgf-fine {
    justify-content: flex-start;
    gap: 14px 24px;
    margin-top: 14px;
    padding-left: 0;
  }
  #tg-global-footer .tgf-fine > span { flex-basis: 100%; }
  #tg-global-footer .tgf-big { margin-top: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  #tg-global-footer .tgf-big:not(.tgf-pour):hover .tgf-big-in { animation: none; }
  #tg-global-footer a { transition: none; }
}