/* custom css */

:root {
    /* Brand */
    --clr-brand: #dc3545;
    --clr-brand-active: #f04438;
    /* Deep header red. Already used literally by the clipboard badge, the utility-link hover
       state and the focus ring; named here so the header tooltips can share one source. */
    --clr-brand-deep: #A9231A;
    --clr-brand-wash: #fcebec;
    --clr-brand-pink: #fdf0ee;
    --clr-brand-pink-rgb: 253, 240, 238;
    /* Neutrals */
    --clr-black: #000;
    --clr-white: #fff;
    --clr-dark: #212529;
    --clr-dark-rgb: 33, 37, 41;
    --clr-text: #111111;
    --clr-muted: #6c757d;
    /* Borders */
    --clr-border: #dee2e6;
    --clr-border-light: #ececec;
    --clr-border-medium: #adb5bd;
    /* Backgrounds */
    --clr-bg: #fff;
    --clr-bg-gray: #efefef;
    --clr-bg-gray-inactive: #c7c7c7;
    --clr-bg-blue-wash: #e7f1f7;
    --clr-bg-blue-light: #e3eef5;
    --clr-bg-blue-medium: #d7e5ee;
    /* Social */
    --clr-instagram: #E4405F;
    --clr-linkedin: #0A66C2;
    --clr-youtube: #FF0000;
}

/* Banner modules: the Two Button Banner (ON211/Modules/Content/TwoButtonBanner.ascx) and the
   Header Banner (HeaderBanner.ascx), which was split out of it and took the Centered layout
   with it. Both carry the two-button-banner class so these shared rules and the per-instance
   rules further down bind to either; .header-banner marks the one that was split out.
-------------------------------------------------- */
.two-button-banner .banner-eyebrow {
    letter-spacing: .05em;
}

.two-button-banner .banner-description {
    max-width: 640px;
}

    .two-button-banner .banner-description p {
        margin-bottom: 0;
    }

/* Icon Card List module (ON211/Modules/Content/IconCardList.ascx)
-------------------------------------------------- */
.icon-card {
    background: #EEEEEF;
    border-radius: 8px !important; /* ref: 8px — overrides Bootstrap rounded-4 (16px !important) */
    transition: box-shadow 0.2s ease;
}

    .icon-card:hover {
        box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.08);
    }

    /* Icon: circular red-bordered badge matching 5300 reference */
    .icon-card .icon-card-icon {
        display: block;
        width: 30px !important;
        height: 30px !important;
        padding: 6px;
        border-radius: 100px;
        border: 1px solid #A9231A;
        background-color: #FFFFFF;
        box-shadow: 0px 0.59px 1.17px 0px rgba(16, 24, 40, 0.05);
        object-fit: contain;
        margin-bottom: 12px !important; /* tighten from mb-3 (16px) to 12px */
    }

    /* Title: smaller, warmer near-black, tighter line-height */
    .icon-card h4,
    .icon-card h2 {
        font-size: 1.125rem !important; /* 18px — ref ~18px vs Bootstrap h4 24px */
        line-height: 1.4 !important;
        color: #2E3032 !important;
        margin-bottom: 8px !important; /* tighten mb-3 (16px) to 8px */
    }

    /* Description: ref uses #2E3032 not Bootstrap text-secondary #6c757d */
    .icon-card .text-secondary {
        color: #2E3032 !important;
        font-size: 1rem;
        line-height: 1.5;
    }

/* A card with a Link is the anchor itself, so the whole card is one target and one tab
   stop. The [href] guard leaves a card without a link looking exactly as it did — it
   still goes out as an <a>, just an inert one. */
a.icon-card {
    display: block;
    color: inherit;
    text-decoration: none;
}

    a.icon-card[href]:hover h4,
    a.icon-card[href]:hover h2 {
        text-decoration: underline;
    }

    a.icon-card[href]:focus-visible {
        outline: 2px solid #A9231A;
        outline-offset: 2px;
    }

/* The card's link label. While the card is the anchor this is a span, so it carries the
   read-more look itself rather than inheriting it from <a>. */
.icon-card .icon-card-link {
    font-size: 1rem;
    text-decoration: none;
}

/* Two links: the card is no longer the anchor, so each label is a link in its own right and
   has to carry the hover and focus treatment the card used to give it. */
.icon-card a.icon-card-link:hover {
    text-decoration: underline;
}

.icon-card a.icon-card-link:focus-visible {
    outline: 2px solid #A9231A;
    outline-offset: 2px;
    border-radius: 2px;
}

.icon-card p:last-child {
    margin-bottom: 0;
}

/* Divider module (ON211/Modules/Content/Divider.ascx)
-------------------------------------------------- */
.module-divider {
    border: 0;
    border-top: 1px solid var(--clr-brand);
    opacity: 1;
    margin: 1.5rem 0;
}

/* Image Text Split module (ON211/Modules/Content/ImageTextSplit.ascx)
-------------------------------------------------- */
.image-text-split .image-text-description {
    max-width: 640px;
}

    .image-text-split .image-text-description p:last-child {
        margin-bottom: 0;
    }

/* Bootstrap's .text-decoration-none is !important, so the hover needs one too. */
.image-text-split .image-text-link:hover {
    text-decoration: underline !important;
}

/* Block display so the ms-lg-auto margin can push the image to the outer edge. */
.image-text-split .image-text-image {
    display: block;
}

/* Site header (ON211/Controls/Navigation/Navbar/Navbar.ascx)
-------------------------------------------------- */
.site-header {
    border-bottom: 1px solid var(--clr-border-light);
    padding-top: .875rem;
    padding-bottom: .875rem;
}

    /* Text-drawn 211 logo: red oval around "211", same treatment as the footer badge. */
    .site-header .header-logo-badge {
        display: inline-block;
        border: 3px solid var(--clr-brand);
        border-radius: 50%;
        padding: .05em .45em;
        font-size: 1.5rem;
        font-weight: 800;
        line-height: 1.2;
        color: var(--clr-black);
    }

    .site-header .header-logo-reg {
        font-size: .55rem;
        top: -1.6em;
    }

    .site-header .header-logo-name {
        font-weight: 700;
        color: var(--clr-black);
    }

    .site-header .navbar-brand {
        flex-shrink: 0;
    }

.header-logo-img {
    max-width: 143px;
    height: auto;
}

/* Menu: dark links; dropdown parents get a red chevron instead of Bootstrap's caret. */
.site-header .navbar-nav .nav-link {
    color: var(--clr-dark);
    white-space: nowrap;
}

/* Dropdown chevron: Lucide chevron-down (#A9231A) as SVG background-image — no inline markup needed. */
.site-header .nav-link.dropdown-toggle::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23A9231A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    vertical-align: -0.25em;
    margin-left: .3em;
    transform: none;
}

/* Hamburger/collapsed state: pin chevron to the right edge of the full-width nav-link row */
@media (max-width: 991.98px) {
    .site-header .nav-link.dropdown-toggle {
        position: relative;
        padding-right: 1.75rem;
    }

        .site-header .nav-link.dropdown-toggle::after {
            position: absolute;
            right: 0;
            top: 50%;
            margin-left: 0;
            vertical-align: unset;
            transform: translateY(-50%);
        }
}

/* Right-side utility links (Your List, EN/FR, contact icons). */
.site-header .header-utility {
    gap: 0 !important;
}

    .site-header .header-utility .nav-link {
        color: var(--clr-dark);
        white-space: nowrap;
        padding: 0.25rem 0.375rem;
        border-radius: 6px;
        transition: color 0.2s, background-color 0.2s;
    }

        /* Your List + EN/FR: text turns red on hover */
        .site-header .header-utility .nav-link:not([aria-label]):hover {
            color: #A9231A;
            background-color: transparent;
        }

        /* Icon-only links (email, chat, phone): subtle bg on hover */
        .site-header .header-utility .nav-link[aria-label]:hover {
            background-color: #EEEEEF;
            color: inherit;
        }

.site-header .header-exit {
    white-space: nowrap;
}

/* At desktop (navbar expanded), reorder flex children so nav links sit between logo and utility.
   DOM order is: logo → spacer(d-lg-none) → outer-utility → exit-site → toggler → collapse.
   CSS order slots collapse (nav links) into position 2, keeping utility and exit on the right. */
@media (min-width: 992px) {
    .site-header .collapse.navbar-collapse {
        order: 2;
    }

    .site-header .header-utility-outer {
        order: 3;
    }

    .site-header .header-exit {
        order: 4;
    }
}

/* Breadcrumb (ON211/Controls/Navigation/Breadcrumb.ascx)
-------------------------------------------------- */
.site-breadcrumb .breadcrumb-link {
    color: var(--clr-dark);
    text-decoration: none;
}

    .site-breadcrumb .breadcrumb-link:hover {
        color: var(--clr-brand);
        text-decoration: underline;
    }

/* Red chevron separators; the current page is red and semibold (per the design). */
.site-breadcrumb .breadcrumb-separator {
    color: var(--clr-brand);
    font-weight: 600;
}

.site-breadcrumb .breadcrumb-current {
    color: var(--clr-brand);
    font-weight: 600;
}

/* Hero Section module (ON211/Modules/Content/HeroSection.ascx)
-------------------------------------------------- */
.hero-section .hero-description {
    max-width: 620px;
    font-size: 1.125rem;
}

    .hero-section .hero-description p:last-child {
        margin-bottom: 0;
    }

/* Two illustrations share the right column side by side.
   The server renders each inside a <picture> — centre the picture
   so the img sits in the middle of the flex row. */
.hero-section picture {
    flex: 0 1 46%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-section .hero-image {
    max-width: 100%;
    height: auto;
}

/* Statement List module (ON211/Modules/Content/StatementList.ascx)
-------------------------------------------------- */
/* Rows separated by rules, closed off with a bottom rule after the last row. */
.statement-list .statement-row {
    border-top: 1px solid var(--clr-border);
}

.statement-list .statement-rows {
    border-bottom: 1px solid var(--clr-border);
}

.statement-list .statement-title {
    color: var(--clr-brand);
}

.statement-list .statement-text p:last-child,
.statement-list .statement-intro p:last-child {
    margin-bottom: 0;
}

/* Why Choose Us module (ON211/Modules/Content/WhyChooseUs.ascx)
-------------------------------------------------- */
/* Every numbered row is closed off with a rule underneath, last one included. */
.why-choose-us .why-row {
    border-bottom: 1px solid var(--clr-border);
}

/* Red 01 / 02 / ... number; fixed width so the titles and text line up. */
.why-choose-us .why-number {
    color: var(--clr-brand);
    flex: 0 0 3.25rem;
}

.why-choose-us .why-body {
    flex: 1 1 auto;
    min-width: 0;
}

.why-choose-us .why-text p:last-child {
    margin-bottom: 0;
}

/* Callout Panel module (ON211/Modules/Content/CalloutPanel.ascx)
-------------------------------------------------- */
.callout-panel .callout-inner {
    background: var(--clr-bg-blue-wash);
}

.callout-panel .callout-text p:last-child {
    margin-bottom: 0;
}

/* Regional Providers module (ON211/Modules/Content/RegionalProviders.ascx)
-------------------------------------------------- */
.regional-providers .provider-intro p:last-child {
    margin-bottom: 0;
}

/* Website line: gray like the phone lines, underline only on hover (per the design). */
.regional-providers .provider-site {
    color: var(--clr-muted);
    text-decoration: none;
}

    .regional-providers .provider-site:hover {
        color: var(--clr-brand);
        text-decoration: underline;
    }

/* Email / Facebook / X icon links. */
.regional-providers .provider-icons a {
    color: var(--clr-dark);
    line-height: 1;
}

    .regional-providers .provider-icons a:hover {
        color: var(--clr-brand);
    }

/* Accordion module (ON211/Modules/Content/Accordion.ascx)
-------------------------------------------------- */
/* Flat list per the design: no boxes, a thin rule under each item, bold dark titles,
   and a plus / minus toggle on the far right instead of the Bootstrap chevron. */
.accordion-flush .accordion-item {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--clr-border);
}

.accordion-flush .accordion-button {
    background: transparent;
    box-shadow: none;
    color: var(--clr-dark);
    font-size: 1.125rem;
    font-weight: 700;
    padding: 1.5rem 0;
}

    /* Open state keeps the same look — no blue tint or shadow. */
    .accordion-flush .accordion-button:not(.collapsed) {
        background: transparent;
        box-shadow: none;
        color: var(--clr-dark);
    }

    .accordion-flush .accordion-button:focus {
        box-shadow: none;
    }

    .accordion-flush .accordion-button:focus-visible {
        outline: 2px solid var(--clr-brand);
        outline-offset: 2px;
    }

    /* Plus when collapsed, minus when open; no rotation.
       SVG fill colours are URL-encoded hex — CSS vars cannot resolve inside data URIs. */
    .accordion-flush .accordion-button::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath d='M8 2a.75.75 0 0 1 .75.75v4.5h4.5a.75.75 0 0 1 0 1.5h-4.5v4.5a.75.75 0 0 1-1.5 0v-4.5h-4.5a.75.75 0 0 1 0-1.5h4.5v-4.5A.75.75 0 0 1 8 2Z'/%3e%3c/svg%3e");
        transform: none;
    }

    .accordion-flush .accordion-button:not(.collapsed)::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath d='M2.75 7.25h10.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5Z'/%3e%3c/svg%3e");
        transform: none;
    }

.accordion-flush .accordion-body {
    color: var(--clr-muted);
    padding: 0 0 1.5rem;
}

    .accordion-flush .accordion-body p:last-child {
        margin-bottom: 0;
    }

    /* Links inside the body stay gray and underlined (per the design). */
    .accordion-flush .accordion-body a {
        color: inherit;
        text-decoration: underline;
    }

/* Intro Left / Accordion Right (FAQ) layout: heading, description and "More FAQs" link
   in the left column, the flat accordion in the right one. */
.accordion-split .accordion-intro-description {
    max-width: 560px;
}

/* Bootstrap's .text-decoration-none is !important, so the hover needs one too. */
.accordion-split .accordion-intro-link:hover {
    text-decoration: underline !important;
}

/* Blog Section module (ON211/Modules/Blog/BlogSection.ascx)
-------------------------------------------------- */
/* Heading, description and "View All Stories" button on the left; the latest articles
   (square rounded thumbnail, title, meta row, "Read more" link) on the right. */
.blog-section .blog-section-description {
    max-width: 560px;
}

.blog-section .blog-section-thumb img {
    width: 168px;
    height: 168px;
    object-fit: contain;
    border-radius: 1rem;
    background: var(--clr-bg-blue-light);
}

.blog-section .blog-section-meta {
    font-size: 0.9375rem;
}

    /* The dividers between the meta items match the row's gray text. */
    .blog-section .blog-section-meta .vr {
        align-self: center;
        height: 1rem;
    }

.blog-section .blog-section-item h3 a:hover {
    text-decoration: underline !important;
}

/* Shared readmore arrow animation */
.readmore-arrow,
.banner-btn-arrow {
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

/* Bootstrap's .text-decoration-none is !important, so the hover needs one too. */
.blog-section .blog-section-readmore:hover,
.image-text-link:hover,
.related-nearby-link:hover {
    text-decoration: underline !important;
}

    .blog-section .blog-section-readmore:hover .readmore-arrow,
    .image-text-link:hover .readmore-arrow,
    .related-nearby-link:hover .readmore-arrow,
    a.icon-card[href]:hover .readmore-arrow,
    .icon-card a.icon-card-link:hover .readmore-arrow {
        animation: readmore-nudge 0.8s ease-in-out infinite;
    }

a:hover .banner-btn-arrow {
    animation: readmore-nudge 0.8s ease-in-out infinite;
}

@keyframes readmore-nudge {
    0%, 100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(5px);
    }
}

