/* ==========================================================================
   Magnolia Assurant Group — Calculators (widgets + insurance/calculators.html)
   Builds on the .calc shell in styles.css. Widgets are rendered by calculators.js.
   ========================================================================== */

/* ---------- Widget shell tweaks ---------- */
.calc { overflow: hidden; overflow: clip; --calc-sticky-top: calc(var(--header-h) + 1rem); }
.calc__inputs, .calc__result { min-width: 0; }
.calc__inputs { gap: 1.35rem; }
.calc__result { gap: 0; }
.calc__sticky { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 861px) {
  .calc__sticky { position: sticky; top: var(--calc-sticky-top); }
}

/* ---------- Input fields ---------- */
.cf { display: grid; gap: .2rem; }
.cf__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.cf__label {
  font-family: var(--font-display); font-weight: 500; color: var(--ink); font-size: .96rem; line-height: 1.3;
}
.cf--pills .cf__label { display: block; margin-bottom: .55rem; }
.cf__num { position: relative; flex: none; width: calc(8.5rem + var(--suf, 0) * .5em); }
.calc .cf__num input {
  min-height: 44px; padding: .5em .8em; text-align: right;
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--teal);
}
.calc .cf__num.has-pre input { padding-left: 1.7em; }
.calc .cf__num.has-suf input { padding-right: calc(var(--suf, 0) * .55em + 1.25em); }
.cf__pre, .cf__suf {
  position: absolute; top: 50%; transform: translateY(-50%); pointer-events: none;
  color: var(--muted); font-size: .9rem;
}
.cf__pre { left: .8em; font-weight: 600; }
.cf__suf { right: .8em; font-size: .8rem; }
.cf__range { margin: .75rem 0 .15rem; }
.cf__scale { display: flex; justify-content: space-between; font-size: .74rem; color: var(--muted); letter-spacing: .02em; }
.cf__help { margin: .2rem 0 0; font-size: .82rem; line-height: 1.45; }
.cf--pills .cf__help { margin-top: .5rem; }
.calc .choices--inline { gap: .5rem; }
.calc .choices--inline .choice__box { padding: .55em 1.1em; font-size: .94rem; }
@media (max-width: 480px) {
  .cf__head { display: grid; gap: .45rem; }
  .cf__num { width: 100%; }
  .calc .cf__num input { text-align: left; }
}

/* ---------- Results ---------- */
.calc__primary { display: grid; gap: .55rem; }
.result-big { display: flex; flex-wrap: wrap; align-items: baseline; font-variant-numeric: tabular-nums; }
.result-big--sm { font-size: clamp(1.9rem, 4vw, 2.55rem); }
.result-big.is-negative { color: #F4B0A4; }
.calc__sep { opacity: .65; margin: 0 .12em; }
.calc__suffix { font-size: .42em; font-weight: 500; color: var(--muted-c); margin-left: .25em; letter-spacing: 0; }
.calc__alt {
  display: grid; gap: .3rem; padding: .85rem 1rem; border-radius: 12px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
}
.calc__alt .result-label { color: var(--teal-300); letter-spacing: .14em; }
.calc__alt-num {
  display: flex; flex-wrap: wrap; align-items: baseline;
  font-family: var(--font-display); font-size: 1.65rem; font-weight: 600; color: #fff; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.calc__alt-num .calc__suffix { font-size: .55em; }
.calc__status {
  display: flex; gap: .6rem; align-items: flex-start; margin: 0;
  padding: .75rem .95rem; border-radius: 10px; font-size: .92rem; line-height: 1.45;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); color: #DCE7E6;
}
.calc__status .icon { margin-top: .1em; }
.calc__status--warn { background: rgba(236, 168, 52, .16); border-color: rgba(236, 168, 52, .45); color: #FBE2B0; }
.calc__status--warn .icon { color: var(--gold); }
.calc__status--good { background: rgba(95, 190, 140, .14); border-color: rgba(95, 190, 140, .4); color: #CDEEDB; }
.calc__status--good .icon { color: #7FD3A6; }
.calc__status--info .icon { color: var(--teal-300); }
.result-row span { color: var(--text); }
.result-row.is-total { border-top: 1px dashed rgba(255, 255, 255, .18); padding-top: .55rem; margin-top: .1rem; }
.result-row.is-minus strong { color: var(--gold-200); }
.calc__note { margin: 0; font-size: .9rem; line-height: 1.55; }
.calc__ctas { display: grid; gap: .6rem; margin-top: .25rem; }
.calc__ctas .btn { white-space: normal; text-align: center; line-height: 1.25; }
.calc__footnote { margin: 0; color: var(--muted-c); }
.calc__disclaimer { margin: 0; }

/* ==========================================================================
   insurance/calculators.html
   ========================================================================== */
.calc-page .calc { --calc-sticky-top: calc(var(--header-h) + 5rem); }

/* Sticky pill navigation */
.calc-nav {
  position: sticky; top: var(--header-h); z-index: 40;
  background: rgba(250, 247, 241, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.calc-nav__track {
  display: flex; gap: .5rem; overflow-x: auto; padding: .7rem 0; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
}
.calc-nav__track::-webkit-scrollbar { display: none; }
.calc-nav a {
  flex: none; display: inline-flex; align-items: center; gap: .45em; scroll-snap-align: start;
  padding: .5em 1em; border-radius: var(--r-pill); border: 1.5px solid var(--line-strong); background: #fff;
  font-family: var(--font-display); font-weight: 500; font-size: .9rem; color: var(--ink); text-decoration: none; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
}
.calc-nav a .icon { color: var(--gold-ink); width: 1.1em; height: 1.1em; }
.calc-nav a:hover { border-color: var(--teal); color: var(--teal); }
.calc-nav a.is-active { background: var(--teal); border-color: var(--teal); color: #fff; }
.calc-nav a.is-active .icon { color: var(--gold); }
@media (min-width: 1100px) { .calc-nav__track { justify-content: center; } }

/* Sections */
.calc-section { scroll-margin-top: 70px; }
.calc-section__head { display: flex; gap: 1.1rem; align-items: flex-start; max-width: 860px; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.calc-section__head h2 { font-size: clamp(1.6rem, 2.8vw, 2.25rem); margin-bottom: .3em; }
.calc-section__head .lead { margin: 0; }
.calc-section__links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1.25rem; font-size: .95rem; }
@media (max-width: 560px) {
  .calc-section__head { flex-direction: column; gap: .8rem; }
}

.hero-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.hero-chips .tag { font-size: .7rem; }