/* Contact Us page (Home/ContactUs.cshtml): hero banner, intro copy, the
   contact form + central-office card, and the two branch info/map blocks. */

/* Hero — same "photo only when the CMS setting has one" treatment as
   about.css's .about-hero, kept page-scoped rather than shared since each
   v2 page owns its own small CSS file. */
.contact-hero {
  background-image: var(--contact-hero-image);
  background-size: cover;
  background-position: center;
  color: #fff;
  text-align: center;
}
@media (max-width: 639px) {
  .contact-hero { background-image: var(--contact-hero-mobile-image); }
}
.contact-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 17, 12, 0.5), rgba(20, 17, 12, 0.78));
}
.contact-hero__inner {
  position: relative;
  z-index: 1;
  margin-inline: auto;
}
.contact-hero .blog-breadcrumb {
  justify-content: center;
  color: rgba(255, 255, 255, 0.75);
}
.contact-hero .blog-breadcrumb a {
  color: rgba(255, 255, 255, 0.75);
}
.contact-hero .blog-breadcrumb a:hover {
  color: var(--color-gold);
}
.contact-hero .blog-breadcrumb [aria-current="page"] {
  color: #fff;
}
.contact-hero .blog-hero__title {
  color: #fff;
  margin-inline: auto;
}

.contact-intro {
  max-width: 760px;
  padding-block: var(--space-lg) 0;
  text-align: center;
  color: var(--color-text-muted);
  line-height: var(--lh-normal);
}

/* Form + central-office card, side by side on desktop */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: start;
}
@media (min-width: 1024px) {
  .contact-layout {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
  .contact-layout--form-only {
    grid-template-columns: minmax(0, 1fr);
  }
}

.contact-form__title {
  margin-block-end: var(--space-md);
}
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin-block-end: var(--space-sm);
}
@media (min-width: 640px) {
  .contact-form__row--split { grid-template-columns: 1fr 1fr; }
}
.contact-form__field textarea.form-field {
  resize: vertical;
  min-height: 96px;
}
.contact-form__submit {
  margin-block-start: var(--space-sm);
}

.contact-info {
  padding: var(--space-md);
  background: var(--color-bg-raised);
  border-radius: var(--radius-md);
}
.contact-info__title {
  margin-block-end: var(--space-sm);
}
.contact-info__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  margin-block-end: var(--space-sm);
  color: var(--color-text-muted);
}
.contact-info__row .icon {
  flex: 0 0 auto;
  margin-block-start: 2px;
  color: var(--color-gold-text);
}
.contact-info__row a {
  color: inherit;
}
.contact-info__label {
  display: block;
  margin-block-end: var(--space-3xs);
  color: var(--color-text);
  font-weight: 600;
}
.contact-info__support-text {
  padding-block-start: var(--space-xs);
  border-block-start: 1px solid var(--color-border);
  color: var(--color-text-muted);
  line-height: var(--lh-normal);
}

/* Branch info + map */
.contact-branch:not(:first-of-type) {
  border-block-start: 1px solid var(--color-border);
}
.contact-branch__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: start;
}
@media (min-width: 1024px) {
  .contact-branch__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  }
}
.contact-branch__title {
  margin-block-end: var(--space-sm);
}
.contact-hours {
  list-style: none;
  margin: var(--space-sm) 0 0;
  padding: 0;
  border-block-start: 1px solid var(--color-border);
}
.contact-hours__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-3xs);
  border-block-end: 1px solid var(--color-border);
  font-size: var(--fs-sm);
}
.contact-hours__day {
  color: var(--color-text);
}
.contact-hours__time {
  color: var(--color-text-muted);
  white-space: nowrap;
}
.contact-hours__time--holiday {
  color: var(--color-danger);
}

.contact-map {
  height: 400px;
  width: 100%;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-bg-raised);
}

/* Leaflet popup content (cloned from a <template> per branch) */
.map-popup {
  width: 230px;
}
.map-popup__image {
  display: block;
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-block-end: var(--space-2xs);
}
.map-popup__title {
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
  margin-block-end: var(--space-3xs);
}
.map-popup__body {
  max-height: 3.4em;
  overflow: hidden;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}
.map-popup.is-expanded .map-popup__body {
  max-height: none;
}
.map-popup__toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
  margin-block-start: var(--space-3xs);
  font-size: var(--fs-xs);
  color: var(--color-gold-text);
}
.map-popup__toggle .icon {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-fast);
}
.map-popup.is-expanded .map-popup__toggle .icon {
  transform: rotate(180deg);
}
.map-popup .more-text { display: inline; }
.map-popup .less-text { display: none; }
.map-popup.is-expanded .more-text { display: none; }
.map-popup.is-expanded .less-text { display: inline; }