/**
 * Get Help (/get-help/): a focused conversion page. Full-width Beaver Builder
 * custom-module sections; this stylesheet is enqueued on the page by
 * inc/hos-gethelp.php so the sections need no per-section CSS. Design-system
 * tokens throughout. Anchors are self-scoped (.hos-gh-* a.<class>) to beat the
 * design-system base link rule.
 */

.hos-gh-wrap { max-width: var(--ds-width-container); margin: 0 auto; padding: 0 var(--ds-space-gutter); }

/* Buttons */
.hos-gh-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; padding: 18px 34px; border-radius: var(--ds-radius-pill); border: 2px solid transparent; font-family: var(--ds-font-heading); font-weight: var(--ds-weight-semibold); font-size: var(--ds-text-intro); line-height: 1; }
a.hos-gh-btn { text-decoration: none !important; }
a.hos-gh-btn--primary { background: var(--ds-color-red-dark); color: var(--ds-color-white) !important; }
a.hos-gh-btn--primary:hover { background: var(--ds-color-red-hover); color: var(--ds-color-white) !important; }
.hos-gh-btn__arrow { font-size: 1.1em; line-height: 0; }

/* Hero */
.hos-gh-hero { background: var(--ds-color-surface); padding: clamp(40px, 6vw, 76px) 0; }
.hos-gh-hero__inner { max-width: var(--ds-width-container); margin: 0 auto; padding: 0 var(--ds-space-gutter); }
.hos-gh-hero h1 { margin: 0 0 var(--ds-space-lg); font-family: var(--ds-font-heading); font-weight: var(--ds-weight-bold); font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 1.08; letter-spacing: var(--ds-letter-display); color: var(--ds-color-heading); }
.hos-gh-hero__intro { max-width: 62ch; display: flex; flex-direction: column; gap: var(--ds-space-md); }
.hos-gh-hero__intro p { margin: 0; font-size: var(--ds-text-intro); line-height: var(--ds-line-lead); color: var(--ds-color-body); }

/* Two info cards */
.hos-gh-cards { padding: clamp(36px, 5vw, 64px) 0; }
.hos-gh-cards__grid { max-width: var(--ds-width-container); margin: 0 auto; padding: 0 var(--ds-space-gutter); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); align-items: start; }
.hos-gh-card { border-radius: var(--ds-radius-lg); padding: clamp(24px, 3vw, 36px); }
.hos-gh-card--check { background: var(--ds-color-blue-tint); }
.hos-gh-card--after { background: var(--ds-color-surface); border: 1px solid var(--ds-color-border); }
.hos-gh-card h2 { margin: 0 0 var(--ds-space-md); font-family: var(--ds-font-heading); font-weight: var(--ds-weight-bold); font-size: clamp(1.5rem, 2.6vw, 1.875rem); line-height: 1.2; color: var(--ds-color-heading); }
.hos-gh-card__lead { margin: 0 0 var(--ds-space-md); color: var(--ds-color-body); }
.hos-gh-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ds-space-md); }
.hos-gh-list li { display: flex; align-items: flex-start; gap: var(--ds-space-sm); font-size: var(--ds-text-base); line-height: var(--ds-line-snug); color: var(--ds-color-heading); }
.hos-gh-list__tick { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--ds-radius-pill); background: var(--ds-color-red-dark); color: var(--ds-color-white); }
.hos-gh-list__tick svg { width: 16px; height: 16px; }
.hos-gh-list--num { counter-reset: gh; }
.hos-gh-list--num li { counter-increment: gh; }
.hos-gh-list__n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--ds-radius-pill); background: var(--ds-color-red-dark); color: var(--ds-color-white); font-family: var(--ds-font-heading); font-weight: var(--ds-weight-bold); font-size: var(--ds-text-sm); }

