/* if you change css, it's recommend to not delete the line in the files, but overwrite it here.
For example, if somewhere is a line: .redButton{ background-color:#C33; }, you can overwrite it here to .redButton{ background-color:#999; } and leave the other line
this is easier for upgrading ¨*/

/* Modern type system — apply IBM Plex Sans to form controls too (they don't inherit by default) */
html,
body,
input,
select,
textarea,
button {
    font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, Tahoma, Helvetica, sans-serif;
}

/* DUTH logo in the header — placed on a white plate so the official (black + blue) artwork stays legible on the dark header */
.duth-logo {
    float: left;
    display: block;
    background: #fff;
    border-radius: 6px;
    padding: 7px 11px;
    margin: 4px 14px 4px 5px;
    line-height: 0;
}

.duth-logo img {
    height: 64px;
    width: auto;
    display: block;
    border: none;
}

/* Site footer — professional, university-style contact band */
.site-footer {
    clear: both;
    background-color: #0a0b0d;
    color: #b8bec6; /* fixed light text — the footer is always dark in both themes */
    margin-top: 50px;
}

/* thin tricolor brand bar (the VCG green / orange / blue identity) */
.site-footer-accent {
    height: 3px;
    background: linear-gradient(90deg,
        var(--tile-green) 0 33.34%,
        var(--tile-orange) 33.34% 66.67%,
        var(--tile-blue) 66.67% 100%);
}

.site-footer-inner {
    max-width: 1080px;
    margin: 0 auto;
    padding: 44px 36px 30px;
    display: grid;
    grid-template-columns: 2fr 1fr 1.5fr;
    gap: 40px;
}

.site-footer h4 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #f3f4f6;
    margin: 0 0 14px 0;
}

.site-footer p {
    font-size: 13.5px;
    line-height: 1.65;
    margin: 0 0 10px 0;
    color: #b8bec6;
}

.footer-tagline {
    max-width: 42ch;
}

.footer-affil {
    color: #8d949c;
}

.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer li {
    margin-bottom: 9px;
}

.site-footer a {
    color: #cdd2d8;
    text-decoration: none;
    transition: color 0.2s ease;
}

.site-footer a:hover {
    color: var(--tile-orange);
}

.site-footer .footer-map-link {
    color: #b8bec6;
    border-bottom: 1px dotted #586069;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.site-footer .footer-map-link:hover {
    color: var(--tile-orange);
    border-bottom-color: var(--tile-orange);
}

