:root {
    --primary: #8BA624;
    --primary-dark: #294C37;
    --primary-light: #659357;
    --primary-extra-light: #b8c698;
    --bs-primary: #3e6549;

    --secondary: #1ca9e1;
    --secondary-light: #ffdc6c;
    --secondary-dark: #b08d35;
    
    --orange: #f8971d;
    --orange-dark: #f88d0a;
    
    --yellow: #ffdc6c;
    --green: #006837;
    --light-green: #6ab12c;
    --green-text: #39b54a;

    --accent1: #33461e;
    --accent2: #33461e;
    --accent3: #33461e;
    --accent4: #33461e;
    --accent5: #33461e;
    --accent6: #33461e;
    --accent7: #33461e;
    --tab-background: #b8c698;

    --body-text-color: #19150e;
    --body-font: adobe-jenson-pro, serif;
    --header-font: adobe-jenson-pro, serif;
    --body-font-weight: 400;
}

/****** Programme ************/

#programme {}

/* Height */
::-webkit-scrollbar {
    height: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.nav.programme-tabs,
.programme-tabs {
    width: 100%;
    border-bottom: none;
    margin: 0;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    align-items: stretch;
}

.programme-tabs .nav-item {
    flex: 1 0 120px;
    border: none;
    gap: 1rem;
    border-radius: 0;
}

.programme-tabs .nav-link {
    border: none;
    padding: 2rem 0.5rem;
    text-decoration: none;
    text-align: center;
    font-size: 14px !important;
    color: #FFF;
    border-radius: 0;
    /* margin-right: 4px; */
    height: 100%;
    transition: .3s all;

    border-right: 1px solid #b8c698;
}

/* .programme-tabs .nav-item:last-child .nav-link {
    margin-right: 0px;
} */

.nav-link-day {
    text-transform: uppercase;
    font-weight: 700 !important;
    transition: .3s all;
}

.programme-tabs .nav-link:hover {
    color: var(--secondary-light);
}

.programme-tabs .nav-link:focus {
    outline: none;
}

.programme-tabs .nav-item:first-child .nav-link {
    background-color: var(--accent1);
}

.programme-tabs .nav-item:nth-child(2) .nav-link {
    background-color: var(--accent2);
}

.programme-tabs .nav-item:nth-child(3) .nav-link {
    background-color: var(--accent3);
}

.programme-tabs .nav-item:nth-child(4) .nav-link {
    background-color: var(--accent4);
}

.programme-tabs .nav-item:nth-child(5) .nav-link {
    background-color: var(--accent5);
}

.programme-tabs .nav-item:nth-child(6) .nav-link {
    background-color: var(--accent6);
}

.programme-tabs .nav-item:nth-child(7) .nav-link {
    background-color: var(--accent7);
}

.programme-tabs .nav-link:hover {
    /* background-color: var(--tab-background) !important; */
    border-radius: 0;
    color: var(--secondary-light);
}
.programme-tabs .nav-link.active {
    background-color: var(--tab-background) !important;
    border-radius: 0;
    color: var(--primary-dark);
}

/* 
.programme-tabs .nav-item:first-child .nav-link:hover .nav-link-day,
.programme-tabs .nav-item:first-child .nav-link.active .nav-link-day {
    color: var(--accent1);
}

.programme-tabs .nav-item:nth-child(2) .nav-link:hover .nav-link-day,
.programme-tabs .nav-item:nth-child(2) .nav-link.active .nav-link-day {
    color: var(--accent2);
}

.programme-tabs .nav-item:nth-child(3) .nav-link:hover .nav-link-day,
.programme-tabs .nav-item:nth-child(3) .nav-link.active .nav-link-day {
    color: var(--accent3);
}

.programme-tabs .nav-item:nth-child(4) .nav-link:hover .nav-link-day,
.programme-tabs .nav-item:nth-child(4) .nav-link.active .nav-link-day {
    color: var(--accent4);
}

.programme-tabs .nav-item:nth-child(5) .nav-link:hover .nav-link-day,
.programme-tabs .nav-item:nth-child(5) .nav-link.active .nav-link-day {
    color: var(--accent5);
}

.programme-tabs .nav-item:nth-child(6) .nav-link:hover .nav-link-day,
.programme-tabs .nav-item:nth-child(6) .nav-link.active .nav-link-day {
    color: var(--accent6);
}

.programme-tabs .nav-item:nth-child(7) .nav-link:hover .nav-link-day,
.programme-tabs .nav-item:nth-child(7) .nav-link.active .nav-link-day {
    color: var(--accent7);
} */

#programmeTabContent {
    background-color: var(--tab-background);
    padding: 1.5rem;
}