/* Staff List module (ON211/Modules/Staff/StaffList.ascx)
-------------------------------------------------- */
/* Heading beside the description, closed off with a red rule, then a two-column grid of
   people: circular photo, name, title, and a plus / minus toggle on the far right that
   opens that person's biography underneath. */
.staff-list .staff-list-description {
    max-width: 560px;
}

/* The red rule under the intro. Bootstrap's hr is a low-opacity currentColor border, so
   both the colour and the opacity have to be set here. */
.staff-list .staff-list-rule {
    border-top: 1px solid var(--clr-brand);
    opacity: 1;
    margin: 1.5rem 0 3rem;
}

.staff-list .staff-department + .staff-department {
    margin-top: 3.5rem;
}

/* Fixed circle so a row's height doesn't depend on the photo that was uploaded; cover
   keeps a non-square headshot from stretching. */
.staff-list .staff-photo img {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: 50%;
    background: var(--clr-bg-gray);
}

@media (min-width: 992px) {
    .staff-list .staff-photo img {
        width: 200px;
        height: 200px;
    }
}

/* The stand-in silhouette sits smaller inside the same gray circle instead of filling it. */
.staff-list .staff-photo img.staff-photo-placeholder {
    object-fit: contain;
    padding: 18%;
}

.staff-list .staff-member-name {
    color: var(--clr-dark);
    font-size: 1.5rem;
}

.staff-list .staff-member-title {
    color: var(--clr-muted);
    font-size: 0.9375rem;
}

.staff-list .staff-member-linkedin {
    color: var(--clr-dark);
    line-height: 1;
}

    .staff-list .staff-member-linkedin:hover {
        color: var(--clr-linkedin);
    }

    .staff-list .staff-member-linkedin:focus-visible {
        outline: 2px solid var(--clr-brand);
        outline-offset: 2px;
    }

.staff-list .staff-member-detail-body {
    color: var(--clr-muted);
}

    .staff-list .staff-member-detail-body p:last-child {
        margin-bottom: 0;
    }

/* Plus when collapsed, minus when open — the same glyphs the Accordion module uses, so the
   two read as the same control. Bootstrap adds / removes .collapsed on the trigger itself.
   SVG fill colours are URL-encoded hex: CSS vars cannot resolve inside data URIs. */
.staff-list .staff-member-toggle {
    background: transparent;
    border: 0;
    padding: 0;
    width: 1.75rem;
    height: 1.75rem;
    line-height: 1;
}

    .staff-list .staff-member-toggle::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath d='M8 2a.75.75 0 0 1 .75.75v4.5h4.5a.75.75 0 0 1 0 1.5h-4.5v4.5a.75.75 0 0 1-1.5 0v-4.5h-4.5a.75.75 0 0 1 0-1.5h4.5v-4.5A.75.75 0 0 1 8 2Z'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
    }

    .staff-list .staff-member-toggle:not(.collapsed)::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath d='M2.75 7.25h10.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5Z'/%3e%3c/svg%3e");
    }

    .staff-list .staff-member-toggle:focus-visible {
        outline: 2px solid var(--clr-brand);
        outline-offset: 2px;
    }

/* Center-mode carousel (ON211/Modules/Banner/CarouselSlider.ascx, Swiper)
-------------------------------------------------- */
.banner-swiper .banner-slide {
    position: relative;
    overflow: hidden;
    background: var(--clr-bg-blue-medium);
    max-height: 470px;
}

    /* Image / video fills the rounded card. */
    .banner-swiper .banner-slide .banner-slide-picture {
        display: block;
        height: 100%;
    }

    .banner-swiper .banner-slide .banner-slide-media {
        width: 100%;
        height: 100%;
        max-height: 470px;
        object-fit: cover;
        display: block;
    }

.banner-slide-caption {
    position: absolute;
    left: 2.5rem;
    right: 2.5rem;
    bottom: 1.75rem;
    z-index: 2;
}

/* Round prev/next buttons floating over the peeking side slides. */
.banner-swiper-prev,
.banner-swiper-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgba(var(--clr-dark-rgb), .7);
    color: var(--clr-white);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .banner-swiper-prev:hover,
    .banner-swiper-next:hover {
        background: rgba(var(--clr-dark-rgb), .9);
    }

