/*
 * Class Manager: NRA Compliance — category disclaimers on the front end.
 *
 * Bold, in the disclaimer colour; on full pages and the ticket pop-up also in a tinted
 * panel. "Same as the class title" follows the class name's size where it's shown — and,
 * on class and date pages (whose title is the theme's), the theme heading's size, copied by
 * disclaimers.js, with --clm-disclaimer-title-size as the fallback.
 *
 * Uses Class Manager's own colour and layout variables, so it's loaded after its stylesheet.
 */

:root {
    --clm-disclaimer-color: #b32d2e;
    --clm-disclaimer-title-size: 2rem;
}

.clm-disclaimer {
    margin: .25rem 0 .5rem;
    color: var(--clm-disclaimer-color);
    font-weight: 700;
    line-height: 1.4;
}

.clm-disclaimer a {
    color: inherit;
    text-decoration: underline;
}

.clm-disclaimer--small {
    font-size: .8rem;
}

.clm-disclaimer--normal {
    font-size: 1rem;
}

.clm-disclaimer--large {
    font-size: 1.25rem;
}

.clm-disclaimer--title {
    font-size: var(--clm-disclaimer-title-size);
    line-height: 1.25;
}

/* Category-wide ones (above a listing), and single item ones on pages and in the pop-up: a panel, so they can't be missed. */
.clm-disclaimer--group,
.clm-disclaimer--item.clm-disclaimer--at-class,
.clm-disclaimer--item.clm-disclaimer--at-date,
.clm-disclaimer--item.clm-disclaimer--at-checkout {
    margin: 0 0 1.25rem;
    padding: .75rem 1rem;
    background: color-mix(in srgb, var(--clm-disclaimer-color) 8%, transparent);
    border-left: 4px solid var(--clm-disclaimer-color);
    border-radius: .25rem;
}

.clm-disclaimers .clm-disclaimer--group {
    margin-bottom: .75rem;
}

.clm-disclaimers {
    margin: 0 0 1.25rem;
}

/* The block's "Below the classes" setting. */
.clm-grid + .clm-disclaimers {
    margin: 1.25rem 0 0;
}

/* Single item disclaimers under a class name on tiles and list rows. */
.clm-catalog__tile .clm-disclaimer {
    margin: -.35rem .7rem .6rem;
    font-size: .75rem;
}

.clm-catalog__list .clm-disclaimer {
    margin: -.35rem 1.1rem .6rem;
    font-size: .8rem;
}

.clm-catalog > .clm-catalog__list .clm-disclaimer {
    margin-left: 0;
}

/*
 * "Same as the class title" = the size of the class name where the disclaimer is shown.
 * (On class and date pages the name is the theme's page heading: class.js copies that
 * heading's size; --clm-disclaimer-title-size is the fallback.)
 */

/* Course list rows and the upcoming-classes list: the name is body-size text. */
.clm-catalog__list .clm-disclaimer--title,
.clm-upcoming .clm-disclaimer--title,
.clm-catalog__card > .clm-disclaimer--title {
    font-size: inherit;
}

/* Cards (schedule, block): the name is 1rem — .875rem on small cards. */
.clm-card .clm-disclaimer--title {
    font-size: 1rem;
}

@container (max-width: 200px) {
    .clm-card .clm-disclaimer {
        font-size: .75rem;
    }

    .clm-card .clm-disclaimer--title {
        font-size: .875rem;
    }
}

/* Stacked rows. */
.clm-row .clm-disclaimer--title {
    font-size: 1.1rem;
}

/* Category page tiles. */
.clm-catalog__tile .clm-disclaimer--title {
    font-size: .875rem;
}

/* The ticket pop-up: the class name beside the tickets. */
.clm-checkout .clm-disclaimer--title {
    font-size: 1.1rem;
}

/* Calendar entries (.875rem in the phone list). */
.clm-calendar .clm-disclaimer {
    margin: .1rem 0 0;
    font-size: .72rem;
}

.clm-calendar .clm-disclaimer--title {
    font-size: .8rem;
}

@media (max-width: 640px) {
    .clm-calendar .clm-disclaimer--title {
        font-size: .875rem;
    }
}

/* Category-wide, above a listing: the size of the class names listed below it. */
.clm-disclaimer--group.clm-disclaimer--title.clm-disclaimer--at-schedule,
.clm-disclaimer--group.clm-disclaimer--title.clm-disclaimer--at-category_schedule,
.clm-disclaimer--group.clm-disclaimer--title.clm-disclaimer--at-block {
    font-size: 1rem;
}

.clm-disclaimer--group.clm-disclaimer--title.clm-disclaimer--at-category {
    font-size: .875rem;
}

.clm-catalog__card > .clm-disclaimer--group {
    margin: .75rem 1.1rem .25rem;
}