/* ----------------------------------------------------------------
 * Site chrome - header + footer. Loaded on every page.
 * ---------------------------------------------------------------- */

/* ============== HEADER ============== */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--vq-z-header);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--vq-color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vq-space-5);
  padding-block: var(--vq-space-3);
  min-height: 68px;
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: calc(-1 * clamp(1rem, 4vw, 2rem)); /* pull logo flush to the left edge (cancels the container's left padding) */
}
.site-header__brand-text {
  font-family: var(--vq-font-display);
  font-size: var(--vq-text-lg);
  font-weight: var(--vq-weight-bold);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--vq-color-ink);
}
.site-header__inner .site-header__brand img,
.site-header__inner .site-header__brand .custom-logo {
  height: 28px;
  max-height: 28px;
  width: auto;
}

/* Nav */
.site-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}
.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--vq-space-6);
}
.site-nav__list a {
  font-family: var(--vq-font-body);
  font-size: var(--vq-text-sm);
  font-weight: var(--vq-weight-medium);
  color: var(--vq-color-ink);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color var(--vq-duration) var(--vq-ease);
}
.site-nav__list a:hover {
  color: var(--vq-color-primary);
}

/* ====== Mega menu ====== */
.site-nav__item--has-mega { position: static; }
.site-nav__chev {
  display: inline-block;
  margin-left: 4px;
  transition: transform var(--vq-duration) var(--vq-ease);
  vertical-align: -2px;
}
.site-nav__item--has-mega:hover .site-nav__chev,
.site-nav__item--has-mega:focus-within .site-nav__chev { transform: rotate(180deg); }
.site-nav__submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  line-height: 0;
}

.mega {
  position: absolute;
  top: calc(100% + 14px);   /* gap so the panel doesn't sit flush against the header */
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(1080px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid var(--vq-color-border);
  border-radius: var(--vq-radius-lg);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12), 0 4px 14px rgba(15, 23, 42, 0.06);
  padding: var(--vq-space-6);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms var(--vq-ease),
              transform 180ms var(--vq-ease),
              visibility 0s linear 180ms;
  z-index: var(--vq-z-header);
}
.site-nav__item--has-mega { position: relative; display: flex; align-items: center; }
/* Invisible hover bridge - extends the parent li's hover hitbox downward
   so the mouse can travel from "Services" link → the dropdown card without
   losing :hover state. Sits inside the parent li so hover doesn't break. */
.site-nav__item--has-mega::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: min(1080px, calc(100vw - 32px));
  height: 24px;
  pointer-events: none;
}
.site-nav__item--has-mega:hover::after,
.site-nav__item--has-mega:focus-within::after { pointer-events: auto; }
.site-nav__item--has-mega:hover .mega,
.site-nav__item--has-mega:focus-within .mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 180ms var(--vq-ease),
              transform 180ms var(--vq-ease),
              visibility 0s linear 0s;
}

.mega__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--vq-space-2);
  margin-bottom: var(--vq-space-4);
}
@media (max-width: 1100px) { .mega__grid { grid-template-columns: 1fr; } }

