/* ===============================
   STYLES FOR CONTACT LINK HIGHLIGHTS
   =============================== */

/* Base link style */
.contact-link {
  color: var(--accent-color, #8B4513);
  text-decoration: underline;
  cursor: pointer;
  font-weight: 700;
  transition: all 0.3s ease;
  display: inline;
  padding: 2px 4px;
  border-radius: 3px;
}

/* Hover - desktop */
.contact-link:hover {
  background-color: rgba(139, 69, 19, 0.1);
  color: var(--primary-color, #593621);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Focus - accessibility */
.contact-link:focus {
  outline: 2px solid var(--accent-color, #8B4513);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Active state */
.contact-link:active {
  background-color: rgba(139, 69, 19, 0.2);
  transform: scale(0.98);
}

/* FAQ answers */
.faq-answer .contact-link {
  color: var(--accent-color, #8B4513);
}

/* Modal content */
.modal .contact-link,
.service-modal-content .contact-link {
  color: var(--primary-color, #593621);
}

.modal .contact-link:hover,
.service-modal-content .contact-link:hover {
  background-color: rgba(210, 180, 140, 0.3);
}

/* Footer context */
footer .contact-link {
  color: var(--secondary-color, #f4ebdc);
  text-decoration: underline;
}

footer .contact-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* Mobile - larger tap area */
@media (max-width: 768px) {
  .contact-link {
    padding: 4px 6px;
    border-radius: 4px;
  }

  .contact-link:hover {
    background-color: rgba(139, 69, 19, 0.15);
  }
}

/* Extra small screens */
@media (max-width: 480px) {
  .contact-link {
    font-weight: 700;
    padding: 3px 5px;
  }
}