/* Viviscus shared UI system | 2026-10-24
   One source of truth for navigation and primary CTA styling.
   Imported AFTER site.css / speaking.css on every page.
   Future pages: use the same header markup and include this stylesheet last.
*/
:root {
  --viviscus-cta-start: #102FF8;
  --viviscus-cta-end: #2F2F9C;
  --viviscus-cta-gradient: linear-gradient(to bottom, var(--viviscus-cta-start), var(--viviscus-cta-end));
}

/* Identical navigation dimensions, typography, and spacing on every page. */
header.nav,
header.site-header.nav {
  height: 96px !important;
  min-height: 96px !important;
  padding: 0 !important;
  background: #ffffff !important;
  border-bottom: 1px solid #d8d9e4 !important;
  position: relative !important;
  z-index: 30 !important;
  box-shadow: none !important;
}
header.nav > .container,
header.site-header.nav > .container {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 1300px !important;
  margin-inline: auto !important;
  padding-inline: 54px !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 22px !important;
}
header.nav .logo,
header.site-header.nav .logo {
  width: 200px !important;
  height: auto !important;
  display: block !important;
  max-width: none !important;
}
header.nav nav.menu,
header.site-header.nav nav.menu {
  display: flex !important;
  align-items: center !important;
  gap: 26px !important;
  font: 700 18px/1.3 Arial, Helvetica, sans-serif !important;
  background: transparent;
}
header.nav nav.menu a:not(.button),
header.site-header.nav nav.menu a:not(.button) {
  font: inherit !important;
  white-space: nowrap;
  padding: 0 !important;
}
header.nav .mobile-menu-toggle,
header.site-header.nav .mobile-menu-toggle {
  display: none !important;
}

/* The same primary CTA appearance on all current and future pages. */
a.button:not(.button--ghost),
button.button:not(.button--ghost),
input.button[type="submit"] {
  box-sizing: border-box;
  background: var(--viviscus-cta-gradient) !important;
  background-color: #102FF8 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 5px !important;
  box-shadow: none !important;
  font: 750 17px/1.2 Arial, Helvetica, sans-serif !important;
  min-height: 50px !important;
  padding: 14px 24px !important;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-decoration: none;
  white-space: normal;
}
a.button:not(.button--ghost):hover,
button.button:not(.button--ghost):hover,
input.button[type="submit"]:hover {
  background: linear-gradient(to bottom, #2846ff, #292989) !important;
  transform: none !important;
  box-shadow: none !important;
}
header.nav nav.menu .button,
header.site-header.nav nav.menu .button {
  min-height: 46px !important;
  height: 46px !important;
  padding: 12px 22px !important;
  font: 750 16px/1.2 Arial, Helvetica, sans-serif !important;
  white-space: nowrap !important;
}
/* Secondary buttons remain outlined, never filled with the CTA gradient. */
a.button--ghost {
  background: transparent !important;
  color: #102FF8 !important;
  border: 1px solid #a4b0ff !important;
  box-shadow: none !important;
}

@media (min-width: 641px) and (max-width: 1150px) {
  header.nav > .container,
  header.site-header.nav > .container { padding-inline: 24px !important; }
  header.nav .logo,
  header.site-header.nav .logo { width: 170px !important; }
  header.nav nav.menu,
  header.site-header.nav nav.menu { gap: 15px !important; font-size: 16px !important; }
  header.nav nav.menu .button,
  header.site-header.nav nav.menu .button { font-size: 15px !important; padding-inline: 16px !important; }
}
@media (max-width: 640px) {
  header.nav,
  header.site-header.nav { height: 76px !important; min-height: 76px !important; }
  header.nav > .container,
  header.site-header.nav > .container { padding-inline: 22px !important; position: relative !important; }
  header.nav .logo,
  header.site-header.nav .logo { width: 147px !important; }
  header.nav .mobile-menu-toggle,
  header.site-header.nav .mobile-menu-toggle {
    display: block !important;
    border: 1px solid #bcc6ef !important;
    border-radius: 4px !important;
    background: #fff !important;
    color: #1824a5 !important;
    padding: 10px 12px !important;
    font: 700 15px Arial, Helvetica, sans-serif !important;
    cursor: pointer;
  }
  header.nav nav.menu,
  header.site-header.nav nav.menu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 18px !important;
    padding: 19px 23px !important;
    background: #fff !important;
    box-shadow: 0 9px 20px rgba(24,33,104,.14) !important;
    z-index: 50 !important;
  }
  header.nav nav.menu.is-open,
  header.site-header.nav nav.menu.is-open { display: flex !important; }
  header.nav nav.menu a:not(.button),
  header.site-header.nav nav.menu a:not(.button) { display: block !important; }
  header.nav nav.menu .button,
  header.site-header.nav nav.menu .button { width: auto !important; height: auto !important; }
}