/* Site chrome shared by the city pages (cambridge, gta, guelph, halton-hills, kitchener-waterloo):
   the Call/Text bar, the header and its nav dropdowns, the phone bottom bar, the tablet side rail
   and the Text Zoltan panel. Markup: partials/site-chrome.html (copied into each page by
   scripts/sync-site-chrome.mjs); script: zb-chrome.js.
   COPIED from index.html's inline <style> (which still has its own copy, as does home.js for the
   panel). Until the homepage moves onto these files, change both when you change one. */
/* Top banner action buttons (phone + book) */
.zb-banner-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 8px;
  background: transparent;
  border: 0;
  color: #0F0F0F;
  cursor: pointer;
  transition: background-color .15s ease;
  white-space: nowrap;
  text-decoration: none;
  font-family: inherit;
}
.zb-banner-action:hover { background: rgba(15, 15, 15, 0.08); }
.zb-banner-action[hidden] { display: none; }
.zb-banner-divider {
  width: 1px;
  height: 20px;
  background: rgba(15, 15, 15, 0.25);
  margin: 0 6px;
  flex-shrink: 0;
}

/* Top "Call Us" banner — phone icon wiggles every few seconds */
.zb-call-icon {
  transform-origin: 50% 60%;
  animation: zb-call-shake 4s ease-in-out infinite;
}
@keyframes zb-call-shake {
  0%, 88%, 100%   { transform: rotate(0deg); }
  90%             { transform: rotate(-15deg); }
  92%, 96%        { transform: rotate(15deg); }
  94%, 98%        { transform: rotate(-10deg); }
}

/* Typing on a phone (keyboard up): tuck away the bottom nav and the cookie pill that sits on
   it. Otherwise they float over the form, and some Android browsers (Brave) leave a blank
   strip under them above the keyboard. Checkboxes, radios and buttons don't raise a
   keyboard, so focusing those doesn't count. */
