/**
 * Get Help page.
 *
 * Loaded only on this page, so the rest of the site does not carry it.
 *
 * Design constraints, in priority order:
 *   1. The emergency numbers must be readable and tappable within a second of
 *      the page appearing, on a cheap phone, in daylight.
 *   2. Nothing may depend on JavaScript or a webfont having loaded.
 *   3. No decorative images. This page has to render on bad mobile data, and
 *      every kilobyte competes with the one thing that matters.
 *
 * Colour follows the site palette: green for guidance, red reserved for the
 * emergency block and for Quick Exit. Ratios measured on white.
 */

.hb-help {
	--gh-green:      #00893F;  /*  4.52 */
	--gh-green-deep: #046A34;  /*  6.74 */
	--gh-forest:     #0B3A2A;  /* 12.71 */
	--gh-ink:        #16281F;  /* 15.47 */
	--gh-ink-soft:   #3D4A42;
	--gh-red:        #D62818;  /*  5.03 */
	--gh-red-deep:   #A81B0F;
	--gh-mint:       #E9F6EE;
	--gh-sand:       #F6F4F0;
	--gh-line:       #D9E5DC;

	font-family: 'DM Sans', system-ui, sans-serif;
	color: var(--gh-ink-soft);
	line-height: 1.6;
}

.hb-help h1,
.hb-help h2,
.hb-help h3 {
	font-family: 'Space Grotesk', system-ui, sans-serif;
	color: var(--gh-forest);
	line-height: 1.15;
	letter-spacing: -0.015em;
	text-wrap: balance;
	margin: 0 0 0.75rem;
}

.hb-help__wrap {
	max-width: 1080px;
	margin-inline: auto;
	padding-inline: clamp(1rem, 4vw, 2rem);
}

.hb-help section { padding-block: clamp(2.5rem, 4vw, 4rem); }

/* ---- Intro -------------------------------------------------------------
   Deliberately short. Someone arriving here in crisis should reach a phone
   number without reading a paragraph first. */

/* Sized so all three emergency cards clear the fold on a 720px-tall laptop,
   which is the shortest common desktop viewport. Measured, not estimated:
   before tightening, the first card's bottom edge sat at 718px and the third
   was fully below the fold. */
/* Selector carries an element to outrank `.hb-help section` above, which is
   (0,1,1) and silently won against a single class. */
.hb-help section.hb-help__intro {
	background: var(--gh-mint);
	padding-block: clamp(1.25rem, 2.5vw, 1.9rem) clamp(1rem, 2vw, 1.35rem);
}

.hb-help__intro h1 {
	font-size: clamp(1.75rem, 1.2rem + 1.9vw, 2.5rem);
	max-width: 16ch;
	margin-bottom: 0.5rem;
}

.hb-help__intro p {
	font-size: clamp(1rem, 0.96rem + 0.3vw, 1.15rem);
	max-width: 52ch;
	margin: 0;
}

/* ---- Emergency ---------------------------------------------------------
   The most important block on the site after Quick Exit. Full-bleed red so
   it cannot be mistaken for anything else, white text at 5.03 on #D62818. */

.hb-help section.hb-help__emergency {
	background: var(--gh-red);
	color: #fff;
	/* Overrides the generic section rhythm: this block earns its space from
	   being reachable, not from breathing room. */
	padding-block: clamp(1.5rem, 3vw, 2.25rem) clamp(2rem, 4vw, 3rem);
}

.hb-help__emergency h2 {
	color: #fff;
	font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
	margin-bottom: 0.35rem;
}

.hb-help__emergency > .hb-help__wrap > p {
	color: rgba(255, 255, 255, 0.92);
	max-width: 56ch;
	margin: 0;
}

.hb-help__numbers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 0.85rem;
	margin-top: 1.15rem;
}

.hb-help__number {
	display: block;
	background: rgba(0, 0, 0, 0.22);
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-radius: 6px;
	padding: 1.15rem 1.25rem;
	text-decoration: none;
	color: #fff;
	/* The whole card is the tap target, not just the digits. */
	min-height: 96px;
	transition: background 0.15s ease, transform 0.15s ease;
}

