/**
 * Navigation phone treatment.
 *
 * Header: a secondary, outlined/soft-filled call pill with the confirmed
 * number visible beside the primary filled "Get a quote" action.
 * Drawer: a prominent call card with the number set large, above email and
 * the quote button.
 *
 * Loaded from includes/header.php after the master expressive layer. Kept
 * separate so it can be reviewed or removed without touching the main sheet.
 */

/* ---------- Header call pill -------------------------------------------- */
.app-bar .app-bar__call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 48px;
  padding: 0 14px;
  border: 1.5px solid #5f87ab;
  border-radius: var(--radius-pill, 999px);
  background: color-mix(in srgb, var(--x2-sky-100, #e7f1fb) 58%, #ffffff);
  color: var(--x2-blue-900, #123a5a);
  font-size: 14px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.app-bar .app-bar__call:hover {
  border-color: var(--x2-blue-700, #255f8d);
  background: var(--x2-sky-100, #e7f1fb);
  color: var(--x2-blue-950, #0c2238);
}

.app-bar .app-bar__call:active { transform: none; }

.app-bar__call-icon {
  display: inline-flex;
  flex: none;
  color: var(--x2-blue-800, #1c4b72);
}

.app-bar__call-number { display: inline; }

/* Keep both header actions at the same 48px rhythm. */
.app-bar .app-bar__cta { min-height: 48px; }

.app-bar__actions { gap: 10px; }

/* ---------- Tablet: fit the number without squeezing out the CTA -------- */
@media (min-width: 761px) and (max-width: 980px) {
  .app-bar__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
  }

  .primary-nav {
    justify-self: center;
    min-width: 0;
  }

  .primary-nav a {
    padding-inline: 6px;
    font-size: 12px;
  }

  .app-bar__actions { gap: 10px; }

  .app-bar .app-bar__call {
    gap: 0;
    padding: 0 10px;
    font-size: 13px;
  }

  .app-bar__call-icon { display: none; }

  .app-bar .app-bar__cta {
    min-height: 48px;
    padding-inline: 12px;
    font-size: 12.5px;
  }

  .app-bar .app-bar__cta svg {
    width: 15px;
    height: 15px;
  }
}

/* ---------- Mid desktop: text-only pill, no icon ------------------------ */
@media (min-width: 981px) and (max-width: 1200px) {
  .app-bar .app-bar__call {
    gap: 0;
    padding: 0 11px;
    font-size: 13px;
  }

  .app-bar__call-icon { display: none; }
}

/* At 1024px there is room for the icon again without touching the CTA. */
@media (min-width: 1024px) and (max-width: 1200px) {
  .app-bar .app-bar__call {
    gap: 7px;
    padding: 0 10px;
  }

  .app-bar__call-icon {
    display: inline-flex;
    width: 17px;
    height: 17px;
  }
}

/* ---------- Mobile: icon-only header, full number lives in the drawer --- */
@media (max-width: 760px) {
  .app-bar .app-bar__call {
    width: 48px;
    min-width: 48px;
    height: 48px;
    padding: 0;
    gap: 0;
    border-radius: 16px;
  }

  .app-bar__call-icon {
    display: inline-flex;
    width: 22px;
    height: 22px;
  }

  .app-bar__call-number { display: none; }
}

/* ---------- Drawer call card -------------------------------------------- */
.nav-sheet__phone {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 9px 13px;
  border: 1.5px solid var(--x2-hairline-strong, #aec5da);
  border-radius: 16px 16px 16px 6px;
  background: var(--x2-sky-50, #f3f8fd);
  color: var(--x2-blue-950, #0c2238);
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
  transition: background .2s ease, border-color .2s ease;
}

.nav-sheet__phone:hover {
  border-color: var(--x2-blue-700, #255f8d);
  background: var(--x2-sky-100, #e7f1fb);
}

.nav-sheet__phone-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--x2-sky-200, #d4e5f5);
  border-radius: 13px;
  background: #ffffff;
  color: var(--x2-blue-800, #1c4b72);
}

.nav-sheet__phone-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.nav-sheet__phone-label {
  color: var(--x2-blue-800, #1c4b72);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.nav-sheet__phone-number {
  color: var(--x2-blue-950, #0c2238);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Short phones: keep the number and the quote CTA inside the first view. */
@media (max-height: 720px) {
  .nav-sheet {
    gap: 10px;
    padding: 12px 22px 16px;
  }

  .nav-sheet__links a {
    min-height: 48px;
    padding-block: 4px;
    font-size: clamp(20px, 5vw, 24px);
  }

  .nav-sheet__foot {
    gap: 8px;
    padding-top: 6px;
  }

  .nav-sheet__phone {
    min-height: 56px;
    padding-block: 6px;
  }
}

@media (prefers-contrast: more) {
  .app-bar .app-bar__call,
  .nav-sheet__phone { border-width: 2px; }
}

@media (forced-colors: active) {
  .app-bar .app-bar__call,
  .nav-sheet__phone { border: 2px solid ButtonText; }
}