/*!
 * ML in PL Jekyll Theme
 * Main CSS file
 */

/* Wider column gutters, matching the legacy Bootstrap 3 spacing.
   Bootstrap 5 drives gutters from --bs-gutter-x (split as padding on each
   column, with the negative row margin derived automatically), so this also
   covers what used to be the manual nested-row margin fix. */
.row {
    --bs-gutter-x: 30px;
}

@media (min-width: 767px) {
    .row {
        --bs-gutter-x: 60px;
    }
}

/* Restore the wider side margins the Bootstrap 3 layout had. Bootstrap 5 uses
   a narrower container gutter and a larger max-width, which pushed content
   closer to the screen edges; this brings back the old breathing room for
   every .container (sections, nav, header, footer). */
.container {
    padding-left: 15px;
    padding-right: 15px;
}

@media (min-width: 767px) {
    .container {
        padding-left: 30px;
        padding-right: 30px;
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1170px;
    }
}

/* This adds 5 column grid to bootstrap 3 */
.col-xs-1of5,
.col-sm-1of5,
.col-md-1of5,
.col-lg-1of5 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-1of5 {
    width: 20%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-1of5 {
        width: 20%;
        float: left;
    }

    .col-xs-1of5,
    .col-sm-1of5,
    .col-md-1of5,
    .col-lg-1of5 {
        padding-right: 30px;
        padding-left: 30px;
    }
}

