/**
 * Custom CSS for LDM pages in the CIHI Connected Care theme
 * This file contains additional styling specific to the data model browser
 */

/* ============================================
   STATS SECTION - Horizontal layout
   ============================================ */
.stats {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    padding: 0;
    background: transparent !important;
}

.stat-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    background: transparent !important;
    border-radius: 0;
    text-align: left;
}

.stat-box .num {
    font-size: 2em;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 1.2;
}

.stat-box .label {
    font-size: 1em;
    color: #555;
    font-weight: 400;
}

/* ============================================
   SEARCH BOX - CIHI Corporate Style
   ============================================ */
.search-card {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    margin-bottom: 32px;
}

/* Hide the original h2 with emoji completely, show custom heading */
.search-card h2 {
    visibility: hidden;
    font-size: 0;
    line-height: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: none;
    position: relative;
}

.search-card h2::before {
    content: "Search this subject area";
    visibility: visible;
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 12px;
    height: auto;
    position: relative;
}

/* Search container - all elements on same line */
/* Search results styling — cihi.ca Content Search look */
#search-results {
    margin-top: 20px;
}
#search-results .search-results-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #1a1a1a;
    margin-bottom: 0.25rem;
}
#search-results .pager__results {
    font-size: 1rem;
}
#search-results .pager__results .result__page-count {
    font-weight: 700;
}
/* Sort select — own class (the theme's .search-sort adds a teal
   underline we don't want here). Styled 1:1 like cihi.ca's .form-select
   (40px tall, 1px teal border, 3.2px radius, 14px text). */
#search-results .search-results-sort select {
    width: auto;
    min-width: 196px;
    height: 40px;
    padding: 0 32px 0 19px;
    border: 1px solid #0E5A61;
    border-radius: 3.2px;
    font-size: 14px;
    font-weight: 400;
    color: #000;
    line-height: 21px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") no-repeat right 12px center;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
#search-results .search-result-row {
    padding: 1.25rem 0;
    border-bottom: 1px solid #d9d9d9;
}
#search-results .c-card__title {
    margin: 0 0 0.4rem;
    font-size: 1.25rem;
}
#search-results .c-card__title a {
    color: var(--ch-teal-dark, #14838E);
    font-weight: 700;
    text-decoration: underline;
}
#search-results .c-card__title a:hover {
    text-decoration: none;
    /* Theme link hover paints a background — text must flip to white
       (cihi.ca behavior) */
    color: #fff;
}
#search-results .c-card__title a:hover mark {
    background: transparent;
    color: inherit;
}
#search-results .card-metadata {
    display: flex;
    gap: 0.6rem;
    margin: 0 0 0.5rem;
    padding: 0;
}
#search-results .c-card__content {
    font-size: 1rem;
    line-height: 1.55;
}
#search-results mark {
    background: #fdedc2;
    padding: 0 1px;
}

/* Pagination — dedicated full-width row under the results, styled 1:1
   like cihi.ca's search pager: items-per-page .form-select on the left;
   on the right 14px black number links with 16px spacing, bold teal
   First/Previous/Next/Last, active page as a 28px teal circle with
   white bold text. Own class names so the theme's floated .pager
   styles don't apply. */
#search-results .search-pagination-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    width: 100%;
    clear: both;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 2px solid #29585F;
    /* offset before whatever follows (page footer) */
    margin-bottom: 3rem;
}
#search-results .search-page-size select {
    height: 40px;
    min-width: 196px;
    padding: 0 32px 0 19px;
    border: 1px solid #0E5A61;
    border-radius: 3.2px;
    font-size: 14px;
    font-weight: 400;
    color: #000;
    line-height: 21px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") no-repeat right 12px center;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
#search-results .search-pager__items {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 8px 0;
    white-space: nowrap;
}
#search-results .search-pager__item {
    margin-right: 16px;
    font-size: 14px;
    line-height: 21px;
}
#search-results .search-pager__item:last-child {
    margin-right: 0;
}
#search-results .search-pager__item a {
    display: inline-block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #000;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-decoration: none;
}
#search-results .search-pager__item a:hover {
    text-decoration: underline;
    background: transparent;
    color: #000;
}
#search-results .search-pager__item.is-active {
    width: 28px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background: #29585F;
    border-radius: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#search-results .search-pager__item.is-active a {
    color: #fff;
    font-weight: 700;
    line-height: 28px;
}
#search-results .search-pager__item.is-active a:hover {
    color: #fff;
    text-decoration: none;
}
#search-results .search-pager__item--link a {
    color: #29585F;
    font-weight: 700;
}
#search-results .search-pager__item--link a:hover {
    color: #29585F;
}
#search-results .search-pager__item--ellipsis {
    color: #000;
    font-size: 14px;
}

/* DCS page — search sits below the category tiles */
.dcs-search-wrap {
    margin-top: 2rem;
}

/* Diagram legend — keyboard-focusable (AODA): visible focus indicator.
   !important beats the theme's global outline resets. */