.banner-swiper-shell {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.banner-swiper-prev {
    left: 1.5%;
}

.banner-swiper-next {
    right: 1.5%;
}

/* Bar-style pagination below the slides: active red, others grey. */
.banner-swiper-pagination {
    display: flex;
    justify-content: center;
    gap: .75rem;
    margin-top: 1.5rem;
}

    .banner-swiper-pagination .swiper-pagination-bullet {
        width: 32px;
        height: 8px;
        border: 0;
        padding: 0;
        border-radius: 4px;
        background: var(--clr-bg-gray-inactive);
        opacity: 1;
        margin: 0 !important;
        cursor: pointer;
        transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s ease;
    }

    .banner-swiper-pagination .swiper-pagination-bullet-active {
        width: 110px;
        background: #A9231A;
    }

@media (max-width: 767px) {
    .banner-slide-caption {
        left: 1.25rem;
        right: 1.25rem;
        bottom: 1rem;
    }

    .banner-swiper-prev,
    .banner-swiper-next {
        width: 36px;
        height: 36px;
    }

    .banner-swiper-pagination .swiper-pagination-bullet {
        width: 20px;
        height: 6px;
    }

    .banner-swiper-pagination .swiper-pagination-bullet-active {
        width: 48px;
    }
}

/* Browse By Topic module (ON211/Modules/Directory/BrowseByTopic.ascx)
-------------------------------------------------- */
.browse-by-topic .topic-card {
    background: var(--clr-white);
    border: 1px solid var(--clr-border);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

/* Topics grid eases from full width to the split layout when a panel opens. */
.browse-by-topic .topics-col {
    transition: width .35s ease;
}

/* The detail panel slides in from the right each time it is shown: toggling
   d-none restarts the animation, so switching topics re-plays it too. */
.browse-by-topic .topic-detail {
    animation: browseTopicDetailIn .35s ease-out;
}

@keyframes browseTopicDetailIn {
    from {
        opacity: 0;
        transform: translateX(32px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .browse-by-topic .topics-col {
        transition: none;
    }

    .browse-by-topic .topic-detail {
        animation: none;
    }
}

/* ── Tile states ────────────────────────────────────────────────────────
       Default / Hover / Active, per the Tile design. Hover fills grey and darkens the border —
       it used to change the border colour alone, which was easy to miss on a white card. Active
       is the red treatment, and is driven by the .selected class the module's script adds. */
.browse-by-topic .topic-card:hover {
    background: #EDEDED;
    border-color: #8C8C8C;
}

    /* The icon chip goes lighter than the card it sits on, so it stays legible as a chip
           instead of merging into the grey.

           !important is needed, not decorative: the base .topic-card-icon rule further down this
           file sets background-color !important, which would otherwise pin the chip grey through
           every state. */
    .browse-by-topic .topic-card:hover .topic-card-icon {
        background-color: #F6F6F6 !important;
        border-color: #C9C9C9;
    }

/* Active: light red wash, red border, red title. */
.browse-by-topic .topic-card.selected {
    background: var(--clr-brand-wash);
    border-color: #A9231A;
    color: #A9231A;
}

    /* White chip with a red edge, as in the design — the glyph inside stays dark. */
    .browse-by-topic .topic-card.selected .topic-card-icon {
        background-color: var(--clr-white) !important;
        border-color: #A9231A;
    }

    /* The title is a span carrying its own colour, so it has to be told too — and told with
           !important, since .topic-card-title further down pins it to #2E3032 that way. */
    .browse-by-topic .topic-card.selected .topic-card-title {
        color: #A9231A !important;
    }

    /* Active wins over hover: hovering the open tile shouldn't grey it back out. */
    .browse-by-topic .topic-card.selected:hover {
        background: var(--clr-brand-wash);
        border-color: #A9231A;
    }

        .browse-by-topic .topic-card.selected:hover .topic-card-icon {
            background-color: var(--clr-white) !important;
            border-color: #A9231A;
        }

.browse-by-topic .topic-card .topic-card-icon {
    width: 44px;
    height: 44px;
    background: var(--clr-bg-gray);
    border: 1px solid var(--clr-border);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Named so the state rules above can animate it with the card. */
    transition: background-color .2s ease, border-color .2s ease;
}

    .browse-by-topic .topic-card .topic-card-icon img {
        width: 22px;
        height: 22px;
    }

.browse-by-topic .topic-detail-title {
    color: var(--clr-brand);
}

/* ── Resource list ──────────────────────────────────────────────────────────
   The panel opens on the first three resources; "View more" reveals the rest and adds
   .is-expanded, at which point the list scrolls inside itself instead of running the page long.
   That is the point of it: the topic tiles stay in view, so changing topic is a click rather than a
   scroll back up. Only the expanded state scrolls — three items have nothing to scroll. */
.browse-by-topic .topic-resource-list.is-expanded {
    /* Tall enough for roughly three cards, so the list still reads as a list and the tiles beside
       it stay on screen at the same time. */
    max-height: 60vh;
    overflow-y: auto;
    /* Room for the scrollbar so it doesn't sit on top of the cards' right edge. */
    padding-right: 6px;
    /* Contains the momentum scroll rather than passing it to the page once the list bottoms out. */
    overscroll-behavior: contain;
}

/* A quieter scrollbar than the browser default, which is heavy next to these cards. */
.browse-by-topic .topic-resource-list.is-expanded {
    scrollbar-width: thin;
    scrollbar-color: #C9C9C9 transparent;
}

    .browse-by-topic .topic-resource-list.is-expanded::-webkit-scrollbar {
        width: 8px;
    }

    .browse-by-topic .topic-resource-list.is-expanded::-webkit-scrollbar-thumb {
        background: #C9C9C9;
        border-radius: 4px;
    }

    .browse-by-topic .topic-resource-list.is-expanded::-webkit-scrollbar-track {
        background: transparent;
    }

.browse-by-topic .topic-subcategory {
    background: var(--clr-bg-gray);
}

.browse-by-topic .view-resources-link {
    color: var(--clr-brand);
}

/* GuidedSearch module (ON211/Modules/Directory/GuidedSearch.ascx)
-------------------------------------------------- */
/* Only the current step's row shows; the others are just d-none, so switching steps
   never resizes the surrounding page beyond the step content itself. */
.guided-search-step {
    max-width: 100%;
}

    /* utility-theme.css loads after Bootstrap and sets ".row { display: flex !important; }" —
   equal specificity to Bootstrap's ".d-none" and later in the cascade, so on a plain
   ".row.d-none" element it silently wins and the row never actually hides. Two classes
   here beats utility-theme's one, so this rule wins on specificity regardless of load
   order, without having to touch that shared stylesheet. */
    .guided-search-step.d-none {
        display: none !important;
    }

.guided-search-image {
    background: var(--clr-bg-gray);
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.guided-search-stepline {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
    justify-content: flex-start;
}

.guided-search-steplabel {
    color: var(--clr-muted);
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
}

/* Three equal segments; only the current step's segment is dark — this isn't a
   cumulative progress fill. */
.guided-search-progress {
    display: flex;
    gap: 6px;
    width: 200px;
    flex: 0 0 auto;
    margin-left: auto;
}

    .guided-search-progress span {
        height: 10px;
        border-radius: 5px;
        flex: 1 1 0;
        background: var(--clr-border);
    }

        .guided-search-progress span.on {
            background: var(--clr-brand);
        }

.guided-search-block {
    margin-bottom: 28px;
}

    .guided-search-block:last-of-type {
        margin-bottom: 0;
    }

.guided-search-label {
    display: block;
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 10px;
}

.guided-search-hint {
    font-size: 14px;
    color: #6c757d;
    margin: -4px 0 10px;
}

.guided-search-group {
    margin-bottom: 20px;
}

    .guided-search-group:last-child {
        margin-bottom: 0;
    }

.guided-search-pillrow {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Radio/checkbox pills: the native input stays in the flow (for keyboard/AT users)
   but is visually reduced to just its circle; is-selected mirrors :checked so the
   pill's own background/border can react without an attribute selector per state. */
.guided-search-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--clr-border);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    background: var(--clr-bg);
    transition: border-color .15s ease, background-color .15s ease;
}

    .guided-search-pill:hover {
        border-color: var(--clr-border-medium);
    }

    .guided-search-pill input {
        accent-color: var(--clr-brand);
        cursor: pointer;
    }

    .guided-search-pill.is-selected {
        border-color: transparent;
        background: var(--clr-brand-wash);
        color: var(--clr-brand);
    }

.gs-explore-header {
    margin-bottom: 14px;
    gap: 10px;
}

.guided-search-tabs {
    display: flex;
    align-items: center;
    gap: 10px;
}

.guided-search-tabs-caption {
    font-size: 14px;
    color: var(--clr-muted);
}

.guided-search-tab {
    border: 1px solid var(--clr-border);
    background: none;
    padding: 5px 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--clr-muted);
    border-radius: 6px;
    cursor: pointer;
}

    .guided-search-tab.is-active {
        color: var(--clr-text);
        border-color: var(--clr-dark);
    }

.guided-search-block .form-select {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--clr-border);
    border-radius: 8px;
    background: var(--clr-white, #fff);
    font-size: 0.875rem;
    color: var(--clr-dark);
    cursor: pointer;
    white-space: nowrap;
}

    .guided-search-block .form-select:focus,
    .guided-search-block .form-control:focus {
        border-color: var(--clr-brand);
        box-shadow: none;
        outline: none;
    }

.guided-search-block .form-control {
    height: 44px;
    padding: 0 12px 0 34px;
    border: 1px solid var(--clr-border);
    border-radius: 8px;
    background: var(--clr-white, #fff);
    font-size: 0.875rem;
    color: var(--clr-dark);
}

/* Steps 1 and 3's right-hand panel: whatever rich text the dialog's RadEditor holds,
   given the same spacing/link treatment as the rest of the site's body copy. */
.guided-search-content {
    margin-bottom: 8px;
}

    .guided-search-content p:last-child {
        margin-bottom: 0;
    }

    .guided-search-content a {
        color: var(--clr-brand);
    }

/* Step 3's location field: a locate button (nearest-Ontario-city geolocation, same
   resolution TopicServiceLookup.ascx's own location field uses) sitting inside the text
   input, plus a status line underneath for "Detecting…" / error messages. */
.guided-search-location-input {
    position: relative;
    display: flex;
    align-items: center;
}

.gs-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--clr-border);
    border-radius: 8px;
    background: var(--clr-white, #fff);
    font-size: 0.875rem;
    color: var(--clr-dark);
    cursor: pointer;
    white-space: nowrap;
    width: 100%;
}

    .gs-dropdown-toggle:focus {
        border-color: var(--clr-brand);
        box-shadow: none;
        outline: none;
    }

.gs-dropdown-text {
    flex: 1;
    text-align: left;
}

.gs-dropdown-arrow {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: #666;
}

.gs-suggest-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1000;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: #fff;
    border: 1px solid #d6d6d6;
    border-radius: 8px;
    box-shadow: 0 8px 24px 0 rgba(0, 0, 0, .10);
    max-height: 260px;
    overflow-y: auto;
}

.gs-suggest-item {
    padding: 9px 12px;
    border-radius: 6px;
    color: #2e3032;
    cursor: pointer;
    font-size: 0.875rem;
}

    .gs-suggest-item:hover,
    .gs-suggest-item.is-active {
        background: var(--clr-brand-pink);
        color: #a9231a;
    }

.guided-search-location-input input[type="text"] {
    padding-left: 34px;
}

.guided-search-locate-btn {
    position: absolute;
    left: 4px;
    z-index: 1;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: var(--clr-brand);
}

    .guided-search-locate-btn:hover {
        background: rgba(0, 0, 0, 0.05);
    }

.guided-search-icon-pin {
    width: 16px;
    height: 16px;
    pointer-events: none;
}

.guided-search-locate-btn.guided-search-locating .guided-search-icon-pin {
    animation: guided-search-locate-pulse 1s ease-in-out infinite;
}

@keyframes guided-search-locate-pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

.guided-search-location-status {
    margin-top: 6px;
    font-size: 0.85em;
    color: var(--clr-muted);
}

/* Step 3's location field is required — see validateLocation() in GuidedSearch.ascx. */
.guided-search-location-status-error {
    color: #dc3545;
}

.guided-search-location-input input[type="text"].is-invalid {
    border-color: #dc3545;
}

.guided-search-step h2 {
    font-size: 2.5rem;
    line-height: 1.15;
}

.guided-search-panel h3 {
    font-size: 24px;
}

.guided-search-step h2:focus,
.guided-search-step h3:focus {
    outline: none;
}

@media (min-width: 992px) {
    .guided-search-step > .guided-search-media {
        padding-right: 2rem;
    }

    .guided-search-step > .guided-search-panel {
        border-left: 1px solid var(--clr-brand);
        padding-left: 2.5rem;
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

/* Blog Article module (ON211/Modules/Blog/BlogArticle.ascx)
-------------------------------------------------- */
/* Pink hero band; the article image (set per instance from the module) covers it,
   showing on the right while the pink wash below keeps the title readable. */
.blog-article-hero_container {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.blog-article-hero {
    background-color: var(--clr-brand-pink);
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

    .blog-article-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, var(--clr-brand-pink) 35%, rgba(var(--clr-brand-pink-rgb), .75) 65%, rgba(var(--clr-brand-pink-rgb), .15) 100%);
    }

    .blog-article-hero .share-link {
        color: var(--clr-dark);
        line-height: 1;
    }

        .blog-article-hero .share-link:hover,
        .blog-article-hero .share-link.copied {
            color: var(--clr-brand);
        }

/* Table Of Contents bar under the hero: red label left, the article's links right. */
.article-toc .article-toc-title {
    color: var(--clr-brand);
}

.article-toc a {
    color: var(--clr-dark);
    text-decoration: none;
}

    .article-toc a:hover {
        color: var(--clr-brand);
        text-decoration: underline;
    }

.blog-article .article-content h2 {
    font-weight: 700;
    margin: 2.5rem 0 1rem;
}

    /* The body is a run of .article-section wrappers, one per content section, so the article's
       first heading is the first child of the first section rather than of .article-content. Both
       selectors are kept: the second is the one that matches now, the first still covers a heading
       written inside a section's own body copy. */
    .blog-article .article-content h2:first-child,
    .blog-article .article-content > .article-section:first-child > h2:first-child {
        margin-top: 0;
    }

/* Pull-quote per the design: pink wash, red rule on the left, red italic text. */
.blog-article .article-content blockquote {
    background: var(--clr-brand-pink);
    border-left: 4px solid var(--clr-brand);
    border-radius: .25rem;
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0;
    color: var(--clr-brand);
    font-style: italic;
}

    .blog-article .article-content blockquote p:last-child {
        margin-bottom: 0;
    }

/* Images pasted into the article body must not overflow, and captions get the
   small red-ruled treatment from the design. */
.blog-article .article-content img {
    max-width: 100%;
    height: auto;
}

.blog-article .article-content figcaption {
    border-left: 2px solid var(--clr-brand);
    padding-left: .5rem;
    margin-top: .5rem;
    font-size: .8125rem;
    color: var(--clr-muted);
}

.blog-article .article-divider {
    border-top: 1px solid var(--clr-brand);
    opacity: .5;
}

/* Blog Listing module (ON211/Modules/Blog/BlogListing.ascx)
-------------------------------------------------- */
/* Toolbar (category dropdown left, search right) over a three-across grid of article
   cards, with the pager below. The cards, the empty message and the pager are written by
   the module's script; everything here is styling for that markup. */

/* ── Toolbar ───────────────────────────────────────────────────────────────── */
.blog-listing .blog-filter-toggle,
.blog-listing .blog-search-input {
    background: var(--clr-white);
    border: 1px solid #D6D6D6;
    border-radius: 8px;
    padding: .625rem .875rem;
    font-size: .9375rem;
    color: #2E3032;
}

    .blog-listing .blog-filter-toggle:hover {
        border-color: #8C8C8C;
    }

/* Full width when the toolbar stacks on mobile, its own width beside the search from md up. */
@media (min-width: 768px) {
    .blog-listing .blog-filter {
        min-width: 220px;
        flex: 0 0 auto;
    }
}

.blog-listing .blog-filter-menu {
    border: 1px solid var(--clr-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px 0 rgba(0, 0, 0, .10);
    padding: 4px;
    /* A long category list scrolls inside the menu rather than running off the page. */
    max-height: 320px;
    overflow-y: auto;
    min-width: 220px;
}

.blog-listing .blog-filter-item {
    border-radius: 6px;
    padding: .5rem .75rem;
    font-size: .9375rem;
    white-space: normal;
}

    /* The chosen category, per Bootstrap's .active on a dropdown item — recoloured to brand. */
    .blog-listing .blog-filter-item.active,
    .blog-listing .blog-filter-item:active {
        background: var(--clr-brand-wash);
        color: #A9231A;
    }

.blog-listing .blog-search {
    /* Wide but not the whole row: the design leaves the filter and the search apart. */
    max-width: 420px;
    width: 100%;
}

.blog-listing .blog-search-input {
    /* Room for the magnifier sitting inside the field. */
    padding-left: 2.5rem;
}

    .blog-listing .blog-search-input::placeholder {
        color: #8C8C8C;
    }

    .blog-listing .blog-search-input:focus {
        outline: none;
        border-color: #8C8C8C;
    }

.blog-listing .blog-search-icon {
    position: absolute;
    top: 50%;
    left: .875rem;
    transform: translateY(-50%);
    color: #8C8C8C;
    pointer-events: none;
}

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.blog-listing .blog-card {
    background: var(--clr-white);
    border: 1px solid var(--clr-border);
    border-radius: 12px;
    padding: 12px;
    transition: box-shadow .2s ease, border-color .2s ease;
}

    .blog-listing .blog-card:hover {
        border-color: #8C8C8C;
        box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .08);
    }

.blog-listing .blog-card-media {
    margin-bottom: 1rem;
}

.blog-listing .blog-card-picture {
    display: block;
}

.blog-listing .blog-card-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 8px;
}

/* No image on the article: a pink block keeps the card the same height as its row. */
.blog-listing .blog-card-img-empty {
    background: var(--clr-brand-pink);
}

.blog-listing .blog-card-top {
    margin-bottom: .75rem;
}

.blog-listing .blog-card-chip {
    background: var(--clr-brand-wash);
    color: #A9231A;
    border-radius: 100px;
    padding: .25rem .625rem;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.4;
}

.blog-listing .blog-card-readtime {
    font-size: .8125rem;
    color: var(--clr-muted);
}

.blog-listing .blog-card-title {
    font-size: 1.25rem;
    line-height: 1.35;
    color: #2E3032;
    margin-bottom: .5rem;
}

    .blog-listing .blog-card-title a {
        color: inherit;
        text-decoration: none;
    }

        .blog-listing .blog-card-title a:hover {
            text-decoration: underline;
        }

/* Clamped to three lines so the footers of the cards in a row line up whatever the
   summaries' lengths; the full text is on the article itself. */
.blog-listing .blog-card-summary {
    font-size: .875rem;
    line-height: 1.55;
    color: var(--clr-muted);
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-listing .blog-card-footer {
    border-top: 1px solid var(--clr-border-light);
    padding-top: .75rem;
    font-size: .875rem;
    color: #2E3032;
}

    .blog-listing .blog-card-footer svg {
        color: var(--clr-muted);
        flex-shrink: 0;
    }

.blog-listing .blog-listing-empty {
    color: var(--clr-muted);
}

/* ── Pager ─────────────────────────────────────────────────────────────────── */
/* One outlined bar: prev arrow, the page numbers with hairlines between them, next arrow. */
.blog-listing .blog-pager {
    border: 1px solid var(--clr-border);
    border-radius: 10px;
    padding: 6px;
    background: var(--clr-white);
}

.blog-listing .blog-pager-arrow,
.blog-listing .blog-pager-page {
    background: transparent;
    border: 0;
    border-radius: 8px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.blog-listing .blog-pager-arrow {
    width: 36px;
    border: 1px solid var(--clr-border);
    color: var(--clr-brand);
}

    /* The arrows stand apart from the numbers; only the numbers are hairline-separated. The
       outer sides keep the bar's own padding instead. */
    .blog-listing .blog-pager-arrow:first-child {
        margin-right: 10px;
    }

    .blog-listing .blog-pager-arrow:last-child {
        margin-left: 10px;
    }

    .blog-listing .blog-pager-arrow:hover:not(:disabled) {
        background: var(--clr-brand-wash);
        border-color: var(--clr-brand);
    }

    .blog-listing .blog-pager-arrow:disabled {
        color: var(--clr-bg-gray-inactive);
        opacity: 1;
    }

.blog-listing .blog-pager-page {
    min-width: 40px;
    padding: 0 .5rem;
    font-size: .875rem;
    color: var(--clr-muted);
}

    .blog-listing .blog-pager-page:hover {
        color: #2E3032;
    }

    /* The page being read: the design shows no fill, but the pager still has to say where
       you are — brand colour and weight rather than a heavier box. */
    .blog-listing .blog-pager-page.is-current {
        color: #A9231A;
        font-weight: 600;
        background: var(--clr-brand-wash);
    }

.blog-listing .blog-pager-sep {
    width: 1px;
    height: 20px;
    background: var(--clr-border);
    margin: 0 6px;
}

.blog-listing .blog-pager-ellipsis {
    min-width: 24px;
    text-align: center;
    font-size: .875rem;
    color: var(--clr-muted);
}

/* The card links keep Bootstrap's focus ring; these buttons are custom, so give them one. */
.blog-listing .blog-filter-toggle:focus-visible,
.blog-listing .blog-search-input:focus-visible,
.blog-listing .blog-pager-arrow:focus-visible,
.blog-listing .blog-pager-page:focus-visible {
    outline: 2px solid var(--clr-brand);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .blog-listing .blog-card {
        transition: none;
    }
}

/* Site footer (ON211/Controls/Navigation/Footer.ascx)
-------------------------------------------------- */
/* Text-drawn 211 logo: red oval around "211" with the (R) mark beside it. */
.site-footer .footer-logo-badge {
    display: inline-block;
    border: 4px solid var(--clr-brand);
    border-radius: 50%;
    padding: .1em .5em;
    font-size: 1.75rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--clr-black);
}

.site-footer .footer-logo-reg {
    font-size: .65rem;
}

.site-footer .footer-email {
    max-width: 260px;
    border: 0;
    border-bottom: 1px solid var(--clr-border);
    border-radius: 0;
    padding-left: 0;
}

    .site-footer .footer-email:focus {
        box-shadow: none;
        border-bottom-color: var(--clr-muted);
    }

.site-footer h5 {
    font-size: 1.125rem;
}

.site-footer .link-secondary:hover,
.site-footer .link-dark:hover {
    text-decoration: underline;
}

/* Vertical divider between the two footer halves on large screens. */
@media (min-width: 992px) {
    .site-footer .footer-right {
        border-left: 1px solid var(--clr-border);
        padding-left: 3.5rem;
    }
}

/* Social icon brand colours. */
.site-footer .social-instagram {
    color: var(--clr-instagram);
}

.site-footer .social-x {
    color: var(--clr-black);
}

.site-footer .social-linkedin {
    color: var(--clr-linkedin);
}

.site-footer .social-youtube {
    color: var(--clr-youtube);
}

body {
    background-color: var(--clr-bg);
    color: var(--clr-text);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* =============================================================================
   REFERENCE PATCHES — Figma/port-5300 pixel-diff corrections
   Applied: 2026-07-28
   ============================================================================= */

/* Hero (#MainContent_ctl00_ctl06_secBanner)
-------------------------------------------------- */

/* Hero — mobile vertical padding: 60px → 48px */
#MainContent_ctl00_ctl06_divShell {
    padding-top: 48px;
    padding-bottom: 48px;
}

/* Hero — promote 100px full padding from 1024px (Tailwind lg:) to 768px (Bootstrap md) */
@media (min-width: 768px) {
    #MainContent_ctl00_ctl06_divShell {
        padding-top: 100px; /*
        padding-bottom: 100px;*/
        padding-left: 100px;
        padding-right: 100px;
    }
}

/* Hero — h1 font-size and line-height at all breakpoints (mobile had Bootstrap default ~31px, reference requires 56px/67.2px) */
#MainContent_ctl00_ctl06_secBanner h1 {
    font-size: 56px;
    line-height: 67.2px;
}

/* Browse By Topic — Intro / Two-Button-Banner (#MainContent_ctl00_ctl18_secBanner)
-------------------------------------------------- */

/* Browse By Topic intro: white background, collapse bottom padding to close gap to cards */
#MainContent_ctl00_ctl18_secBanner {
    background-color: #FFFFFF;
    padding-bottom: 0;
}

/* Zone heading hierarchy: Top Area h1 keeps its display-4 size, content-zone page headings
   sit between Top Area h1 and h2. A Two Button Banner's heading is an h2 (the page's one h1
   belongs to the Header Banner), so it is named alongside the modules that still own an h1.
   The h2 is what tells the two apart here: a Header Banner's heading is an h1, so it is not
   matched by the second selector even though it carries the same class. */
[data-zonecontainername*="Content"] h1,
[data-zonecontainername*="Content"] .two-button-banner h2 {
    font-size: 2.5rem;
}

@media (max-width: 767.98px) {
    [data-zonecontainername*="Content"] h1,
    [data-zonecontainername*="Content"] .two-button-banner h2 {
        font-size: 1.875rem;
    }
}

/* Heading: softer near-black */
#MainContent_ctl00_ctl18_ctl00_hHeading {
    color: #2E3032;
}

/* Buttons: 8px corners (not pill), weight 500, corrected vertical padding.
   !important required: Bootstrap .rounded-pill sets border-radius: 50rem !important */
#MainContent_ctl00_ctl18_secBanner .btn {
    border-radius: 8px !important;
    font-weight: 500;
    padding: 12px 18px;
}

/* Primary button: reference near-black #141414, not Bootstrap dark #212529 */
#MainContent_ctl00_ctl18_secBanner .btn-dark {
    background-color: #141414;
    border-color: #141414;
}

    #MainContent_ctl00_ctl18_secBanner .btn-dark:hover,
    #MainContent_ctl00_ctl18_secBanner .btn-dark:focus {
        background-color: #0a0a0a;
        border-color: #0a0a0a;
    }

/* Divider color: reference #A9231A, dev .module-divider uses --clr-brand (#dc3545).
   Scope to this page region. Adjust the :root variable if all dividers should change. */
.module-divider {
    border-top-color: #A9231A;
}

