/* =============================================================================
   SB-CaRT Microsite — theme overrides
   =============================================================================
   STRATEGY: DESKTOP-FIRST with a fixed breakpoint scale.
   The base (unqueried) styles ARE the desktop design (Folk mockups, 128px
   gutters). Media queries then either:
     - REDUCE for smaller screens  -> max-width ladder (top of scale downwards)
     - ENHANCE for larger screens  -> min-width (used sparingly)

   Breakpoint scale (do not invent new values — pick from this list):
     min-width: 1600px   XL enhancement (taller hero/card images)
     max-width:  992px   news grid 3 -> 2 columns
     max-width:  959px   tablet: hide top menu + hero graphic, tighter gutters
     min-width:  768px   publications card switches column -> row
     max-width:  640px   mobile: single-column grids, stacked cards
     max-width:  550px   compact quick-exit button

   NOTE: 959px (not 960px) so it never overlaps the min-width:960px rules —
   at exactly 960px only the desktop styles apply.

   Colour tokens (from design spec):
     #1a3c4d primary dark teal   #e05c2a accent orange
     #f5c400 accent yellow       #3a8a8f secondary teal
     #1a1a1a body text           #e0e0e0 card border
   ========================================================================== */


/* =============================================================================
   1. GLOBAL LAYOUT (desktop base)
   ========================================================================== */

.body-container-3 {
    max-width: 1600px;
}

.body-container-2 {
    padding: 0;
}

.page-top-container {
    z-index: 5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    padding: 0 128px;
    position: sticky;
    top: 0;
    max-width: 1920px;
    height: 72px;
    background-color: #fff;
    border-bottom: 1px solid #cdd3d6;
}

#top-menu-container {
    z-index: 5;
    position: sticky;
    width: 100%;
    height: 40px;
    top: 72px; /* sits directly under the 72px page-top bar */
}

#top-menu-container ul > li:first-child > a {
    padding-left: 0;
}

.microsite-nav-bar {
    max-width: 1920px;
    padding: 0 128px;
}

/* Nav underline styling (covers .microsite-nav-bar > ul as well) */
.nav.nav-underline {
    padding-top: 0;
    gap: 8px;
}

.nav.nav-underline .nav-item .nav-link.active {
    border-bottom: 4px solid #104147;
}

.nav.nav-underline .nav-item .nav-link:focus {
    box-shadow: none !important;
}

.main-content-container .content-body {
    padding: 0 64px 0 128px;
}

.main-content-container .content-body .content {
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 10px;
    align-self: stretch;
    margin: 48px 0;
}

.title-container-3 .content-body {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.title-container-3 .content-body > *:not(:first-child) {
    padding: 0 48px;
}

#main-content-container > div > div.title-container {
    display: flex;
    padding: 0 0 32px 0;
    flex-direction: column;
}

.title-container > div > div > ul {
    line-height: 30px;
    margin-bottom: 0;
}


/* =============================================================================
   2. UTILITIES
   ========================================================================== */

.bg-grey {
    background-color: #f2f2f2;
}

.text-teal {
    color: #22272b; /* NOTE: value is charcoal, not teal — rename or retint? */
}

.max-h-200 {
    max-height: 200px;
}


/* =============================================================================
   3. RIGHT MENU (page utilities sidebar)
   ========================================================================== */

.right-menu-container {
    z-index: 2;
    padding: 0 128px 0 0;
    background-color: #fff;
    align-items: start;
}

.right-menu-container .right-menu-buffer {
    padding-top: 210px;
    margin-top: -176px;
}

body > div > div.body-container-3 > div > div.right-menu-container.d-none.d-md-grid.col-md-auto.align-items-start > div > div > div {
    min-width: 220px;
}

.right-menu-container .right-menu-buffer .right-menu .list-group .list-item-1 {
    background-color: #f5f5f5;
    border: none;
    border-bottom: 1px solid #e0e0e0;
    color: #222;
}

