/*
 * Bell & Lyons Insurance — Header / Navigation Redesign
 * Visual-only override. All markup, JS hooks, and class names preserved.
 *
 * Palette: white background throughout, navy text, subtle border separators.
 * No colored backgrounds, no gold fills, no dark bands.
 */

/* ── Brand tokens ─────────────────────────────────────────────── */
:root {
  --bl-navy:    #1B2A4A;
  --bl-white:   #FFFFFF;
  --bl-border:  rgba(27, 42, 74, 0.10);
  --bl-muted:   #5A6A82;
  --bl-hover-bg: rgba(27, 42, 74, 0.05);
}

/* ── How Bell & Lyons Works section — #f7f9fb full-width background ─ */
.auto-process-section {
  background: #f7f9fb !important;
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  padding-left: calc(50vw - 600px) !important;
  padding-right: calc(50vw - 600px) !important;
  box-sizing: border-box !important;
}

/* ── Phone images — blend background into #f7f9fb section ───── */
/* Phone images — blend into #f7f9fb and normalize sizes.
   auto phone.png: 1024x1024 (square) → render at 560px wide = 560px tall
   phone health.png: 1536x1024 (landscape 3:2) → render at 848px wide = 565px tall
   Both result in ~519px phone device height, visually matching. */
.auto-process-phone-image,
.health-process-phone-image,
.medicare-process-phone-image,
.auto-process-visual img,
.health-process-visual img,
.medicare-process-visual img {
  mix-blend-mode: multiply !important;
  display: block !important;
  height: auto !important;
  object-fit: contain !important;
  /* Default width for square phone.png (auto.html).
     No !important here so inline style on health/medicare img can override. */
  width: min(100%, 560px);
}

/* health/medicare pages use the landscape phone health.png (1536x1024).
   Keep the grid identical to auto.html (text column unchanged).
   The visual container overflows so the image can render at 848px wide
   (matching the ~519px phone device height of auto.html's 560px square image)
   without touching the text column at all. */
body[data-page-type="health"] .auto-process-visual,
body[data-page-type="medicare"] .auto-process-visual {
  overflow: visible !important;
}
body[data-page-type="health"] .auto-process-phone-image,
body[data-page-type="medicare"] .auto-process-phone-image {
  width: 848px !important;
  max-width: none !important;
}

/* ── Global white background — all pages ─────────────────────── */
html,
body {
  background: #ffffff !important;
}

.site-shell,
.page-shell,
.site-body,
main {
  background: #ffffff !important;
}

/* ── Topbar shell — clean white ───────────────────────────────── */
.topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 120 !important;
  background: #ffffff !important;
  border-bottom: 1px solid var(--bl-border) !important;
  box-shadow: 0 1px 6px rgba(27, 42, 74, 0.06) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ── Nav wrapper ──────────────────────────────────────────────── */
.nav {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  max-width: 1240px !important;
  margin: 0 auto !important;
  padding: 0 28px !important;
  min-height: 0 !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 121 !important;
}

/* ── Top row: left spacer | logo center | utility right ───────── */
.nav-top {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 0 !important;
  min-height: 104px !important;
  position: relative !important;
  z-index: 122 !important;
}

/* ── Brand / logo ─────────────────────────────────────────────── */
.brand {
  grid-column: 2 !important;
  display: flex !important;
  align-items: center !important;
  justify-self: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 140 !important;
  pointer-events: auto !important;
}

.brand-logo {
  width: auto !important;
  height: 96px !important;
  max-height: 96px !important;
  display: block !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
  background: transparent !important;
  filter: none !important;
  pointer-events: none !important;
}

.brand-copy { display: none !important; }

/* ── Utility links (Login, About Us, Phone) ───────────────────── */
.nav-meta {
  grid-column: 3 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  align-self: center !important;
  justify-self: end !important;
}

.nav-meta-link,
.nav-phone {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 2px 4px !important;
  border-radius: 0 !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  color: var(--bl-navy) !important;
  background: transparent !important;
  border: none !important;
  transition: color 150ms ease !important;
}

/* Phone number specifically — bold and slightly larger */
.nav-phone {
  font-weight: 700 !important;
  font-size: 0.85rem !important;
}

.nav-meta-link:hover,
.nav-meta-link:focus-visible,
.nav-phone:hover,
.nav-phone:focus-visible {
  background: transparent !important;
  border: none !important;
  color: var(--bl-navy) !important;
  opacity: 0.75 !important;
  text-decoration: underline !important;
  transform: none !important;
}

.nav-meta-icon {
  width: 14px !important;
  height: 14px !important;
  object-fit: contain !important;
  flex: 0 0 14px !important;
  opacity: 1 !important;
  filter: brightness(0) saturate(100%) invert(13%) sepia(24%) saturate(800%) hue-rotate(190deg) brightness(85%) !important;
}

