/* v3.34 — Premium Contact page (the template markup uses hl-contact__*
   classes that had ZERO rules anywhere in the theme — only hl-contact__socials
   and hl-contact__map were styled, so the page rendered as bare, unstyled
   text). This file styles the whole section properly and also polishes the
   blog share-icon row so it wraps cleanly on small screens. Loaded last so
   it wins over anything earlier. */

/* ────────────────────────────────────────────────────────────────────────
   CONTACT — section shell
   ──────────────────────────────────────────────────────────────────────── */
.hl-contact {
  position: relative;
  background: var(--hl-light);
}
.hl-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(177,106,76,.07) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .5;
  pointer-events: none;
}
.hl-contact .hl-container { position: relative; }

.hl-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: stretch;
}

/* ────────────────────────────────────────────────────────────────────────
   CONTACT — info column
   ──────────────────────────────────────────────────────────────────────── */
.hl-contact__info {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.hl-contact__info .hl-heading { position: relative; padding-bottom: 1.1rem; }
.hl-contact__info .hl-heading::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 56px; height: 2px;
  background: linear-gradient(135deg, var(--hl-gold), var(--hl-gold-dark));
  border-radius: 2px;
}
.hl-contact__info .hl-body-text {
  color: var(--hl-text-secondary);
  max-width: 46ch;
  margin-bottom: 2.5rem;
}

.hl-contact__details {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem;
  background: var(--hl-white);
  border: 1px solid var(--hl-border);
  border-radius: var(--hl-radius-xl);
  box-shadow: var(--hl-shadow-sm);
  flex: 1;
}
.hl-contact__detail-item {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--hl-border);
}
.hl-contact__detail-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.hl-contact__detail-icon {
  flex: none;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--hl-gold), var(--hl-gold-dark));
  color: #fff;
  box-shadow: var(--hl-shadow-gold);
  transition: transform var(--hl-transition);
}
.hl-contact__detail-item:hover .hl-contact__detail-icon { transform: translateY(-3px) scale(1.05); }
.hl-contact__detail-item strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--hl-dark);
  margin-bottom: .3rem;
}
.hl-contact__detail-item p {
  font-size: .92rem;
  line-height: 1.55;
  color: var(--hl-text-secondary);
}
.hl-contact__detail-item a { color: var(--hl-text-secondary); transition: color .2s ease; }
.hl-contact__detail-item a:hover { color: var(--hl-gold); }

.hl-contact__socials { margin-top: 2rem; }

/* ────────────────────────────────────────────────────────────────────────
   CONTACT — form column
   ──────────────────────────────────────────────────────────────────────── */
.hl-contact__form-wrap {
  display: flex;
  height: 100%;
}
.hl-contact__form-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--hl-white);
  border: 1px solid var(--hl-border);
  border-radius: var(--hl-radius-xl);
  padding: clamp(2rem, 4vw, 3rem);
  box-shadow: var(--hl-shadow-lg);
  overflow: hidden;
}
.hl-contact__form-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(135deg, var(--hl-gold), var(--hl-gold-dark));
}
.hl-contact__form-card h3 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--hl-dark);
  margin-bottom: .4rem;
}
.hl-contact__form-card h3::after {
  content: "";
  display: block;
  width: 40px; height: 2px;
  margin-top: .75rem;
  background: var(--hl-gold);
  border-radius: 2px;
}
.hl-contact__form-card #hl-contact-form {
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.hl-contact__form-card .hl-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}
.hl-contact__form-card .hl-form-group { margin-bottom: 1.25rem; }
.hl-contact__form-card .hl-form-row .hl-form-group { margin-bottom: 0; }
.hl-contact__form-card .hl-form-group label {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--hl-dark);
}
.hl-contact__form-card .hl-form-group label span { color: var(--hl-gold); }
.hl-contact__form-card input,
.hl-contact__form-card select,
.hl-contact__form-card textarea {
  background: var(--hl-light);
  border: 1.5px solid var(--hl-border);
  font-size: .92rem;
}
.hl-contact__form-card input:hover,
.hl-contact__form-card select:hover,
.hl-contact__form-card textarea:hover { border-color: var(--hl-gold-light); }
.hl-contact__form-card textarea { resize: vertical; min-height: 130px; }
.hl-contact__form-card #cf-submit {
  margin-top: auto;
  padding-top: .5rem;
  background: linear-gradient(135deg, var(--hl-gold), var(--hl-gold-dark));
  border: none;
  box-shadow: 0 10px 26px -8px rgba(177,106,76,.55);
  transition: transform .3s ease, box-shadow .3s ease;
}
.hl-contact__form-card #cf-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px -8px rgba(177,106,76,.65);
}

.hl-form-message {
  border-radius: var(--hl-radius);
  padding: .85rem 1.1rem;
  font-size: .85rem;
  margin-bottom: 1.25rem;
}
.hl-form-message.is-success { background: rgba(60,140,90,.1); color: #2f6b47; border: 1px solid rgba(60,140,90,.25); }
.hl-form-message.is-error   { background: rgba(200,70,60,.08); color: #a4362a; border: 1px solid rgba(200,70,60,.25); }

/* ────────────────────────────────────────────────────────────────────────
   CONTACT — map
   ──────────────────────────────────────────────────────────────────────── */
.hl-contact__map {
  position: relative;
  margin-top: clamp(3rem, 6vw, 5rem);
  border-radius: var(--hl-radius-xl);
  overflow: hidden;
  box-shadow: var(--hl-shadow);
  border: 1px solid var(--hl-border);
}
.hl-contact__map iframe,
.hl-contact__map #property-map { width: 100%; height: 420px; border: none; display: block; }

/* Click-to-activate guard: prevents the map from hijacking page scroll
   with a mouse wheel until the visitor deliberately clicks it. */
.hl-contact__map-guard {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(36, 28, 22, 0);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .2s ease;
}
.hl-contact__map-guard span {
  opacity: 0;
  padding: .6rem 1.1rem;
  border-radius: 999px;
  background: rgba(36, 28, 22, .78);
  color: #fff;
  font-size: .82rem;
  letter-spacing: .03em;
  transition: opacity .2s ease;
  pointer-events: none;
}
.hl-contact__map-guard:hover { background: rgba(36, 28, 22, .12); }
.hl-contact__map-guard:hover span { opacity: 1; }
.hl-contact__map.is-active .hl-contact__map-guard {
  pointer-events: none;
  background: transparent;
}
.hl-contact__map.is-active .hl-contact__map-guard span { display: none; }

@media (max-width: 900px) {
  .hl-contact__grid { grid-template-columns: 1fr; }
  .hl-contact__form-card .hl-form-row { grid-template-columns: 1fr; }
}

/* ────────────────────────────────────────────────────────────────────────
   BLOG SHARE ROW — small polish so it never crowds/overflows on mobile
   ──────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .hl-post-share { gap: .5rem; }
  .hl-post-share__label {
    width: 100%;
    margin-right: 0;
    margin-bottom: .3rem;
  }
  .hl-post-share a.hl-post-share__link,
  .hl-post-share button.hl-post-share__link {
    width: 2.25rem !important;
    height: 2.25rem !important;
  }
  .hl-post-share .hl-post-share__link svg {
    width: .95rem !important;
    height: .95rem !important;
  }
}