.diagram-legend:focus,
.diagram-legend:focus-visible {
    outline: 3px solid var(--ch-teal-dark, #14838E) !important;
    outline-offset: 2px;
}
.diagram-legend {
    cursor: default;
}

/* Attribute table — one line per value set (some attributes list several) */
.attr-valueset {
    margin-bottom: 0.4rem;
}
.attr-valueset:last-child {
    margin-bottom: 0;
}

/* Attribute note cell — the full Sparx note; keep it readable inside
   the table */
.entity-data-table--attributes .attr-note {
    font-size: 0.95em;
    max-width: 46rem;
    white-space: pre-line;
}
.entity-data-table--attributes td:nth-child(3),
.entity-data-table--relationships td.rel-mult {
    white-space: nowrap;
}

/* Relationship table — small note under the relationship name
   (exclusive OR, association class) */
.rel-note {
    font-size: 0.85em;
    color: #555;
    font-style: italic;
    margin-top: 0.15rem;
}

/* Relationship table — connector notes column (business context model
   only): free text that may carry lists and links */
/* The notes table is the widest one in the content column, so the
   class names must wrap between words (the table-wide "anywhere" rule
   would break them mid-word) and the notes take the largest share */
.entity-data-table--relationships-notes td.rel-class {
    overflow-wrap: break-word;
}
.entity-data-table--relationships-notes th.rel-mult {
    width: 1%;
}
.entity-data-table--relationships-notes th.rel-notes-cell {
    width: 32%;
}
.entity-data-table--relationships .rel-notes {
    font-size: 0.95em;
    max-width: 34rem;
    white-space: pre-line;
}
.entity-data-table--relationships .rel-notes ul,
.entity-data-table--relationships .rel-notes ol {
    margin: 0.2rem 0 0.2rem 1.1rem;
    padding: 0;
}

/* Constraints column: n/a placeholder */
.entity-info-block__na {
    color: #555;
    margin: 0;
}

/* Subject area page — real scaled-down diagram in the explore block */
.explore-model-block__diagram--svg svg {
    width: 100%;
    height: auto;
    max-height: 340px;
    display: block;
    background: #fff;
    border: 1px solid #d9d9d9;
}

/* CACDI category page — data element cards */
.cacdi-element-list .cacdi-element {
    padding: 1.1rem 0;
    border-bottom: 1px solid #d9d9d9;
}
.cacdi-element-list .cacdi-element .c-card__title {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
}
.cacdi-element-list .cacdi-element .c-card__title a {
    color: var(--ch-teal-dark, #14838E);
    font-weight: 700;
}

/* ============================================
   PROJECT STRUCTURE CARD
   ============================================ */
.product-main-content > .card {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 24px;
}

.product-main-content > .card h2 {
    font-size: 1.2em;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 12px;
    padding: 0 0 8px;
    border-bottom: 1px solid #e5e5e5;
}

.product-main-content > .card .nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.product-main-content > .card .nav-list li {
    padding: 8px 0;
    border-bottom: none;
}

.product-main-content > .card .nav-list li a {
    color: #14838E;
    text-decoration: none;
}

.product-main-content > .card .nav-list li a:hover {
    text-decoration: underline;
}

/* Hide emoji icons in nav-list */
.product-main-content > .card .nav-list li .icon {
    display: none;
}

/* ============================================
   PAGINATION - CIHI Corporate Style
   ============================================ */
.pagination,
.pager,
nav[aria-label="pagination"] ul,
.page-numbers {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 24px 0;
}

.pagination li,
.pager li,
.page-numbers li {
    display: inline-block;
}

.pagination a,
.pagination span,
.pager a,
.pager span,
.page-link,
.page-numbers a,
.page-numbers span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #14838E;
    text-decoration: none;
    font-size: 0.95em;
    background: #fff;
    transition: all 0.2s ease;
}

.pagination a:hover,
.pager a:hover,
.page-link:hover,
.page-numbers a:hover {
    background: #f0f9f8;
    border-color: #14838E;
}

.pagination .active a,
.pagination .active span,
.pager .active a,
.pager .active span,
.page-link.active,
.page-numbers .current,
.pagination li.active a {
    background: #14838E;
    color: #fff;
    border-color: #14838E;
}

.pagination .disabled a,
.pagination .disabled span,
.pager .disabled a,
.page-link.disabled,
.page-numbers .disabled {
    color: #ccc;
    pointer-events: none;
    background: #f5f5f5;
}

/* Next/Previous text styling */
.pagination .next a,
.pagination .prev a,
.pager .next a,
.pager .prev a {
    padding: 0 16px;
}

.pagination .next a::after {
    content: " →";
}

.pagination .prev a::before {
    content: "← ";
}

/* ============================================
   DIAGRAM PAGE STYLING
   ============================================ */

/* Diagram info row - side by side layout */
.diagram-info-row {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 24px;
    align-items: flex-start;
}

/* Info box styling */
.info-box {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px 20px;
    min-width: 220px;
    flex: 0 0 auto;
}

.info-box .info-title {
    font-weight: 700;
    font-size: 1em;
    color: #1a1a1a;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e5e5;
}

.info-box .info-field {
    font-size: 0.9em;
    color: #555;
    margin-bottom: 6px;
    line-height: 1.4;
}

.info-box .info-field strong {
    color: #1a1a1a;
    font-weight: 600;
}

/* Legend box styling - matches reference */
.legend-box {
    background: #fff;
    border: 1px solid #888;
    border-radius: 8px;
    padding: 16px 20px;
    min-width: 250px;
    flex: 0 0 auto;
}

.legend-box .legend-title {
    font-weight: 700;
    font-size: 1em;
    color: #1a1a1a;
    text-align: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e5e5;
}

/* Entity color legend items */
.legend-box .legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    font-size: 0.9em;
    color: #1a1a1a;
}

.legend-box .legend-swatch {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 3px;
    flex-shrink: 0;
    border: 1px solid #888 !important;
}

