/* The old pages (includes/header.ihtml and footer.ihtml, on Bootstrap and
   style.css) in the new design's frame: the masthead and footer come from
   site_frame.css; this sets their body in the same width, type and colours,
   and their titles as the new pages have them (Marcellus in the logo's brown).
   Loaded last, after Bootstrap, style.css and site_frame.css. */

body.ts-legacy { margin: 0; padding: 0; background: var(--ts-surface); color: var(--ts-text);
    font-family: var(--ts-font-sans); font-size: 16px; line-height: 1.55; }

/* The content column: the new pages' width and gutters, under the masthead */
.ts-legacy > .container, .ts-legacy #main.container { width: auto; max-width: var(--ts-container);
    padding: var(--ts-space-6) var(--ts-gutter-desktop) 0; margin: 0 auto; }

/* A section's menu (the Hymn Library's) runs the full width like on the new pages */
.ts-legacy #main > .ts-submenu:first-child { margin: calc(-1 * var(--ts-space-6)) calc(50% - 50vw) var(--ts-space-6); }

/* Old pages float their columns; the footer stays below them */
.ts-legacy #main::after { content: ""; display: table; clear: both; }

/* Running text in the reading serif, as on the new pages */
.ts-legacy #main { font-family: var(--ts-font-serif); font-size: 19px; line-height: 1.55; color: var(--ts-text); }
.ts-legacy #main .ts-submenu, .ts-legacy #main table, .ts-legacy #main small { font-family: var(--ts-font-sans); }

/* Titles */
.ts-legacy #main h1, .ts-legacy #main .h1, .ts-legacy #main .albumname,
.ts-legacy #main .lu-group-name, .ts-legacy #main .lib-hero h1 {
    font-family: var(--ts-font-display); font-weight: 400; color: var(--ts-title); letter-spacing: .01em;
    font-size: 34px; line-height: 1.15; margin: 4px 0 12px; }
.ts-legacy #main h1 small { font-family: var(--ts-font-sans); font-size: 18px; color: var(--ts-text-muted); letter-spacing: 0; }
.ts-legacy #main h2, .ts-legacy #main .lu-name {
    font-family: var(--ts-font-display); font-weight: 400; color: var(--ts-title); letter-spacing: .01em; line-height: 1.25; }
.ts-legacy #main h2 { font-size: 26px; margin: 28px 0 10px; }
.ts-legacy #main h3 { font-family: var(--ts-font-sans); font-weight: 600; color: var(--ts-text); }

/* Text and links */
.ts-legacy #main p { max-width: 75ch; }
.ts-legacy #main li { max-width: none; }
.ts-legacy #main .cl-page > ol li, .ts-legacy #main .cl-page > ul li, .ts-legacy #main .cl-page section li { max-width: 75ch; }
.ts-legacy #main a { color: var(--ts-link); }
.ts-legacy #main a:hover { color: var(--ts-brown); }
.ts-legacy #main .lead { font-size: 19px; color: var(--ts-text-muted); }

/* The old in-page breadcrumb bar, quieter, as on the new pages */
.ts-legacy #main .breadcrumb { background: none; padding: 0; margin: 0 0 8px; font-size: 14px; color: var(--ts-text-muted); }
.ts-legacy #main .breadcrumb a { color: var(--ts-text-muted); text-decoration: none; }
.ts-legacy #main .breadcrumb a:hover { color: var(--ts-brown); text-decoration: underline; }

/* The pages' own column: full container width; only running text keeps its reading width */
.ts-legacy #main .cl-page, .ts-legacy #main .ch-page { max-width: none; }

/* The footer sits a little below the last of the content */
.ts-legacy .ts-footer { margin-top: var(--ts-space-12); }

@media (max-width: 767px) {
    .ts-legacy > .container, .ts-legacy #main.container { padding: var(--ts-space-4) var(--ts-gutter-phone) 0; }
    .ts-legacy #main > .ts-submenu:first-child { margin-top: calc(-1 * var(--ts-space-4)); margin-bottom: var(--ts-space-4); }
    .ts-legacy #main h1, .ts-legacy #main .h1, .ts-legacy #main .albumname, .ts-legacy #main .lu-group-name { font-size: 28px; }
    .ts-legacy #main h2 { font-size: 22px; }
}

/* The selected pill of the lessons page (Divine Liturgy Hymns / Deacon Responses): dark text on the pale gold, with a gold edge */
.ts-legacy #main .lu-groups > li > a { color: var(--ts-brown); border-color: var(--ts-border-control); }
.ts-legacy #main .lu-groups > li.active > a, .ts-legacy #main .lu-groups > li.active > a:hover, .ts-legacy #main .lu-groups > li.active > a:focus { background: var(--ts-gold-light); border-color: var(--ts-gold); color: var(--ts-brown); font-weight: 600; }
.ts-legacy #main .lu-groups .badge { background: rgba(86,35,0,.12); color: var(--ts-brown); }

/* The lessons page's unit headers: the number, the title, the count and the progress all start on the title's line,
   whether or not the unit has an intro line under its title (they were centred, so they moved with the height) */
.ts-legacy #main .lu-head { align-items: flex-start; padding: 18px 20px; }
.ts-legacy #main .lu-name { line-height: 1.25; margin: 0; }
.ts-legacy #main .lu-num { margin-top: -2px; }
.ts-legacy #main .lu-intro { margin: 6px 0 0; }
.ts-legacy #main .lu-count, .ts-legacy #main .lu-progress { margin-top: 8px; }