@media (min-width: 992px) {
    .col-md-1of5 {
        width: 20%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-1of5 {
        width: 20%;
        float: left;
    }
}

/* Navbar height at the hero (un-collapsed): 20+20 padding + 40 logo + 1 border */
:root {
    --nav-h: 81px;
}

/* In-flow block that reserves the fixed navbar's height on every page. */
.nav-spacer {
    height: var(--nav-h);
}

/* Homepage header styles live in css/header/base.css (shell) and
   css/header/<id>.css (per-variant visuals). */

.page-heading {
    font-weight: bold; 
    font-size: 34px;
}

@media(min-width:767px) {
    .page-heading {
        font-size: 48px;
    }
}

.logo {
    font-family: 'Poppins', sans-serif;
}

.main-name {
    font-weight: 700;
    text-transform: none;
    letter-spacing: 1px;
}

.sub-name{
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0px;
}

.superscript{
    font-size: 0.8em;
    position: relative;
    top: 0.15em;
    vertical-align: super;
    color: #E7322A;
    line-height: 0;
}

.emph {
    color: #E7322A;
}

.big-text {
    font-size: 2em; 
    text-transform: uppercase;
}

.uppercase {
    text-transform: uppercase;
}

.nowrap {
    white-space: nowrap;
}

.spacer {
    width: 100%;
    flex-shrink: 0;
    height: 7.5rem; /* 120px; sized for the default 16px root */
}

.standard-border {
    border: 1px solid #010101;
}

body {
    width: 100%;
    height: 100%;
    font-family: 'Roboto', sans-serif;
    color: #010101;
    background-color: #FFFFFF;
}

html {
    width: 100%;
    height: 100%;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 25px;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.5;
}

p, ul, ol, table {
    margin: 0 0 25px;
    font-size: 16px;
    line-height: 1.5;
}

@media(max-width:766px) {
    h1, h2, h3, h4, h5, h6 {
        line-height: 1.4;
    }

    h1 {
        font-size: 30px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 20px;
    }
}

@media(min-width:767px) {
    p, ul, ol, table{
        margin: 0 0 35px;
        font-size: 20px;
        line-height: 1.6;
    }

    h1, h2, h3, h4, h5, h6 {
        margin: 0 0 35px;
    }
}

/* Accordion */
.accordion {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.accordion > summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 15px;
    padding: 12px 20px;
    cursor: pointer;
    list-style: none;
    border: 1px solid #E7322A;
    border-radius: 6px;
    color: #E7322A;
    background-color: transparent;
    transition: all .3s ease-in-out;
}

.accordion > summary:hover,
.accordion > summary:focus {
    outline: 0;
    color: #FFFFFF;
    background-color: #E7322A;
}

.accordion > summary::-webkit-details-marker {
    display: none;
}

.accordion > summary > h3 {
    display: inline;
    margin: 0;
    font-size: 18px;
    color: inherit;
}

.accordion > summary::after {
    content: "\f078";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
    color: inherit;
    transition: transform 0.2s ease;
}

.accordion[open] > summary::after {
    transform: rotate(180deg);
}

.accordion > ul {
    margin: 0;
}

a {
    color: #E7322A;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

a:hover,
a:focus {
    /* text-decoration: none; */
    color: #E7322A;
}

.light {
    font-weight: 400;
}

.bold {
    font-weight: 700;
}

ol { 
    counter-reset: item;
}

ol > li { 
    display: block;
    padding-left: 0.5em;
}

ol > li:before { 
    content: counters(item, ".") ". "; 
    counter-increment: item;
    content: counters(item, ".") ". ";
    left: -2.5em;
    position: relative;
    width: 0;
    display: inline-block; 
}

ol > li > ol {
    margin-bottom: 25px;
}

ol > li > ol > li > ol > li:before {
    content: counter(item, lower-latin) ". ";
}

.letters-ol > ol > li:before {
    content: counter(item, upper-latin) ". ";
}

.letters-ol > ol > li > ol > li:before {
    content: counter(item, lower-latin) ". ";
}

.letters-ol > ol > li > ol > li > ol > li:before {
    content: counter(item, lower-roman) ". ";
}

.navbar-custom {
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255,255,255,.3);
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    background-color: #FFFFFF;
}

.navbar-custom .navbar-brand {
    font-weight: 700;
    display: flex;
    align-items: center;
    height: auto;
    /* Center the 40px logo against the 50px nav-link row: (50 - 40) / 2. */
    padding-top: 5px;
    padding-bottom: 5px;
}

.navbar-logo {
    height: 40px;
    width: auto;
}

.navbar-custom .navbar-brand:focus {
    outline: 0;
}

.navbar-custom .navbar-brand, .navbar-custom .navbar-toggler {
    font-size: 18px;
    color: #010101;
}

.navbar-custom .navbar-toggler {
    margin-top: 0;
    margin-bottom: 0;
    padding: 15px 15px;
    line-height: 20px;
    border: 0;
}

.navbar-custom .navbar-toggler:focus {
    box-shadow: none;
}

.navbar-custom .navbar-brand, .navbar-custom .navbar-toggler:focus,
.navbar-custom .navbar-brand, .navbar-custom .navbar-toggler:active {
    outline: 0;
}

.navbar-custom a {
    color: #010101;
}

.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active > a,
.navbar-custom .nav .nav-link.active {
    outline: none;
    background-color: #E7322A;
    color: #FFFFFF;
}

.navbar-custom .nav > li {
    margin: 0 4px;
}

.navbar-custom .nav li a {
    padding: 12px 18px;
    border-radius: 8px;
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}

.navbar {
    padding: 20px 0;
    border-bottom: 0;
    letter-spacing: 1px;
    background: 0 0;
    -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
    -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
    transition: background .5s ease-in-out,padding .5s ease-in-out;
}

.top-nav-collapse {
    background-color: #FFFFFF;
    padding: 8px 0;
}

.navbar-main-collapse {
    background: #FFFFFF;
}

.navbar-nav, .nav-dropdown-content {
    font-size: 14px;
}

/* Dropdown icon */
.nav-dropdown > a::after {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-family: "Font Awesome 6 Free"; 
    font-weight: 900; 
    content: "\f107";
    margin-left: 8px;
}

.nav-dropdown-content > li > a {
    text-align: left;
    padding-left: 30px;
    display: block;
}

.nav-dropdown-content > .nav-dropdown > .nav-dropdown-content {
    display: none;
}

.nav-dropdown-content > .nav-dropdown > .nav-dropdown-content > li > a {
    padding-left: 60px;
}

.nav-dropdown:hover > .nav-dropdown-content, .nav-dropdown:focus > .nav-dropdown-content {
    display: block;
}

/* Fix for bootstrap limited navbar height */
.fixed-top .navbar-collapse {
    max-height: 700px;
}

/* For hover support on mobile */
@media(hover: hover) and (pointer: fine) {
    .nav-dropdown:hover > .nav-dropdown-content {
        display: block;
    }
}

@media(min-width:767px) {
    .navbar-main-collapse {
        background: none !important;
    }

    .nav-dropdown-content {
        min-width: 220px;
        position: absolute;
        background-color: #FFFFFF;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }

    .nav-dropdown-content{
        display: none;
    }

    .nav-dropdown-content > li > a {
        padding: 10px 15px;
    }

    .nav-dropdown-content > .nav-dropdown > .nav-dropdown-content > li > a {
        padding: 10px 30px;
    }
}

.intro {
    width: 100%;
    padding: 0;
    mask: linear-gradient(rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.15) 60px, black 100px, black 100%);
    text-align: center;
    color: #010101;
    background-color: #FFFFFF;
    background-size: cover;
    position: relative;
}

.intro-full {
    display: flex;
    align-items: center;
    min-height: 100vh;
}

.intro .intro-body {
    width: 100%;
    background: radial-gradient(farthest-side at 50% 75%, #FFFFFF 50%, rgba(255,255,255,0) 100%);
    position: relative;
}

.page-intro {
    padding: 50px 0 0;
    text-align: center;
}

/* Fix for bootstrap non-wrapping buttons */
.btn {
    white-space: normal;
}

.btn-small {
    font-size: 0.5em;
    padding: 3px 6px;
}

.btn-circle {
    width: 70px;
    height: 70px;
    margin-top: 15px;
    padding: 12px 16px;
    border: 2px solid #010101;
    border-radius: 100%;
    font-size: 30px;
    color: #010101;
    background: 0 0;
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}

.btn-circle:hover,
.btn-circle:focus {
    outline: 0;
    color: #010101;
}

.btn-circle i.animated {
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
}

.btn-circle:hover i.animated {
    -webkit-animation-name: pulse;
    -moz-animation-name: pulse;
    -webkit-animation-duration: 1.5s;
    -moz-animation-duration: 1.5s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
}

@-webkit-keyframes pulse {    
    0 {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-moz-keyframes pulse {    
    0 {
        -moz-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -moz-transform: scale(1.2);
        transform: scale(1.2);
    }

    100% {
        -moz-transform: scale(1);
        transform: scale(1);
    }
}

.content-section {
    padding-top: 95px;
    text-align: justify;
}

/* Events */
#events,
#supported-events,
#conference {
    --event-radius: 0.5em;
}

.event-card {
    margin-bottom: 40px;
    text-align: center;
    transition: transform .3s ease-in-out;
}

.event-card:hover {
    transform: translateY(-8px);
}

.event-card-image {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: var(--event-radius);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
    transition: box-shadow .3s ease-in-out;
}

.event-card:hover .event-card-image {
    box-shadow: 0 14px 34px rgba(0, 0, 0, .16);
}

.event-card-image img {
    display: block;
    width: 100%;
    height: auto;
}

.event-card-featured .event-card-image {
    box-shadow: 0 12px 34px rgba(0, 0, 0, .14);
}

.event-live-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-image: linear-gradient(135deg, #E7322A, #B31F18);
    box-shadow: 0 0 0 0 rgba(231, 50, 42, .7);
    animation: event-live-pulse 1.8s infinite;
}

@keyframes event-live-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(231, 50, 42, .6); }
    70%  { box-shadow: 0 0 0 10px rgba(231, 50, 42, 0); }
    100% { box-shadow: 0 0 0 0 rgba(231, 50, 42, 0); }
}

.event-card-title {
    margin: 18px 0 4px;
    font-size: 20px;
    text-transform: none;
    color: #010101;
}

.event-card-featured .event-card-title {
    font-size: 24px;
}

.event-card-label {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #E7322A;
}

.events-more-state {
    display: none;
}

/* Button row: hidden on desktop, shown on mobile */
.events-show-more-row {
    display: none;
}

.events-more-state ~ .events-show-more-row .events-more-trigger:before {
    content: 'Show all events';
}

.events-more-state:checked ~ .events-show-more-row .events-more-trigger:before {
    content: 'Show less';
}

@media(max-width:766px) {
    /* Hide the 4th+ past card until expanded */
    .events-past > div:nth-child(n+4) {
        display: none;
    }

    .events-more-state:checked ~ .events-past > div:nth-child(n+4) {
        display: block;
    }

    .events-show-more-row {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    .event-card,
    .event-card:hover { transition: none; transform: none; }
    .event-live-badge { animation: none; }
}

#map {
    width: 100%;
    height: 200px;
    margin-top: 100px;
}

@media(min-width:767px) {
    .content-section {
        padding-top: 140px;
    }

    #map {
        height: 400px;
        margin-top: 250px;
    }
}

