@charset "utf-8";
body {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    padding-top: 5.0rem;
    /* Sticky footer: fill at least the viewport so the footer sits at the
       bottom even when a page has little content. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
}

.card {
    border-radius: 0.8rem!important;
}

.card-img-overlay {
    border-radius: 0.8rem!important;
}

.rounded-xl {
    border-radius: 0.8rem!important;
}

.rounded-xl-bottom {
    border-bottom-right-radius: 0.8rem !important;
    border-bottom-left-radius: 0.8rem !important;
}

.rounded-xl-top {
    border-top-left-radius: 0.8rem !important;
    border-top-right-radius: 0.8rem !important;
}


.text-profile-position {
    font-weight: 400;
}

.text-profile-bio {
    /* font-family: "Raleway"; */
    font-weight: 400;
}

.navbar {
    background-color: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.inline-badge {
    height: 16px;
    vertical-align: -10%;
    margin-right: 2px;
    line-break: unset;
}

/* Colored rounded square used in place of an institution logo. */
.badge-square {
    display: inline-block;
    height: 16px;
    width: 16px;
    border-radius: 4px;
    vertical-align: -10%;
    margin-right: 2px;
    line-break: unset;
}

/* Larger variant used in the Education / Experience lists. */
.badge-square-lg {
    display: inline-block;
    height: 18px;
    width: 18px;
    border-radius: 4px;
    flex-shrink: 0;
}

/* Time-of-day icon in the navbar (sun during the day, moon at night). */
.time-of-day .fa-sun {
    color: #f5a623;
}
.time-of-day .fa-moon {
    color: #6c7a89;
}

.no-break {
    white-space: nowrap;
}

.cover-image {
    width: 180px;
    max-height: 120px;
}

.abstract-body {
    min-height: 100px;
}

img.lazy {
    background-image: url('images/loading.gif');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 50px 50px;
    min-height: 80px;
}

div.lazy {
    background-image: url('images/loading.gif');
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 50px 50px;
    min-height: 80px;
}

.badge-publication {
    font-size: 100%;
}

.email-text {
    font-family: Source Code Pro, monospace;
}

/* Showcase card banner (shown when a card has no real image): a colored header
   with a centered icon so the card still reads as an "image card". */
.showcase-banner {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.showcase-banner i {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.92);
}
.showcase-cover {
    height: 150px;
    object-fit: cover;
}

/* Wider cards (width: 6 or higher in frontmatter) — scale up the cover, banner,
   title, and inner padding so the card grows in both dimensions instead of just
   stretching horizontally. */
@media (min-width: 768px) {
    .grid-item.col-md-6 .showcase-cover,
    .grid-item.col-md-6 .showcase-banner,
    .grid-item.col-md-7 .showcase-cover,
    .grid-item.col-md-7 .showcase-banner,
    .grid-item.col-md-8 .showcase-cover,
    .grid-item.col-md-8 .showcase-banner {
        height: 260px;
    }
    .grid-item.col-md-6 .showcase-banner i,
    .grid-item.col-md-7 .showcase-banner i,
    .grid-item.col-md-8 .showcase-banner i {
        font-size: 4.5rem;
    }
    .grid-item.col-md-6 .card-title,
    .grid-item.col-md-7 .card-title,
    .grid-item.col-md-8 .card-title {
        font-size: 1.5rem;
    }
    .grid-item.col-md-6 .showcase-card > .showcase-card-inner > .p-4,
    .grid-item.col-md-7 .showcase-card > .showcase-card-inner > .p-4,
    .grid-item.col-md-8 .showcase-card > .showcase-card-inner > .p-4 {
        padding: 1.75rem !important;
    }
}

/* Small tool/skill tags on showcase cards. */
.skill-badge {
    background-color: #eef2f7;
    color: #334155;
    font-weight: 500;
    font-size: 74%;
    margin: 0 0.25rem 0.35rem 0;
}
html[data-theme="dark"] .skill-badge {
    background-color: #2c3138;
    color: #cbd5e1;
}

/* Embedded YouTube player in publication modal — 16:9 responsive. */
.pub-video-embed {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    background: #000;
}
.pub-video-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Publications page: dense academic listing (Google Scholar / faculty page style). */
.pub-year-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 2rem;
    margin-bottom: 0.4rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #d1d5db;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #374151;
}
.pub-year-count {
    font-size: 0.7rem;
    font-weight: 500;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.pub-year-block {
    /* no border/background — the list itself is the content */
}
html[data-theme="dark"] .pub-year-heading {
    color: #d1d5db;
    border-bottom-color: #303541;
}
html[data-theme="dark"] .pub-year-count { color: #6b7280; }

/* Showcase section headings — icon + hairline underline, spaced above. */
.showcase-section-heading {
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    padding-bottom: 0.55rem;
    border-bottom: 2px solid #e5e7eb;
    font-size: 1.65rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.showcase-section-heading i {
    color: #6366f1;
    font-size: 1.1rem;
}
html[data-theme="dark"] .showcase-section-heading {
    border-bottom-color: #303541;
}

/* Cover: subtle bottom gradient for depth, and hover zoom that stays clipped. */
.showcase-card .showcase-cover {
    transition: transform 0.35s ease, filter 0.35s ease;
}
.showcase-card:hover .showcase-cover {
    transform: scale(1.04);
    filter: brightness(1.05);
}
/* Gradient overlay lives below the cover — pointer-events none so clicks pass through. */
.showcase-card-inner {
    position: relative;
}
.showcase-card-inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 150px;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.18) 100%);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.showcase-card:hover .showcase-card-inner::before {
    opacity: 1;
}

/* Fixed "Highlights" badge overlaid on the intro carousel — centered above the
   pagination indicators at the bottom of the carousel. */
.carousel-highlight-badge {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    padding: 0.25rem 0.9rem;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 999px;
    letter-spacing: 0.02em;
    pointer-events: none;
    white-space: nowrap;
}

/* Reactive showcase cards: grow slightly on hover; open an expanded modal on click.
   Height is content-driven — cards without descriptions (e.g. teaching) stay
   compact while structured cards grow to fit their skill badges. */
.showcase-card {
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    isolation: isolate;
}
.showcase-card > .showcase-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.showcase-card > .showcase-card-inner > .p-4 {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
/* On the card preview, clip skill badges to a single row — overflow is revealed
   in the expanded modal. */
.showcase-card .showcase-skills {
    max-height: 1.7em;
    overflow: hidden;
}
.showcase-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.12) !important;
    z-index: 2;
}
.showcase-card-inner {
    cursor: pointer;
    outline: none;
}