/* Relationship legend section */
.legend-box .legend-rel-section {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #e5e5e5;
}

.legend-box .legend-rel-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 0.9em;
    color: #1a1a1a;
}

.legend-box .legend-rel-item svg {
    flex-shrink: 0;
}

.legend-box .legend-rel-item span {
    white-space: nowrap;
}

/* Hide duplicate page title in card if it matches h1 */
.product-main-content > .card > h2:first-child {
    display: none;
}

/* Diagram container styling */
.diagram-container {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 24px;
    overflow: auto;
}

/* Entities in diagram card */
.product-main-content .card h2 {
    font-size: 1.1em;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 12px;
    padding: 0 0 8px;
    border-bottom: 1px solid #e5e5e5;
}

/* ============================================
   SVG DIAGRAM ENTITY STYLING
   ============================================ */

/* Reset SVG text rendering to prevent corporate theme overrides
   (the theme ships a bare `text{font-size:16px}` rule that would blow up
   diagram text). Applies to the full diagram view (.diagram-container)
   AND the scaled-down subject-area preview (.explore-model-block__diagram). */
.diagram-container svg,
.explore-model-block__diagram svg,
.diagram-viewer svg {
    font-family: Arial, sans-serif !important;
}

.diagram-container svg text,
.explore-model-block__diagram svg text,
.diagram-viewer svg text {
    font-family: Arial, sans-serif !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    /* No font-style reset: abstract class names (and off-diagram parent
       references) carry inline font-style:italic that must render —
       a stylesheet !important would override inline SVG styles. */
    font-variant: normal !important;
}

/* Ensure SVG doesn't inherit corporate theme font sizes */
.diagram-container svg text[font-size="8"],
.explore-model-block__diagram svg text[font-size="8"],
.diagram-viewer svg text[font-size="8"] {
    font-size: 8px !important;
}
.diagram-container svg text[font-size="9"],
.explore-model-block__diagram svg text[font-size="9"],
.diagram-viewer svg text[font-size="9"] {
    font-size: 9px !important;
}
.diagram-container svg text[font-size="10"],
.explore-model-block__diagram svg text[font-size="10"],
.diagram-viewer svg text[font-size="10"] {
    font-size: 10px !important;
}

/* Remove underline and hover effects from entity links in SVG */
.diagram-container svg a,
.diagram-container svg .entity-link {
    text-decoration: none !important;
}

.diagram-container svg a:hover,
.diagram-container svg .entity-link:hover {
    text-decoration: none !important;
}

.diagram-container svg a text,
.diagram-container svg .entity-link text {
    text-decoration: none !important;
}

/* Remove hover border/outline on entity boxes */
.diagram-container svg a:hover rect,
.diagram-container svg .entity-link:hover rect,
.diagram-container svg a:focus rect,
.diagram-container svg .entity-link:focus rect {
    outline: none !important;
    stroke: #888 !important;
    stroke-width: 1.2 !important;
}

/* Ensure no filter effects on hover */
.diagram-container svg a:hover,
.diagram-container svg .entity-link:hover {
    filter: none !important;
}

/* Prevent focus outline */
.diagram-container svg a:focus,
.diagram-container svg .entity-link:focus {
    outline: none !important;
}


/* ================================================================ */
/*  Home page (PCHDCF products) components                          */
/*  Ported from cihi.ca cihi_bootstrap compiled CSS; colour vars    */
/*  mapped to this theme's palette.                                 */
/* ================================================================ */

/* --- Quicklink tile cards (see cihi.ca /dashboards) --- */
.quicklink-card {
    --card-colour: var(--ch-teal-dark);
    --card-colour-light: var(--ch-teal-super-light);
    --card-colour-complement: var(--ch-white);
    background-color: var(--card-colour-light);
    color: var(--ch-dark);
}
.quicklink-card[href]:hover {
    background-color: var(--card-colour);
    color: var(--card-colour-complement);
}
.quicklink-card__icon-circle {
    background-color: var(--card-colour);
    width: 3.75rem;
    height: 3.75rem;
    font-size: 34px;
}
@media (min-width: 576px) {
    .quicklink-card__icon-circle {
        width: 5rem;
        height: 5rem;
        font-size: 50px;
    }
}
.quicklink-card[href]:hover .quicklink-card__icon-circle {
    color: var(--card-colour);
}
.quicklink-card__title-text {
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition-property: text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}
.group\/link:hover .quicklink-card__title-text {
    text-decoration-color: currentColor;
}
.quicklink-card h3 {
    font-size: 1.25rem;
    font-weight: 400;
    margin: 0;
}

/* --- Teal callout / simple alert --- */
.alert--teal {
    background-color: var(--ch-teal-super-light);
    color: var(--ch-dark);
    border: 0;
    border-radius: 0.25rem;
    padding: 1rem 1.25rem;
}

/* --- Accordion expand/collapse all link --- */
.accordion-list-summary {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}
.accordion-all-toggle {
    color: var(--ch-teal-dark);
    text-decoration: none;
    font-size: 0.9375rem;
}
.accordion-all-toggle:hover {
    text-decoration: underline;
}
.accordion-all-toggle .icon-expand::after {
    content: "\2195";
    margin-left: 0.375rem;
}

/* --- Published / Updated rubric (card-metadata) --- */
.card-metadata {
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 1.5rem;
    column-gap: 1.25rem;
}
.card-metadata__item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9375rem;
}
.card-metadata__item > i.fa-circle {
    color: var(--ch-orange);
    font-size: 7px;
}
.card-metadata__item time {
    font-weight: 700;
}

