/* 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;
  }
}

/* Since "AI assistants" joined the menu (5 Nov 2026) the bar is tight just
   above the 920px menu-button breakpoint: close the gaps there, and keep
   "See packages" on one line at every width. */
@media (min-width: 921px) and (max-width: 1000px) {
  .site-nav {
    gap: 13px;
  }
}

.site-nav .button {
  white-space: nowrap;
}