.site-footer-bottom {
    max-width: 1080px;
    margin: 0 auto;
    padding: 16px 36px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12px;
    color: #8d949c;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

@media (max-width: 760px) {
    .site-footer-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* Floating "contact us" button, top-right */
#contact-float {
    position: fixed;
    top: 105px;
    right: 22px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--tile-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
    z-index: 1000;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

#contact-float:hover {
    transform: scale(1.08);
    background-color: var(--tile-orange);
    color: #fff;
}

#contact-float svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* Homepage "Research" anchor tile — clean dark gradient (replaces the old wordcloud image) */
.tile.research-anchor {
    background:
        radial-gradient(130% 110% at 78% 12%, rgba(225, 90, 26, 0.45), transparent 60%),
        radial-gradient(120% 100% at 12% 95%, rgba(28, 111, 181, 0.40), transparent 55%),
        #14110d !important;
}

.tile.research-anchor .tileTitle {
    font-size: 30px;
}

.tile.research-anchor .tileDesc {
    color: #d8d0c2;
    line-height: 1.5;
}

/* Compact News/Events live tiles — smaller label + clamp the long real headlines cleanly */
.tile.live-mini .tileTitle {
    font-size: 17px;
    margin-top: 2px;
}

.tile.live-mini .livetile {
    font-size: 12px;
    line-height: 1.35;
    margin-top: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Welcome hero — clean headline + stats line (Layout B), no icon */
.tile.welcome-hero .tileTitle {
    font-size: 21px;
    line-height: 1.22;
    margin: 16px 18px 0 16px;
    max-width: 430px;
}

.tile.welcome-hero .tileDesc {
    position: absolute;
    bottom: 14px;
    left: 16px;
    right: 16px;
    font-size: 12.5px;
    letter-spacing: 0.02em;
    opacity: 0.92;
}

.orange {
    color: var(--tile-orange);
}

.blue {
    color: var(--tile-blue);
}

.green {
    color: var(--tile-green);
}

/* Research page image styles */
figure.images {
    margin: 15px;
    border: 1px solid var(--tile-green);
    max-width: 30%;
}

figure.images img {
    width: 100%;
    display: block;
}

figure.images.float-right {
    float: right;
    margin-left: 20px;
    margin-right: 0;
}

figure.images.float-left {
    float: left;
    margin-right: 20px;
    margin-left: 0;
}

/* Clear floats after content sections */
hr {
    clear: both;
}

/* Research page text alignment */
#content p,
#content li {
    text-align: justify;
}

/* Publications slider styles */
.sliderWrapper {
    margin-bottom: 15px;
}

.sliderHead {
    cursor: pointer;
    padding: 10px;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
}

.sliderHead:hover {
    background-color: #e9e9e9;
}

.sliderHead h2 {
    margin: 0;
    display: inline-block;
}

.sliderImage {
    vertical-align: middle;
    margin-right: 10px;
    transition: transform 0.3s;
}

.sliderContent {
    padding: 10px 20px;
    border: 1px solid #ddd;
    border-top: none;
}

.sliderContent ol {
    margin: 0;
    padding-left: 30px;
}

.sliderContent li {
    margin-bottom: 10px;
    line-height: 1.5;
}

/* Modern Card Layout for News and Events */
.card-grid {
    display: grid;
    grid-template-columns: 1fr; /* Single column for all breakpoints */
    gap: 25px;
    margin-bottom: 30px;
    margin-top: 20px;
}

.card {
    background-color: var(--bg-page-content);
    border: 1px solid var(--border-color);
    padding: 22px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background-color: var(--tile-green); /* Green accent by default */
    opacity: 0.7;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--box-shadow);
    border-color: var(--border-light);
}

.card-header {
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.card-title {
    margin: 0 0 8px 0;
    font-size: 1.6em;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-main);
}

.card-title a {
    color: var(--text-main);
    text-decoration: none;
}

.card-title a:hover {
    color: var(--tile-green);
}

.card-meta {
    font-size: 1em; /* Increased font size */
    color: var(--text-content);
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}

.card-date {
    color: var(--tile-green);
    font-weight: bold;
}

.card-content {
    font-size: 1.05em;
    line-height: 1.6;
    color: var(--text-content);
    flex-grow: 1;
}

.card-content p {
    margin-bottom: 10px;
}

.card-content a {
    color: var(--tile-orange);
    text-decoration: none;
}

.card-content a:hover {
    text-decoration: underline;
}

/* Event specific styles */
.card.event-card::before {
    background-color: var(--tile-orange); /* Orange accent for events */
}

.card.event-card .card-date {
    color: var(--tile-orange);
}

.event-location-wrapper {
    margin-top: 10px;
    font-size: 1em; /* Increased font size */
    color: var(--text-content);
    display: flex;
    align-items: flex-start;
}

.event-location-icon {
    margin-right: 6px;
    color: var(--tile-orange);
}

.event-links {
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

/* Member Card Styles */
.member-card {
    flex-direction: row; /* Image left, text right */
    align-items: center;
    gap: 20px;
}

.member-card::before {
    background-color: var(--tile-blue); /* Blue accent */
}

.member-image-wrapper {
    flex-shrink: 0;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--tile-blue);
}

.member-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-info {
    flex-grow: 1;
}

.member-name {
    font-size: 1.5em;
    color: var(--text-main);
    margin: 0 0 5px 0;
    font-weight: 600;
}

.member-role {
    font-size: 1.1em;
    color: var(--tile-orange);
    margin-bottom: 8px;
    font-style: italic;
}

