/* ==========================================================================
   SV Steels Chennai — Contact page styles (contact.html)
   Loaded AFTER style.css and sv-chennai.css so it can override both.
   Do not edit style.css — that file is compiled from SCSS (style.css.map).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Contact info cards — equal height
   -------------------------------------------------------------------------- */

/* The four cards hold very different amounts of text: one address line versus
   four phone numbers. Bootstrap columns already stretch to the tallest in the
   row, but .contact-info is a separate box inside the column, so without
   height:100% each card shrinks to its own content and the backgrounds end at
   different heights. The flex column then lets the text block absorb the slack
   so every card's padding stays even. */
.contact-page__info-wrap .contact-info {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 40px 24px;
}

.contact-page__info-wrap .contact-info__text:last-child {
  margin-bottom: 0;
}

/* Label above each card's detail, so "Business Hours" is not mistaken for more
   contact lines. */
.contact-info__title {
  margin-bottom: 8px;
  font-family: var(--title-font);
  font-weight: 700;
  color: var(--black-color);
}

/* The icon is a link now (map / mailto / tel / jump to form). It inherits the
   template's 80px circle; these keep it centred as a flex item and stop the
   anchor picking up an underline or link colour. */
.contact-page__info-wrap a.contact-info__icon {
  flex: none;
  margin-left: auto;
  margin-right: auto;
  color: var(--white-color);
  transition: var(--transition);
}

.contact-page__info-wrap a.contact-info__icon:hover,
.contact-page__info-wrap a.contact-info__icon:focus {
  color: var(--white-color);
  opacity: 0.88;
}

/* --------------------------------------------------------------------------
   Contact form
   -------------------------------------------------------------------------- */

/* Anchor target for the Business Hours card icon — offset so the heading is
   not hidden behind the sticky header when jumped to. */
#contact-form {
  scroll-margin-top: 120px;
}

.contact-form__desc {
  max-width: 760px;
}