/* VARIABLES */
:root {
    --default-padding: 2em;
    --default-fontsize: 1vw;

    --heading-fontsize-factor: 1;
    --content-fontsize-factor: 1;

    --color-gi-blue: #0e2050;
    --color-gi-blue-light: rgb(13, 50, 153);
    --color-gi-blue-lighter: rgba(13, 50, 153, .2);
    --color-gi-blue-poster: rgba(13, 50, 153, .4);
    --color-gi-yellow: rgb(250, 225, 0);
    --color-grey: #eee;
    --color-grey-light: rgb(245,245,245);
    --color-grey-mid: rgb(200,200,200);
    --color-grey-dark: rgb(100,100,100);
    --color-white-transparent: rgba(255, 255, 255, .85);
    --color-white-transparenter: rgba(255, 255, 255, .6);
    --color-light: rgb(250,250,250);
    --color-dark: rgb(50,50,50);

    --color-gi-blue-transparent: rgba(14, 32, 80, .6);
    --color-gi-yellow-transparent: rgba(250, 225, 0, .6);
    --color-gi-blue-light-transparent: hwb(224 5% 40% / .6);
    --color-grey-transparent: rgba(238, 238, 238, .6);
    --color-light-transparent: rgba(250, 250, 250, .6);
    --color-dark-transparent: rgba(50, 50, 50, .6);
    --color-red-transparent: rgba(200,0,0,.6);
    --color-green-transparent: rgba(0,200,0,.6);

    --color-red: rgb(200,0,0);
    --color-green: rgb(0,200,0);
    --color-blue: rgb(0,0,200);
    --color-orange: rgb(200,100,0);
    --color-purple: rgb(100,0,200);
    --color-yellow: rgb(200,200,0);

    --font-family-heading: 'Fira Sans Condensed', sans-serif;
    --font-family-body: 'Fira Sans', sans-serif;

    --wrapper-max-width: 1600px;

    --organizerlogo-max-height: 2em;

    --gilogo-max-width: 22em; 
    --gilogo-background: none;

    --navbar-align: start;

    --map-gradient-colorA: var(--color-grey-light);
    --map-gradient-colorB: var(--color-grey-mid);
    --map-gradient-width: .5%;
}

/* DEFAULT */
body {
    font-family: var(--font-family-body);
    color: var(--color-dark);
    font-size: var(--default-fontsize);
}

a {
    color: var(--color-gi-blue-light);
}

/* COLORS */
.color-gi-blue { color: var(--color-gi-blue); }
.color-gi-yellow { color: var(--color-gi-yellow); }
.color-gi-blue-light { color: var(--color-gi-blue-light); }
.color-grey { color: var(--color-grey); }
.color-white-transparent { color: var(--color-white-transparent); }
.color-white-transparenter { color: var(--color-white-transparenter); }
.color-light { color: var(--color-light); }
.color-dark { color: var(--color-dark); }
.color-red { color: var(--color-red); }
.color-green { color: var(--color-green); }
.color-blue { color: var(--color-blue); }
.color-orange { color: var(--color-orange); }
.color-purple { color: var(--color-purple); }
.color-yellow { color: var(--color-yellow); }

/* BACKGROUND COLORS */
.bg-gi-blue { background-color: var(--color-gi-blue); }
.bg-gi-yellow { background-color: var(--color-gi-yellow); }
.bg-gi-blue-light { background-color: var(--color-gi-blue-light); }
.bg-grey { background-color: var(--color-grey); }
.bg-light { background-color: var(--color-light); }
.bg-dark { background-color: var(--color-dark); }
.bg-red { background-color: var(--color-red); }
.bg-green { background-color: var(--color-green); }
.bg-orange { background-color: var(--color-orange); }