.btn {
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out; 
    vertical-align: bottom;
}

.btn-default {
    border: 1px solid #E7322A;
    color: #E7322A;
    background-color: transparent;
    border-radius: 6px;
}

.btn-default:hover,
.btn-default:focus {
    border: 1px solid #E7322A;
    outline: 0;
    color: #FFFFFF;
    background-color: #E7322A;
}

@media(max-width:767px) {
    .feature {
        margin-bottom: 30px;
    }
}

/* Join us */
.join-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    text-align: center;
}

.join-text {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
}

footer {
    display: flex;
    flex-direction: column;
    gap: 25px;
    padding: 2em;
}

footer .footer-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: color-mix(in srgb, #010101 92%, #FFFFFF);
    color: #FFFFFF;
    border-radius: 30px;
    padding: 50px 40px 40px;
}

footer .footer-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

footer .footer-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

footer .footer-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 8px;
    row-gap: 4px;
}

footer .footer-item:not(:last-child) {
    display: inline-flex;
    column-gap: 8px;
}

footer .footer-item:not(:last-child)::after {
    content: "\00b7";
}

@media (max-width: 600px) {
    footer .footer-item:not(:last-child)::after {
        content: none;
    }

    footer .footer-line {
        flex-direction: column;
    }
}

footer .footer-info p {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
}

footer .footer-copyright {
    text-align: center;
}

footer .footer-copyright p {
    margin: 0;
    font-size: 13px;
    color: #888;
}

footer a {
    color: inherit;
    text-decoration: underline;
}

footer .btn {
    background-color: #FFFFFF;
    text-decoration: none;
}

footer .btn:hover,
footer .btn:focus {
    color: #FFFFFF;
    background-color: #E7322A;
}

footer .footer-contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 60px;
}

footer .footer-contact-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

footer .footer-heading {
    margin: 0;
    font-size: 16px;
    letter-spacing: 1px;
}

footer .footer-social-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

footer .footer-social-buttons .btn {
    width: 56px;
    height: 56px;
    padding: 0;
    line-height: 56px;
    font-size: 24px;
    text-align: center;
}

/* ::-moz-selection {
    text-shadow: none;
    background: #fcfcfc;
    background: rgba(255,255,255,.2);
}

::selection {
    text-shadow: none;
    background: #fcfcfc;
    background: rgba(255,255,255,.2);
} */

img::selection {
    background: 0 0;
}

img::-moz-selection {
    background: 0 0;
}

body {
    webkit-tap-highlight-color: rgba(255,255,255,.2);
}

