/*
===============================================================================================================================
Put your custom CSS in this file.
===============================================================================================================================
*/

/* CSS to better visually match Docsify pages within Canvas LMS (uncomment to use) */

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400;1,700&display=swap');

body .markdown-section {
    font-family: "Lato Extended","Lato","Helvetica Neue",Arial,sans-serif;
    /* font-family: "SFMono-Regular", "Menlo", "Consolas,Monaco", "Liberation Mono" , "Lucida Console", "monospace"; */
    line-height: 1.4;
    font-size: 16px;
}

@media (min-width: 1100px) {
    body .markdown-section:has(.team-directory) {
        max-width: 1120px;
    }
}

/* Fix: <strong> text inside Docsify alert/callout blocks rendering as white */
.markdown-section blockquote strong,
.markdown-section blockquote b {
    color: inherit !important;
}

/* Some alert plugins wrap content in an .alert/.callout container */
.markdown-section .alert strong,
.markdown-section .alert b,
.markdown-section .callout strong,
.markdown-section .callout b,
.markdown-section .markdown-alert strong,
.markdown-section .markdown-alert b {
    color: inherit !important;
}

/* Keep Docsify flexible-alert text and links readable on tinted alert backgrounds. */
.markdown-section .alert,
.markdown-section .callout,
.markdown-section .markdown-alert {
    color: #1f2933 !important;
}

.markdown-section .alert a:not(.button),
.markdown-section .callout a:not(.button),
.markdown-section .markdown-alert a:not(.button),
.markdown-section blockquote a:not(.button) {
    color: #002145 !important;
    font-weight: 700;
    text-decoration: underline !important;
    text-underline-offset: 0.12em;
}

.markdown-section .alert .title,
.markdown-section .alert-title,
.markdown-section .markdown-alert-title {
    color: #2d2359 !important;
}

.markdown-section .alert.warning .title,
.markdown-section .alert-title.warning {
    color: #7a1f1f !important;
}

.markdown-section .alert.note .title,
.markdown-section .alert-title.note {
    color: #002145 !important;
}

.markdown-section .alert.tip .title,
.markdown-section .alert-title.tip {
    color: #175c2f !important;
}

.markdown-section details.running-example {
    margin: 1.25rem 0 1.75rem;
    padding: 0.9rem 1rem;
    border: 2px solid rgba(0, 33, 69, 0.35);
    border-left: 0.45rem solid #0374B5;
    border-radius: 8px;
    background: #f3f8fc;
    box-shadow: 0 0.2rem 0.8rem rgba(0, 33, 69, 0.08);
}

.markdown-section details.running-example summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #002145;
    font-weight: 700;
    cursor: pointer;
}

.markdown-section details.running-example summary::before {
    content: "Example";
    flex: 0 0 auto;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    color: #fff;
    font-size: 0.78rem;
    line-height: 1.35;
    background: #0374B5;
}

.markdown-section details.running-example[open] summary {
    margin-bottom: 0.75rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid rgba(0, 33, 69, 0.14);
}

.markdown-section details.running-example img {
    display: block;
    max-width: min(100%, 760px);
    margin: 0.75rem auto 1rem;
    border: 1px solid rgba(94, 106, 113, 0.25);
    border-radius: 6px;
}

/* High-visibility spotlight for Milestone 1 template access section */
.markdown-section h2#accessing-the-project-template {
    position: relative;
    margin-top: 2rem;
    margin-bottom: 0.8rem;
    padding: 1rem 1.15rem 1rem 3.25rem;
    border: 2px solid rgba(3, 116, 181, 0.55);
    border-left: 0.5rem solid #0374B5;
    border-radius: 10px;
    color: #002145;
    background: linear-gradient(110deg, #e8f5ff 0%, #f7fbff 48%, #e8f5ff 100%);
    box-shadow: 0 0.45rem 1.15rem rgba(0, 33, 69, 0.18);
}

.markdown-section h2#accessing-the-project-template::before {
    content: "🚀";
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
}

.markdown-section h2#accessing-the-project-template + p {
    margin-top: 0;
    margin-bottom: 1.15rem;
    padding: 1.1rem 1.15rem;
    border: 2px dashed rgba(3, 116, 181, 0.55);
    border-radius: 10px;
    background: #f5fbff;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85), 0 0.35rem 0.95rem rgba(0, 33, 69, 0.12);
}

.markdown-section h2#accessing-the-project-template + p a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.4rem 0;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    color: #fff !important;
    font-weight: 700;
    text-decoration: none !important;
    background: linear-gradient(135deg, #0374B5 0%, #0a8fd9 100%);
    box-shadow: 0 0.18rem 0.65rem rgba(3, 116, 181, 0.45);
}