/* Browse By Topic — Card Grid (#browseByTopic_MainContent_ctl00_ctl22)
-------------------------------------------------- */

/* Reduce browse section top padding to close the gap to ~50px (ref)
   after banner padding-bottom is zeroed out: 0 + 24px divider margin + 1.5rem ≈ 48px */
#browseByTopic_MainContent_ctl00_ctl22 {
    padding-top: 1.5rem;
}

    /* Card border: #B0B2B3 (ref) not #dee2e6 (Bootstrap); radius 10px not 12px.
   !important required: Bootstrap .rounded-3 sets border-radius !important */
    #browseByTopic_MainContent_ctl00_ctl22 .topic-card {
        border-color: #B0B2B3;
        border-radius: 10px !important;
    }

        /* Card hover. This used to give a red border and drop shadow, which contradicts the Tile design's
   hover state (grey fill, darker grey border) now that there is one — and being ID-scoped it beat
   the class rule, so the same tile hovered red on this page and grey everywhere else. Kept at this
   specificity, but matching the design; the shadow stays, since it reads as lift rather than as
   selection and the class rule doesn't set one. */
        #browseByTopic_MainContent_ctl00_ctl22 .topic-card:hover {
            background: #EDEDED;
            border-color: #8C8C8C;
            box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
        }

    /* Card grid gap: 16px (ref) not 24px (Bootstrap .g-4).
   Override Bootstrap gutters via CSS custom properties — no !important needed */
    #browseByTopic_MainContent_ctl00_ctl22 .row.g-4 {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 1rem;
    }

/* =====================================================================
   Ontario 211 — Topic Card Grid — ADDITIONS only
   Do NOT re-paste rules already present in custom.css.
   Paste this block after the existing topic-grid rules.
   ===================================================================== */

/* — section layout — */
/* REF fires 100px TB padding at md (768px); DEV stays at 48px at all widths.
   Override vertical rhythm at the same breakpoint Tailwind uses. */
@media (min-width: 768px) {
    #browseByTopic_MainContent_ctl00_ctl22 {
        padding-top: 100px !important;
        padding-bottom: 100px !important;
    }
}

/* — card geometry — */
/* DEV transition uses linear easing; REF uses cubic-bezier(0.4,0,0.2,1).
   Scope to the properties that animate on hover (border-color + box-shadow). */
.topic-card {
    transition:
    /* background-color included so the Tile hover's grey fill fades in rather than snapping —
       this rule is !important, so omitting it dropped background from the transition entirely. */
    background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* — icon container — */
/* DEV: 44×44px, radius 12px, bg #EFEFEF
   REF: 48×48px, radius  8px, bg #EEEEEF
   The icon is a <span class="topic-card-icon"> (not a div). */
.topic-card-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px;
    min-height: 48px;
    border-radius: 8px !important;
    background-color: #EEEEEF !important;
}

/* — typography — */
/* Title colour: DEV #111111 → REF #2E3032 (near-black with a warm charcoal cast).
   Target the span rather than .topic-card so it doesn't fight Bootstrap text utilities. */
.topic-card-title {
    color: #2E3032 !important;
}

/* — grid columns — */
/* REF: 2-col at ≥640px (Tailwind sm), 3-col at ≥1024px (Tailwind lg).
   row-cols-sm-2 in markup now handles 2-col at ≥576px (Bootstrap sm) — close enough.
   Only the 992–1023px range still needs a CSS correction (no Bootstrap breakpoint at 1024px). */

/* 992–1023px: Bootstrap row-cols-lg-3 fires too early → revert to 2-col */
@media (min-width: 992px) and (max-width: 1023.98px) {
    #browseByTopic_MainContent_ctl00_ctl22 .topics-col .row > .col {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* — container width — */
/* REF inner content is max-w-[1240px]. Cap the Bootstrap container to match
   so card widths at xxl (1400px+) don't over-expand beyond the reference. */
.topic-grid-container {
    max-width: 1240px;
}

/* Carousel / Stories & Updates (.banner-swiper-shell)
-------------------------------------------------- */

.banner-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: #A9231A;
}

.banner-swiper-shell {
    overflow: hidden;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

@media (min-width: 768px) {
    .banner-swiper-shell {
        margin-top: 4rem;
        margin-bottom: 4rem;
    }
}

.banner-swiper .banner-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.08) 50%, transparent 75%);
    pointer-events: none;
    z-index: 1;
}

.banner-swiper .banner-slide {
    background: #E6F2F8;
}

/* CTA — Want To Talk To A 211 Navigator? (#MainContent_ctl00_ctl10_secBanner)
-------------------------------------------------- */

/* 1. White background */
#MainContent_ctl00_ctl10_secBanner {
    background-color: #FFFFFF;
}

/* 2–4. H1: 48px / line-height 1.2 / color #2E3032
   !important needed to beat Bootstrap's display-4 and fw-bold utilities */
#MainContent_ctl00_ctl10_ctl00_hHeading {
    font-size: 3rem !important; /* 48px — ref: 48px */
    line-height: 1.2 !important; /* 57.6px — ref: 57.6px */
    color: #2E3032 !important; /* ref: rgb(46,48,50) */
}

/* 5. Horizontal padding on inner shell: 24px at mobile, 100px at md+
   max-width: 100% lets the shell span the full section width so side
   padding is applied relative to the viewport, not a capped container */
#MainContent_ctl00_ctl10_divShell {
    padding-left: 24px;
    padding-right: 24px;
    max-width: 100%;
}

/* 6. Vertical padding 100px and horizontal padding 100px at md+ */
@media (min-width: 768px) {
    #MainContent_ctl00_ctl10_secBanner {
        padding-top: 100px !important; /* py-5 (48px) → 100px */
        padding-bottom: 100px !important;
    }

    #MainContent_ctl00_ctl10_divShell {
        padding-left: 100px;
        padding-right: 100px;
    }
}

/* 7. Two-column layout at 768px (md) instead of 992px (lg)
   Force 50% width between md and lg breakpoints */
@media (min-width: 768px) and (max-width: 991.98px) {
    #MainContent_ctl00_ctl10_divLeft,
    #MainContent_ctl00_ctl10_divRight {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* 8. Mobile separator: border-bottom on heading column when stacked */
@media (max-width: 767.98px) {
    #MainContent_ctl00_ctl10_divLeft {
        border-bottom: 1px solid #A9231A;
        padding-bottom: 32px;
    }
}

/* 9. Row gap 32px — override gy-4's 24px via the Bootstrap gutter custom property */
#MainContent_ctl00_ctl10_divRow {
    --bs-gutter-y: 2rem; /* 32px */
}

/* 10. Body text color #76797B — !important overrides Bootstrap's text-secondary utility */
#MainContent_ctl00_ctl10_ctl01_pnlDescription {
    color: #76797B !important;
    line-height: 1.5; /* 24px at 16px base */
}

/* Guided Search (#MainContent_ctl00_ctl16_secBanner)
-------------------------------------------------- */

/* Guided Search — center banner image when layout stacks (<992px)
   img.img-fluid is already display:block via utility-theme.css base reset;
   margin:auto centers it when its natural width (546px) is narrower than
   the stacked column at mid-sized viewports (768px–991px). No effect at
   desktop (2-col) because img-fluid fills the col-lg-6 column width. */
.two-button-banner .banner-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* =============================================================================
   INTERACTIVE STATE PATCHES — :hover / :focus / :active / :visited / transitions
   Applied: 2026-07-28
   ============================================================================= */

/* Nav links */

/* Nav links — Interactive-state patches
   Reference: port-5300 header nav button spec
   Applied after: bootstrap.min.css → custom.css → bwa-theme.css → utility-theme.css
-------------------------------------------------- */

/* 1. Normal: #76797B (ref) overrides var(--clr-dark)/#212529 (dev).
   Transition scope narrowed to color only, duration corrected 150ms → 200ms. */
.site-header .navbar-nav .nav-link {
    color: #76797B;
    transition: color 200ms ease;
}

    /* 2. Visited: hold the normal gray so visited links don't revert to #212529 */
    .site-header .navbar-nav .nav-link:visited {
        color: #76797B;
    }

    /* 3. Hover: brand red (restated here for scope clarity). */
    .site-header .navbar-nav .nav-link:hover {
        color: #A9231A;
    }

    /* 4. Focus-visible: replace Bootstrap's blue ring with brand-red ring.
   Specificity (0,4,0) beats Bootstrap's .nav-link:focus-visible (0,2,0). */
    .site-header .navbar-nav .nav-link:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px #A9231A;
    }

    /* 5. Active / aria-expanded=true: color #A9231A when dropdown is open or on pointer press. */
    .site-header .navbar-nav .nav-link[aria-expanded="true"],
    .site-header .navbar-nav .nav-link:active {
        color: #A9231A;
    }

/* Nav Dropdown Items */

/* Nav Dropdown Items — interactive state corrections
   Reference: Figma / port-5300 (header nav button spec mapped to dropdown items)
   .site-header prefix gives (0,3,0) specificity vs Bootstrap's (0,2,0).
   Applied: 2026-07-28
-------------------------------------------------- */

/* Transition: scope to color properties only, add 200ms ease */
.site-header .dropdown-item {
    transition: color 200ms ease, background-color 200ms ease;
}

    /* Hover: brand red text, suppress Bootstrap's #f8f9fa background wash */
    .site-header .dropdown-item:hover {
        color: #A9231A;
        background-color: transparent;
    }

    /* Focus: red text, suppress Bootstrap gray bg, no outline */
    .site-header .dropdown-item:focus {
        color: #A9231A;
        background-color: transparent;
        outline: none;
    }

    /* Focus-visible: 2px brand-red ring, suppress native outline */
    .site-header .dropdown-item:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px #A9231A;
        color: #A9231A;
        background-color: transparent;
    }

    /* Active + .active: brand red text on transparent bg */
    .site-header .dropdown-item:active,
    .site-header .dropdown-item.active {
        color: #A9231A;
        background-color: transparent;
    }

/* Utility links */

/* Utility links — interactive state patches (5300 reference alignment)
   Append after the existing .site-header .header-utility .nav-link block.
   :hover rules for :not([aria-label]) and [aria-label] already correct in file — skipped.
-------------------------------------------------- */

/* Normal state corrections:
   color  : var(--clr-dark) → #808080
   padding: 4px 6px → 8px 12px
   weight : unset → 600
   timing : ease → cubic-bezier(0.4,0,0.2,1) */
.site-header .header-utility .nav-link {
    color: #808080;
    font-weight: 600;
    padding: 8px 12px;
    border: none;
    border-radius: 6px;
    transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1), background-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

    .site-header .header-utility .nav-link[aria-label] {
        padding: 8px;
    }

    /* Visited: prevent browser default blue/purple from overriding the gray. */
    .site-header .header-utility .nav-link:visited {
        color: #808080;
    }

    /* Text links visited + hover: keep red on hover even after visiting. */
    .site-header .header-utility .nav-link:not([aria-label]):visited:hover {
        color: #A9231A;
    }

    /* Active — mirror hover for press feedback. */
    .site-header .header-utility .nav-link:not([aria-label]):active {
        color: #A9231A;
        background-color: transparent;
    }

    .site-header .header-utility .nav-link[aria-label]:active {
        background-color: #EEEEEF;
    }

    /* Focus / focus-visible: outline none + 2px box-shadow ring at #A9231A.
   (0,3,1) specificity overrides utility-theme.css a:focus-visible (0,1,0). */
    .site-header .header-utility .nav-link:focus {
        outline: none;
        box-shadow: 0 0 0 2px #A9231A;
    }

        .site-header .header-utility .nav-link:focus:not(:focus-visible) {
            box-shadow: none;
        }

    .site-header .header-utility .nav-link:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px #A9231A;
    }

/* Exit Site button */

/* Exit Site button — interactive state patches
   Target: .header-exit (port 52105)
   Reference: a[data-figma-id='I2425:7130;2005:15712'] (port 5300)
-------------------------------------------------- */

/* Normal state — correct base values and override Bootstrap utilities */
.header-exit {
    background-color: #FFFFFF !important;
    border: 1px solid #D6D6D6 !important;
    color: #0D0D0D !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
    font-weight: 600 !important;
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease !important;
}

    /* Hover: background #EEEEEF, border and color unchanged */
    .header-exit:hover {
        background-color: #EEEEEF !important;
        border-color: #D6D6D6 !important;
        color: #0D0D0D !important;
        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
    }

    /* Focus — broad support fallback */
    .header-exit:focus {
        outline: none !important;
        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0 0 0 3px #A9231A !important;
    }

    /* Focus-visible — keyboard-only ring */
    .header-exit:focus-visible {
        outline: none !important;
        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0 0 0 3px #A9231A !important;
    }

    /* Active — one step darker than hover for press feedback */
    .header-exit:active,
    .header-exit:first-child:active {
        background-color: #E2E2E3 !important;
        border-color: #D6D6D6 !important;
        color: #0D0D0D !important;
        box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
    }

    /* Visited — anchor element; keep identical to normal text color */
    .header-exit:visited {
        color: #0D0D0D !important;
    }

/* Search input and button */

/* Search input and button (.SearchText / .SearchSubmit)
   Reference: #hero-location @ port 5300 — additive patch

   Specificity note: the Search.ascx module renders an inline <style>
   block defining .SearchText at (0,1,0).
   Prefixing with .SearchContainer raises our rules to (0,2,0)/(0,2,1)
   so they win the cascade without !important.
   utility-theme.css input:focus-visible is (0,1,1); our
   .SearchContainer .SearchText:focus-visible is (0,2,1) — wins cleanly.
-------------------------------------------------- */

/* Normal: border-color #ccc→#B0B2B3, radius 5px→8px, height to 47px */
.SearchContainer .SearchText {
    border: 1px solid #B0B2B3;
    border-radius: 8px;
    height: 47px;
    background: #FFFFFF;
    color: #2E3032;
    transition: border-color 200ms ease, box-shadow 200ms ease, color 200ms ease;
}

    /* Placeholder: #76797B — opacity:1 normalises Firefox default 0.54 */
    .SearchContainer .SearchText::placeholder {
        color: #76797B;
        opacity: 1;
    }

    /* Focus — full-support rule (mouse + keyboard, older browsers). */
    .SearchContainer .SearchText:focus {
        border-color: #007CBA;
        box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.30);
        outline: none;
    }

    /* Focus-visible — keyboard-only ring (beats utility-theme input:focus-visible at 0,1,1) */
    .SearchContainer .SearchText:focus-visible {
        border-color: #007CBA;
        box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.30);
        outline: none;
    }

/* Submit button — normal: radius matches input */
.SearchContainer .SearchSubmit {
    border-radius: 8px;
    transition: background-color 200ms ease, border-color 200ms ease;
}

    /* Submit button — hover */
    .SearchContainer .SearchSubmit:hover {
        background-color: #e2e2e2;
        border-color: #B0B2B3;
    }

    /* Submit button — focus */
    .SearchContainer .SearchSubmit:focus {
        outline: none;
        box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.30);
    }

    /* Submit button — focus-visible (keyboard) */
    .SearchContainer .SearchSubmit:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px rgba(0, 124, 186, 0.30);
    }

    /* Submit button — active/pressed */
    .SearchContainer .SearchSubmit:active {
        background-color: #cccccc;
        border-color: #999999;
    }

/* Hero CTA — Primary Button */

/* Hero CTA — Primary Button
   #MainContent_ctl00_ctl16_ctl01_hypPrimary  (.btn.btn-dark.rounded-pill.px-4.py-2)
   Merges geometry / state / focus-ring patches into one block.
   ID selector (1,0,0) beats Bootstrap class selectors (0,1,0); !important only where
   Bootstrap utility classes themselves use !important.
-------------------------------------------------- */

