/* ==================================================================
 * iTech Valet — THE CITY REPORTS HUBS  (template-reports-hub.php)
 *
 * /reports/ and /reports/{state}/, THEME-8 (2026-10-26), to the owner's
 * approved board, city-report-hubs.html. Loaded on those two kinds of
 * page only (inc/reports-hub.php section 03). Self-contained: the two
 * artworks are named here rather than loading the check page's sheet
 * for one class.
 *
 *   hero    avc-hero artwork, centred: breadcrumb, Bebas H1 with one
 *           word in Chewy orange, one sentence, the totals line (Chewy
 *           orange numbers, white Bebas labels, no boxes)
 *   list    white/grey artwork: H2 left, search right, the table in a
 *           white card (navy header row, Bebas names, Bebas 28 numbers)
 *   CTA     navy band, the site's orange button
 *
 * SIZES. The board's desktop sizes from 600 up; body copy 22. A phone
 * (599 and under): body 18, H1 40 centred, and the table scrolls sideways
 * INSIDE its card - the page itself never gets wider than the screen.
 *
 * ASSET PATHS ARE ../../img/ - two levels.
 * ================================================================== */

.rh-hero,
.rh-list,
.rh-cta {
	display: flex;
	justify-content: center;
	padding-inline: var(--gutter);
}


/* ---------- THE HERO ---------- */

.rh-hero {
	padding-block: 64px 56px;
	background: #0b4a8f url("../../img/bg/avc-hero.webp") center / cover no-repeat;
	color: var(--c-white);
	text-align: center;
}

.rh-hero__in {
	width: 100%;
	max-width: 1000px;
}

/* The breadcrumb. Its words are the JSON-LD BreadcrumbList's, capitals by
   CSS only. On a dark navy pill, white links and the page itself in the
   Chewy orange: pale blue straight on the artwork could not be read
   (Gerek, 2026-10-26). The links' colour goes through main.css's link
   properties, which its (0,3,1) rule reads. */
.rh-crumbs {
	--link-ink:        var(--c-white);
	--link-ink-hover:  #ffb347;
	--link-rule:       none;
	--link-rule-hover: underline;
	margin: 0 0 18px;
}