/* ================================================================ */
/*  PCHDCF products home page — layout refinements                  */
/* ================================================================ */

/* Vertical rhythm between the major blocks */
.pchdcf-home > * {
    margin-bottom: .75rem;
}
/* Reusable content blocks (partials/content_blocks.html) carry their
   own spacing so they keep the same rhythm on any page. */
.content-block {
    margin-bottom: 2.75rem;
}
/* Header row (title + version rubric | download options) → content
   row: one uniform block-sized gap below whichever column is taller.
   The rubric's own bottom margin is dropped inside the header so the
   gap is identical whether the rubric or the download card is taller. */
.page-header-row {
    margin-bottom: 2.75rem;
}
.page-header-block .rubric,
.page-header-block .card-metadata {
    margin-bottom: 0;
}
/* Alerts and description paragraphs now follow the rubric inside the
   title row (beside the download options): give them the same gap the
   content row used to have, and no trailing gap after the last one. */
.page-header-block .card-metadata + .alert,
.page-header-block .card-metadata + .text-formatted,
.page-header-block .alert + .alert,
.page-header-block .alert + .text-formatted {
    margin-top: 1.5rem;
}
.page-header-block > :last-child {
    margin-bottom: 0;
}
/* When the content row starts with a section heading (e.g. "Explore
   this subject area"), the heading's own 64px top margin would stack
   on the row gap above — drop it so the gap stays the uniform 2.75rem. */
.page-content-block .product-main-content > .section-header:first-child,
.page-content-block .product-main-content > :first-child > .section-header:first-child,
.page-content-block .product-main-content > :first-child > :first-child > .section-header:first-child {
    margin-top: 0;
}
/* Breathing room before the footer */
.pchdcf-home {
    padding-bottom: 3.5rem;
}
.pchdcf-home > *:last-child {
    margin-bottom: 0;
}

/* Expand/collapse-all control: right-aligned pill button, matching
   cihi.ca's .btn.btn-primary.accordion-all-toggle (see /about-cihi/
   general-help-and-faq). The .btn/.btn-primary rules from the theme's
   own CSS supply the teal pill styling; only alignment is added here. */
.pchdcf-faq .accordion-list-summary {
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}
.home-expand-all {
    font-size: 0.875rem;
}

/* Product card titles: trailing FA right arrow (matches wireframe) */
.pchdcf-home .content-row h3 a .pchdcf-card-arrow {
    margin-left: 0.55rem;
    font-size: 0.85em;
    vertical-align: baseline;
}

/* "Learn more" CTA: trailing FA chevron (matches cihi "Go to page") */
.pchdcf-home .btn-link.home-cta .fa-chevron-right {
    margin-left: 0.5rem;
    font-size: 0.9em;
    font-weight: 900;
}

/* Sidebar nav heading ("PCHDCF products") — suppress the generic Drupal
   block-header arrow icon (.arm h2 a::after) added by new-main-theme-2.css. */
#block-ldm-navigation h2 a::after {
    content: none;
}

/* ================================================================ */
/*  Reusable content blocks — new block styles                       */
/* ================================================================ */

/* --- Version rubric extras --- */
.card-metadata__item--version > i.fa-circle {
    font-size: 10px;
}
.card-metadata__version-label {
    font-weight: 700;
}
.card-metadata__previous-link {
    color: var(--ch-teal-dark);
    text-decoration: none;
}
.card-metadata__previous-link:hover {
    text-decoration: underline;
}
.card-metadata__previous-link .fa-arrow-circle-o-down {
    margin-left: 0.3rem;
}

/* --- Previous versions list --- */
.previous-versions-list {
    padding-left: 1.1rem;
    margin: 0;
}
.previous-versions-list li {
    margin-bottom: 0.4rem;
}
.previous-versions-list a {
    color: var(--ch-teal-dark);
}

/* --- Download options card (right sidebar) --- */
.download-options-card {
    background: #fff;
    border: 1px solid #ddd;
    border-top: 4px solid var(--ch-orange);
    padding: 1rem 1.25rem 1.25rem;
}
.download-options-card__title {
    font-size: 1.125rem;
    font-weight: 400;
    margin: 0 0 0.75rem;
}
.download-options-card p {
    margin: 0 0 0.5rem;
}
.download-options-card__note {
    margin: 0 0 0.75rem;
}
/* The theme's body-link state rules all carry :not(.sidebar *) guards,
   so links inside this right-sidebar card never get the standard link
   treatment. Mirror the exact main-content link states here
   (declarations copied from the theme's `main a:...` rules). */
.download-options-card a {
    color: var(--link-color);
    text-decoration: underline;
    text-underline-offset: .2em;
    text-decoration-color: var(--link-color);
    text-decoration-thickness: 1px;
}
.download-options-card a:visited {
    color: var(--link-visited-color);
    text-decoration-color: var(--link-visited-color);
}
.download-options-card a:hover,
.download-options-card a:active {
    background-color: var(--link-bg-color);
    outline: 2px solid var(--link-color);
    color: var(--link-hover-color);
    text-decoration: none;
}
.download-options-card a:visited:hover,
.download-options-card a:visited:active {
    background-color: var(--link-visited-bg-color);
    outline: 2px solid var(--link-visited-color);
}
.download-options-card a:focus-visible {
    color: var(--link-color);
    background-color: initial;
    outline: 2px solid #000;
}
.download-options-card a:visited:focus-visible {
    color: var(--link-visited-color);
    background-color: initial;
}