.member-credentials {
    font-size: 0.95em;
    color: var(--text-content);
    margin-bottom: 10px;
}

.member-contact {
    font-size: 0.95em;
    color: var(--text-content);
}

.member-contact a {
    color: var(--tile-green);
    text-decoration: none;
}

.member-contact a:hover {
    text-decoration: underline;
}

/* Research Card Styles — the whole card is a link (clicking anywhere goes to
   that research area, same as "Read more") */
.card.research-card::before {
    background-color: var(--tile-blue); /* Blue accent */
}

a.card.research-card { text-decoration: none; color: inherit; cursor: pointer; }
.research-card .card-title { transition: color 0.15s ease; }
.research-card:hover .card-title { color: var(--tile-blue); }
.research-card .card-readmore { color: var(--tile-orange); }
.research-card:hover .card-readmore { text-decoration: underline; }

/* Publication Styles */
.publication-section {
    margin-bottom: 40px;
}

.publication-section h2 {
    font-size: 1.8em;
    color: var(--text-main);
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.publication-list {
    list-style: decimal;
    padding-left: 3.2em;
    margin: 0;
}

/* Sequential number per category — the <ol reversed> makes the newest paper
   show the category total (e.g. the top Journal shows 98). */
.publication-item::marker {
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.95em;
}

/* Count badge shown next to each section heading */
.pub-count {
    display: inline-block;
    font-size: 0.55em;
    font-weight: 700;
    color: var(--tile-green);
    border: 1px solid var(--tile-green);
    border-radius: 20px;
    padding: 2px 12px;
    vertical-align: middle;
    margin-left: 10px;
}

/* Publication type filter (All / Journals / Book Chapters / Conferences / Other) */
.pub-type-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 18px 0 4px 0;
}

.pub-type-btn {
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-content);
    padding: 7px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin: 0;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pub-type-btn:hover {
    background-color: transparent;
    color: var(--text-main);
    border-color: var(--border-light);
}

.pub-type-btn.active {
    background-color: var(--tile-blue);
    border-color: var(--tile-blue);
    color: #fff;
}

.publication-item {
    background-color: var(--bg-page-content);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--tile-green);
    padding: 20px;
    margin-bottom: 15px;
    transition: background-color 0.2s, box-shadow 0.2s;
}

.publication-item:hover {
    box-shadow: var(--box-shadow);
}

.publication-year {
    display: inline-block;
    background-color: var(--tile-green);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: bold;
    margin-right: 10px;
    vertical-align: middle;
}

.publication-content {
    font-size: 1.1em;
    color: var(--text-content);
    line-height: 1.6;
}

.publication-title {
    font-weight: bold;
    color: var(--text-main);
}

.publication-authors {
    color: var(--text-muted);
}

.publication-venue {
    font-style: italic;
    color: var(--tile-orange);
}

/* "Read here" link button under publications that have a URL/DOI */
.pub-read {
    margin-top: 10px;
}

.pub-read-link {
    display: inline-block;
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--tile-blue);
    text-decoration: none;
    border: 1px solid var(--tile-blue);
    border-radius: 2px;
    padding: 4px 12px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pub-read-link:hover {
    background-color: var(--tile-blue);
    color: #fff;
}

/* ===================== Research-led landing (Direction A) ===================== */
/* Text top navigation */
#nav { float: right; margin-top: 14px; max-width: 680px; text-align: right; }
#nav .navItem {
    display: inline-block;
    padding: 6px 11px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-content);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}
#nav .navItem:hover { color: var(--text-main); }
#nav .navItem.navActive { color: var(--text-main); border-bottom-color: var(--nav-active-border); }

#vcg-landing { padding: 6px 0 24px; }

#vcg-landing .vcg-section { margin: 0 0 36px; }
#vcg-landing .vcg-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
#vcg-landing .vcg-section-head h2 { font-size: 19px; font-weight: 600; color: var(--text-main); margin: 0; }
#vcg-landing .vcg-section-head a { font-size: 13px; color: var(--text-link); text-decoration: none; white-space: nowrap; }
#vcg-landing .vcg-section-head a:hover { color: var(--text-link-hover); }

