/* Minimal custom CSS: Tailwind handles almost all styling. */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.mobile-call-button {
  display: none;
}

@media (max-width: 767px) {
  .mobile-call-button {
    position: fixed;
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #a93224;
    color: #fff;
    box-shadow: 0 6px 20px rgb(0 0 0 / 25%);
    text-decoration: none;
  }

  .mobile-call-button:hover {
    background: #7b2118;
  }

  .mobile-call-button:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
    box-shadow: 0 0 0 7px #a93224;
  }
}

.hero-actions {
  display: grid;
  grid-template-areas: "primary" "secondary" "directions";
  gap: 12px;
  justify-items: start;
  align-items: start;
}

.hero-primary-phone {
  grid-area: primary;
}

.hero-directions {
  grid-area: directions;
}

.hero-secondary-phone {
  grid-area: secondary;
}

.hero-secondary-phone,
.secondary-phone-button {
  padding: 12px 22px;
  font-size: 16px;
  line-height: 24px;
  background: #27464b;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 25%);
}

.hero-secondary-phone:hover,
.secondary-phone-button:hover {
  background: #33575d;
}

.hero-secondary-phone {
  background: #a93224;
}

.hero-secondary-phone:hover {
  background: #7b2118;
}

.secondary-phone-button {
  display: inline-flex;
  align-self: center;
  justify-content: center;
  max-width: 100%;
}

.secondary-phone-button:focus-visible {
  outline: 2px solid #27464b;
  outline-offset: 4px;
}

.hero-actions a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.contact-phone-numbers {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  font-variant-numeric: tabular-nums;
}

.contact-phone-numbers a {
  display: flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
}

.contact-phone-numbers a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

@media (min-width: 640px) {
  .hero-actions {
    grid-template-columns: max-content max-content;
    grid-template-areas: "primary directions" "secondary .";
  }
}