/* Homelessness callout */
.hos-gh-callout { padding: 0 0 clamp(36px, 5vw, 64px); }
.hos-gh-callout__inner { max-width: var(--ds-width-container); margin: 0 auto; padding: 0 var(--ds-space-gutter); }
.hos-gh-callout__panel { background: var(--ds-color-orange-tint); border-radius: var(--ds-radius-lg); padding: clamp(24px, 3.4vw, 40px); }
.hos-gh-callout__panel h2 { margin: 0 0 var(--ds-space-sm); font-family: var(--ds-font-heading); font-weight: var(--ds-weight-bold); font-size: clamp(1.5rem, 2.8vw, 2rem); line-height: 1.2; color: var(--ds-color-heading); }
.hos-gh-callout__panel p { margin: 0; font-size: var(--ds-text-intro); line-height: 1.6; color: var(--ds-color-heading); max-width: 60ch; }

/* Form / start panel */
.hos-gh-form { padding: 0 0 clamp(40px, 6vw, 72px); }
.hos-gh-form__panel { max-width: var(--ds-width-container); margin: 0 auto; padding: 0 var(--ds-space-gutter); }
.hos-gh-form__box { background: var(--ds-color-blue-tint); border-radius: var(--ds-radius-lg); padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; gap: var(--ds-space-lg); }
.hos-gh-form__box h2 { margin: 0; font-family: var(--ds-font-heading); font-weight: var(--ds-weight-bold); font-size: clamp(1.625rem, 3vw, 2.125rem); line-height: 1.15; color: var(--ds-color-heading); }
.hos-gh-form__text { margin: 0; max-width: 62ch; font-size: var(--ds-text-base); line-height: var(--ds-line-body); color: var(--ds-color-body); }
.hos-gh-form__fallback { margin: 0; font-size: var(--ds-text-sm); color: var(--ds-color-body); }
.hos-gh-form a.hos-gh-form__phone { color: var(--ds-color-red-dark); font-weight: var(--ds-weight-bold); text-decoration: none; }
.hos-gh-form a.hos-gh-form__phone:hover { text-decoration: underline; }
.hos-gh-form__note { border-left: 3px solid var(--ds-color-border-hover); padding-left: var(--ds-space-md); margin: var(--ds-space-md) 0 0; font-size: var(--ds-text-sm); color: var(--ds-color-body); max-width: 64ch; }

/* How long it takes timeline */
.hos-gh-time { padding: 0 0 clamp(44px, 6vw, 80px); }
.hos-gh-time__panel { max-width: var(--ds-width-container); margin: 0 auto; padding: 0 var(--ds-space-gutter); }
.hos-gh-time__box { background: var(--ds-color-blue-tint); border-radius: var(--ds-radius-lg); padding: clamp(28px, 4vw, 52px); }
.hos-gh-time__box h2 { margin: 0 0 var(--ds-space-sm); font-family: var(--ds-font-heading); font-weight: var(--ds-weight-bold); font-size: clamp(1.625rem, 3vw, 2.125rem); line-height: 1.15; color: var(--ds-color-heading); }
.hos-gh-time__intro { margin: 0 0 var(--ds-space-xl); max-width: 64ch; font-size: var(--ds-text-intro); line-height: 1.6; color: var(--ds-color-body); }
.hos-gh-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ds-space-xl); counter-reset: ghstep; }
.hos-gh-steps li { counter-increment: ghstep; display: flex; align-items: flex-start; gap: var(--ds-space-md); }
.hos-gh-steps__n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--ds-radius-pill); background: var(--ds-color-red-dark); color: var(--ds-color-white); font-family: var(--ds-font-heading); font-weight: var(--ds-weight-bold); font-size: var(--ds-text-lead); }
.hos-gh-steps__body { display: flex; flex-direction: column; gap: 4px; }
.hos-gh-steps__body strong { font-family: var(--ds-font-heading); font-weight: var(--ds-weight-bold); font-size: var(--ds-text-h4); line-height: 1.3; color: var(--ds-color-heading); }
.hos-gh-steps__body p { margin: 0; font-size: var(--ds-text-base); line-height: var(--ds-line-snug); color: var(--ds-color-body); max-width: 60ch; }
.hos-gh-time__foot { margin: var(--ds-space-xl) 0 0; padding: var(--ds-space-lg) 0 0; border-top: 1px solid var(--ds-color-border-hover); display: flex; flex-wrap: wrap; gap: var(--ds-space-sm) var(--ds-space-lg); align-items: baseline; justify-content: space-between; }
.hos-gh-time__foot p { margin: 0; font-size: var(--ds-text-sm); line-height: var(--ds-line-snug); color: var(--ds-color-body); max-width: 52ch; }
.hos-gh-time__contact { display: flex; flex-direction: column; gap: 4px; }
.hos-gh-time a.hos-gh-time__link { color: var(--ds-color-red-dark); font-weight: var(--ds-weight-bold); text-decoration: none; white-space: nowrap; }
.hos-gh-time a.hos-gh-time__link:hover { text-decoration: underline; }