/* Research areas is the homepage's main event: give its heading and carousel
   figure noticeably more presence than the other sections below it. */
#vcg-research .vcg-section-head h2 { font-size: 27px; letter-spacing: -0.01em; }
#vcg-research .vcg-section-head a { font-size: 14px; }

/* Research-area cards */
/* Research areas — figure + text carousel */
#vcg-landing .vcg-rcarousel { position: relative; }
#vcg-landing .vcg-rc-viewport { overflow: hidden; }
#vcg-landing .vcg-rc-track { display: flex; transition: transform 0.8s ease-in-out; }
/* The whole slide is one link (clicking anywhere — image, title, description —
   goes to the research area, same as "Read more") */
#vcg-landing .vcg-rc-slide { flex: 0 0 100%; display: flex; align-items: center; gap: 38px; padding: 4px 2px; color: inherit; text-decoration: none; cursor: pointer; }
#vcg-landing .vcg-rc-fig { flex: 0 0 44%; display: block; overflow: hidden; }
#vcg-landing .vcg-rc-fig img { display: block; width: 100%; height: 380px; object-fit: cover; transition: transform 0.25s ease; }
#vcg-landing .vcg-rc-slide:hover .vcg-rc-fig img { transform: scale(1.03); }
/* Text panel: pushed right of the image with generous breathing room, and a
   left accent rule so it reads as its own deliberate block rather than
   just "whatever space was left over". */
#vcg-landing .vcg-rc-text { flex: 1 1 auto; min-width: 0; display: block; padding-left: 30px; border-left: 2px solid var(--border-color); }
#vcg-landing .vcg-rc-kicker { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tile-blue); margin: 0 0 8px; }
#vcg-landing .vcg-rc-text h3 { font-size: 25px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-main); margin: 0 0 14px; transition: color 0.15s ease; }
#vcg-landing .vcg-rc-slide:hover .vcg-rc-text h3 { color: var(--text-link); }
#vcg-landing .vcg-rc-text p { font-size: 15px; line-height: 1.72; color: var(--text-content); margin: 0 0 18px; max-width: 54ch; }
#vcg-landing .vcg-rc-link { display: inline-block; font-size: 14px; font-weight: 500; color: var(--text-link); transition: color 0.15s ease; }
#vcg-landing .vcg-rc-slide:hover .vcg-rc-link { color: var(--text-link-hover); }
#vcg-landing .vcg-rc-dots { display: flex; justify-content: center; gap: 10px; margin-top: 22px; }
#vcg-landing .vcg-rc-dot { width: 11px; height: 11px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(7, 98, 173, 0.3); transition: background 0.15s ease, transform 0.15s ease; }
#vcg-landing .vcg-rc-dot:hover { background: rgba(7, 98, 173, 0.55); }
#vcg-landing .vcg-rc-dot.is-active { background: #0762ad; transform: scale(1.15); }

/* Projects — slow continuous carousel */
#vcg-landing .vcg-marquee { overflow: hidden; padding: 16px 0; }
#vcg-landing .vcg-track { display: flex; width: max-content; animation: vcg-scroll 45s linear infinite; }
#vcg-landing .vcg-marquee:hover .vcg-track,
#vcg-landing .vcg-marquee:focus-within .vcg-track { animation-play-state: paused; }
#vcg-landing .vcg-track-set { display: flex; align-items: center; }
#vcg-landing .vcg-proj { display: inline-flex; flex: none; flex-direction: column; align-items: center; justify-content: center; gap: 11px; width: 190px; padding: 0 20px; color: var(--text-muted); font-size: 12.5px; text-decoration: none; cursor: pointer; }
#vcg-landing .vcg-proj img { max-height: 66px; max-width: 154px; width: auto; object-fit: contain; }
#vcg-landing .vcg-proj span { text-align: center; line-height: 1.3; }
#vcg-landing .vcg-proj:hover { color: var(--text-main); }
@keyframes vcg-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* News + events */
#vcg-landing .vcg-news-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
#vcg-landing .vcg-news-col { border: 1px solid var(--border-color); border-radius: 8px; padding: 6px 20px 16px; background: var(--bg-page-content); }
#vcg-landing .vcg-news-item { display: flex; gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--border-color); text-decoration: none; }
#vcg-landing .vcg-news-item:last-child { border-bottom: 0; }
#vcg-landing .vcg-news-item time { flex: none; min-width: 88px; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
#vcg-landing .vcg-news-item span { font-size: 13.5px; line-height: 1.4; color: var(--text-content); }
#vcg-landing .vcg-news-item:hover span { color: var(--text-main); }
#vcg-landing .vcg-empty { font-size: 13px; color: var(--text-muted); }

