/* =========================================================
   style.css: shared by every page of the Pearson Lab site.
   QUICK-EDIT SETTINGS
   Change colors, fonts and spacing here. Everything below uses these.
   ========================================================= */
:root {
    --accent: #38bdf8;          /* link hover, slider buttons */
    color-scheme: dark;         /* the whole site is dark, regardless of visitor settings */
    --text: #dddddd;
    --heading: #ffffff;
    --page-bg: #282e34;
    --soft-bg: #1f2429;         /* slightly darker grey, available if needed */
    --dark-bg: #282e34;         /* dark sections */
    --dark-text: #dddddd;
    --nav-bg: rgba(17, 24, 39, 0.85);
    --font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --nav-height: 80px;         /* keeps menu links from covering section titles */
    --content-width: 1000px;
}

/* ========== Base ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font);
    color: var(--text);
    background: var(--page-bg);
    line-height: 1.7;
}

a { color: inherit; }
a:hover { color: var(--accent); }
img { max-width: 100%; display: block; }

/* Every section with an id gets room for the fixed menu when you jump to it */
[id] { scroll-margin-top: var(--nav-height); }

/* ========== Fixed navigation bar ========== */
.navbar {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    z-index: 1000;
    background-color: var(--nav-bg);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 40px;
    min-height: var(--nav-height);
}

.nav-logo img { height: 56px; width: auto; }

.nav-links {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    gap: 26px;
}