/* ── Product nav band — WHITE background ──────────────────────── */
.nav-links {
  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 0 !important;
  /* edge-to-edge full bleed */
  margin-left: calc(50% - 50vw) !important;
  width: 100vw !important;
  max-width: none !important;
  /* White surface — no dark background */
  background: #ffffff !important;
  border-radius: 0 !important;
  border-top: 1px solid var(--bl-border) !important;
  border-bottom: none !important;
  padding: 0 max(16px, calc((100vw - 1240px) / 2 + 28px)) !important;
}

.nav-links a {
  display: inline-flex !important;
  align-items: center !important;
  position: relative !important;
  padding: 14px 16px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  color: var(--bl-navy) !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: color 150ms ease, background 150ms ease !important;
  border-bottom: 2px solid transparent !important;
  margin-bottom: -1px !important;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--bl-navy) !important;
  background: transparent !important;
  border-bottom-color: #2163d1 !important;
}

/* Active state */
.nav-links a.is-active {
  color: var(--bl-navy) !important;
  font-weight: 600 !important;
  background: transparent !important;
  border-bottom-color: #2163d1 !important;
}

/* ── Hamburger button ─────────────────────────────────────────── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--bl-border);
  background: transparent;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: background 150ms ease;
  flex-shrink: 0;
}

.nav-hamburger:hover,
.nav-hamburger:focus-visible {
  background: var(--bl-hover-bg);
  outline: none;
}

.nav-hamburger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--bl-navy);
  border-radius: 2px;
  transition: transform 260ms ease, opacity 200ms ease, width 200ms ease;
  transform-origin: center;
}

.nav-hamburger.is-open span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav-hamburger.is-open span:nth-child(2) {
  opacity: 0;
  width: 0;
}
.nav-hamburger.is-open span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* ── Mobile drawer ────────────────────────────────────────────── */
/* Display, positioning, and open/close handled by site.css
   @media (max-width:900px) rules + body.nav-drawer-open class. */



/* Drawer header: logo + close */
.nav-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 18px;
  border-bottom: 1px solid var(--bl-border);
  background: #ffffff;
}

.nav-drawer-logo {
  height: 44px;
  width: auto;
  display: block;
}

.nav-drawer-close {
  width: 36px;
  height: 36px;
  border: 1px solid var(--bl-border);
  background: transparent;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--bl-navy);
  font-size: 1.1rem;
  line-height: 1;
  transition: background 150ms ease;
}

.nav-drawer-close:hover {
  background: var(--bl-hover-bg);
}

/* Drawer utility links */
.nav-drawer-meta {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 12px 0 0;
  border-bottom: 1px solid var(--bl-border);
  margin-bottom: 4px;
}

.nav-drawer-meta a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  color: var(--bl-muted);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 150ms ease;
}

.nav-drawer-meta a:hover {
  background: var(--bl-hover-bg);
  color: var(--bl-navy);
}

/* Drawer product links */
.nav-drawer-links {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 8px 0;
}

.nav-drawer-links a {
  display: flex;
  align-items: center;
  padding: 13px 20px;
  color: var(--bl-navy);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(27, 42, 74, 0.05);
  transition: background 150ms ease;
}

.nav-drawer-links a:hover,
.nav-drawer-links a:focus-visible {
  background: var(--bl-hover-bg);
}

.nav-drawer-links a.is-active {
  color: var(--bl-navy);
  background: var(--bl-hover-bg);
  font-weight: 600;
}

/* Drawer footer */
.nav-drawer-footer {
  padding: 16px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--bl-border);
  margin-top: auto;
}

.nav-drawer-phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  color: var(--bl-navy) !important;
  border: 1px solid var(--bl-border);
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  text-align: center;
  transition: background 150ms ease;
}

.nav-drawer-phone:hover {
  background: var(--bl-hover-bg);
}

.nav-drawer-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 13px 20px;
  background: var(--bl-navy);
  color: #ffffff !important;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  text-align: center;
  transition: opacity 150ms ease;
  border: 1px solid transparent;
}

.nav-drawer-cta:hover {
  opacity: 0.88;
}

/* ── Legacy toggle selectors ──────────────────────────────────── */
.nav-toggle {
  appearance: none;
  border: 1px solid var(--bl-border);
  background: transparent;
  padding: 8px;
  color: var(--bl-navy);
  cursor: pointer;
  border-radius: 8px;
  transition: background 150ms ease;
}

.nav-toggle:hover {
  background: var(--bl-hover-bg);
}

.nav-toggle-bars {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
}