@media (max-width: 760px) {
    #nav { float: none; text-align: left; margin-top: 8px; }
    #vcg-landing .vcg-rc-slide { flex-direction: column; align-items: stretch; gap: 16px; }
    #vcg-landing .vcg-rc-fig { flex-basis: auto; }
    #vcg-landing .vcg-rc-fig img { height: 210px; }
    #vcg-landing .vcg-rc-text { padding-left: 0; border-left: 0; }
    #vcg-landing .vcg-rc-text h3 { font-size: 20px; }
    #vcg-research .vcg-section-head h2 { font-size: 21px; }
    #vcg-landing .vcg-news-grid { grid-template-columns: 1fr; gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    #vcg-landing .vcg-track { animation: none; flex-wrap: wrap; justify-content: center; gap: 8px 0; }
    #vcg-landing .vcg-track-set { flex-wrap: wrap; justify-content: center; }
    #vcg-landing .vcg-track-set[aria-hidden="true"] { display: none; }
}

/* ===================== Wider, modern header ===================== */
#wrapper { margin: 0; }
#headerWrapper { position: relative; min-height: 78px; }
/* Full-width header: DUTH logo at the far left with the title right beside it, nav at the far right */
#header { max-width: none; margin: 0; padding: 0 30px; display: flex; align-items: center; gap: 14px; box-sizing: border-box; }
#contentWrapper { max-width: 1300px; }
/* Landing page gets a wider column than the rest of the site — it has room-filling
   sections (hero, carousel, marquee) rather than dense reading text. */
body.is-home { --vcg-home-width: 1650px; }
body.is-home #contentWrapper { max-width: var(--vcg-home-width); }

.duth-logo { position: static; transform: none; float: none; margin: 0; flex: none; }
.duth-logo img { height: 50px; display: block; }

#headerTitles { float: none; flex: none; }
#header h1 { margin: 0; line-height: 1; }
#header h1 a { font-size: 25px; font-weight: 600; white-space: nowrap; }

#nav { position: static; float: none; right: auto; bottom: auto; margin: 0 0 0 auto; border: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; }
#nav .navItem { height: auto; width: auto; min-width: 0; background-color: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin: 0; padding: 8px 12px; text-align: left; font-size: 14px; font-weight: 500; color: var(--text-content); }
#nav .navItem:hover { background-color: transparent; color: var(--text-main); }
#nav .navItem.navActive { color: var(--text-main); border-bottom: 2px solid var(--nav-active-border); padding-bottom: 8px; }

@media (max-width: 760px) {
    #header { flex-wrap: wrap; gap: 10px; padding: 6px 18px; }
    #nav { margin-left: 0; justify-content: flex-start; width: 100%; }
}