.right-menu-container .right-menu-buffer .right-menu .list-group .list-item-1 .label {
    text-decoration: none;
}

.right-menu-container .right-menu-buffer .right-menu .list-group .list-item-1:focus {
    outline: 3px solid #f6844b;
    outline-offset: -2px;
}

.right-menu-container .right-menu-buffer .right-menu .helpful-links .list-item-1 {
    background-color: revert !important;
    border: none;
    border-bottom: 1px solid #e0e0e0;
    color: #222;
}
.btn-banner:focus-visible {
    outline: 3px solid #fff;
    background-color: #cd4b0a;
}
#additional-details-action {
    display: flex;
    align-content: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    outline: 1px solid #495054;
    border-radius: 1px;
    padding: 2px;
    flex: 0 0 auto;
}

.share-actions .list-group-item:last-child {
    border-bottom: none;
}

.share-actions .list-group-item:hover,
.share-actions .list-group-item:focus {
    background-color: #ebebeb;
}

.share-actions .icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
}.card-img-link {
     display: block;
     border: 2px solid transparent;   /* reserved, same width as focus border */
     border-radius: 16px;
     background: 0 0;
 }
.card-img-link:focus-visible {
    outline: 2px solid #f3631b;
    outline-offset: 0;               /* flush against the border, like the button */
    background: 0 0;
    border: 2px solid #f3631b;
}
.card-img-link img {
    display: block;
    width: 100%;
    border-radius: 14px;             /* 16 − 2 border = 14, nests cleanly */
}
/* =============================================================================
   4. HERO CARD (.card-img-1a — dark banner with HowToUse graphic)
   ========================================================================== */

.card-img-1a {
    align-items: flex-start;
    border: 0;
    border-radius: 0;
    height: 600px;
}

.card-img-1a > .card-body,
.card-img-1a > .img-bg {
    flex: 1;
}

.card-img-1a .card-body {
    padding-left: 128px;
    width: 100%;
}

.card-img-1a .img-bg.HowToUseReverse {
    transform: scaleX(-1);
    justify-content: flex-end;
    background-position: right;
    background-image: url(../images/cards/LaptopUser2.png?2);
}

.card-img-5{
    border-radius: 16px;
    padding: 12px;
    margin-top: 30px;
}
#main-content-container > div > div.title-container > div:nth-child(4) > div > div{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-self: stretch;
}
.focus-menu:focus-visible {
        outline: 2px solid #f3631b;
        outline-offset: 0;
        background: 0 0;
        border: 2px solid #f3631b;
        border-bottom: none;
}


/* =============================================================================
   5. EXPLORE GRID (home page cards)
   ========================================================================== */

.explore-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

/* 5th (odd last) card — half width, left aligned */
.explore-grid .card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: calc(50% - 0.75rem);
}

.explore-grid .card-img-2 {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border: none !important;
    overflow: hidden;
}

/* Card body grows to fill space — keeps button pinned to bottom */
.explore-grid .card-img-2 .card-body {
    flex: 1 0 0;
    padding: 1rem 1rem 0.5rem;
}

.explore-grid .card-img-2 .card-title {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: #1a1a1a;
}

.explore-grid .card-img-2 .card-text {
    font-size: 0.9rem;
    color: #333;
}

.explore-grid .card-img-2 .card-footer {
    flex-direction: row;
    align-self: start;
    align-items: flex-start;
    border-top: none;
    background: transparent;
    padding: 0.75rem 1rem 1rem;
}

.explore-grid .card-img-2 .top-img {
    height: 220px;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

.explore-grid .card-img-2 .top-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}


/*!* =============================================================================*/
/*   6. PUBLICATIONS CARD (.card-publication2)*/
/*   Base = stacked column (all sizes); enhanced to a row from 768px up.*/
/*   ========================================================================== *!*/

.card-publication2 {
    display: flex;
    flex-direction: column;
    padding: 24px 0;
    gap: 24px;
}