.mega__item {
  display: flex;
  align-items: flex-start;
  gap: var(--vq-space-3);
  padding: var(--vq-space-3) var(--vq-space-4);
  border-radius: var(--vq-radius-md);
  color: var(--vq-color-ink);
  text-decoration: none;
  transition: background var(--vq-duration) var(--vq-ease);
}
.mega__item:hover { background: var(--vq-color-bg-soft); color: var(--vq-color-ink); }
.mega__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--vq-radius-sm);
  flex-shrink: 0;
}
.mega__icon--blue   { background: #DBEAFE; color: #2563EB; }
.mega__icon--purple { background: #EDE9FE; color: #7C3AED; }
.mega__icon--pink   { background: #FCE7F3; color: #DB2777; }
.mega__icon--green  { background: #D1FAE5; color: #059669; }
.mega__icon--orange { background: #FFEDD5; color: #EA580C; }
.mega__icon--sky    { background: #E0F2FE; color: #0284C7; }
.mega__icon--yellow { background: #FEF3C7; color: #D97706; }
.mega__icon--teal   { background: #CCFBF1; color: #0D9488; }
.mega__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mega__text strong {
  font-family: var(--vq-font-display);
  font-size: var(--vq-text-base);
  font-weight: var(--vq-weight-semibold);
  color: var(--vq-color-ink);
  letter-spacing: -0.005em;
}
.mega__text em {
  font-style: normal;
  font-size: var(--vq-text-sm);
  color: var(--vq-color-muted);
  line-height: 1.45;
}

.mega__footer {
  border-top: 1px solid var(--vq-color-border);
  padding-top: var(--vq-space-4);
  display: flex;
  justify-content: flex-end;
}
.mega__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--vq-space-2);
  font-family: var(--vq-font-display);
  font-size: var(--vq-text-sm);
  font-weight: var(--vq-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--vq-color-primary);
  text-decoration: none;
  padding: var(--vq-space-2) var(--vq-space-3);
  border-radius: var(--vq-radius-sm);
  transition: background var(--vq-duration) var(--vq-ease), gap var(--vq-duration) var(--vq-ease);
}
.mega__cta:hover { background: var(--vq-color-bg-soft); gap: var(--vq-space-3); }

/* Mobile: mega becomes a simple list within the open drawer.
   These selectors MUST include :hover / :focus-within, otherwise those
   higher-specificity desktop rules keep their translateX(-50%) and shove
   the panel off-screen to the left the moment Services is tapped/focused. */
@media (max-width: 880px) {
  .mega,
  .site-nav__item--has-mega:hover .mega,
  .site-nav__item--has-mega:focus-within .mega {
    position: static;
    inset: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    border: 0;
    background: transparent;
    border-radius: 0;
    display: none;          /* collapsed by default; JS toggles .is-open to open it */
    padding: 0;
  }
  .site-nav__item--has-mega.is-open .mega { display: block; padding: 0 0 var(--vq-space-3); }

  /* Services row: text link fills the left, chevron toggle sits on the far right */
  .site-nav__item--has-mega { flex-wrap: wrap; }
  .site-nav__item--has-mega .site-nav__toggle-mega { flex: 1 1 auto; }
  .site-nav__submenu-toggle { margin-left: auto; align-self: stretch; padding-inline: var(--vq-space-5); }
  .mega { flex-basis: 100%; }

  /* Chevron: down when closed, up when open — driven by .is-open only (not hover/focus) */
  .site-nav__item--has-mega:hover .site-nav__chev,
  .site-nav__item--has-mega:focus-within .site-nav__chev { transform: none; }
  .site-nav__item--has-mega.is-open .site-nav__chev { transform: rotate(180deg); }
  .site-nav__item--has-mega::after { display: none; }   /* kill the desktop hover bridge */
  .mega__grid { grid-template-columns: 1fr; gap: 0; margin: 0; }
  .mega__item {
    padding: var(--vq-space-3) var(--vq-space-5) var(--vq-space-3) var(--vq-space-6);
    border-radius: 0;
  }
  .mega__footer { display: none; }
}

/* Mobile menu toggle (hamburger) */
.site-nav__toggle {
  display: none;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  border-radius: var(--vq-radius-sm);
}
.site-nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--vq-color-ink);
  transition: transform var(--vq-duration) var(--vq-ease),
              opacity var(--vq-duration) var(--vq-ease);
}
.site-nav__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-nav__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.site-nav__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* CTA in header - black like production */
.site-header__cta {
  flex-shrink: 0;
  padding: 0.75em 1.4em;
  font-size: var(--vq-text-sm);
  background: var(--vq-color-ink);
  border-color: var(--vq-color-ink);
  color: #fff;
}
.site-header__cta:hover {
  background: var(--vq-color-primary);
  border-color: var(--vq-color-primary);
  color: #fff;
}

/* ---- Header mobile ---- */
@media (max-width: 880px) {
  /* Keep the nav element (and its toggle) IN the bar; only the menu list
     slides down. Previously .site-nav itself slid off-screen, taking the
     hamburger with it, so there was nothing to tap. */
  .site-nav {
    position: static;
    flex: 0 0 auto;
    justify-content: flex-end;
    margin-left: auto;
  }
  .site-nav__toggle {
    display: flex;
    order: 3;
  }
  .site-header__cta {
    display: none;
  }

  /* The menu list becomes the slide-down drawer (anchored to .site-header) */
  .site-nav__list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--vq-space-3) 0 var(--vq-space-4);
    background: #fff;
    border-bottom: 1px solid var(--vq-color-border);
    box-shadow: 0 24px 40px rgba(15, 23, 42, 0.10);
    max-height: calc(100vh - 68px);
    max-height: calc(100dvh - 68px);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(-115%);
    transition: transform var(--vq-duration-lg) var(--vq-ease), visibility 0s linear var(--vq-duration-lg);
    pointer-events: none;
    visibility: hidden;
  }
  .site-nav.is-open .site-nav__list {
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    transition: transform var(--vq-duration-lg) var(--vq-ease);
  }
  .site-nav__list > li {
    border-top: 1px solid var(--vq-color-border);
  }
  .site-nav__list > li:first-child { border-top: 0; }
  .site-nav__list a {
    display: block;
    padding: var(--vq-space-4) var(--vq-space-5);
    font-size: var(--vq-text-base);
  }
}

/* ============== FOOTER (light theme - matches production) ============== */
.site-footer {
  background: var(--vq-color-bg-soft);
  color: var(--vq-color-ink);
  margin-top: 0;
  border-top: 3px solid var(--vq-color-primary);
}

/* ---- Newsletter strip ---- */
.site-footer__newsletter {
  background: #fff;
  border-bottom: 1px solid var(--vq-color-border);
  border-top: 1px solid var(--vq-color-border);
  padding-block: var(--vq-space-7);
}
.site-footer__newsletter-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--vq-space-7);
  align-items: center;
}
.site-footer__newsletter-title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: var(--vq-weight-bold);
  letter-spacing: -0.01em;
  color: var(--vq-color-secondary);
  margin: 0 0 var(--vq-space-2);
}
.site-footer__newsletter-sub {
  font-size: var(--vq-text-base);
  color: var(--vq-color-muted);
  margin: 0;
  max-width: 46ch;
  line-height: var(--vq-leading-base);
}
.site-footer__newsletter-form {
  display: flex;
  gap: var(--vq-space-3);
  align-items: stretch;
}
.site-footer__newsletter-form input[type="email"] {
  flex-grow: 1;
  min-width: 0;
  padding: 0.95em 1.15em;
  font-size: var(--vq-text-base);
  font-family: var(--vq-font-body);
  border: 1px solid var(--vq-color-border);
  border-radius: var(--vq-radius-md);
  color: var(--vq-color-ink);
  background: #fff;
  transition: border-color var(--vq-duration) var(--vq-ease), box-shadow var(--vq-duration) var(--vq-ease);
}
.site-footer__newsletter-form input[type="email"]::placeholder { color: var(--vq-color-subtle); }
.site-footer__newsletter-form input[type="email"]:focus {
  outline: none;
  border-color: var(--vq-color-primary);
  box-shadow: 0 0 0 3px rgba(0, 78, 235, 0.12);
}
.site-footer__newsletter-form .btn {
  flex-shrink: 0;
  padding: 0.95em 1.5em;
  font-size: var(--vq-text-base);
}