/* ===================== Landing members (current + alumni) ===================== */
#vcg-landing .vcg-members-sub { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin: 0 0 14px; text-align: center; }
#vcg-landing .vcg-members { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 18px; }
#vcg-landing .vcg-member { display: flex; flex-direction: column; align-items: center; width: 112px; text-decoration: none; }
#vcg-landing .vcg-member-photo { width: 84px; height: 84px; border-radius: 50%; background-size: cover; background-position: center top; background-color: var(--box-content-bg); border: 2px solid var(--border-color); display: flex; align-items: center; justify-content: center; box-sizing: border-box; transition: border-color 0.15s ease, transform 0.15s ease; }
#vcg-landing .vcg-member:hover .vcg-member-photo { border-color: var(--tile-blue); transform: translateY(-2px); }
#vcg-landing .vcg-member-initials { font-size: 26px; font-weight: 600; color: var(--text-muted); }
#vcg-landing .vcg-member-name { margin-top: 9px; font-size: 12.5px; font-weight: 600; line-height: 1.3; text-align: center; color: var(--text-main); }
#vcg-landing .vcg-member:hover .vcg-member-name { color: var(--tile-blue); }
#vcg-landing .vcg-member-role { font-size: 11.5px; line-height: 1.3; text-align: center; color: var(--text-content); }
#vcg-landing .vcg-members-alumni { gap: 18px 14px; }
#vcg-landing .vcg-members-alumni .vcg-member { width: 96px; }
#vcg-landing .vcg-members-alumni .vcg-member-photo { width: 64px; height: 64px; }
#vcg-landing .vcg-members-alumni .vcg-member-initials { font-size: 20px; }

/* Anchored member on the members page sits a little below the very top */
.member-card { scroll-margin-top: 24px; }

/* Project logo grid — modern presentation of the real project logos */
.project-logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    margin: 24px 0 40px 0;
}

.project-logo-card {
    background-color: #fff; /* logos read correctly on white in both themes */
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 24px 18px 16px 18px;
    min-height: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.project-logo-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--box-shadow);
}

.project-logo-card img {
    max-width: 100%;
    max-height: 70px;
    width: auto;
    object-fit: contain;
}

.project-name {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #333;
}

/* Logo cards are clickable links to each project's detail page */
.project-logo-card,
.project-logo-card:hover {
    text-decoration: none;
    cursor: pointer;
}

/* Project detail page */
.project-back {
    margin: 0 0 4px 0;
    font-size: 13px;
}

.project-detail-logo {
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 28px;
    margin: 16px 0 24px 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 380px;
}

.project-detail-logo img {
    max-width: 100%;
    max-height: 130px;
    width: auto;
    object-fit: contain;
}

/* Research showcase (Autonomous Driving / Precision Agriculture) */
.ad-banner { margin: 18px 0 26px; overflow: hidden; }
.ad-banner img { display: block; width: 100%; height: auto; max-height: 440px; object-fit: contain; }
/* Autonomous-driving banner (the HAV car): capped to a comfortable centred size */
.ad-banner:not(.pa-banner) img { max-width: 820px; max-height: 340px; margin-left: auto; margin-right: auto; }
.ad-lead { font-size: 15px; line-height: 1.7; color: var(--text-content); max-width: 880px; margin: 18px 0 26px; }

/* Intro: lead text with the concept illustration floated beside it */
.ad-intro { margin-bottom: 30px; }
.ad-intro::after, .ad-topic::after { content: ""; display: table; clear: both; }

/* Floated figure beside text (same idea as the other research areas) */
.ad-aside { float: right; width: 42%; max-width: 460px; margin: 5px 0 16px 30px; }
.ad-aside .ad-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
.ad-aside figure { margin: 0; }
.ad-aside img { display: block; width: auto; max-width: 100%; height: auto; max-height: 360px; margin: 0 auto; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,0.12); }
.ad-aside .ad-duo img { width: 100%; max-height: none; }
.ad-aside .ad-cap { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); text-align: center; margin-top: 5px; }
.ad-aside.concept figcaption { font-size: 11.5px; font-style: italic; color: var(--text-muted); text-align: center; margin-top: 7px; }

