.utility-nav {
    background-color: #80001b;
    /* the red colour from your design */
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    text-align: right;

    .menu {
        display: flex;
        gap: 1rem;
        list-style: none;
        margin: 0;
        align-items: end;

        a {
            color: #fff;
            font-weight: bold;
            text-decoration: none;
        }
    }
}

.utility-nav {
    /* adjust selectors based on your menu template */
    /* styling for menu links */

    .primary-nav__link {
        color: var(--nav-utility-text-color, #FFF);
    }
}

/* Button component baseline */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: 0.25rem;
    padding: 0.625rem 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.btn--primary {
    background-color: var(--color-primary, #80001b);
    color: #fff;
}

.btn--secondary {
    background-color: var(--color-secondary, #16324f);
    color: #fff;
}

.btn--clear-style {
    padding: 0;
    margin: 0;
    background: none;
    border: none;
}

.text-normal {
    text-decoration: none;
}

.text-inherit {
    color: inherit;
}

.text-box-trim {
    --trim-fallback-margin: 1rem;
    text-box-trim: trim-end;
    text-box-edge: cap alphabetic;
}

/* Spacing */
.m-0 {
    margin: 0;
}

.p-0 {
    padding: 0;
}

/* Ratio */
.ratio {
    position: relative;
    width: 100%;
}

.ratio::before {
    display: block;
    padding-top: var(--mstc-aspect-ratio);
    content: "";
}

.ratio>* {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.ratio-1x1 {
    --mstc-aspect-ratio: 100%;
}

.ratio-4x3 {
    --mstc-aspect-ratio: calc(3 / 4 * 100%);
}

.ratio-16x9 {
    --mstc-aspect-ratio: calc(9 / 16 * 100%);
}

.ratio-21x9 {
    --mstc-aspect-ratio: calc(9 / 21 * 100%);
}

/* Pills */
.tag-pill {
    display: flex;
    padding: 4px 12px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border: 1px solid #B40015;
    color: #B40015;
    text-decoration: none;
    font-weight: 400;

    &:hover, &:focus {
        color: #500617;
    }
}

/* Card component baseline */
.card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.5rem;
    overflow: hidden;
}

.card__media img {
    width: 100%;
    height: auto;
    display: block;
}

.card__body {
    padding: 1rem;
}

.card__title {
    margin: 0 0 0.5rem;
    font-weight: 700;
}

.card__text {
    margin: 0;
}

/* Hero component baseline */
.hero {
    position: relative;
    background: var(--color-hero-bg, #f6f6f9);
    color: var(--color-hero-fg, #111);
    padding: 3rem 1rem;
}

.hero__content {
    max-width: 72rem;
    margin: 0 auto;
}

.hero__title {
    font-size: clamp(2rem, 4vw, 3rem);
    margin: 0 0 1rem;
}

.hero__sub {
    font-size: clamp(1rem, 2vw, 1.25rem);
    margin: 0 0 1.5rem;
}

/* Media */
.img-fluid {
    max-width: 100%;
}

/* Paragraph */
p:empty {
    display: none;
}

/* ==========================================================================
   GLOBAL CONTENT LISTS (Gold Triangle Marker)
   ========================================================================== */

/* Target unclassed UI elements across the site, plus known editor constraints */
main ul:not([class]):not(.list-unstyled), 
.layout-container ul:not([class]):not(.list-unstyled),
[class*="description"] ul:not(.list-unstyled) {
    list-style: none !important;
    padding-left: 2rem !important;
    margin-bottom: 1rem !important;
    margin-top: 0 !important;
}

main ul:not([class]):not(.list-unstyled) > li, 
.layout-container ul:not([class]):not(.list-unstyled) > li,
.gutenberg-prose ul:not(.list-unstyled) > li,
[class*="description"] ul:not(.list-unstyled) > li,
main ul:not(.list-unstyled) li[data-list="bullet"],
.layout-container ul:not(.list-unstyled) li[data-list="bullet"],
.gutenberg-prose ul:not(.list-unstyled) li[data-list="bullet"],
[class*="description"] ul:not(.list-unstyled) li[data-list="bullet"] {
    position: relative !important;
    padding-left: 0.5rem !important;
    font-family: 'Gelasio', serif !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
    color: var(--list-text-color, #82142C) !important;
    margin-bottom: 0.5rem !important;
    list-style: none !important;
}

main ul:not([class]):not(.list-unstyled) > li::before, 
.layout-container ul:not([class]):not(.list-unstyled) > li::before,
.gutenberg-prose ul:not(.list-unstyled) > li::before,
[class*="description"] ul:not(.list-unstyled) > li::before,
main ul:not(.list-unstyled) li[data-list="bullet"]::before,
.layout-container ul:not(.list-unstyled) li[data-list="bullet"]::before,
.gutenberg-prose ul:not(.list-unstyled) li[data-list="bullet"]::before,
[class*="description"] ul:not(.list-unstyled) li[data-list="bullet"]::before {
    content: "" !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    border-left: 8px solid var(--list-bullet-color, #FDB71A) !important;
    border-top: 6px solid transparent !important;
    border-bottom: 6px solid transparent !important;
    position: absolute !important;
    left: -1rem !important;
    top: 0.45em !important;
}

main ul:not(.list-unstyled) li[data-list="bullet"]::marker,
.layout-container ul:not(.list-unstyled) li[data-list="bullet"]::marker,
.gutenberg-prose ul:not(.list-unstyled) li[data-list="bullet"]::marker,
[class*="description"] ul:not(.list-unstyled) li[data-list="bullet"]::marker {
    content: "" !important;
    color: transparent !important;
    display: none !important;
}

article.node .gutenberg-prose {
    > ul:not(.list-unstyled) {
        > li {
            padding-left: 1rem !important;

            &:before {
                left: 0 !important;
            }
        }
    }
}

.list-unstyled {
    padding: 0;
    margin: 0;
    list-style: none;

    li {
        padding: 0;
        margin: 0;
    }
}

/* ==========================================================================
   Dark Theme — Unordered List Text Color Override
   Fixes: #75, #76, #79 (UL text invisible on dark backgrounds — red on red)

   EXCEPTION: mstc-two-column-bullets--dark only applies a dark box offset
   behind card images — its list content sits on a light/white background.
   ========================================================================== */

[class*="--dark"]:not(.mstc-two-column-bullets--dark) ul li,
[class*="--dark"]:not(.mstc-two-column-bullets--dark) li[data-list="bullet"] {
    color: var(--list-text-dark-color, #FFFFFF) !important;
}

/* Gold triangle marker remains visible; no change needed.
   The ::before border-left color (#FDB71A gold) contrasts against dark backgrounds. */

/* ==========================================================================
   Yellow/Gold Background — Red Triangle Marker Override
   Switches the gold triangle (#FDB71A) to red/burgundy (#B40015) so
   bullet markers remain visible against yellow section backgrounds.
   Matches Figma design spec (see node 2002-9047).
   ========================================================================== */

.cta-unified ul:not([class]) > li::before,
.cta-unified [class*="description"] ul > li::before,
.cta-unified .cta-unified__content-summary ul > li::before,
.cta-unified .cta-unified__header-container ul > li::before,
.cta-unified .cta-unified__content-section ul > li::before,
.cta-unified li[data-list="bullet"]::before,
.mstc-side-by-side-bullets-medium ul:not([class]) > li::before,
.mstc-side-by-side-bullets-medium [class*="description"] ul > li::before,
.mstc-side-by-side-bullets-medium li[data-list="bullet"]::before {
    border-left-color: var(--list-bullet-dark-color, #B40015) !important;
}

/* No results message */
.no-results-message,
.no-programs-message {
  padding: 3rem;
  text-align: center;
  font-family: 'Gelasio', serif;
  font-size: 18px;
  color: #500617;
}

/**
 * Home page content type
 */
.node--type-home-page {
    .home__body-layout {
        padding-top: 100px;
    }

    .mstc-hero-carousel-container {
        background-image: url(../images/hero-small-pattern.png)
    }

    .testimonial-promotion {
        --bl-padding-bottom: 2rem;
    }

    .side-by-side-new-events {
        --bl-padding-bottom: 0;
        --bl-padding-sm-bottom: 1.5rem;
    }

    @media (max-width: 768px) {
        .mstc-hero-carousel-container {
            background-image: none;
        }

        .mhci-image {
            background-image: url(../images/hero-small-pattern.png)
        }

        .pathway-icons {
            --bl-padding-sm-top: 0;
            --bl-padding-sm-bottom: 0;
        }

        .pathway-icons__container {
            background-color: transparent;
        }

        .pathway-icons__content-inner {
            font-size: .875rem;

            > :first-child {
                margin-top: 0;
            }

            > :last-child {
                margin-bottom: 0;
            }
        }
    }
}