/* ==========================================================================
   CITYSCAPE REAL ESTATE — CONTACT PAGE STYLES
   Interactive spotlight hero, quick contact cards, dual-mode tabs, custom form styling.
   ========================================================================== */

/* Hero contact channel cards */
[data-screen-label="Contact · Hero"] a[href^="tel:"],
[data-screen-label="Contact · Hero"] a[href^="mailto:"],
[data-screen-label="Contact · Hero"] a[href^="#"] {
  transition: transform var(--dur) var(--ease-out), border-color var(--dur-fast) ease, color var(--dur-fast) ease !important;
}
[data-screen-label="Contact · Hero"] a:hover {
  transform: translateY(-4px) !important;
  border-top-color: var(--gold) !important;
  color: var(--gold-soft) !important;
}
[data-screen-label="Contact · Hero"] a:hover span[aria-hidden="true"] {
  transform: translate(4px, -4px);
  color: var(--gold);
}
[data-screen-label="Contact · Hero"] a span[aria-hidden="true"] {
  display: inline-block;
  transition: transform var(--dur-fast) ease, color var(--dur-fast) ease;
}

/* Tabs: Property enquiry vs Free appraisal */
[role="tablist"][aria-label="Request type"] {
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(10, 10, 10, 0.05);
}
[role="tablist"][aria-label="Request type"] button {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-eyebrow) !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease !important;
}
[role="tablist"][aria-label="Request type"] button:hover:not([aria-selected="true"]) {
  background: rgba(10, 10, 10, 0.06) !important;
}

/* Interest & Property Type Pills */
form button[type="button"] {
  font-family: var(--font-sans) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  border-radius: 100px !important;
  padding: 10px 20px !important;
  border: 1px solid rgba(10, 10, 10, 0.22) !important;
  transition: all var(--dur-fast) ease !important;
}
form button[type="button"]:hover:not([aria-pressed="true"]) {
  background: rgba(10, 10, 10, 0.07) !important;
  border-color: var(--ink) !important;
}
form button[type="button"][aria-pressed="true"] {
  background: var(--ink) !important;
  color: var(--paper) !important;
  border-color: var(--ink) !important;
  box-shadow: 0 4px 14px rgba(10, 10, 10, 0.18) !important;
}

/* Inputs & Labels */
form label {
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
}
form input:not([type="checkbox"]),
form select,
form textarea {
  color: var(--ink) !important;
  font-size: 17px !important;
  border-bottom: 1px solid rgba(10, 10, 10, 0.28) !important;
  padding: 12px 0 !important;
  transition: border-bottom-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease !important;
}
form input:focus,
form select:focus,
form textarea:focus {
  border-bottom-color: var(--gold-deep) !important;
  box-shadow: 0 1px 0 0 var(--gold-deep) !important;
}

/* Direct channels link hover */
#enquiry a[href^="tel:"],
#enquiry a[href^="mailto:"] {
  transition: color var(--dur-fast) ease, padding-left var(--dur-fast) ease !important;
}
#enquiry a[href^="tel:"]:hover,
#enquiry a[href^="mailto:"]:hover {
  color: var(--gold-deep) !important;
  padding-left: 6px !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  [data-screen-label="Contact · Hero"] {
    padding-top: 14vh !important;
    min-height: auto !important;
  }
  [data-screen-label="Contact · Hero"] h1 {
    font-size: clamp(38px, 12vw, 68px) !important;
  }
  [data-screen-label="Contact · Hero"] h1 span:last-child {
    padding-left: 0 !important;
  }
  #enquiry > div {
    grid-template-columns: 1fr !important;
    gap: 5vh !important;
  }
  #enquiry a[href^="mailto:"],
  #enquiry a[href^="tel:"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  #enquiry a[href^="mailto:"] span:last-child {
    font-size: 15px !important;
    word-break: break-all !important;
    text-align: left !important;
  }
}