.ad-topics { display: flex; flex-direction: column; gap: 30px; }
.ad-topic { padding-bottom: 30px; border-bottom: 1px solid var(--border-color); }
.ad-topic:last-child { border-bottom: none; padding-bottom: 0; }
.ad-topic h2 { font-size: 20px; font-weight: 600; color: var(--text-main); margin: 0 0 10px; }
.ad-topic p { font-size: 14px; line-height: 1.65; color: var(--text-content); margin: 0 0 12px; max-width: 880px; }
.ad-topic .ad-pub { display: flow-root; font-size: 12.5px; line-height: 1.55; color: var(--text-muted); background: var(--box-content-bg); border-left: 3px solid var(--tile-blue); padding: 10px 13px; border-radius: 0 4px 4px 0; margin: 16px 0 0; max-width: 860px; }
.ad-pub-label { display: block; text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; font-weight: 700; color: var(--tile-blue); margin-bottom: 4px; }
.ad-topic .ad-pub a { color: var(--tile-blue); font-weight: 600; }

/* Full-width figures (wide diagrams / comparisons), cleared below any float */
.ad-figs { display: flex; flex-direction: column; gap: 16px; align-items: center; clear: both; margin-top: 18px; }
.ad-figs figure { margin: 0; width: 100%; display: flex; justify-content: center; }
.ad-figs img { display: block; width: auto; max-width: 100%; max-height: 460px; height: auto; border-radius: 6px; box-shadow: 0 2px 12px rgba(0,0,0,0.13); }

/* Full-width grids (orthomap 2x2 / vegetation pairs / synthetic) */
.ad-grid { display: grid; gap: 16px; clear: both; margin-top: 16px; }
.ad-grid.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-left: auto; margin-right: auto; }
.ad-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.ad-grid figure { margin: 0; }
.ad-grid img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 2px 12px rgba(0,0,0,0.13); }
.ad-grid .ad-cap { font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); text-align: center; margin-top: 8px; }

/* Precision Agriculture banner: the source photo is a near-square drone shot, so it is
   capped to a comfortable centred size at its own aspect ratio (no forced wide crop —
   the drone and the ground both stay fully in frame at every screen width) */
.pa-banner { margin: 18px auto 26px; max-width: 620px; }
.pa-banner img { width: 100%; height: auto; aspect-ratio: 2240 / 1918; object-fit: cover; object-position: center; }

@media (max-width: 820px) {
    .ad-aside { float: none; width: auto; max-width: 540px; margin: 14px auto; }
}
@media (max-width: 480px) {
    .ad-grid.cols-2, .ad-grid.cols-3 { grid-template-columns: 1fr; }
}

/* Project cards on the Projects list (research-style layout + logo) */
.project-card {
    flex-direction: row;
    align-items: center;
    gap: 22px;
}

.project-card::before {
    background-color: var(--tile-blue);
}

