/* A public site page's content (p/Page), and its preview in the portal's page builder (app/Content/SitePage): the
   sections, columns and elements that Core_SitePage.ElementHtml writes. Loaded by both, so the builder shows an
   element as the public page will. The colours are the master page's: a League Manager site's accent (--lm-accent)
   where there is one, Bootstrap's primary colour elsewhere. */

/* The spacing and sizes are those of the leagues' old sites (www.taybs.org, measured 2026-10-11 with 18 px text), written
   in em so they keep their proportions under a master page with another text size: lines of 22.5 px (1.25), paragraphs
   with lines of 26 px (1.444) and 10 px between them, elements 15 px apart, headings of 30, 22 and 18 px. */
.site-page-body { overflow-wrap: anywhere; line-height: 1.25; }

/* Sections stack; the columns of a section sit side by side from 768 px up */
.site-section { --bs-gutter-x: 1.5rem; }
.site-element { margin-bottom: .833em; min-height: 1.1em; }

/* Text: a paragraph is followed by a gap, except the last, so a list sits straight under the line that introduces it */
.site-page-body p { margin: 0 0 .556em; line-height: 1.444; }
.site-page-body p:last-of-type { margin-bottom: 0; }
.site-page-body .site-contact p { margin-bottom: .25em; line-height: 1.25; }

/* Lists: no space above or below, a round mark hung in a 1.5em indent, numbers for an ordered list. Not inside the
   builder's Text editor (.ql-editor): Quill draws a list's marks itself, and writes a bulleted list as an ol too, so
   these rules there gave every bullet a number as well */
.site-page-body :is(ul, ol):not(.ql-editor *) { margin: 0; padding: 0; list-style: none; counter-reset: site-list; }
.site-page-body li:not(.ql-editor *) { padding-left: 1.5em; }
.site-page-body li:not(.ql-editor *)::before { display: inline-block; width: 1.2em; margin-left: -1.5em; margin-right: .3em; text-align: right; white-space: nowrap; }
.site-page-body ul > li:not(.ql-editor *)::before { content: "\2022"; }
.site-page-body ol > li:not(.ql-editor *) { counter-increment: site-list; }
.site-page-body ol > li:not(.ql-editor *)::before { content: counter(site-list) ". "; }
/* A line the editor indented carries ql-indent-1 to -3 (an indented paragraph from our editor, and every level of a list
   in the text brought over from the leagues' old sites, whose lists are flat): each level is 3em further in, and an
   ordered list counts each level on its own, in letters, then roman numerals, then numbers */
.site-page-body .ql-indent-1:not(.ql-editor *) { padding-left: 3em; }
.site-page-body .ql-indent-2:not(.ql-editor *) { padding-left: 6em; }
.site-page-body .ql-indent-3:not(.ql-editor *) { padding-left: 9em; }
.site-page-body li.ql-indent-1:not(.ql-editor *) { padding-left: 4.5em; }
.site-page-body li.ql-indent-2:not(.ql-editor *) { padding-left: 7.5em; }
.site-page-body li.ql-indent-3:not(.ql-editor *) { padding-left: 10.5em; }
.site-page-body ol > li:not(.ql-editor *) { counter-reset: site-list-1 site-list-2 site-list-3; }
.site-page-body ol > li.ql-indent-1:not(.ql-editor *) { counter-increment: site-list-1; counter-reset: site-list-2 site-list-3; }
.site-page-body ol > li.ql-indent-2:not(.ql-editor *) { counter-increment: site-list-2; counter-reset: site-list-3; }
.site-page-body ol > li.ql-indent-3:not(.ql-editor *) { counter-increment: site-list-3; counter-reset: none; }
.site-page-body ol > li.ql-indent-1:not(.ql-editor *)::before { content: counter(site-list-1, lower-alpha) ". "; }
.site-page-body ol > li.ql-indent-2:not(.ql-editor *)::before { content: counter(site-list-2, lower-roman) ". "; }
.site-page-body ol > li.ql-indent-3:not(.ql-editor *)::before { content: counter(site-list-3) ". "; }

