@charset "UTF-8";
/* =========
	 Calculator – Section 8 Affordability / Rent
	 Target: .section-8-affordability-rent-calculator
	 Safe for Kadence; uses CSS vars you can map to theme colors.
	 ========= */
:root {
  --calc-bg: #ffffff;
  --calc-surface: #f7f7f9;
  --calc-text: #000;
  --calc-border: #e5e7eb;
  --calc-primary: var(--global-palette1);
  --calc-primary-contrast: #ffffff;
  --calc-danger: #dc2626;
  --calc-success: #059669;
  --calc-focus: 0 0 0 3px rgba(37, 99, 235, .35);
  --calc-radius: 4px;
  --calc-gap: 14px;
  --calc-field-bg: #ffffff;
  --calc-disabled-bg: #f3f4f6;
}

.section-8-affordability-rent-calculator {
  color: var(--calc-text);
  background: var(--calc-bg);
  padding: 24px;
  border: 1px solid var(--calc-border);
  border-radius: var(--calc-radius);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  margin-inline: auto;
}

/* Top notice */
.section-8-affordability-rent-calculator > label[for=toplabel] {
  display: block;
  margin-bottom: 16px;
  padding: 10px 12px;
  background: var(--calc-surface);
  border: 1px solid var(--calc-border);
  border-radius: 10px;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--calc-text);
}

/* Form grid */
.section-8-affordability-rent-calculator form#rentCalculator {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--calc-gap) 16px;
  align-items: center;
}

/* Stack on small screens */
@media (max-width: 640px) {
  .section-8-affordability-rent-calculator form#rentCalculator {
    grid-template-columns: 1fr;
  }
}
/* Labels */
.section-8-affordability-rent-calculator form#rentCalculator label {
  font-weight: 600;
  color: var(--calc-text);
}

/* Inputs */
.section-8-affordability-rent-calculator input[type=number],
.section-8-affordability-rent-calculator input[type=text],
.section-8-affordability-rent-calculator input[disabled] {
  width: 100%;
  appearance: textfield;
  padding: 10px 12px;
  border: 1px solid var(--calc-border);
  border-radius: 10px;
  background: var(--calc-field-bg);
  color: var(--calc-text);
  line-height: 1.2;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

/* Disabled fields read-only look (results) */
.section-8-affordability-rent-calculator input:disabled {
  background: var(--calc-disabled-bg);
  color: var(--calc-text);
  cursor: not-allowed;
}

/* Focus states for keyboard users */
.section-8-affordability-rent-calculator input[type=number]:focus,
.section-8-affordability-rent-calculator button:focus {
  outline: none;
  border-color: var(--calc-primary);
  box-shadow: var(--calc-focus);
}

/* Required/invalid hinting (native :invalid) */
.section-8-affordability-rent-calculator input:required:invalid:not(:placeholder-shown) {
  border-color: var(--calc-danger);
}

/* WebKit number spinners (hide) */
.section-8-affordability-rent-calculator input[type=number]::-webkit-outer-spin-button,
.section-8-affordability-rent-calculator input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Button */
.section-8-affordability-rent-calculator button[type=button] {
  grid-column: 1/-1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-weight: 700;
  border-radius: 10px;
  border: 1px solid var(--calc-primary);
  background: var(--calc-primary);
  color: var(--calc-primary-contrast);
  cursor: pointer;
  transition: transform 0.05s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.section-8-affordability-rent-calculator button[type=button]:hover {
  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.18);
  filter: brightness(1.03);
}

.section-8-affordability-rent-calculator button[type=button]:active {
  transform: translateY(1px);
}

/* Output labels and messages */
.section-8-affordability-rent-calculator #lowerLabel,
.section-8-affordability-rent-calculator #result {
  grid-column: 1/-1;
  margin-top: 6px;
  font-size: 0.95rem;
}

.section-8-affordability-rent-calculator #result {
  padding: 10px 12px;
  background: var(--calc-surface);
  border: 1px solid var(--calc-border);
  border-radius: 10px;
  color: var(--calc-text);
}

/* Make computed fields visually grouped */
.section-8-affordability-rent-calculator input#grossRent,
.section-8-affordability-rent-calculator input#lower,
.section-8-affordability-rent-calculator input#haPortion,
.section-8-affordability-rent-calculator input#tenantRent {
  background: linear-gradient(0deg, var(--calc-disabled-bg), var(--calc-disabled-bg));
  font-variant-numeric: tabular-nums;
}

/* Emphasize critical threshold label colors set by JS */
.section-8-affordability-rent-calculator #lowerLabel {
  font-weight: 600;
}

.section-8-affordability-rent-calculator #lowerLabel[style*=green] {
  color: var(--calc-success) !important;
}

.section-8-affordability-rent-calculator #lowerLabel[style*=red] {
  color: var(--calc-danger) !important;
}

/* Gentle sectioning for A–H rows (no HTML change required) */
.section-8-affordability-rent-calculator label[for^=contractRent],
.section-8-affordability-rent-calculator label[for^=utilityAllowance],
.section-8-affordability-rent-calculator label[for^=grossRent],
.section-8-affordability-rent-calculator label[for^=paymentStandard],
.section-8-affordability-rent-calculator label[for^=lower],
.section-8-affordability-rent-calculator label[for^=monthlyIncome],
.section-8-affordability-rent-calculator label[for^=haPortion],
.section-8-affordability-rent-calculator label[for^=tenantRent] {
  position: relative;
}

.section-8-affordability-rent-calculator label[for^=contractRent]::before,
.section-8-affordability-rent-calculator label[for^=utilityAllowance]::before,
.section-8-affordability-rent-calculator label[for^=grossRent]::before,
.section-8-affordability-rent-calculator label[for^=paymentStandard]::before,
.section-8-affordability-rent-calculator label[for^=lower]::before,
.section-8-affordability-rent-calculator label[for^=monthlyIncome]::before,
.section-8-affordability-rent-calculator label[for^=haPortion]::before,
.section-8-affordability-rent-calculator label[for^=tenantRent]::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 70%;
  border-radius: 2px;
  background: var(--calc-border);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .section-8-affordability-rent-calculator * {
    transition: none !important;
    animation: none !important;
  }
}

/*# sourceMappingURL=arc-section-8-affordability-rent-calculator.min.css.map */