#programmeTabContent .content-wrap {
    background-color: #FFF;
    padding: 1.5rem 4rem;
}

#programmeTabContent .content-wrap .content-row {
    padding: 1.25rem 0;
    border-bottom: 2px solid var(--tab-background);
    display: flex;
    gap: 2rem;
    align-items: center;
    letter-spacing: 0.5px;
}

/* Rows that hold a full-width block (the concurrent-session grids in .col-12):
   allow the row to wrap so the .col-12 drops onto its own full-width line
   BELOW the icon (.col-2) and datetime (.col-10), instead of overflowing
   off-screen to the right. column-gap is set to 0 so .col-2 + .col-10 (which
   already total 100%) still sit together on the top line. */
#programmeTabContent .content-wrap .content-row:has(> .col-12) {
    flex-wrap: wrap;
    column-gap: 0;
}

#programmeTabContent .content-wrap .content-row .image-wrap {
    padding: 1rem;
    width: 15%;
}

@media (max-width: 991px) {
    #programmeTabContent .content-wrap .content-row .image-wrap {
        padding: 0.5rem;
        width: 25%;
    }
}

@media (max-width: 767px) {
    #programmeTabContent .content-wrap .content-row .image-wrap {
        padding: 0.5rem;
        width: 30%;
    }
}

#programmeTabContent .content-wrap .content-row .image-wrap img {
    width: 100%;
}

.programme-icons {
    filter: saturate(70%);
}
@media (max-width: 767px) {
    .programme-icons {
        min-width: 40px;
        margin-top: 20px;
    }
}

#programmeTabContent .content-wrap .content-row>div:last-child {
    flex: 1;
    padding-left: 1rem;
}

#programmeTabContent .content-wrap .datetime {
    font-weight: 600;
    color: #444;
}
#programmeTabContent .content-wrap .datetime > i {
    color: #444;
}

#programmeTabContent .content-wrap .venue {
    font-weight: 500;
    color: var(--orange);
    font-size: 1.25rem;
    letter-spacing: normal;
}
#programmeTabContent .content-wrap .venue > i {
    color: var(--orange);
}

.session-header * {
    line-height: 1 !important;
}

.session-header .venue {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--secondary-light) !important;
    letter-spacing: normal;
}
.session-header .venue > i {
    color: var(--secondary-light) !important;
}

#programmeTabContent .content-wrap .title {
    font-size: 1.75rem;
    font-weight: 500;
    color: var(--primary);
    text-transform: uppercase;
    font-kerning: auto;
    /* letter-spacing: -0.2px; */
    line-height: 1.2;
}

#programmeTabContent .content-wrap .speaker {
    font-weight: bold;
}

#programmeTabContent .content-wrap .affiliation {
    font-style: italic;
}

#programmeTabContent .content-wrap .note {
    font-size: 1rem;
    letter-spacing: normal;
    color: #666;
}

#programmeTabContent .content-wrap .line-up {
    margin-top: .5rem;
    padding-left: 0;
    margin-left: 1.5rem;
}

#programmeTabContent .content-wrap .line-up li {
    margin-bottom: .5rem;
    line-height: 1.25rem;
}

