/* Phone number in the site header: a call button beside the menu button on
   phones and tablets, and the number beside "See packages" on wide screens.
   Between those widths the menu bar has no room for it, so it stays in the
   footer and contact section only. */
.header-call {
  display: none;
}

.nav-call {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.nav-call svg {
  flex: none;
  width: 17px;
  height: 17px;
  color: var(--coral-dark);
}

@media (min-width: 921px) and (max-width: 1199px) {
  .nav-call {
    display: none;
  }
}

@media (max-width: 920px) {
  .nav-call svg {
    color: var(--coral);
  }

  .js .site-header .header-inner {
    gap: 10px;
  }

  .js .header-call {
    display: grid;
    width: 48px;
    height: 48px;
    flex: none;
    margin-left: auto;
    place-items: center;
    border: 2px solid var(--ink);
    border-radius: 3px;
    background: var(--coral);
    color: var(--ink);
  }

  .js .header-call:hover {
    background: #f38167;
  }

  .js .header-call svg {
    width: 22px;
    height: 22px;
  }
}

/* Footer bottom row: keep the number in one piece, and on narrow phones let the
   row's links wrap as whole links rather than squeezing each one. */
.footer-utility a[href^="tel:"] {
  white-space: nowrap;
}

@media (max-width: 430px) {
  .footer-utility {
    flex-wrap: wrap;
    row-gap: 12px;
  }
}