/* ==========================================================================
   Crypticorn — rebuild.css
   Site chrome measured off production (header, primary navigation, dropdown, footer) so the
   frame around every page is identical to the original. Loads after theme.css on every view.
   ========================================================================== */

/* 1. HEADER ================================================================ */

.site-header {
  height: 91px;
  padding: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background-color .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled:not(.is-top),
.site-header.is-scrolled {
  background: rgba(255, 255, 255, .75);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.site-header.is-hidden { transform: none; }

.site-header > .container {
  max-width: 1600px;
  padding-inline: 90px;
}
.site-header__inner { gap: 0; }

.site-logo img,
.site-logo svg { height: 35px; width: auto; }

/* Primary navigation sits flush right, links 14px/500 with 20px side padding. */
.site-nav { margin-left: auto; gap: 0; }
.nav__list { gap: 0; }
.nav__list > .nav__item > .nav__link {
  padding: 0 20px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: #353535;
}
.site-header.is-top .nav__link { color: #353535; }
.nav__list > .nav__item > .nav__link:hover,
.nav__list > .nav__item > .nav__link[aria-expanded="true"] { color: #003bce; }
.nav__list > .nav__item > .nav__link::after {
  left: 20px;
  right: 20px;
  width: auto;
  bottom: -3px;
  height: 2px;
  background: #003bce;
}
.nav__list > .nav__item.is-current > .nav__link::after { transform: scaleX(1); }
.nav__chevron { display: none; }

/* Social icons: 36px cells, 30px in from the menu, X first like production. */
.header-actions { gap: 0; }
.header-social { margin-left: 30px; gap: 0; }
.header-social a {
  width: 36px;
  height: 23px;
  border-radius: 0;
  color: #353535;
}
.header-social a:hover { background: none; color: #003bce; }
.header-social a svg { width: 15px; height: 15px; }
.header-social a:nth-child(3) { order: -1; }

/* Account is an icon only. */
.header-account {
  margin-left: 40px;
  padding: 0;
  width: 24px;
  height: 24px;
  justify-content: center;
  color: #353535;
}
.header-account:hover { background: none; color: #003bce; }
.header-account svg { width: 20px; height: 20px; }
.header-account > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Dropdown: 280px panel with a top arrow, 10px-spaced pill links with icons. */
.site-nav .nav__submenu {
  left: -70px;
  translate: none;
  transform: translateY(-6px);
  top: calc(100% + 13px);
  width: 280px;
  min-width: 0;
  padding: 10px 20px 20px;
  border-radius: 10px;
  box-shadow: 0 6px 28px rgba(0, 0, 0, .08);
}
.site-nav .nav__submenu::before {
  content: "";
  position: absolute;
  left: 120px;
  bottom: 100%;
  border: 10px solid transparent;
  border-bottom-color: #fff;
}
.site-nav .nav__item--has-children:hover > .nav__submenu,
.site-nav .nav__item--has-children:focus-within > .nav__submenu,
.site-nav .nav__toggle[aria-expanded="true"] + .nav__submenu { transform: translateY(0); }
.site-nav .nav__submenu > .nav__item + .nav__item { margin-top: 10px; }
.site-nav .nav__submenu .nav__link {
  display: grid;
  grid-template-columns: 35px 1fr;
  padding: 10px 15px 5px 10px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 500;
  color: #0a0a0a;
  align-items: center;
  gap: 10px;
}
.site-nav .nav__submenu .nav__link:hover { background: #f3f5fd; color: #003bce; }
.site-nav .nav__submenu .nav__item-icon {
  justify-self: center;
  align-self: center;
  margin-top: 0;
  color: #003bce;
}
/* Two of the product entries use the uploaded marks from production instead of glyphs. */
.site-nav .nav__submenu .nav__item-icon.icon--chart,
.site-nav .nav__submenu .nav__item-icon.icon--network {
  width: 35px;
  height: 35px;
  background: var(--mark) center / contain no-repeat;
}
.site-nav .nav__submenu .nav__item-icon.icon--chart { --mark: url("/wp-content/uploads/2024/05/prediction.svg"); }
.site-nav .nav__submenu .nav__item-icon.icon--network {
  --mark: url("/wp-content/uploads/2024/05/dex.svg");
  background-size: 18px;
}
.site-nav .nav__submenu .nav__item-icon.icon--arrows-v { width: 7px; height: 16px; }
.site-nav .nav__submenu .nav__item-icon.icon--chart path,
.site-nav .nav__submenu .nav__item-icon.icon--network path { display: none; }

@media (max-width: 999px) {
  .site-header { height: 69px; }
  .site-header > .container { max-width: 88%; padding-inline: 0; }
  .site-logo img, .site-logo svg { height: 24px; }
  .header-account { margin-left: 0; width: 41px; height: 45px; }
  .header-account svg { width: 19px; height: 19px; }
  .nav-toggle { width: 50px; height: 45px; }
}
@media (max-width: 500px) {
  .site-header > .container { max-width: 100%; padding-inline: 10vw; }
}

/* 2. FOOTER ================================================================ */

.site-footer { background: #f3f5fd; color: #555; }
.site-footer .sec__cols { row-gap: 0; }
.site-footer .footer_texts,
.site-footer .footer_texts * { font-size: .85rem; line-height: 1.2rem; }
/* The footer column headings are 17.6px/20px on production with a -10px bottom margin, not
   13.6px/19.2px with none -- measured on "Our Products", "Menu" and "Community". The smaller size
   is part of why the footer came out 54px shorter than production's on every page.
   Stated twice: `.site-footer .footer_texts *` is 0,2,0 and outranks a bare `.site-footer h3`, so
   the margin applied while the font-size silently did not. */
.site-footer h3,
.site-footer .footer_texts h3 {
  font-size: 1.1rem;
  line-height: 20px;
  font-weight: 500;
  color: #13182b;
  margin: 0 0 -10px;
}
/* 20.4px above, not 12.5: production wraps its footer heading in a text column with a 20.4px
   bottom margin, which collapses against the divider's own 12.5px. Measured heading-bottom to
   divider it is 11px there against 3px here -- the 8px that left the footer band 202px against
   production's 210. The bottom stays 12.5px, matching its 13px divider-to-list gap. */
.site-footer .rule { height: 1px; border: 0; background: #003bce; margin: 20.4px 0 12.5px; }
.site-footer__mark img { width: 40px; height: auto; display: block; }

.site-footer .fancy { line-height: 1.3; }
/* 30px under each list, as production has: its footer lists measure 136px with a 30px bottom
   margin, giving the 166px sub-columns and the 210px row that the legal blurb sits below. */
/* No top margin: production's footer column list starts 25px below its heading and the block is
   358px tall on every page measured except /pricing/, where a 378/45px reading came from the marker
   matching a taller container. Adding 20px to match that one page put every other footer 20px out. */
.site-footer .fancy ul { list-style: none; margin: 0 0 30px; padding: 0; }
.site-footer .fancy li { position: relative; padding-left: 38px; margin-bottom: 10px; line-height: 1.3em; color: #555; }
.site-footer .fancy li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .15em;
  width: 20px;
  height: 20px;
  color: #003bce;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M2 8h12'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M2 8h12'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}
.site-footer .fancy a { color: #0a1e5c; text-decoration: underline; }
.site-footer .fancy a:hover { color: #003bce; }
/*
 * No negative margin here. -25px pulled the taller of the two Menu sub-columns up, so the footer
 * row measured 147px against its 175px of content and the legal blurb was laid out over the top of
 * the "Disclaimer" link. Production's equivalent sub-columns carry margin 0 and are 166px each,
 * with the row ending flush at the blurb.
 */
.site-footer .list-footer-2 { margin-bottom: 0; }

.site-footer .icon { display: inline-block; line-height: 0; margin-bottom: 5px; }
.site-footer .icon a { display: inline-block; color: #003bce; }
.site-footer .icon a:hover { color: #2ac4ea; }
.site-footer .icon svg { width: 20px; height: 20px; display: block; }

.site-footer__note { background: #f1f3fc; }
.site-footer__note p { color: #3f4756; margin: 0; }
.site-footer__note a { color: #0a1e5c; text-decoration: underline; }

@media (max-width: 999px) {
  .site-footer .sec__cols { row-gap: 25px; }
  .site-footer .list-footer-2 { margin-bottom: 0; }
}
@media (max-width: 690px) {
  /* Production's footer stays inside the same 88% container as the page body below 690 -- its rows
     sit in `.container.normal-container`, 343px at a 390 viewport. Releasing it to 100% here gave
     the footer columns 350px of content against production's 304, so the product list, the menu and
     especially the legal note wrapped onto fewer lines and the whole footer came out 57px short on
     every page -- most of what was left of the phone deficit on the text-only pages once their
     column padding was corrected. 88% + the 20px padding reproduces production's content width to
     within 1px from 390 up to 690 (measured 303 against 304 at 390, 558 against 559 at 680). */
  .site-footer .sec__cols { padding-inline: 20px; max-width: 88%; }
  /* The social row is 49px tall on production against 30 here, the last 19px of the phone footer
     gap. Four of its five cells carry an explicit phone width and so drop the stacking margin; the
     fifth does not and keeps 20px, which stretches the flex line to 29 + 20 and leaves the other
     four centring their icons in it. Matching the height and centring reproduces what four of the
     five cells do; production's odd cell sits 10px higher than its neighbours, which is a fault in
     production's own row rather than something to copy. Scoped with :has so the Menu link row --
     also a .sec--inner, with two unequal columns -- keeps its top alignment. */
  .site-footer .sec--inner > .sec__cols:has(> .col.c-1of5) { min-height: 49px; align-items: center; }
}

/* 3. DRAWER (mobile off-canvas), production values ========================= */

.drawer { padding: 30px; }
.drawer__list .nav__link { font-size: 14px; line-height: 24px; padding: 12px 0; }
.drawer__list .nav__submenu {
  left: auto;
  width: auto;
  padding: 0 0 8px 16px;
}
.drawer__list .nav__submenu::before { display: none; }
.drawer__list .nav__submenu .nav__link {
  display: grid;
  grid-template-columns: 30px 1fr;
  justify-content: start;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-radius: 0;
  font-size: 14px;
  font-weight: 400;
  white-space: normal;
  background: none;
}
.drawer__list .nav__submenu .nav__link:hover { background: none; }
.drawer__list .nav__submenu .nav__link > span { min-width: 0; }
.drawer__list .nav__submenu .nav__item-icon {
  justify-self: center;
  align-self: center;
  margin-top: 0;
}
.drawer__list .nav__item-icon.icon--chart,
.drawer__list .nav__item-icon.icon--network,
.drawer__list .nav__item-icon.icon--arrows-v {
  width: 30px;
  height: 30px;
  background-color: #fff;
  border-radius: 200px;
  padding: 4px;
  box-sizing: border-box;
  color: #003bce;
}
.drawer__list .nav__item-icon.icon--chart,
.drawer__list .nav__item-icon.icon--network { background-size: 22px; }
.drawer__list .nav__item-icon.icon--arrows-v {
  display: block;
  width: 30px;
  height: 30px;
  padding: 7px 11px;
  flex: 0 0 30px;
}

/* 4. PAGE FRAME ============================================================ */

/* The transparent header overlays the content; rebuilt pages carry their own top spacing. */
body.has-transparent-header .header-spacer { display: none; }