#programmeTabContent .content-wrap .content-row:last-child {
    border-bottom: none;
}
@media (max-width: 1199px) {
    #programmeTabContent .content-wrap {
        padding: 1.25rem;
    }
}

@media (max-width: 767px) {
    #programmeTabContent .content-wrap {
        padding: .75rem;
    }
}

@media (max-width: 576px) {
    #programmeTabContent .content-wrap {
        padding: .5rem;
    }

    #programmeTabContent .content-wrap .content-row {
        /* padding: 1.5rem 1rem; */
        padding: 0.5rem 0.5rem 1rem;
        /* flex-direction: column; */
        gap: 0rem;
        align-items: flex-start;
    }

    #programmeTabContent .content-wrap .content-row>div:nth-child(2) {
        padding-top: 1rem;
    }

    #programmeTabContent .content-wrap .content-row .image-wrap {
        padding: 1rem;
        width: 25%;
    }

    #programmeTabContent .content-wrap .content-row .image-wrap img {
        width: 100%;
    }

    #programmeTabContent .content-wrap .datetime {
        font-size: 1rem;
    }

    #programmeTabContent .content-wrap .content-row .title {
        font-size: 1.25rem;
    }
    #programmeTabContent .content-wrap .content-row .venue {
        font-size: 1rem;
        line-height: normal;
    }
}

.topic-title {
    margin-bottom: 0;
    color: var(--secondary-dark);
    line-height: 1;
}

.details {
    padding: .25rem 0 1rem;
}

.concurrent-sessions {
    margin-top: 0.5rem;
    letter-spacing: normal;
    line-height: normal;
}
.concurrent-sessions .col {
    border-left: 1px solid #FFF;
    background-color: #e8e8e8; 
}
@media (max-width: 767px) {
    .concurrent-sessions .col {
        border-bottom: 2px solid #FFF;
    }
}
.concurrent-sessions .col:nth-child(even) {
    background-color: #f4f4f4 ; 
}
.concurrent-sessions .session-header {
    padding: 0.5rem;
    margin: 0;
    text-align: center;
    color: #FFF;
    border-bottom: 1px solid var(--primary);
    background-color: var(--primary-light); 
}
@media (max-width: 767px) {
    .concurrent-sessions .session-header {
        text-align: left;
    }
}
.concurrent-sessions .col:nth-child(even) .session-header {
    background-color: #99b95d; 
}

.session-header h5 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: .5rem;
}

.concurrent-sessions .info {
    padding: 1.25rem 0.75rem 1.25rem;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--primary-light);
}

.concurrent-sessions .info:last-child {
    border-bottom: none;
}

/* ===== Aligned concurrent-session timetable (md and up) =====
   The row becomes a grid; each column is a subgrid sharing the parent's rows,
   so every column's .session-header and each 15-min time slot line up and
   auto-size to the tallest content — no more hard-coded min-heights.
   --session-rows (on .concurrent-sessions) and --info-span (on each .info)
   are emitted by PHP from the session durations. */
@media (min-width: 768px) {
    .concurrent-sessions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));   /* md: 2 columns */
    }

    .concurrent-sessions .session-col {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span var(--session-rows);

        min-width: 100%;
    }

    /* The body box "disappears" so its .info talks become rows of the column
       subgrid; each talk then spans its duration in 15-min units. */
    .concurrent-sessions .session-body {
        display: contents !important;
    }

    .concurrent-sessions .info {
        grid-row: span var(--info-span, 1);

        min-width: 100%;
    }

    /* Header is only a toggle on mobile — keep it inert on the grid. */
    .concurrent-sessions .session-header {
        pointer-events: none;
    }
}

@media (min-width: 992px) {
    .concurrent-sessions {
        grid-template-columns: repeat(3, minmax(0, 1fr));   /* lg: 3 columns */
    }
}