/* Some classes for images in about page */
.width-100 {
    width: 100%;
}

.width-50 {
    width: 49%;
}

.width-max-300px {
    max-width: 300px;
}

.width-max-350px {
    max-width: 350px;
}

.width-max-400px {
    max-width: 400px;
}

/* Some classes for lists of people, sponsors etc.*/
.sponsor-logo{
    margin: 20px 30px;
    display: block;
}

.d-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
}

.d-inline-block {
    display: inline-block;
}

.text-align-left {
    text-align: left;
}

.mt-5 {
    margin-top: 3rem !important;
}

.mt-2 {
    margin-top: 0.5rem !important;
}

.people-grid {
    width: 100%; 
    display: flex; 
    flex-wrap: wrap; 
    align-items: baseline;
    justify-content: center;
}

.person-with-bio {
    margin-top: 20px;
    margin-bottom: 20px;
}

@media(min-width:767px) {
    .person-with-bio .col-sm-4, .person-with-bio .col-sm-8 {
        padding-right: 0;
    }
}

.photo {
    border: 1px solid #010101;
}

.group-photo {
    position: relative;
}

.group-photo img {
    display: block;
    border-radius: 20px;
}

.group-photo-hover {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .3s ease-in-out;
}

.group-photo:hover .group-photo-hover {
    opacity: 1;
}

.person-photo {
    border-radius: 50%;
    border: 1px solid #010101;
    margin-bottom: 1em;
    aspect-ratio: 1/1;
    object-fit: cover;
}


.person .person-photo, .person .person-photo-wrapper img {
    transition: all 0.5s ease-in-out;
    filter: grayscale(75%);
}

.person:hover .person-photo, 
.person:hover .person-photo-wrapper img {
    filter: none;
}


.person-photo-wrapper {
    display: inline-block;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid #010101;
    margin-bottom: 1em;
    background: #FFFFFF;
    position: relative;
}

.person-photo-wrapper div{
    position: relative;
}

.person-photo-wrapper div img{
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
}


.person .person-photo-wrapper div:after {
    transition: all 0.5s ease-in-out;
    opacity: 1;
    position: absolute;
    content:"";
    height:100%;
    width:100%;
    top:0;
    left:0;
    background: linear-gradient(140deg, rgba(231,50,42,0) 25%,rgba(231,50,42,0.5) 100%);
}

.person:hover .person-photo-wrapper div:after {
    opacity: 0;
}


.person-name {
    text-align: center; 
    margin-bottom: 0.2em
}

.person-title {
    font-size: 12px; 
    text-align: center; 
    margin-bottom: 0.4em
}

.person-comment{
    font-size: 18px; 
    text-align: center; 
    margin-bottom: 0.4em
}

.person-photo-with-social {
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.person-social-120, .person-social-140, .person-social-160 {
    font-size: 20px;
}

.person-photo-with-social .person-social-120 a i,
.person-photo-with-social .person-social-140 a i, 
.person-photo-with-social .person-social-160 a i {
    position: absolute;
    background: #E7322A;
    border-radius: 50%;
    padding: 8px;
    color: white !important;
    width: 35px;
    height: 35px;
}

.person-photo-with-social .person-social-160 a i {
    bottom: 20px;
    right: 5px;
}

.person-photo-with-social .person-social-140 a:nth-child(1) i {
    bottom: 13px;
    right: 25px;
}

.person-photo-with-social .person-social-140 a:nth-child(2) i {
    bottom: 50px;
    right: 0px;
}

.person-photo-with-social .person-social-120 a:nth-child(1) i {
    bottom: 16px;
    right: 18px;
}

.person-photo-with-social .person-social-120 a:nth-child(2) i {
    bottom: 55px;
    right: -5px;
}

/* Read more */
.read-more-state {
    display: none;
}

.read-more-target {
    opacity: 0;
    max-height: 0;
    font-size: 0;
    transition: .25s ease;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
    opacity: 1;
    font-size: inherit;
    max-height: 999em;
}

.read-more-state ~ .read-more-trigger:before {
    content: 'Show more';
}

.read-more-state:checked ~ .read-more-trigger:before {
    content: 'Show less';
}

.read-more-trigger{
    margin-top: -1.5em;
}

/* Helpers and misc */

.list-item-icon {
    color: #E7322A;
    left: -2.5em;
    position: relative;
    margin-right: -2.5em;
    width: 2.5em;
    text-align: center;
    padding-right: 1em;
}

/*!
 * ML in PL Jekyll Theme - Header shell (variant-agnostic)
 *
 * Layout common to every header variant: the full-height hero band, the
 * visual/caption/arrow stack, the caption grid and the accent word. Each
 * variant styles only its own visual inside #header-visual (see the sibling
 * css/header/<id>.css files). The --nav-h token lives in main.css.
 */

/* The hero fills exactly the viewport left below the reserved nav space, so it
   starts where the nav ends and never forces the page to scroll. */
#header {
    min-height: calc(100vh - var(--nav-h));
}

/* Stack the three pieces (visual / caption / arrow) with gaps only between
   them; the group is vertically centered in the remaining space. */
.header-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1.09375rem, 4vh, 1.875rem); /* 17.5px–30px; sized for the default 16px root */
}

