/*******************************************************************************
 * al-folio style for Yein Park's homepage (test version)
 * Colors, spacing and component rules follow al-folio's _themes.scss / _base.scss.
 ******************************************************************************/

:root {
  color-scheme: light;
  --global-bg-color: #ffffff;
  --global-text-color: #000000;
  --global-text-color-light: #828282;
  /* Cambridge mint (cam.ac.uk #6bbbae), darkened for readable text/links */
  --global-theme-color: #2a7f73;
  --global-hover-color: #2a7f73;
  --global-accent-bg-color: #6bbbae;
  --global-accent-text-color: #0b2b26;
  --global-accent-light-color: #d3eae6;
  --global-footer-bg-color: #1c1c1d;
  --global-footer-text-color: #e8e8e8;
  --global-footer-link-color: #ffffff;
  --global-divider-color: rgba(0, 0, 0, 0.1);
  --global-card-bg-color: #ffffff;
  --global-highlight-color: #b71c1c;
  --global-back-to-top-bg-color: rgba(0, 0, 0, 0.4);
  --global-back-to-top-text-color: #ffffff;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --global-bg-color: #1c1c1d;
  --global-text-color: #e8e8e8;
  --global-text-color-light: #828282;
  /* deep sky blue */
  --global-theme-color: #3a9ad9;
  --global-hover-color: #3a9ad9;
  --global-accent-bg-color: #3a9ad9;
  --global-accent-text-color: #0d1b26;
  --global-accent-light-color: #1f3445;
  --global-footer-bg-color: #e8e8e8;
  --global-footer-text-color: #1c1c1d;
  --global-footer-link-color: #000000;
  --global-divider-color: #424246;
  --global-card-bg-color: #212529;
  --global-highlight-color: #ff6b6b;
  --global-back-to-top-bg-color: rgba(255, 255, 255, 0.5);
  --global-back-to-top-text-color: #000000;
}

html.transition,
html.transition *,
html.transition *:before,
html.transition *:after {
  transition: all 750ms !important;
  transition-delay: 0 !important;
}

/* Typography ---------------------------------------------------------------- */

body {
  padding-top: 56px;
  padding-bottom: 70px;
  color: var(--global-text-color);
  background-color: var(--global-bg-color);
  font-family: "Roboto", sans-serif;
  font-weight: 300;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  scroll-margin-top: 66px;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
em,
div,
li,
span,
strong,
td,
th {
  color: var(--global-text-color);
}

strong,
b {
  font-weight: 500;
}

/* Text selection: Safari fills the empty space around selected text (page margins, gaps
   between blocks, line ends) up to the nearest "selection root". overflow: clip makes each
   text block its own root, so the highlight stays inside that block. Unlike overflow: hidden
   it does not create a new formatting context, so text still wraps around the profile photo. */
[role="main"],
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
.publications .title,
.publications .author,
.publications .periodical {
  overflow: clip;
}

/* Right-aligned divider headings ("Research", "2026", ...) are decorative: skip them so the
   empty space on their left is not painted. */
.projects h2.category,
.publications h2.bibliography {
  -webkit-user-select: none;
  user-select: none;
}

hr {
  border-top: 1px solid var(--global-divider-color);
}

a,
table.table a {
  color: var(--global-theme-color);
}

a:hover {
  color: var(--global-theme-color);
  text-decoration: underline;
}

.container {
  max-width: 930px;
}

/* Navbar -------------------------------------------------------------------- */

.navbar {
  box-shadow: none;
  border-bottom: 1px solid var(--global-divider-color);
  background-color: var(--global-bg-color);
  opacity: 0.95;
}

.navbar.navbar-light a:hover {
  text-decoration: none;
}

.navbar.navbar-light .navbar-brand {
  color: var(--global-text-color);
}

.navbar.navbar-light .navbar-nav .nav-item .nav-link {
  color: var(--global-text-color);
}

.navbar.navbar-light .navbar-nav .nav-item .nav-link:hover {
  color: var(--global-hover-color);
}

.navbar.navbar-light .navbar-nav .nav-item.active > .nav-link {
  background-color: inherit;
  font-weight: bolder;
  color: var(--global-theme-color);
}

.navbar-toggler {
  border: 0;
}

.navbar-toggler .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--global-text-color);
  border-radius: 1px;
  margin-bottom: 4px;
  transition: all 0.2s;
}

.navbar-toggler .top-bar {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}

.navbar-toggler .middle-bar {
  opacity: 0;
}

.navbar-toggler .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}

.navbar-toggler.collapsed .top-bar,
.navbar-toggler.collapsed .bottom-bar {
  transform: rotate(0);
}

.navbar-toggler.collapsed .middle-bar {
  opacity: 1;
}

#light-toggle {
  padding: 0;
  border: 0;
  background-color: inherit;
  color: var(--global-text-color);
  font-size: 1rem;
  cursor: pointer;
}