.nav-toggle-bars span {
  display: block;
  width: 18px;
  height: 1.5px;
  border-radius: 999px;
  background: var(--bl-navy);
}

/* ── Sticky scroll shadow ─────────────────────────────────────── */
.topbar.is-scrolled {
  box-shadow: 0 1px 0 rgba(27, 42, 74, 0.08), 0 4px 16px rgba(27, 42, 74, 0.07) !important;
}

/* ── Hero: hide left text block, center chatbot only ─────────── */
.assistant-copy.top-leo-chat-copy {
  display: none !important;
}

.assistant-card.assistant-card-wide.assistant-card-top {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 0 !important;
}

.assistant-panel.top-leo-chat-panel {
  width: 100% !important;
  max-width: 600px !important;
  margin: 0 auto !important;
}

/* ══════════════════════════════════════════════════════════════════
   UNIFIED BUTTON DESIGN — match header button style across all pages
   Target: #2163d1 blue, 6px radius, 6px 12px padding, 600 weight, white text
   Excluded: .auto-topic-chip, .coverage-hotspot, .article-page-related-chip
   ══════════════════════════════════════════════════════════════════ */

/* ── Primary buttons (.button.primary) ─────────────────────────── */
.button.primary,
button.button.primary,
a.button.primary {
  background: #2163d1 !important;
  color: #ffffff !important;
  border: 1px solid #2163d1 !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(33, 99, 209, 0.25) !important;
  transition: background 140ms ease, box-shadow 140ms ease, transform 120ms ease !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
}

.button.primary:hover,
.button.primary:focus-visible,
button.button.primary:hover,
a.button.primary:hover {
  background: #ffffff !important;
  border-color: #2163d1 !important;
  color: #2163d1 !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(33, 99, 209, 0.18) !important;
}

/* ── Secondary buttons (.button.secondary) ──────────────────────── */
.button.secondary,
button.button.secondary,
a.button.secondary {
  background: transparent !important;
  color: #2163d1 !important;
  border: 1px solid #2163d1 !important;
  border-radius: 6px !important;
  padding: 5px 12px !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  transition: background 140ms ease, color 140ms ease, transform 120ms ease !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
}