.header-caption-row {
    align-self: stretch; /* full width so the caption's grid columns resolve */
    margin: 0;
}

.header-caption {
    margin-top: 0;
    margin-bottom: 0; /* leave left/right for Bootstrap's col offsets */
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.015em;
    font-size: 1.625rem; /* 26px; sized for the default 16px root */
    text-wrap: balance;
    text-transform: none; /* opt out of the global heading uppercasing */
}

@media (min-width: 767px) {
    .header-caption {
        font-size: 1.875rem; /* 30px; narrow caption column wraps, so keep it from towering */
    }
}

.header-arrow {
    margin-top: 0; /* spacing comes from the stack gap, not btn-circle's margin */
}

/* The accented pun word — one serif italic, brand-coloured. */
.header-accent {
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 1.05em;
    color: #E7322A;
    white-space: nowrap;
}

/* Generic mount box a variant renders its visual into. */
.header-visual {
    display: flex;
    justify-content: center;
    width: 100%;
    min-height: 0; /* allow the visual to shrink within the flex column */
}

/*!
 * ML in PL Jekyll Theme - Header variant: "fully connected"
 *
 * Styles the fully connected MLP rendered by js/header/mlp.js. Only
 * targets this variant's own markup (.header-net and its nodes/edges); the
 * shared header shell lives in css/header/base.css.
 */

/* The SVG carries intrinsic 920x420 dimensions, so bounding it by both width
   and height scales it down preserving aspect ratio (like an image), keeping
   the whole stack within the available band. */
.header-net {
    width: auto;
    height: auto;
    max-width: min(920px, 96vw);
    max-height: 40vh;
    overflow: visible;
}

.header-net .edge {
    stroke: #ded5d4;
    stroke-width: 1;
    transition: stroke .5s ease, stroke-width .5s ease;
}

.header-net .edge.hot {
    stroke: #E7322A;
    stroke-width: 1.6;
}

.header-net .node {
    fill: #c9bdbc;
    transition: fill .45s ease;
}

.header-net .node.hot {
    fill: #E7322A;
}

.header-net .node.io {
    fill: #FFFFFF;
    stroke: #E7322A;
    stroke-width: 1.5;
}

/* Draw-in on mount (js adds .animate to .header-visual). */
@keyframes header-mlp-drawin {
    from { opacity: 0; }
    to { opacity: 1; }
}

.header-visual.animate .header-net .edge { animation: header-mlp-drawin .9s ease both; }
.header-visual.animate .header-net .node { animation: header-mlp-drawin .6s ease both; }

@media (prefers-reduced-motion: reduce) {
    .header-visual.animate .header-net .edge,
    .header-visual.animate .header-net .node { animation: none; }
}

/*!
 * ML in PL Jekyll Theme - Header variant: "Attend"
 *
 * Styles the participants x events attention matrix rendered by
 * js/header/attention.js. Only targets this variant's own markup
 * (.header-attn cells and labels); the shared
 * header shell lives in css/header/base.css.
 */

/* The SVG carries an intrinsic size, so bounding it by both width and height
   scales it down preserving aspect ratio (like an image). */
.header-attn {
    width: auto;
    height: auto;
    max-width: min(746px, 94vw);
    max-height: 40vh;
    overflow: visible;
}

.header-attn .cell {
    fill: #E7322A;
    stroke: rgba(1, 1, 1, 0.06);
    stroke-width: 1;
}

/* Function-notation labels: Q/K symbol applied to the name. */
.header-attn .label {
    font-family: 'Poppins', sans-serif;
    fill: #010101;
}

.header-attn .sym {
    font-weight: 600;
    font-size: 16px;
    fill: #E7322A;
}

.header-attn .arg {
    font-size: 15px;
    font-weight: 500;
}

@keyframes header-attn-drawin {
    from { opacity: 0; }
    to { opacity: 1; }
}

.header-visual.animate .header-attn .cell { animation: header-attn-drawin .5s ease both; }

@media (prefers-reduced-motion: reduce) {
    .header-visual.animate .header-attn .cell { animation: none; }
}

/*!
 * ML in PL Jekyll Theme - Header variant: "Temperature"
 *
 * Styles the softmax-temperature visual rendered by js/header/temperature.js:
 * a black gauge and a brand-coloured distribution, laid out in two Bootstrap
 * columns (stacked on mobile, side by side on lg+). Only targets this variant's
 * own markup; the shared header shell lives in css/header/base.css.
 */

.header-temp-wrap {
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
}

.header-temp-col {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
}

.header-temp {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 26vh;   /* stacked on mobile: keep both within the hero */
    overflow: visible;
    color: #E7322A; /* currentColor for the gauge-fill gradient stops */
}

@media (min-width: 992px) {
    .header-temp { max-height: 38vh; } /* side by side on lg+ */
}

/* Distribution: brand colour, always full. */
.header-temp .bar {
    fill: #E7322A;
}

/* Gauge: drawn in black. */
.header-temp .axis,
.header-temp .track {
    stroke: rgba(1, 1, 1, 0.12);
}

.header-temp .track {
    stroke-width: 8;
    stroke-linecap: round;
}

