/*
 * content-v2.css
 * Prose styling for CMS "page" body content (application.cnyfsc.getPageById())
 * rendered raw inside .c-content-body by _template/_template_default-v2.cfm.
 * The HTML itself comes from the CKEditor-authored page.body field, so this
 * only needs to style plain tags (headings, paragraphs, lists, tables,
 * images, links) rather than any "c-" component classes.
 */

.c-content-body {
    margin: 0 auto;
    background: #fff;
    padding: var(--c-space-5);
    border-radius: var(--c-radius);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.c-content-body > :first-child {
    margin-top: 0;
}

.c-content-body > :last-child {
    margin-bottom: 0;
}

.c-content-body h1,
.c-content-body h2,
.c-content-body h3,
.c-content-body h4 {
    font-family: var(--c-font-family-heading);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: var(--c-space-4) 0 var(--c-space-3);
    color: var(--c-color-text);
}

.c-content-body h1 { font-size: 32px; }
.c-content-body h2 { font-size: 26px; }
.c-content-body h3 { font-size: 20px; }
.c-content-body h4 { font-size: 16px; }

.c-content-body p {
    margin: 0 0 var(--c-space-3);
}

.c-content-body a {
    color: var(--c-color-primary);
}

.c-content-body a:hover,
.c-content-body a:focus-visible {
    color: var(--c-color-accent);
}

.c-content-body ul,
.c-content-body ol {
    margin: 0 0 var(--c-space-3);
    padding-left: var(--c-space-4);
}

.c-content-body li {
    margin-bottom: var(--c-space-1);
}

.c-content-body img {
    height: auto;
    border-radius: var(--c-radius);
    margin: 0 0 var(--c-space-3);
}

.c-content-body blockquote {
    margin: 0 0 var(--c-space-3);
    padding: var(--c-space-2) var(--c-space-3);
    border-left: 4px solid var(--c-color-primary);
    background: var(--c-color-bg-alt);
    color: var(--c-color-text-muted);
}

.c-content-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--c-space-4);
}

.c-content-body th,
.c-content-body td {
    padding: var(--c-space-2) var(--c-space-3);
    border-bottom: 1px solid var(--c-color-border);
    text-align: left;
}

.c-content-body th {
    background: var(--c-color-bg-alt);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--c-color-text-muted);
}

.c-content-body hr {
    border: 0;
    border-top: 1px solid var(--c-color-border);
    margin: var(--c-space-4) 0;
}

.c-content-body video {
    max-width: 100%;
    height: auto;
}

/* -------------------------------------------------------------------- */
/* Legacy Bootstrap-era classnames (.row/.col-md-*, .panel, .btn) that   */
/* still show up in CKEditor-authored page.body HTML from older content. */
/* Rather than rewrite that stored HTML, give these classnames vanilla   */
/* styling here, the same way schedule-v2.css does for .standings-table. */
/* -------------------------------------------------------------------- */
.c-content-body .row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--c-space-4);
    margin: 0 0 var(--c-space-4);
    padding: 0;
    list-style: none;
}

.c-content-body .row:last-child {
    margin-bottom: 0;
}

.c-content-body .col-md-1 { grid-column: span 1; }
.c-content-body .col-md-2 { grid-column: span 2; }
.c-content-body .col-md-3 { grid-column: span 3; }
.c-content-body .col-md-4 { grid-column: span 4; }
.c-content-body .col-md-5 { grid-column: span 5; }
.c-content-body .col-md-6 { grid-column: span 6; }
.c-content-body .col-md-7 { grid-column: span 7; }
.c-content-body .col-md-8 { grid-column: span 8; }
.c-content-body .col-md-9 { grid-column: span 9; }
.c-content-body .col-md-10 { grid-column: span 10; }
.c-content-body .col-md-11 { grid-column: span 11; }
.c-content-body .col-md-12 { grid-column: span 12; }

@media only screen and (max-width: 767px) {
    .c-content-body .row > [class*="col-md-"] {
        grid-column: span 12;
    }
}

.c-content-body .panel {
    height: 100%;
    margin: 0;
    padding: var(--c-space-4);
    background: #fff;
    border: 1px solid var(--c-color-border);
}

.c-content-body .panel.rounded {
    border-radius: var(--c-radius);
}

/* no extra gap above the first heading or below the last line inside a panel */
.c-content-body .panel > :first-child {
    margin-top: 0;
}

.c-content-body .panel > :last-child {
    margin-bottom: 0;
}

