/* =============================================================================
   homePage.css - the Program's home page at the domain root (task 43).
   Public, no dashboard chrome. Three door cards, the contact facts, a footer.
   Built for a phone first; the cards sit side by side when there is room.
   Keyboard: a skip link, visible focus rings, a honeypot that is off screen
   and out of the tab order.
   ============================================================================= */

:root {
	--hp-ink: #16181d;
	--hp-muted: #5f6672;
	--hp-line: #e2e5ea;
	--hp-ground: #f4f5f7;
	--hp-card: #ffffff;
	--hp-accent: #a8201f;
	--hp-accent-ink: #ffffff;
	--hp-good: #1f6b3a;
	--hp-good-soft: #e3f3e8;
	--hp-bad: #a8201f;
	--hp-focus: #1f4e79;
}

* { box-sizing: border-box; }
html { font-size: 16px; }
.hp-body { margin: 0; font-family: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--hp-ink); background: var(--hp-ground); line-height: 1.45; }
a { color: var(--hp-focus); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--hp-focus); outline-offset: 2px; }

.hp-skip { position: absolute; left: -9999px; top: 8px; background: var(--hp-ink); color: #ffffff; padding: 8px 12px; border-radius: 6px; z-index: 10; }
.hp-skip:focus { left: 8px; }

.hp-head { background: var(--hp-card); border-bottom: 1px solid var(--hp-line); padding: 20px 16px; }
.hp-brand { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; gap: 16px; }
.hp-logo { max-height: 72px; max-width: 220px; width: auto; height: auto; }
.hp-logo-mark { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 12px; background: var(--hp-accent); color: var(--hp-accent-ink); font-size: 1.6rem; }
.hp-name { font-size: 1.5rem; font-weight: 700; margin: 0; }

.hp-main { max-width: 1080px; margin: 0 auto; padding: 20px 16px 32px; }
.hp-lede { font-size: 1.05rem; color: var(--hp-muted); margin: 0 0 18px; }

.hp-doors { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 760px) { .hp-doors { grid-template-columns: repeat(3, 1fr); } }

.hp-card { background: var(--hp-card); border: 1px solid var(--hp-line); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.hp-card h2 { font-size: 1.15rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }
.hp-card p { margin: 0; }
.hp-card.is-here { border-color: var(--hp-good); box-shadow: inset 4px 0 0 var(--hp-good); }
.hp-here { color: var(--hp-good); font-weight: 600; display: flex; align-items: center; gap: 6px; }

.hp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 10px; border: 0; background: var(--hp-accent); color: var(--hp-accent-ink); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; align-self: flex-start; }
.hp-btn:hover { filter: brightness(0.92); }
.hp-btn:disabled { opacity: 0.6; cursor: default; }

.hp-form { display: flex; flex-direction: column; gap: 8px; }
.hp-label { font-weight: 600; font-size: 0.95rem; }
.hp-input { min-height: 44px; font: inherit; font-size: 1rem; padding: 0 12px; border: 1px solid #c9cdd3; border-radius: 10px; width: 100%; }
.hp-input[aria-invalid="true"] { border-color: var(--hp-bad); }
.hp-error { color: var(--hp-bad); font-weight: 600; margin: 0; font-size: 0.95rem; }
.hp-help { color: var(--hp-muted); font-size: 0.85rem; margin: 0; }
.hp-answer { background: var(--hp-good-soft); color: var(--hp-good); padding: 10px 12px; border-radius: 10px; font-weight: 600; display: flex; gap: 8px; align-items: flex-start; }

/* The honeypot: off screen, out of the tab order, invisible to assistive technology */
.hp-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.hp-contact { margin-top: 22px; background: var(--hp-card); border: 1px solid var(--hp-line); border-radius: 14px; padding: 18px; }
.hp-contact h2 { font-size: 1.05rem; margin: 0 0 8px; }
.hp-contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hp-contact-list li { display: flex; gap: 10px; align-items: flex-start; }
.hp-contact-list i { color: var(--hp-muted); margin-top: 3px; }

.hp-foot { max-width: 1080px; margin: 0 auto; padding: 12px 16px 28px; color: var(--hp-muted); font-size: 0.85rem; }