/* Get Help page (page-templates/get-help.php), a directory in three
   columns: topics rail, list of rows, panel for the selected row.

   Without JavaScript (and in print) it is one plain column with every
   row's details shown. get-help.js adds .is-js, and these rules build the
   directory on top. Hiding uses the grid-rows collapse: a hidden group,
   section or row gets .is-shut, and its one child (…__in) shrinks to 0.
   Vertical space inside a collapsing box comes from ::before/::after
   blocks, not padding, so nothing is left showing when it is shut.

   Type matches the rest of the site (typography.css): Roboto Condensed
   700, no capitals, normal letter spacing. */

.gh {
	/* Short names for the site tokens (style.css). */
	--ink: var(--rhsa-ink);
	--body: var(--rhsa-body);
	--red: var(--rhsa-red);
	--red-on-dark: var(--rhsa-red-on-dark);
	--tint: var(--rhsa-tint);
	--line: var(--rhsa-line);
	--cond: var(--rhsa-cond);
	--sans: var(--rhsa-sans);
	--gh-selected: #fbe7e6;
	--gh-ease: cubic-bezier(.2, 0, 0, 1);
	--gh-top: calc(var(--rhsa-sticky-top, 0px) + 16px);
	/* The site column (90%, max 1170px); the parent is a flex row. */
	flex: 0 0 min(1170px, 90%);
	width: min(1170px, 90%);
	margin: 0 auto;
	padding: 56px 0 72px;
	color: var(--ink);
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.55;
}
.gh *, .gh *::before, .gh *::after { box-sizing: border-box; }
.gh [hidden] { display: none !important; }
.gh p { margin: 0; }
.gh ul { list-style: none; margin: 0; padding: 0; }
.gh :is(a, button, input, .gh-panel h3):focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

.gh :is(h1, h2, h3) {
	margin: 0;
	font-family: var(--cond);
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
	color: var(--ink);
}
.gh-kicker, .gh-eyebrow, .gh .gh-now h2, .gh-kv dt {
	font-family: var(--cond);
	font-weight: 700;
	text-transform: none;
	letter-spacing: normal;
}
.gh h1 { text-transform: uppercase; }