/* Old theme buttons in page content ("btn u-btn-primary g-rounded-50 g-mt-20 ..."), drawn like the
   new site's own buttons (.c-btn--primary in core.css): Cubano, CNYFSC blue, dark blue with green
   text on hover. A minimum width keeps buttons stacked with <br> the same width, and the old
   spacing classes they carry (g-mt-20, g-mb-20, g-mr-20 ...) are given real spacing below. */
.c-content-body .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 170px;
    margin: 4px 0;
    padding: 12px 22px;
    border: 0;
    border-radius: var(--c-radius);
    background-color: var(--c-color-primary);
    color: #fff;
    font-family: "cubano", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
    vertical-align: middle;
    transition: background-color var(--c-transition), color var(--c-transition);
}

.c-content-body .btn:hover,
.c-content-body .btn:focus-visible {
    background-color: var(--c-color-primary-dark);
    color: var(--c-color-accent);
}

.c-content-body .btn-sm { min-width: 140px; padding: 9px 16px; font-size: 11px; }
.c-content-body .btn-lg { min-width: 200px; padding: 15px 28px; font-size: 14px; }

/* the old theme's spacing classes that appear on those buttons */
.c-content-body .g-mt-10 { margin-top: 10px; }
.c-content-body .g-mt-20 { margin-top: 16px; }
.c-content-body .g-mb-10 { margin-bottom: 10px; }
.c-content-body .g-mb-20 { margin-bottom: 16px; }
.c-content-body .g-mr-20 { margin-right: 12px; }

@media only screen and (max-width: 767px) {
    .c-content-body {
        padding: var(--c-space-4);
    }
}


/* /soccer/ league menus */
.c-content-body .soccer-leagues {
    margin-top: var(--c-space-4);
}

.c-content-body .soccer-league-form {
    margin: 0 0 var(--c-space-3);
}

.c-content-body .soccer-league-form__row {
    display: flex;
    gap: var(--c-space-2);
}

.c-content-body .soccer-league-form__row .c-field {
    flex: 1;
}

.c-content-body .soccer-league-form__row .c-btn[hidden] {
    display: none;
}

/* /leagues/ (ported from the old custom.css) */
.c-content-body .leagues-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--c-space-3);
    flex-wrap: wrap;
    margin: var(--c-space-4) 0;
}

.c-content-body .leagues-head h2 {
    margin: 0;
}

.c-content-body .leagues-filter {
    min-width: 200px;
}

.c-content-body .leagues-columns {
    column-count: 2;
    column-gap: 2.5rem;
}

.c-content-body .leagues-columns.single-column {
    column-count: 1;
}

.c-content-body .league-section {
    display: inline-block;
    width: 100%;
    break-inside: avoid;
}

.c-content-body .league-section[hidden] {
    display: none;
}

.c-content-body .league-section h3 {
    display: flex;
    align-items: center;
}

.c-content-body .sport-icon {
    width: 32px;
    height: 32px;
    margin: 0 10px 0 0;
    border-radius: 0;
}

.c-content-body .league-list {
    margin: 0 0 var(--c-space-4);
    padding: 0;
    list-style: none;
}

.c-content-body .league-list li {
    margin: 0 0 10px;
}

.c-content-body .league-card-link {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    border: 1px solid var(--c-color-border);
    border-radius: 8px;
    background: var(--c-color-bg-alt);
    color: var(--c-color-text);
    font-weight: 700;
    text-decoration: none;
    transition: background var(--c-transition), border-color var(--c-transition);
}

.c-content-body .league-card-link:hover,
.c-content-body .league-card-link:focus-visible {
    background: #e7eff7;
    border-color: var(--c-color-primary);
    color: var(--sh-color-sports-blue);
}

@media only screen and (max-width: 767px) {
    .c-content-body .leagues-columns {
        column-count: 1;
    }
}

/* /current-programs/ */
.c-content-body .programs-filters {
    margin: var(--c-space-4) 0 var(--c-space-2);
}

.c-content-body .program-item[hidden] {
    display: none;
}

.c-content-body .program-card {
    height: 100%;
    padding: var(--c-space-4);
    border: 1px solid var(--c-color-border);
    border-radius: 8px;
    background: #fff;
}

.c-content-body .program-card__img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
    margin: 0 0 var(--c-space-3);
}

.c-content-body .program-card h3 {
    margin-top: 0;
}

.c-content-body .program-card__desc {
    margin-bottom: var(--c-space-3);
}