/* 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, an Enterprise template's (--app-accent) for the new Tile and Header elements, Bootstrap's primary
   colour elsewhere. A template may restyle the elements in its own file: Assets/css/atm1.css draws them in the /atm look. */

/* 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 *, .site-trail) { margin: 0; padding: 0; list-style: none; counter-reset: site-list; }
.site-page-body li:not(.ql-editor *, .site-trail > li) { padding-left: 1.5em; }
.site-page-body li:not(.ql-editor *, .site-trail > li)::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 *, .site-trail > li) { counter-increment: site-list; }
.site-page-body ol > li:not(.ql-editor *, .site-trail > li)::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); }
/* A person's photo is a circle (APP-260, the owner's choice, as www.taybs.org shows its board), centred, or at the side
   the element is aligned to */
.site-contact-photo { display: block; width: min(100%, 10rem); aspect-ratio: 1; object-fit: cover; border-radius: 50%; margin: 0 auto .75rem; }
.site-contact.text-start .site-contact-photo { margin-left: 0; }
.site-contact.text-end .site-contact-photo { margin-right: 0; }
.site-page-body .site-contact-name { margin-bottom: .25em; }
.site-contact-title { color: var(--bs-secondary-color, #6c757d); }

/* Document (APP-260): a row with the file's kind as a coloured tag, its name and the download icon at the right; rows that
   follow one another join into one bordered list, with a line between them */
.site-download {
    display: flex; align-items: center; gap: .85rem; width: 100%; padding: .7rem 1rem;
    border: 1px solid var(--lm-line, var(--bs-border-color, #dee2e6)); border-radius: .6rem; background: #fff;
    color: inherit; text-align: left; text-decoration: none; white-space: normal; line-height: 1.3;
}
.site-download[href]:hover, .site-download[href]:focus-visible { background: var(--lm-hover, #f5f7fa); }
.site-download:not([href]) { opacity: .75; }
.site-file-kind {
    flex: 0 0 auto; min-width: 2.9rem; padding: .3rem .4rem; border-radius: .35rem; text-align: center;
    font-size: .7rem; font-weight: 700; letter-spacing: .05em; color: #fff; background: #6c757d;
}
.site-file-pdf { background: #c0392b; }
.site-file-doc { background: #2b579a; }
.site-file-xls { background: #217346; }
.site-file-ppt { background: #c4532d; }
.site-file-img { background: #7b4fa3; }
/* A link drawn as a list row (APP-260): WEB, PAGE, MAIL or PHONE in place of the file's kind, and joined into a list of documents like one */
.site-file-web { background: #0b7285; }
.site-file-page { background: #495057; }
.site-file-mail { background: #5f3dc4; }
.site-file-phone { background: #2f9e44; }
.site-file-name { flex: 1 1 auto; font-weight: 600; }
.site-download-icon { flex: 0 0 auto; color: var(--bs-secondary-color, #6c757d); }
.site-element-listrow:has(+ .site-element-listrow) { margin-bottom: 0; }
.site-element-listrow:has(+ .site-element-listrow) .site-download { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.site-element-listrow + .site-element-listrow .site-download { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }

/* 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; }
/* "No overlay" (APP-77): the picture as it is, for one that carries its own words or is light enough */
.site-link-plain::before { content: none; }

/* A Text element's read-more fold (APP-77): "Read more" opens the rest, and goes once it is open */
.site-read-more > summary { display: inline-block; cursor: pointer; color: var(--bs-link-color); text-decoration: underline; list-style: none; }
.site-read-more > summary::-webkit-details-marker { display: none; }
.site-read-more[open] > summary { display: none; }
.site-read-more[open] { margin-top: .556em; }   /* the folded text starts a paragraph's gap under the text above it */

/* A video file played on the page itself (APP-77), at the column's width */
.site-video { display: block; width: 100%; height: auto; background: #000; }

/* The page's hero (APP-77): its picture or video across the top of the content, above the sections */
.site-hero { margin-bottom: 1.5rem; }
.site-hero-image { display: block; width: 100%; max-height: 420px; object-fit: cover; border-radius: .25rem; }

/* 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; }

/* A page with a band (APP-529) runs the whole width: each section sits in its own container, and a band reaches from edge to
   edge with its picture under a veil, its words in white. Spacing is the space above and below the band's sections. The
   editing bar and the builder keep a container's width. */
.site-page-wide .spi-bar.spi-editing, .site-page-wide .spi-title, .site-page-wide #sitePageError, .site-page-wide .spb { max-width: 1140px; margin-left: auto; margin-right: auto; }
.site-band { position: relative; z-index: 1; background-size: cover; background-position: center; background-repeat: no-repeat; }
.site-band-picture { color: #fff; background-color: #343a40; }
.site-band-veil { position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, .54); }
.site-band-veil-dark .site-band-veil { background: rgba(0, 0, 0, .8); }
.site-band-veil-charcoal .site-band-veil { background: rgba(36, 38, 39, .9); }
.site-band-veil-none .site-band-veil { background: none; }
.site-band-slide { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; opacity: 0; transition: opacity 750ms; }
.site-band-slide.active { opacity: 1; }
.site-band-small > .site-band-inner { padding-top: 1.5rem; padding-bottom: .75rem; }
.site-band-normal > .site-band-inner { padding-top: 3.5rem; padding-bottom: 4rem; }
.site-band-tall > .site-band-inner { padding-top: 6rem; padding-bottom: 5rem; }
.site-band-tall .site-section + .site-section { margin-top: 4rem; }
.site-page-wide .site-band:not(.site-band-small, .site-band-normal, .site-band-tall) > .site-band-inner { padding-top: 1rem; }

/* Header's small line above (APP-529) */
.site-kicker { margin: 0 0 .25em; font-size: .9em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lm-accent, var(--app-accent, var(--bs-primary, #0d6efd))); }
.site-band-picture .site-kicker { color: inherit; opacity: .85; }
/* Header's Section Title style (APP-529): space below it before the section's content */
.site-heading-title { margin-bottom: 2rem; }
/* Tiles three across (APP-529): each element in a column of its own, the tiles of a row as tall as each other */
.site-section-grid > .site-column { display: flex; flex-direction: column; }
.site-section-grid > .site-column > .site-element { flex: 1 1 auto; }

/* A Text element's larger list text, and an Image element's space above (APP-529) */
.site-text-large li { font-size: 1.15em; }
.site-image-offset-small { padding-top: 1.5rem; }
.site-image-offset-large { padding-top: 4.5rem; }

/* Slider (APP-529): the headlines take turns over the band, with Previous, Pause and Next at the bottom right */
.site-slider { position: relative; padding-bottom: 3.5rem; }
.site-slide-title { margin: 0 0 1rem; font-size: 2.2em; font-weight: 800; text-transform: uppercase; }
.site-band-picture .site-slide-title { color: #fff; }
.site-slider-prev, .site-slider-pause, .site-slider-next {
    position: absolute; bottom: 0; z-index: 2; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: .3rem;
    font-size: 1.6rem; line-height: 1; color: #fff; background: rgba(0, 0, 0, .3);
}
.site-slider-pause { right: 3.25rem; font-size: 1.1rem; }
.site-slider-prev { right: 6.5rem; }
.site-slider-next { right: 0; }
.site-slider-prev:hover, .site-slider-pause:hover, .site-slider-next:hover { background: rgba(0, 0, 0, .55); }
.site-slider-icon { width: 1em; height: 1em; vertical-align: -.125em; }

/* Tile (APP-529): a Card is a box in the site's colour, its icon at the left; a Feature sets its icon beside its words */
.site-tile { display: block; position: relative; z-index: 0; color: inherit; text-decoration: none; overflow: hidden; }
.site-tile-card { padding: 1rem 1.25rem; min-height: 9rem; color: #fff; border-radius: .25rem; height: 100%; }
.site-tile-veil { position: absolute; inset: 0; z-index: -1; background: var(--lm-nav-bg, var(--app-accent, var(--bs-primary, #0d6efd))); transition: filter .4s ease-in-out; }
a.site-tile-link:hover .site-tile-veil, a.site-tile-link:focus-visible .site-tile-veil { filter: brightness(.82); }
a.site-tile-card:hover, a.site-tile-card:focus { color: #fff; }
.site-tile-card .site-tile-icon { float: left; margin: .75rem 1rem .5rem 0; max-width: 5rem; }
.site-tile-corner .site-tile-icon { margin: 0 .75rem 0 0; }
.site-tile-image { display: block; max-width: 100%; height: auto; }
.site-tile-body { overflow: hidden; }
#main .site-page-body .site-tile-title, .site-page-body .site-tile-title { margin: .5rem 0 .75rem; font-size: 1.1em; text-transform: uppercase; }
.site-tile-text { margin: 0 0 .5em; }
.site-page-body .site-tile-list li { padding-left: 1.1em; }
.site-tile-more { margin: .75em 0 0; text-align: center; font-size: .9em; letter-spacing: .05em; }
.site-tile-feature .site-tile-icon { float: left; margin: 1.5rem 1.5rem .5rem 0; max-width: 5rem; }
.site-tile-right .site-tile-icon { float: right; margin: 1.5rem 0 .5rem 1.5rem; }
.site-tile-feature .site-tile-body { padding-top: 1rem; }

/* Page Title (APP-529): the page's title, and a trail back to the home page at the right */
.site-page-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; }
#main .site-page-body .site-page-title-text, .site-page-body .site-page-title-text { margin: 0; font-size: 1.8em; text-transform: uppercase; }
.site-trail { margin: 0; }
.site-band-picture .site-trail a { color: #fff; }
.site-band-picture .site-trail { --bs-breadcrumb-divider-color: #ccc; --bs-breadcrumb-item-active-color: #aaa; }

/* 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; }

/* SquadLocker Store (APP-554): SquadLocker's module is drawn into this box by Assets/js/site-page.js. */
.site-squadlocker { min-height: 6rem; }