.hb-help__number:hover,
.hb-help__number:focus-visible {
	background: rgba(0, 0, 0, 0.38);
	transform: translateY(-2px);
	color: #fff;
}

.hb-help__number:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

.hb-help__number-label {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 0.35rem;
}

.hb-help__number-value {
	display: block;
	font-family: 'Space Grotesk', system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.hb-help__number-note {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.85);
}

/* ---- Recognition -------------------------------------------------------
   Many people do not identify what is happening to them as abuse, because it
   is not physical. This list exists so someone can recognise themselves in it
   without anyone having to name it for them. */

.hb-help__recognise { background: #fff; }

/* Framing paragraph above the recognition list.
   Carries real weight: it is what stops the list reading as an accusation
   against ordinary married life, so it is styled to be read rather than
   skimmed past. */
.hb-help__frame {
	max-width: 64ch;
	font-size: 1.02rem;
	color: var(--gh-ink);
	background: var(--gh-sand);
	border-left: 4px solid var(--gh-green);
	border-radius: 4px;
	padding: 1.15rem 1.35rem;
	margin: 0 0 0.5rem;
}

.hb-help__frame strong {
	color: var(--gh-forest);
	display: block;
	margin-top: 0.5rem;
}

.hb-help__checklist {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 0.75rem 1.75rem;
}

.hb-help__checklist li {
	position: relative;
	padding-left: 1.9rem;
	padding-block: 0.4rem;
	color: var(--gh-ink);
}

.hb-help__checklist li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.95rem;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--gh-green);
}

.hb-help__note {
	margin-top: 1.75rem;
	padding: 1.1rem 1.35rem;
	background: var(--gh-mint);
	border-left: 4px solid var(--gh-green);
	border-radius: 4px;
	max-width: 62ch;
	color: var(--gh-ink);
}

/* ---- Steps -------------------------------------------------------------- */

.hb-help__steps-section { background: var(--gh-sand); }

.hb-help__steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1.5rem;
	margin-top: 2rem;
	counter-reset: step;
}

.hb-help__step {
	position: relative;
	padding-top: 3rem;
}

.hb-help__step::before {
	counter-increment: step;
	content: counter(step);
	position: absolute;
	top: 0;
	left: 0;
	width: 2.25rem;
	height: 2.25rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--gh-green);
	color: #fff;
	font-family: 'Space Grotesk', system-ui, sans-serif;
	font-weight: 700;
	font-size: 0.95rem;
}

.hb-help__step h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.hb-help__step p { margin: 0; font-size: 0.96rem; }

/* ---- Safety ------------------------------------------------------------- */

.hb-help__safety { background: #fff; }

.hb-help__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.25rem;
	margin-top: 2rem;
}

.hb-help__card {
	border: 1px solid var(--gh-line);
	border-top: 4px solid var(--gh-green);
	border-radius: 6px;
	padding: 1.5rem 1.4rem;
	background: #fff;
}

.hb-help__card h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.hb-help__card p  { margin: 0; font-size: 0.95rem; }

/* Planning list, sits inside the sand section. */
.hb-help__plan { background: var(--gh-sand); }

.hb-help__plan-list {
	list-style: none;
	padding: 0;
	margin: 1.5rem 0 0;
	max-width: 62ch;
}

.hb-help__plan-list li {
	padding: 0.85rem 0 0.85rem 2rem;
	border-bottom: 1px solid var(--gh-line);
	position: relative;
	color: var(--gh-ink);
}

.hb-help__plan-list li:last-child { border-bottom: 0; }

.hb-help__plan-list li::before {
	content: '';
	position: absolute;
	left: 0.35rem;
	top: 1.35rem;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--gh-green);
}

/* ---- Form --------------------------------------------------------------- */

.hb-help__form-section { background: var(--gh-mint); }

.hb-help__form-shell {
	background: #fff;
	border: 1px solid var(--gh-line);
	border-radius: 8px;
	padding: clamp(1.25rem, 3vw, 2rem);
	margin-top: 1.75rem;
	max-width: 44rem;
}