/* Base: geometry, shadow, transition; Bootstrap CSS-var overrides for all states. */
#MainContent_ctl00_ctl16_ctl01_hypPrimary {
    /* !important required: .rounded-pill and .px-4/.py-2 Bootstrap utilities use !important */
    border-radius: 8px !important;
    padding: 12px 18px !important;
    font-weight: 500;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
    /* Override Bootstrap .btn-dark vars */
    --bs-btn-bg: #141414;
    --bs-btn-border-color: #141414;
    --bs-btn-color: #FCFCFC;
    --bs-btn-hover-bg: #2E3032;
    --bs-btn-hover-border-color: #141414;
    --bs-btn-hover-color: #FCFCFC;
    --bs-btn-active-bg: #3a3d40;
    --bs-btn-active-border-color: #141414;
    --bs-btn-active-color: #FCFCFC;
    /* #A9231A focus ring — replaces Bootstrap's rgba(66,70,73,0.5) */
    --bs-btn-focus-shadow-rgb: 169, 35, 26;
    /* Direct-property fallbacks alongside vars */
    background-color: #141414;
    border-color: #141414;
    color: #FCFCFC;
}

    /* Hover */
    #MainContent_ctl00_ctl16_ctl01_hypPrimary:hover {
        background-color: #2E3032;
        border-color: #141414;
        color: #FCFCFC;
    }

    /* Active */
    #MainContent_ctl00_ctl16_ctl01_hypPrimary:active {
        background-color: #3a3d40;
        border-color: #141414;
        color: #FCFCFC;
    }

    /* Focus — cross-browser; replaces dev rgba(66,70,73,0.5) */
    #MainContent_ctl00_ctl16_ctl01_hypPrimary:focus {
        outline: none;
        box-shadow: 0 0 0 0.25rem rgba(169, 35, 26, 0.35);
    }

    /* Focus-visible — keyboard-only ring */
    #MainContent_ctl00_ctl16_ctl01_hypPrimary:focus-visible {
        outline: none;
        box-shadow: 0 0 0 0.25rem rgba(169, 35, 26, 0.45);
    }

    /* Visited — hold brand colours to suppress browser defaults */
    #MainContent_ctl00_ctl16_ctl01_hypPrimary:visited {
        color: #FCFCFC;
        background-color: #141414;
        border-color: #141414;
    }

/* Hero CTA — Secondary Button */

/* Hero CTA — Secondary Button
   #MainContent_ctl00_ctl16_ctl01_hypSecondary
   (.btn.btn-light.bg-white.border.rounded-pill.px-4.py-2)
   Note: .bg-white sets background-color !important; .border sets border shorthand !important
         — hover/active/visited overrides must use !important to win.
   Merges geometry / state / focus-ring patches into one block.
-------------------------------------------------- */

/* Base: geometry, shadow, transition; Bootstrap CSS-var overrides */
#MainContent_ctl00_ctl16_ctl01_hypSecondary {
    border-radius: 8px !important;
    padding: 12px 18px !important;
    font-weight: 500;
    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
    /* Override Bootstrap .btn-light vars */
    --bs-btn-bg: #FFFFFF;
    --bs-btn-border-color: #B0B2B3;
    --bs-btn-color: #2E3032;
    --bs-btn-hover-bg: #EEEEEF;
    --bs-btn-hover-border-color: #B0B2B3;
    --bs-btn-hover-color: #2E3032;
    --bs-btn-active-bg: #e0e0e1;
    --bs-btn-active-border-color: #B0B2B3;
    --bs-btn-active-color: #2E3032;
    /* #A9231A focus ring — replaces dev rgba(211,212,213,0.5) */
    --bs-btn-focus-shadow-rgb: 169, 35, 26;
    color: #2E3032;
    border-color: #B0B2B3 !important; /* .border utility uses border shorthand !important */
}

    /* Hover: !important required — .bg-white and .border both remain active in hover state. */
    #MainContent_ctl00_ctl16_ctl01_hypSecondary:hover {
        background-color: #EEEEEF !important;
        border-color: #B0B2B3 !important;
        color: #2E3032 !important;
    }

    /* Active */
    #MainContent_ctl00_ctl16_ctl01_hypSecondary:active {
        background-color: #e0e0e1 !important;
        border-color: #B0B2B3 !important;
        color: #2E3032 !important;
    }

    /* Focus — cross-browser; replaces dev rgba(211,212,213,0.5) with #A9231A ring */
    #MainContent_ctl00_ctl16_ctl01_hypSecondary:focus {
        outline: none;
        box-shadow: 0 0 0 0.25rem rgba(169, 35, 26, 0.35);
    }

    /* Focus-visible — keyboard-only ring */
    #MainContent_ctl00_ctl16_ctl01_hypSecondary:focus-visible {
        outline: none;
        box-shadow: 0 0 0 0.25rem rgba(169, 35, 26, 0.45);
    }

    /* Visited — hold design colours */
    #MainContent_ctl00_ctl16_ctl01_hypSecondary:visited {
        color: #2E3032;
        background-color: #FFFFFF;
        border-color: #B0B2B3 !important;
    }

/* Topic Cards */

/* Topic Cards — interactive-state patches
   Selector: #browseByTopic_MainContent_ctl00_ctl22 .topic-card
   Specificity (1,1,0) beats all existing class-only rules (0,2,0).
   :hover rule (border #A9231A + drop shadow) already correct at line 849 — skipped.
   Normal state already correct — skipped.
-------------------------------------------------- */

/* 1. Extend transition to include box-shadow so hover drop-shadow animates. */
#browseByTopic_MainContent_ctl00_ctl22 .topic-card {
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

    /* 2. :focus — broad browser support (mouse + keyboard). */
    #browseByTopic_MainContent_ctl00_ctl22 .topic-card:focus {
        outline: none;
        border-color: #A9231A;
        box-shadow: 0 0 0 3px rgba(169, 35, 26, 0.25), 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
    }

    /* 3. :focus-visible — keyboard-only ring. */
    #browseByTopic_MainContent_ctl00_ctl22 .topic-card:focus-visible {
        outline: none;
        border-color: #A9231A;
        box-shadow: 0 0 0 3px rgba(169, 35, 26, 0.25), 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
    }

    /* 4. :active — collapsed shadow for pressed feel. */
    #browseByTopic_MainContent_ctl00_ctl22 .topic-card:active {
        border-color: #A9231A;
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.12);
    }

/* Carousel pagination bullets and prev/next arrows */

/* Carousel — Pagination bullets & Prev/Next arrows
   Interactive-state patches (additive).
   Arrow :hover rule already correct at lines 472–475 — skipped.
-------------------------------------------------- */

/* --- Pagination bullets ------------------------------------ */

/* Hover: darken inactive (gray) bullet */
.banner-swiper-pagination .swiper-pagination-bullet:hover {
    background: #a0a0a0;
}

/* Hover on the active (red) bullet: slightly deeper red */
.banner-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:hover {
    background: #8e1e16;
}

/* Active / click feedback: brief opacity dip */
.banner-swiper-pagination .swiper-pagination-bullet:active {
    opacity: 0.65;
}

/* Keyboard focus ring */
.banner-swiper-pagination .swiper-pagination-bullet:focus-visible {
    outline: 2px solid var(--clr-brand);
    outline-offset: 3px;
}

/* Suppress default ring for pointer users */
.banner-swiper-pagination .swiper-pagination-bullet:focus:not(:focus-visible) {
    outline: none;
}

/* --- Prev / Next arrow buttons ----------------------------- */

/* Fix: add explicit transition — currently no transition property at all */
.banner-swiper-prev,
.banner-swiper-next {
    transition: background-color 0.2s ease, transform 0.2s ease;
}

    /* Active / click feedback: full-opacity background + 1px down nudge */
    .banner-swiper-prev:active,
    .banner-swiper-next:active {
        background: rgba(var(--clr-dark-rgb), 1);
        transform: translateY(calc(-50% + 1px));
    }

    /* Keyboard focus ring */
    .banner-swiper-prev:focus-visible,
    .banner-swiper-next:focus-visible {
        outline: 2px solid var(--clr-brand);
        outline-offset: 3px;
    }

    /* Suppress default ring for pointer users */
    .banner-swiper-prev:focus:not(:focus-visible),
    .banner-swiper-next:focus:not(:focus-visible) {
        outline: none;
    }

/* Footer nav links (Useful Links, contact links) */

/* Footer nav links — interactive state patches
   Reference: Figma / port-5300 pixel-diff comparison
   .site-footer a (0,2,1) beats utility-theme.css a:focus-visible (0,1,1).
   Note: .site-footer .link-secondary:hover (0,3,0) adds underline — overridden
         with !important on text-decoration.
-------------------------------------------------- */

/* 1. Normal: correct gray #76797B, no underline, transition scoped to color 200ms. */
.site-footer a {
    color: #76797B;
    text-decoration: none;
    transition: color 200ms ease;
}

    /* 2. Hover: brand red, no underline.
   !important on both properties to beat .site-footer .link-secondary:hover (0,3,0). */
    .site-footer a:hover {
        color: #A9231A !important;
        text-decoration: none !important;
    }

    /* 3. Focus: blue #00549A ring (reference base rule). */
    .site-footer a:focus {
        outline: #00549A solid 2px;
        outline-offset: 2px;
    }

    /* 4. Focus-visible: overrides utility-theme.css `a:focus-visible` #A9231A ring (0,1,1). */
    .site-footer a:focus-visible {
        outline: #00549A solid 2px;
        outline-offset: 2px;
    }