@media (min-width: 1200px) {
    .concurrent-sessions {
        grid-template-columns: repeat(6, minmax(0, 1fr));   /* xl: 6 columns */
    }
}

/* ===== Mobile (< md): each column becomes a collapsible accordion ===== */
@media (max-width: 767px) {
    .concurrent-sessions .session-header {
        cursor: pointer;
        position: relative;
    }
    .concurrent-sessions .session-header::after {
        content: "\25be";               /* ▾ */
        position: absolute;
        right: .75rem;
        top: .5rem;
        transition: transform .2s ease;
    }
    .concurrent-sessions .session-header[aria-expanded="true"]::after {
        transform: rotate(180deg);
    }
}

.concurrent-sessions .time {
    color: var(--primary);
    font-weight: 600;
    font-size: 15px;
}

.concurrent-sessions .duration {
    color: var(--primary);
    font-style: italic;
    font-weight: 600;
    font-size: 15px;
}
.concurrent-sessions .topic,
.concurrent-plenary .topic {
    font-size: 20px;
    font-weight: bold;
    color: #000;
    /* line-height: normal; */
}

.concurrent-sessions .small.sponsor {
    display: block;
    font-size: 16px;
    font-style: italic;
    color: var(--secondary-light);
    line-height: 16px;
}

.tiny-logo {
    max-height: 40px;
    max-width: 90%;
    margin: 0 auto;
    display: block;

    margin-bottom: 10px auto;
}
.tiny-logo2 {
    max-width: 90%;
    display: inline-block;
    margin: 10px 0;
}

.concurrent-plenary {
    margin-top: 0.5rem;
    letter-spacing: normal;
    line-height: normal;
    color: #fff;
    text-align: center;
}

.concurrent-plenary .info {
    display: flex;
    flex-direction: column;
    padding: 1.25rem 0.75rem 1.25rem;

    background-color: var(--primary-light); 
}
@media (max-width: 767px) {
    .concurrent-plenary .info {}
}
.concurrent-plenary .info:nth-child(even) {
    background-color: #99b95d; 
}

/****** End of Programme ************/



/****** Posters ************/

.table-posters {}

.table-posters .header-highlight {
    background-color: var(--primary-light);
}

.table-posters th,
.table-posters td {
    padding: 1rem !important;
}

.table-posters .col-poster-num {
    width: 10%;
    min-width: auto !important;
}

.table-posters .col-poster-title {
    width: 50%;
    min-width: auto !important;
}

.table-posters .col-poster-presenter {
    width: 20%;
    min-width: auto !important;
}

.table-posters .col-poster-affiliation {
    width: 20%;
    min-width: auto !important;
}

/* ===== Mobile (< md): stack each poster row vertically with subheaders ===== */
@media (max-width: 767px) {
    .table-posters,
    .table-posters thead,
    .table-posters tbody,
    .table-posters tr,
    .table-posters th,
    .table-posters td {
        display: block;
        width: 100% !important;
    }

    /* Keep the theme header (row 1) as the section title; drop the column-label row */
    .table-posters thead tr:nth-of-type(2) {
        display: none;
    }

    /* Each poster row becomes a card */
    /* .table-posters tbody tr {
        padding: 0.75rem 1rem;
    } */

    .table-posters tbody th,
    .table-posters tbody td {
        border: none;
    }

    .table-posters tbody th {
        text-align: center !important;
        margin-bottom: 0 !important;
        padding: .5rem 0 !important;
    }
    .table-posters tbody td {
        text-align: left !important;
        padding: 0 1rem 1rem !important
    }

    /* Poster number sits on top, bold */
    .table-posters tbody th.col-poster-num {
        font-weight: 700;
        margin-bottom: 0.25rem;
    }

    /* Labelled cells get a bold "Presenter:" / "Affiliation:" subheader */
    .table-posters tbody td[data-label]::before {
        content: attr(data-label) ": ";
        font-weight: 700;
    }
}

/****** End of Posters ************/