/* Indiott — contact + checkout enhancements (companion CSS for indiott-contact-checkout.php).
   Token-driven so it inherits the theme's :root variables; hard fallbacks in case the
   theme stylesheet loads after this file. */

/* ============ HEADER PHONE (compact primary-nav item) ============ */
.ind-nav-phone { display: flex; align-items: center; }
.ind-nav-phone > a {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 12.5px; font-weight: 500; letter-spacing: 0.01em; line-height: 1;
  color: var(--ink, #232458); text-decoration: none; white-space: nowrap;
  padding: 8px 13px; border: 1px solid var(--steel-300, #c6ccd2); border-radius: 100px;
  transition: border-color 0.16s var(--ease, ease), color 0.16s var(--ease, ease), background 0.16s var(--ease, ease);
}
.ind-nav-phone > a:hover,
.ind-nav-phone > a:focus-visible {
  border-color: var(--signal, #ee6124); color: var(--signal-press, #b8431a); background: var(--card, #fff);
}
/* Kill the theme's animated hover underline on this item */
.ind-nav-phone > a::after { display: none !important; content: none !important; }
.ind-nav-phone svg { flex: 0 0 auto; color: var(--signal-press, #b8431a); }
/* Kadence's header.min.css carries `.header-navigation li.menu-item > a { display: block }`
   at specificity 0-2-2, which outranks the `.ind-nav-phone > a` rule above (0-1-1). The
   anchor therefore computed as a block, `gap` and `align-items` were inert, and the
   handset icon sat hard against the "023" with no space. Match Kadence's specificity to
   restore them. The mobile drawer nav carries no `.header-navigation` class, so it never
   lost inline-flex and needs nothing here. */
.header-navigation li.menu-item.ind-nav-phone > a { display: inline-flex; align-items: center; }

.ind-nav-phone__num { display: inline; }

/* Tight desktop band: collapse to an icon-only pill so the edge-to-edge nowrap nav
   never overflows between the "Get a quote" pill and the cart icon. Scoped to the
   desktop bar — the drawer carries a second copy of this menu item, and between 769px
   and 1020px (where the drawer is already the active nav) this rule used to hide the
   number there too, leaving a lone glyph on an 870px-wide row. */
@media (min-width: 769px) and (max-width: 1440px) {
  .header-navigation .ind-nav-phone > a { padding: 9px; border-radius: 50%; }
  .header-navigation .ind-nav-phone__num { display: none; }
}

/* Drawer: a plain full-width tap-to-call row with the number visible, at every width the
   drawer is used (768px and below on phones, up to 1020px on tablets). Not width-bound —
   scoping to .mobile-navigation is what makes it correct, not the breakpoint. */
.mobile-navigation .ind-nav-phone > a { border: 0; border-radius: 0; padding: 10px 0; font-size: 14px; }
.mobile-navigation .ind-nav-phone > a:hover { background: transparent; }
.mobile-navigation .ind-nav-phone__num { display: inline; }

/* ============ PDP CALL LINE (priority 45, below the trust/promise strip) ============ */
.ind-pdp-call {
  font-family: var(--font-mono, 'IBM Plex Mono', monospace);
  font-size: 12.5px; color: var(--steel-500, #7c8590); line-height: 1.5; margin: 14px 0 0;
}
.ind-pdp-call a {
  color: var(--signal-press, #b8431a); text-decoration: none; font-weight: 500;
  border-bottom: 1px solid transparent; transition: border-color 0.15s var(--ease, ease);
}
.ind-pdp-call a:hover { border-bottom-color: var(--signal, #ee6124); }

/* ============ CHECKOUT REASSURANCE LINE ============ */
.ind-checkout-help {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 13px; line-height: 1.4;
  color: var(--steel-700, #3e444b);
  background: var(--paper, #f7f8f9); border: 1px solid var(--steel-100, #e9ecef);
  border-radius: var(--r, 2px); padding: 12px 16px; margin: 0 0 22px;
}
.ind-checkout-help svg { flex: 0 0 auto; color: var(--stock, #16a34a); }
.ind-checkout-help a { color: var(--signal-press, #b8431a); font-weight: 500; text-decoration: none; }
.ind-checkout-help a:hover { text-decoration: underline; }
.ind-checkout-help__sep { color: var(--steel-300, #c6ccd2); }