/* Agency List module (ON211/Modules/Directory/AgencyList.ascx)
   Mirrors the Topic Service Lookup directory's look — black-topped search bar, bordered
   filter sidebar with expandable Topic sections, bordered result cards, red active pager —
   scoped to .agency-list. Those rules live in TopicServiceLookup.ascx's own inline <style>,
   which is only on pages carrying that module, so they are restated here rather than shared.
-------------------------------------------------- */
.agency-list {
    color: var(--clr-text);
}

    /* Search bar */
    .agency-list .agency-list-topbar {
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
        padding: 16px 0;
        border-top: 3px solid var(--clr-black);
        border-bottom: 1px solid var(--clr-border);
        margin-bottom: 20px;
    }

    .agency-list .agency-list-topbar-field {
        display: flex;
        flex-direction: column;
        gap: 6px;
        flex: 1;
        min-width: 220px;
    }

    .agency-list .agency-list-topbar label {
        font-weight: bold;
        font-size: .9em;
    }

    .agency-list .agency-list-info {
        color: var(--clr-muted);
        cursor: help;
        font-weight: normal;
    }

    .agency-list .agency-list-input-icon {
        position: relative;
        display: flex;
        align-items: center;
    }

        .agency-list .agency-list-input-icon svg {
            position: absolute;
            left: 10px;
            width: 16px;
            height: 16px;
            color: var(--clr-brand);
            pointer-events: none;
        }

        .agency-list .agency-list-input-icon input[type="text"] {
            width: 100%;
            padding: 8px 10px 8px 32px;
            border: 1px solid var(--clr-border);
            border-radius: 6px;
            box-sizing: border-box;
        }

    /* Filter sidebar */
    .agency-list .agency-list-sidebar {
        border: 1px solid var(--clr-border);
        border-radius: 8px;
        padding: 20px;
    }

    .agency-list .agency-list-results-count {
        color: var(--clr-brand);
        font-weight: bold;
        font-size: .9em;
        margin: 0 0 12px 0;
    }

    .agency-list .agency-list-filter-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--clr-border);
        margin-bottom: 8px;
    }

        .agency-list .agency-list-filter-header h4 {
            margin: 0;
            font-size: 1.05em;
        }

        .agency-list .agency-list-filter-header a {
            color: var(--clr-muted);
            font-size: .9em;
        }

    .agency-list .agency-list-filter-section {
        padding: 12px 0;
        border-bottom: 1px solid var(--clr-border);
    }

        .agency-list .agency-list-filter-section summary {
            cursor: pointer;
            font-weight: bold;
            list-style: none;
        }

            .agency-list .agency-list-filter-section summary::-webkit-details-marker {
                display: none;
            }

            .agency-list .agency-list-filter-section summary::after {
                content: '\25BE';
                float: right;
                color: var(--clr-muted);
            }

        .agency-list .agency-list-filter-section[open] > summary::after {
            content: '\25B4';
        }

    .agency-list .agency-list-filter-subcategories {
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding-left: 4px;
    }

    .agency-list .agency-list-filter-subcategory {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: .95em;
        margin: 0;
        cursor: pointer;
    }

        .agency-list .agency-list-filter-subcategory input[type="checkbox"] {
            appearance: none;
            -webkit-appearance: none;
            width: 15px;
            height: 15px;
            border: 1px solid #999;
            border-radius: 3px;
            margin: 0;
            cursor: pointer;
            flex-shrink: 0;
        }

            .agency-list .agency-list-filter-subcategory input[type="checkbox"]:checked {
                background: var(--clr-brand);
                border-color: var(--clr-brand);
            }

    /* Result cards */
    .agency-list .agency-list-no-results {
        color: var(--clr-muted);
    }

    .agency-list .agency-list-loading {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--clr-muted);
    }

    .agency-list .agency-card {
        border: 1px solid var(--clr-border);
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 16px;
    }

        .agency-list .agency-card h4 {
            margin: 0 0 4px 0;
        }

            .agency-list .agency-card h4 a {
                color: inherit;
                text-decoration: none;
            }

                .agency-list .agency-card h4 a:hover,
                .agency-list .agency-card h4 a:focus {
                    color: var(--clr-brand);
                    text-decoration: underline;
                }

    .agency-list .agency-card-city {
        margin: 0;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .agency-list .agency-list-icon-pin-sm {
        width: 14px;
        height: 14px;
        color: var(--clr-brand);
        flex-shrink: 0;
    }

    /* Pager (pagination.js markup: nav > ul.pagination > li.page-item > a.page-link)
   Styled to match the blog-pager bar: outlined pill, hairline separators,
   brand-coloured current page, bordered arrow buttons on the ends. */
    .agency-list .agency-list-pagination,
    .event-listing [id$="pagerElement"],
    .search-result [id$="pagerElement"] {
        text-align: center;
        margin: 30px 0 15px;
    }

        .agency-list .agency-list-pagination .pagination,
        .event-listing .pagination,
        .search-result .pagination {
            display: inline-flex;
            align-items: center;
            border: 1px solid var(--clr-border);
            border-radius: 10px;
            padding: 4px;
            margin: 0;
            list-style: none;
            background: var(--clr-white);
        }

            .agency-list .agency-list-pagination .page-link,
            .event-listing .pagination .page-link,
            .search-result .pagination .page-link {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                background: transparent;
                border: 0;
                border-radius: 6px;
                height: 36px;
                min-width: 40px;
                padding: 0 .5rem;
                font-size: .875rem;
                color: var(--clr-muted);
                cursor: pointer;
                text-decoration: none;
            }

                .agency-list .agency-list-pagination .page-link:hover,
                .event-listing .pagination .page-link:hover,
                .search-result .pagination .page-link:hover {
                    color: var(--clr-text, #2E3032);
                }

            .agency-list .agency-list-pagination .page-item.active .page-link,
            .event-listing .pagination .page-item.active .page-link,
            .search-result .pagination .page-item.active .page-link {
                color: var(--clr-brand, #A9231A);
                font-weight: 600;
                background: var(--clr-brand-wash, #fdecee);
            }

            .agency-list .agency-list-pagination .page-item.disabled .page-link,
            .event-listing .pagination .page-item.disabled .page-link,
            .search-result .pagination .page-item.disabled .page-link {
                color: var(--clr-bg-gray-inactive, #ccc);
                opacity: 1;
                cursor: default;
            }

            .agency-list .agency-list-pagination .page-control .page-link,
            .event-listing .pagination .page-control .page-link,
            .search-result .pagination .page-control .page-link {
                width: 36px;
                min-width: 36px;
                border: 1px solid var(--clr-border);
                border-radius: 8px;
                color: var(--clr-brand, #A9231A);
                padding: 0;
            }

            .agency-list .agency-list-pagination .page-control:first-child .page-link,
            .event-listing .pagination .page-control:first-child .page-link,
            .search-result .pagination .page-control:first-child .page-link {
                margin-right: 10px;
            }

            .agency-list .agency-list-pagination .page-control:last-child .page-link,
            .event-listing .pagination .page-control:last-child .page-link,
            .search-result .pagination .page-control:last-child .page-link {
                margin-left: 10px;
            }

            .agency-list .agency-list-pagination .page-control .page-link:hover:not([aria-disabled="true"]),
            .event-listing .pagination .page-control .page-link:hover:not([aria-disabled="true"]),
            .search-result .pagination .page-control .page-link:hover:not([aria-disabled="true"]) {
                background: var(--clr-brand-wash, #fdecee);
                border-color: var(--clr-brand, #A9231A);
            }

            .agency-list .agency-list-pagination .page-link:focus-visible,
            .event-listing .pagination .page-link:focus-visible,
            .search-result .pagination .page-link:focus-visible {
                outline: 2px solid var(--clr-brand, #A9231A);
                outline-offset: 2px;
            }

            /* Hairline separators between page numbers (added via CSS, not markup) */
            .agency-list .agency-list-pagination .page-item:not(.page-control) + .page-item:not(.page-control)::before,
            .event-listing .pagination .page-item:not(.page-control) + .page-item:not(.page-control)::before,
            .search-result .pagination .page-item:not(.page-control) + .page-item:not(.page-control)::before {
                content: '';
                display: inline-block;
                width: 1px;
                height: 20px;
                background: var(--clr-border);
                vertical-align: middle;
                margin: 0 2px;
            }

/* Pager chevrons. pagination.js is the only thing that emits <i class="fa-light fa-chevron-left">,
   and it feeds three separate pagers (AgencyList, EventListing, SearchResult) whose page wrappers
   do not share a class, so these rules are deliberately global rather than scoped to one of them.
   Font Awesome is not loaded on this site, so the classes carry no styling of their own and the
   glyph is drawn here. Masked rather than set as a background image so that background-color
   paints it: currentColor then follows whatever colour the pager link already sets - brand while
   the control is live, --clr-bg-gray-inactive once it is disabled, with neither value repeated
   here. !important and content: none keep these authoritative over the icon-font defaults if a
   Font Awesome build is ever linked again. Chevron paths are the Bootstrap Icons pair already
   used in Modules/Blog/BlogArticle.ascx. */
.fa-light.fa-chevron-left,
.fa-light.fa-chevron-right {
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    background-color: currentColor !important;
    -webkit-mask-image: var(--pager-chevron) !important;
    mask-image: var(--pager-chevron) !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-size: 14px 14px !important;
    mask-size: 14px 14px !important;
}

    .fa-light.fa-chevron-left::before,
    .fa-light.fa-chevron-right::before {
        content: none !important;
    }

.fa-light.fa-chevron-left {
    --pager-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3E%3Cpath fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}

.fa-light.fa-chevron-right {
    --pager-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

/* Directory Search Form module (ON211/Modules/Directory/DirectorySearchForm.ascx)
   The white search card: Location + Search fields, Search / Filters / Map View buttons,
   and the "In need of urgent help?" chip row. Also styles the Filters popup, which is
   rendered by the same module.
-------------------------------------------------- */
.directory-search-form .dsf-card {
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, .06);
}

/* Topic suggestions ------------------------------ */
/* The dropdown under the keyword box. Absolutely positioned inside .dsf-input-icon, which is
   already position: relative, so it overlays what follows instead of pushing the card taller as
   you type. */
.directory-search-form .dsf-suggest-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    /* Above the card and the urgent-help chips below it, but under a Bootstrap modal (1055). */
    z-index: 1000;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: #FFFFFF;
    border: 1px solid #D6D6D6;
    border-radius: 8px;
    box-shadow: 0 8px 24px 0 rgba(0, 0, 0, .10);
    /* Six items fit; a shorter list simply ends. Scrolls rather than growing without limit. */
    max-height: 260px;
    overflow-y: auto;
}

.directory-search-form .dsf-suggest-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 6px;
    color: #2E3032;
    cursor: pointer;
}

    /* One highlight class for both the mouse and the arrow keys, so the two can't disagree about
       which row is current. */
    .directory-search-form .dsf-suggest-item.is-active {
        background: var(--clr-brand-pink);
        color: #A9231A;
    }

/* The parent topic, to the right and quieter: it qualifies the suggestion rather than being part of
   it. Needed because the same subcategory name appears under more than one topic. */
.directory-search-form .dsf-suggest-parent {
    flex-shrink: 0;
    color: #76797B;
    font-size: 0.8125rem;
}

/* Stays muted on the highlighted row rather than turning red with the name beside it. */
.directory-search-form .dsf-suggest-item.is-active .dsf-suggest-parent {
    color: #A9231A;
    opacity: .75;
}

/* Fields ------------------------------------------ */
.directory-search-form .dsf-input-icon {
    position: relative;
}

    .directory-search-form .dsf-input-icon .form-control {
        height: 44px;
        padding-left: 38px;
        border-color: var(--clr-border);
        border-radius: 8px;
    }

        .directory-search-form .dsf-input-icon .form-control:focus {
            border-color: var(--clr-brand);
            box-shadow: none;
        }

/* Leading icon: the search glyph is decoration, the location pin is the
   "use my current location" button — both sit in the same spot. */
.directory-search-form .dsf-icon,
.directory-search-form .dsf-icon-btn {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    color: var(--clr-brand);
    line-height: 0;
}

.directory-search-form .dsf-icon {
    pointer-events: none;
}

.directory-search-form .dsf-keyword-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #ccc;
    color: #fff;
    cursor: pointer;
    line-height: 0;
    transition: background 0.15s;
}

    .directory-search-form .dsf-keyword-clear svg {
        width: 14px;
        height: 14px;
    }

    .directory-search-form .dsf-keyword-clear:hover {
        background: #999;
    }

.directory-search-form .dsf-input-icon:has(.dsf-keyword-clear) .form-control {
    padding-right: 36px;
}

.directory-search-form .dsf-icon-btn {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

    .directory-search-form .dsf-icon svg,
    .directory-search-form .dsf-icon-btn svg {
        width: 24px;  /* WCAG 2.2 SC 2.5.8 Target Size (Minimum): was 17px, under the 24x24 floor */
        height: 24px;
    }

.directory-search-form .dsf-info {
    color: var(--clr-muted);
    cursor: help;
    font-weight: 400;
}

.directory-search-form .dsf-location-status {
    color: var(--clr-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.directory-search-form .dsf-spinner {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    animation: dsf-spin 0.8s linear infinite;
}

@keyframes dsf-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Buttons ----------------------------------------- */
.directory-search-form .btn {
    height: 44px;
    font-weight: 600;
    white-space: nowrap;
}

.directory-search-form .dsf-btn-search {
    background: var(--clr-black);
    border: 1px solid var(--clr-black);
    color: var(--clr-white);
}

    .directory-search-form .dsf-btn-search:hover:not(:disabled),
    .directory-search-form .dsf-btn-search:focus:not(:disabled) {
        background: var(--clr-brand);
        border-color: var(--clr-brand);
        color: var(--clr-white);
    }

    .directory-search-form .dsf-btn-search:disabled {
        opacity: 0.45;
        cursor: not-allowed;
    }

.directory-search-form .dsf-btn-outline {
    background: var(--clr-white);
    border: 1px solid var(--clr-border);
    color: var(--clr-dark);
    align-content: center;
}

    .directory-search-form .dsf-btn-outline:hover,
    .directory-search-form .dsf-btn-outline:focus {
        border-color: var(--clr-border-medium);
        color: var(--clr-dark);
    }

    .directory-search-form .dsf-btn-outline.active {
        background: #A9231A;
        border-color: #A9231A;
        color: #fff;
    }

    .directory-search-form .dsf-btn-outline:disabled {
        opacity: 0.45;
        cursor: not-allowed;
    }

    .directory-search-form .dsf-btn-outline .dsf-icon-filters {
        width: 17px;
        height: 17px;
        color: var(--clr-brand);
    }

    .directory-search-form .dsf-btn-outline.active .dsf-icon-filters {
        color: #fff;
    }

/* A filter is selected in the popup (the popup applies on its own button, so this is the
   only hint left once it closes). */
.directory-search-form .dsf-filter-dot {
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #A9231A;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    padding: 0 5px;
}

/* Options row (Distance / Sort By / View Results As) */
.directory-search-form .dsf-options-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--clr-border);
    align-items: flex-end;
}

.directory-search-form .dsf-option-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 0;
}

@media (max-width: 767px) {
    .directory-search-form .dsf-options-row {
        flex-direction: column;
    }

    .directory-search-form .dsf-option-group {
        width: 100%;
    }
}

.directory-search-form .dsf-option-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--clr-dark);
}

.directory-search-form .dsf-dropdown {
    position: relative;
}

.directory-search-form .dsf-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--clr-border);
    border-radius: 8px;
    background: var(--clr-white);
    font-size: 0.875rem;
    color: var(--clr-dark);
    cursor: pointer;
    white-space: nowrap;
    width: 100%;
}

    .directory-search-form .dsf-dropdown-toggle:focus {
        border-color: var(--clr-brand);
        box-shadow: none;
        outline: none;
    }

.directory-search-form .dsf-dropdown-text {
    flex: 1;
    text-align: left;
}

.directory-search-form .dsf-dropdown-arrow {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: #666;
}

.directory-search-form .dsf-dropdown .dsf-suggest-list {
    right: auto;
    min-width: 100%;
    width: max-content;
}

/* Urgent help chips ------------------------------- */
.directory-search-form .dsf-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid var(--clr-border);
    border-radius: 999px;
    background: var(--clr-white);
    color: var(--clr-dark);
    font-size: .9375rem;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
}

    .directory-search-form .dsf-chip:hover,
    .directory-search-form .dsf-chip:focus-visible {
        border-color: var(--clr-brand);
        color: var(--clr-brand);
    }

.directory-search-form .dsf-chip-radio {
    width: 13px;
    height: 13px;
    border: 1px solid var(--clr-border-medium);
    border-radius: 50%;
    flex-shrink: 0;
}

.directory-search-form .dsf-chip.selected {
    border-color: var(--clr-brand);
    color: var(--clr-brand);
}

    .directory-search-form .dsf-chip.selected .dsf-chip-radio {
        border-color: var(--clr-brand);
        background: var(--clr-brand);
        box-shadow: inset 0 0 0 2px var(--clr-white);
    }

/* Page Anchor module (ON211/Modules/Site/PageAnchor.ascx)
   A section heading that doubles as the link target for that section, listed by the Side
   Navigation module's "On this page" list. Left to inherit the theme's h2 look — only the
   behaviour that makes it a link target is set here.
-------------------------------------------------- */
.page-anchor {
    /* The header is fixed, so a heading scrolled to the very top of the viewport lands underneath
       it. Hold it clear — 96px covers the header plus a little air. */
    scroll-margin-top: 96px;
}

    /* Focused programmatically when its link is followed, to carry keyboard focus into the section.
       It isn't in the tab order, and being scrolled into view is the cue that focus moved, so no
       ring — the same treatment a skip link's target gets. */
    .page-anchor:focus {
        outline: none;
    }

/* Side Navigation module (ON211/Modules/Site/SideNavigation.ascx)
   The "On this page" anchor list above a list of every page under the same parent as the page
   being viewed. The page being viewed renders as text rather than a link and carries -current.
-------------------------------------------------- */
/* Separates the two lists when a page has both. */
.side-nav-onpage {
    margin-bottom: 28px;
}

.side-nav-heading {
    margin: 0 0 12px 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #2E3032;
}

.side-nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #E3E3E3;
}

.side-nav-item {
    border-bottom: 1px solid #E3E3E3;
}

.side-nav-link {
    display: block;
    padding: 10px 12px;
    color: #76797B;
    text-decoration: none;
    /* The current item is marked with a left border, so every item reserves the same space to
       stop the labels shifting sideways as you move between pages. */
    border-left: 3px solid transparent;
}

    .side-nav-link:hover,
    .side-nav-link:focus-visible {
        color: #A9231A;
        background: #FAFAFA;
    }

    .side-nav-link:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px #A9231A;
    }

/* Not colour alone: the current page is also the only bold item and carries aria-current. */
.side-nav-link-current {
    color: #A9231A;
    font-weight: 700;
    border-left-color: #A9231A;
    background: var(--clr-brand-pink);
}

/* Directory detail pages (ON211/Modules/Directory/AgencyDetail.ascx, LocationDetail.ascx,
   ServiceAtLocationDetail.ascx)
   All three render the same shell — .agency-detail wrapping a hero, a col-lg-8 column of
   <section>s and a col-lg-4 sidebar — so one block styles the set and they can't drift apart.
   Consolidated here from the near-identical <style> blocks that used to sit in AgencyDetail.ascx
   and ServiceAtLocationDetail.ascx; LocationDetail carried none at all and was inheriting only
   Bootstrap, which is why it looked different from the other two.

   Styled to the Resources Details design: white hero with a large tight headline, sections
   separated by hairlines rather than boxes, borderless hairline tables, and a bordered sidebar
   card. No markup or fields were changed.
-------------------------------------------------- */

/* Hero: white, not the pink band it was. The design leads with the headline against the page. */
.agency-detail-hero {
    background-color: #FFFFFF;
}

.agency-detail-description {
    white-space: pre-line;
}

/* ── Info strip ─────────────────────────────────────────────────────────────
   Full-width pink band under the headline carrying address, phone, website and the link up to the
   agency. Sits outside .container so the colour runs edge to edge while the text stays aligned
   with the columns below it. */
.agency-detail-strip {
    background: var(--clr-brand-pink);
    padding: 14px 0;
}

.agency-detail-strip-items {
    display: flex;
    flex-wrap: wrap;
    /* Row gap as well as column gap: on a narrow screen the items stack and need the breathing
       room, and flex-wrap alone gives them none. */
    gap: 8px 40px;
    align-items: center;
    font-size: 0.9375rem;
    color: #2E3032;
}

.agency-detail-strip-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* The pin is the one flash of brand red in the band. */
.agency-detail-strip-icon {
    color: #A9231A;
    flex-shrink: 0;
}

/* An icon-only item in the strip — the website link. Given a hit area rather than being the bare
   16px glyph, which is below any reasonable target size, and coloured brand red so it reads as the
   one thing in the band that isn't text. */
.agency-detail-strip-icon-link {
    padding: 4px;
    margin: -4px;
    border-radius: 4px;
    color: #A9231A !important;
    line-height: 1;
}

    .agency-detail-strip-icon-link:hover,
    .agency-detail-strip-icon-link:focus-visible {
        color: #7E1A13 !important;
    }

    .agency-detail-strip-icon-link:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px #A9231A;
    }