.nav-links a {
    color: #e5e7eb;
    text-decoration: none;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

.nav-links a:hover { color: var(--accent); }

/* ========== Parallax image bands ========== */
.parallax-bg {
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.parallax-short { height: 60vh; }

/* The three background images. Spaces in file names must be written as %20 */
#home    { background-image: url('https://www.bretpearsonlab.org/images/start-page.jpg'); }
#people  { background-image: url('https://www.bretpearsonlab.org/images/Snapshot_of_Bretbow_mTagBFP_mWasabi_mKate2.jpg'); }
#papers  { background-image: url('https://www.bretpearsonlab.org/images/coverx.jpg'); }
#links   { background-image: url('https://www.bretpearsonlab.org/images/72hr%20NAC%20ChAT%201H6%20Estrella%202.jpg'); }

.caption {
    text-align: center;
    color: #fff;
    padding: 20px 30px;
    margin: 0 20px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.caption h1 { font-size: 2.5rem; line-height: 1.2; }

/* Sections whose content sits over a fixed background image
   (People, Publications, Links). The section grows to fit its content. */
.parallax-bg.image-section {
    height: auto;
    min-height: 100vh;
    flex-direction: column;
    justify-content: flex-start;
    gap: 40px;
    padding: 140px 40px 100px;
}

/* See-through grey box that keeps text readable over the image.
   Raise the last number (0.80) toward 1 for a more solid box. */
.panel {
    width: 100%;
    background: rgba(31, 36, 41, 0.40);
    backdrop-filter: blur(4px);
    color: var(--dark-text);
    border-radius: 10px;
    padding: 40px;
}
.panel .papers a,
.panel summary,
.panel h3 { color: #fff; }
.panel .papers a:hover,
.panel summary:hover { color: var(--accent); }
.caption p  { font-size: 1rem; margin-top: 10px; letter-spacing: 2px; }

/* ========== Content sections ========== */
.section { padding: 90px 40px; }
.section-soft { background: var(--soft-bg); }
.section-dark { background: var(--dark-bg); color: var(--dark-text); }
.section-light { background: #fff; color: #333; --heading: #111; }

.inner { max-width: var(--content-width); margin: 0 auto; }
.narrow { max-width: 760px; margin: 0 auto; }

.section h2 {
    font-size: 2rem;
    text-align: center;
    color: var(--heading);
    margin-bottom: 30px;
}
.section-dark h2 { color: #fff; }

.section p + p { margin-top: 1em; }

/* ========== Research cards ========== */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 40px;
    margin-top: 50px;
    align-items: start;
}

.research-wide { max-width: 1200px; }   /* lets the three research cards spread wider */

.research-card { text-decoration: none; text-align: center; }
.research-card img {
    width: 100%;
    height: auto;               /* shows the whole image, no cropping */
    border-radius: 8px;
}

/* Fade-in as the cards scroll into view. Pure CSS, no script.
   Browsers that don't support this simply show the images normally.
   Delete this block to turn the effect off. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .research-card {
            animation: fade-in linear both;
            animation-timeline: view();
            animation-range: entry 10% cover 35%;
        }
    }
}
@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.research-card h3 { margin-top: 14px; font-size: 1.2rem; color: var(--heading); }
.research-card:hover h3 { color: var(--accent); }

/* ========== People ========== */
.people-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px 30px;
}

.person { text-align: center; }
.person img {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 auto 14px;
}
.person h3 { color: #fff; font-size: 1.1rem; }
.person .role { font-size: 0.9rem; }
.person .email { font-size: 0.85rem; opacity: 0.8; word-break: break-all; }

/* ========== Papers ========== */
.papers { list-style: none; }
.papers li { padding: 16px 0; border-bottom: 1px solid rgba(128, 128, 128, 0.25); }
.papers a { font-weight: 600; text-decoration: none; color: var(--heading); }
.papers a:hover { color: var(--accent); }
.papers .authors { display: block; font-size: 0.92rem; }
.papers .journal { display: block; font-size: 0.92rem; }
.more-link { text-align: center; margin-top: 30px; }

/* Grey button (used for the publication timeline link) */
.button {
    display: inline-block;
    margin-top: 30px;
    padding: 10px 22px;
    background: #6b7280;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
}
.button:hover { background: #4b5563; color: #fff; }

/* ========== News list + photo slider ==========
   The slider works with any number of photos; no CSS changes needed. */
.news-list { list-style: none; margin-bottom: 40px; }
.news-list li { padding: 8px 0; }
.news-list strong { color: var(--heading); margin-right: 6px; }
.section-dark .news-list strong { color: #fff; }

.slider { position: relative; max-width: 760px; margin: 0 auto; }

.slides {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    border-radius: 12px;
    background: var(--page-bg);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    color: var(--text);
    scrollbar-width: none;
}
.slides::-webkit-scrollbar { display: none; }

.slide { flex: 0 0 100%; scroll-snap-align: start; }

.slide img {
    width: 100%;
    height: 380px;
    object-fit: contain;        /* shows the whole photo; use "cover" to crop and fill */
    background: #111;
}

.slide figcaption { padding: 18px 24px 22px; text-align: center; font-size: 0.95rem; }

.slider button {
    position: absolute;
    top: 190px;
    transform: translateY(-50%);
    width: 42px; height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: #111;
    font-size: 1.4rem;
    cursor: pointer;
}
.slider button:hover { background: var(--accent); }
.slider .prev { left: 10px; }
.slider .next { right: 10px; }

/* ========== Protocols ========== */
.protocol-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 30px;
    text-align: center;
}
.protocol-grid a { text-decoration: none; }
.protocol-grid img {
    width: 110px; height: 110px;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 auto 10px;
}

/* ========== Links (expandable lists) ========== */
details {
    border-bottom: 1px solid rgba(128, 128, 128, 0.25);
    padding: 12px 0;
}
summary { cursor: pointer; font-weight: 600; color: var(--heading); }
details ul { margin: 10px 0 4px 24px; columns: 2 220px; }
details li { padding: 2px 0; }

/* ========== Contact / footer ========== */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 40px;
}
.section-dark h3 { color: #fff; margin-bottom: 8px; }
/* Funder logo slideshow: three logos fade in turn, 4 seconds each (12s total).
   Uses CSS only. Works for exactly 3 images. */
.funders {
    position: relative;
    width: 200px;
    height: 120px;
    margin-top: 10px;
}
.funders img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
    border-radius: 4px;
    opacity: 0;
    animation: funder-cycle 12s infinite;
}
.funders img:nth-child(2) { animation-delay: 4s; }
.funders img:nth-child(3) { animation-delay: 8s; }
@keyframes funder-cycle {
    0%   { opacity: 0; }
    5%   { opacity: 1; }
    33%  { opacity: 1; }
    38%  { opacity: 0; }
    100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .funders img { animation: none; }
    .funders img:first-child { opacity: 1; }
}
.footer-note { text-align: center; font-size: 0.85rem; margin-top: 60px; opacity: 0.7; }

/* Keyboard focus outline, for accessibility */
a:focus-visible, button:focus-visible, summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* ========== Phones and tablets ========== */
@media (max-width: 768px) {
    :root { --nav-height: 120px; }
    .navbar { padding: 10px 16px; flex-direction: column; gap: 8px; }
    .nav-logo img { height: 40px; }
    .nav-links { gap: 6px 14px; justify-content: center; }
    .nav-links a { font-size: 0.8rem; }
    .section { padding: 60px 20px; }
    .caption h1 { font-size: 1.6rem; }
    .slide img { height: 260px; }
    .slider button { top: 130px; }
}

/* Phones and iPads ignore fixed backgrounds, so scroll them normally there */
@media (max-width: 768px), (hover: none) {
    .parallax-bg { background-attachment: scroll; height: 55vh; }
    .parallax-bg.image-section { height: auto; min-height: 0; padding: 140px 16px 60px; }
    .panel { padding: 24px 18px; }
}

/* =========================================================
   PUBLICATIONS TIMELINE (Publications.html)
   A vertical line down the middle, with each paper branching
   off to the left or right. Left/right alternates automatically.
   ========================================================= */
.timeline {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
}

/* the vertical line */
.timeline::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 3px;
    transform: translateX(-50%);
    background: var(--accent);
}

/* one year: a label, then its papers in two columns */
.year-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 80px;
    align-items: start;
}

.year {
    grid-column: 1 / -1;
    justify-self: center;
    position: relative;
    z-index: 1;
    margin: 40px 0 24px;
    padding: 4px 20px;
    background: #111;
    border: 2px solid var(--accent);
    border-radius: 20px;
    color: #fff;
    font-weight: 700;
    letter-spacing: 1px;
}

/* one paper */
.pub {
    position: relative;
    background: #323941;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 20px 22px;
    margin-bottom: 30px;
}
.pub:nth-of-type(even) { margin-top: 70px; }   /* staggers the right-hand column */

.pub img {
    width: 100%;
    height: auto;
    max-height: 260px;
    object-fit: contain;
    background: #fff;
    border-radius: 6px;
    margin-bottom: 14px;
}

.pub h3 { font-size: 1.05rem; line-height: 1.4; margin-bottom: 8px; }
.pub h3 a { color: #fff; text-decoration: none; }
.pub h3 a:hover { color: var(--accent); }
.pub .authors,
.pub .journal { font-size: 0.9rem; }
.pub .journal { margin-top: 4px; opacity: 0.85; }

/* the branch from each card to the line, and the dot on the line */
.pub::before {
    content: "";
    position: absolute;
    top: 33px;
    width: 41px;
    height: 2px;
    background: var(--accent);
}
.pub::after {
    content: "";
    position: absolute;
    top: 27px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--dark-bg);
    border: 3px solid var(--accent);
    box-sizing: border-box;
    z-index: 1;
}
.pub:nth-of-type(odd)::before  { right: -41px; }
.pub:nth-of-type(odd)::after   { right: -48px; }
.pub:nth-of-type(even)::before { left: -41px; }
.pub:nth-of-type(even)::after  { left: -48px; }

/* fade-in as cards scroll into view (same effect as the research cards) */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .pub {
            animation: fade-in linear both;
            animation-timeline: view();
            animation-range: entry 5% cover 25%;
        }
    }
}

/* phones: line on the left, all papers on the right */
@media (max-width: 768px) {
    .timeline { padding-left: 40px; }
    .timeline::before { left: 16px; transform: none; }
    .year-group { grid-template-columns: 1fr; }
    .year { justify-self: start; margin-left: -40px; }
    .pub:nth-of-type(even) { margin-top: 0; }
    .pub:nth-of-type(odd)::before,
    .pub:nth-of-type(even)::before { left: -23px; right: auto; width: 22px; }
    .pub:nth-of-type(odd)::after,
    .pub:nth-of-type(even)::after  { left: -30px; right: auto; }
}


/* =========================================================
   RESEARCH PAGES (stemcells.html, neural-regeneration.html, Genomics.html)
   ========================================================= */
.topic + .topic { margin-top: 80px; }          /* space between topics */
.topic ul { margin: 1em 0 1em 1.5em; }
.topic li { margin: 0.4em 0; }

.figure { margin: 30px 0; }
.figure img {
    margin: 0 auto;
    border-radius: 8px;
    background: #fff;           /* keeps see-through PNGs readable; delete to remove */
}

.page-links {                  /* buttons to the other research pages */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 80px;
}
.page-links .button { margin-top: 0; }