/* ============================================================
   Tappable venue + RSVP.

   The brief was "keep it visually as is, with only a slight
   indication you can click — for mobile". Mobile has no hover, so
   the cue has to be visible at rest: a hairline dotted underline,
   nothing more. Colour, size, weight, spacing are all inherited, so
   the type looks untouched.
   ============================================================ */

#root a.wl-link {
  color: inherit;                 /* inherit Canva's exact colour */
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
  cursor: pointer;
  /* keep the tap flash in the invitation's palette, not browser blue */
  -webkit-tap-highlight-color: rgba(122, 106, 74, 0.16);
  /* a comfortable finger target without shifting the layout */
  padding: 2px 1px;
  margin: -2px -1px;
  transition: opacity 140ms ease-out;
}

/* The venue line has no underline of its own, so it gets the cue. */
#root a.wl-venue {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(34, 34, 34, 0.45);
}

/* The RSVP line is already underlined in the design, so adding another
   cue would only make it louder. It just gets the press feedback. */

#root a.wl-link:active {
  opacity: 0.5;
}

#root a.wl-link:focus-visible {
  outline: 2px solid rgba(122, 106, 74, 0.6);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  #root a.wl-link { transition: none; }
}