/* CryptoFrame — layout: containers, the content/sidebar grid, header and
   footer scaffolding. */

.cfx-container {
  width: 100%;
  max-width: var(--cfx-container);
  margin-inline: auto;
  padding-inline: var(--cfx-gutter);
}
.cfx-container--wide { max-width: calc(var(--cfx-container) + 160px); }
.cfx-container--full { max-width: none; }

.cfx-site { display: flex; flex-direction: column; min-height: 100vh; }
.cfx-main { flex: 1 0 auto; padding-block: clamp(1.5rem, 3vw, 2.6rem); }

.cfx-layout { display: block; }

@media (min-width: 1025px) {
  /*
   * `align-items: stretch`, not `start`.
   *
   * A sticky element travels inside its containing block. With `start` the
   * sidebar column shrinks to its own content, so `position: sticky` on the
   * inner wrapper has zero room to move and the column simply scrolls away —
   * the same containing-block mistake that stopped the header sticking.
   * Stretching the column to the height of the article gives the inner wrapper
   * the full length of the article to travel through.
   */
  .cfx-has-sidebar .cfx-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--cfx-sidebar-width);
    gap: calc(var(--cfx-gutter) * 1.6);
    align-items: stretch;
  }
  .cfx-has-sidebar .cfx-sidebar { min-width: 0; height: 100%; }
  .cfx-has-sidebar.cfx-sidebar-pos-left .cfx-layout { grid-template-columns: var(--cfx-sidebar-width) minmax(0, 1fr); }
  .cfx-has-sidebar.cfx-sidebar-pos-left .cfx-content { order: 2; }
  .cfx-has-sidebar.cfx-sidebar-pos-left .cfx-sidebar { order: 1; }
}

.cfx-content { min-width: 0; }

.cfx-sidebar__inner { display: grid; gap: 1.4rem; }