/* Headings (the Header element's Large, Medium and Small, and a Text element's own): the master page's rules for #main
   name its headings by ID, so these do too */
.site-page-body h2, #main .site-page-body h2 { font-size: 1.667em; line-height: 1.3; margin: 0; }
.site-page-body h3, #main .site-page-body h3 { font-size: 1.222em; line-height: 1.5; margin: 0; }
.site-page-body h4, #main .site-page-body h4 { font-size: 1em; line-height: 1.5; margin: 0; }
.site-page-body .site-element-text h2, .site-page-body .site-element-text h3 { margin-bottom: .3em; }
.site-page-body blockquote { border-left: 4px solid var(--bs-border-color, #dee2e6); padding-left: 1rem; margin: 0 0 .556em; }

/* Header: "Text with Divider" rules the heading off from what follows */
.site-heading { margin-bottom: 0; }
.site-heading-divider { padding-bottom: .4rem; border-bottom: 3px solid var(--lm-accent, var(--bs-primary, #0d6efd)); }

/* Image and contact photo */
.site-image { display: block; width: 100%; height: auto; }
.site-image:not([src]), .site-contact-photo:not([src]) { min-height: 6rem; background: repeating-linear-gradient(45deg, #eee, #eee 10px, #f7f7f7 10px, #f7f7f7 20px); }
.site-contact-photo { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: .75rem; }
.site-page-body .site-contact-name { margin-bottom: .25em; }
.site-contact-title { color: var(--bs-secondary-color, #6c757d); }

/* Document: a full-width download button with the file's name */
.site-download { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; white-space: normal; }
.site-download-icon { flex: 0 0 auto; }
.site-download:not([href]) { opacity: .75; }

/* Link styles "Branded Box" and "Branded Square": a block in the site's colour, or over a picture */
.site-link-box {
    display: flex; align-items: center; justify-content: center; min-height: 7rem; padding: 1rem; border-radius: .5rem;
    background-color: var(--lm-nav-bg, var(--bs-primary, #0d6efd)); background-size: cover; background-position: center;
    color: var(--lm-nav-fg, #fff); font-weight: 700; font-size: 1.25rem; text-align: center; text-decoration: none; position: relative; overflow: hidden;
}
.site-link-box:hover, .site-link-box:focus { color: var(--lm-accent, #fff); }
.site-link-square { aspect-ratio: 1; }
/* Over a picture the text needs a dark veil to stay readable */
.site-link-image::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.site-link-box > span { position: relative; }

/* Table sizes: Mini, the default, and Big */
.site-table { margin-bottom: 0; }
.site-table-mini { font-size: .875rem; }
.site-table-big { font-size: 1.2rem; }
.site-table-big > :not(caption) > * > * { padding: .9rem 1rem; }

.site-code img { max-width: 100%; height: auto; }

/* Donation Form: Zeffy's form in a frame, centred and no wider than the form is drawn (600 px). The frame is as tall as
   the form's first step and scrolls, until Assets/js/site-page.js hears the form's own height and gives it that.
   The form takes a few seconds to draw: until it does the frame is clear and the note behind it shows */
.site-donation { position: relative; max-width: 600px; margin: 0 auto; border-radius: 1rem; overflow: hidden; background: #fff; }
.site-donation::before { content: "Loading the donation form\2026"; position: absolute; top: 2.5rem; left: 0; right: 0; text-align: center; color: #6c757d; }
.site-donation iframe { position: relative; display: block; width: 100%; height: 600px; border: 0; }

/* Facebook Page: Facebook's Page Plugin in a frame, centred and at most 500 px wide (the most Facebook draws). Assets/js/site-page.js
   asks for a narrower plugin when the column is narrower than that. */
.site-facebook { max-width: 500px; margin: 0 auto; background: #fff; }
.site-facebook iframe { display: block; width: 100%; height: 700px; border: 0; }