/* ==========================================================================
   site.css — additions on top of the ported Webflow stylesheet.
   Self-hosted fonts, and CSS/JS replacements for behaviors that were
   previously provided by webflow.js (nav, tabs, accordions, fade-ins).
   ========================================================================== */

/* Inter (body font) — self-hosted variable font, replaces Google Fonts */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Entrance animations (replaces Webflow IX2 fade/slide-ins) ---------- */
.w-mod-js [data-anim] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.w-mod-js [data-anim].anim-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .w-mod-js [data-anim] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --- Mobile nav (replaces webflow.js w-nav behavior) -------------------- */
.menu-button {
  background: none;
  border: 0;

  /* Feeds currentColor into the hamburger SVG. Left as #fff this renders
     white-on-white in light mode — an invisible control, not just a faint one. */
  color: var(--text-primary);
  cursor: pointer;
}
.menu-icon-svg { display: block; }

.menu-icon-svg .menu-line {
  transition: transform 0.3s ease, opacity 0.2s ease;
  transform-origin: 13px 10px;
}

.menu-button.w--open .menu-line-1 {
  transform: translateY(8px) rotate(45deg);
  transform-origin: 13px 2px;
}

.menu-button.w--open .menu-line-2 { opacity: 0; }

.menu-button.w--open .menu-line-3 {
  transform: translateY(-8px) rotate(-45deg);
  transform-origin: 13px 18px;
}
.nav-menu-wrapper[data-nav-menu-open] { background: none; }

@media (width <= 991px) {
  .nav-menu-wrapper[data-nav-menu-open] {
    background-color: var(--surface-raised);
    background-image: linear-gradient(var(--scrim-raised-faint) 62%, var(--overlay-fill-strong));
    border: 1px solid var(--overlay-hairline);
    text-align: start;
    padding: 20px;
  }
}

/* --- FAQ accordions (replaces webflow.js w-dropdown behavior) ----------- */
.w-mod-js .single-faq .answer {
  /* stylelint-disable-next-line csstools/use-logical -- site.js animates el.style.height; keep the pair physical */
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}
.single-faq .answer.w--open { display: flex; }

.faq-icon-svg {
  /* Feeds currentColor into the accordion plus-icon SVG — same invisible-icon
     failure as .menu-button if left literal. */
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}
.single-faq.w--open .faq-icon-svg { transform: rotate(45deg); }
.single-faq .question { cursor: pointer; }

/* --- Tabs (replaces webflow.js w-tabs behavior) ------------------------- */
.w-tab-pane.w--tab-active { animation: tab-fade-in 0.3s ease; }

@keyframes tab-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --- Installer checksums (foundation cycle, plan U3/KD6) ---------------- */

/* The feature rows are flex; let the checksum wrap onto its own full-width
   line under the installer link instead of squeezing beside it. */
.single-changelog-feature { flex-wrap: wrap; }

.checksum-line {
  flex-basis: 100%;
  order: 99; /* after every link in the row, so companion links stay inline */
  font-size: 12px;
  margin-block: 0 4px;
  margin-inline-start: 24px; /* icon width + gap, aligns under the link text */
  overflow-wrap: anywhere;
}

.checksum-hex {
  font-family: ui-monospace, sfmono-regular, Menlo, monospace;
  user-select: all;
}