.agency-detail-strip a {
    color: #2E3032;
    text-decoration: none;
}

    .agency-detail-strip a:hover,
    .agency-detail-strip a:focus-visible {
        color: #A9231A;
        text-decoration: underline;
    }

/* Headline: large, tight and near-black. clamp() so it scales down on phones without a media
   query — at the top of the page it is the one element that must never wrap awkwardly. */
.agency-detail h1 {
    font-size: clamp(2rem, 4.2vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #141414;
}

/* The "Non-profit Community Service Agency | Food Security" line under the headline: present on
   these pages as the "Offered by" / "Part of" / "Also known as" rows. */
.agency-detail-hero .text-secondary {
    font-size: 1.0625rem;
    color: #76797B !important;
}

/* Metadata row under the headline (status, last updated): quieter than the subtitle above it. */
.agency-detail-hero .small {
    color: #76797B;
}

/* Subtitle under the headline: taxonomy | topic | agency. */
.agency-detail-subtitle {
    font-size: 1.0625rem;
    color: #76797B;
}

/* The pipes are lighter than the text they divide, so they separate without competing. */
.agency-detail-subtitle-sep {
    color: #C9C9C9;
    padding: 0 2px;
}
.agency-card-heading a::after {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-left: 5px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1 1 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4 4 0 0 1-.128-1.287z'/%3E%3Cpath d='M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: middle;
}

/* ── Hero actions (Print Detail) ─────────────────────────────────────────────
   Sits under the headline. Inline-flex and auto width, unlike the sidebar's full-width buttons.
   What the printed page looks like is set in ON211/css/print.css. */
.detail-actions {
    margin-top: 1rem;
}

.detail-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: #FFFFFF;
    border: 1px solid #D6D6D6;
    border-radius: 8px;
    color: #141414;
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
}

    .detail-action-btn:hover {
        border-color: #141414;
    }

    .detail-action-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(169, 35, 26, .35);
    }

/* ── Urgent assistance card ─────────────────────────────────────────────────
   The dark card in the sidebar. Its contents come from an Advantage editor, so the styling reaches
   into whatever the editor produced — headings, paragraphs, links — rather than assuming a shape. */
.urgent-card {
    padding: 20px;
    background: #4A0F0B;
    border-radius: 12px;
    color: #F4E9E8;
    font-size: 0.875rem;
    line-height: 1.55;
}
    .urgent-card a {color:#fff; font-weight:bold}
    /* First and last child margins would otherwise fight the card's own padding. */
    .urgent-card > :first-child {
        margin-top: 0;
    }

    .urgent-card > :last-child {
        margin-bottom: 0;
    }

    .urgent-card h1,
    .urgent-card h2,
    .urgent-card h3,
    .urgent-card h4,
    .urgent-card strong,
    .urgent-card b {
        color: #FFFFFF;
    }

    .urgent-card h1,
    .urgent-card h2,
    .urgent-card h3,
    .urgent-card h4 {
        font-size: 1.125rem;
        font-weight: 700;
        margin-bottom: 8px;
    }

    /* Underlined, not just lighter: on a dark wash colour alone is a weak signal for a link. */
    .urgent-card a {
        color: #FFFFFF !important;
        text-decoration: underline;
    }

        .urgent-card a:hover,
        .urgent-card a:focus-visible {
            color: #FFD9D5;
        }

        .urgent-card a:focus-visible {
            outline: none;
            box-shadow: 0 0 0 3px rgba(255, 255, 255, .45);
        }

/* ── Last updated stamp ─────────────────────────────────────────────────────
   Small bordered card at the very top of the sidebar. Quiet on purpose: it qualifies the record
   rather than being part of it. */
.sidebar-stamp {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #FFFFFF;
    border: 1px solid #E3E3E3;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #4A4A4A;
}

    .sidebar-stamp svg {
        color: #76797B;
        flex-shrink: 0;
    }

/* ── Connected Topics ───────────────────────────────────────────────────────
   The directory topics a record is reachable under, as pills below the sidebar card. Outlined
   rather than filled, so they read as labels and aren't mistaken for the pink tags on the nearby
   cards, which sit inside a link. */
.sidebar-topics-heading {
    margin: 0 0 12px 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #141414;
}

.sidebar-topics-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sidebar-topic {
    padding: 5px 14px;
    background: #FFFFFF;
    border: 1px solid #E3E3E3;
    border-radius: 999px;
    font-size: 0.875rem;
    color: #2E3032;
}

/* ── Quick Actions card ─────────────────────────────────────────────────────
   Top of the sidebar, outlined in brand red so it reads as the page's call to action rather than
   another panel of details. */
.quick-actions {
    padding: 20px;
    background: #FFFFFF;
    border: 1px solid #A9231A;
    border-radius: 12px;
}

.quick-actions-heading {
    margin: 0 0 8px 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #A9231A;
}

.quick-actions-text {
    margin: 0 0 16px 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #76797B;
}

/* Full-width stacked buttons, so the card reads as a short list of things to do. */
.quick-actions-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    margin-bottom: 10px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    cursor: pointer;
}

    .quick-actions-btn:last-of-type {
        margin-bottom: 0;
    }

    .quick-actions-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(169, 35, 26, .35);
    }

.quick-actions-btn-primary {
    background: #141414;
    border: 1px solid #141414;
    color: #FCFCFC;
}

    .quick-actions-btn-primary:hover {
        background: #2E3032;
        border-color: #2E3032;
        color: #FCFCFC;
    }

.quick-actions-btn-secondary {
    background: #FFFFFF;
    border: 1px solid #D6D6D6;
    color: #141414;
}

    .quick-actions-btn-secondary:hover {
        border-color: #141414;
        color: #141414;
    }

/* Only takes up room once the script has something to report. */
.quick-actions-message {
    display: block;
    margin-top: 10px;
    font-size: 0.875rem;
    color: #76797B;
}

    .quick-actions-message:empty {
        display: none;
    }

/* Section rhythm: a hairline between consecutive sections in the main column instead of a border
   around each, which is what gives the design its open feel. The first section has no rule above
   it, so the page doesn't open with a line. */
.agency-detail .col-lg-8 > section + section {
    border-top: 1px solid #E9E9E9;
    padding-top: 2rem;
}

/* Section headings: a step down from the headline, same weight, same near-black. */
.agency-detail .col-lg-8 > section > h2 {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #141414;
    margin-bottom: 1.25rem;
}

/* Body copy in the main column sits grey against the black headings. */
.agency-detail .col-lg-8 {
    color: #4A4A4A;
}

/* ── Tables (hours, program details, eligibility) ──────────────────────────
   Borderless with a hairline under each row: the design has no table chrome, just rules. */
.agency-detail .agency-hours-table {
    margin-bottom: 0;
}

    .agency-detail .agency-hours-table th,
    .agency-detail .agency-hours-table td {
        padding: 12px 0;
        border: 0;
        border-bottom: 1px solid #E9E9E9;
        background: transparent;
        vertical-align: top;
    }

    /* Label column: the day or field name, dark against the grey value beside it. */
    .agency-detail .agency-hours-table th {
        width: 35%;
        font-weight: 500;
        color: #2E3032;
    }

    .agency-detail .agency-hours-table td {
        color: #4A4A4A;
    }

    /* No rule under the last row — the section's own hairline follows it. */
    .agency-detail .agency-hours-table tr:last-child th,
    .agency-detail .agency-hours-table tr:last-child td {
        border-bottom: 0;
    }

/* Compact day/time grid used inside service and location cards. */
.agency-detail .agency-hours-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 1.5rem;
    row-gap: 2px;
    margin-top: 4px;
}

/* ── Cards in the main column (programs, locations) ────────────────────────
   White with a hairline border and a soft radius, like the "Related Services Nearby" cards in
   the design — replacing the flat grey wash these had. */
.agency-detail .agency-service,
.agency-detail .agency-location {
    background: #FFFFFF !important;
    border: 1px solid #E3E3E3 !important;
    border-radius: 12px !important;
}

/* A program's description, three lines then cut off. The feed's descriptions average four
   hundred-odd characters and reach eleven thousand, so an agency with a dozen programs printed a
   page of essays where the design has a scannable list. -webkit-line-clamp is the only
   cross-browser way to clamp by line count, and is the same treatment the result cards, clipboard
   entries and "Related Services Nearby" strip already use. The whole text stays in the DOM, so
   find-in-page and search engines still see it, and the card's title links to the service's own
   page for the rest. */
.agency-detail .agency-service-description {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.agency-detail .agency-contact:last-child {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* ── Sidebar ───────────────────────────────────────────────────────────────
   One bordered card, softer radius and lighter border than Bootstrap's default. */
.agency-detail .agency-sidebar {
    border-color: #E3E3E3 !important;
    border-radius: 12px !important;
}

    .agency-detail .agency-sidebar > h2 {
        font-size: 1.25rem;
        font-weight: 700;
        color: #141414;
    }

.agency-detail .agency-sidebar-fields dt {
    font-weight: 700;
    font-size: 0.9375rem;
    color: #2E3032;
    margin-top: 16px;
}

    .agency-detail .agency-sidebar-fields dt:first-child {
        margin-top: 0;
    }

.agency-detail .agency-sidebar-fields dd {
    margin: 4px 0 0 0;
    color: #4A4A4A;
}

    /* Links in the sidebar read as the brand red the design uses for contact rows. */
    .agency-detail a, .agency-detail .agency-sidebar-fields dd a {
        color: #A9231A;
        text-decoration: none;
    }

        .agency-detail .agency-sidebar-fields dd a:hover,
        .agency-detail .agency-sidebar-fields dd a:focus-visible {
            text-decoration: underline;
        }

/* Maps: rounded, and shorter in the sidebar than inline, matching the design's proportions. */
.agency-detail .agency-detail-map {
    width: 100%;
    height: 200px;
    border-radius: 8px;
}

.agency-detail .agency-sidebar .agency-detail-map {
    height: 150px;
}

/* Matches the site footer's Socials icon links — same Lucide icons, grey by default, brand red
   on hover. */
.agency-detail .agency-social-link {
    display: inline-flex;
    color: #76797B;
    border-radius: 4px;
}

    .agency-detail .agency-social-link:hover {
        color: #A9231A;
    }

    .agency-detail .agency-social-link:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px #A9231A;
    }

/* ── Action buttons (save / remove from clipboard) ─────────────────────────
   The design pairs a dark-outline button with a black filled one rather than the red pair these
   started as. Scoped to .agency-detail so the site's own red buttons are untouched. */
.agency-detail .btn-outline-danger {
    border-color: #D6D6D6;
    color: #141414;
    border-radius: 8px;
    font-weight: 600;
}

    .agency-detail .btn-outline-danger:hover,
    .agency-detail .btn-outline-danger:focus-visible {
        background: #141414;
        border-color: #141414;
        color: #FCFCFC;
    }

.agency-detail .btn-danger {
    background: #141414;
    border-color: #141414;
    border-radius: 8px;
    font-weight: 600;
    color: #FCFCFC;
}

    .agency-detail .btn-danger:hover,
    .agency-detail .btn-danger:focus-visible {
        background: #2E3032;
        border-color: #2E3032;
    }

/* The foot of the sidebar column pins on desktop: the contact card, Connected Topics and Suggest
   Update together, as one block that runs to the end of the column. The sticky used to sit on the
   contact card alone, back when that card was the last thing in the column; once Connected Topics
   and Suggest Update were added below it they scrolled up underneath the pinned card — behind its
   map — and out of sight. Nothing follows the wrapper, so nothing can slide under it. */
@media (min-width: 992px) {
    .agency-detail .agency-sidebar-sticky {
        position: sticky;
        top: 1.5rem;
    }
}

/* Clipboard detail: a saved service's description, held to two lines so a clipboard reads as a
   scannable shortlist rather than a page of essays. -webkit-line-clamp is the only cross-browser way
   to clamp by line count. The whole text is still in the DOM, so find-in-page still sees it, and the
   card's title links to the service's own page for the rest. */
.clipboard-detail .clipboard-service-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Related Services Nearby ────────────────────────────────────────────────
   The three-card strip at the foot of each detail page. Set off from the page above it by a rule
   and a faint wash, the way the design separates it from the record's own content. */
.related-nearby {
    border-top: 1px solid #E9E9E9;
    padding: 3rem 0 4rem;
}

.related-nearby-eyebrow {
    margin: 0 0 4px 0;
    color: #A9231A;
    font-size: 0.9375rem;
}

.related-nearby-heading {
    margin: 0 0 1.75rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #141414;
}

/* Cards: flex column so the tag/link row can be pushed to the bottom and line up across a row of
   cards whose descriptions run to different lengths. */
.related-nearby-card {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: #FFFFFF;
    border: 1px solid #E3E3E3;
    border-radius: 12px;
}

.related-nearby-address {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px 0;
    font-size: 0.875rem;
    color: #4A4A4A;
}

.related-nearby-pin {
    color: #A9231A;
    flex-shrink: 0;
}

/* Title: one line, clipped rather than wrapped, so every card in the row is the same shape —
   "Fort York Emergency Food Ce…" in the design. */
.related-nearby-title {
    margin: 0 0 10px 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #141414;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Description: three lines, then ellipsis. -webkit-line-clamp is the only cross-browser way to
   clamp by line count, and is supported everywhere this site targets. */
.related-nearby-description {
    margin: 0 0 1.25rem 0;
    color: #4A4A4A;
    font-size: 0.9375rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.related-nearby-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    /* Holds the row to the bottom of the card however short the description is. */
    margin-top: auto;
}

.related-nearby-tag {
    padding: 4px 12px;
    background: var(--clr-brand-pink);
    border-radius: 999px;
    color: #A9231A;
    font-size: 0.8125rem;
  /*  white-space: nowrap;*/
  text-align:center
}

.related-nearby-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #A9231A;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    font-size: 14px
}

    .related-nearby-link:hover,
    .related-nearby-link:focus-visible {
        color: #7E1A13;
        text-decoration: underline;
    }

/* Service at location feedback modal (ON211/Modules/Directory/ServiceAtLocationDetail.ascx)
   Hand-rolled rather than a Bootstrap modal, so it needs its own backdrop and dialog rules.
   Moved here with the rest of that page's styles; the page itself no longer carries a <style>.
-------------------------------------------------- */

/* The "offered by" agency link in the hero: inherits the subtitle colour, brand red on hover. */
.agency-detail .agency-detail-agency-link {
    color: inherit;
    text-decoration: underline;
}

    .agency-detail .agency-detail-agency-link:hover,
    .agency-detail .agency-detail-agency-link:focus {
        color: #A9231A;
    }
/* Feedback modal: hand-rolled (Bootstrap's JS bundle isn't confirmed present sitewide),
   so visibility is toggled directly via style.display rather than a "show" class. */
.agency-feedback-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1040;
}

.agency-feedback-modal-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
    background: #fff;
    border-radius: 0.5rem;
    padding: 1.5rem;
    width: calc(100% - 2rem);
    max-width: 480px;
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.agency-feedback-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    border: 0;
    background: none;
    font-size: 1.5rem;
    line-height: 1;
    color: #76797B;
    cursor: pointer;
}

    .agency-feedback-modal-close:hover,
    .agency-feedback-modal-close:focus-visible {
        color: #A9231A;
    }

.agency-feedback-yn-btn {
    border: 1px solid #ced4da;
    background: #fff;
    border-radius: 0.375rem;
    padding: 0.375rem 1.25rem;
    cursor: pointer;
}

    .agency-feedback-yn-btn:hover {
        border-color: #A9231A;
    }

    .agency-feedback-yn-btn.active {
        background: #A9231A;
        border-color: #A9231A;
        color: #fff;
    }