.project-card-logo {
    flex-shrink: 0;
    width: 150px;
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-card-logo img {
    max-width: 100%;
    max-height: 64px;
    width: auto;
    object-fit: contain;
}

.project-card-body {
    flex-grow: 1;
}

.project-card .card-header {
    margin-bottom: 8px;
    padding-bottom: 0;
    border-bottom: none;
}

.project-card .card-title a:hover {
    color: var(--tile-blue);
}

.project-card .card-content a,
.project-visit a {
    color: var(--tile-blue);
    font-weight: 600;
}

.project-visit {
    margin-top: 8px;
}

@media (max-width: 600px) {
    .project-card {
        flex-direction: column;
        text-align: center;
    }
    .project-card-logo {
        width: 100%;
    }
}

/* Responsive Adjustments */
@media (max-width: 600px) {
    .member-card {
        flex-direction: column;
        text-align: center;
    }
    .member-info {
        width: 100%;
    }
}

/* Contact Details Styles */
.contact-details {
    max-width: 700px;
    margin: 30px auto;
    padding: 40px;
    background-color: var(--bg-page-content);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Darker shadow for dark mode */
    border: 1px solid var(--border-color);
}

.contact-details > p {
    margin-top: 0;
    font-size: 1.15rem;
    color: var(--text-main);
}

.contact-list {
    margin: 25px 0 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 14px 28px;
    align-items: baseline;
}

.contact-list dt {
    font-weight: 600;
    color: var(--text-main);
    opacity: 0.6;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.contact-list dd {
    margin: 0;
    color: var(--text-main);
    font-size: 1.1rem;
    line-height: 1.5;
}

.contact-list a {
    color: var(--nav-active-border);
    text-decoration: none;
}

.contact-list a:hover {
    text-decoration: underline;
}

@media (max-width: 600px) {
    .contact-list {
        grid-template-columns: 1fr;
        gap: 4px 0;
    }

    .contact-list dd {
        margin-bottom: 14px;
    }
}

/* Light Theme Contact Details Override */
html.light-theme .contact-details {
    background-color: #fff;
    border-color: #e9ecef;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Restore gentle shadow for light mode */
}

#response {
    margin-top: 20px;
}

/* Search Form Styles */
.searchform {
    background-color: var(--bg-page-content);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

.searchform label {
    font-weight: 600;
    color: var(--text-main);
    margin-right: 5px;
}

.searchform select,
.searchform input[type="search"] {
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background-color: rgba(40, 40, 40, 0.8); /* Consistent with form-control */
    color: #fff;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Light theme override for inputs if needed, but usually handled by vars if set up correctly. 
   Since we hardcoded rgba(40,40,40,0.8) above, we might want to check if light theme overrides this.
   The theme.css handles light theme by changing vars. 
   If we want light theme inputs to be white, we should use a var or specific override.
   Let's use a var if possible, or just override for light theme.
*/
html.light-theme .searchform select,
html.light-theme .searchform input[type="search"] {
    background-color: #fff;
    color: #333;
}

.searchform select:focus,
.searchform input[type="search"]:focus {
    border-color: var(--tile-green); /* Green accent */
    box-shadow: 0 0 0 2px rgba(120, 150, 0, 0.2);
}

.searchform input[type="search"] {
    flex-grow: 1;
    min-width: 200px;
}

.searchform button {
    /* If there's a button, style it too, though the HTML didn't show one explicitly in the user snippet, 
       but the inline style referenced one. */
    width: 27px;
    height: 24px;
    background: transparent url("/img/pages/search-button.png");
    padding: 0;
    border: 1px solid #cacaca;
    vertical-align: middle;
}

.highlight {
    background-color: #f90;
    color: black;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .searchform {
        flex-direction: column;
        align-items: stretch;
    }

    .searchform label {
        margin-bottom: 5px;
    }

    .searchform select,
    .searchform input[type="search"] {
        width: 100%;
        margin-bottom: 10px;
    }
}

/* ====================================
   CSS View Transitions - Fade Effect
   ==================================== */

/* Enable cross-document view transitions */
@view-transition {
    navigation: auto;
}

/* Root fade transition */
::view-transition-old(root) {
    animation: vt-fade-out 300ms ease-out both;
}

::view-transition-new(root) {
    animation: vt-fade-in 500ms ease-in both;
    animation-delay: 250ms;
    opacity: 0; /* Start invisible until animation begins */
}

@keyframes vt-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes vt-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Content area: slightly longer transition */
#content {
    view-transition-name: page-content;
}

::view-transition-old(page-content) {
    animation: vt-fade-out 300ms ease-out both;
}

::view-transition-new(page-content) {
    animation: vt-fade-in 500ms ease-in both;
    animation-delay: 250ms;
    opacity: 0; /* Start invisible until animation begins */
}

/* Keep header stable during transition */
#headerWrapper {
    view-transition-name: header;
}

::view-transition-old(header),
::view-transition-new(header) {
    animation: none;
    mix-blend-mode: normal;
}

/* Keep subnav stable during transition */
#subNavWrapper {
    view-transition-name: subnav;
}

::view-transition-old(subnav),
::view-transition-new(subnav) {
    animation: none;
    mix-blend-mode: normal;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root),
    ::view-transition-old(page-content),
    ::view-transition-new(page-content) {
        animation-duration: 0.01ms !important;
    }
}