/* =========================
   JOIC - Styles (screen)
   ========================= */
.hero {
    width: 99.5vw;
    margin-left: calc(-50vw + 50%);
    background-color: rgba(var(--bs-dark-rgb), 0.1);
    padding: 6rem 0;
    text-align: center;
    color: white;
}

/* Mobile hero padding override */
@media (max-width: 767.98px) {
    .hero {
        padding: 1rem 0;
    }
}


/* Section spacing */
section {
    margin-top: var(--bs-spacing-interval) !important;
    margin-bottom: var(--bs-spacing-interval) !important;
}

.site-notice {
    width: 99.5vw;
    margin-left: calc(-50vw + 50%);
    background-color: var(--bs-primary);
    min-height: 50px;
    height: auto;
    overflow: visible;
    padding: 0.75rem 0;
}

.site-notice-content,
.site-notice-content * {
    color: #fff !important;
}

    .site-notice-content a {
        color: #fff !important;
    }

    .site-notice-content p {
        margin-bottom: 0 !important;
    }

.breadcrumb {
    position: fixed;
    top: 100px;
    left: auto;
    width:100%;
    background: white !important;
    padding-top: 0.5rem;
    padding-bottom:5px;
    z-index: 1001;
}

.mt-50{
    margin-top: 50px;
}

/* Cards */
.card {
    border: none;
    padding: 2rem;
    border-radius: 0;
}

.article-card {
    border: none;
    padding: 0;
    border-radius: 0;
}

.card-250 {
    height: 250px;
}

.card-text {
    margin-bottom: 0.5rem;
    line-height: 1.4;
    letter-spacing: 0;
}

/* Article images */
.article-image {
    width: 100%;
    max-width: 800px;
    max-height: 400px;
    height: auto;
    display: block;
    margin: 0 auto 2rem auto;
    object-fit: cover;
}

article img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1em auto;
}

/* Sidebar rules & chevrons */
.sidebar .nav-item:first-child {
    border-top: 1px solid #dee2e6;
}

.sidebar .nav-item + .nav-item {
    border-top: 1px solid #dee2e6;
}

.sidebar .nav-item:last-child {
    border-bottom: 1px solid #dee2e6;
}

.sidebar .nav-link .chevron {
    transition: transform 0.2s ease-in-out;
}

.sidebar .nav-link.collapsed .chevron {
    transform: rotate(-90deg);
}

.sidebar .chevron {
    font-size: 0.75rem;
}

/* Hide TOC on mobile */
@media (max-width: 991px) {
    .toc-sidebar {
        display: none;
    }
}

/* Hero backgrounds */
.hero-home-bg {
    background: url('/_content/Joic.Web.Shared/images/2x/joic_banner_home-2x.png') center/contain no-repeat;
}

.hero-ind-bg {
    background: url('/_content/Joic.Web.Shared/images/2x/JOIC_Banner_Public-2x.png') center/contain no-repeat;
}

.hero-org-bg {
    background: url('/_content/Joic.Web.Shared/images/2x/JOIC_Banner_Organisations-2x.png') center/contain no-repeat;
}

/* Mobile hero placeholder (optional) */
@media (max-width: 767.98px) {
    .mobile-hero-bg {
        width: 100%;
        padding-top: 56.25%;
        margin-bottom: 20px;
    }
}

/* Desktop bleed tweak (if wrapper used) */
@media (min-width: 768px) {
    .hero-bg {
        margin-top: -4rem;
        margin-bottom: -4rem;
    }
}