.header-temp .prog {
    /* stroke is a dimmed→full gradient set in js (via url(#...)) */
    stroke-width: 8;
    stroke-linecap: round;
}

.header-temp .tick {
    stroke: #010101;
    stroke-width: 2;
    opacity: .4;
}

.header-temp .needle {
    stroke: #010101;
    stroke-width: 4;
    stroke-linecap: round;
}

.header-temp .hub {
    fill: #010101;
}

.header-temp .tau {
    fill: #010101;
    font-family: 'Poppins', sans-serif;
    font-size: 24px;
    font-weight: 600;
}

/* Fade the whole visual in on mount (js adds .animate to .header-visual). */
@keyframes header-temp-drawin {
    from { opacity: 0; }
    to { opacity: 1; }
}

.header-visual.animate .header-temp { animation: header-temp-drawin .6s ease both; }

@media (prefers-reduced-motion: reduce) {
    .header-visual.animate .header-temp { animation: none; }
}

/*!
 * ML in PL Jekyll Theme - Header variant: "One-hot"
 *
 * Styles the one-hot vector rendered by js/header/one-hot.js: black brackets and
 * zeros, a brand-coloured flame for the hot element. Only targets this variant's
 * own markup; the shared header shell lives in css/header/base.css.
 */

.header-one-hot {
    width: auto;
    height: auto;
    max-width: min(760px, 92vw);
    overflow: visible;
}

/* Column vector on mobile, row vector on desktop. */
.header-one-hot.one-hot-row { display: none; max-height: 30vh; }
.header-one-hot.one-hot-col { display: block; max-height: 54vh; }

@media (min-width: 992px) {
    .header-one-hot.one-hot-row { display: block; }
    .header-one-hot.one-hot-col { display: none; }
}

.header-one-hot .bracket {
    stroke: #010101;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.header-one-hot .zero {
    fill: #010101;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    /* font-size is set in js so the flame can match the glyph height */
}

.header-one-hot .fire {
    fill: #E7322A;
}

/* Fade the whole visual in on mount (js adds .animate to .header-visual). */
@keyframes header-one-hot-drawin {
    from { opacity: 0; }
    to { opacity: 1; }
}

.header-visual.animate .header-one-hot { animation: header-one-hot-drawin .6s ease both; }

@media (prefers-reduced-motion: reduce) {
    .header-visual.animate .header-one-hot { animation: none; }
}

/*!
 * ML in PL Jekyll Theme
 * Timeline module CSS
 */

/* Timeline styles */
.timeline .timeline-date {
    text-align: right;
    border-right: 1px solid #E7322A;
    margin-right: -1px;
}

.timeline .row:last-child .timeline-date {
    border-right: 1px solid transparent;
}

.timeline .timeline-date p, .timeline .timeline-desc p {
    margin-top: -5px;
    margin-bottom: 30px;
}

.timeline .timeline-date:before {
    content: "";
    position: absolute;
    border-radius: 50%;
    height: 1em;
    width: 1em;
    background-color: #E7322A;
    color: #fff;
    right: -0.55em;
    top: 0px;
}

@media(min-width:767px) {
    .timeline .timeline-date:before {
        top: 4px;
    }
}

.timeline .timeline-desc {
    border-left: 1px solid #E7322A;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: -10px;
    margin-top: -10px;
}

.timeline .row:last-child .timeline-desc {
    border-left: 1px solid transparent;
}


/* Calendar buttons styles */
.add-calendar {
    margin-left: 40px;
    margin-bottom: 400px;
}

.google, .outlook, .office {
    padding-top: 8.75px !important;
    padding-bottom: 5px !important;
}

.yahoo, .facebook, .linkedin {

}

.calendar-text {
    margin-top: 14px;
    margin-bottom: 14px
}

.btn-calendar {
    margin-right: 6px;
    text-align: center;
    vertical-align: bottom;
    padding: 8px 12px 4px 12px;
    min-width: 54px;
    display: inline-block;
}

.btn-calendar:first-child{
    margin-left: 0px;
}

.btn-calendar:hover,
.btn-calendar:focus {
    text-decoration: none;
}

.btn-download {
    margin-left: -1px;
    padding-left: 0px;
}

/*!
 * ML in PL Jekyll Theme
 * Conference timeline module CSS
 */

.conference-current .event-card {
    margin-bottom: 0;
}

/* Project leaders: photo with name and title beside it */
.conference-leaders {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
}

/* Each leader is as wide as its name; the flex gap sets the spacing */
.conference-leader {
    margin: 0;
    min-width: 0;
    max-width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
}

.conference-leader-photo {
    display: block;
    flex: none;
    width: var(--photo-size);
    height: var(--photo-size);
    border-radius: 50%;
    overflow: hidden;
}

.conference-leader-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(50%);
}

.conference-leader figcaption {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
    line-height: 1.25;
}

