/*
 * Framer Website Cost Calculator — native page styles.
 *
 * 1. FAQ accordion: native CSS height transition driven by the .is-open class
 *    (toggled in framer-website-cost-calculator.js).
 * 2. Calculator embed control sizing (edit / X page-action buttons).
 * 3. Hide the calculator's floating step nav on mobile.
 *
 * The pricing calculator + its quote popup are rendered/driven by the
 * self-contained embed bundle (/assets/framer-project-calculator/embed-bundled.js),
 * which injects its own CSS — no extra styling needed here for those.
 */

/* ---- 1. FAQ accordion (CSS height transition, JS toggles .is-open) -------- */
.accordion-item .accordion__top {
  cursor: pointer;
}

.accordion-item .accordion-content-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}

.accordion-item.is-open .accordion-content-wrapper {
  grid-template-rows: 1fr;
}

.accordion-item .accordion-content-wrapper > .acordion-body {
  overflow: hidden;
  min-height: 0;
}

.accordion-item .accordion-btn-line {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.accordion-item.is-open .accordion-btn-line.vertical {
  transform: rotate(0deg);
  opacity: 0;
}

/* ---- 2. Calculator embed control sizing ---------------------------------- */
/* Preserved from the page's original inline embed <style>: shrinks the edit / X
   page-action buttons from the bundle's default 28px to 24px with 6px padding.
   The site-wide `img { width: auto; max-width: 100% }` rule (webflow.css) overrides
   the icons' width="14" attribute, so the button padding is what caps them.
   Scoped with the page-wrapper class so it beats the bundle's runtime-injected rule. */
.framer-website-cost-calculator-page .page-action-btn,
.framer-website-cost-calculator-page .cms-collection-remove {
  width: 24px;
  height: 24px;
  padding: 6px;
}

/* ---- 3. Hide the floating step nav on mobile ----------------------------- */
/* The fixed bottom "Setup / Pages / CMS / ..." floating nav overflows into a
   horizontal scroll bar over the content on small screens. Hide it on mobile;
   users still move through the steps by scrolling. */
@media (max-width: 768px) {
  .framer-website-cost-calculator-page .floating-nav {
    display: none !important;
  }
}

/* ---- Accessibility: respect reduced-motion ------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .accordion-item .accordion-content-wrapper {
    transition: none;
  }
}