/* Showcase expanded modal. */
.showcase-modal-cover {
    max-height: 340px;
    object-fit: cover;
}
.showcase-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.9rem;
    z-index: 3;
    width: 2rem;
    height: 2rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    opacity: 1;
    text-shadow: none;
}
.showcase-gallery-img {
    height: 120px;
    object-fit: cover;
}
html[data-theme="dark"] .modal-content {
    background-color: #1e2227;
    color: #e4e6eb;
}
html[data-theme="dark"] .showcase-modal-close {
    background: rgba(30, 34, 39, 0.9);
    color: #e4e6eb;
}

/* Publications: professional card with fixed height so the thumbnail can never
   grow taller than the card body. */
/* al-folio style: flat list entry, no card box — the thumbnail stands alone
   with a gap, and the text sits beside it. Subtle rounded hover only. */
.pub-card {
    cursor: pointer;
    padding: 0.6rem;
    border-radius: 0.5rem;
    transition: background-color 0.15s ease;
}
.pub-card:hover {
    background-color: rgba(15, 23, 42, 0.035);
}
html[data-theme="dark"] .pub-card:hover {
    background-color: rgba(255, 255, 255, 0.045);
}

/* Fixed 140×160 thumbnail — matches card min-height so no whitespace, and the
   image is clipped inside via object-fit cover. If the body is taller than 160px
   the thumb aligns to the top and the body determines row height. */