/* Name and title stay on one line each */
.conference-leader-name,
.conference-leader-role {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conference-leader-name {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: #010101;
}

.conference-leader-placeholder .conference-leader-name {
    opacity: .45;
}

.conference-leader-role {
    margin-top: 2px;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #E7322A;
}

/* Timeline geometry */
#conference {
    --spine-x: 50%;
    --spine-lead: 40px; /* line from the banner down to the first row */
    --dot-size: 14px;
    --photo-size: 40px;
    --row-gap: 40px;
    --logo-height: 64px;
    --logo-ratio: 3.54; /* width / height of the current logos; every logo gets their width */
    --logo-gap: 8px;
    --leaders-gap: 12px;
    --year-size: 30px;
    --year-line: 28px;
}

/* Timeline: a centre spine that grows out of the current banner */
.conference-timeline {
    position: relative;
    margin-top: 16px;
    padding-top: var(--spine-lead);
}

.conference-timeline:before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--spine-x);
    height: var(--spine-lead);
    border-left: 1px solid #E7322A;
}

/* Dot, branch and year sit at the middle of the row's first item: its logo, or the current row's first photo */
.conference-timeline-row {
    --marker-y: calc(var(--logo-height) / 2);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 60px minmax(0, 1fr);
}

.conference-timeline-row > * {
    grid-row: 1;
}

.conference-timeline-card {
    padding-bottom: var(--row-gap);
    min-width: 0;
}

/* Logos share one width and are centred in a slot of --logo-height, which the dot lines up with.
   Taller logos overflow the slot evenly. Sources are trimmed by scripts/optimize_images.sh */
.conference-timeline-card .event-card-title.conference-timeline-logo-title {
    display: flex;
    align-items: center;
    height: var(--logo-height);
    margin-bottom: var(--logo-gap);
    line-height: 0;
}

.conference-timeline-logo-title a {
    display: block;
    max-width: 100%;
}

.conference-timeline-logo {
    display: block;
    width: calc(var(--logo-height) * var(--logo-ratio));
    max-width: 100%;
    height: auto;
    transition: opacity .2s ease-in-out;
}

.conference-timeline-logo-title a:hover .conference-timeline-logo,
.conference-timeline-logo-title a:focus-visible .conference-timeline-logo {
    opacity: .7;
}

.conference-timeline-card .event-card-title {
    margin: 0 0 4px;
}

.conference-timeline-card .event-card-title a {
    color: inherit;
}

.conference-timeline-card .conference-leaders {
    margin-top: var(--leaders-gap);
}

.conference-timeline-current {
    --marker-y: calc(var(--photo-size) / 2);
}

/* The current edition's leaders have no logo above them */
.conference-timeline-current .conference-timeline-card .conference-leaders {
    margin-top: 0;
}

/* The current row is as tall as a logo-only row below it, so the dots stay evenly spaced */
.conference-timeline-current .conference-timeline-card {
    padding-bottom: calc(var(--logo-height) + var(--logo-gap) + var(--row-gap) - var(--photo-size));
}

.conference-timeline-node {
    grid-column: 2;
    position: relative;
}

/* Spine segment */
.conference-timeline-node:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: 1px solid #E7322A;
}

.conference-timeline-row:last-child .conference-timeline-node:before {
    bottom: auto;
    height: var(--marker-y);
}

/* Branch towards the year */
.conference-timeline-node:after {
    content: "";
    position: absolute;
    top: var(--marker-y);
    border-top: 1px solid #E7322A;
}

.conference-timeline-node span {
    position: absolute;
    top: calc(var(--marker-y) - var(--dot-size) / 2);
    left: 50%;
    width: var(--dot-size);
    height: var(--dot-size);
    margin-left: calc(var(--dot-size) / -2);
    border-radius: 50%;
    background-color: #E7322A;
}

.conference-timeline-meta {
    padding: 0 14px;
}

.conference-meta p {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    color: #E7322A;
}

/* Centred on the branch */
.conference-year {
    padding-top: calc(var(--marker-y) - var(--year-line) / 2);
    font-size: var(--year-size);
    font-weight: 600;
    line-height: var(--year-line);
    font-variant-numeric: tabular-nums;
}

.conference-meta .conference-edition {
    margin-top: 10px;
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.conference-timeline-left .conference-timeline-card {
    grid-column: 1;
    text-align: right;
}

.conference-timeline-left .conference-timeline-logo-title,
.conference-timeline-left .conference-leaders {
    justify-content: flex-end;
}

.conference-timeline-left .conference-timeline-node:after {
    left: 50%;
    right: 0;
}

.conference-timeline-left .conference-timeline-meta {
    grid-column: 3;
}

.conference-timeline-right .conference-timeline-card {
    grid-column: 3;
}

.conference-timeline-right .conference-leaders {
    justify-content: flex-start;
}

.conference-timeline-right .conference-timeline-node:after {
    left: 0;
    right: 50%;
}

.conference-timeline-right .conference-timeline-meta {
    grid-column: 1;
    text-align: right;
}

/* Phone: year | rail | conference, like the site's timeline include.
*/
@media(max-width:767px) {
    #conference {
        --year-col: 68px;
        --rail-col: 28px;
        --spine-x: calc(var(--year-col) + var(--rail-col) / 2);
        --row-gap: 28px;
        --logo-height: 44px;
        --year-size: 20px;
        --year-line: 24px;
    }

    .conference-timeline-row {
        grid-template-columns: var(--year-col) var(--rail-col) minmax(0, 1fr);
    }

    /* Branch towards the year on the left */
    .conference-timeline-left .conference-timeline-node:after,
    .conference-timeline-right .conference-timeline-node:after {
        left: 0;
        right: 50%;
    }

    .conference-timeline-left .conference-timeline-meta,
    .conference-timeline-right .conference-timeline-meta {
        grid-column: 1;
        padding: 0 8px 0 0;
        text-align: right;
    }

    .conference-meta.conference-timeline-meta .conference-edition {
        margin-top: 2px;
        font-size: 10px;
        letter-spacing: .08em;
        line-height: 1.3;
    }

    .conference-timeline-left .conference-timeline-card,
    .conference-timeline-right .conference-timeline-card {
        grid-column: 3;
        padding-left: 10px;
        text-align: left;
    }

    .conference-timeline-left .conference-timeline-logo-title,
    .conference-timeline-left .conference-leaders {
        justify-content: flex-start;
    }
}