.card-publication2,
.card-publication2-2 {
    align-self: stretch;
    background: 0 0;
    border: 0;
}
div.twc-custom {
    min-height: 350px;
}
.card-publication2 .card-body {
    display: flex;
    padding: 0;
    flex-direction: column;
    align-items: flex-start;
    font-size: 14px;
    line-height: 24px;
    gap: 24px;
}
@media (min-width: 300px) {
    body > div > div.body-container-2 > div {
        align-items: flex-start;
        border: 0;
        border-radius: 0;
        height: 580px !important;
    }

}
@media (min-width: 360px) {
    body > div > div.body-container-2 > div {
        align-items: flex-start;
        border: 0;
        border-radius: 0;
        height: 600px !important;
    }

}
@media (min-width: 430px) {
    body > div > div.body-container-2 > div {
        align-items: flex-start;
        border: 0;
        border-radius: 0;
        height: 500px !important;
    }

}

@media (min-width: 600px) {
    body > div > div.body-container-2 > div {
        align-items: flex-start;
        border: 0;
        border-radius: 0;
        height: 450px !important;
    }


}


@media (min-width: 768px) {
    .card-publication2 {
        flex-direction: row;
        align-content: center;
        justify-content: flex-start;
        padding: 40px 0;
        gap: 48px;
        border-radius: 0;
    }

    .card-publication2 .card-body {
        padding: 6px 32px;
        flex: 1 0 0;
    }

    .card-publication2 .graphic {
        display: flex;
        overflow: hidden;
        justify-self: flex-start;
        align-self: stretch;
        justify-content: start;
        align-content: center;
        flex: 0 1 30%;
        padding: 0;
        background-color: revert;
        border: none;
    }
        div.twc-custom {
            min-height: 370px;
    }
    body > div > div.body-container-2 > div {
        align-items: flex-start;
        border: 0;
        border-radius: 0;
        height: 310px !important;
    }
    /*body > div > div.body-container-2 > div > div.img-bg.HowToUseReverse {*/
    /*   display: none;*/
    /*}*/
}

@media (min-width: 960px) {
    .main-content-container .title-container.indent {
        display: flex;
        flex-direction: row;
    }

    .main-content-container .title-container.indent .col2 {
        justify-content: start;
    }
    .right-menu-container {
        z-index: 2;
        padding: 0 128px 60px 128px;
        background-color: #fff;
        align-items: start;
    }
    .card-img-1a {
        align-items: flex-start;
        border: 0;
        border-radius: 0;
        height: 410px;
    }
    /*div.twc-custom {*/
    /*    min-height: 300px;*/
    /*}*/
}
.d-custom-flex {
    display: none !important;
}
@media (min-width: 1016px) {
    .navbar-custom-hide {
        display: none !important;
    }
    .d-custom-flex {
        display: flex !important;
    }
    .d-banner-custom{
        display: flex !important;

    }
    body > div > div.body-container-2 > div {
        align-items: flex-start;
        border: 0;
        border-radius: 0;
        height: 370px !important;
    }

}

/* =============================================================================
   7. NEWS & REPORTS GRID
   ========================================================================== */

.news-report-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.news-report-card {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background: #fff;
}

.news-report-card .card-body {
    padding: 1.5rem;
}

.news-report-card .card-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: #1a1a1a;
    margin-bottom: 0.75rem;
}

.news-report-card .card-text {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 1.25rem;
}

.news-report-card .btn-light {
    border: 2px solid #1a3c4d;
    color: #1a3c4d;
    background: transparent;
    font-weight: 600;
    padding: 0.4rem 1.1rem;
}

@media (max-width: 992px) {
    .news-report-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .news-report-grid {
        grid-template-columns: 1fr;
    }
}


/* =============================================================================
   8. CONTACT CARDS
   ========================================================================== */

.contact-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    background: #f2f2f2;
    border-left: 4px solid #1a3c4d;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

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

.contact-card__body {
    flex: 1;
}

.contact-card__body h4 {
    font-weight: 700;
    font-size: 1.1rem;
    color: #1a1a1a;
    margin: 0 0 0.5rem;
}