/* Header: title on the left, search on the right */
.gh-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; padding-bottom: 24px; margin-bottom: 32px; border-bottom: 1px solid var(--line); }
.gh-kicker { font-size: 16px; line-height: 24px; color: var(--red); margin-bottom: 8px !important; }
.gh .gh-title { font-size: 56px; line-height: 1; margin-bottom: 12px; }
.gh-lead { font-size: 18px; color: var(--body); max-width: 40em; }
.gh-search { flex: 0 0 340px; }
.gh .gh-search input {
	width: 100%; height: 48px; padding: 0 18px;
	border: 2px solid var(--ink); border-radius: 999px; background: #fff;
	font: 16px/1 var(--sans); color: var(--ink);
}
/* The narrowest phones: room for the whole placeholder. */
@media (max-width: 359px) { .gh .gh-search input { padding: 0 12px; } }
.gh-count { min-height: 22px; margin-top: 6px !important; font-size: 14px; line-height: 22px; color: var(--body); }
.gh-nomatch { margin-top: 6px !important; font-weight: 700; font-size: 14px; line-height: 22px; }
.gh .gh-clear {
	position: relative;
	min-height: 32px; margin-left: 6px; padding: 0 14px; border: 1.5px solid var(--ink); border-radius: 999px;
	background: #fff; color: var(--ink); font: 700 14px/1 var(--cond); cursor: pointer;
}
/* A 44px tap target around the 32px pill. */
.gh .gh-clear::after { content: ""; position: absolute; inset: -7px -2px; }
.gh .gh-clear:hover { background: var(--ink); color: #fff; }

/* Right now: plain numbers, not links */
.gh-now { margin-top: 20px; padding: 16px; border-radius: 6px; background: var(--ink); color: #fff; }
.gh .gh-now h2 { font-size: 15px; line-height: 20px; color: var(--red-on-dark); margin-bottom: 8px; }
.gh-now li { display: flex; gap: 10px; align-items: baseline; padding: 4px 0; font-size: 14px; line-height: 20px; }
.gh-now li b { flex: 0 0 38px; font: 700 20px/1 var(--cond); }
.gh-now p { margin-top: 10px !important; font-size: 13px; line-height: 19px; color: rgba(255, 255, 255, .8); }
.gh-now-slim { display: none; }

/* Topics rail */
.gh-cats { display: none; }
.gh .gh-cat {
	display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%;
	min-height: 40px; padding: 8px 12px; border: 0; border-radius: 3px;
	background: none; color: var(--ink); text-align: left; cursor: pointer;
	font: 700 15px/1.2 var(--cond);
}
.gh .gh-cat:hover { background: var(--tint); }
.gh .gh-cat[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: inset 4px 0 0 var(--red); }
.gh-cat__n { font: 400 13px/1 var(--sans); color: var(--body); }
.gh-cat[aria-pressed="true"] .gh-cat__n { color: rgba(255, 255, 255, .75); }

/* Phones: a topic bar in the rail opens the topics in a sheet from the
   bottom (a modal <dialog>; get-help.js moves .gh-cats into it). */
.gh-topic { display: none; }
.gh .gh-topic {
	align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 0 20px;
	border: 2px solid var(--ink); border-radius: 999px; background: #fff; color: var(--ink);
	font: 16px/1.2 var(--sans); text-align: left; cursor: pointer;
}
.gh .gh-topic:hover { background: var(--tint); }
.gh-topic__label { color: var(--body); font-size: 14px; }
.gh-topic__name { font: 700 17px/1.2 var(--cond); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gh-topic__n { font-size: 13px; color: var(--body); }
/* Chevron */
.gh-topic::after {
	content: ""; flex: none; width: 8px; height: 8px; margin: -4px 2px 0 auto;
	border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.gh-sheet {
	width: 100%; max-width: 100%; max-height: 85vh; margin: auto 0 0; padding: 0 16px max(16px, env(safe-area-inset-bottom));
	border: 0; border-radius: 12px 12px 0 0; background: #fff; color: var(--ink);
	overflow-y: auto; overscroll-behavior: contain;
}
.gh-sheet[open] { animation: gh-sheet-up 260ms var(--gh-ease); }
.gh-sheet::backdrop { background: rgba(0, 0, 0, .45); }
@keyframes gh-sheet-up { from { transform: translateY(100%); } }
.gh-sheet__head {
	position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center;
	margin-bottom: 4px; padding: 12px 0 8px; background: #fff; border-bottom: 1px solid var(--line);
}
.gh .gh-sheet h2 { font-size: 20px; line-height: 28px; }
.gh .gh-sheet__close {
	width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; border-radius: 999px;
	background: none; color: var(--ink); font: 400 30px/1 var(--sans); cursor: pointer;
}
.gh .gh-sheet__close:hover { background: var(--tint); }
.gh-sheet .gh-cats { display: block; }
.gh-sheet .gh-cats li + li { margin-top: 2px; }

/* Groups (topics) and sections */
.gh-group__in::after { content: ""; display: block; height: 40px; }
.gh-group__head { position: relative; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding-bottom: 14px; margin-bottom: 12px; }
.gh :is(.gh-group, .gh-best) h2 { font-size: 28px; line-height: 1.1; }
/* Best matches: copies of the strongest search results, styled like a group. */
.gh-best { padding-bottom: 40px; }
.gh-best[hidden] { display: none; }
.gh-group__count { font-size: 14px; color: var(--body); }
.gh-group__head::before { content: ""; position: absolute; left: 0; bottom: 0; width: 48px; height: 4px; background: var(--red); }
.gh-start { color: var(--body); max-width: 46em; margin-bottom: 8px !important; }
.gh-focus__in::before { content: ""; display: block; height: 8px; }
.gh .gh-focus h3 { font: 700 16px/22px var(--cond); color: var(--body); margin: 10px 0 4px; }
.gh-note-after { margin-top: 10px !important; font-size: 14px; line-height: 22px; color: var(--body); }

/* Rows */
.gh-item { border-bottom: 1px solid var(--line); }
.gh .gh-row {
	display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center;
	width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 3px;
	background: none; color: var(--ink); text-align: left; cursor: pointer; font: 16px/1.3 var(--sans);
}
.gh .gh-row:hover { background: var(--tint); }
.gh .gh-row[aria-current="true"] { background: var(--gh-selected); }
.gh-row[aria-current="true"] .gh-row__name { color: var(--red); }
.gh-row[aria-current="true"] .gh-row__loc { color: #555; }
.gh-row__name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gh-row__loc { font-size: 13px; color: var(--body); white-space: nowrap; }
.gh-row__phone { min-width: 112px; font-size: 14px; text-align: right; white-space: nowrap; }

/* Details: under each row without JS, in the panel with it */
.gh-details__in { padding: 0 12px; }
.gh-details__in::before, .gh-details__in::after { content: ""; display: block; height: 12px; }
.gh-eyebrow { font-size: 14px; line-height: 20px; color: var(--red); }
.gh-details__name { font: 700 20px/1.2 var(--cond); margin: 2px 0 8px !important; }
.gh-offer { margin-bottom: 12px !important; }
.gh-kv { margin: 0 0 12px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 21px; }
.gh-kv div { display: grid; grid-template-columns: 64px 1fr; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.gh-kv dt { padding-top: 1px; font-size: 13px; line-height: 20px; color: var(--body); }
.gh-kv dd { margin: 0; }
.gh-phone { font-size: 14px; line-height: 21px; margin-bottom: 4px !important; }
.gh-phone a { color: var(--ink); font-weight: 700; }
.gh-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.gh .gh-btn {
	display: flex; align-items: center; justify-content: center; min-height: 48px;
	padding: 0 20px; border-radius: 999px; text-align: center; text-decoration: none;
	font: 700 16px/1.1 var(--cond);
}
.gh .gh-btn--call { background: var(--red); color: #fff; border: 2px solid var(--red); }
.gh .gh-btn--call:hover { background: var(--ink); border-color: var(--ink); }
.gh .gh-btn--site { border: 2px solid var(--ink); color: var(--ink); }
.gh .gh-btn--site:hover { background: var(--ink); color: #fff; }

/* Without JS the row already names the entry; keep the details compact. */
.gh:not(.is-js) .gh-details__name { display: none; }
.gh:not(.is-js) .gh-actions { flex-direction: row; flex-wrap: wrap; }
.gh:not(.is-js) .gh-details__in { max-width: 720px; }
.gh-now { margin-bottom: 32px; }
/* With JS the box is off screen at every width (phones get .gh-now-slim);
   it stays without JS and in print. */
.is-js .gh-now { display: none; }

/* Panel */
.gh-panel { display: none; }
.gh .gh-panel h3 { font-size: 26px; line-height: 32px; margin: 4px 0 10px; }
.gh-panel__empty { color: var(--body); }

/* Footnotes */
.gh-foot { padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; line-height: 22px; color: var(--body); }
.gh-foot p + p { margin-top: 8px !important; }
.gh-foot a { color: var(--ink); font-weight: 700; }

/* ---- With JavaScript: the directory ---------------------------------- */

.is-js .gh-cats { display: block; }
.is-js .gh-group, .is-js .gh-focus, .is-js .gh-item {
	display: grid; grid-template-rows: 1fr; opacity: 1;
	transition: grid-template-rows var(--gh-t) var(--gh-ease), opacity var(--gh-t) var(--gh-ease);
}
.is-js .gh-group { --gh-t: 380ms; }
.is-js .gh-focus, .is-js .gh-item { --gh-t: 300ms; }
.is-js .is-shut { grid-template-rows: 0fr; opacity: 0; }
.is-js :is(.gh-group__in, .gh-focus__in, .gh-item__in, .gh-details__in) { overflow: hidden; min-height: 0; }
.is-js .gh-item.is-shut { border-bottom-color: transparent; }
.gh-instant, .gh-instant * { transition: none !important; }

@media (min-width: 900px) {
	.is-js .gh-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
	.is-js .gh-rail { position: sticky; top: var(--gh-top); max-height: calc(100vh - var(--gh-top) - 16px); overflow-y: auto; }
	.is-js .gh-details { display: none; }
	.is-js .gh-panel {
		display: block; position: sticky; top: var(--gh-top);
		min-height: 440px; padding: 24px; border-radius: 6px; background: var(--tint);
	}
}
@media (min-width: 900px) and (max-width: 1099px) {
	.is-js .gh-layout { grid-template-columns: 200px minmax(0, 1fr) minmax(260px, 300px); gap: 24px; }
	.gh-row__phone { display: none; }
	.gh .gh-row { grid-template-columns: minmax(0, 1fr) auto; }
	.gh-head { flex-wrap: wrap; }
	.gh-search { flex: 1 1 100%; max-width: 480px; }
}

/* ---- Phones and small tablets ---------------------------------------- */

@media (max-width: 899px) {
	.gh { padding-top: 32px; }
	.gh-head { flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 16px; }
	.gh-search { flex: none; }
	.gh .gh-title { font-size: 40px; }
	.gh-lead { font-size: 16px; }
	.gh :is(.gh-group, .gh-best) h2 { font-size: 24px; }

	.is-js .gh-now-slim {
		display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 12px;
		padding: 10px 14px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 14px; line-height: 22px;
	}
	.gh-now-slim b { font-family: var(--cond); }
	.is-js .gh-rail {
		position: sticky; top: calc(var(--gh-top) - 16px); z-index: 5;
		margin-bottom: 16px; padding: 8px 0; background: #fff; border-bottom: 1px solid var(--line);
	}
	/* The topics live in the sheet; the rail shows the topic bar. */
	.is-js .gh-rail > .gh-cats { display: none; }
	.is-js .gh-topic { display: flex; }
	.gh .gh-cat { min-height: 48px; padding: 8px 16px; }

	.gh .gh-row { grid-template-columns: minmax(0, 1fr) auto; min-height: 52px; }
	.gh-row__phone { display: none; }
	.is-js .gh-details { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms var(--gh-ease); }
	.is-js .gh-item.is-open .gh-details { grid-template-rows: 1fr; }
	.is-js .gh-details__in { background: var(--tint); border-radius: 0 0 6px 6px; }
	.gh-actions { flex-direction: row; flex-wrap: wrap; }
	.gh-actions .gh-btn { flex: 1 1 200px; }
}

@media (prefers-reduced-motion: reduce) {
	.gh *, .gh { transition: none !important; }
	.gh-sheet[open] { animation: none; }
}

/* ---- Print: everything, rows in two columns --------------------------
   Each row prints its name and town, then its details on short lines.
   The details' phone line is the full one (hours, other numbers), so the
   row's own phone and the town eyebrow are left out. */

@media print {
	@page { margin: 12mm; }
	.rhsa-header, .rhsa-to-top, #colophon, .gh-search, .gh-best, .gh-cats, .gh-topic, .gh-panel, .gh-now-slim, .gh .gh-btn--call,
	.gh-row__phone, .gh-eyebrow, .gh-details__name { display: none !important; }
	.gh { width: 100%; padding: 0; font-size: 10pt; line-height: 1.35; }
	.gh-head { display: block; padding-bottom: 8pt; margin-bottom: 10pt; }
	.gh .gh-title { font-size: 24pt; margin-bottom: 4pt; }
	.gh-kicker { font-size: 10pt; margin-bottom: 2pt !important; }
	.gh-lead { font-size: 11pt; }
	.gh-layout { display: block !important; }
	.gh .gh-rail { position: static; margin: 0; padding: 0; border: 0; }
	.gh .gh-now { display: block !important; margin: 0 0 12pt; padding: 6pt 10pt; background: none; color: var(--ink); border: 1px solid #999; }
	.gh .gh-now h2, .gh-now p { color: var(--ink); }
	.gh .gh-now h2 { margin-bottom: 2pt; }
	.gh-now ul { display: flex; flex-wrap: wrap; gap: 0 18pt; }
	.gh-now p { margin-top: 2pt !important; }
	.gh .is-shut { grid-template-rows: 1fr !important; opacity: 1 !important; }
	.gh .gh-group, .gh .gh-focus, .gh .gh-item, .gh .gh-details { display: block !important; }
	.gh-group__in::after { height: 10pt; }
	.gh-group__head { padding-bottom: 4pt; margin-bottom: 4pt; break-after: avoid; }
	.gh .gh-group h2 { font-size: 16pt; }
	.gh-start, .gh-note-after { font-size: 9pt; line-height: 1.35; margin-bottom: 2pt !important; }
	.gh-focus__in::before { height: 0; }
	.gh .gh-focus h3 { font-size: 11pt; line-height: 1.2; margin: 6pt 0 2pt; break-after: avoid; }
	.gh-items { columns: 2; column-gap: 18pt; }
	.gh-item { break-inside: avoid; padding: 4pt 0; }
	.gh .gh-row { display: block; padding: 0; min-height: 0; font-size: 10pt; line-height: 1.3; background: none !important; border: 0 !important; box-shadow: none !important; }
	.gh-row__name { white-space: normal; overflow: visible; }
	.gh-row__loc { display: inline !important; font-size: 9pt; }
	.gh-row__loc:empty { display: none !important; }
	.gh-row__loc::before { content: " · "; }
	.gh .gh-details__in { max-width: none; padding: 0; overflow: visible; background: none; font-size: 9pt; line-height: 1.3; }
	.gh-details__in::before, .gh-details__in::after { display: none; }
	.gh-offer { margin-bottom: 0 !important; }
	.gh .gh-kv { margin: 0; border: 0; font-size: 9pt; line-height: 1.3; }
	.gh .gh-kv div { display: block; padding: 0; border: 0; }
	.gh-kv dt, .gh-kv dd { display: inline; }
	.gh .gh-kv dt { font-size: 9pt; line-height: 1.3; }
	.gh-kv dt::after { content: ": "; }
	.gh-phone { margin: 0 !important; font-size: 9pt; line-height: 1.3; }
	.gh .gh-actions { display: block; margin: 0; }
	/* The link text ("Visit website →") gives way to the address. */
	.gh .gh-btn--site { display: inline; min-height: 0; padding: 0; border: 0; font: 0/1.3 var(--sans); overflow-wrap: anywhere; }
	.gh .gh-btn--site::after { content: attr(href); font-size: 9pt; }
	.gh .gh-btn--site + .gh-btn--fb::before { content: " · "; font-size: 9pt; }
}