@media (max-width: 720px) {
	.hos-gh-cards__grid { grid-template-columns: 1fr; }
}

/* CSS-generated numbers (so repeater items are not normalised to the first) */
.hos-gh-list--num .hos-gh-list__n::before { content: counter(gh); }
.hos-gh-steps__n::before { content: counter(ghstep); }

/* ---- Main area (23 Sept 2026): info boxes left, form box right and sticky ----
   One section (.hos-gh-main) replaces the separate cards / callout / form /
   timeline sections so the form box can stay in view while scrolling. */
.hos-gh-main { padding: clamp(36px, 5vw, 64px) 0 clamp(44px, 6vw, 80px); }
.hos-gh-main__inner { max-width: var(--ds-width-container); margin: 0 auto; padding: 0 var(--ds-space-gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: clamp(20px, 3vw, 32px) clamp(28px, 4vw, 48px); align-items: start; }
.hos-gh-main__inner > * { grid-column: 1; min-width: 0; }
.hos-gh-main__inner > .hos-gh-main__side { grid-column: 2; grid-row: 1 / span 4; position: sticky; top: 24px; align-self: start; }
.hos-gh-main__side .hos-gh-form__box { padding: clamp(24px, 3vw, 36px); gap: var(--ds-space-md); }
.hos-gh-main__side .hos-gh-form__box h2 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); }
.hos-gh-main__side .hos-gh-btn { width: 100%; }
.hos-gh-main a.hos-gh-time__link { color: var(--ds-color-red-dark); font-weight: var(--ds-weight-bold); text-decoration: none; white-space: nowrap; }
.hos-gh-main a.hos-gh-time__link:hover { text-decoration: underline; }
.hos-gh-main .hos-gh-callout__panel p { font-size: var(--ds-text-base); }

/* Spacing the design-system paragraph rule was zeroing: a small gap between
   each intro line and the list that follows it. */
.fl-ds-page .hos-gh-main .hos-gh-card__lead { margin: 0 0 var(--ds-space-md) !important; }
.fl-ds-page .hos-gh-main .hos-gh-time__intro { margin: 0 0 var(--ds-space-lg) !important; }

@media (max-width: 900px) {
	.hos-gh-main__inner { grid-template-columns: minmax(0, 1fr); }
	.hos-gh-main__inner > .hos-gh-main__side { grid-column: 1; grid-row: auto; position: static; }
	.hos-gh-main__check { order: 1; }
	.hos-gh-main__inner > .hos-gh-main__side { order: 2; }
	.hos-gh-main__after { order: 3; }
	.hos-gh-main__time { order: 4; }
	.hos-gh-main__home { order: 5; }
}

/* Match the timeline and homelessness boxes to the two cards now they share a column */
.hos-gh-main .hos-gh-time__box, .hos-gh-main .hos-gh-callout__panel { padding: clamp(24px, 3vw, 36px); }
.fl-ds-page .hos-gh-main .hos-gh-time__box h2, .fl-ds-page .hos-gh-main .hos-gh-callout__panel h2 { font-size: clamp(1.5rem, 2.6vw, 1.875rem); }
.fl-ds-page .hos-gh-main .hos-gh-time__intro { font-size: var(--ds-text-base); line-height: var(--ds-line-body); }

/* Narrow phones: long email links may wrap rather than push the page sideways */
@media (max-width: 400px) { .hos-gh-time a.hos-gh-time__link, .hos-gh-main a.hos-gh-time__link { white-space: normal; overflow-wrap: anywhere; } }