/* --- Model search block with filter ---
   (named model-search-block: the theme CSS already ships a .search-block
   component whose input is 70px tall) */
.model-search-block {
    display: flex;
    gap: 2.5rem;
    align-items: flex-end;
    flex-wrap: wrap;
}
.model-search-block__field {
    flex: 1 1 320px;
    max-width: 560px;
}
.model-search-block__label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 400;
}
/* Search form mirrors cihi.ca's Content Search: full-width bordered
   input with a flush square teal submit button on the right. */
.model-search-block .search-form--main {
    display: flex;
    align-items: stretch;
}
.model-search-block .search-form--main .form-item {
    flex: 1 1 auto;
}
.model-search-block .search-form--main .form-control {
    width: 100%;
    height: 3.25rem;
    line-height: normal;
    padding: 0 1rem;
    border: 1px solid #333;
    border-right: 0;
    border-radius: 0;
    font-size: 1.05rem;
    outline-color: var(--ch-teal-dark);
}
.model-search-block .search-form--main .form-actions {
    flex: 0 0 auto;
    display: flex;
}
.model-search-block .model-search-block__btn {
    width: 3.5rem;
    height: 3.25rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--ch-teal-dark);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.model-search-block .model-search-block__btn:hover,
.model-search-block .model-search-block__btn:focus {
    background: var(--ch-teal-darker, #0f5a63);
}
.model-search-block__filter {
    flex: 0 1 260px;
}
.model-search-block .model-search-block__select {
    width: 100%;
    /* Same height as the search input so the two controls align */
    height: 3.25rem;
    padding: 0 2.25rem 0 0.85rem;
    border: 1px solid #767676;
    border-radius: 2px;
    font-size: 1rem;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") no-repeat right 12px center;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

/* --- Three-column link list (subject areas) --- */
.three-col-list {
    columns: 3;
    column-gap: 3rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.three-col-list li {
    break-inside: avoid;
    margin-bottom: 0.85rem;
    padding-left: 1rem;
    position: relative;
}
.three-col-list li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: var(--ch-dark);
    font-size: 0.8em;
    top: 0.15em;
}
.three-col-list a {
    color: var(--ch-teal-dark);
}
@media (max-width: 991px) {
    .three-col-list { columns: 2; }
}
@media (max-width: 575px) {
    .three-col-list { columns: 1; }
}

/* --- Photo/text rows placeholder image --- */
.photo-placeholder {
    aspect-ratio: 2 / 1;
    width: 100%;
    background: #e9ecef;
    color: #c3c9cf;
    display: flex;
    align-items: center;
    justify-content: center;
}
.photo-text-list .content-row {
    margin-bottom: 1.5rem;
}
/* Real thumbnail: same box and hover treatment as the diagram preview of
   the model pages (.explore-model-block__diagram) — 2:1, cropped to fill,
   teal ring on hover. The link is the box itself. */
.photo-text-list__thumb-link,
.photo-text-list__thumb-link:hover,
.photo-text-list__thumb-link:focus,
.photo-text-list__thumb-link:active {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 2 / 1;
    transition: box-shadow 0.15s ease;
    /* Neutralize the theme's generic "main a:hover { background-color: … }"
       rule, which would paint a solid fill over the whole thumbnail. */
    background: none !important;
}
.photo-text-list__thumb-link:hover {
    box-shadow: 0 0 0 2px var(--ch-teal-dark);
}
.photo-text-list img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    user-select: none;
}

/* Keyboard focus (AODA) for both kinds of thumbnail links: the "Start
   here" cards (SCDM) and the diagram preview of the model pages. The
   ring is drawn inside the edge (negative offset) because the preview
   box clips overflow, and black rather than teal so it stays visible on
   the teal artwork — same convention as the theme's link focus styles.
   !important beats the theme's global outline resets. */
.photo-text-list__thumb-link:focus-visible,
.explore-model-block__diagram-link:focus-visible {
    outline: 3px solid #000 !important;
    outline-offset: -3px;
}
/* Fallback for browsers without :focus-visible support */
@supports not selector(:focus-visible) {
    .photo-text-list__thumb-link:focus,
    .explore-model-block__diagram-link:focus {
        outline: 3px solid #000 !important;
        outline-offset: -3px;
    }
}

/* --- Explore model block (subject area pages) --- */
/* Thumbnail column: 5/12 (col-md-5) from 768px, a quarter of the row on
   wide screens — the block holds one sentence and one button. Bootstrap's
   col-xl is not used because this theme fires it from 992px already. */
@media (min-width: 1200px) {
    .explore-model-block__col-thumb,
    .photo-text-list__col-thumb { flex: 0 0 25%; width: 25%; max-width: 25%; }
    .explore-model-block__col-text,
    .photo-text-list__col-text  { flex: 0 0 75%; width: 75%; max-width: 75%; }
}
/* 2:1 preview box; the block's script sizes the svg with explicit pixel
   dimensions (same mechanism as the full-diagram modal), centred here. */
.explore-model-block__diagram {
    position: relative;
    overflow: hidden;
    aspect-ratio: 2 / 1;
    transition: box-shadow 0.15s ease;
}
.explore-model-block__diagram:hover {
    box-shadow: 0 0 0 2px var(--ch-teal-dark);
}
/* Transparent overlay covering the whole preview: makes the entire box
   a link to the diagram page, and blocks clicks/drag-select on the SVG's
   own entity links and text underneath it. */
.explore-model-block__diagram-link,
.explore-model-block__diagram-link:hover,
.explore-model-block__diagram-link:focus,
.explore-model-block__diagram-link:active {
    position: absolute;
    inset: 0;
    z-index: 1;
    cursor: pointer;
    /* Neutralize the theme's generic "main a:hover { background-color:
       var(--link-bg-color) }" rule — on this borderless, full-box link
       it was painting a solid fill (var(--link-bg-color) resolves to an
       opaque colour here) over the entire diagram preview on hover. */
    background: none !important;
}
.explore-model-block__thumb {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    user-select: none;
}
.explore-model-block__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}
.explore-model-block__cta .fa-chevron-right {
    font-size: 0.8em;
}
.explore-model-block__save {
    margin: 0 0 0.4rem;
}
.explore-model-block__save a {
    color: var(--ch-teal-dark);
    text-decoration: underline;
}
/* Last word + icon never separate across lines */
.explore-model-block__save-tail {
    white-space: nowrap;
}
/* Download icon: same recipe as the glossary external-link icon
   (.terms .external-link__tail::after) but with the FA download glyph.
   inline-block → the link underline does not run under the icon;
   currentColor → white on the hover background; the <i> is
   aria-hidden so assistive tech only reads the link text. */
