/* firsthome.css — First-Time VA Buyer Cash-to-Close Planner, scoped .fhp2 */
/* Tokens from afford.css: navy #0A2540, gold #FFB800, blue #2B7FFF */
.fhp2 {
  --navy: #0A2540;
  --navy-deep: #061829;
  --navy-mid: #143256;
  --gold: #FFB800;
  --gold-soft: #FFC733;
  --blue: #2B7FFF;
  --white: #FFFFFF;
  --gray-400: #94A3B8;
  --green: #10B981;
  --red: #C8102E;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--white);
  background: var(--navy);
  border-radius: 12px;
  padding: 14px 20px 10px;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
  max-width: 780px;
  margin: 1rem auto;
}
.fhp2 *, .fhp2 *::before, .fhp2 *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Head */
.fhp2-head { margin-bottom: 10px; }
.fhp2-title { font-family: 'Source Serif 4', Georgia, serif; font-size: 18px; font-weight: 700; margin-bottom: 2px; }
.fhp2-subtitle { font-size: 11px; color: rgba(255,255,255,0.5); }

/* Two-column layout: inputs left, results right (sticky) */
.fhp2-body { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 768px) { .fhp2-body { grid-template-columns: 1fr; } }
.fhp2-inputs { min-width: 0; }
.fhp2-results { position: sticky; top: 20px; min-width: 0; }

/* Input rows */
.fhp2-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; }
@media (max-width: 480px) { .fhp2-row { grid-template-columns: 1fr; } }
.fhp2-field { margin-bottom: 4px; }
.fhp2-label { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 4px; }
.fhp2-input, .fhp2-select { width: 100%; padding: 6px 8px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; color: var(--white); font-size: 14px; font-family: inherit; outline: none; transition: border-color 0.15s; }
.fhp2-input:focus, .fhp2-select:focus { border-color: var(--blue); }
.fhp2-input.dirty { border-color: var(--gold); }
.fhp2-hint { font-size: 10px; color: rgba(255,255,255,0.35); margin-top: 2px; }
select.fhp2-input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2394A3B8'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px; }
select.fhp2-input option { background: var(--navy-deep); color: var(--white); }

/* Seg toggles */
.fhp2-seg { display: flex; gap: 0; border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; overflow: hidden; margin-bottom: 4px; }
.fhp2-seg label { flex: 1; text-align: center; padding: 6px 4px; font-size: 11px; font-weight: 600; cursor: pointer; transition: background 0.15s; border-right: 1px solid rgba(255,255,255,0.08); }
.fhp2-seg label:last-child { border-right: none; }
.fhp2-seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.fhp2-seg label:has(input:checked) { background: var(--gold); color: var(--navy); }

/* Expander */
.fhp2 .fhp2-expander { margin: 10px 0; background: transparent; }
.fhp2-expander > summary { font-size: 12px; font-weight: 600; cursor: pointer; color: #4A96FF; padding: 6px 0; list-style: none; }
.fhp2-expander > summary::before { content: '+ '; }
.fhp2-expander[open] > summary::before { content: '- '; }
.fhp2-expander-body { padding: 8px 0; }

/* Results */
.fhp2-headline { display: flex; gap: 10px; margin-bottom: 8px; }
.fhp2-headline-card { flex: 1; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 8px; text-align: center; }
.fhp2-headline-card .val { font-family: 'Source Serif 4', Georgia, serif; font-size: 20px; font-weight: 800; color: var(--gold); }
.fhp2-headline-card .lbl { font-size: 10px; color: var(--gray-400); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.05em; }
.fhp2-headline-card.warn { border-color: var(--red); }
.fhp2-headline-card.warn .val { color: var(--red); }

.fhp2-section { margin-bottom: 8px; }
.fhp2-section > summary { font-size: 12px; font-weight: 600; cursor: pointer; padding: 6px 0; color: rgba(255,255,255,0.7); list-style: none; }
.fhp2-section > summary::before { content: '+ '; color: var(--gold); }
.fhp2-section[open] > summary::before { content: '- '; }
.fhp2-line { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.fhp2-line:last-child { border-bottom: 0; }
.fhp2-line .lbl { color: var(--gray-400); }
.fhp2-line .val { font-weight: 600; color: var(--white); }
.fhp2-line .val.neg { color: var(--green); }
.fhp2-line .val.warn { color: var(--red); }
.fhp2-line .val.muted { color: var(--gray-400); font-weight: 400; }

.fhp2-status { font-size: 11px; padding: 4px 8px; border-radius: 6px; margin-top: 4px; }
.fhp2-status.ok { background: rgba(16,185,129,0.12); color: var(--green); }
.fhp2-status.warn { background: rgba(200,16,46,0.12); color: var(--red); }
.fhp2-status.info { background: rgba(43,127,255,0.12); color: var(--blue); }

.fhp2-disclaimer { font-size: 9px; color: rgba(255,255,255,0.55); margin-top: 8px; line-height: 1.3; }

@media (max-width: 600px) {
  .fhp2 { padding: 20px 16px; }
  .fhp2-headline { flex-direction: column; }
  .fhp2-row { grid-template-columns: 1fr; gap: 6px; }
}

/* double-id link override */
#firsthomePlanner #fhp-results a:not(.fhp2-cta) { color: #4A96FF !important; text-decoration: none !important; }
#firsthomePlanner #fhp-results a:not(.fhp2-cta):hover { text-decoration: underline !important; }

/* bullet-section reset */
#firsthomePlanner div[class*="bullet-section"] { background: transparent !important; padding: 0 !important; margin: 0 !important; border: none !important; border-radius: 0 !important; }
#firsthomePlanner ul, #firsthomePlanner li { background-color: transparent !important; }

/* vlnPage theme overrides */
#firsthomePlanner summary::after { content: none; display: none; }
#firsthomePlanner summary { display: block; justify-content: normal; }
#firsthomePlanner details { background: transparent; border: none; overflow: visible; border-radius: 0; }
#firsthomePlanner details > summary { background: transparent; }
#firsthomePlanner details > :not(summary) { background: transparent; }
#firsthomePlanner input:not([type="checkbox"]):not([type="radio"]) { background: rgba(255,255,255,0.06) !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.12) !important; }
#firsthomePlanner input::placeholder { color: rgba(255,255,255,0.55); opacity: 1; }