@media (max-width: 880px) {
  .site-footer__newsletter-inner { grid-template-columns: 1fr; gap: var(--vq-space-5); }
  .site-footer__newsletter-form { flex-direction: column; gap: var(--vq-space-3); }
}

/* ---- Main 4-column grid ---- */
.site-footer__main { padding-block: clamp(var(--vq-space-9), 8vw, var(--vq-space-11)); }
.site-footer__inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: clamp(var(--vq-space-6), 4vw, var(--vq-space-8));
  align-items: start;
}
.site-footer__col { display: flex; flex-direction: column; }
@media (max-width: 1000px) {
  .site-footer__inner { grid-template-columns: repeat(2, 1fr); gap: var(--vq-space-8); }
  .site-footer__brand-col { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .site-footer__inner { grid-template-columns: 1fr; }
}

.site-footer__logo {
  font-family: var(--vq-font-display);
  font-size: clamp(2rem, 3vw, 2.5rem);
  font-weight: var(--vq-weight-bold);
  color: var(--vq-color-secondary);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: var(--vq-space-4);
  text-decoration: none;
}
.site-footer__logo img { display: block; height: 24px; width: auto; }

.site-footer__tagline {
  color: var(--vq-color-muted);
  font-size: var(--vq-text-base);
  max-width: 42ch;
  line-height: var(--vq-leading-base);
  margin: 0;
}
.site-footer__tagline strong { color: var(--vq-color-ink); }

.site-footer__col-title {
  position: relative;
  font-size: var(--vq-text-xl);
  font-weight: var(--vq-weight-bold);
  letter-spacing: -0.01em;
  color: var(--vq-color-secondary);
  margin: 0 0 var(--vq-space-5);
  padding-bottom: var(--vq-space-3);
}
.site-footer__col-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--vq-color-primary);
}

