/* =========================================================================
   footer.css — §12
   ========================================================================= */

.footer {
  position: relative;
  z-index: var(--z-content);
  background: var(--teal);
  color: var(--cream);          /* 4.89:1 */
  padding-top: clamp(var(--s-16), 8vw, var(--s-24));
  overflow: hidden;             /* clips the giant wordmark's lower edge */
}

.footer__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(var(--s-8), 4vw, var(--s-16));
  padding-bottom: clamp(var(--s-12), 6vw, var(--s-20));
}

.footer__mark { width: 44px; height: auto; margin-bottom: var(--s-4); }
.footer__brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 2vw, 28px);
  letter-spacing: -.02em;
  margin-bottom: var(--s-3);
  font-variation-settings: var(--wonk-sub);
}
.footer__address { font-style: normal; line-height: 1.7; opacity: .92; }
.footer__tel {
  display: inline-block;
  margin-top: var(--s-3);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer__head {
  font-family: var(--font-ui);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: var(--s-5);
  opacity: .78;
}

.footer__list { display: grid; gap: var(--s-3); }
.footer__list a {
  position: relative;
  display: inline-block;
  padding-block: 2px;
}
.footer__list a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--bubblegum);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-mid) var(--ease-out);
}
.footer__list a:hover::after,
.footer__list a:focus-visible::after { transform: scaleX(1); }

.footer__hours { display: grid; gap: var(--s-1); }
.footer__hours dt { font-weight: 700; }
.footer__hours dd { opacity: .92; }
.footer__note {
  margin-top: var(--s-4);
  font-size: var(--fs-small);
  opacity: .8;
  max-width: 28ch;
}

/* ---- Delivery / social tiles ------------------------------------------- */
.footer__tiles { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.footer__tile {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  border: 2px solid rgba(var(--cream-rgb), .34);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .06em;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.footer__tile:hover:not([aria-disabled='true']) {
  background: var(--cream);
  border-color: var(--cream);
  color: var(--teal-deep);      /* 11.08:1 */
}

/* No confirmed Glovo URL. Visibly disabled, not a guessed href. */
.footer__tile--glovo {
  opacity: .55;
  cursor: not-allowed;
  border-style: dashed;
}
.footer__tile--glovo::after {
  content: 'uskoro';
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .9;
}

/* =========================================================================
   GIANT WORDMARK — live Fraunces, not a raster.
   Sharp at every width, zero bytes, selectable, screen-reader readable.
   The container clips its lower edge, which is the intended look.
   ========================================================================= */
.footer__wordmark {
  overflow: hidden;
  height: .72em;               /* relative to the font-size below */
  /* Measured, not guessed: at this weight and tracking Fraunces renders
     "CINNABUNNY" at 0.6455em per character, so 10 caps = 6.455em and a
     full-bleed fit needs 100/6.455 = 15.49vw. 15.3vw leaves a hair of
     margin either side; 15.6 clipped the C and the Y. */
  font-size: 15.3vw;
  line-height: 1;
  margin-top: clamp(var(--s-4), 2vw, var(--s-10));
}
.footer__wordmark-btn {
  display: block;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1em;
  line-height: 1;
  letter-spacing: -.028em;
  color: var(--cream);
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  font-variation-settings: var(--wonk-hero);
  /* Optical alignment. At 15.3vw the round C and the open Y carry side
     bearings the eye reads as a gap, so the mathematically centred word
     looks inset. Pulling both edges by a hair of the CAP height sets the
     ink flush instead of the metrics. em units so it tracks the size. */
  margin-inline: -.022em -.028em;
  /* Pre-hidden only while JS runs; revealed once fonts settle so the
     fallback's very different metrics never flash at this size. */
}
html.js:not(.no-gsap) .footer__wordmark-btn { opacity: 0; }
html.js .footer__wordmark-btn.is-ready { opacity: 1; transition: opacity .5s var(--ease-out); }

.footer__confetti {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  /* The fixed widgets sit at bottom 24px and are 60px (launcher) and 48px
     (back-to-top) tall. Without this clearance they park on top of the
     copyright line — content covered by chrome. */
  padding-block: var(--s-6) 104px;
  border-top: 1px solid rgba(var(--cream-rgb), .18);
  font-size: var(--fs-small);
  opacity: .88;
}

@media (max-width: 900px) {
  .footer__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .footer__cols { grid-template-columns: 1fr; gap: var(--s-10); }
  .footer__bottom { padding-bottom: 96px; }
}