.navbar .toggle-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.5rem 0 0.5rem 0.75rem;
}

#light-toggle:hover {
  color: var(--global-hover-color);
}

#light-toggle i {
  color: inherit;
}

#light-toggle .toggle-icon {
  display: none;
}

html[data-theme-setting="system"] #light-toggle .toggle-system,
html[data-theme-setting="dark"] #light-toggle .toggle-dark,
html[data-theme-setting="light"] #light-toggle .toggle-light {
  display: inline-block;
}

/* Post header --------------------------------------------------------------- */

.post-header {
  margin-bottom: 1.5rem;
}

.post-title {
  font-size: 2.5rem;
  font-weight: 300;
  margin-bottom: 0.25rem;
}

.post-header .desc {
  font-size: 1rem;
  margin-bottom: 0;
}

.post-description {
  margin-bottom: 2rem;
  font-size: 0.875rem;
}

.post-description a {
  color: var(--global-theme-color);
}

article h2 {
  font-size: 1.75rem;
  font-weight: 300;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

article h2 a,
article h2 a:hover {
  color: inherit;
}

.clearfix p {
  text-align: justify;
}

/* Profile ------------------------------------------------------------------- */

.profile {
  width: 100%;
}

.profile img {
  width: 100%;
}

.profile figure {
  margin-bottom: 0;
}

/* Discourage saving the photo: no drag, no selection, no long-press menu,
   and a transparent layer on top so right-click never hits the <img>. */
.protected-img {
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.protected-img img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.protected-img::after {
  content: "";
  position: absolute;
  inset: 0;
}

.profile.float-right {
  margin-left: 1rem;
  margin-bottom: 1rem;
}

@media (min-width: 576px) {
  .profile {
    width: 30%;
  }
}

/* News ---------------------------------------------------------------------- */

.news table {
  margin-bottom: 0;
}

.news table th {
  width: 150px;
  font-weight: 500;
  padding: 0.35rem 1rem 0.35rem 0;
  vertical-align: top;
}

.news table td {
  padding: 0.35rem 0;
}

.news .news-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.4;
  padding: 0 0.4rem;
  margin-right: 0.4rem;
  border-radius: 0.125rem;
  vertical-align: 0.1em;
  background-color: var(--global-accent-light-color);
  color: var(--global-text-color);
}

.news ul {
  margin: 0.15rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.92rem;
}

@media (max-width: 575.98px) {
  .news table th {
    width: 105px;
    font-size: 0.85rem;
  }
}

/* Social icons (shared) ---------------------------------------------------- */

.social-link i::before {
  color: var(--global-text-color);
  transition: all 0.2s ease-in-out;
}

.social-link:hover {
  text-decoration: none;
}

.social-link:hover i::before {
  color: var(--global-theme-color);
}

/* Gates Cambridge flame: the PNG is used as a mask so it behaves like a monochrome icon font. */
.gates-icon {
  display: inline-block;
  width: 0.36em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: var(--global-text-color);
  -webkit-mask: url("../gates-cambridge-icon-preview.png") center / contain no-repeat;
  mask: url("../gates-cambridge-icon-preview.png") center / contain no-repeat;
  transition: background-color 0.2s ease-in-out;
}

.social-link:hover .gates-icon {
  background-color: var(--global-theme-color);
}

/* Hugging Face: only added in Font Awesome 7.3, so "fa-brands fa-hugging-face" is shimmed here
   with the Simple Icons logo (CC0). It takes the surrounding text color like any other icon. */
.fa-hugging-face {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background-color: currentColor;
  -webkit-mask: url("../img/huggingface.svg") center / contain no-repeat;
  mask: url("../img/huggingface.svg") center / contain no-repeat;
}

/* Navbar social icons (top-left) */
.navbar .navbar-social {
  display: flex;
  align-items: center;
  font-size: 1.15rem;
  line-height: 1;
}

.navbar .navbar-social .social-link {
  margin-right: 0.8rem;
}

.navbar .navbar-brand + .navbar-social {
  margin-left: 0.25rem;
}

/* On sub-pages keep the name and drop the icons when the screen is narrow. */
@media (max-width: 767.98px) {
  .navbar .navbar-brand.has-social + .navbar-social {
    display: none;
  }
}

/* Social -------------------------------------------------------------------- */

.social {
  text-align: center;
  margin-top: 3rem;
}

.social .contact-icons {
  font-size: 3rem;
}

.social .contact-icons a {
  margin: 0 0.9rem;
}

@media (max-width: 575.98px) {
  .social .contact-icons {
    font-size: 2.2rem;
  }

  .social .contact-icons a {
    margin: 0 0.5rem;
  }

  /* Portrait photo would fill the whole first screen on phones. */
  .profile.float-right {
    width: 70%;
    float: none !important;
    margin: 0 auto 1.5rem;
  }
}



/* Publications -------------------------------------------------------------- */

.publications {
  margin-top: 1rem;
}

.publications h2.bibliography {
  color: var(--global-divider-color);
  border-top: 1px solid var(--global-divider-color);
  padding-top: 1rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  text-align: right;
  font-size: 2rem;
  font-weight: 300;
}

html[data-theme="dark"] .publications h2.bibliography {
  color: #4c4c50;
}

.publications ol.bibliography {
  list-style: none;
  padding: 0;
  margin-top: 0;
}

.publications ol.bibliography li {
  margin-bottom: 1.25rem;
}

.publications ol.bibliography li .abbr {
  margin-bottom: 0.5rem;
}

.publications ol.bibliography li .abbr abbr {
  display: inline-block;
  background-color: var(--global-accent-bg-color);
  color: var(--global-accent-text-color) !important;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.35em 0.4em;
  margin-bottom: 0.4rem;
  white-space: normal;
  line-height: 1.2;
  text-decoration: none;
  cursor: default;
}

.publications ol.bibliography li .abbr abbr.award {
  background-color: transparent;
  color: var(--global-highlight-color) !important;
  border: 1px solid var(--global-highlight-color);
}

.publications ol.bibliography li .title {
  font-weight: bolder;
}

.publications ol.bibliography li .author > em {
  border-bottom: 1px solid;
  font-style: normal;
}

.publications ol.bibliography li .author > span.more-authors {
  color: var(--global-text-color-light);
  border-bottom: 1px dashed var(--global-text-color-light);
  cursor: pointer;
}

.publications ol.bibliography li .author > span.more-authors:hover {
  color: var(--global-text-color);
  border-bottom-color: var(--global-text-color);
}

.publications ol.bibliography li .periodical em {
  font-style: italic;
}

.publications ol.bibliography li .links {
  margin-top: 0.35rem;
}

.publications ol.bibliography li .links a.btn {
  color: var(--global-text-color);
  border: 1px solid var(--global-text-color);
  background: transparent;
  box-shadow: none;
  padding: 0.25rem 1rem;
  margin: 0 0.25rem 0.25rem 0;
  font-size: 0.7rem;
  text-transform: uppercase;
  border-radius: 0.125rem;
}

.publications ol.bibliography li .links a.btn:hover {
  color: var(--global-theme-color);
  border-color: var(--global-theme-color);
  text-decoration: none;
}

.pub-note {
  font-size: 0.875rem;
  color: var(--global-text-color-light);
}

/* Projects ------------------------------------------------------------------ */

.projects .card {
  background-color: var(--global-card-bg-color);
  border: 1px solid var(--global-divider-color);
  height: 100%;
  transition: box-shadow 0.2s ease-in-out;
}

.projects .card:hover {
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.projects .card .card-title {
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--global-text-color);
}

.projects .card .card-date {
  font-size: 0.8rem;
  color: var(--global-text-color-light);
  margin-bottom: 0.6rem;
}

.projects .card ul {
  padding-left: 1.1rem;
  margin-bottom: 0;
  font-size: 0.92rem;
}

.projects .card .card-links {
  margin-top: 0.75rem;
}

.projects .card .card-links a {
  font-size: 0.85rem;
  margin-right: 0.75rem;
}

.projects .col {
  padding-bottom: 1.5rem;
}

.projects h2.category {
  color: var(--global-divider-color);
  border-bottom: 1px solid var(--global-divider-color);
  padding-top: 0.5rem;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  text-align: right;
  font-size: 2rem;
  font-weight: 300;
}

html[data-theme="dark"] .projects h2.category {
  color: #4c4c50;
}

.badge-ongoing {
  font-size: 0.65rem;
  font-weight: 500;
  vertical-align: middle;
  margin-left: 0.35rem;
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--global-theme-color);
  color: var(--global-theme-color);
  border-radius: 0.125rem;
}

/* Footer -------------------------------------------------------------------- */

footer.fixed-bottom {
  background-color: var(--global-footer-bg-color);
  font-size: 0.75rem;
}

footer.fixed-bottom .container {
  color: var(--global-footer-text-color);
  padding-top: 9px;
  padding-bottom: 8px;
  text-align: center;
}

footer.fixed-bottom a {
  color: var(--global-footer-link-color);
}

footer.fixed-bottom a:hover {
  color: var(--global-theme-color);
  text-decoration: none;
}

/* Back to top --------------------------------------------------------------- */

#back-to-top {
  position: fixed;
  bottom: 50px;
  right: 30px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  color: var(--global-back-to-top-text-color);
  background: var(--global-back-to-top-bg-color);
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease-in-out;
  cursor: pointer;
}

#back-to-top i {
  color: inherit;
}

#back-to-top.show {
  opacity: 1;
  visibility: visible;
}