/* 20260831 UI stability: contact tabs, Academy heading, route footer guard. */

/* Keep the footer below the viewport while the SPA swaps external route hosts. */
html[data-jnm-route-transition="true"] #root main[data-component-file="layout.tsx"] {
  min-height: 100vh !important;
  min-height: 100svh !important;
}

/* The four Contact service tabs share one geometry and one active treatment. */
#root main[data-component-file="Contact.tsx"] nav[data-contact-service-tabs] a[href^="/contact"] {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 104px !important;
  min-width: 104px !important;
  height: 44px !important;
  padding: 0 16px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: #f1f5fb !important;
  color: #20364f !important;
  box-shadow: none !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transform: none !important;
  transition: background-color 160ms ease, color 160ms ease,
    border-color 160ms ease, box-shadow 180ms ease !important;
}

#root main[data-component-file="Contact.tsx"] nav[data-contact-service-tabs] a[href^="/contact"][class*="bg-gradient-to-r"],
#root main[data-component-file="Contact.tsx"] nav[data-contact-service-tabs] a[href^="/contact"][aria-current="page"],
#root main[data-component-file="Contact.tsx"] nav[data-contact-service-tabs] a[href^="/contact"].is-active {
  border-color: transparent !important;
  background: linear-gradient(105deg, #b84b0f 0%, #9a6500 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(154, 74, 15, 0.2) !important;
  transform: none !important;
}

#root main[data-component-file="Contact.tsx"] nav[data-contact-service-tabs] a[href^="/contact"]:focus-visible {
  outline: 3px solid #2f72c9 !important;
  outline-offset: 3px !important;
}

/* Match the strong title hierarchy already used by the Downloads page. */
main[data-jnm-external-route-host][data-owner="technical-academy"] .academy-hub__hero h1 {
  font-weight: 800 !important;
}

@media (hover: hover) and (pointer: fine) {
  #root main[data-component-file="Contact.tsx"] nav[data-contact-service-tabs] a[href^="/contact"]:not([class*="bg-gradient-to-r"]):not([aria-current="page"]):not(.is-active):hover {
    border-color: #c9d7e8 !important;
    background: #e7eef8 !important;
    color: #143452 !important;
  }
}