.contact-card__body p {
    font-size: 0.9rem;
    color: #333;
    margin-bottom: 0.75rem;
}

.contact-card__phone {
    font-size: 0.9rem;
    color: #333;
    margin-bottom: 0.4rem;
}

.contact-card__phone a {
    font-weight: 700;
    color: #1a3c4d;
    text-decoration: underline;
}

.contact-card__link {
    font-weight: 700;
    font-size: 0.9rem;
    color: #1a3c4d;
    text-decoration: underline;
}

/* (Previously declared twice — merged) */
.contact-card__media {
    flex: 0 0 120px;
    width: 120px;
    height: 90px;
    background: #fff;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
#main-content-container > div > div.title-container > div:nth-child(4) > div > div > div > img{
    width: 30%;
}
.contact-card__media img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

@media (max-width: 640px) {
    .contact-card {
        flex-direction: column;
    }

    .contact-card__media {
        width: 100%;
        flex: 0 0 auto;
    }
}


/* =============================================================================
   9. RESPONSIVE LADDER — page-level layout
   Ordered largest to smallest. Each step only declares what CHANGES;
   anything set at 959px still applies at 640px (no need to repeat it).
   ========================================================================== */

/* --- XL screens: taller card images ------------------------------------- */
@media (min-width: 1600px) {
    .explore-grid .card-img-2 .top-img {
        height: 370px;
    }
}

/* --- Tablet and below: simplify chrome, tighten gutters ------------------ */
@media (max-width: 959px) {

    .page-top-container {
        padding: 32px;
    }

    .main-content-container .content-body {
        padding: 0 64px;
    }

    /* Hero card: drop the decorative graphic, centre the text block */
    .card-img-1a .card-body {
        padding-left: 32px;
        width: 80%;
        margin: auto;
    }
}

/* --- Mobile: single column, stacked hero body ---------------------------- */
@media (max-width: 640px) {
    .explore-grid {
        grid-template-columns: 1fr;
    }

    .explore-grid .card:last-child:nth-child(odd) {
        grid-column: auto;
        max-width: 100%;
    }

    /* (Two conflicting card-body rules in the old 640 block — merged,
       later declarations won so this is the effective result) */
    .card-img-1a .card-body {
        display: flex;
        flex-direction: column;
        padding: 24px;
        gap: 28px;
        justify-content: center;
        width: 80%;
        margin: auto;
    }
}

/* --- Small mobile: compact quick-exit button ------------------------------ */
@media (max-width: 550px) {
    .quick-exit-btn {
        font-size: 1em;
        padding: 8px 7px 6px;
    }
    .accordion{
        width: 70% !important;
    }
    #main-content-container > div > div.title-container > div.accordion-item.content > div.card.card-img-4.shadow.brand-light.accordion-header{
        width: 70% !important;

    }
   .card-img-5{
        width: 70% !important;

    }
    #main-content-container > div > div.title-container > div:nth-child(4) > div > div > div > img{
        width: 80%;
    }
    .content > p{
        width: 75%;
    }
}


/* =============================================================================
   10. PRINT — About, Resources, Data/Privacy/Security, Co-design
   Print lays out at ~700px, so the max-width:959px rules are active.
   Must stay LAST in the file so it overrides everything above.
   ========================================================================== */