.bg-gi-blue-transparent { background-color: var(--color-gi-blue-transparent); }
.bg-gi-yellow-transparent { background-color: var(--color-gi-yellow-transparent); }
.bg-gi-blue-light-transparent { background-color: var(--color-gi-blue-light-transparent); }
.bg-grey-transparent { background-color: var(--color-grey-transparent); }
.bg-light-transparent { background-color: var(--color-light-transparent); }
.bg-dark-transparent { background-color: var(--color-dark-transparent); }
.bg-red-transparent { background-color: var(--color-red-transparent); }
.bg-green-transparent { background-color: var(--color-green-transparent); }
.bg-orange-transparent { background-color: var(--color-orange-transparent); }

/* STROKE COLORS */
.stroke-gi-blue { stroke: var(--color-gi-blue); }
.stroke-gi-yellow { stroke: var(--color-gi-yellow); }
.stroke-gi-blue-light { stroke: var(--color-gi-blue-light); }
.stroke-grey { stroke: var(--color-grey); }
.stroke-light { stroke: var(--color-light); }
.stroke-dark { stroke: var(--color-dark); }
.stroke-red { stroke: var(--color-red); }
.stroke-green { stroke: var(--color-green); }
.stroke-blue { stroke: var(--color-blue); }
.stroke-orange { stroke: var(--color-orange); }
.stroke-purple { stroke: var(--color-purple); }
.stroke-yellow { stroke: var(--color-yellow); }

/* VARIOUS */
.large-icon p:has(i.bi) {
    margin-bottom: 0;
    
    i {
        font-size: calc(200% * var(--content-fontsize-factor));
        color: var(--color-gi-blue);
    }
}

.large-icon p:not(:has(i.bi)) {
    font-size: calc(100% * var(--content-fontsize-factor));
    /* font-weight: 500; */
    color: var(--color-gi-blue);
}

.swissflag {
    background-color:red !important;
    color:#fff !important;
    padding: 0 .3rem !important;
    border-radius: 2px;
    font-weight: bold;
    font-size: calc(105% * var(--content-fontsize-factor)) !important;
    font-style: normal;
}

.swissflag::before {
    content: "+"
}

/* WRAPPER */
.wrapper {
    padding: var(--default-padding);
    max-width: var(--wrapper-max-width);
    margin-left: auto;
    margin-right: auto;
}

/* TOP */
.top {
    background-color: var(--color-gi-blue);
    
    .header {
        background-color: var(--color-gi-blue);
        color: var(--color-light);
        padding: var(--default-padding);
        padding-bottom: calc(4 * var(--default-padding));
        background-image: url(/assets/img/Panorama.svg);
        background-repeat: no-repeat;
        background-position: 0 bottom;
        background-size: auto 85%;
        position: relative;

        .title-box {
            background-color: var(--color-gi-yellow);
            color: var(--color-dark);
            padding: calc(var(--default-padding)) calc(2 * var(--default-padding));
            display: inline-block;
            margin: 0 0 0 calc(-2 * var(--default-padding));

            font-family: calc(var(--font-family-heading) * var(--heading-fontsize-factor));

            .sitetitle {
                margin: 0;
                font-weight: normal;
                font-size: calc(2.5em * var(--heading-fontsize-factor));
                text-transform: uppercase;
            }

            .subtitle {
                font-size: calc(2em * var(--heading-fontsize-factor));
                font-weight: 300;
                margin-top: -.5em;
                text-transform: uppercase;
            }

            .confinfo {
                font-size: calc(1.5em * var(--heading-fontsize-factor));
                font-weight: 300;
                margin: 0;
            }
        }

        a:has(.gi-logo) {
            display: block;
            
            .gi-logo {
                max-width: var(--gilogo-max-width);

                position: absolute;
                right: var(--default-padding);
                top: var(--default-padding);

                padding: calc(.25 * var(--default-padding));

                background-color: var(--gilogo-background);
            }
        }
    }
}

