/* Get Help page (page-templates/get-help.php). Same column, colors and
   type as the rest of the site. The site's type scale (typography.css)
   only reaches editor content, so this page sets its heading sizes to
   the same values: h1 56/64, h2 40/48, h3 24/32 (phone 40/46, 30/38,
   20/28); card names 18/24. */

.gh {
	--ink: rgb(18, 20, 9);
	--body: rgb(90, 90, 90);
	--red: rgb(196, 20, 22);
	--paper: #faf8f4;
	--line: #e4e0d8;
	--cond: "Roboto Condensed", "Arial Narrow", sans-serif;
	--sans: Arial, Helvetica, sans-serif;
	flex: 1 1 100%;
	width: 100%;
	color: var(--ink);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 26px;
}
.gh *, .gh *::before, .gh *::after { box-sizing: border-box; }
.gh [hidden] { display: none !important; }
.gh-wrap { width: min(1170px, 90%); margin: 0 auto; }
.gh a:focus-visible, .gh button:focus-visible, .gh input:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.gh h1, .gh h2, .gh h3, .gh h4 {
	font-family: var(--cond);
	font-weight: 700;
	color: var(--ink);
	text-transform: none;
	letter-spacing: normal;
	margin: 0;
}
.gh p { margin: 0; }

/* Masthead and urgent numbers */
.gh-masthead { padding: 64px 0 40px; }
.gh-kicker { font-family: var(--cond); font-weight: 700; font-size: 16px; line-height: 24px; color: var(--red); margin-bottom: 8px !important; }
.gh .gh-title { font-size: 56px; line-height: 64px; margin-bottom: 16px; }
.gh-lead { font-size: 20px; line-height: 32px; color: var(--body); max-width: 40em; }

.gh-urgent { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 32px; max-width: 760px; }
.gh .gh-urgent__btn {
	display: flex; flex-direction: column; justify-content: center;
	min-height: 88px; padding: 12px 16px; border-radius: 10px;
	background: var(--ink); color: #fff; text-decoration: none; text-align: center;
}
.gh .gh-urgent__btn--red { background: var(--red); }
.gh-urgent__btn b { font-family: var(--cond); font-size: 32px; line-height: 36px; }
.gh-urgent__btn span { font-size: 14px; line-height: 18px; }
.gh .gh-urgent__btn:hover { filter: brightness(1.15); }
.gh-urgent__note { margin-top: 12px !important; font-size: 14px; line-height: 22px; color: var(--body); }
.gh-urgent__note a { color: var(--ink); font-weight: 700; }

.gh-note { margin-top: 28px !important; max-width: 760px; padding: 14px 18px; background: var(--paper); border-left: 4px solid var(--ink); }
.gh-callahead { margin-top: 10px !important; font-size: 14px; line-height: 22px; color: var(--body); }