@media (max-width: 767px) {
  body:has(:is(input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"], [type="range"], [type="color"], [type="file"]), textarea, select, [contenteditable="true"]):focus) :is(nav.fixed.bottom-0, .zb-cookie-pill) {
    display: none;
  }
}
/* ===== Text Zoltan panel (script in home.js) =====
   Sized from the visible viewport (--zb-vvh, kept current by home.js) and lifted over an
   on-screen keyboard (--zb-kb). Sized off 100vh it ran past the top of the screen on phones,
   where 100vh is the height with the browser bars hidden, taking the close button with it. */
#zb-chat-panel {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + var(--zb-kb, 0px));
  width: 360px;
  max-width: calc(100vw - 2rem);
  max-height: calc(var(--zb-vvh, 100vh) - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #1A1A1A;
  border: 1px solid rgba(212, 165, 116, 0.2);
  border-radius: 24px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
  z-index: 60;
  transform-origin: bottom right;
  animation: zb-chat-open .2s ease-out;
}
#zb-chat-panel:focus { outline: none; }
/* Phones (opened from "Ask a quick question"): a sheet along the bottom edge */
@media (max-width: 767px) {
  #zb-chat-panel {
    left: 0.5rem;
    right: 0.5rem;
    bottom: calc(0.5rem + var(--zb-kb, 0px));
    width: auto;
    max-width: none;
    max-height: calc(var(--zb-vvh, 100vh) - 1rem);
    transform-origin: bottom center;
  }
}
@keyframes zb-chat-open {
  from { opacity: 0; transform: scale(0.92) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
/* Sticky, so the close button stays in reach when a short screen makes the panel scroll */
#zb-chat-panel header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 10px 12px 16px;
  background: linear-gradient(135deg, #1A1A1A, #2A2A2A);
  border-bottom: 1px solid rgba(212, 165, 116, 0.15);
}
.zb-chat-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.zb-chat-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 999px;
  object-fit: cover;
  object-position: top;
  border: 1px solid rgba(212, 165, 116, 0.35);
}
#zb-chat-heading {
  margin: 0;
  color: #E5E5E5;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}
.zb-chat-sub {
  margin: 2px 0 0;
  color: #999;
  font-size: 12px;
}
#zb-chat-close {
  flex-shrink: 0;
  background: transparent;
  color: #999;
  border: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
}
#zb-chat-close:hover { color: #fff; background: #2A2A2A; }
/* Deep-link target (e.g. an ad sitelink to #quote) clears the fixed top banner/header */
#quote { scroll-margin-top: 70px; }
.zb-chat-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}
.zb-chat-lede {
  margin: 0;
  color: #BDBDBD;
  font-size: 14px;
  line-height: 1.5;
}
.zb-chat-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #999;
  font-size: 12px;
  font-weight: 600;
}
.zb-chat-field input,
.zb-chat-field textarea {
  width: 100%;
  padding: 10px 14px;
  background: #0F0F0F;
  border: 1px solid rgba(212, 165, 116, 0.2);
  border-radius: 14px;
  color: #E5E5E5;
  font-size: 16px; /* under 16px, iOS zooms the whole page in when the field gets focus */
  font-weight: 400;
  line-height: 1.4;
  outline: none;
  transition: border-color .15s ease;
}
.zb-chat-field textarea { min-height: 84px; resize: none; }
.zb-chat-field textarea::placeholder { color: #666; }
.zb-chat-field input:focus,
.zb-chat-field textarea:focus { border-color: rgba(212, 165, 116, 0.6); }
.zb-chat-error {
  margin: 0;
  color: #fca5a5;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}
.zb-chat-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 18px;
  background: #D4A574;
  color: #0F0F0F;
  border: none;
  border-radius: 999px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease;
}
.zb-chat-send:hover { background: #E5C49A; }
.zb-chat-send:disabled { opacity: 0.6; cursor: wait; }
.zb-chat-note {
  margin: -4px 0 0;
  color: #8F8F8F;
  font-size: 12px;
  text-align: center;
}
.zb-chat-done { align-items: flex-start; }
.zb-chat-done:focus { outline: none; }
.zb-chat-done-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #E5E5E5;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 18px;
  font-weight: 700;
}
.zb-chat-done-title svg { color: #4ADE80; }
.zb-chat-done-link { color: #D4A574; font-size: 14px; font-weight: 600; text-decoration: none; }
.zb-chat-error a { color: #D4A574; }
.zb-chat-alt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px 14px;
  background: #0F0F0F;
  border-top: 1px solid rgba(212, 165, 116, 0.12);
  color: #999;
  font-size: 13px;
}
.zb-chat-alt a { color: #D4A574; font-weight: 600; text-decoration: none; }
.zb-chat-done-link:hover,
.zb-chat-alt a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ===== Fox logo mark (header + footer) ===== */
/* Ears break out of the badge, so the header mark is lifted to poke above the pill */
.zb-logo-mark {
  width: 46px;
  height: 46px;
  margin: -12px 0 -2px;
  transform-origin: 50% 80%;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
@media (min-width: 768px) { .zb-logo-mark { width: 56px; height: 56px; margin: -16px 0 -4px; } }
a:hover > .zb-logo-mark { transform: rotate(-8deg) scale(1.05); }

/* ===== Desktop navigation (>=1024px): a second pill beside the logo. The two dropdowns share
   one popup that resizes and slides between them (script right after the header). Phones keep
   the bottom nav and tablets the side rail, which this replaces from 1024px. ===== */
.zb-nav { display: none; }
@media (min-width: 1024px) { .zb-side-nav { display: none; } }
@media (min-width: 1024px) {
  .zb-nav {
    position: relative;
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .4rem;
    border-radius: 999px;
    border: 1px solid rgba(212, 165, 116, .2);
    background: rgba(26, 26, 26, .9);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    box-shadow: 0 8px 30px rgb(0 0 0 / .4);
    pointer-events: auto;
  }
}
.zb-nav-list { display: flex; align-items: center; gap: .15rem; margin: 0; padding: 0; list-style: none; }
.zb-nav-trigger,
.zb-nav-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  height: 2.5rem;
  padding: 0 .95rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #E5E5E5;
  font: inherit;
  font-size: .875rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.zb-nav-trigger:hover,
.zb-nav-link:hover { background: rgba(212, 165, 116, .1); color: #F5E9D8; }
.zb-nav-trigger[aria-expanded="true"] { background: rgba(212, 165, 116, .14); color: #F5E9D8; }
.zb-nav-chevron { display: inline-flex; margin-top: 1px; color: #D4A574; transition: transform .3s ease; }
.zb-nav-trigger[aria-expanded="true"] .zb-nav-chevron { transform: rotate(180deg); }
.zb-nav-cta {
  display: inline-flex;
  align-items: center;
  height: 2.5rem;
  margin-left: .35rem;
  padding: 0 1.15rem;
  border-radius: 999px;
  background: #D4A574;
  color: #0F0F0F;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .2s ease;
}
.zb-nav-cta:hover { background: #E5C49A; }
.zb-nav button:focus-visible,
.zb-nav a:focus-visible { outline: 2px solid rgba(212, 165, 116, .85); outline-offset: 2px; }

/* The shared popup: 8px under the bar, lined up with the open trigger, sized to its panel.
   --popup-x/w/h come from the script; is-instant skips the glide on the first open. */
.zb-nav-popup {
  position: absolute;
  top: calc(100% + 8px);
  left: var(--popup-x, 0px);
  width: var(--popup-w, auto);
  height: var(--popup-h, auto);
  border-radius: 1.1rem;
  border: 1px solid rgba(212, 165, 116, .2);
  background: #141414;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .85);
  opacity: 0;
  transform: scale(.92);
  transform-origin: 1.5rem 0;
  transition: opacity .2s ease, transform .35s cubic-bezier(.22, 1, .36, 1), left .35s cubic-bezier(.22, 1, .36, 1),
    width .35s cubic-bezier(.22, 1, .36, 1), height .35s cubic-bezier(.22, 1, .36, 1);
}
.zb-nav-popup[hidden] { display: none; }
.zb-nav-popup.is-open { opacity: 1; transform: none; }
.zb-nav-popup.is-instant { transition: opacity .2s ease, transform .35s cubic-bezier(.22, 1, .36, 1); }
/* Bridges the 8px gap so moving the mouse down to the panel doesn't count as leaving the menu */
.zb-nav-popup::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.zb-nav-viewport { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; }
.zb-nav-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: max-content;
  padding: .5rem;
  transition: opacity .3s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}
.zb-nav-panel[hidden] { display: none; }
/* Switching panels: the new one slides in from the side you moved toward, the old one out the other */
.zb-nav-panel.from-right, .zb-nav-panel.to-right { opacity: 0; transform: translateX(30%); }
.zb-nav-panel.from-left, .zb-nav-panel.to-left { opacity: 0; transform: translateX(-30%); }
.zb-nav-grid { display: grid; gap: .15rem; width: 21rem; margin: 0; padding: 0; list-style: none; }
.zb-nav-grid.is-two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 36rem; }
.zb-nav-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .65rem .75rem;
  border-radius: .8rem;
  color: #E5E5E5;
  text-decoration: none;
  transition: background-color .2s ease;
}
.zb-nav-item:hover,
.zb-nav-item:focus-visible { background: rgba(212, 165, 116, .09); }
.zb-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .7rem;
  border: 1px solid rgba(212, 165, 116, .2);
  background: rgba(212, 165, 116, .12);
  color: #D4A574;
}
.zb-nav-item strong { display: block; font-size: .9rem; font-weight: 600; line-height: 1.25; color: #F0E6D8; }
.zb-nav-item small { display: block; margin-top: .15rem; font-size: .78rem; line-height: 1.35; color: #8F8F8F; }
.zb-nav-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: .35rem .25rem 0;
  padding: .7rem .5rem .3rem;
  border-top: 1px solid rgba(212, 165, 116, .12);
  font-size: .82rem;
  color: #999;
}
.zb-nav-foot a { color: #D4A574; font-weight: 600; text-decoration: none; }
.zb-nav-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .zb-nav-popup, .zb-nav-panel, .zb-nav-chevron { transition: none; }
}

/* Pulse ring drawing the eye to the persistent "Free Quote" action in the mobile nav */
.zb-navquote-ring { position: absolute; inset: 0; border-radius: 999px; animation: zbNavQuotePulse 2.4s ease-out infinite; pointer-events: none; }
@keyframes zbNavQuotePulse {
  0% { box-shadow: 0 0 0 0 rgba(212, 165, 116, 0.5); }
  70% { box-shadow: 0 0 0 11px rgba(212, 165, 116, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 165, 116, 0); }
}
@media (prefers-reduced-motion: reduce) { .zb-navquote-ring { animation: none; } }