/* site.css — small overrides that replace webflow.js interactions.
   The Webflow CSS bundle (webflow.css) still provides all base styling; this
   file re-implements the show/hide behaviors that used to be JS-driven, plus
   a few fixes to Webflow's styles. */

/* --- Resources dropdown --- */
.w-dropdown-list { display: none; }
.dropdown:hover .w-dropdown-list,
.w-dropdown-list.is-open { display: block; }
/* Match prod's open dropdown. Prod adds .w--open via JS: on desktop that's a
   white popup (.dropdown-list.w--open, base rule), and on mobile an inline blue
   panel (@media max-width:991px). Ours opens via hover/.is-open without .w--open,
   so replicate both states here (overriding Webflow's default .w-dropdown-list
   background:#ddd). */
@media screen and (min-width: 992px) {
  .nav-content .dropdown-list {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 4px;
    box-shadow: 0 0 12px rgba(0, 0, 0, .05);
    width: 200px;
    padding: 10px;
    position: absolute;
  }
}
@media screen and (max-width: 991px) {
  .nav-content .dropdown-list {
    background-color: var(--main-blue-300);
    box-shadow: none;
    border: none;
    position: relative;
  }
}

/* --- Code blocks --- */
/* Production's Webflow markup renders a blank first line inside <code> (a stray
   leading newline), making the visual top padding ~2.3em, equal to the bottom.
   We emit clean code without that newline, so reproduce the spacing with CSS
   (prism.css sets padding-top: 0.8em). */
pre.highlight { padding-top: 2.3em; }

/* --- Blog scroll progress bar (replacing the webflow.js scroll interaction) --- */
.progress-line { width: 0; }

/* --- Blog/changelog pager: keep label + arrow on one row (Firefox stacks the
   block <div> label above the <svg> without an explicit flex row) --- */
.w-pagination-wrapper .w-pagination-previous,
.w-pagination-wrapper .w-pagination-next {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* --- Mobile nav (Webflow "medium" collapse breakpoint) --- */
.menu-button.w-nav-button { display: none; }

@media screen and (max-width: 991px) {
  .menu-button.w-nav-button { display: block; cursor: pointer; }
  .nav-content.w-nav-menu { display: none; }
  .nav-bar.is-open .nav-content.w-nav-menu {
    display: block;
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: #fff;
    padding: 1rem 1.25rem;
    box-shadow: 0 12px 24px rgba(0, 0, 0, .08);
    z-index: 1000;
  }
}

/* --- Tabs (replacing webflow.js tab switching) --- */
.w-tab-pane { display: none; }
.w-tab-pane.w--tab-active { display: block; }
.w-tab-link { cursor: pointer; }

/* --- FAQ / accordion (pricing) — replaces Webflow IX2 "show-answer" --- */
.question-container .answer { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.question-container.is-open .answer { max-height: 60em; }
.question-arrow-icon { transition: transform .3s ease; }
.question-container.is-open .question-arrow-icon { transform: rotate(180deg); }

[data-accordion] .accordion-body { display: none; }
[data-accordion].is-open .accordion-body { display: block; }
[data-accordion-toggle] { cursor: pointer; }

/* --- Form fields (lead-form, support-form) --- */
/* Webflow's styles leave no padding inside fields (text touches the left
   edge), no gap under labels, and a transparent textarea unlike the inputs.
   Give every field the inputs' light-blue background and dark text; on dark
   sections, Webflow's .dark variants set white text (unreadable on the light
   background) and drop the 16px gap between fields, so undo both. */
.field-label { margin-bottom: 8px; }
.simple-input,
.text-area { padding-left: 12px; padding-right: 12px; }
.text-area,
.text-area.dark { background-color: var(--main-blue-300); color: var(--coal-800); }
.simple-input.dark { color: var(--coal-800); margin-bottom: 16px; }
/* The error box is pale pink with no text color of its own, so on dark
   sections it inherits white text. */
.w-form-fail { color: var(--coal-800); }
/* The site's blue link color is too faint on the pink (about 2.6:1). */
.w-form-fail a { color: inherit; text-decoration: underline; }