/* ==========================================================================
   contact.css — refinements for the contact page only.

   Loaded after style.css, so these rules win on equal specificity.
   Nothing here touches any other page.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Contact info list
   The theme draws 80px icon circles, sets the address/hours at 20px while the
   phone/email links sit at 18px, and spaces rows 30px apart. Mixed type sizes
   plus oversized icons make the block read as loose and uneven, and the 20px
   address wraps awkwardly. Below: one type size for all four values, smaller
   icons, and hairline rules so the four rows read as a single tidy set.
   -------------------------------------------------------------------------- */

.contact-details__info {
  margin-top: 34px;
  border-top: 1px solid rgba(22, 35, 60, .11);
}

.contact-details__info li {
  align-items: flex-start;      /* top-align, so a 2-line address keeps the rhythm */
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(22, 35, 60, .11);
}

/* the theme adds 30px between rows; padding + rules handle spacing now */
.contact-details__info li + li {
  margin-top: 0;
}

/* ---- icon ---- */
.contact-details__info li .icon {
  height: 52px;
  width: 52px;
  flex: 0 0 52px;               /* never squash when the text wraps */
  margin-top: 3px;              /* optically align with the label cap-height */
}

.contact-details__info li .icon span {
  font-size: 19px;
}

/* ---- text ---- */
.contact-details__info li .text {
  margin-left: 0;               /* replaced by the flex gap above */
  min-width: 0;                 /* lets long values wrap instead of overflowing */
}

.contact-details__info li .text h6 {
  margin: 0 0 3px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--theme-color2);
  opacity: .5;
}

/* one size for phone, email, address and hours so they align as a set */
.contact-details__info li .text a,
.contact-details__info li .text span {
  display: inline-block;
  font-size: 17px;
  line-height: 1.55;
  font-weight: 500;
  color: var(--theme-color2);
  overflow-wrap: anywhere;      /* long email cannot overflow the column */
}

.contact-details__info li .text a:hover,
.contact-details__info li .text a:focus-visible {
  color: var(--theme-color1);
}

/* --------------------------------------------------------------------------
   Section intro
   -------------------------------------------------------------------------- */
.contact-details__right .sec-title {
  margin-bottom: 0;
}

.contact-details__right .sec-title .text {
  margin-top: 14px;
  max-width: 46ch;              /* keeps the intro to a comfortable measure */
  line-height: 1.75;
}

/* --------------------------------------------------------------------------
   Map
   -------------------------------------------------------------------------- */
.map-section .map {
  display: block;               /* removes the inline-frame baseline gap */
  width: 100%;
  height: 460px;
  border: 0;
  filter: grayscale(18%);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .contact-details__right {
    margin-top: 50px;
  }
}

@media (max-width: 575px) {
  .contact-details__info li {
    gap: 14px;
    padding: 16px 0;
  }
  .contact-details__info li .icon {
    height: 46px;
    width: 46px;
    flex: 0 0 46px;
  }
  .contact-details__info li .icon span {
    font-size: 17px;
  }
  .contact-details__info li .text a,
  .contact-details__info li .text span {
    font-size: 16px;
  }
  .map-section .map {
    height: 320px;
  }
}