/* ===== FO4 — Cost Per Lead calculator ===== */
/* Restyled into the gaffer-tape design system. Every rule is scoped
   under .cpl-tool so the tool's generic class names cannot collide
   with the theme. Loaded only on the "Tool — Cost Per Lead
   Calculator" page template (see inc/enqueue.php). */

.cpl-tool {
  --cpl-good: #2F6B45;
  --cpl-good-line: rgba(47, 107, 69, 0.32);
  --cpl-good-bg: rgba(47, 107, 69, 0.07);
  --cpl-bad: var(--burgundy);
  --cpl-bad-line: rgba(122, 46, 60, 0.32);
  --cpl-bad-bg: rgba(122, 46, 60, 0.06);
}

/* ---- Step rhythm ---- */
.cpl-tool .cpl-step + .cpl-step { margin-top: 96px; }

.cpl-tool .cpl-head {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: end;
  margin: 44px 0 40px;
}
.cpl-tool .cpl-narrow { max-width: 720px; }

/* ---- Spend grid ---- */
.cpl-tool .cpl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline-dark-strong);
  border: 1px solid var(--hairline-dark-strong);
}
.cpl-tool .cpl-cell {
  background: var(--cream-rise);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cpl-tool .cpl-cell--wide { grid-column: 1 / -1; }
.cpl-tool .cpl-cell label,
.cpl-tool .cpl-block label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--on-cream-mute);
}

/* ---- Inputs ---- */
.cpl-tool .cpl-field { position: relative; display: flex; align-items: center; }

.cpl-tool .cpl-affix {
  position: absolute;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--on-cream-mute);
  pointer-events: none;
  transition: color 160ms ease;
}
.cpl-tool .cpl-affix--prefix { left: 13px; }
.cpl-tool .cpl-affix--suffix { right: 13px; }
.cpl-tool .cpl-field:focus-within .cpl-affix { color: var(--gold-deep); }

.cpl-tool .cpl-input {
  width: 100%;
  padding: 13px 14px;
  font-family: var(--body);
  font-size: 17px;
  font-weight: 500;
  color: var(--on-cream);
  background: #fff;
  border: 1px solid var(--hairline-dark-strong);
  border-radius: 0;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  -moz-appearance: textfield;
}
.cpl-tool .cpl-input::-webkit-outer-spin-button,
.cpl-tool .cpl-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cpl-tool .cpl-input::placeholder { color: var(--on-cream-mute); opacity: 0.55; font-weight: 400; }
.cpl-tool .cpl-input--prefix { padding-left: 28px; }
.cpl-tool .cpl-input--suffix { padding-right: 32px; }
.cpl-tool .cpl-input:hover { border-color: var(--on-cream-mute); }
.cpl-tool .cpl-input:focus { border-color: var(--gold-deep); box-shadow: 0 0 0 3px rgba(232, 164, 28, 0.15); }
.cpl-tool .cpl-input.has-value { border-color: var(--gold-deep); }
.cpl-tool .cpl-input.error { border-color: var(--cpl-bad); background: var(--cpl-bad-bg); }

/* ---- CEO time row ---- */
.cpl-tool .cpl-ceo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.cpl-tool .cpl-ceo .cpl-field { flex: 1 1 140px; }
.cpl-tool .cpl-ceo-op {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--on-cream-mute);
  flex-shrink: 0;
}
.cpl-tool .cpl-ceo-total {
  font-family: var(--display);
  font-size: 24px;
  line-height: 1;
  color: var(--on-cream);
  background: var(--cream);
  border: 1px solid var(--hairline-dark-strong);
  padding: 10px 18px;
  min-width: 100px;
  text-align: center;
  flex-shrink: 0;
}

/* ---- Running total bar ---- */
.cpl-tool .cpl-total {
  margin-top: 14px;
  background: var(--charcoal-deep);
  border: 1px solid var(--charcoal-deep);
  padding: 28px 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cpl-tool .cpl-total-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--on-dark-mute);
}
.cpl-tool .cpl-total-count {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--on-dark-mute);
  margin-top: 7px;
}
.cpl-tool .cpl-total-value {
  font-family: var(--display);
  font-size: 56px;
  line-height: 0.9;
  color: var(--gold);
}

/* ---- Single-field blocks (leads + advanced) ---- */
.cpl-tool .cpl-block { margin-bottom: 22px; }
.cpl-tool .cpl-block:last-child { margin-bottom: 0; }
.cpl-tool .cpl-block label { display: block; margin-bottom: 10px; }
.cpl-tool .cpl-block .cpl-input { font-size: 19px; padding-top: 15px; padding-bottom: 15px; }

