/* Adapted from Yihong Sun's homepage (https://yihongsun.github.io),
   which builds on templates by Nicklas Hansen and Haian Jin. */

/* Theme colors. Light is the default; the toggle sets <html data-theme="dark">
   via the script in index.html and remembers the choice. */
:root {
    --bg: #fdfdfd;
    --text: #234;
    --title: black;
    --link: #295f98;
    --accent: #f09228;
    --emph: #D95953;
    --rule: gray;
    --row-border: #f2f2f2;
    --btn-bg: white;
    --btn-hover-bg: #1a3a5c;
    --btn-hover-text: white;
    --footer-bg: #345;
    --footer-text: #fff;
}
:root[data-theme="dark"] {
    --bg: #1b2433;
    --text: #dfe5ee;
    --title: #f3f6fa;
    --link: #9fcbf7;
    --accent: #f5a54a;
    --emph: #ff7b72;
    --rule: #4b5b73;
    --row-border: #273246;
    --btn-bg: transparent;
    --btn-hover-bg: #9fcbf7;
    --btn-hover-text: #1b2433;
    --footer-bg: #131a26;
    --footer-text: #c9d2de;
    color-scheme: dark;
}

html {-webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}
body {background-color: var(--bg); color: var(--text); margin: 0; font-size: 13px;}
h1, h2, h3, h4, h5, a, p, span, body, div, papertitle {font-weight: normal; font-family: 'Lato', Verdana, Helvetica, sans-serif;}
h1, h2 {color: var(--text);}
h1 {font-size: 2.6em;}
h2 {margin-top: 1em; padding-bottom: 0.5em; border-bottom: 1px solid var(--rule);}

a {color: var(--link); text-decoration: none;}
a:hover {color: var(--link); text-decoration: underline;}
b, strong {font-weight: bold;}

.noselect {-webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.emph {color: var(--emph); font-weight: bold;}
/* Emoji: same color font on every device, slightly larger than the text */
.emoji {font-family: 'Noto Color Emoji', sans-serif; font-size: 1.25em; line-height: 1; vertical-align: -0.08em;}

/* Light/dark toggle (top-right corner) */
.theme-toggle {position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--rule); background: transparent; color: var(--text); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center;}
.theme-toggle:hover {color: var(--accent); border-color: var(--accent);}
.theme-toggle .icon-sun {display: none;}
:root[data-theme="dark"] .theme-toggle .icon-moon {display: none;}
:root[data-theme="dark"] .theme-toggle .icon-sun {display: inline;}

/* Header */
.content {max-width: 890px; padding-left: 16px; padding-right: 16px; margin: auto; margin-top: 48px;}
.header-profile-picture, .header-text {display: inline-block; vertical-align: middle;}
.header-profile-picture {width: 225px; height: 225px; margin-right: 75px; border-radius: 50%; background-image: url(files/me.jpg); background-position: center; background-size: cover;}
.header-name h1 {margin: 0;}
.header-subtitle {font-size: 14px; margin-top: 9px; margin-bottom: 12px;}
.header-links {font-size: 14px; margin-top: 6px; margin-bottom: 12px;}
a.btn {margin: 0 3px; white-space: nowrap;}  /* keep each icon with its label when the links wrap */
/* On phones the links split two per line (Email / CV, then Google Scholar / LinkedIn) */
.links-break {display: none;}
a.btn:hover {text-decoration: none; color: var(--accent) !important;}

.about {font-size: 14px; line-height: 15pt;}

/* Publications / experience / teaching rows */
.section-table {width: 100%; border: 0; border-spacing: 0; border-collapse: separate; margin: 0 auto;}
.publication_table tr {display: flex; align-items: center; padding-top: 10px; padding-bottom: 10px; font-size: 14px; border-bottom: 1px solid var(--row-border);}
.publication_table tr:last-child {border-bottom: none;}
.publication_table a, .publication_table strong {font-size: 14px;}
.publication_table em {font-size: 15px;}

/* Fixed column widths so the text lines up across every row and section */
.publication_table td {box-sizing: border-box;}
td.row-media {padding: 7pt; flex: 0 0 30%;}
td.row-media img, td.row-media video {width: 100%; display: block;}
td.row-logo {padding: 10pt; flex: 0 0 30%; text-align: center;}
/* Logos are capped by height so wide and compact logos look balanced */
td.row-logo img {max-width: 80%; max-height: 56px; vertical-align: middle;}
/* For logos with heavy lettering that look oversized at the default cap */
td.row-logo img.logo-small {max-height: 36px;}
td.row-text {padding: 12pt 7pt 12pt 14pt; flex: 1 1 auto; min-width: 0; line-height: 18pt;}

/* Logos with a separate dark-mode file: <img class="logo-light"> + <img class="logo-dark"> */
td.row-logo img.logo-dark {display: none;}
:root[data-theme="dark"] td.row-logo img.logo-light {display: none;}
:root[data-theme="dark"] td.row-logo img.logo-dark {display: inline;}
/* Single-color black logos are simply turned white in dark mode */
:root[data-theme="dark"] td.row-logo img.logo-invert {filter: invert(1);}

papertitle {font-size: 17px;}
a.paper-title {color: var(--title); text-decoration: none;}
.authors {margin-top: 3pt;}
.venue {margin-top: 1pt;}
.row-detail {margin-top: 9pt;}
.row-detail + .row-detail {margin-top: 1pt;}
/* Hanging indent: wrapped lines align with the text after the label */
.row-detail.hang {display: flex;}
.row-detail.hang > span:first-child {flex: none;}

.paper_related {margin-top: 7pt;}
.paper_related a {display: inline-block; padding: 0 8px; margin-top: 2px; margin-right: 2px; border: 1.5px solid var(--link); border-radius: 2px; font-size: 12px; color: var(--link); background-color: var(--btn-bg); text-decoration: none; line-height: 1.8;}
.paper_related a:hover {border: 1.5px solid var(--btn-hover-bg); background-color: var(--btn-hover-bg); color: var(--btn-hover-text); transition: 0.1s;}

details {margin-top: 3pt;}
details > summary {font-size: 13px; color: var(--text); cursor: pointer;}
details > summary::-webkit-details-marker {display: none;}
details > summary::before {content: "TL;DR";}
details[open] {margin-top: 4pt; font-size: 13px; color: var(--text);}

/* Footer */
.footer {background-color: var(--footer-bg); width: 100%;}
.footer-content {color: var(--footer-text); font-size: 10px; padding: 6px 16px; max-width: 890px; margin: auto;}
.footer-content a {color: var(--footer-text); text-decoration: underline;}
.footer-content a:hover {color: var(--accent) !important;}

@media only screen and (max-width: 1150px) {
    .header-profile-picture, .header-text {display: block; margin: auto; text-align: center;}
    .header-profile-picture {margin-bottom: 12px; width: 140px; height: 140px;}
    body {font-size: 18px;}
    a.btn {font-size: 14px; padding: 2px 6px;}
    .header-links {line-height: 2;}  /* breathing room when the links wrap onto two lines */
}

@media only screen and (max-width: 600px) {
    .links-break {display: inline;}
    .links-sep {display: none;}
    .publication_table, .publication_table tr, .publication_table td {display: block !important; width: 100% !important; box-sizing: border-box;}
    .publication_table td {padding: 4pt 7pt !important;}
    td.row-media img, td.row-media video {width: 70% !important; margin: 12pt auto;}
    td.row-logo img {margin: 12pt auto;}
}