/*  Tenant.css - formatting for content a TENANT writes, and nothing else.

    THE CONTRACT
    Every rule in this file is scoped to .TenantContent. That class is the container the system puts
    around tenant-authored markup - TenantHTML.aspx wraps its file in it, Editor.aspx adds it to
    anything saved without it, and the downloads pages carry it. Outside that container this file
    must change nothing, so a tenant can decide their H1 looks one way in their own pages without
    touching the H1 on a schedule, a roster or an admin screen.

    WHAT THIS FIXES
    The rule ".TenantContent table th, table td" did exactly what this file is meant to prevent: a
    comma starts a new selector, so "table td" was unscoped and applied 4px padding and
    white-space:nowrap to EVERY table in the application. That is now two scoped selectors.
    The image and caption helpers were unscoped for the same reason - they simply had no scope at
    all - and are now inside the container along with everything else.

    COLOURS COME FROM CONFIG.CSS
    Each value below is a var() whose fallback is the literal it replaced, so this file renders
    identically to before in every tenant until somebody actually sets one. A tenant tints their own
    content by adding the variable to their _Styles/<TenantID>/Config.css - no change here, and no
    per-tenant copy of this file. --link-dark-color and --background-active-color already exist in
    every tenant's Config.css; the --tenant-* ones are new and optional.
*/

/*  PADDING
    The wrapper TenantHTML.aspx emits is "container body-content TenantContent", but .container and
    .body-content are not defined in any stylesheet the master page loads - Bootstrap is not on this
    site - so those two class names style nothing and .TenantContent was the only box in the chain.
    It had no padding at all, which showed up two ways: below 940px the text ran flush to both screen
    edges on a phone, and at every width the page opened hard against the header bar. Measured, the
    header ended at 47px and this box started at 47px - the only relief was the h1's own 10px margin.

    So the padding belongs here. box-sizing keeps the 940px cap meaning the same thing it did before,
    and overflow:hidden below already stops the first child's margin collapsing out through the top,
    so the heading margin adds to this rather than being swallowed by it. */
.TenantContent {
    background-color: var(--tenant-content-bg, var(--background-active-color, white));
    color: var(--tenant-content-color, black);
    max-width: var(--tenant-content-width, 940px);
    min-height: 900px;
    display: block;
    box-sizing: border-box;
    padding: var(--tenant-content-top, 20px) var(--tenant-content-gutter, 18px) var(--tenant-content-bottom, 24px);
    font-family: Avalon;
    font-size: 14px;
    line-height: 1.8;
    overflow: hidden;
}

@media (max-width: 700px) {
    .TenantContent {
        padding: var(--tenant-content-top-sm, 16px) var(--tenant-content-gutter-sm, 14px) var(--tenant-content-bottom-sm, 20px);
        /* 900px of forced height is most of a phone screen of blank scroll below a short page.
           Enough to keep a stub page from looking broken, not enough to invent empty space. */
        min-height: 60vh;
    }
}

    /* Headings - deliberately inherit their colour, so a tenant that sets nothing looks exactly as
       it does today, and one that sets --tenant-heading-color changes only its own pages. */
    .TenantContent h1 {
        font-size: var(--tenant-h1-size, 28px);
        margin-top: 10px;
        margin-bottom: 10px;
        font-family: inherit;
        font-weight: 500;
        line-height: 1.1;
        color: var(--tenant-heading-color, inherit);
        box-sizing: border-box;
    }

    .TenantContent h2 {
        width: 100%;
        font-size: var(--tenant-h2-size, 18px);
        display: block;
        float: left;
        clear: both;
        margin-top: 20px;
        margin-bottom: 0px;
        font-family: inherit;
        font-weight: 600;
        color: var(--tenant-heading-color, inherit);
        box-sizing: border-box;
    }

    .TenantContent p {
        margin-bottom: 10px;
    }

    .TenantContent hr {
        background-color: var(--tenant-rule-color, black);
        height: 1px;
    }

    /* ── Tables ──────────────────────────────────────────────────────────────
       Both halves scoped. The second used to read "table td" and leaked. */
    .TenantContent table {
        font-size: 12px;
    }

        .TenantContent table th,
        .TenantContent table td {
            padding: 4px 4px 4px 4px;
            white-space: nowrap;
        }

    .TenantContent .table-scroll {
        display: block;
        overflow-x: auto;
        clear: left;
    }

    /* ── Buttons ─────────────────────────────────────────────────────────────
       Also defined in Dashboard.css, which is why this one is scoped: outside
       tenant content that definition should win. */
    .TenantContent .TenantButton {
        color: var(--tenant-button-color, var(--link-dark-color, #24569C));
        background-color: var(--tenant-button-bg, #fff);
        border: 1px solid var(--tenant-button-border, #ccc);
        text-decoration: none;
        display: inline-block;
        margin-bottom: 0;
        font-weight: normal;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        background-image: none;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        border-radius: 4px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /* ── Embedded images, captions and video ─────────────────────────────────
       NewsArticle.aspx.cs generates this markup from the shortcodes in an article
       body, so it is tenant-written content and belongs in the container. */
    .TenantContent .captionframe {
        background-color: var(--tenant-caption-bg, lightgrey);
    }

    .TenantContent .captionframetext {
        font-size: 10px;
        text-align: center;
    }

    .TenantContent .flyrightimage,
    .TenantContent .alignright {
        float: right;
        display: block;
        max-width: 300px;
        width: Calc(100vw - 40px);
        padding: 4px;
        margin-right: 10px;
        margin-left: 10px;
    }

    .TenantContent .centerimage,
    .TenantContent .aligncenter {
        display: block;
        max-width: 560px;
        padding: 4px;
        margin: 10px auto;
        width: Calc(100vw - 40px);
        height: auto;
    }

    .TenantContent .video {
        display: block;
        margin: 10px auto;
        max-width: 560px;
        max-height: 315px;
        width: Calc(100vw - 40px);
        height: Calc(100vw * .56);
    }

@media (max-width: 800px) {
    .TenantContent .alignright,
    .TenantContent .flyrightimage,
    .TenantContent .centerimage,
    .TenantContent .aligncenter {
        width: Calc(100vw - 40px);
        max-width: none;
        margin: 10px;
    }
}

/*  ── BracketNotes ────────────────────────────────────────────────────────────
    LEFT UNSCOPED, AND CURRENTLY DEAD. SportPageBrackets.aspx and
    TournamentCentralBrackets.aspx emit these classes, but neither links this file
    and Site.Master does not add it - so these rules reach nothing today, and this
    is the only stylesheet that defines them.

    They are not tenant content, so they do not belong in this file. Scoping them
    would bury that; moving them to a sheet the bracket pages actually load would
    suddenly style two live pages that are currently unstyled. Left exactly as they
    were, pending a decision on which of those to do.  */
.BracketNotes {
    background-color: lightyellow;
    padding: 10px;
    font-size: 14px;
    line-height: 1.6;
    color: black;
    margin-top: 50px;
    clear: both;
    display: block;
}

    .BracketNotes ul {
        margin-left: 20px;
    }

        .BracketNotes ul li {
            margin-top: 10px;
        }

.BracketNotesDivision {
    background-color: lightyellow;
    padding: 10px;
    font-size: 14px;
    line-height: 1.6;
    color: black;
    margin-top: 0px;
    clear: both;
    display: block;
}

    .BracketNotesDivision ul {
        margin-left: 20px;
    }

        .BracketNotesDivision ul li {
            margin-top: 10px;
        }