.site-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--vq-space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__list a {
  display: inline-block;
  color: var(--vq-color-muted);
  font-size: var(--vq-text-base);
  text-decoration: none;
  transition: color var(--vq-duration) var(--vq-ease), transform var(--vq-duration) var(--vq-ease);
}
.site-footer__list a:hover {
  color: var(--vq-color-primary);
  transform: translateX(3px);
}
.site-footer__list--contact li {
  display: flex;
  align-items: center;
  gap: var(--vq-space-3);
  color: var(--vq-color-muted);
  font-size: var(--vq-text-base);
}
.site-footer__list--contact li svg { color: var(--vq-color-primary); flex-shrink: 0; }

/* Connect column - social icons + scheduling card */
.site-footer__address {
  display: flex;
  align-items: center;
  gap: var(--vq-space-2);
  font-size: var(--vq-text-sm);
  color: var(--vq-color-muted);
  margin: 0 0 var(--vq-space-4);
}
.site-footer__address svg { color: var(--vq-color-primary); }

.site-footer__socials {
  display: flex;
  gap: var(--vq-space-2);
  list-style: none;
  margin: 0 0 var(--vq-space-5);
  padding: 0;
}
.site-footer__socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--vq-radius-sm);
  background: #fff;
  color: var(--vq-color-ink);
  border: 1px solid var(--vq-color-border);
  transition: background var(--vq-duration) var(--vq-ease),
              color var(--vq-duration) var(--vq-ease),
              border-color var(--vq-duration) var(--vq-ease),
              transform var(--vq-duration) var(--vq-ease);
}
.site-footer__socials a:hover {
  background: var(--vq-color-primary);
  color: #fff;
  border-color: var(--vq-color-primary);
  transform: translateY(-2px);
}

.site-footer__cta-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vq-space-3);
  padding: var(--vq-space-4) var(--vq-space-5);
  background: var(--vq-color-secondary);
  color: #fff;
  border-radius: var(--vq-radius-md);
  text-decoration: none;
  transition: background var(--vq-duration) var(--vq-ease),
              transform var(--vq-duration) var(--vq-ease);
}
.site-footer__cta-card:hover {
  background: var(--vq-color-primary);
  color: #fff;
  transform: translateY(-2px);
}
.site-footer__cta-text { display: flex; flex-direction: column; gap: 2px; }
.site-footer__cta-text strong {
  font-family: var(--vq-font-display);
  font-size: var(--vq-text-sm);
  font-weight: var(--vq-weight-semibold);
  color: #fff;
  white-space: nowrap;
}
.site-footer__cta-text em {
  font-style: normal;
  font-size: var(--vq-text-xs);
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}
.site-footer__cta-card svg { color: #fff; flex-shrink: 0; }

/* ---- Bottom bar ---- */
.site-footer__bottom {
  border-top: 1px solid var(--vq-color-border);
  padding-block: var(--vq-space-5);
}
.site-footer__bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--vq-space-4);
  flex-wrap: wrap;
}
.site-footer__copyright,
.site-footer__legal {
  margin: 0;
  font-size: var(--vq-text-sm);
  color: var(--vq-color-muted);
}
.site-footer__copyright-mark {
  font-weight: var(--vq-weight-bold);
  color: var(--vq-color-secondary);
  letter-spacing: -0.01em;
  margin-right: var(--vq-space-2);
}

/* ============== 404 ============== */
.page-404 {
  padding-block: clamp(var(--vq-space-9), 12vw, var(--vq-space-12));
  text-align: center;
}
.page-404 .eyebrow { color: var(--vq-color-primary); }
.page-404__title { margin-bottom: var(--vq-space-4); }
.page-404__lead { font-size: var(--vq-text-lg); margin-bottom: var(--vq-space-7); max-width: 50ch; margin-inline: auto; }
.page-404__actions { display: flex; gap: var(--vq-space-3); justify-content: center; flex-wrap: wrap; }