.button.secondary:hover,
.button.secondary:focus-visible,
a.button.secondary:hover {
  background: rgba(33, 99, 209, 0.06) !important;
  color: #1a52b8 !important;
  border-color: #1a52b8 !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

/* ── "Get a quote" process CTA (.auto-process-cta) — compact insurtech style ── */
.auto-process-cta {
  display: inline-flex !important;
  align-items: center !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin-top: 34px !important;
  margin-left: 62px !important;
  cursor: pointer !important;
}

.auto-process-cta:hover .button,
.auto-process-cta:focus-visible .button,
.auto-process-cta .button:hover,
.auto-process-cta .button:focus-visible {
  background: #ffffff !important;
  color: #2163d1 !important;
  border: 1px solid #2163d1 !important;
  box-shadow: 0 2px 8px rgba(33, 99, 209, 0.18) !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

/* ── Mobile drawer CTA (.nav-drawer-cta) ────────────────────────── */
.nav-drawer-cta {
  background: #2163d1 !important;
  color: #ffffff !important;
  border: 1px solid #2163d1 !important;
  border-radius: 6px !important;
  padding: 7px 16px !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(33, 99, 209, 0.25) !important;
}

.nav-drawer-cta:hover {
  background: #ffffff !important;
  border-color: #2163d1 !important;
  color: #2163d1 !important;
  opacity: 1 !important;
}

/* ── Send button in chat widget ─────────────────────────────────── */
/* The .button.primary rule above already covers this.
   Extra specificity for the chat widget context: */
.assistant-input-row .button.primary,
.assistant-input-row button.primary,
.chat-input-row .button.primary,
.leo-input-row .button.primary {
  border-radius: 6px !important;
}

/* ── Send button inside chat widget — override 12px radius from site.css ── */
.assistant-input .button.primary,
.assistant-input-chatbot .button.primary,
.assistant-input button.primary,
.assistant-input-chatbot button.primary,
.page-chatbot .button.primary,
.page-chatbot button.primary {
  border-radius: 6px !important;
  background: #2163d1 !important;
  color: #ffffff !important;
  border: 1px solid #2163d1 !important;
  font-weight: 600 !important;
  padding: 5px 12px !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  min-height: unset !important;
  line-height: 1.4 !important;
  box-shadow: 0 1px 3px rgba(33, 99, 209, 0.25) !important;
}

.assistant-input .button.primary:hover,
.assistant-input-chatbot .button.primary:hover,
.page-chatbot .button.primary:hover {
  background: #ffffff !important;
  border-color: #2163d1 !important;
  color: #2163d1 !important;
}

/* ── Home page (index.html) button override — force blue like header ── */
body[data-page-type="home"] .button.primary,
body[data-page-type="home"] .assistant-input .button.primary,
body[data-page-type="home"] .form-actions .button.primary,
body[data-page-type="home"] .choice-grid button {
  background: #2163d1 !important;
  color: #ffffff !important;
  border: 1px solid #2163d1 !important;
  border-radius: 6px !important;
}

body[data-page-type="home"] .button.primary:hover,
body[data-page-type="home"] .assistant-input .button.primary:hover {
  background: #ffffff !important;
  border-color: #2163d1 !important;
  color: #2163d1 !important;
}

/* ── Get a quote: sentence case override for inner .button element ── */
.auto-process-cta .button,
.auto-process-cta .button.primary {
  text-transform: none !important;
  letter-spacing: 0.01em !important;
  font-size: 0.875rem !important;
  padding: 6px 16px !important;
  min-width: 0 !important;
  width: fit-content !important;
  display: inline-flex !important;
}

/* ── Get a quote: hover — white bg + blue text (matches Send button hover) ── */
.auto-process-cta .button:hover,
.auto-process-cta .button.primary:hover,
.auto-process-cta:hover .button,
.auto-process-cta:hover .button.primary {
  background: #ffffff !important;
  color: #2163d1 !important;
  border: 1px solid #2163d1 !important;
  box-shadow: 0 2px 8px rgba(33, 99, 209, 0.18) !important;
  transform: translateY(-1px) !important;
  text-decoration: none !important;
}

/* ── Mobile: hide desktop nav-links and nav-meta on small screens ── */
@media (max-width: 768px) {
  .nav-links {
    display: none !important;
  }
  .nav-meta {
    display: none !important;
  }
}

/* ============================================================
   MOBILE: WhatsApp-style send button — circle, paper plane icon
   Must come LAST in this file to override all .button.primary rules above
   ============================================================ */
@media (max-width: 768px) {
  .assistant-input button[data-assistant-send],
  .assistant-input-chatbot button[data-assistant-send],
  .assistant-input .button.primary[data-assistant-send],
  .assistant-input-chatbot .button.primary[data-assistant-send] {
    flex: 0 0 48px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    font-size: 0 !important;
    color: transparent !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    background: #25D366 !important;
    border: none !important;
    box-shadow: 0 2px 10px rgba(37, 211, 102, 0.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    position: relative !important;
    transition: background 160ms ease, transform 160ms ease !important;
  }

  .assistant-input button[data-assistant-send]::after,
  .assistant-input-chatbot button[data-assistant-send]::after {
    content: "" !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E") center/contain no-repeat !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  .assistant-input button[data-assistant-send]:active,
  .assistant-input-chatbot button[data-assistant-send]:active {
    background: #1ebe5d !important;
    transform: scale(0.94) !important;
    box-shadow: 0 1px 6px rgba(37, 211, 102, 0.3) !important;
  }

  /* Prevent the send button from being overridden by hover rules */
  .assistant-input button[data-assistant-send]:hover,
  .assistant-input-chatbot button[data-assistant-send]:hover {
    background: #1ebe5d !important;
    color: transparent !important;
    border: none !important;
    transform: scale(1.04) !important;
  }
}

/* ============================================================
   MOBILE: Fix assistant-input layout — override site.css grid-template-columns:1fr
   that stacks input + button vertically. Force flex row so send button stays inline.
   ============================================================ */
@media (max-width: 768px) {
  .assistant-input,
  .top-leo-chat-panel .assistant-input,
  body[data-page-type="home"] .assistant-input {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
    grid-template-columns: unset !important;
  }

  .assistant-input input,
  .top-leo-chat-panel .assistant-input input,
  body[data-page-type="home"] .assistant-input input {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }

  .assistant-input button[data-assistant-send],
  .top-leo-chat-panel .assistant-input button[data-assistant-send],
  body[data-page-type="home"] .assistant-input button[data-assistant-send],
  body[data-page-type="home"] .assistant-input .button.primary[data-assistant-send] {
    flex: 0 0 48px !important;
    width: 48px !important;
    max-width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    background: #25D366 !important;
    border: none !important;
    color: transparent !important;
    font-size: 0 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    box-shadow: 0 2px 10px rgba(37, 211, 102, 0.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    position: relative !important;
  }

  body[data-page-type="home"] .assistant-input .button.primary[data-assistant-send]:hover,
  .assistant-input button[data-assistant-send]:hover {
    background: #1ebe5d !important;
    color: transparent !important;
    border: none !important;
    transform: scale(1.04) !important;
  }
}