.explore-model-block__dl-icon::before {
    display: inline-block;
    /* FA Pro "arrow-down-to-bracket", regular (400) weight — the thin
       arrow-into-tray icon from the design */
    font: normal 400 1em/1 "Font Awesome 6 Pro";
    font-size: 0.875em;
    line-height: 1;
    padding-left: 5px;
    padding-right: 2px;
    content: "\e094";
    color: inherit;
    text-decoration: none;
}

/* --- Entity list (subject area pages) --- */
.entity-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.entity-list li {
    margin-bottom: 0.85rem;
    padding-left: 1rem;
    position: relative;
}
.entity-list li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: var(--ch-dark);
    font-size: 0.8em;
    top: 0.15em;
}
.entity-list a {
    color: var(--ch-teal-dark);
}

/* --- How to cite: theme default (beige #f4f3ed, as on cihi.ca).
   The earlier teal override from the wireframe was removed on client
   feedback so the bar matches cihi.ca article pages. --- */


/* --- Full diagram page viewer --- */
.diagram-viewer {
    position: relative;
    border: 2px solid #000;
    background: #fff;
}
.diagram-viewer__canvas {
    overflow: auto;
    height: 75vh;
    cursor: grab;
    background: #fff;
}
.diagram-viewer__canvas.is-dragging {
    cursor: grabbing;
    user-select: none;
}
.diagram-viewer__canvas svg {
    display: block;
    margin: 0 auto; /* centre horizontally when smaller than the canvas */
}
.diagram-viewer__controls {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.diagram-viewer__zoom-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--ch-teal-dark);
    background: #fff;
    color: var(--ch-teal-dark);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.diagram-viewer__zoom-btn:hover {
    background: var(--ch-teal-dark);
    color: #fff;
}

/* Bottom section (Contact us / How to cite) keeps readable width */
.diagram-page-bottom {
    max-width: 46rem;
}

/* --- Entity info block (diagram thumb / appears-in / constraints) --- */
.entity-info-block {
    display: flex;
    gap: 2.5rem;
    flex-wrap: wrap;
    align-items: flex-start;
}
.entity-info-block__col {
    flex: 1 1 200px;
    min-width: 180px;
}
.entity-info-block__thumb {
    flex: 0 1 280px;
}
.entity-info-block__thumb-link {
    display: block;
}
.entity-info-block__thumb-link .photo-placeholder {
    transition: box-shadow 0.15s ease;
}
.entity-info-block__thumb-link:hover .photo-placeholder {
    box-shadow: 0 0 0 2px var(--ch-teal-dark);
}
.entity-info-block__expand {
    margin: 0.6rem 0 0;
}
.entity-info-block__expand a {
    color: var(--ch-teal-dark);
    text-decoration: underline;
}
.entity-info-block__heading {
    font-size: 1.375rem;
    font-weight: 400;
    margin: 0 0 0.75rem;
}
.entity-info-block__subheading {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}
.entity-info-block__list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.entity-info-block__list li {
    margin-bottom: 0.5rem;
}
.entity-info-block__list a {
    color: var(--ch-teal-dark);
    text-decoration: underline;
}
.entity-info-block__keys li {
    margin-bottom: 0.4rem;
}

/* --- Entity data tables (Attributes / Relationships) --- */
/* Wrapper keeps both tables at exactly 100% of the middle column;
   if content is genuinely too wide the table scrolls inside the
   wrapper instead of overlaying the right sidebar */
.entity-data-table-wrap {
    max-width: 100%;
    overflow-x: auto;
}
.entity-data-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}
.entity-data-table th,
.entity-data-table td {
    border: 1px solid #333;
    padding: 0.75rem 1rem;
    text-align: left;
    vertical-align: top;
}
/* Long unbreakable tokens (URLs in notes) must wrap instead of
   widening the table past the middle column. Data cells only —
   header captions may wrap between words, never mid-word. */
