/*
 * Exit Five — /marketing-salary-calculator page styles.
 * Scoped under .salary-calculator-page. The page is essentially a
 * full-bleed iframe wrapper — the Lovable app handles all internal UI.
 */

.salary-calculator-page {
  background: #fdfff3;
  color: #04130d;
  font-family: "Onsite Standard", "Manrope", Arial, sans-serif;
  overflow-x: hidden;
}

.salary-calculator-page * {
  box-sizing: border-box;
}

.salary-calculator-frame-wrap {
  width: 100%;
  /* Iframe needs explicit height to fill anything sensible. Default to
   * a tall viewport-relative height so the whole calculator UI is
   * usable without inner scroll on most screens. Tweak min-height if
   * the Lovable app ever grows. */
  height: calc(100vh - 160px);
  min-height: 900px;
  padding: 0;
  margin: 0;
}

.salary-calculator-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fdfff3;
}

/* On small screens the WP header/footer take more vertical space — give
 * the iframe a generous fixed height instead of viewport-relative so
 * the calculator UI never gets squashed. */
@media (max-width: 768px) {
  .salary-calculator-frame-wrap {
    height: auto;
    min-height: 1200px;
  }
}