/* Inner-page layout system (DESIGN.md "Inner pages"). Linked by templates/_breadcrumbs.tpl, i.e. on every public page
   except the homepage (incl. the /register/ wizard). ONE site container, the same box as the header (.sh__in) and the
   footer (.sf__in): max 1200px, 24px gutters (16px at <= 480px). The band title and breadcrumbs, the page content and the
   footer text all start at that container's left content edge at every width. Two variants:
   A. left-aligned system (articles, CMS pages, downloads, account, speed test): two content widths, both LEFT-aligned
      (never a centered narrow column under a left-aligned title):
     reading  --rt-reading (70ch): prose (articles, terms, privacy, guides, DOH, contact) - .rt-art__body, .rt-readable
     wide     the full container: listings, downloads, account, speed test, FAQ/article cards
   B. focused task pages (rt-band--center: sign-in, recovery, new password, newsletter, mail confirmation, account deletion
      cancel, and the /register/ wizard column): band breadcrumb + title centered over a centered 456px card (760px wizard
      column), still inside the same container, so band center == card center.
   Per-page sheets must not set their own max-width/margin on the page container: they take the rules below.
   Band markup:
     <div id="pageHeaderWrapper" class="rt-band [rt-band--overlap]"><div class="pageHeader">
       <nav class="rt-bc" aria-label="..."><ol>...<li aria-current="page">...</li></ol></nav>
       <h1 class="rt-page-title">...</h1><p class="rt-page-lead">...</p>
     </div></div>
   rt-band--overlap: a card (login, recover, newsletter) sits on the band's lower edge. The breadcrumb trail is rendered by
   the shared templates/_breadcrumbs.tpl. */

:root { --rt-container: 1200px; --rt-gutter: 24px; --rt-reading: 70ch; }
@media (max-width: 480px) { :root { --rt-gutter: 16px; } }

/* band: same box as the header */
div#pageHeaderWrapper div.pageHeader {
  box-sizing: border-box; width: 100%; max-width: var(--rt-container) !important; margin-left: auto; margin-right: auto;
  padding-left: var(--rt-gutter) !important; padding-right: var(--rt-gutter) !important; text-align: left !important;
}

/* content: every page container is the site container (the Bootstrap .container of CMS pages, downloads and account too).
   Bootstrap's .row (-15px) and column (15px) gutters cancel out, so the text starts at the container's content edge. */
div#contentWrapper > .container,
div#contentWrapper > #contentBackground > .container,
div#contentWrapper > .rt-arts,
div#contentWrapper > .rt-art,
div#contentWrapper > .rt-more,
div#contentWrapper > .rt-auth,
div#contentWrapper > .rt-st {
  box-sizing: border-box; width: 100%; max-width: var(--rt-container); margin-left: auto; margin-right: auto;
  padding-left: var(--rt-gutter); padding-right: var(--rt-gutter);
}
/* reading width: left-aligned inside the container, no sheet, no inner padding */
.pageContent .rt-readable,
div#contentWrapper .rt-art__body,
div#contentWrapper .rt-art__foot { max-width: var(--rt-reading); margin-left: 0; margin-right: auto; }

/* focused-task variant (sign in, recovery, newsletter, mail confirmation, account deletion cancel): band text centered over a
   centered card, inside the same container */
div#pageHeaderWrapper.rt-band--center div.pageHeader { text-align: center !important; }
.rt-band--center .rt-bc ol { justify-content: center; }
.rt-band--center .rt-page-lead { margin-left: auto !important; margin-right: auto !important; max-width: 52ch !important; }

div#pageHeaderWrapper.rt-band { padding-top: clamp(20px, 3vw, 32px) !important; }
div#pageHeaderWrapper.rt-band--overlap { padding-bottom: clamp(112px, 12vw, 136px) !important; }

.rt-bc { margin: 0 0 clamp(16px, 2.4vw, 28px); font-size: 14px; font-weight: 500; line-height: 1.45; letter-spacing: 0; }
.rt-bc ol { display: flex; flex-wrap: nowrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.rt-bc li { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; margin: 0; padding: 0; color: #5D6B82; }
/* one line at every width: first and last crumb stay, the middle ones shrink to an ellipsis first */
.rt-bc li > a, .rt-bc li > span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-bc li:first-child { flex: none; }
.rt-bc li:not(:first-child):not(:last-child) { flex: 0 100 auto; min-width: 52px; }
.rt-bc li:last-child:not(:first-child) { min-width: 8ch; }
.rt-bc li::before { content: none; }
.rt-bc li + li::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 10px 0 8px;
  border-top: 1.5px solid #8792A2; border-right: 1.5px solid #8792A2; transform: rotate(45deg);
}
.rt-bc li + li::before { flex: none; }
.rt-bc a { color: #1F5FBF; font-weight: 600; text-decoration: none; text-underline-offset: 3px; }
.rt-bc a:hover { text-decoration: underline; }
.rt-bc li > a { padding: 6px 2px; margin: -6px -2px; }
.rt-bc a:focus-visible { outline: 2px solid #2D6FE3; outline-offset: -2px; border-radius: 4px; }
.rt-bc [aria-current="page"] { color: #475467; }


@media (max-width: 480px) {
  .rt-bc { font-size: 13.5px; }
  .rt-bc li + li::before { margin: 0 7px 0 5px; }
}

/* focused-task pages whose card is a Bootstrap column (mail confirmation, account deletion cancel): centered like .rt-auth */
body:has(.rt-band--center) div#contentWrapper .rt-form-col { margin-left: auto !important; margin-right: auto !important; }
body:has(.rt-band--center) div#contentWrapper .row.pageContent { margin-left: 0; margin-right: 0; }