.rh-crumbs ol {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2px 10px;
	margin: 0;
	padding: 8px 18px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	background: rgba(6, 26, 58, 0.62);
	list-style: none;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.rh-crumbs li { display: inline-flex; gap: 10px; }
.rh-crumbs li + li::before { content: "\203A"; color: rgba(255, 255, 255, 0.6); }
.rh-crumbs span { color: #ffb347; }

.rh-hero .rh-hero__h1 {
	margin: 0 0 14px;
	font-family: var(--f-display);
	font-size: 72px;
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: 0.5px;
	color: var(--c-white);
}

.rh-chewy {
	font-family: var(--f-accent);
	letter-spacing: 0;
	color: #ffb347;
}

.rh-hero .rh-hero__lead {
	max-width: 760px;
	margin: 0 auto;
	font-size: 22px;
	line-height: 1.45;
	color: #e3f0ff;
}

/* The totals: words on the artwork, nothing round them. */
.rh-totals {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: 10px 34px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.rh-totals li { display: flex; align-items: baseline; gap: 8px; }

.rh-totals__n {
	font-family: var(--f-accent);
	font-size: 40px;
	line-height: 1;
	color: #ffb347;
}

.rh-totals__l {
	font-family: var(--f-display);
	font-size: 22px;
	letter-spacing: 1.5px;
	color: var(--c-white);
}


/* ---------- THE LIST ---------- */

.rh-list {
	padding-block: 56px 64px;
	background: #f3f7fb url("../../img/bg/home-white-grey.webp") center / cover no-repeat;
}

.rh-list__in {
	width: 100%;
	max-width: 1100px;
	min-width: 0;
}

.rh-bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin-bottom: 22px;
}

.rh-list .rh-h2 {
	margin: 0;
	font-family: var(--f-display);
	font-size: 40px;
	font-weight: 400;
	line-height: 1;
	color: #0b2b5a;
}

.rh-search {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 340px;
	max-width: 100%;
	padding: 0 18px;
	border: 1px solid #c9d6e4;
	border-radius: 999px;
	background: var(--c-white);
	color: #8a9bb0;
}

.rh-search[hidden] { display: none; }
.rh-search:focus-within { border-color: #2494e0; box-shadow: 0 0 0 3px rgba(36, 148, 224, 0.2); }
.rh-search__icon { flex: 0 0 auto; width: 20px; height: 20px; }

.rh-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 16px;
	color: #102a43;
	outline: none;
}

.rh-search__input::placeholder { color: #8a9bb0; opacity: 1; }

/* The card holds the shadow and the corners; the table scrolls in it.
   POSITIONED, so the header's screen-reader-only label (absolute) is
   clipped by it: unpositioned, it sat at the table's far edge against
   the page itself and widened a phone's page to 849px. */
.rh-card {
	position: relative;
	overflow-x: auto;
	border-radius: 16px;
	background: var(--c-white);
	box-shadow: 0 12px 28px rgba(16, 42, 67, 0.1);
	-webkit-overflow-scrolling: touch;
}

.rh-table {
	width: 100%;
	min-width: 860px;
	margin: 0;
	border-collapse: collapse;
	font-size: 17px;
}

.rh-table thead th {
	padding: 14px 18px;
	background: #0b2b5a;
	color: var(--c-white);
	font-family: var(--f-display);
	font-size: 19px;
	font-weight: 400;
	letter-spacing: 1px;
	text-align: left;
	white-space: nowrap;
}

.rh-table .rh-c { text-align: center; }

.rh-table tbody th,
.rh-table tbody td {
	padding: 16px 18px;
	border-top: 1px solid #e6edf5;
	color: #2f4660;
	text-align: left;
	vertical-align: middle;
}

.rh-table .rh-name {
	font-family: var(--f-display);
	font-size: 28px;
	font-weight: 400;
	line-height: 1.05;
	color: #0b2b5a;
}

.rh-name small {
	display: block;
	margin-top: 2px;
	font-family: var(--f-body);
	font-size: 13px;
	line-height: 1.3;
	color: #8a9bb0;
}

.rh-table .rh-n {
	font-family: var(--f-display);
	font-size: 28px;
	line-height: 1;
	color: #0b2b5a;
	text-align: center;
}

.rh-table .rh-n--named { color: #e8730f; }

.rh-open {
	font-family: var(--f-display);
	font-size: 26px;
	line-height: 1;
	color: #16a34a;
}

.rh-of,
.rh-none { font-size: 14px; color: #4a5d73; }
.rh-none { color: #8a9bb0; }

/* The seats: the slot board's colours (city-report.css). */
.rh-seats { display: inline-flex; gap: 6px; vertical-align: middle; }
.rh-seat { width: 12px; height: 12px; border-radius: 50%; background: #c9d6e4; }
.rh-seat--open { background: #22c55e; }
.rh-seat--held { background: #f59e0b; }

.rh-go-cell { text-align: right; }

/* A link in a cell: main.css's link rule reads these, so the label stays white. */
.rh-go {
	--link-ink:        var(--c-white);
	--link-ink-hover:  var(--c-white);
	--link-rule:       none;
	--link-rule-hover: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 18px;
	border: 2px solid var(--c-white);
	border-radius: 999px;
	background: linear-gradient(180deg, #f7a21b, #e8730f);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
	color: var(--c-white);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.rh-go:hover,
.rh-go:focus-visible { background: linear-gradient(180deg, #e8730f, #f7a21b); color: var(--c-white); }

.rh-go--ghost {
	--link-ink:       #2494e0;
	--link-ink-hover: #0b2b5a;
}

.rh-go--ghost,
.rh-go--ghost:hover,
.rh-go--ghost:focus-visible {
	border-color: #c9d6e4;
	background: var(--c-white);
	box-shadow: none;
	color: #2494e0;
}

.rh-go--ghost:hover,
.rh-go--ghost:focus-visible { border-color: #2494e0; }

/* A state with no public city yet: greyed, its button still bright. */
.rh-soon .rh-name,
.rh-soon .rh-n { color: #8a9bb0; }
.rh-soon .rh-n--named { color: #c9a07a; }

.rh-table .rh-empty td {
	padding: 28px 18px;
	font-size: 18px;
	color: #4a5d73;
	text-align: center;
}

.rh-list .rh-note {
	margin: 14px 0 0;
	font-size: 16px;
	line-height: 1.5;
	color: #6b7c93;
}

.rh-note a { --link-ink: #2494e0; --link-ink-hover: #0b2b5a; }


/* ---------- THE QUESTIONS (REPORTS-11) ----------
   Four rows that open, white on the page's pale grey, the same words as
   the hub's FAQPage. */

.rh-faq {
	display: flex;
	justify-content: center;
	padding: 48px var(--gutter) 56px;
	background: #f3f7fb;
}

.rh-faq__in {
	width: 100%;
	max-width: 1100px;
	min-width: 0;
}

.rh-faq .rh-h2 {
	margin: 0 0 20px;
	font-family: var(--f-display);
	font-size: 40px;
	font-weight: 400;
	line-height: 1;
	color: #0b2b5a;
}

.rh-faq__rows {
	display: grid;
	gap: 12px;
}

.rh-faq__row {
	border-radius: 14px;
	background: var(--c-white);
	box-shadow: 0 8px 20px rgba(16, 42, 67, 0.08);
}

.rh-faq__row summary {
	padding: 18px 22px;
	font-size: 20px;
	font-weight: 700;
	color: #0b2b5a;
	cursor: pointer;
}

.rh-faq__a {
	margin: 0;
	padding: 0 22px 20px;
	font-size: 19px;
	line-height: 1.55;
	color: #31475f;
}


/* ---------- THE CTA ---------- */

.rh-cta {
	padding-block: 56px;
	background: #0b2b5a;
	color: var(--c-white);
	text-align: center;
}

.rh-cta__in {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: 760px;
}

.rh-cta .rh-cta__h2 {
	margin: 0;
	font-family: var(--f-display);
	font-size: 44px;
	font-weight: 400;
	line-height: 1;
	color: var(--c-white);
}

.rh-cta .rh-cta__p {
	margin: 0;
	font-size: 22px;
	line-height: 1.5;
	color: #dbeeff;
}

.rh-cta .rh-cta__btn {
	padding: 16px 36px;
	font-size: 19px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}


/* ---------- A PHONE ---------- */

@media (max-width: 599px) {
	.rh-hero { padding-block: 40px 36px; }
	.rh-hero .rh-hero__h1 { font-size: 40px; }
	.rh-hero .rh-hero__h1 br { display: none; }
	.rh-hero .rh-hero__lead { font-size: 18px; }
	.rh-totals { gap: 8px 22px; margin-top: 20px; }
	.rh-totals__n { font-size: 32px; }
	.rh-totals__l { font-size: 19px; }

	.rh-list { padding-block: 40px 48px; }
	.rh-list .rh-h2 { font-size: 34px; }
	.rh-faq { padding-block: 36px 44px; }
	.rh-faq .rh-h2 { font-size: 34px; }
	.rh-faq__row summary { font-size: 18px; }
	.rh-faq__a { font-size: 17px; }
	.rh-search { width: 100%; }

	/* The one-line message of an empty table stays on screen: held at the
	   card's left edge while the (wider) table scrolls behind it. */
	.rh-table .rh-empty td { text-align: left; }
	.rh-empty__msg {
		position: sticky;
		left: 18px;
		display: inline-block;
		max-width: calc(100vw - 2 * var(--gutter) - 36px);
	}

	.rh-cta { padding-block: 44px; }
	.rh-cta .rh-cta__h2 { font-size: 36px; }
	.rh-cta .rh-cta__p { font-size: 18px; }
	.rh-cta .rh-cta__btn { padding: 14px 26px; font-size: 18px; }
}


/* No movement for those who asked for none: the buttons do not lift. */
@media (prefers-reduced-motion: reduce) {
	.rh-go,
	.rh-cta .rh-cta__btn { transition: none; }
	.rh-cta .rh-cta__btn:hover,
	.rh-cta .rh-cta__btn:focus-visible { transform: none; }
}