/* Search and tiles, on a paper band */
.gh-finder { background: var(--paper); padding: 40px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.gh-search { margin-bottom: 24px; }
.gh .gh-search input {
	width: 100%; max-width: 640px; height: 52px; padding: 0 20px;
	border: 2px solid var(--ink); border-radius: 999px; background: #fff;
	font: 16px/1 var(--sans); color: var(--ink);
}
.gh-count { margin-top: 10px !important; font-size: 14px; color: var(--body); min-height: 22px; }
.gh-nomatch { margin-top: 10px !important; font-weight: 700; }
.gh .gh-clear {
	margin-left: 8px; padding: 6px 14px; border: 1.5px solid var(--ink); border-radius: 999px;
	background: #fff; color: var(--ink); font: 700 14px/1 var(--cond); cursor: pointer;
}

.gh-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gh .gh-tile {
	display: flex; gap: 12px; align-items: flex-start; min-height: 72px;
	padding: 14px; border: 1px solid var(--line); border-radius: 10px;
	background: #fff; color: var(--ink); text-decoration: none;
}
.gh .gh-tile:hover { border-color: var(--ink); }
.gh-icon { flex: none; width: 26px; height: 26px; color: var(--red); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gh-tile__text b { display: block; font-family: var(--cond); font-size: 17px; line-height: 21px; }
.gh-tile__text span { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--body); }

/* Directory */
.gh-directory { padding: 24px 0 72px; }
.gh-topic { padding-top: 48px; scroll-margin-top: 16px; }
.gh .gh-topic h2 { font-size: 40px; line-height: 48px; margin-bottom: 8px; }
.gh-start { color: var(--body); max-width: 46em; margin-bottom: 8px !important; }
.gh-section { margin-top: 24px; scroll-margin-top: 16px; }
.gh .gh-section h3 { font-size: 24px; line-height: 32px; margin-bottom: 4px; }
.gh-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.gh-note-after { margin-top: 12px !important; font-size: 14px; line-height: 22px; color: var(--body); }
.gh .gh-top { display: inline-block; margin-top: 16px; font: 700 14px/1 var(--cond); color: var(--body); }

.gh-card { padding: 18px; border: 1px solid var(--line); border-radius: 10px; background: #fff; display: flex; flex-direction: column; }
.gh .gh-card__name { font-size: 18px; line-height: 24px; }
.gh .gh-card__name a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.gh-card__offer { margin-top: 4px !important; color: var(--body); font-size: 15px; line-height: 23px; }
.gh .gh-card__meta { list-style: none; margin: 8px 0 0; padding: 0; font-size: 14px; line-height: 21px; color: var(--body); }
.gh-card__meta b { color: var(--ink); }
.gh-card__meta a { color: var(--ink); font-weight: 700; }
.gh-card__phone--dup { display: none; }
.gh-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 14px; }
.gh .gh-btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
	padding: 0 20px; border-radius: 999px; font: 700 16px/1 var(--cond); text-decoration: none;
}
.gh .gh-btn--call { background: var(--red); color: #fff; }
.gh .gh-btn--call:hover { background: var(--ink); }
.gh .gh-btn--site { border: 1.5px solid var(--ink); color: var(--ink); }
.gh .gh-btn--site:hover { background: var(--ink); color: #fff; }

.gh-closing { margin-top: 56px !important; padding-top: 24px; border-top: 1px solid var(--line); color: var(--body); }
.gh-closing a { color: var(--ink); font-weight: 700; }

@media (max-width: 900px) {
	.gh-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.gh-cards { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.gh-masthead { padding: 40px 0 32px; }
	.gh .gh-title { font-size: 40px; line-height: 46px; }
	.gh-lead { font-size: 18px; line-height: 28px; }
	.gh-urgent { gap: 8px; }
	.gh .gh-urgent__btn { min-height: 80px; padding: 10px 6px; }
	.gh-urgent__btn b { font-size: 26px; line-height: 30px; }
	.gh-urgent__btn span { font-size: 12px; line-height: 15px; }
	.gh-finder { padding: 28px 0; }
	.gh-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.gh .gh-tile { padding: 12px 10px; gap: 9px; }
	.gh-tile__text b { font-size: 16px; line-height: 20px; }
	.gh-tile__text span { font-size: 12px; line-height: 16px; }
	.gh .gh-topic h2 { font-size: 30px; line-height: 38px; }
	.gh .gh-section h3 { font-size: 20px; line-height: 28px; }
}

@media print {
	#masthead, #colophon, .gh-finder, .gh-top, .gh-card__actions { display: none !important; }
	.gh-card__phone--dup { display: list-item !important; }
	.gh .gh-urgent__btn { min-height: 0; background: none !important; color: var(--ink); border: 1px solid #999; }
	.gh-cards { grid-template-columns: 1fr; }
	.gh-card { break-inside: avoid; border-color: #999; }
	.gh-topic { break-before: auto; padding-top: 24px; }
	.gh-card__name a[href^="http"]::after { content: " (" attr(href) ")"; font-weight: 400; font-size: 12px; }
	.gh-card__meta a::after { content: ""; }
}