/* ---- Result boxes ---- */
.cpl-tool .result-box {
  margin-top: 24px;
  padding: 36px 32px;
  border: 1px solid var(--hairline-dark-strong);
  background: var(--cream-rise);
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 360ms ease, transform 360ms ease;
}
.cpl-tool .result-box.visible { opacity: 1; transform: translateY(0); }
.cpl-tool .result-box--primary { border-color: var(--gold-deep); background: rgba(232, 164, 28, 0.07); }
.cpl-tool .result-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-cream-mute);
  margin-bottom: 14px;
}
.cpl-tool .result-value {
  font-family: var(--display);
  font-size: clamp(48px, 7vw, 88px);
  line-height: 0.88;
  color: var(--on-cream);
}
.cpl-tool .result-box--primary .result-value { color: var(--gold-deep); }
.cpl-tool .result-note {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-cream-mute);
  margin-top: 14px;
}

/* ---- Advanced (collapsible) ---- */
.cpl-tool .cpl-advanced {
  border: 1px solid var(--hairline-dark-strong);
  background: var(--cream-rise);
}
.cpl-tool .advanced-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 32px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.cpl-tool .advanced-toggle:hover { background: var(--cream); }
.cpl-tool .cpl-adv-title {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1;
  color: var(--on-cream);
}
.cpl-tool .cpl-adv-sub {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-cream-mute);
  margin-top: 9px;
}
.cpl-tool .advanced-toggle-arrow {
  font-family: var(--body);
  font-size: 22px;
  line-height: 1;
  color: var(--on-cream-mute);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1), color 200ms ease;
  flex-shrink: 0;
}
.cpl-tool .advanced-toggle[aria-expanded="true"] .advanced-toggle-arrow {
  transform: rotate(180deg);
  color: var(--gold-deep);
}
.cpl-tool .advanced-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cpl-tool .advanced-content.open { max-height: 1400px; }
.cpl-tool .advanced-inner { padding: 4px 32px 32px; border-top: 1px solid var(--hairline-dark); }
.cpl-tool .advanced-explainer {
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-cream-dim);
  padding: 22px 0;
}

/* ---- Comparison ---- */
.cpl-tool .comparison {
  margin-top: 22px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 18px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 360ms ease, transform 360ms ease;
}
.cpl-tool .comparison.visible { opacity: 1; transform: translateY(0); }
.cpl-tool .comparison--over { background: var(--cpl-bad-bg); border: 1px solid var(--cpl-bad-line); }
.cpl-tool .comparison--under { background: var(--cpl-good-bg); border: 1px solid var(--cpl-good-line); }
.cpl-tool .comparison-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--body);
  font-size: 18px;
  font-weight: 700;
  border-radius: 50%;
}
.cpl-tool .comparison--over .comparison-icon { background: var(--cpl-bad); color: #fff; }
.cpl-tool .comparison--under .comparison-icon { background: var(--cpl-good); color: #fff; }
.cpl-tool .comparison-text {
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
}
.cpl-tool .comparison--over .comparison-text { color: var(--cpl-bad); }
.cpl-tool .comparison--under .comparison-text { color: var(--cpl-good); }
.cpl-tool .comparison-text strong { font-weight: 700; }

/* ---- Reset ---- */
.cpl-tool .cpl-reset-wrap { text-align: center; margin-top: 32px; }
.cpl-tool .cpl-reset {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-cream-mute);
  background: transparent;
  border: 1px solid var(--hairline-dark-strong);
  padding: 13px 24px;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}
.cpl-tool .cpl-reset:hover { color: var(--on-cream); border-color: var(--on-cream); }

/* ---- Responsive ---- */
@media (max-width: 880px) {
  .cpl-tool .cpl-head { grid-template-columns: 1fr; gap: 18px; }
  .cpl-tool .cpl-grid { grid-template-columns: repeat(2, 1fr); }
  .cpl-tool .cpl-step + .cpl-step { margin-top: 72px; }
}
@media (max-width: 560px) {
  .cpl-tool .cpl-grid { grid-template-columns: 1fr; }
  .cpl-tool .cpl-cell { padding: 18px 18px; }
  .cpl-tool .cpl-total { padding: 22px; }
  .cpl-tool .cpl-total-value { font-size: 42px; }
  .cpl-tool .advanced-toggle,
  .cpl-tool .advanced-inner { padding-left: 20px; padding-right: 20px; }
  .cpl-tool .cpl-adv-title { font-size: 24px; }
  .cpl-tool .result-box { padding: 28px 20px; }
}