.entity-data-table td {
    overflow-wrap: anywhere;
}
.entity-data-table thead th {
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
}
.entity-data-table thead th {
    background: #d9d9d9;
    font-weight: 700;
}
.entity-data-table a {
    color: var(--ch-teal-dark);
}

/* --- Grouped list (categories → members), e.g. Information Model --- */
.grouped-list {
    columns: 2;
    column-gap: 3.5rem;
}
.grouped-list__group {
    break-inside: avoid;
    margin-bottom: 2.5rem;
}
.grouped-list__title {
    font-size: 1.375rem;
    font-weight: 400;
    margin: 0 0 1rem;
}
@media (max-width: 767px) {
    .grouped-list { columns: 1; }
}

/* --- Previous versions (grouped) sub-headings --- */
.prev-versions__subheading {
    font-size: 1rem;
    font-weight: 700;
    margin: 1.5rem 0 0.5rem;
}
.prev-versions__subheading:first-child {
    margin-top: 0;
}

/* --- Data categories grid (CACDI data elements) --- */
.data-categories__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1rem;
}
.data-categories__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ch-teal-dark);
}
.data-categories__swatch {
    width: 16px;
    height: 16px;
    display: inline-block;
}
.data-categories__swatch--filled { background: var(--ch-teal-dark); }
.data-categories__swatch--outline { border: 2px solid var(--ch-teal-dark); }
.data-categories__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.data-categories__tile {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 64px;
    padding: 0.75rem 1rem;
    border: 1px solid var(--ch-teal-dark);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
/* Link colors are pinned with !important — the vendor theme styles
   links (including their :visited state, which DOM specificity checks
   can't even observe) via huge :not() selector chains, and visited
   tiles otherwise render teal-on-teal / maroon. Scoped tightly to the
   category tiles; every state is covered: normal, visited, hover,
   visited-hover. */
#main .data-categories__tile,
#main .data-categories__tile:visited {
    color: var(--ch-teal-dark) !important;
    background: transparent;
}
#main .data-categories__tile:hover,
#main .data-categories__tile:visited:hover {
    background: var(--ch-teal-super-light) !important;
    color: var(--ch-teal-dark) !important;
}
#main .data-categories__tile--filled,
#main .data-categories__tile--filled:visited {
    background: var(--ch-teal-dark) !important;
    color: #fff !important;
    font-weight: 700;
    /* white underline (the theme's :visited rules would tint it) */
    text-decoration: underline !important;
    text-decoration-color: #fff !important;
}
#main .data-categories__tile--filled:hover,
#main .data-categories__tile--filled:visited:hover {
    background: var(--ch-teal-darker, #0f5a63) !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* --- Skeleton header: static main-menu links (no drop-downs) --- */
.ch-main-header--static .main-menu-static {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 2rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.ch-main-header--static .main-menu-static .menu-item {
    margin: 0;
}
#top-fixed-section .ch-main-header--static .main-menu-static a {
    color: #1a1a1a;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
#top-fixed-section .ch-main-header--static .main-menu-static a:hover {
    text-decoration: underline;
    color: #1a1a1a;
    background: transparent;
}

/* --- Skeleton footer: breathing room above/below the content (the old
   footer's intro block used to provide this spacing) --- */
.site-footer.redesign .footer-container {
    padding-top: 2.75rem;
    padding-bottom: 2.5rem;
}
.site-footer.redesign .site-footer__bottom {
    margin-top: 1.5rem;
}

/* --- Footer accessibility strip (white band above the teal footer) --- */
.footer-accessibility-strip {
    background: #fff;
    border-top: 1px solid #e5e5e5;
    padding: 1.1rem 0;
}
.footer-accessibility-strip__inner {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}
/* The cihi.ca icon PNG draws its own teal disc — the wrapper only
   handles layout */
.footer-accessibility-strip__icon {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}
.footer-accessibility-strip__icon img {
    width: 2.75rem;
    height: auto;
}
.footer-accessibility-strip p {
    margin: 0;
    font-size: 1rem;
}
/* Match the accessibility strip link on cihi.ca: #177784 teal,
   underlined (5.24:1 on white — WCAG 1.4.3 pass). Hover and focus
   states mirror cihi.ca's link treatment: hover/active flips to
   white on #006FBE (5.23:1) with a teal outline; keyboard focus
   keeps the teal text and draws a black 2px outline. */
.footer-accessibility-strip a {
    color: #177784;
    text-decoration: underline;
}
.footer-accessibility-strip a:hover,
.footer-accessibility-strip a:active {
    color: #fff;
    background-color: #006FBE;
    outline: 2px solid #177784;
    text-decoration: none;
}
.footer-accessibility-strip a:focus-visible {
    color: #177784;
    background-color: transparent;
    outline: 2px solid #000;
    outline-offset: 1px;
}

/* --- Language switcher: pages without a counterpart show plain text --- */
.language-link--disabled {
    color: inherit;
    text-decoration: none;
    cursor: default;
    opacity: 0.6;
}


/* Quicklink card grid: as many ~200px-min cards per row as the
   column fits (3 wide, 2/1 when narrow) instead of a fixed 3-up —
   words like "Implementation" always get enough width to wrap at
   word boundaries instead of breaking mid-word. Overrides the
   bootstrap col classes that force 33% width. */
.quicklink-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 1rem;
    margin: 0;
}
.quicklink-grid > .colcard {
    width: auto;
    max-width: none;
    flex: none;
    padding: 0;
    margin: 0 !important;
}
/* A lone quicklink must not stretch across the whole column — size
   it exactly like one card in a full 3-up row (a third of the grid
   width minus the two gaps) */