.agency-feedback-modal-thanks {
    text-align: center;
    padding: 1rem 0;
}

.max-w-\[1440px\] {
    max-width: 1600px !important;
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1440px !important;
    }
}
/* ── Form Builder: Attachment (file upload) ──────────────────────────────────
   The native "Browse... No file selected." renders as plain text; give the picker a visible
   bordered box like the other inputs, and the browse button the primary outline-button look. */
.fb-form .form-group .fb-control.fb-attachment {
    border: 1px solid #999999;
    border-radius: 3px;
    padding: 6px;
    background-color: #FFFFFF;
    color: #444444;
    cursor: pointer;
}

    .fb-form .form-group .fb-control.fb-attachment::file-selector-button {
        margin-right: 12px;
        padding: 6px 16px;
        border: 1px solid var(--bs-primary, #A9231A);
        border-radius: 8px;
        background-color: #FFFFFF;
        color: var(--bs-primary, #A9231A);
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.15s ease, color 0.15s ease;
    }

    .fb-form .form-group .fb-control.fb-attachment:hover::file-selector-button,
    .fb-form .form-group .fb-control.fb-attachment:focus-visible::file-selector-button {
        background-color: var(--bs-primary, #A9231A);
        color: #FFFFFF;
    }
/*global ul, li*/
main ul:not([class]),
main ol:not([class]) {
    padding-left: 1.25rem; /* Bootstrap reboot ships 2rem - too deep for body copy */
    margin: 0 0 1rem;
    list-style-position: outside;
    line-height: 5px;
}

/* Tailwind preflight strips list-style from every ul/ol - put it back here only */
main ul:not([class]) {
    list-style-type: disc;
}

main ol:not([class]) {
    list-style-type: decimal;
}

    main ul:not([class]) li,
    main ol:not([class]) li {
        margin-bottom: 0.25rem;
        line-height: 1.5;
    }

        main ul:not([class]) li:last-child,
        main ol:not([class]) li:last-child {
            margin-bottom: 0;
        }

        /* The real spacing culprit: the editor wraps list text in <p>, and Bootstrap
   gives every <p> a 1rem bottom margin - 16px of dead space per bullet. */
        main ul:not([class]) li > p,
        main ol:not([class]) li > p {
            margin-bottom: 0;
        }

            /* A genuine second paragraph inside one item still needs separation */
            main ul:not([class]) li > p + p,
            main ol:not([class]) li > p + p {
                margin-top: 0.5rem;
            }

    /* Nested lists sit tight under their parent item */
    main ul:not([class]) ul,
    main ul:not([class]) ol,
    main ol:not([class]) ul,
    main ol:not([class]) ol {
        margin: 0.25rem 0 0;
        padding-left: 1.25rem;
    }

main ul:not([class]) ul {
    list-style-type: circle;
}

main ul:not([class]) li::marker,
main ol:not([class]) li::marker {
    color: #A9231A;
}

/* ── Website link (agency + service detail pages) ─────────────────────────────
   Markup: ON211.WebsiteLink.Render; behaviour: /ON211/js/website-link.js.
   Domain as the link text, "Show link" reveals the full address with "Copy link".
   Targets are at least 28px tall (WCAG 2.2 2.5.8) and long addresses wrap (1.4.10). */
.web-link {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    max-width: 100%;
    vertical-align: middle;
}

.web-link__visit {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 24px;
    color: #A9231A;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}

    .web-link__visit:hover {
        color: #7E1A13;
    }

.web-link__icon {
    flex: none;
}

.web-link__toggle,
.web-link__copy {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    min-width: 28px;
    padding: 2px 8px;
    font: inherit;
    font-size: .875rem;
    line-height: 1.2;
    color: #2E3032;
    background: #F4F5F6;
    border: 1px solid #C9CDD2;
    border-radius: 6px;
    cursor: pointer;
}

    .web-link__toggle:hover,
    .web-link__copy:hover {
        background: #fff;
    }

    .web-link__toggle[hidden],
    .web-link__panel[hidden] {
        display: none !important;
    }

    .web-link__visit:focus-visible,
    .web-link__toggle:focus-visible,
    .web-link__copy:focus-visible {
        outline: 3px solid #A9231A;
        outline-offset: 2px;
        border-radius: 4px;
    }

.web-link__panel {
    display: flex;
    flex-basis: 100%;
    align-items: flex-start;
    gap: 10px;
    margin-top: 4px;
    padding: 8px 10px;
    background: #F6F7F8;
    border: 1px solid #D9DDE1;
    border-radius: 6px;
    align-items: center;
}

.web-link__url {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, Consolas, monospace;
    font-size: .82rem;
    color: #2E3032;
    overflow-wrap: anywhere;
    word-break: break-all;
    user-select: all;
    
}
.web-link__panel {background:#fff}
.web-link__status {
    flex-basis: 100%;
    font-size: .85rem;
    font-weight: 600;
    color: #000;
}

/* Label stays on the first line with the domain and the toggle. .web-link is inline-flex,
   so the moment "Show link" reveals the panel its max-content width fills the row and the
   whole link drops to a line of its own, stranding "Website:" above it. Laying the row out
   as a flex line lets the link column shrink instead of wrapping, and baseline keeps the
   label sitting on the domain's baseline. Below 768px the stacked layout stays, where the
   panel needs the full width for a long address. Only the agency detail service cards put
   this label inline with the link - the sidebar fields label theirs with a dt. */
@media (min-width: 768px) {
    .agency-detail .agency-service div:has(> .web-link) {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        column-gap: .28em;
    }

        .agency-detail .agency-service div:has(> .web-link) > .web-link {
            flex: 1 1 0;
            min-width: 0;
        }
}

.web-link .visually-hidden,
.agency-service-index .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ── Programs & Services index (agency detail page) ───────────────────────────
   AgencyDetail.ascx; shown when an agency has more services than the module's
   ServiceIndexThreshold. Jump links on the left, "Details" (service page) on the right. */
.agency-service-index {
    scroll-margin-top: 120px;
}

.agency-service-index-jump {
    color: #A9231A;
    text-underline-offset: 3px;
}

/* Icon column: as narrow as the icon, right-aligned; the icon gets a 32px hit area. */
/* The hours table's label column is fixed at 35%; here the name takes the row. */
.agency-detail .agency-service-index-table th {
    width: auto;
    text-align: left;
    vertical-align: middle;
    padding-top: 6px;
    padding-bottom: 6px;
}

.agency-detail .agency-service-index-table .agency-service-index-action {
    padding-top: 6px;
    padding-bottom: 6px;
    width: 1%;
    white-space: nowrap;
    text-align: right;
    vertical-align: middle;
}

.agency-service-index-detail {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    color: #A9231A;
}

    .agency-service-index-detail:hover {
        background: #F4F5F6;
        color: #7E1A13;
    }

.agency-service-index a:focus-visible,
.agency-service-back:focus-visible {
    outline: 3px solid #A9231A;
    outline-offset: 2px;
    border-radius: 3px;
}

/* Jump targets: clear of the sticky header, and the card jumped to is highlighted. */
.agency-service {
    scroll-margin-top: 120px;
}

    .agency-service:focus {
        outline: none;
    }

    .agency-service:target,
    .agency-service:focus-visible {
        box-shadow: 0 0 0 3px #A9231A;
    }

.agency-service-index:focus {
    outline: none;
}

@media (prefers-reduced-motion: no-preference) {
    html:has(.agency-service-index) {
        scroll-behavior: smooth;
    }
}

/* ── Programs & Services accordion (agency detail page) ───────────────────────
   AgencyDetail.ascx; replaces the "Jump to a service" index when an agency has more
   services (always, even one). Builds on the flat
   .accordion-flush look above, tightened for a long list: header is
   "Service name - Location name" + open/close arrow (the toggle) + record link icon. */
.agency-service-accordion {
    border-top: 1px solid var(--clr-border);
}

.agency-service-acc-item {
    scroll-margin-top: 120px;
}

.agency-service-acc-header {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin: 0;
}

.agency-service-accordion .accordion-button.agency-service-acc-toggle {
    flex: 1 1 auto;
    min-width: 0;
    gap: .75rem;
    font-size: 1rem;
    padding: .875rem 0;
    text-align: left;
}

    /* The summary icon replaces the global plus / minus. */
    .agency-service-accordion .accordion-button.agency-service-acc-toggle::after {
        display: none;
    }

.agency-service-acc-title {
    flex: 1 1 auto;
    min-width: 0;
}

.agency-service-acc-name {
    color: #A9231A;
}

.agency-service-acc-location {
    font-weight: 400;
    color: var(--clr-muted);
}

/* Both icons: 32px hit area, brand red, grey wash on hover — same as the old index's link icon. */
.agency-service-acc-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    color: #A9231A;
}

.agency-service-acc-toggle:hover .agency-service-acc-arrow,
.agency-service-acc-record:hover {
    background: #F4F5F6;
    color: #7E1A13;
}

/* Arrow: points down when closed, rotates to point up when open. */
.agency-service-acc-arrow svg {
    transition: transform .2s ease-in-out;
}

.agency-service-acc-toggle[aria-expanded="true"] .agency-service-acc-arrow svg {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .agency-service-acc-arrow svg {
        transition: none;
    }
}

.agency-service-acc-record:focus-visible,
.agency-service-acc-more:focus-visible {
    outline: 3px solid #A9231A;
    outline-offset: 2px;
}

.agency-service-accordion .accordion-body.agency-service-acc-body {
    padding: 0 0 1.25rem;
}

    .agency-service-accordion .accordion-body a.agency-service-acc-more {
        color: #A9231A;
        font-weight: 600;
        text-decoration: none;
    }

        .agency-service-accordion .accordion-body a.agency-service-acc-more:hover {
            text-decoration: underline;
        }

.agency-service-acc-record .visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Location filter above the accordion. */
.agency-service-filter .form-select {
    min-width: 14rem;
}

/* Printing: every summary open, icons hidden. */
@media print {
    .agency-service-accordion .accordion-collapse.collapse {
        display: block !important;
        height: auto !important;
    }

    .agency-service-acc-icon {
        display: none !important;
    }
}


/* Programs & Services in list mode (AgencyDetailAttributes.ServicesAsLinkList): a plain list. */
.agency-service-links {
    padding-left: 1.25rem;
    margin: 0;
}

    .agency-service-links li {
        padding: 3px 0;
    }

        .agency-service-links li > a {
            color: #A9231A;
            font-weight: 600;
            text-underline-offset: 3px;
        }

            .agency-service-links li > a:focus-visible {
                outline: 3px solid #A9231A;
                outline-offset: 2px;
                border-radius: 3px;
            }

/* WCAG 2.2 AA - 1.4.3 Contrast (Minimum)
   Two greys sat just under the 4.5:1 floor for normal text on white:
     #808080 = 3.94:1  header utility links (Your Clipboard, EN/FR)
     #76797B = 4.38:1  home banner description
   Darkened to #757575 (4.61:1) and #6E7174 (4.91:1) - both sub-perceptual shifts.

   Only CODE-owned colours are corrected here. The footer's greys live in an inline
   <style> inside the Site Settings footer HTML and are fixed in that content, not
   overridden from this file - a rule here would depend on content class names and
   would silently stop working the next time an editor restructures the footer.

   The doubled class on the second rule beats utility-theme.css's single-class
   .text-[#76797B] (which loads after this file) without needing !important.
   Verified with axe-core against the preview build.
   Still outstanding: the banner eyebrow #EE3124 at 4.11:1 - brand red, left for a
   decision rather than changed here.
-------------------------------------------------- */
.site-header .header-utility .nav-link,
.site-header .header-utility .nav-link:visited {
    color: #757575;
}

.text-\[\#76797B\].text-\[\#76797B\] {
    color: #6E7174;
}


/* Header tooltips (ON211/Controls/Navigation/Navbar/Navbar.ascx)
   Hover hints on "Your Clipboard" (outer utility row AND the copy inside the hamburger) and on
   "Exit Site". Markup is a <span class="header-tip-bubble" role="tooltip"> inside the link, with
   aria-describedby on the link so the hint still reaches screen readers while the bubble is
   visually hidden - the accname spec includes hidden nodes that are directly referenced.

   Colours come from the :root site variables: --clr-brand-deep on --clr-white is 7.14:1, clear of
   the 4.5:1 floor this build is held to (WCAG 2.2 AA).

   Non-touch only, as specified: the :hover reveal lives inside (hover: hover) and (pointer: fine),
   so a tap on a phone or tablet can never pin a bubble open. The :focus-visible reveal is
   deliberately OUTSIDE that query - keyboard users get the hint on any device, and :focus-visible
   does not fire on a touch tap, so nothing leaks back onto touch.

   The bubble is position:absolute from the start rather than only inside the media query. That
   keeps it out of flow on touch devices too, so it is never a flex item of the utility row and the
   row's gap ignores it entirely.

   Both parents set white-space: nowrap (.header-utility .nav-link and .header-exit), which the
   bubble would inherit and render as one endless line - hence the explicit white-space: normal
   and width: max-content below.
-------------------------------------------------- */
.site-header .header-tip {
    position: relative;
}

.site-header .header-tip-bubble {
    position: absolute;
    top: calc(100% + 18px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1040;
    width: max-content;
    max-width: 220px;
    padding: 8px 12px;
    border-radius: 8px;
    background-color: var(--clr-brand-deep);
    color: var(--clr-white);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    box-shadow: 0px 4px 12px 0px rgba(16, 24, 40, 0.18);
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 200ms;
}

    /* Tail. Tall slanted spike to match the mock - a near-vertical right edge with the apex set
       in from it, not the squat symmetric triangle a border gives you. clip-path is used rather
       than the border trick because borders can only draw symmetric wedges.

       Height is deliberately the same 18px as the bubble's gap above, so the spike exactly spans
       the space between the link and the bubble: it reads as one continuous callout, and the
       pointer can travel down onto the bubble without dropping :hover (SC 1.4.13 "hoverable").
       The bubble is a descendant of the link, so hovering it keeps the link hovered. */
    .site-header .header-tip-bubble::before {
        content: "";
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 16px;
        height: 18px;
        background-color: var(--clr-brand-deep);
        clip-path: polygon(78% 0, 100% 100%, 0 100%);
    }

/* Exit Site sits hard against the header's right edge - centring would push the bubble off screen,
   so it is right-aligned to the button and the arrow moves under the icon instead. */
.site-header .header-exit .header-tip-bubble {
    left: auto;
    right: 0;
    transform: none;
}

    .site-header .header-exit .header-tip-bubble::before {
        left: auto;
        right: 20px;
        transform: none;
    }

/* Hover reveal - non-touch pointers only. */
@media (hover: hover) and (pointer: fine) {
    .site-header .header-tip:hover .header-tip-bubble {
        opacity: 1;
        visibility: visible;
        transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
    }
}

/* Keyboard reveal - every device, see the note above. */
.site-header .header-tip:focus-visible .header-tip-bubble {
    opacity: 1;
    visibility: visible;
    transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}

/* Escape dismissal (SC 1.4.13). Set by the IIFE at the foot of Navbar.ascx. Same (0,4,0)
   specificity as the two reveal rules above and placed after them, so it wins on source order -
   no !important needed, which matters in this file: the header's greys and hover states are
   shared with content-owned styles and an !important here would silently outrank them. */
.site-header .header-tip.header-tip-dismissed .header-tip-bubble {
    opacity: 0;
    visibility: hidden;
}