@media (min-width: 1025px) {
  .cfx-sidebar--sticky .cfx-sidebar__inner {
    position: sticky;
    /* Cleared by the sticky header when one is active — theme.js writes the
       resolved value, this is the fallback. */
    top: var(--cfx-sticky-offset, 96px);
    /* A sticky box taller than the viewport can never finish scrolling into
       view; capping it and allowing overflow keeps the last block reachable. */
    max-height: calc(100vh - var(--cfx-sticky-offset, 96px) - 1rem);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

@media (max-width: 1024px) {
  .cfx-sidebar--tablet-hide { display: none; }
  .cfx-sidebar--tablet-below { margin-top: 2.4rem; }
}
@media (max-width: 782px) {
  .cfx-sidebar--mobile-hide { display: none; }
}

/* ---------- Header ---------- */

.cfx-header { position: relative; z-index: 100; }

.cfx-topbar {
  background: var(--cfx-topbar-bg);
  color: var(--cfx-topbar-text);
  font-size: var(--cfx-fs-xs);
}
.cfx-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2.3rem;
}
.cfx-topbar a { color: inherit; text-decoration: none; opacity: .92; }
.cfx-topbar a:hover { opacity: 1; text-decoration: underline; }
.cfx-topbar__left { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.cfx-topbar__breaking { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.cfx-topbar__breaking a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfx-topbar__flag {
  padding: .1rem .45rem;
  background: var(--cfx-danger);
  color: #fff;
  border-radius: 2px;
  font-family: var(--cfx-font-label);
  font-size: var(--cfx-fs-xs);
  letter-spacing: var(--cfx-ls-label);
  text-transform: uppercase;
}
.cfx-topbar__right { display: flex; align-items: center; gap: 1rem; }
.cfx-topbar__menu { display: flex; gap: .9rem; margin: 0; padding: 0; list-style: none; }

.cfx-headmain {
  background: var(--cfx-header-bg);
  color: var(--cfx-header-text);
  border-bottom: var(--cfx-border-width) solid var(--cfx-hairline);
}
.cfx-headmain__inner {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  min-height: 4.1rem;
}

/*
 * Sticky header.
 *
 * `position: sticky` on the main row does nothing here: a sticky element moves
 * within its containing block, and .cfx-header is never taller than its own
 * content, so there is no room to travel and the row scrolls away like any
 * other. The row is therefore promoted to `position: fixed` once it reaches the
 * top, and a spacer of matching height is inserted so the page does not jump by
 * the header's height at the moment it detaches.
 */
.cfx-header__spacer { display: none; }
.cfx-has-sticky-header .cfx-header__spacer.is-active { display: block; }

.cfx-has-sticky-header .cfx-headmain.is-stuck {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--cfx-header-bg);
  box-shadow: var(--cfx-shadow-2);
  animation: cfx-drop-in .22s ease;
}

/* The admin bar is itself fixed, so the header has to clear it. */
.admin-bar.cfx-has-sticky-header .cfx-headmain.is-stuck { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar.cfx-has-sticky-header .cfx-headmain.is-stuck { top: 46px; }
}
@media screen and (max-width: 600px) {
  /* Below 600px the admin bar stops being fixed and scrolls with the page. */
  .admin-bar.cfx-has-sticky-header .cfx-headmain.is-stuck { top: 0; }
}

/* A floating header keeps its pill shape when stuck. */
.cfx-header-floating.cfx-has-sticky-header .cfx-headmain.is-stuck { background: transparent; box-shadow: none; }
.cfx-header-floating.cfx-has-sticky-header .cfx-headmain.is-stuck .cfx-headmain__inner { box-shadow: var(--cfx-shadow-3); }

@keyframes cfx-drop-in { from { transform: translateY(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cfx-has-sticky-header .cfx-headmain.is-stuck { animation: none; }
}
.cfx-motion-reduced .cfx-has-sticky-header .cfx-headmain.is-stuck { animation: none; }

.cfx-brand { flex: 0 0 auto; }
.cfx-brand__text { display: block; text-decoration: none; color: inherit; }
.cfx-brand__name {
  display: block;
  font-family: var(--cfx-font-heading);
  font-size: var(--cfx-fs-2);
  font-weight: var(--cfx-weight-heading);
  letter-spacing: var(--cfx-ls-heading);
  line-height: 1.05;
  color: inherit;
}
.cfx-brand__tag {
  display: block;
  font-family: var(--cfx-font-label);
  font-size: var(--cfx-fs-xs);
  letter-spacing: var(--cfx-ls-label);
  text-transform: var(--cfx-case-label);
  opacity: .7;
}
.cfx-brand img, .custom-logo { max-height: var(--cfx-logo-h, 38px); width: auto; }

.cfx-nav { flex: 1 1 auto; min-width: 0; }
.cfx-nav__list {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin: 0; padding: 0;
  list-style: none;
}
.cfx-nav__list li { position: relative; }
.cfx-nav__list a {
  display: block;
  padding: .55rem .7rem;
  font-family: var(--cfx-font-nav);
  font-size: var(--cfx-fs-sm);
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  border-radius: var(--cfx-radius-button);
  white-space: nowrap;
}

.cfx-nav__list .sub-menu {
  position: absolute;
  top: 100%; left: 0;
  z-index: 20;
  min-width: 12rem;
  margin: 0; padding: .35rem;
  list-style: none;
  background: var(--cfx-card);
  border: var(--cfx-border-width) solid var(--cfx-border);
  border-radius: var(--cfx-radius-card);
  box-shadow: var(--cfx-shadow-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.cfx-nav__list li:hover > .sub-menu,
.cfx-nav__list li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.cfx-nav__list .sub-menu a { color: var(--cfx-text); }

/* Navigation styles */
.cfx-nav-underline .cfx-nav__list > li > a { border-radius: 0; border-bottom: 2px solid transparent; }
.cfx-nav-underline .cfx-nav__list > li > a:hover,
.cfx-nav-underline .cfx-nav__list > .current-menu-item > a { border-bottom-color: var(--cfx-primary); color: var(--cfx-primary); }

.cfx-nav-pill .cfx-nav__list > li > a { border-radius: var(--cfx-radius-pill); }
.cfx-nav-pill .cfx-nav__list > li > a:hover,
.cfx-nav-pill .cfx-nav__list > .current-menu-item > a { background: rgba(var(--cfx-primary-rgb), .14); color: var(--cfx-primary); }

.cfx-nav-block .cfx-nav__list > li > a { border-radius: 0; }
.cfx-nav-block .cfx-nav__list > li > a:hover,
.cfx-nav-block .cfx-nav__list > .current-menu-item > a { background: var(--cfx-primary); color: var(--cfx-on-primary); }

.cfx-nav-plain .cfx-nav__list > li > a:hover { color: var(--cfx-primary); }

/* Header styles */
.cfx-header-glass .cfx-headmain {
  background: var(--cfx-glass-bg);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
.cfx-header-floating .cfx-headmain {
  background: transparent;
  border-bottom: 0;
}
.cfx-header-floating .cfx-headmain__inner {
  margin-block: .7rem;
  padding: .5rem 1rem;
  background: var(--cfx-card);
  border: var(--cfx-border-width) solid var(--cfx-border);
  border-radius: var(--cfx-radius-pill);
  box-shadow: var(--cfx-shadow-2);
}
.cfx-header-minimal .cfx-headmain { border-bottom: 0; }

.cfx-headmain__actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.cfx-iconbtn--menu { display: none; }

.cfx-searchpanel {
  padding: 1rem 0 1.2rem;
  background: var(--cfx-surface);
  border-bottom: var(--cfx-border-width) solid var(--cfx-border);
}

@media (max-width: 1024px) {
  .cfx-nav--collapse-tablet { display: none; }
  .cfx-iconbtn--menu { display: inline-flex; }
}
@media (max-width: 782px) {
  .cfx-nav { display: none; }
  .cfx-iconbtn--menu { display: inline-flex; }
  .cfx-headmain__cta { display: none; }
}

/* ---------- Mobile navigation ---------- */

.cfx-mobilenav { position: fixed; inset: 0; z-index: 300; }
.cfx-mobilenav__scrim {
  position: absolute; inset: 0;
  border: 0;
  background: rgba(0,0,0,.5);
  cursor: pointer;
}
.cfx-mobilenav__panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(22rem, 88vw);
  padding: 1.2rem;
  overflow-y: auto;
  background: var(--cfx-background);
  border-left: var(--cfx-border-width) solid var(--cfx-border);
  box-shadow: var(--cfx-shadow-3);
  animation: cfx-slide-in .22s ease;
}
@keyframes cfx-slide-in { from { transform: translateX(14px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cfx-mobilenav__panel { animation: none; } }

.cfx-mobilenav__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.cfx-mobilenav__brand { font-family: var(--cfx-font-heading); font-weight: var(--cfx-weight-heading); }
.cfx-mobilenav__list { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.cfx-mobilenav__list li { border-bottom: 1px solid var(--cfx-border); }
.cfx-mobilenav__list a { display: block; padding: .8rem .2rem; color: var(--cfx-heading); text-decoration: none; font-family: var(--cfx-font-nav); }
.cfx-mobilenav__list .sub-menu { list-style: none; margin: 0 0 .4rem .8rem; padding: 0; }
.cfx-mobilenav__list--utility a { font-size: var(--cfx-fs-sm); color: var(--cfx-muted); }

/* ---------- Footer ---------- */

.cfx-footer {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  background: var(--cfx-footer-bg);
  color: var(--cfx-footer-text);
}
/*
 * Footer links behave like the header's nav buttons rather than like body
 * links: a tinted pill on hover, with the label going to full contrast.
 *
 * The previous treatment tinted the label with the accent colour, which read as
 * a deliberate choice but measured 4.20:1 on the web3 preset and 3.38:1 on
 * markets — both under AA, and both looking washed-out rather than active. The
 * label now moves toward the footer's maximum-contrast foreground instead, and
 * the pill carries the brand colour where it costs no legibility.
 *
 * `:visited` is declared explicitly as a guard. Author rules already beat the
 * user-agent default, so this is belt and braces rather than a fix — the purple
 * that prompted the change was the accent hover, not a visited link.
 */
.cfx-footer a { color: inherit; text-decoration: none; }
.cfx-footer a:visited { color: inherit; }

.cfx-footer__links a,
.cfx-footer .widget li a,
.cfx-footbottom__menu a {
  display: inline-block;
  padding: .18rem .55rem;
  margin-inline: -.55rem;
  border-radius: var(--cfx-radius-button);
  transition: background-color .16s ease, color .16s ease;
}

.cfx-footer__links a:hover,
.cfx-footer__links a:focus-visible,
.cfx-footer .widget li a:hover,
.cfx-footer .widget li a:focus-visible,
.cfx-footbottom__menu a:hover,
.cfx-footbottom__menu a:focus-visible {
  background: rgba(var(--cfx-primary-rgb), .18);
  color: var(--cfx-footer-strong);
  text-decoration: none;
}

/* Prose links in the about column keep an underline — there is no pill to make
   them look interactive. */
.cfx-footer__about a:hover,
.cfx-footer__col--custom a:hover {
  color: var(--cfx-footer-strong);
  text-decoration: underline;
}
.cfx-footer h2 { color: inherit; }

.cfx-footer__body { padding-block: clamp(2rem, 4vw, 3.2rem); }
/*
 * Footer columns.
 *
 * The previous declaration was `1.4fr repeat(auto-fit, minmax(9rem, 1fr))`,
 * which is invalid: repeat(auto-fit) may not be combined with a flexible track,
 * so browsers discarded the whole declaration and the footer silently stayed in
 * one column at every width. The column counts are explicit now.
 */
.cfx-footer__grid { display: grid; gap: 2rem 2.4rem; grid-template-columns: 1fr; }

@media (min-width: 700px) {
  .cfx-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cfx-footer__about { grid-column: 1 / -1; }
}

@media (min-width: 1025px) {
  /* The about block takes a wider first track; the rest divide what is left. */
  .cfx-footer__grid--cols-1 { grid-template-columns: minmax(0, 1fr); }
  .cfx-footer__grid--cols-2 { grid-template-columns: 1.5fr minmax(0, 1fr); }
  .cfx-footer__grid--cols-3 { grid-template-columns: 1.5fr repeat(2, minmax(0, 1fr)); }
  .cfx-footer__grid--cols-4 { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); }
  .cfx-footer__grid--cols-1 .cfx-footer__about,
  .cfx-footer__grid--cols-2 .cfx-footer__about,
  .cfx-footer__grid--cols-3 .cfx-footer__about,
  .cfx-footer__grid--cols-4 .cfx-footer__about { grid-column: auto; }
}

.cfx-footer__about { min-width: 0; }
.cfx-footer__col { min-width: 0; }
.cfx-footer__col--custom > * { max-width: 100%; }
.cfx-footer__logo img { max-height: 44px; width: auto; margin-bottom: .7rem; }

.cfx-footer__brand { font-family: var(--cfx-font-heading); font-size: var(--cfx-fs-2); color: inherit; margin-bottom: .5rem; }
.cfx-footer__text { font-size: var(--cfx-fs-sm); opacity: .82; max-width: 34ch; }
.cfx-footer__links, .cfx-footer .widget ul { list-style: none; margin: 0; padding: 0; }
.cfx-footer__links li, .cfx-footer .widget li { padding: .28rem 0; font-size: var(--cfx-fs-sm); }
.cfx-footer-widget__title {
  font-family: var(--cfx-font-label);
  font-size: var(--cfx-fs-sm);
  letter-spacing: var(--cfx-ls-label);
  text-transform: var(--cfx-case-label);
  margin-bottom: .7rem;
}

.cfx-footer-compact .cfx-footer__grid { grid-template-columns: 1fr; text-align: center; }
.cfx-footer-centred .cfx-footer__grid { text-align: center; justify-items: center; }

.cfx-footercta {
  padding-block: 1.6rem;
  background: rgba(var(--cfx-primary-rgb), .12);
  border-bottom: 1px solid var(--cfx-hairline);
}
.cfx-footercta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.cfx-footercta__text { font-family: var(--cfx-font-heading); font-size: var(--cfx-fs-2); color: var(--cfx-footer-text); margin: 0; }

.cfx-footbottom { padding-block: 1rem; border-top: 1px solid var(--cfx-hairline); font-size: var(--cfx-fs-xs); }
.cfx-footbottom__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; }
.cfx-footbottom__copy { margin: 0; }
.cfx-footbottom__menu { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.cfx-footbottom__disclaimer { margin-top: .6rem; opacity: .72; max-width: 80ch; }