/* Keep the full, unchanged email and phone values on a single visible line.
   Give contact details room first; never clip them or replace them with "...". */
.email-address {
  display: inline-block;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
  white-space: nowrap;
  hyphens: none;
  vertical-align: top;
}
.email-address wbr { display: none; }
.email-domain { display: inline; font: inherit; }
a[href^="tel:"],
.topbar-item[href^="mailto:"] {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

/* Smaller icon gutters leave the address readable beside its label on phones. */
.contact-item {
  align-items: center;
  gap: 10px;
  padding: 16px;
  min-height: 78px;
}
.contact-item-icon { width: 32px; height: 32px; }
.contact-item > div:last-child {
  flex: 1;
  min-width: 0;
  container-type: inline-size;
}
.contact-item-value {
  font-size: clamp(12px, 5.7cqi, .95rem);
  line-height: 1.5;
  white-space: nowrap;
  overflow-wrap: normal;
}
.contact-item-value .email-address { font-size: inherit; }

/* Reserve enough space for the complete footer address instead of wrapping it. */
.footer-grid {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(244px, 1.15fr);
}
.footer-contact-item { container-type: inline-size; }
.footer-contact-item .email-address {
  flex: 1;
  min-width: 0;
  font-size: clamp(12px, 5.2cqi, .83rem);
}

/* Feedback uses its own contact-card layout. */
.contact > a > div,
.contact > div > div {
  flex: 1;
  min-width: 0;
  container-type: inline-size;
}
.contact > a > div > span,
.contact > div > div > span {
  font-size: clamp(12px, 5.7cqi, 1rem);
  white-space: nowrap;
  overflow-wrap: normal;
}

/* Keep legal-page email values together, with the label on its own line. */
.legal-content { min-width: 0; }
.legal-contact-box { container-type: inline-size; }
.legal-contact-box .email-address { font-size: clamp(12px, 5.7cqi, .95rem); }
.legal-contact-label { display: block; }

/* Form controls must shrink with their grid cell rather than widen the page. */
#contactForm .form-group,
#feedbackForm .grid > * { min-width: 0; }
input[type="email"],
input[type="tel"],
input[type="text"],
select,
textarea { box-sizing: border-box; min-width: 0; max-width: 100%; }
input[type="email"],
input[type="tel"] { width: 100%; }

@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}
@media (max-width: 700px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 359px) {
  .contact-item { gap: 8px; }
  .contact-item-icon { width: 28px; height: 28px; }
  .legal-contact-box { padding-inline: 16px; }
}

/* Header: no separate app button beside the menu; the Staff & Client Login link is inside the menu. */
@media (max-width: 1200px) {
  .header-actions .connect-login { display: none !important; }
}