.pub-thumb-wrap {
    position: relative;
    width: 150px;
    height: 150px;
    background: #f3f4f6;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 0.5rem;
    margin-right: 1.1rem;
    transition: box-shadow 0.2s ease;
}
/* Hover: lift the thumbnail with a soft shadow. */
.pub-card:hover .pub-thumb-wrap {
    box-shadow: 0 0.4rem 0.9rem rgba(0, 0, 0, 0.16);
}
html[data-theme="dark"] .pub-card:hover .pub-thumb-wrap {
    box-shadow: 0 0.4rem 0.9rem rgba(0, 0, 0, 0.5);
}
/* Selected/highlighted paper: little star in the corner of the thumbnail. */
.pub-selected-badge {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    width: 1.4rem;
    height: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    color: #fbbf24;
    border-radius: 999px;
    font-size: 0.7rem;
    backdrop-filter: blur(2px);
}
.pub-thumb {
    width: 150px;
    height: 150px;
    object-fit: cover;
    display: block;
    transition: transform 0.28s ease;
}
/* Hover: zoom the thumbnail inside its clipped rounded frame. */
.pub-card:hover .pub-thumb {
    transform: scale(1.07);
}
.pub-thumb-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 1.75rem;
    width: 150px;
    height: 150px;
}
html[data-theme="dark"] .pub-thumb-wrap { background: #262b33; }
html[data-theme="dark"] .pub-thumb-fallback { color: #6b7280; }

.min-width-0 { min-width: 0; }

.pub-title {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.35;
    color: #0f172a;
    letter-spacing: -0.005em;
}
html[data-theme="dark"] .pub-title { color: #f1f5f9; }
.pub-authors {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #374151;
}
.pub-authors .text-body {
    color: inherit !important;
}
html[data-theme="dark"] .pub-authors,
html[data-theme="dark"] .pub-authors .text-body {
    color: #cbd5e1 !important;
}
.pub-venue {
    font-size: 0.85rem;
    color: #64748b;
    letter-spacing: 0.005em;
}
html[data-theme="dark"] .pub-venue { color: #94a3b8; }
.pub-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}
.pub-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #4f46e5;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    padding: 0.15rem 0.55rem;
    border: 1px solid #e0e7ff;
    border-radius: 0.3rem;
    background: #f5f3ff;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
.pub-links a i {
    font-size: 0.75rem;
    opacity: 0.85;
}
.pub-links a:hover {
    background: #ede9fe;
    border-color: #c7d2fe;
    text-decoration: none;
    transform: translateY(-1px);
}
html[data-theme="dark"] .pub-links a {
    color: #a5b4fc;
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.25);
}
html[data-theme="dark"] .pub-links a:hover {
    background: rgba(99, 102, 241, 0.22);
    border-color: rgba(99, 102, 241, 0.4);
}
.pub-link-sep { display: none; }

/* Modal + carousel author names need the same dark-theme fix. */
html[data-theme="dark"] .text-body { color: #d1d5db !important; }
/* Publication links as subtle pill buttons for a cleaner, uniform look. */
.abstract-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.5rem !important;
}
.abstract-links a {
    display: inline-block;
    padding: 0.02rem 0.6rem;
    border: 1px solid #d7dde5;
    border-radius: 999px;
    font-size: 0.78rem;
    line-height: 1.5;
    color: #475569;
    text-decoration: none;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.abstract-links a:hover {
    background-color: #f5a623;
    border-color: #f5a623;
    color: #fff;
}
html[data-theme="dark"] .abstract-links a {
    border-color: #3a414b;
    color: #cbd5e1;
}
html[data-theme="dark"] .abstract-links a:hover {
    background-color: #f5a623;
    border-color: #f5a623;
    color: #1e2227;
}

/* BibTeX block in the publication modal. */
.bibtex-text {
    background-color: #f6f8fa;
    white-space: pre-wrap;
    word-break: break-word;
}
html[data-theme="dark"] .bibtex-text {
    background-color: #0f1216;
    color: #cbd5e1;
}

/* News rows: subtle highlight on hover. */
.news-item {
    border-radius: 0.4rem;
    transition: background-color 0.15s ease;
}
.news-item:hover {
    background-color: #f4f6f9;
}
html[data-theme="dark"] .news-item:hover {
    background-color: #232830;
}

/* Carousel "fill" mode: stretches to fill its card so it matches the height of
   a neighboring card (e.g. the Welcome card in the showcase intro row). */
.carousel-fill,
.carousel-fill .carousel,
.carousel-fill .carousel-inner,
.carousel-fill .carousel-item,
.carousel-fill .carousel-item .lazy {
    height: 100%;
}
.carousel-fill .carousel-item > a {
    display: block;
    height: 100%;
}
/* When columns stack on small screens, percentage heights collapse — give the
   carousel a sensible fixed fallback height there. */
@media (max-width: 767.98px) {
    .carousel-fill .carousel-inner {
        height: 300px;
    }
}

/* Cursor affordance for the clickable time-of-day / dark-mode toggle. */
.time-of-day {
    cursor: pointer;
}

/* =========================================================================
   Dark mode
   The theme is applied via html[data-theme="dark"] (set in the <head>).
   These rules override the Bootstrap "light" utility classes the site uses.
   ========================================================================= */
html[data-theme="dark"] body,
html[data-theme="dark"] body.bg-light {
    background-color: #121417 !important;
    color: #e4e6eb;
}

html[data-theme="dark"] .bg-white {
    background-color: #1e2227 !important;
}

html[data-theme="dark"] .card {
    background-color: #1e2227;
    color: #e4e6eb;
}

html[data-theme="dark"] .navbar {
    background-color: rgba(18, 20, 23, 0.6) !important;
}

html[data-theme="dark"] .navbar-brand,
html[data-theme="dark"] .navbar-light .navbar-brand,
html[data-theme="dark"] .navbar-light .navbar-nav .nav-link,
html[data-theme="dark"] .navbar-toggler {
    color: #e4e6eb;
}

html[data-theme="dark"] .navbar-light .navbar-nav .active > .nav-link {
    color: #ffffff;
}

html[data-theme="dark"] .text-muted {
    color: #9aa0a6 !important;
}

html[data-theme="dark"] a {
    color: #6ea8fe;
}

html[data-theme="dark"] a:hover,
html[data-theme="dark"] a:focus {
    color: #9ac2ff;
}

html[data-theme="dark"] hr {
    border-top-color: #2c3138;
}

html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-left,
html[data-theme="dark"] .border-right {
    border-color: #2c3138 !important;
}

html[data-theme="dark"] .img-thumbnail {
    background-color: #1e2227;
    border-color: #2c3138;
}

html[data-theme="dark"] .shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] .badge-light {
    background-color: #2c3138;
    color: #e4e6eb;
}

/* Smooth the transition when toggling. */
body,
.card,
.navbar,
.footer {
    transition: background-color 0.25s ease, color 0.25s ease;
}