/* BOTTOM */
.bottom {
    .bottom-nav {
        display: flex;
        align-items: right;

        >.container-fluid {
            display: flex;
            justify-content: end;
            margin-right: calc(-.75 * var(--default-padding)) !important;
            margin-top: calc(.5 * var(--default-padding)) !important;

            a.nav-link {
                color: var(--color-gi-blue) !important;
                padding: 0 calc(.5 * var(--default-padding)) !important;
            }

            a.nav-link:hover {
                color: var(--color-gi-blue-light) !important;
            }
        }
    }

    .organizers {
        margin-top: calc(var(--default-padding));
        margin-bottom: var(--default-padding);

        display: grid;
        grid-template-columns: repeat(4, 1fr);

        a {
            display: block;
            margin: auto;
            width: 100%;

            img {
                max-height: var(--organizerlogo-max-height);
                height: auto;
                width: 100%;
            }

            img.tudd {
                max-height: calc(var(--organizerlogo-max-height) * 2.5);
            }
        }
    }

    .sponsors {
        background-color: var(--color-grey-light);
        padding: var(--default-padding);
        margin-top: var(--default-padding);

        h2 {
            font-family: var(--font-family-heading);
            font-weight: 400;
            text-transform: uppercase;
            margin: 0 0 calc(.25 * var(--default-padding)) 0;
            color: var(--color-gi-blue);
        }

        .logos {
            margin-top: calc(var(--default-padding) / 2);
            margin-bottom: 0;

            display: grid;
            grid-template-columns: repeat(4, 1fr);

            a {
                display: block;
                margin: auto;
                width: 100%;
                margin-right: 1.5em;
                text-align: center;

                img {
                    height: auto;
                    max-height: calc(var(--organizerlogo-max-height) * 1.5);
                }
            }
        }
    }
}

/* NAVBAR */
nav.navbar {
    background-color: var(--color-white-transparent) !important;
    color: var(--color-gi-blue) !important;
    font-weight: 600;

    margin-top: -2.75em;
    padding: .25em;
    border-bottom: 5px solid var(--color-gi-blue);

    a.nav-link {
        color: var(--color-gi-blue) !important;
        padding: .25em calc(.5 * var(--default-padding)) !important;
        font-size: calc(100% * var(--content-fontsize-factor)) !important;
        
        &:hover {
            color: #ffffff !important;
            background-color: var(--color-grey-dark) !important;
        }

        &.active {
            color: #ffffff !important;
            background-color: var(--color-gi-blue) !important;
        }
    }

    >.container-fluid {
        justify-content: var(--navbar-align) !important;
        padding-left: calc(.5 * var(--default-padding));
    }
}

/* CONTENT */
.content {
    margin-top: var(--default-padding);
    background-color: var(--color-grey-light);
    padding: var(--default-padding);

    font-size: calc(1.1em * var(--content-fontsize-factor));

    /* HEADINGS */
    h1, h2, h3, h4, h5 {
        font-family: var(--font-family-heading);
        font-weight: 400;
        text-transform: uppercase;
        margin: calc(.5 * var(--default-padding)) 0 calc(.25 * var(--default-padding));
        color: var(--color-gi-blue);
    }

    h1 {
        margin-top: 0;
    }
    
    /* IMAGE */
    img {
        max-width: 100%;
        height: auto;
    }

    .image-with-rights {
        position: relative;

        .img-rights {
            font-size: calc(.8em * var(--content-fontsize-factor));
            font-style: italic;

            background-color: var(--color-white-transparenter);
            
            display: inline-block;
            position: absolute;
            right: 0;
            bottom: 0;
            padding: .25em .5em;
        }

        &.shadowed {
            img {
                box-shadow: 0 0 1em var(--color-dark);
            }
        }

        &.rounded {
            img {
                border-radius: 1em;
            }

            .img-rights {
                border-radius: 0 0 1em 0;
            }
        }

        &.circled {
            img {
                border-radius: 50%;
            }

            .img-rights {
                background-color: transparent;
                left: auto; right: auto;
                position:unset;
                padding-top: 1em;
            }
        }
    }

    /* TWO-COLUMNS ELEMENT */
    .twocolumns, .threecolumns {
        margin: calc(var(--default-padding)) auto !important;
    }

    a.button {
        background-color: var(--color-gi-blue);
        color: #fff;
        border: none;
        padding: .5em 1em;
        cursor: pointer;
        text-decoration: none;

        &:hover {
            background-color: var(--color-grey-dark);
        }
    }

    ol.list-lettered {
        list-style-type: lower-latin;
        
    }

    strong {
        font-weight: 600;
        color: var(--color-gi-blue);
    }

    li.date.past {
        text-decoration: line-through;
    }

    .hidden { display: none; }

    .keynote {
        .image-with-rights {
            margin-top: 2rem;
        }
    }

    /* Registration cost table */
    .table-reg + * + table {
        tr td:first-child, th {
            font-weight: 600;
            color: var(--color-gi-blue);
        }

        td {
            padding: calc(.15 * var(--default-padding)) calc(.25 * var(--default-padding));
        }

        td:not(:first-child) {
            text-align: center;
        }

        th {
            padding: 0 calc(.5 * var(--default-padding));
        }

        th:not(:first-child), td:not(:first-child) {
            border-left: var(--color-gi-blue) 1px solid;
        }

        thead tr:first-child th:nth-child(2n+1) {
            border-left: none;
        }

        thead tr:last-child th {
            border-bottom: var(--color-gi-blue) 1px solid;
        }
    }
}

