/* ============================================================
   IChem — About pages (board members, development team,
   literature corner)
   ------------------------------------------------------------
   Restyles the original markup of those pages onto the shared
   light theme. Deliberately keeps every legacy class name so
   the page bodies did not have to be rewritten.
   Loads after assets/ichem.css, which supplies the shell.
   ============================================================ */

body {
    padding: 0 0 40px;
}

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

header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    padding: 56px 24px 48px;
    text-align: center;
    margin-bottom: 40px;
}

.header-container h1 {
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -0.6px;
    color: var(--text-heading);
    margin-bottom: 10px;
}

.header-container p {
    font-size: 1.08rem;
    color: var(--text-muted);
    max-width: 620px;
    margin: 0 auto;
}

/* --------------------------------------------------------------- headings */

.section-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-heading);
    letter-spacing: -0.4px;
    margin: 44px 0 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    text-align: center;
    scroll-margin-top: calc(var(--nav-h) + 76px);
}

.sub-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--secondary);
    margin: 36px 0 4px;
}

.sub-section-title::before {
    content: "";
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: var(--secondary);
    flex-shrink: 0;
}

/* ============================================================
   TEAM PAGES
   ============================================================ */

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 28px;
}

.team-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 30px 22px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

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

.avatar-placeholder {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
    color: var(--primary);
    background: var(--primary-soft);
    border: 1px solid #dbeafe;
}

.member-name {
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--text-heading);
    margin-bottom: 12px;
}

.member-email {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--primary);
    text-decoration: none;
    background: var(--primary-soft);
    border: 1px solid #dbeafe;
    padding: 6px 14px;
    border-radius: 20px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    word-break: break-all;
}

.member-email:hover {
    background: #dbeafe;
    border-color: #bfdbfe;
}

/* ---------------------------------------------------------- contact box */

.contact-box {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--primary);
    border-radius: 12px;
    padding: 30px 25px;
    margin-top: 46px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.contact-box p {
    font-size: 1.02rem;
    color: var(--text-main);
    margin-bottom: 16px;
}

.contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    color: #ffffff;
    background: var(--primary);
    box-shadow: var(--shadow-sm);
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.contact-btn:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* ============================================================
   LITERATURE CORNER
   ============================================================ */

.nav-sticky {
    position: sticky;
    /* Parks just below the sticky site bar rather than under it */
    top: var(--ic-nav-h, 64px);
    z-index: 900;
    padding: 12px 0;
    margin-bottom: 18px;
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid var(--border-color);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.nav-sticky .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    list-style: none;
}

.nav-sticky .nav-links a {
    display: block;
    padding: 8px 15px;
    border-radius: 7px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.nav-sticky .nav-links a:hover,
.nav-sticky .nav-links a:focus-visible {
    color: var(--primary);
    background: var(--primary-soft);
}

/* Keeps section headings clear of both sticky bars when jumped to */
section[id] {
    scroll-margin-top: calc(var(--nav-h) + 86px);
}

/* --------------------------------------------------- main reference card */

.main-reference-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--primary);
    border-radius: 12px;
    padding: 30px 32px;
    margin-top: 28px;
    box-shadow: var(--shadow-sm);
}

.badge {
    display: inline-block;
    margin-bottom: 14px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--primary);
    background: var(--primary-soft);
    border: 1px solid #dbeafe;
}

.main-reference-card .title {
    font-size: 1.2rem;
}

/* ------------------------------------------------------ publication list */

/* One reference per row: a citation reads as a single line of prose, so a
   full-width card is easier to scan than a multi-column grid. */
.publication-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 18px;
}

.pub-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px 24px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "authors doi"
        "title   doi"
        "journal doi";
    column-gap: 24px;
    align-items: start;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.pub-card .authors  { grid-area: authors; }
.pub-card .title    { grid-area: title; }
.pub-card .journal-info { grid-area: journal; margin-bottom: 0; }
.pub-card .doi-link { grid-area: doi; align-self: center; }

.pub-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.authors {
    font-size: 0.84rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    line-height: 1.55;
}

.title {
    font-size: 0.99rem;
    font-weight: 600;
    color: var(--text-heading);
    line-height: 1.5;
    margin-bottom: 10px;
}

.journal-info {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--secondary);
    margin-bottom: 14px;
}

.doi-link {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding: 5px 11px;
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    word-break: break-all;
}

.doi-link:hover,
.doi-link:focus-visible {
    color: var(--primary);
    background: var(--primary-soft);
    border-color: #dbeafe;
}

/* ---------------------------------------------------------------- footer */

footer {
    text-align: center;
    margin-top: 60px;
    padding: 30px 0 0;
    border-top: 1px solid var(--border-color);
    font-size: 0.9rem;
    color: var(--text-muted);
}

footer a {
    color: var(--text-muted);
    text-decoration: underline;
}

footer a:hover {
    color: var(--primary);
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 768px) {
    header {
        padding: 40px 18px 34px;
    }
    .header-container h1 {
        font-size: 1.8rem;
    }
    .main-reference-card {
        padding: 22px 20px;
    }
    /* Narrow screens: drop the DOI back under the citation */
    .pub-card {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "authors"
            "title"
            "journal"
            "doi";
        padding: 20px;
    }
    .pub-card .journal-info {
        margin-bottom: 14px;
    }
    .pub-card .doi-link {
        align-self: start;
    }
    .nav-sticky .nav-links a {
        padding: 7px 11px;
        font-size: 0.8rem;
    }
}