/* Branded Pagination */
.pagination {
    --joic-pagination-active-bg: var(--bs-primary, #0056b3);
    --joic-pagination-active-color: #fff;
    --joic-pagination-border: #dee2e6;
    --joic-pagination-hover-bg: #f8f9fa;
    --joic-pagination-hover-color: var(--bs-primary, #0056b3);
    margin-top: 2rem;
    justify-content: center;
}

    .pagination .page-item {
        margin: 0 0.15rem;
    }

    .pagination .page-link {
        color: var(--bs-primary, #0056b3);
        border: 1px solid var(--joic-pagination-border);
        border-radius: 0;
        background: #fff;
        font-weight: 500;
        transition: background 0.2s, color 0.2s;
        min-width: 2.5rem;
        text-align: center;
    }

        .pagination .page-link:hover,
        .pagination .page-link:focus {
            background: var(--joic-pagination-hover-bg);
            color: var(--joic-pagination-hover-color);
            border-color: var(--bs-primary, #0056b3);
            text-decoration: none;
        }

        .pagination .page-item.active .page-link,
        .pagination .page-link[aria-current="page"] {
            background: var(--joic-pagination-active-bg);
            color: var(--joic-pagination-active-color);
            border-color: var(--bs-primary, #0056b3);
            z-index: 2;
        }

    .pagination .page-item.disabled .page-link {
        color: #adb5bd;
        background: #f8f9fa;
        border-color: var(--joic-pagination-border);
        pointer-events: none;
    }

/* Card entrance animation */
@keyframes card-fade-in {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

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

.card-ajax-animate {
    animation: card-fade-in 0.5s cubic-bezier(0.4,0,0.2,1);
}

/* Icons & utility weights */
.download-icon {
    width: 18px;
}

.fw-semisemibold {
    font-weight: 500 !important;
}

/* Markdown tables */
.markdown-content table th,
.markdown-content table td {
    border: 1px solid #ccc;
    padding: 0.5em;
    text-align: left;
    vertical-align: top;
}

/* Accordion brand (screen) */
.accordion-button:not(.collapsed) {
    background: linear-gradient(175deg, #EF9237, var(--bs-primary)) !important;
    color: #fff !important;
}

    .accordion-button:not(.collapsed)::after {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'%3e%3cpath d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    }

.accordion-button {
    font-weight: 600;
    color: var(--bs-secondary);
}

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

/* Highlighted quote */
.highlight-quote {
    border-left: 4px solid var(--bs-primary);
    background-color: var(--bs-tertiary);
    padding: 1rem 1.5rem;
    font-style: italic;
    color: #555;
}

/* Guidance list spacing */
#guidance ol > li, #guidance ul > li {
    margin-bottom: 1em;
}

#guidance ol ol > li,
#guidance ol ul > li,
#guidance ul ul > li,
#guidance ul ol > li {
    margin-bottom: 0;
}

#guidance li > p {
    margin: 0;
}

.accordion-body img {
    max-width: 100%;
    height: auto;
    display: block;
}

.aspect-16-9 {
    position: relative;
    width: 100%;
    overflow: hidden;
}

    .aspect-16-9::before {
        content: "";
        display: block;
        padding-top: 56.25%;
    }

    .aspect-16-9 > iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }


/* =========================
   PRINT STYLES – consolidated
   ========================= */
@media print {
    /* Page margin */
    @page {
        margin: 12mm;
    }

    /* Hide chrome not needed on paper */
    nav[aria-label="breadcrumb"], .breadcrumb,
    .navbar, .toc-sidebar, .sidebar,
    .sticky-top, .sticky-under-header, .sticky-under-header--gap,
    .cookie-banner, .d-print-none, footer,
    /* overlays/popups */
    .modal, .modal-backdrop,
    .offcanvas, .offcanvas-backdrop,
    .toast-container, .show-up-background,
    .overlay, .backdrop {
        display: none !important;
        visibility: hidden !important;
    }

    /* Layout: full width, no floats */
    .container, .container-fluid, .row, [class*="col-"] {
        max-width: 100% !important;
        width: 100% !important;
        float: none !important;
    }

    /* Cards become plain sections */
    .card {
        box-shadow: none !important;
        background: transparent !important;
        border: 0 !important;
        padding: 0 !important;
    }

    /* Title/header: no padding/margins/background */
    header {
        margin: 0 !important;
    }

        header .p-5, header .bg-gradient-soft {
            padding: 0 !important;
            background: transparent !important;
        }

        header h1 {
            margin: 0 0 8px 0 !important;
            padding: 0 !important;
        }

    /* Neutralise full-bleed sections for print (prevents phantom page 1) */
    .hero, .site-notice {
        position: static !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* Ensure accordion bodies render in print */
    #guidanceAccordion .accordion-collapse,
    #guidanceAccordion .accordion-collapse.show,
    #guidanceAccordion .collapse,
    #guidanceAccordion .accordion-collapse.collapsing {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Treat accordion headers as proper H2s in print */
    .accordion-header {
        font-size: 1.8rem !important; /* adjust to taste */
        line-height: 1.25 !important;
        margin: 0 0 6px !important;
    }
        /* Make the button inherit the H2 styling and keep sane spacing */
        .accordion-header .accordion-button {
            font: inherit !important; /* inherit size/line-height */
            font-weight: 700 !important;
            color: #000 !important;
            background: transparent !important;
            border: 0 !important;
            box-shadow: none !important;
            padding: 0.5rem 0 !important; /* breathing room */
        }
            /* Show a black chevron for print */
            .accordion-header .accordion-button::after {
                display: inline-block !important;
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'%3e%3cpath d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
                opacity: 0.9 !important;
            }

    /* Remove borders/shadows from accordion internals, but DO NOT zero button padding elsewhere */
    .accordion,
    .accordion-item,
    .accordion-header,
    /* .accordion-button (intentionally excluded here) */
    .accordion-collapse,
    .accordion-body {
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    /* Make all headings black in print */
    h1, h2, h3, h4, h5, h6,
    .h1, .h2, .h3, .h4, .h5, .h6,
    .markdown-content h1, .markdown-content h2, .markdown-content h3,
    .markdown-content h4, .markdown-content h5, .markdown-content h6 {
        color: #000 !important;
    }
        /* Links inside headings appear black */
        h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
            color: #000 !important;
        }

    /* Global print scaling (tweak to taste) */
    html {
        font-size: 85% !important;
    }

    body {
        line-height: 1.3 !important;
    }

    /* Avoid animations/transforms that can cause phantom first pages */
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        filter: none !important;
        backdrop-filter: none !important;
    }

    .reveal, .reveal-left, .reveal-right {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Fixed/sticky -> static in print */
    .fixed-top, .fixed-bottom, .position-fixed,
    .sticky-top, .sticky-under-header, .sticky-under-header--gap {
        position: static !important;
        top: auto !important;
        bottom: auto !important;
    }

    /* Avoid overflow in print */
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    img, svg, canvas, video, table {
        max-width: 100% !important;
        height: auto !important;
    }

    table {
        margin-bottom: 1.5rem !important;
    }

    /* First element shouldn’t force a new page */
    body > :first-child,
    main.container > :first-child,
    .container > :first-child,
    header:first-of-type,
    .card:first-of-type,
    h1:first-of-type {
        break-before: avoid !important;
        page-break-before: auto !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Nicer pagination */
    h1, h2, h3 {
        page-break-after: avoid;
        break-after: avoid-page;
    }

    .accordion-item, .markdown-content {
        page-break-inside: avoid;
        break-inside: avoid-page;
    }

    /* Defensive overrides for any inline page-breaks */
    [style*="page-break-before"], [style*="break-before"] {
        page-break-before: auto !important;
        break-before: auto !important;
    }

    [style*="page-break-after"], [style*="break-after"] {
        page-break-after: auto !important;
        break-after: auto !important;
    }

    /* Print-only brand header (optional – include markup) */
    .print-brand {
        display: block !important;
        margin: 0 0 8mm 0 !important;
        text-align: left !important;
        page-break-after: avoid !important;
        break-after: avoid-page !important;
    }

        .print-brand img {
            max-width: 42mm !important;
            height: auto !important;
        }
    /* Let sections flow naturally between pages */
    .accordion-item,
    .accordion-body,
    .markdown-content {
        page-break-inside: auto !important;
        break-inside: auto !important;
    }

    /* Don’t force headings to keep with following content */
    h2, h3,
    .accordion-header {
        page-break-after: auto !important;
        break-after: auto !important;
    }

    /* Optional: slightly tighter spacing to reduce accidental bumps */
    .accordion-header {
        margin-bottom: 4px !important;
    }

    .accordion-body {
        margin-top: 6px !important;
    }
    blockquote.gradient-border {
        /* ensure it actually prints */
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        /* use a real border for print */
        border: 2px solid #000 !important; /* or var(--bs-primary) */
        background: transparent !important; /* ignore any bg-based effect */
        padding: 1rem 1.25rem !important;
        margin: 0 0 1rem 0 !important;
    }

        /* if your gradient effect uses a ::before/::after overlay, hide it in print */
        blockquote.gradient-border::before,
        blockquote.gradient-border::after {
            display: none !important;
            content: none !important;
        }
}

/* =========================
   Sidebar scroll
   ========================= */
.toc-scroll {
    max-height: calc(100vh - 170px); /* adjust based on your header height */
    overflow-y: auto;
    padding-right: 8px; /* keeps scrollbar off text */
}

    /* Optional: nicer looking scrollbars */
    .toc-scroll::-webkit-scrollbar {
        width: 6px;
    }

    .toc-scroll::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 3px;
    }