#map {
    position: relative; 
    height: 50em;
    margin: var(--default-padding) 0;

    .legend {
        background-color: rgba(255,255,255,.95);
        padding: 1em;

        i {
            width: 1em;
            height: 1em;
            display: inline-block;
            margin-right: .5em;
            border-radius: 50%;
        }
    }
    
    &:not(.map-initialized) {
        transition: color 1s ease-in-out,background-color 1s ease-in-out,height 1s ease-in;
    }

    .map-marker i.bi {
        font-size: calc(20px * var(--content-fontsize-factor));
        color: white;
        padding: 20%;
        border-radius: 20%;
        opacity: .85;
        text-shadow: 1px 1px 5px rgba(100,100,100);
        box-shadow: 1px 1px 5px rgba(100,100,100);
    }

    &.map-disabled {
        height: 15em;

        /* background:
            linear-gradient(to top left, 
                            transparent 0%,
                            transparent calc(50% - 3px),
                            var(--color-gi-blue-transparent) calc(50% - 2px),
                            var(--color-gi-blue-transparent) calc(50% + 2px),
                            transparent calc(50% + 3px),
                            transparent 100%
                            ),
            linear-gradient(to top right, 
                            transparent 0%,
                            transparent calc(50% - 3px),
                            var(--color-gi-blue-transparent) calc(50% - 2px),
                            var(--color-gi-blue-transparent) calc(50% + 2px),
                            transparent calc(50% + 3px),
                            transparent 100%
                            ),
            var(--color-grey); */
            background-image: repeating-linear-gradient(-45deg, 
                                var(--map-gradient-colorA) 0%, 
                                var(--map-gradient-colorA) calc(var(--map-gradient-width)), var(--map-gradient-colorB) calc(var(--map-gradient-width)), 
                                var(--map-gradient-colorB) calc(2 * var(--map-gradient-width)), var(--map-gradient-colorA) calc(2 * var(--map-gradient-width)));
    }

    &:not(.map-disabled) {
        #button-enable-map {
            display: none;
        }
    }

    #button-enable-map {
        width: 40%;
        background-color: var(--color-gi-blue);
        color: #fff;
        padding: var(--default-padding);
        text-align: center;
        margin: auto;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;

        p:last-child {
            font-size: 70%;
        }
    }

    .leaflet-control {
        border: none;

        .leaflet-control-zoom-in,
        .leaflet-control-zoom-out {
            background-color: var(--color-gi-blue);
            color: #fff;
            border: none;
        }

        .leaflet-control-zoom-in:hover,
        .leaflet-control-zoom-out:hover {
            background-color: var(--color-gi-blue-light);
        }

        .leaflet-control-zoom-in {
            border-bottom: 1px solid var(--color-grey);
        }      
    }
}