.hb-help__form-shell label {
	display: block;
	font-family: 'Space Grotesk', system-ui, sans-serif;
	font-weight: 500;
	font-size: 0.95rem;
	color: var(--gh-forest);
	margin-bottom: 0.4rem;
}

.hb-help__form-shell input[type="text"],
.hb-help__form-shell input[type="email"],
.hb-help__form-shell input[type="tel"],
.hb-help__form-shell textarea {
	width: 100%;
	background: #fff;
	color: var(--gh-ink);
	border: 1.5px solid #B9C9BF;
	border-radius: 5px;
	padding: 0.85rem 1rem;
	font-family: inherit;
	font-size: 1rem;
	min-height: 48px;
	margin-bottom: 1.25rem;
}

.hb-help__form-shell textarea { min-height: 7.5rem; resize: vertical; }

/* #5C6B61 on white measures 5.4, so the hint is readable rather than the
   near-invisible grey browsers default to. */
.hb-help__form-shell ::placeholder { color: #5C6B61; opacity: 1; }

.hb-help__form-shell input:focus-visible,
.hb-help__form-shell textarea:focus-visible {
	outline: 3px solid var(--gh-green);
	outline-offset: 2px;
	border-color: transparent;
}

.hb-help__form-shell input[type="submit"] {
	background: var(--gh-green);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 1rem 2.25rem;
	min-height: 52px;
	font-family: 'Space Grotesk', system-ui, sans-serif;
	font-weight: 700;
	font-size: 1rem;
	cursor: pointer;
	width: auto;
}

.hb-help__form-shell input[type="submit"]:hover { background: var(--gh-green-deep); }

.hb-help__form-shell .wpcf7-not-valid-tip {
	color: var(--gh-red-deep);
	font-size: 0.88rem;
	margin: -0.9rem 0 1rem;
}

.hb-help__form-shell .wpcf7-response-output {
	border: 1.5px solid var(--gh-line);
	border-radius: 5px;
	padding: 1rem 1.15rem;
	margin: 1rem 0 0;
	color: var(--gh-ink);
}

.hb-help__before {
	background: #FFF4F2;
	border-left: 4px solid var(--gh-red);
	border-radius: 4px;
	padding: 1.1rem 1.35rem;
	max-width: 62ch;
	color: var(--gh-ink);
}

.hb-help__before strong { color: var(--gh-red-deep); }

.hb-help__missing {
	border: 1.5px dashed var(--gh-line);
	border-radius: 5px;
	padding: 1.25rem;
	color: var(--gh-ink-soft);
}

/* ---- Responsive --------------------------------------------------------- */

@media (max-width: 600px) {
	.hb-help__numbers { grid-template-columns: 1fr; }
	.hb-help__checklist { grid-template-columns: 1fr; }
	.hb-help__form-shell input[type="submit"] { width: 100%; }

	/* On a phone the intro and the emergency heading were pushing the first
	   number to ~1016px on an 844px screen. Everything above the numbers is
	   compressed so at least the first card is reachable without scrolling;
	   the words matter less here than the phone number does. */
	.hb-help section.hb-help__intro {
		padding-block: 1rem 0.85rem;
	}

	.hb-help__intro h1 {
		font-size: 1.5rem;
		margin-bottom: 0.35rem;
	}

	.hb-help__intro p {
		font-size: 0.98rem;
		line-height: 1.45;
	}

	.hb-help section.hb-help__emergency {
		padding-block: 1.1rem 1.5rem;
	}

	.hb-help__emergency h2 {
		font-size: 1.2rem;
		margin-bottom: 0.25rem;
	}

	.hb-help__emergency > .hb-help__wrap > p {
		font-size: 0.92rem;
		line-height: 1.4;
	}

	.hb-help__numbers { margin-top: 0.85rem; }

	.hb-help__number {
		padding: 0.95rem 1.1rem;
		min-height: 84px;
	}

	/* The supporting note under each number is the first thing to go: the
	   label and the digits carry the meaning on their own. */
	.hb-help__number-note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.hb-help__number { transition: none; }
	.hb-help__number:hover { transform: none; }
}