footer.footer, .nav-footer {
    background: rgba(255,255,255,0.0) !important; /* semi-transparent white, adjust as needed */
    color: #222 !important; /* dark text, adjust as needed */
}
@media (max-width: 768px) {
    footer.footer, .nav-footer {
        background: rgba(255,255,255,0.0) !important;
        color: #222 !important;
    }
}
footer.footer, .nav-footer {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    min-height: 0 !important;
    height: auto !important;
}
@media (max-width: 768px) {
    footer.footer, .nav-footer {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        min-height: 0 !important;
        height: 20px !important;
    }
}
@media (max-width: 768px) {
  footer img[src*="quarto.png"], img[src*="quarto.png"] {
    width: 52px !important;
    height: auto !important;
    max-width: 40vw !important;
    display: inline-block !important;
    vertical-align: middle;
  }
}
/* Force gradient background on all wrappers for highest priority */
/* Place at end for highest priority */
/* --- Responsive columns for mobile --- */
/* Quarto grid and column mobile override */
@media (max-width: 768px) {
    .grid,
    .top-grid {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    [class^="g-col-"],
    .g-col-1,
    .g-col-2,
    .g-col-5,
    .left-grid {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 20px 0 !important;
        float: none !important;
        padding: 0 !important;
    }
    body div.columns,
    body .columns,
    .container div.columns,
    .container .columns {
        display: block !important;
        flex-direction: column !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    body div.column,
    body .column,
    .container div.column,
    .container .column {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin: 0 0 20px 0 !important;
        overflow-x: visible !important;
        display: block !important;
        float: none !important;
    }
}


@media (max-width: 768px) {
    .navbar-brand {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }
    .navbar-title {
        font-size: 1.1em;
        white-space: normal;
        padding-left: 4px !important;
        margin-left: 0 !important;
        max-width: 70vw;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        vertical-align: middle;
    }
}

.navbar-brand > img {
    max-height: 50px;
}

.top-grid {
    margin-top: 50px;
    align-items: center;
    align-self: center;
    text-align: center;
}

.left-grid {
    margin-top: -300px;
    vertical-align: top;
    align-items: top;
    align-self: top;
}

.text-info {
    text-align: left;
}

p.information {
    color: white;
}

h2 {
    color: red;
}
/* --- Mobile Responsive Styles --- */
@media (max-width: 768px) {
    .top-grid {
        margin-top: 20px;
        padding: 10px;
        text-align: center;
    }
    .left-grid {
        margin-top: 0;
        padding: 10px;
        vertical-align: top;
        align-items: flex-start;
        align-self: flex-start;
    }
    .navbar-brand > img {
        max-height: 36px;
        width: 80vw;
        height: auto;
    }
    h2 {
        font-size: 1.5em;
    }
    p.information {
        font-size: 1em;
        padding: 5px;
    }
    .text-info {
        text-align: center;
        font-size: 1em;
    }
    img, svg {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
    }
    body {
        padding: 10px;
        font-size: 1em;
    }
}

/* Desktop: larger profile image */
@media (min-width: 769px) {
    .g-col-2.left-grid {
        width: auto !important;
        max-width: none !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    .left-grid img {
        max-width: 350px !important;
        max-height: 350px !important;
        width: 100%;
        height: auto;
        display: block;
    margin: 0 auto 2em auto;
    }
}

/* Mobile: smaller profile image */
@media (max-width: 768px) {
  .left-grid img {
    max-width: 180px;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }
}

.navbar-brand img,
.navbar-logo {
  max-width: 120px;
  height: auto;
  width: 100%;
  object-fit: contain;
}

@media (max-width: 768px) {
    .container-fluid,
    .navbar-container.container-fluid {
        justify-content: flex-start !important;
        display: flex !important;
        align-items: center !important;
        padding-left: 1 !important;
        padding-right: 1 !important;
        margin-left: 1 !important;
        margin-right: 1 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    .navbar-brand-container.mx-auto {
        width: 100% !important;
        flex: 1 1 auto !important;
        height: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        overflow: visible !important;
        background: none !important;
    }
    .navbar-toggler {
        margin-right: 8px !important;
    }
    .navbar-brand-logo,
    .navbar-brand {
        margin-right: 8px !important;
    }
    .navbar-title {
        height: 48px; /* or use min-height: 48px; */
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        display: block !important;
        line-height: 1.2 !important;
    }
}
@media (max-width: 768px) {
  /* Target all images and SVGs in the publications page */
  .publications-page img,
  .publications-page svg {
    max-width: 48px !important;
    max-height: 48px !important;
    width: auto !important;
    height: auto !important;
  }
  /* If you use custom classes for icons, add them here */
  img.paper-icon,
  img.book-icon {
    max-width: 48px !important;
    max-height: 48px !important;
  }
}