/* ========================================
   BAUHAUS STYLE - Project Page CSS
   Minimalist Academic Design
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');

:root {
    --bauhaus-red: #E63946;
    --bauhaus-blue: #1D3557;
    --bauhaus-yellow: #F4A261;
    --bauhaus-black: #000000;
    --bauhaus-white: #FFFFFF;
    --bauhaus-gray: #F5F5F5;
    --bauhaus-dark-gray: #333333;
}

html, body {
    margin: 10px 0px;
    padding: 0px;
    text-align: center;
    background-color: var(--bauhaus-white);
    font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--bauhaus-black);
}

table {
    border: 2px solid var(--bauhaus-black);
    border-collapse: collapse;
    background: var(--bauhaus-white);
}

th, td {
    border: none;
    border-bottom: 1px solid var(--bauhaus-black);
    padding: 12px 16px;
}

table tr:last-child td {
    border-bottom: none;
}

#content {
    width: auto;
    max-width: 900px;
    min-width: 700px;
    height: auto !important;
    height: 100%;
    min-height: 100%;
    margin: 0 auto;
    text-align: left;
    background-color: var(--bauhaus-white);
    border: 3px solid var(--bauhaus-black);
    font-size: 10.5pt;
    line-height: 1.6;
    -webkit-text-size-adjust: none;
    position: relative;
}

/* Bauhaus tricolor top bar */
#content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(90deg, 
        var(--bauhaus-red) 0%, 
        var(--bauhaus-red) 33.33%, 
        var(--bauhaus-yellow) 33.33%, 
        var(--bauhaus-yellow) 66.66%, 
        var(--bauhaus-blue) 66.66%, 
        var(--bauhaus-blue) 100%);
}

#content-inner {
    padding: 15px 0;
}

#teaseimg {
    height: auto;
    width: 50%;
    border: 3px solid var(--bauhaus-black);
}

hr.smooth {
    border: 0;
    height: 2px;
    width: 100%;
    background: var(--bauhaus-black);
}

a:link { 
    color: var(--bauhaus-blue); 
    text-decoration: none; 
    font-weight: 500;
    border-bottom: 2px solid transparent; 
    transition: border-color 0.2s ease; 
}
a:visited { 
    color: var(--bauhaus-blue); 
    text-decoration: none; 
    border-bottom: 2px solid transparent; 
}
a:hover { 
    color: var(--bauhaus-blue); 
    text-decoration: none; 
    border-bottom: 2px solid var(--bauhaus-blue); 
}
a:active { 
    color: var(--bauhaus-blue); 
    text-decoration: none; 
    border-bottom: 2px solid var(--bauhaus-blue); 
}

/* Sections of the page */
.section { 
    margin: 2em 2em 0.5em 2em; 
    line-height: 140%; 
}
.section h2 { 
    margin-top: 0.5em; 
    margin-bottom: 0.2em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--bauhaus-black);
    padding: 8px 15px;
    background: var(--bauhaus-black);
    color: var(--bauhaus-white);
    display: inline-block;
}

/* Logo section */
.logos { 
    margin: 1.5em 0; 
    text-align: center; 
    margin-top: 5px; 
    margin-bottom: 10px; 
}
.logos img { 
    vertical-align: top; 
    margin: 0 1.25em; 
    border: 0; 
}

/* Page header */
.head { 
    text-align: center; 
    margin: 0.5em 0; 
    padding: 1em 0; 
    background-color: var(--bauhaus-gray);
    border-bottom: 2px solid var(--bauhaus-black);
}
.head { 
    color: var(--bauhaus-black); 
}
.head h1 { 
    font-size: 22pt; 
    line-height: 26pt; 
    margin: 10px 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.head h1 a { 
    text-decoration: none; 
}
.authors { 
    font-size: 11pt; 
    margin: 0 0 1em 0; 
}
.affiliations { 
    font-size: 10pt; 
    margin: -0.5em 0 10pt 0; 
    color: var(--bauhaus-dark-gray);
}
.venue { 
    font-weight: 700; 
    font-size: 11pt; 
    margin: 1em 0 1em 0;
    color: var(--bauhaus-blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.tagline { 
    font-style: italic; 
    font-size: 10pt; 
    margin: 1em 0 1em 0; 
}

/* Specific section styling */
.teaser { 
    margin: 1.5em 0; 
    text-align: center; 
}
div.content-primary .teaser p img { 
    display: block; 
    float: none; 
    border: 3px solid var(--bauhaus-black); 
    margin: 4em auto 1em auto; 
}
.abstract { 
    line-height: 140%; 
}
.abstract p { 
    margin-top: 0; 
}
.downloads ul { 
    margin-top: 0.5em; 
}
.list ul { 
    margin-top: 0.5em; 
}
.bibtex pre {
    margin-bottom: 0;
    font-family: 'DM Mono', Monaco, Consolas, monospace;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    width: 90%;
    color: var(--bauhaus-dark-gray);
    padding: 15px;
    background: var(--bauhaus-gray);
    border: 2px solid var(--bauhaus-black);
    overflow: auto;
    font-size: 9pt;
}
.acknowledgments { 
    line-height: 140%; 
}
.acknowledgments p { 
    margin-top: 0; 
}
.contact { 
    line-height: 140%; 
}

.heading { 
    margin: 2.5em 0; 
    text-align: center; 
}
.datasets { 
    width: 650px; 
    margin: 3em auto; 
}
.datasets ul { 
    padding-bottom: 1em; 
}
.dataset { 
    float: left; 
    width: 204px; 
    margin: 5px 10px 15px 0px; 
    text-align: center; 
}
.dataset h2 { 
    display: inline; 
}
.dataset img { 
    border: 2px solid var(--bauhaus-black); 
    margin: 0.25em auto; 
    display: block; 
}
.backlink { 
    text-align: center; 
}

/* Grid display for lists with images */
li.grid {
    width: auto;
    height: 100px;
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;
    margin: 5px;
    zoom: 1;
    *display: inline;
    _height: 100px;
}

.griditem {
    font-size: 10pt;
    text-align: center;
    padding: 5px;
}

.griditem img {
    text-align: center;
    height: 100px;
    width: auto;
    border: 2px solid var(--bauhaus-black);
}

/* Video container styling */
video {
    border: 2px solid var(--bauhaus-black);
    max-width: 100%;
}

/* Button styling */
.btn, button {
    background: var(--bauhaus-black);
    color: var(--bauhaus-white);
    border: none;
    padding: 8px 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn:hover, button:hover {
    background: var(--bauhaus-red);
}