.markdown-section h2#accessing-the-project-template + p a::after {
    content: "↗";
    font-size: 0.95em;
}

.markdown-section h2#accessing-the-project-template + p + p img {
    display: block;
    margin: 0.5rem auto 1.5rem;
    border: 2px solid rgba(3, 116, 181, 0.45);
    border-radius: 10px;
    box-shadow: 0 0.55rem 1.3rem rgba(0, 33, 69, 0.25);
}

.markdown-section .team-directory {
    display: grid;
    gap: 0;
    margin: 1rem 0 2rem;
    width: 100%;
    border: 1px solid rgba(94, 106, 113, 0.25);
    border-radius: 8px;
    overflow: hidden;
}

.markdown-section .team-row {
    display: grid;
    grid-template-columns: minmax(220px, 1.15fr) minmax(135px, 0.85fr) minmax(165px, 1fr) minmax(0, 1.4fr);
    gap: 1rem;
    align-items: center;
    padding: 0.85rem 1rem;
    border-top: 1px solid rgba(94, 106, 113, 0.2);
    min-width: 0;
}

.markdown-section .team-directory-single .team-row {
    grid-template-columns: 96px minmax(160px, 0.6fr) minmax(260px, 1.4fr);
}

.markdown-section .team-directory-compact .team-row {
    grid-template-columns: minmax(150px, 1fr) minmax(140px, 1fr) minmax(120px, 0.8fr) minmax(180px, 1.2fr);
}

.markdown-section .team-directory-workshops .team-row {
    grid-template-columns: minmax(80px, 0.55fr) minmax(140px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr);
}

.markdown-section .team-directory-workshops .team-row:not(.team-header) {
    align-items: center;
}

.markdown-section .team-directory-workshops .team-row:not(.team-header) > p:nth-of-type(3) {
    color: #002145;
    font-weight: 700;
}

.markdown-section .team-row:first-child {
    border-top: 0;
}

.markdown-section .team-header {
    color: #002145;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0;
    background: rgba(0, 33, 69, 0.06);
}

.markdown-section .team-person {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 0.75rem;
    align-items: center;
    min-width: 0;
}

.markdown-section .team-person h3 {
    margin: 0 0 0.15rem;
    font-size: 1rem;
}

.markdown-section .team-row p {
    margin: 0.2rem 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.markdown-section .team-person p {
    color: #5E6A71;
    font-size: 0.9rem;
}

.markdown-section .team-section-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.markdown-section .team-section-tags span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 1.65rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    color: #002145;
    font-size: 0.85rem;
    font-weight: 700;
    background: rgba(0, 33, 69, 0.08);
    border: 1px solid rgba(0, 33, 69, 0.18);
}

.markdown-section .team-workshops {
    display: grid;
    gap: 0.35rem;
}

.markdown-section .team-workshops p:last-child {
    color: #5E6A71;
    font-size: 0.9rem;
}

.markdown-section .team-workshop-roles {
    gap: 0.55rem;
}

.markdown-section .team-role {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.5rem;
    align-items: center;
    padding: 0.5rem 0.65rem;
    border: 1px solid rgba(94, 106, 113, 0.22);
    border-left-width: 0.35rem;
    border-radius: 8px;
    background: #fff;
}

.markdown-section .team-role-primary {
    border-left-color: #002145;
    background: #f2f6fb;
}

.markdown-section .team-role-support {
    border-left-color: #2f6f4e;
    background: #f4faf6;
}

.markdown-section .team-role-section {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    min-height: 1.65rem;
    padding: 0.1rem 0.45rem;
    border-radius: 6px;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.2;
    background: #002145;
}

.markdown-section .team-role-support .team-role-section {
    background: #2f6f4e;
}

.markdown-section .team-role-label {
    flex: 1 1 6.5rem;
    min-width: 0;
    color: #1f2933;
    font-size: 0.88rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.markdown-section .team-photo {
    width: 96px;
    height: 96px;
    border-radius: 8px;
    object-fit: cover;
    background: #f1f3f5;
}

.markdown-section .team-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5E6A71;
    font-size: 0.78rem;
    line-height: 1.15;
    text-align: center;
    border: 1px dashed rgba(94, 106, 113, 0.6);
}

