/* Set padding to keep content from hitting the edges */

.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* TODO-048 phase 4 - warning and check marks take their color from the brand tokens (the dark gold, green and red are fixed tokens). */
.team-members .fa-exclamation-triangle {
    color: var(--fp-eyebrow-gold);
    margin-right: 5px;
}

.medical-forms { margin-top: 7px; }

.medical-forms .fa-check-circle {
    color: var(--fp-belt-green);
    font-size: 1.2em;
}

.medical-forms .fa-times-circle {
    color: var(--fp-belt-red);
    font-size: 1.2em;
}

.fa-exclamation-triangle {
    color: var(--fp-eyebrow-gold);
    font-size: 1.1em;
}

/* Print styling (TODO-048 phase 4): the page without its chrome - no nav, footer, buttons or alerts - on white, with cards and tables
   flattened to plain boxes. The old Bootstrap 3 column-float rules are gone (Bootstrap 5 grids print as they are). */

@media print {
    body { background: var(--fp-surface) !important; color: var(--fp-ink); font-size: 1em; margin: 0; padding: 0 !important; }

    a[href]:after { content: none; }

    .noprint,
    div.alert,
    .alert,
    header,
    .fp-nav,
    .fp-accent-bar,
    .fp-footer,
    footer,
    .nav,
    .btn,
    .fp-card-btn,
    .fp-form-actions,
    .carousel-control-prev,
    .carousel-control-next,
    ul.links.list-inline,
    ul.action-links { display: none !important; }

    .fp-card, .fp-form-card, table.table {
        background: var(--fp-surface) !important;
        border: 1px solid var(--fp-line) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        break-inside: avoid;
    }

    .fp-dashboard, .fp-manage, .fp-manage-cards, .fp-form-grid { display: block !important; }
    .fp-card, .fp-form-card { margin-bottom: 0.75rem; }
    table.table { display: table !important; }
}

.validation-summary-valid { display: none !important; }

/* TODO-044 - an uploaded logo is shown no wider than the site's own banner it replaces (the width is in data-logo-size). */
img[data-logo-size="32"] { max-width: 32px; height: auto; }
img[data-logo-size="64"] { max-width: 64px; height: auto; }
img[data-logo-size="128"] { max-width: 128px; height: auto; }

/* TODO-048 - a competitor with no events: the prompt reads as a link. */
a.choose-events { font-weight: 600; }

/* TODO-048 - the Branding page's preview: a miniature dashboard whose --fp-* variables the editor script overrides. */
.fp-preview {
    max-width: 760px;
    border: 1px solid var(--fp-line);
    border-radius: var(--fp-radius-card);
    overflow: hidden;
    background: var(--fp-bg);
    color: var(--fp-ink);
    font-family: var(--fp-font-body);
}
.fp-preview-nav { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.9rem; background: var(--fp-surface); }
.fp-preview-body { padding: 1rem; }
.fp-preview-body h2 { font-size: 1.5rem; margin-bottom: 0.6rem; }
.fp-preview .fp-banner { padding: 0.55rem 0.8rem; font-size: 0.9rem; margin-bottom: 0.8rem; }
.fp-preview-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.fp-preview .fp-card { padding: 0.6rem 0.75rem 0.5rem; }
.fp-preview .fp-card h2 { font-size: 0.95rem; margin-bottom: 0.4rem; }
.fp-preview .fp-card-btn { padding: 0.3rem 0.4rem; font-size: 0.8rem; margin-bottom: 0.4rem; cursor: default; }
@media (max-width: 575.98px) { .fp-preview-cards { grid-template-columns: repeat(2, 1fr); } }