/* The v2 static pages (Phase 014, step 8): about, terms, privacy, developer, sponsor, donate, the
   mobile apps page, the handbook and the wiki. The page files keep the markup they were written
   in (Bootstrap 3 grid, a few old classes), so this sheet gives that markup the new look - only
   inside .content-page, never anywhere else. */

.content-page { padding-block: 40px 64px; }
.content-body { max-width: 860px; margin-inline: auto; font-size: 17px; line-height: 1.7; overflow-wrap: break-word; }
.content-body a { overflow-wrap: anywhere; }
.content-body a[href^="tel:"] { overflow-wrap: normal; white-space: nowrap; }
.content-body > :first-child { margin-top: 0; }

/* ---- text ---- */
.content-body h1 { font: 600 clamp(32px, 4vw, 46px)/1.12 var(--font-serif); letter-spacing: -.01em; margin: 0 0 20px; }
.content-body h2 { font: 600 clamp(24px, 2.6vw, 32px)/1.2 var(--font-serif); margin: 36px 0 14px; }
.content-body h3 { font: 600 22px/1.25 var(--font-serif); margin: 28px 0 10px; }
.content-body h4, .content-body h5 { font: 700 18px/1.3 var(--font-ui); margin: 26px 0 8px; }
.content-body h6 { font: 600 13px/1.3 var(--font-ui); text-transform: uppercase; letter-spacing: .06em; margin: 0; color: var(--c-text-2); }
.content-body p { margin: 0 0 14px; }
.content-body ul, .content-body ol { margin: 0 0 16px; padding-left: 24px; }
.content-body li { margin-bottom: 6px; }
.content-body a:not(.btn):not(.card):not(.tile) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.content-body img { max-width: 100%; height: auto; }
.content-body hr { border: 0; border-top: 1px solid var(--c-outline); margin: 32px 0; }
.content-body blockquote { margin: 20px 0; padding: 12px 20px; border-left: 3px solid var(--c-accent); background: var(--c-surface); border-radius: 0 var(--r-m) var(--r-m) 0; }
.content-body table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px; display: block; overflow-x: auto; }
.content-body th, .content-body td { padding: 10px 12px; border: 1px solid var(--c-outline); text-align: left; vertical-align: top; }
.content-body th { background: var(--c-surface-2); }
.content-body .text-center { text-align: center; }
.content-body .text-right { text-align: right; }
.content-body .text-muted, .content-body .note { color: var(--c-text-2); }
.content-body .spacer { height: 16px; }

/* ---- the Bootstrap 3 grid the page files use: 12 columns, xs always, sm ≥768, md ≥992, lg ≥1200 ---- */
.content-body .container { width: auto; padding: 0; }
.content-body .row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; margin: 0 -12px; }
.content-body .row > [class*="col-"] { width: 100%; padding: 0 12px; }
.content-body .col-xs-6 { width: 50%; }
.content-body .col-xs-12 { width: 100%; }
@media (min-width: 768px) {
	.content-body .row > .col-sm-4 { width: 33.333%; }
	.content-body .row > .col-sm-5 { width: 41.666%; }
	.content-body .row > .col-sm-6 { width: 50%; }
	.content-body .row > .col-sm-7 { width: 58.333%; }
	.content-body .row > .col-sm-8 { width: 66.666%; }
	.content-body .row > .col-sm-12 { width: 100%; }
}
@media (min-width: 992px) {
	.content-body .row > .col-md-4 { width: 33.333%; }
	.content-body .row > .col-md-6 { width: 50%; }
	.content-body .row > .col-md-8 { width: 66.666%; }
	.content-body .row > .col-md-12 { width: 100%; }
}
@media (min-width: 1200px) {
	.content-body .row > .col-lg-6 { width: 50%; }
	.content-body .row > .col-lg-12 { width: 100%; }
}
.content-body .thumbnail { display: block; padding: 20px; margin-bottom: 16px; border: 1px solid var(--c-outline); border-radius: var(--r-m); background: var(--c-surface); overflow: hidden; }

/* ---- old buttons in page files ---- */
.content-body .btn { text-decoration: none; }
.content-body .btn-lg { height: 52px; padding: 0 24px; }

/* the sponsor button (about, sponsor pages) */
.content-body .craft-btn { display: inline-flex; align-items: center; gap: 14px; height: auto; min-height: 64px; padding: 12px 20px; border-radius: var(--r-m); background: var(--c-surface); border: 1px solid var(--c-outline); color: var(--c-text); text-align: left; }
.content-body .craft-btn:hover { border-color: var(--c-primary); color: var(--c-text); }
.content-body .craft-btn img { max-height: 44px; width: auto; }
.content-body .craft-btn .icon { color: var(--c-accent); flex: none; }
.content-body .craft-btn h4 { margin: 2px 0 0; font-size: 18px; }
.content-body .sponsorlogolink { margin-bottom: 16px; }

/* the donate page's social links */
.content-body .socialnetworks { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 16px; }
.content-body .socialnetworks br { display: none; }
.content-body .socialnetworkblock { width: 170px; padding: 20px 12px; border: 1px solid var(--c-outline); border-radius: var(--r-m); background: var(--c-surface); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.content-body .socialnetworkblock h3 { margin: 0; font: 700 17px var(--font-ui); }
.content-body .socialnetworkblock .link { text-decoration: none; color: var(--c-text); }
.content-body .btn-social { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--c-primary-container); color: var(--c-primary); padding: 0; }
.content-body .mu-title-dot { display: none; }

/* the handbook: a page's tools, and the index */
.content-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid var(--c-outline); }
.content-tools a { text-decoration: none !important; display: inline-flex; gap: 4px; align-items: center; }
.content-tools .input { width: 230px; height: 38px; font-size: 14px; }
.hb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.hb-card { color: var(--c-text); overflow: hidden; }
.hb-card:hover { box-shadow: var(--shadow-2); }
.hb-card .card-media { aspect-ratio: 16 / 9; }
.hb-card .card-media img { width: 100%; height: 100%; object-fit: cover; }
.hb-card .card-title { margin: 0; }

@media (max-width: 767px) {
	.content-page { padding-block: 24px 48px; }
	.content-body { font-size: 16px; }
	.content-body .text-right { text-align: left; }
	/* no gutters on a phone: the columns stack, and a negative margin would pass the screen edge */
	.content-body .row { margin: 0; }
	.content-body .row > [class*="col-"] { padding: 0; }
	.content-body .row > .col-xs-6 { padding-right: 8px; }
	.content-body .row > .col-xs-6 + .col-xs-6 { padding: 0 0 0 8px; }
	.content-tools .input { width: 100%; order: 3; }
}