@media (max-width: 1020px) {
    .markdown-section .team-header {
        display: none;
    }

    .markdown-section .team-row,
    .markdown-section .team-directory-single .team-row,
    .markdown-section .team-directory-compact .team-row,
    .markdown-section .team-directory-workshops .team-row {
        grid-template-columns: 1fr;
        gap: 0.65rem;
        align-items: start;
    }

    .markdown-section .team-directory {
        border: 0;
        gap: 0.75rem;
        overflow: visible;
    }

    .markdown-section .team-row {
        border: 1px solid rgba(94, 106, 113, 0.25);
        border-radius: 8px;
    }

    .markdown-section .team-row:first-child {
        border-top: 1px solid rgba(94, 106, 113, 0.25);
    }

    .markdown-section .team-directory:not(.team-directory-single):not(.team-directory-compact):not(.team-directory-workshops) .team-row:not(.team-header) > p:nth-of-type(1)::before {
        content: "Contact: ";
        font-weight: 700;
    }

    .markdown-section .team-directory:not(.team-directory-single):not(.team-directory-compact):not(.team-directory-workshops) .team-row:not(.team-header) > .team-workshops::before {
        content: "Workshop roles: ";
        font-weight: 700;
    }

    .markdown-section .team-directory:not(.team-directory-single):not(.team-directory-compact):not(.team-directory-workshops) .team-row:not(.team-header) > p:nth-of-type(2)::before {
        content: "About: ";
        font-weight: 700;
    }

    .markdown-section .team-directory-workshops .team-row:not(.team-header) > p:nth-of-type(1)::before {
        content: "Workshop: ";
        font-weight: 700;
    }

    .markdown-section .team-directory-workshops .team-row:not(.team-header) > p:nth-of-type(2)::before {
        content: "Time: ";
        font-weight: 700;
    }

    .markdown-section .team-directory-workshops .team-row:not(.team-header) > p:nth-of-type(3)::before {
        content: "Primary TA: ";
        font-weight: 700;
    }

    .markdown-section .team-directory-workshops .team-row:not(.team-header) > p:nth-of-type(4)::before {
        content: "Support TA: ";
        font-weight: 700;
    }

    .markdown-section .team-directory-compact .team-row:not(.team-header) > p:nth-of-type(1)::before {
        content: "Day and time: ";
        font-weight: 700;
    }

    .markdown-section .team-directory-compact .team-row:not(.team-header) > p:nth-of-type(2)::before {
        content: "Location: ";
        font-weight: 700;
    }

    .markdown-section .team-directory-compact .team-row:not(.team-header) > p:nth-of-type(3)::before {
        content: "TA: ";
        font-weight: 700;
    }

    .markdown-section .team-directory-compact .team-row:not(.team-header) > p:nth-of-type(4)::before {
        content: "Sections: ";
        font-weight: 700;
    }

    .markdown-section .team-directory-compact .team-row:not(.team-header) > .team-workshops::before {
        content: "Related workshops: ";
        font-weight: 700;
    }
}

@media (max-width: 560px) {
    body .markdown-section:has(.team-directory) {
        padding-left: 14px;
        padding-right: 14px;
    }

    .markdown-section .team-person {
        grid-template-columns: 80px 1fr;
    }

    .markdown-section .team-photo {
        width: 80px;
        height: 80px;
    }
}

