/**
 * Affordability Calculator page. Every rule is scoped under .ij-aff; layout is
 * in the template's inline styles, ported verbatim from the design.
 */

.ij-aff { font-family: var(--font-sans); font-weight: 500; color: var(--color-text); -webkit-font-smoothing: antialiased; }
/* bb-theme's skin names Helvetica on headings and styles bare buttons/inputs. */
.ij-aff h1, .ij-aff h2 { font-family: var(--font-sans); color: var(--color-text); }
.ij-aff button { font-family: var(--font-sans); }

/* The design's body metrics. Bootstrap's body is 14px / 1.43, so every label
   (which inherits its line height) and every input and spinner button came
   out 1-3px short, and the inputs card 44px shorter than the design. */
.ij-aff { font-size: 16px; line-height: 21.6px; }
.ij-aff input[data-aff] { line-height: normal; }
.ij-aff .numfield button { font-size: 13.3333px; line-height: normal; }

/* The site's calculator, kept in the DOM (the plugin binds to it) but unseen. */
.ij-aff .aff-engine { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---- Buttons and inputs: re-assert the design against bb-theme's states ---- */
.ij-aff button,
.ij-aff button:hover,
.ij-aff button:focus,
.ij-aff button:active { border: 0; box-shadow: none; }
.ij-aff #aff-reset, .ij-aff #aff-reset:focus { background: transparent; color: var(--slate-900); }
.ij-aff #aff-print, .ij-aff #aff-print:focus { background: transparent; color: var(--brand-green-dark); }
.ij-aff [data-aff-step], .ij-aff [data-aff-step]:focus { background: var(--slate-50); color: var(--color-text-secondary); }
.ij-aff .aff-hov-1:hover { color: var(--brand-green) !important; }
.ij-aff .aff-hov-2:not([disabled]):hover { background: var(--color-success-soft) !important; color: var(--brand-green-dark) !important; }
.ij-aff [data-aff-step][disabled] { cursor: default !important; opacity: 0.45; }
.ij-aff input[data-aff] { box-shadow: none !important; height: auto; margin: 0; }
.ij-aff input[data-aff][readonly] { cursor: default; color: var(--color-text-secondary) !important; }
.ij-aff .numfield:focus-within { border-color: var(--brand-green) !important; box-shadow: var(--ring-focus); }
.ij-aff button:focus { outline: none; }
.ij-aff button:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: 6px; }

/* ---- The design's mobile rework (om-mobile v2): one column, 20px gutters ---- */
@media (max-width: 820px) {
	.ij-aff > section { padding-left: 20px !important; padding-right: 20px !important; }
	.ij-aff section [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 560px) {
	.ij-aff section h1 { font-size: 26px !important; letter-spacing: -1.1px !important; line-height: 1.14 !important; }
	.ij-aff section h2 { font-size: 23px !important; letter-spacing: -0.8px !important; line-height: 1.2 !important; }
	.ij-aff > section { padding-bottom: 56px !important; }
}

@media print {
	#site-header, #site-footer, .ij-calc, #aff-reset, #aff-print { display: none !important; }
	.ij-aff > section { padding: 0 !important; }
}

/* == om-afford-head (design 57889e4): keep the results heading and its
   button on one row at phone width. */
@media (max-width: 560px) {
	.ij-aff .afford-head { flex-wrap: nowrap !important; gap: 12px !important; }
	.ij-aff .afford-head h2 { min-width: 0; font-size: 20px !important; letter-spacing: -0.6px !important; }
	.ij-aff .afford-head button { flex: none !important; white-space: nowrap; font-size: 13px !important; }
}