/*!
 * ML in PL Jekyll Theme
 * Agenda module CSS
 */

/* Simple agenda styles */
.simple-agenda{
    display: flex;
    flex-wrap: wrap; 
    align-items: baseline;
    width: 100%;
}

.day{
    display: block;
    margin-bottom: 10px;
}

.days-3 {
    width: 33%;
}

.days-7 {
    width: 14.25%;
    min-width: 150px;
}

.events{
    text-align: left;
    padding: 5px;
}

.simple-agenda .events:last-child{
    border-right: none;
}

.event{
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #E7322A;
}

.event:last-child{
    border-bottom: none;
}

.event-empty{
    border-bottom: none;
}

.event-1{
    height: 64px;
}

.event-1-5{
    height: 80px;
}

.event-2{
    height: 96px;
}

.event-2-5{
    height: 112px;
}

.event-3{
    height: 128px;
}

.event-3-5{
    height: 144px;
}

.event-4{
    height: 160px;
}

.event-5{
    height: 192px;
}

.event-6{
    height: 224px;
}

.event-7{
    height: 256px;
}

.event-8{
    height: 288px;
}


/* Agenda styles */

.agenda-day{
    display: block;
    margin-top: 15px;
    margin-bottom: 15px;
}

.agenda-session {
    clear: both;
}

.agenda-item > div {
    font-size: 16px;
    border-top: 1px solid #010101;
    padding: 10px;
}

.agenda-session:first-child > .agenda-item > div {
    border-top: none;
}

.agenda-item h4, .agenda-item h5, .agenda-item h6 {
    margin-bottom: 0;
    text-align: left;
}

.agenda-item ul {
    list-style: disc;
    list-style-position: outside;
    padding-left: 1em;
    margin-bottom: 0;
}

.agenda-item ul li a {
    display: inline-table;
}

/*!
 * ML in PL Jekyll Theme
 * Slider module CSS
 */

.slider-tabs {
    display: flex;
    width: 100%;
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
}

.slider-tabs .slider-item {
    cursor: pointer;
    padding: 10px;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex-direction: column;
    text-align: center;
    color: #010101;
}

.item-col-4 {
    width: 277.5px;
}

.item-col-3 {
    width: 370px;
}

.slider-tabs .slider-item .speaker-photo {
    width: 75px;
    float: left;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    margin-right: 0.5em;
}

.slider-tabs .slider-item .speaker-name {
    font-size: 18px;
    font-family: 'Poppins', sans-serif;
    text-transform: uppercase;
}

.slider-tabs .slider-item .speaker-title {
    font-size: 14px;
}

.slider-tabs .slider-item.active, .slider-tabs .slider-item:hover {
    background: #E7322A;
    transition: background .3s ease-in-out;
    color: #FFFFFF;
    text-decoration: none;
}

.slider-tabs .slider-item.active div, .slider-tabs .slider-item:hover div{
    border-color: #FFFFFF;
}

.slider-item-content {
    opacity: 0;
    text-align: justify;
    /* min-height: 600px; */
    overflow: hidden;
    display: none;
}

@media(min-width:767px) {
    .slider-item-content {
        min-height: 400px;
    }
}

.slider-item-content .speaker-details-text h2 {
    margin-bottom: 0;
    font-weight: 700;
}

.slider-item-content .speaker-details-image {
    text-align: center;
}

.slider-item-content .speaker-details-image img {
    border-radius: 50%;
}

.center-verticaly {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.slider-timer-wrapper{
    padding-top: 30px;
    padding-bottom: 30px;
    width: 100%;
}

.slider-timer{
    height: 2px;
    background: #E7322A;
    width: 0%;
    transition: width 30s ease-in-out;
}

@keyframes width-from-0-to-100 {
    0% { width: 0%; }
    100% { width: 100%; }
}

.width-from-0-to-100 {
    animation: width-from-0-to-100 30s forwards;
    animation-timing-function: linear;
}

/* Fade in/out animation for slider */
@keyframes fadeInFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeOutToRight {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(50px);
    }
}

.fade-in {
    animation: fadeInFromLeft 0.5s forwards;
    animation-fill-mode: forwards;
    display: block !important;
}

.fade-out {
    animation: fadeOutToRight 0.5s forwards;
    animation-fill-mode: forwards;
    display: block !important;
}