@media (prefers-color-scheme: dark) {
    .markdown-section .team-directory {
        border-color: rgba(178, 180, 180, 0.35);
    }

    .markdown-section .team-row {
        border-top-color: rgba(178, 180, 180, 0.25);
    }

    .markdown-section .team-header {
        color: #6FB1E7;
        background: rgba(111, 177, 231, 0.1);
    }

    .markdown-section .team-person p,
    .markdown-section .team-workshops p:last-child,
    .markdown-section .team-role-label,
    .markdown-section .team-photo-placeholder {
        color: #B2B4B4;
    }

    .markdown-section .team-section-tags span {
        color: #D7E9FA;
        background: rgba(111, 177, 231, 0.14);
        border-color: rgba(111, 177, 231, 0.35);
    }

    .markdown-section .team-directory-workshops .team-row:not(.team-header) > p:nth-of-type(3) {
        color: #D7E9FA;
    }

    .markdown-section .team-role {
        border-color: rgba(178, 180, 180, 0.28);
        background: #151b22;
    }

    .markdown-section .team-role-primary {
        border-left-color: #6FB1E7;
    }

    .markdown-section .team-role-support {
        border-left-color: #8ED1A6;
    }

    .markdown-section .team-role-section {
        color: #061018;
        background: #6FB1E7;
    }

    .markdown-section .team-role-support .team-role-section {
        background: #8ED1A6;
    }

    .markdown-section .team-photo,
    .markdown-section .team-photo-placeholder {
        background: #20262c;
    }

    .markdown-section details.running-example {
        color: #D7E9FA;
        border-color: rgba(111, 177, 231, 0.35);
        border-left-color: #6FB1E7;
        background: #1a232c;
        box-shadow: 0 0.2rem 0.8rem rgba(0, 0, 0, 0.35);
    }

    .markdown-section details.running-example summary {
        color: #D7E9FA;
    }

    .markdown-section details.running-example[open] summary {
        border-bottom-color: rgba(178, 180, 180, 0.3);
    }

    .markdown-section details.running-example img {
        border-color: rgba(178, 180, 180, 0.35);
    }

    .markdown-section h2#accessing-the-project-template {
        color: #D7E9FA;
        border-color: rgba(111, 177, 231, 0.6);
        border-left-color: #6FB1E7;
        background: linear-gradient(110deg, #15212b 0%, #1b2a36 48%, #15212b 100%);
        box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.45);
    }

    .markdown-section h2#accessing-the-project-template + p {
        border-color: rgba(111, 177, 231, 0.55);
        background: #182430;
        box-shadow: inset 0 0 0 1px rgba(111, 177, 231, 0.25), 0 0.45rem 1rem rgba(0, 0, 0, 0.35);
        color: #D7E9FA;
    }

    .markdown-section h2#accessing-the-project-template + p a {
        color: #061018 !important;
        background: linear-gradient(135deg, #6FB1E7 0%, #97c9ef 100%);
        box-shadow: 0 0.2rem 0.75rem rgba(111, 177, 231, 0.45);
    }

    .markdown-section h2#accessing-the-project-template + p + p img {
        border-color: rgba(111, 177, 231, 0.6);
        box-shadow: 0 0.55rem 1.3rem rgba(0, 0, 0, 0.5);
    }
}