.quicklink-grid > .colcard:only-child {
    max-width: calc((100% - 2rem) / 3);
    min-width: min(200px, 100%);
}

/* --- Quicklink cards: icon ABOVE the text (cihi.ca
   /news-events-and-education layout) — long titles get the card's
   full width instead of clipping beside the icon. Icon size is
   unchanged. --- */
.quicklink-card--row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
}
/* FA glyphs by link type (classes self-contained — the theme CSS ships
   only a small FA subset, so the glyph codepoints are mapped here). */
.quicklink-card__fa-icon {
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    font-style: normal;
    font-size: 2.4rem;
    line-height: 1;
    flex: none;
    color: var(--ch-teal-dark);
}
.quicklink-card--row:hover .quicklink-card__fa-icon {
    color: var(--card-colour-complement, #fff);
}
.quicklink-card__fa-icon--link::before {
    content: "\f05a";   /* fa circle-info */
}
.quicklink-card__fa-icon--document::before {
    content: "\e49a";   /* fa memo-circle-info */
}
/* h3 selector needed: the tile-card rule `.quicklink-card h3`
   (1.25rem) has higher specificity and long words like
   "Implementation" then no longer fit the narrow cards */
.quicklink-card h3.quicklink-card__row-title {
    font-size: 1.125rem;
    font-weight: 400;
    margin: 0;
    flex: none;
    max-width: 100%;
}

/* "Available in English only" notice on FR pages generated from EN models */
.en-only-notice {
    font-style: italic;
    color: #5f6a6b;
    margin: 0.25rem 0 1rem;
}

/* Subject area <-> category cross-link block */
.subject-category-block .subject-category-list {
    list-style: disc;
    padding-left: 1.4em;
    margin: 0.5rem 0 0;
}
.subject-category-block .subject-category-list li {
    margin: 0.35rem 0;
}

/* Keep breadcrumb items on one line */
.breadcrumb .breadcrumb-item {
    white-space: nowrap;
}

/* WCAG 1.4.3 Contrast (Minimum): the base theme's teal link colour
   #14838E measures 4.499:1 on white — just under the 4.5:1 minimum
   for normal text. #14808B is visually identical and measures
   4.68:1. Overrides the --link-color token the theme sets on :root
   (this file loads last, so the later :root declaration wins). */
:root {
    --link-color: #14808B;
    --link-color-rgb: 20, 128, 139;
    /* NOTE: --link-hover-color is deliberately NOT overridden — the
       theme's own :root sets it to #FFF so hovered links render as
       white text on the coloured --link-bg-color background
       (cihi.ca's hover treatment); overriding it to teal made
       hovered link text unreadable. */
}

/* Interactive business glossary table links: same treatment as body
   links (theme token-driven rest colour + the theme's own hover /
   focus / visited rules) instead of the theme's hardcoded blue
   `table tr a { color: #006FBE }`. The site teal #14808B is only
   3.28:1 on the striped rows (--table-heading-bg #d8d8d8), so the
   token is set to the theme's darker teal #125F6A here: 5.13:1 on
   the stripe, 7.32:1 on white (WCAG 1.4.3); visited purple 6.19:1. */
.terms {
    --link-color: #125F6A;
    --link-color-rgb: 18, 95, 106;
}
.terms tr a {
    color: var(--link-color);
}
/* External-link icon in the glossary table. The theme draws it via
   `.external-link::after` at a fixed 14px, sized for cihi.ca's 16px
   body text (14:16). In these 14px, narrow cells we instead draw the
   same glyph (FA arrow-up-right-from-square) on a no-wrap span around
   the link's last word: inline-block, so the link underline does not
   extend under the icon (cihi.ca look), and the no-wrap span keeps the
   icon glued to the last word instead of wrapping onto its own line.
   Scaled with the text to keep cihi.ca's 14:16 proportion. */
.terms a.external-link::after {
    content: none;
}
.terms .external-link__tail {
    white-space: nowrap;
}
.terms .external-link__tail::after {
    display: inline-block;
    font: var(--fa-font-solid);
    font-size: 0.875em;
    line-height: 1;
    padding-left: 5px;
    padding-right: 2px;
    content: "\f08e";
    text-decoration: none;
}


/* --- CACDI landing: "What is the CACDI?" text block with the image --- */
/* From the theme's lg breakpoint (896px) the picture floats to the left and
   all the text wraps around it, like in Word. Below the breakpoint (phones,
   portrait tablets) the picture stacks above the text at its natural size. */
.cacdi-intro__row { display: block; }            /* not the flex grid: a plain block that contains the float */
.cacdi-intro__image { text-align: center; margin-bottom: 1rem; padding: 0 12px; }
.cacdi-intro__image img { max-width: 100%; height: auto; }
.cacdi-intro__text { padding: 0 12px; }
.cacdi-intro .field-item p:last-child { margin-bottom: 0; }
@media (min-width: 896px) {
    .cacdi-intro__row { display: flow-root; }
    .cacdi-intro__image {
        float: left; width: 327px;                /* 315px picture + the 12px left gutter */
        padding: 0 0 0 12px; margin: 0 2.5rem 0.75rem 0;   /* gutter to the text, and to the lines under the picture */
    }
    .cacdi-intro__image img { display: block; width: 100%; height: auto; }
}
@media (max-width: 895.98px) { .cacdi-intro__image img { max-width: 280px; } }