/**
 * Save our contact button and footer link.
 * v2: one control, pointing at the combined team vCard.
 * Matches live TTS theme tokens (Inter, sapphire, chalk, 44px touch target).
 * Enqueue only after Kelly has said yes and a Plesk backup has been taken.
 */

/* Contact page: one outline button on the dark navy information panel */
.contact-info .tts-vcard-btn {
  margin-top: 1.25rem;
  padding: 0.55rem 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  min-height: 44px;
  width: auto;
  max-width: 100%;
  justify-content: center;
  color: var(--chalk, #fff);
  border: 1.5px solid rgba(247, 245, 242, 0.55);
  background: transparent;
  border-radius: var(--radius, 3px);
}

.contact-info .tts-vcard-btn:hover,
.contact-info .tts-vcard-btn:focus-visible {
  color: var(--chalk, #fff);
  border-color: var(--chalk, #fff);
  background: rgba(247, 245, 242, 0.08);
  transform: translateY(-1px);
}

.contact-info .tts-vcard-btn:focus-visible {
  outline: 2px solid var(--sap-light, #38BDF8);
  outline-offset: 3px;
}

.contact-info .tts-vcard-btn svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* Proposed fix for the pre-existing mid-word wrap of the contact email
   at 390px. Overrides the inline word-break:break-word on the live page.
   overflow-wrap:anywhere allows a break only when the address cannot fit.
   Pair it with a <wbr> after the @ in the contact template so the wrap,
   when needed, falls at a natural point rather than mid-word. */
.contact-info a[href^="mailto:"] {
  word-break: normal !important;
  overflow-wrap: anywhere;
}

/* Footer: one quiet text link */
.footer__vcard {
  margin-top: 0.15rem;
  margin-bottom: 0.25rem;
}

.footer__vcard-link {
  font-size: 0.875rem;
  color: rgba(247, 245, 242, 0.7);
  text-decoration: none;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.footer__vcard-link:hover,
.footer__vcard-link:focus-visible {
  color: var(--chalk, #fff);
}

.footer__vcard-link:focus-visible {
  outline: 2px solid var(--sap-light, #38BDF8);
  outline-offset: 3px;
}

@media (max-width: 760px) {
  .contact-info .tts-vcard-btn {
    width: 100%;
  }
}