:root {
    /* UBC brand colors: primary blue and supporting accents */
    --link-color: #002145!important;
    --link-text-decoration: none!important;
    --link-text-decoration--hover: underline!important;

    --sidebar-name-color: #002145!important;
    --sidebar-nav-link-color: #5E6A71!important; /* UBC grey; darker for accessible contrast on light backgrounds */
    --sidebar-nav-link-color--active: #002145!important;
    --sidebar-nav-link-border-color--active: #002145!important;

    --sidebar-nav-pagelink-background--active:
        no-repeat 0px center / 5px 6px
        linear-gradient(225deg, transparent 2.75px, #002145 2.75px 4.25px, transparent 4.25px),
        no-repeat 5px center / 5px 6px
        linear-gradient(135deg, transparent 2.75px, #002145 2.75px 4.25px, transparent 4.25px)!important;
    --sidebar-nav-pagelink-background--collapse:
        no-repeat 2px calc(50% - 2.5px) / 6px 5px
        linear-gradient(45deg, transparent 2.75px, #002145 2.75px 4.25px, transparent 4px),
        no-repeat 2px calc(50% + 2.5px) / 6px 5px
        linear-gradient(135deg, transparent 2.75px, #002145 2.75px 4.25px, transparent 4px)!important;
    --sidebar-nav-pagelink-background--loaded:
        no-repeat 0px center / 5px 6px
        linear-gradient(225deg, transparent 2.75px, #002145 2.75px 4.25px, transparent 4.25px),
        no-repeat 5px center / 5px 6px
        linear-gradient(135deg, transparent 2.75px, #002145 2.75px 4.25px, transparent 4.25px)!important;

    --navbar-root-color: #5E6A71!important;
    --navbar-root-color--active: #002145!important;

    --blockquote-border-color: #757b7f!important;

    --pagination-title-color: #002145!important;
}


@media (prefers-color-scheme: dark) {
:root {

    /* Dark-mode UBC palette: lighter blue for contrast on dark backgrounds */
    --link-color: #6FB1E7!important;
    --link-text-decoration: none!important;
    --link-text-decoration--hover: underline!important;

    --sidebar-name-color: #6FB1E7!important;
    --sidebar-nav-link-color: #B2B4B4!important;
    --sidebar-nav-link-color--active: #6FB1E7!important;
    --sidebar-nav-link-border-color--active: #6FB1E7!important;

    --sidebar-nav-pagelink-background--active:
        no-repeat 0px center / 5px 6px linear-gradient(225deg, transparent 2.75px, #6FB1E7 2.75px 4.25px, transparent 4.25px), no-repeat 5px center / 5px 6px linear-gradient(135deg, transparent 2.75px, #6FB1E7 2.75px 4.25px, transparent 4.25px)!important;
    --sidebar-nav-pagelink-background--collapse:
        no-repeat 2px calc(50% - 2.5px) / 6px 5px linear-gradient(45deg, transparent 2.75px, #6FB1E7 2.75px 4.25px, transparent 4px), no-repeat 2px calc(50% + 2.5px) / 6px 5px linear-gradient(135deg, transparent 2.75px, #6FB1E7 2.75px 4.25px, transparent 4px)!important;
    --sidebar-nav-pagelink-background--loaded:
        no-repeat 0px center / 5px 6px linear-gradient(225deg, transparent 2.75px, #6FB1E7 2.75px 4.25px, transparent 4.25px), no-repeat 5px center / 5px 6px linear-gradient(135deg, transparent 2.75px, #6FB1E7 2.75px 4.25px, transparent 4.25px)!important;

    --navbar-root-color: #B2B4B4!important;
    --navbar-root-color--active: #6FB1E7!important;

    --blockquote-border-color: #757B7F!important;

    --pagination-title-color: #6FB1E7!important;
    }
}


/* Link colors to match visual styling of Moodle LMS (uncomment to use) */
/*
:root {
    --link-color: #0F6CBF!important;

    --sidebar-name-color: #0F6CBF!important;
    --sidebar-nav-link-color--active: #0F6CBF!important;
    --sidebar-nav-link-border-color--active: #0F6CBF!important;

    --sidebar-nav-pagelink-background--active:
        no-repeat 0px center / 5px 6px
        linear-gradient(225deg, transparent 2.75px, #0F6CBF 2.75px 4.25px, transparent 4.25px),
        no-repeat 5px center / 5px 6px
        linear-gradient(135deg, transparent 2.75px, #0F6CBF 2.75px 4.25px, transparent 4.25px)!important;
    --sidebar-nav-pagelink-background--collapse:
        no-repeat 2px calc(50% - 2.5px) / 6px 5px
        linear-gradient(45deg, transparent 2.75px, #0F6CBF 2.75px 4.25px, transparent 4px),
        no-repeat 2px calc(50% + 2.5px) / 6px 5px
        linear-gradient(135deg, transparent 2.75px, #0F6CBF 2.75px 4.25px, transparent 4px)!important;
    --sidebar-nav-pagelink-background--loaded:
        no-repeat 0px center / 5px 6px
        linear-gradient(225deg, transparent 2.75px, #0F6CBF 2.75px 4.25px, transparent 4.25px),
        no-repeat 5px center / 5px 6px
        linear-gradient(135deg, transparent 2.75px, #0F6CBF 2.75px 4.25px, transparent 4.25px)!important;
    --navbar-root-color--active: #0F6CBF!important;

    --blockquote-border-color: #0F6CBF!important;

    --pagination-title-color: #0F6CBF!important;
}
*/

/* Link colors to match visual styling of Sakai LMS (uncomment to use) */
/*
:root {
    --link-color: #0B1660!important;

    --sidebar-name-color: #0B1660!important;
    --sidebar-nav-link-color--active: #0B1660!important;
    --sidebar-nav-link-border-color--active: #0B1660!important;

    --sidebar-nav-pagelink-background--active:
        no-repeat 0px center / 5px 6px
        linear-gradient(225deg, transparent 2.75px, #0B1660 2.75px 4.25px, transparent 4.25px),
        no-repeat 5px center / 5px 6px
        linear-gradient(135deg, transparent 2.75px, #0B1660 2.75px 4.25px, transparent 4.25px)!important;
    --sidebar-nav-pagelink-background--collapse:
        no-repeat 2px calc(50% - 2.5px) / 6px 5px
        linear-gradient(45deg, transparent 2.75px, #0B1660 2.75px 4.25px, transparent 4px),
        no-repeat 2px calc(50% + 2.5px) / 6px 5px
        linear-gradient(135deg, transparent 2.75px, #0B1660 2.75px 4.25px, transparent 4px)!important;
    --sidebar-nav-pagelink-background--loaded:
        no-repeat 0px center / 5px 6px
        linear-gradient(225deg, transparent 2.75px, #0B1660 2.75px 4.25px, transparent 4.25px),
        no-repeat 5px center / 5px 6px
        linear-gradient(135deg, transparent 2.75px, #0B1660 2.75px 4.25px, transparent 4.25px)!important;

    --navbar-root-color--active: #0B1660!important;
    --navbar-root-color--active: #0B1660!important;

    --blockquote-border-color: #0B1660!important;
    
    --pagination-title-color: #0B1660!important;
} */


/* CSS to better visually match Docsify pages within Sakai LMS (uncomment to use) */
/*
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap');

body .markdown-section {
    font-family: "Open Sans",sans-serif;
    line-height: 1.3;
    font-size: 14px;
}