@media print {

    @page { size: A4; margin: 15mm 12mm; }

    body { background: #fff !important; }

    /* ── Hide screen-only elements ─────────────────────────────────────── */
    #top-menu-container,
    .microsite-nav-bar,
    .right-menu-container,
    .main-content-container .d-md-none,    /* mobile share block */
    .share-actions,
    .quick-exit-btn,
    .page-feedback,
    #page-footer,
    #page-footer-portrait,
    footer,
    .body-container-3 ~ * {                /* everything after the main content = site footer */
        display: none !important;
    }

    /* Logo bar: keep the logo, drop sticky + quick exit */
    .page-top-container {
        position: static !important;
        height: auto;
        padding: 0 0 6mm 0 !important;
        border-bottom: 1px solid #cdd3d6;
    }

    /* ── Reclaim page width ────────────────────────────────────────────── */
    .body-container-3,
    .main-content-container,
    .title-container,
    .title-container .col1 {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Bootstrap .row pulls its columns 12px outwards (negative gutter
       margins). On screen the column padding cancels it out; in print the
       content sits past the page edge and the first letter gets clipped. */
    .body-container-3 > div,
    .body-container-3 .row {
        --bs-gutter-x: 0;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .main-content-container,
    .main-content-container .content-body {
        padding: 0 !important;
        overflow: visible !important;
    }

    /* Flex wrappers -> block. When break-inside:avoid pushes a flex item
       onto the next page, Chrome doesn't move the items after it down, so
       they print on top of each other. Block layout doesn't have this bug. */
    .body-container-3,
    .body-container-3 > div,
    .main-content-container,
    .main-content-container .content-body,
    .title-container,
    #main-content-container > div > div.title-container,
    .title-container .col1,
    .accordion,
    .accordion-item {
        display: block !important;
    }

    /* Block instead of flex so page-break rules actually work */
    .main-content-container .content-body .content {
        display: block;
        margin: 6mm 0;
    }

    .main-content-container .content-body .content.mt-10 {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    #main-content-container > div > div.title-container {
        padding: 0;
    }

    /* ── Headings / text flow ──────────────────────────────────────────── */
    h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }
    p, li          { orphans: 3; widows: 3; }
    hr.section-divider { margin: 6mm 0; }

    /* ── Resources: open all accordions, hide buttons ──────────────────── */
    .accordion-collapse.collapse,
    .accordion-collapse.collapsing {
        display: block !important;
        height: auto !important;
    }

    .card-buttons,
    .card-publication-2a .buttons {
        display: none !important;
    }

    .card-img-4,
    .card-img-5 {
        box-shadow: none !important;
        break-inside: avoid;
        page-break-inside: avoid;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .card-img-4 .image img { max-height: 40mm; object-fit: cover; }

    .card-publication-2a {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .card-publication-2a .graphic img {
        max-width: 40mm;
        height: auto;
    }

    /* Together We Can logo (overrides the 30% nth-child rule) */
    #main-content-container > div > div.title-container > div:nth-child(4) > div > div > div > img {
        width: 50mm;
    }

    /* ── About: contact cards ──────────────────────────────────────────── */
    .contact-card {
        break-inside: avoid;
        page-break-inside: avoid;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Swap "External website link ↗" for the real URL */
    .contact-card__link {
        font-size: 0;
        text-decoration: none;
    }
    .contact-card__link::after {
        content: attr(href);
        font-size: 9pt;
        font-weight: 400;
        word-break: break-all;
    }

    /* Absolute links in body text print their URL (relative ones don't) */
    .content > p a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        word-break: break-all;
    }

    /* ── Co-design: stakeholder table ──────────────────────────────────── */
    .stakeholder-table .hd { break-after: avoid; page-break-after: avoid; }
    .stakeholder-list li   { break-inside: avoid; page-break-inside: avoid; }

    /* ── "Access the SB-CaRT" card (SetNeedSupportNowCard) ───────────────
       Not always a direct child of .content-body (About page nesting), so
       match it anywhere. Its background drops in print, leaving pale text,
       and it overlaps the footer on screen — flatten both.               */
    .main-content-container .content.mb-5 {
        break-inside: avoid;
        page-break-inside: avoid;
        margin: 6mm 0 0 0 !important;
    }

    .main-content-container .content.mb-5 > *,
    .main-content-container .content.mb-5 .card {
        position: static !important;
        transform: none !important;
        margin-bottom: 0 !important;
        box-shadow: none !important;
        background: #fff !important;
        border: 1px solid #cdd3d6 !important;
    }

    .main-content-container .content.mb-5 * {
        color: #1a1a1a !important;
        opacity: 1 !important;
    }
}