/* POSTER GALLERY */
#gallery {
    margin-left: -.5em;

    #focus {
        display: flex;
        flex-direction: row;
        align-items: flex-start;

        margin-left: .5em;
        margin-bottom: 2em;

        img {
            max-width: 30vw;
            width: 30vw;
            height: auto;

            cursor: zoom-in;
        }

        #info {
            margin-left: 2em;
            align-items: flex-start;

            h3 { margin-top: 0; }
        }

        i.arrow {
            margin-top: auto;
            margin-bottom: auto;
            margin-left: .25em;
            margin-right: .25em;
            font-size: 2em;

            background-color: var(--color-gi-blue-light);
            color: var(--color-grey-light);
            border-radius: 10px;
        }

        &[data-empty='true'] {
            div.noimage {
                display: block;
                height: calc(30vw * 1.4141);
                width: 30vw;

                background-color: var(--color-gi-blue-lighter);
                background: repeating-linear-gradient( -45deg, var(--color-gi-yellow), var(--color-gi-yellow) 5px, var(--color-gi-blue-poster) 5px, var(--color-gi-blue-poster) 25px );
            }
            img { display: none; }
        }
    }
    
    #overview {
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            position: relative;

            li.poster {
                width: 10vw;
                max-width: 10vw;
                max-height: calc(10vw * 1.4141 + 8em);
                margin: .5em;
                text-align: center;
                cursor: pointer;
                padding: 10px;

                .noimage { display: none; }

                img {
                    max-width: 100%;
                    height: auto;
                    border-radius: 10px;
                }

                p.title {
                    margin-top: .5em;
                    font-size: calc(.8em * var(--content-fontsize-factor));

                    position: relative;
                    bottom: 0;
                    overflow: hidden;
                }

                &[data-empty='true'] {
                    div.noimage {
                        display: block;
                        border-radius: 10px;
                        height: calc(10vw * 1.4141 - 1em);

                        background-color: var(--color-gi-blue);
                        background: repeating-linear-gradient( -45deg, var(--color-gi-yellow), var(--color-gi-yellow) 5px, var(--color-gi-blue-poster) 5px, var(--color-gi-blue-poster) 25px );
                    }
                    img { display: none; }
                }

                &.active {
                    background-color: var(--color-gi-blue-lighter);
                }
            }
        }
    }
}
#galleryModal {
    background-color: rgba(0,0,0,.7);

    .modal-content {
        background-color: transparent;
        border: none;
    }

    .modal-header {
        button {
            margin-left: auto;
            color: #fff;
            background: none;
            border: none;
            span { font-size: 4em; }
            margin-bottom: -2em;
            margin-right: -1.5em;
        }

        border: none;
    }
    
    .modal-body {
        background-color: rgba(255,255,255,.9);
        text-align: center;

        img {
            max-height: 80vh;
        }
    }
}

/* RESPONSIVE */
@media (min-width: 1600px) {
    :root {
        --default-fontsize: 16px;
    }
}

@media (max-width: 1200px) {
    :root {
        --default-padding: 1.5em;
        --default-fontsize: 1.2vw;
        --heading-fontsize-factor: .8;
        --content-fontsize-factor: 1.1;
    }
}

@media (max-width: 1000px) {
    :root {
        --default-fontsize: 1.4vw;
        --heading-fontsize-factor: .7;
        --content-fontsize-factor: 1.1;
        --gilogo-max-width: 16em;
        --gilogo-background: var(--color-gi-blue-transparent);
    }
}

@media (max-width: 800px) {
    :root {
        --default-padding: 1.25em;
        --default-fontsize: 1.8vw;
        --heading-fontsize-factor: .6;
        --content-fontsize-factor: 1.2;
        --navbar-align: center;
    }
}