/* Component "faq_hub" (11e): the page of answers, set like a book's contents. A big serif title, then the topics: on phones a
   chip rail under the title; from 900 px a sticky index in the left column, the questions right. */
:is(#rmh-landing, .rmh-lc) .rmh-l-hub { padding-block: clamp(48px, 7vw, 104px) var(--l-band); background: var(--l-white); }
:is(#rmh-landing, .rmh-lc) .rmh-l-hub__head { max-width: 880px; padding-bottom: clamp(28px, 4vw, 48px); border-bottom: 1px solid var(--l-sand); }
:is(#rmh-landing, .rmh-lc) h1.rmh-l-hub__title:not(#_) { font-size: clamp(40px, 22px + 3.6vw, 80px); margin-bottom: 20px; }
:is(#rmh-landing, .rmh-lc) .rmh-l-hub__head .rmh-l__line { max-width: 52ch; }

/* phones: the topics as a chip rail under the title (not sticky: the theme's header and the phone bar already hold the edges) */
:is(#rmh-landing, .rmh-lc) .rmh-l-hub__index {
	margin-inline: calc(-1 * var(--l-gutter)); padding: 16px var(--l-gutter); border-bottom: 1px solid var(--l-sand);
}
:is(#rmh-landing, .rmh-lc) .rmh-l-hub__list { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
:is(#rmh-landing, .rmh-lc) .rmh-l-hub__index ul::-webkit-scrollbar { display: none; }
:is(#rmh-landing, .rmh-lc) .rmh-l-hub__topic {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid #CFC4B8; border-radius: 999px;
	font: 500 15px/1 var(--l-sans); color: var(--l-ink); text-decoration: none; white-space: nowrap; background: var(--l-white);
	transition: background-color .2s, color .2s, border-color .2s;
}
:is(#rmh-landing, .rmh-lc) .rmh-l-hub__topic:hover { background: var(--l-ink); border-color: var(--l-ink); color: var(--l-white); }

:is(#rmh-landing, .rmh-lc) .rmh-l-hub__group { padding-top: clamp(40px, 5vw, 64px); scroll-margin-top: 88px; }
:is(#rmh-landing, .rmh-lc) h2.rmh-l-hub__h:not(#_) {
	margin: 0 0 12px; font-family: var(--l-serif) !important; font-size: clamp(26px, 18px + 1.2vw, 34px); font-weight: 400;
	line-height: 1.15; letter-spacing: 0; text-transform: none; color: inherit;
}
:is(#rmh-landing, .rmh-lc) .rmh-l-hub__after { margin-top: clamp(40px, 5vw, 64px); }

@media (min-width: 900px) {
	:is(#rmh-landing, .rmh-lc) .rmh-l-hub__grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 72px; align-items: start; }
	:is(#rmh-landing, .rmh-lc) .rmh-l-hub__index {
		position: sticky; top: 120px; margin: 0; padding: clamp(40px, 5vw, 64px) 0 0; background: none; border: 0;
	}
	:is(#rmh-landing, .rmh-lc) .rmh-l-hub__list { display: grid; gap: 2px; overflow: visible; counter-reset: rmh-hub; }
	/* the index reads like a contents page: a numeral, the topic, a hairline */
	:is(#rmh-landing, .rmh-lc) .rmh-l-hub__topic {
		display: flex; gap: 14px; width: 100%; min-height: 44px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--l-sand);
		border-radius: 0; background: none; font-size: 16px; white-space: normal; line-height: 1.3; counter-increment: rmh-hub;
	}
	:is(#rmh-landing, .rmh-lc) .rmh-l-hub__topic::before {
		content: counter(rmh-hub, decimal-leading-zero); font: 400 15px/1.3 var(--l-serif); color: var(--l-taupe-deep);
	}
	:is(#rmh-landing, .rmh-lc) .rmh-l-hub__topic:hover { background: none; color: var(--l-taupe-deep); }
	:is(#rmh-landing, .rmh-lc) .rmh-l-hub__topic[aria-current="true"] { color: var(--l-taupe-deep); border-bottom-color: var(--l-taupe-deep); }
	:is(#rmh-landing, .rmh-lc) .rmh-l-hub__group { scroll-margin-top: 120px; }
	:is(#rmh-landing, .rmh-lc) .rmh-l-hub__group:first-child { padding-top: clamp(40px, 5vw, 64px); }
}