/* ============================================================================
   host-family-city.css — city host-family recruitment pages (/host-family/<city>/)
   Loaded after /landing.css (palette, nav, breadcrumb, hero, FAQ, footer).
   ========================================================================== */

/* Bilingual pages (Montréal): show only the copy for <html lang>. */
html[lang="en"] [data-l="fr"],
html:not([lang="en"]) [data-l="en"] { display: none !important; }

html, body { overflow-x: hidden; }

.hf-hero-card ul li { display: flex; gap: .6rem; align-items: flex-start; }
.hf-hero-card ul li::before { content: "✓"; color: var(--success); font-weight: 700; flex: none; }

.hf-langs { display: inline-flex; gap: .35rem; align-items: center; }
.hf-langs a { color: var(--ink-2); font-weight: 600; }
.hf-langs a[aria-current="true"] { color: var(--red); text-decoration: underline; }
.hf-lang-pill { display: inline-flex; gap: .5rem; align-items: center; font-size: .85rem; margin-bottom: 1rem; background: var(--cream-card); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .85rem; }
.hf-lang-pill a { color: var(--ink-2); font-weight: 600; }
.hf-lang-pill a[aria-current="true"] { color: var(--red); }
.hf-note { font-size: .88rem; color: var(--ink-2); background: var(--cream-card); border-left: 3px solid var(--red); padding: .7rem 1rem; border-radius: 0 4px 4px 0; margin-top: 1rem; }

/* How it works — four steps */
.hf-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; list-style: none; padding: 0; counter-reset: hfstep; }
.hf-steps li { background: var(--cream-card); border: 1px solid var(--line); border-radius: 8px; padding: 1.4rem 1.25rem; box-shadow: var(--shadow-sm); counter-increment: hfstep; }
.hf-steps li::before { content: counter(hfstep); display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--red-soft); color: var(--red); font-family: 'Playfair Display', serif; font-weight: 700; margin-bottom: .7rem; }
.hf-steps h3 { font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 600; color: var(--ink); margin-bottom: .4rem; }
.hf-steps p { font-size: .9rem; color: var(--ink-2); line-height: 1.55; }

/* What hosts provide / why host */
.hf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.hf-grid.three { grid-template-columns: repeat(3, 1fr); }
.hf-card { background: var(--cream-card); border: 1px solid var(--line); border-radius: 8px; padding: 1.25rem 1.3rem; box-shadow: var(--shadow-sm); }
.hf-card h3 { font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: .3rem; }
.hf-card p { font-size: .9rem; color: var(--ink-2); line-height: 1.55; }
.hf-alt { background: var(--cream-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Local section */
.hf-local { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.hf-local h3 { font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 600; color: var(--ink); margin-bottom: .4rem; }
.hf-local p { font-size: .93rem; color: var(--ink-2); margin-bottom: .8rem; }

/* FAQ */
.hf-faq { max-width: 820px; }

/* Interest form */
.hf-form-band .lead-form-inner { max-width: 820px; }
.hf-form .lf-row > .hf-field { min-width: 0; }
.hf-form .hf-field { margin-bottom: 1rem; }
.hf-form .lf-row .hf-field { margin-bottom: 0; }
.hf-form .hf-opt { font-weight: 400; color: var(--muted); }
.hf-form .has-error input, .hf-form .has-error select, .hf-form .has-error textarea { border-color: var(--red); background: #FFF7F5; }
.hf-err { color: var(--red-hover); font-size: .8rem; margin-top: .3rem; }
.hf-checks { margin: .5rem 0 1rem; display: flex; flex-direction: column; gap: .7rem; }
.hf-check { display: flex; gap: .65rem; align-items: flex-start; }
.hf-check input[type="checkbox"] { width: 1.15rem; height: 1.15rem; flex: none; margin-top: .15rem; accent-color: var(--red); padding: 0; }
.hf-form .hf-check label { display: block; font-weight: 400; font-size: .86rem; color: var(--ink-2); margin: 0; line-height: 1.5; }
.hf-sender { font-size: .78rem; color: var(--muted); margin: -.25rem 0 1rem; }
.hf-form button { font-family: inherit; }
.hf-form button[disabled] { opacity: .7; cursor: progress; }
.hf-status { margin-top: .9rem; font-size: .9rem; border-radius: 6px; padding: .8rem 1rem; }
.hf-status.is-error { background: #FFF1EE; border: 1px solid var(--red); color: var(--red-hover); }
.hf-status.is-ok { background: #EEF7EE; border: 1px solid var(--success); color: #2E6B31; }
.hf-status a { color: inherit; text-decoration: underline; }
.hf-privacy { font-size: .8rem; color: var(--muted); margin-top: 1rem; }
.hf-privacy a { color: var(--ink-2); text-decoration: underline; }
.hf-done { background: #EEF7EE; border: 1px solid var(--success); border-radius: 10px; padding: 1.5rem; color: #2E6B31; }
.hf-done h3 { font-family: 'Playfair Display', serif; font-size: 1.3rem; margin-bottom: .4rem; color: var(--ink); }
.hf-done:focus { outline: 2px solid var(--success); outline-offset: 2px; }

.hf-contact { text-align: center; }
.hf-contact p { color: var(--ink-2); margin-bottom: .5rem; }
.hf-contact a.hf-mail { font-weight: 700; font-size: 1.05rem; }

.hf-cities { display: flex; flex-wrap: wrap; gap: .6rem; }
.hf-cities a { padding: .5rem .95rem; border: 1px solid var(--line); border-radius: 999px; background: var(--cream-card); color: var(--ink-2); font-size: .9rem; }
.hf-cities a:hover { border-color: var(--red); color: var(--red); text-decoration: none; }

@media (max-width: 960px) {
  .hf-steps { grid-template-columns: repeat(2, 1fr); }
  .hf-grid.three, .hf-local { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .hf-steps, .hf-grid { grid-template-columns: 1fr; }
  .hf-form-band .lead-form-inner { padding: 2.5rem 1rem; }
  .lead-form { padding: 1.25rem; }
}