/*
 * Webflow Website Cost Calculator — native page styles.
 *
 * 1. FAQ accordion: native CSS height transition driven by the .is-open class
 *    (toggled in webflow-website-cost-calculator.js). Ported from the shared
 *    BRIX native accordion pattern used on the agency pages.
 * 2. Calculator embed control sizing (originally an inline <style> on the page).
 */

/* ---- 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.
   This is what keeps the 24px-intrinsic icon SVGs visually small — 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 via max-width.
   Scoped with the page-wrapper class so it beats the bundle's runtime-injected
   `.page-action-btn { width: 28px }` rule regardless of stylesheet order. */
.webflow-website-cost-calculator-page .page-action-btn,
.webflow-website-cost-calculator-page .cms-collection-remove {
  width: 24px;
  height: 24px;
  padding: 6px;
}

/* ---- 3. Hide the floating step nav on mobile ----------------------------- */
/* The calculator's fixed bottom "Setup / Pages / CMS / ..." floating nav adds
   little value on small screens (it overflows into a horizontal scroll bar over
   the content). Hide it on mobile; users still move through the steps by
   scrolling. Scoped + !important to beat the bundle's runtime-injected rules. */
@media (max-width: 768px) {
  .webflow-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;
  }
}