/* ============================================================
   GLOBAL THEME VARIABLES
   ============================================================ */

/* Core colour palette for the site's dark–gold theme */
:root {
    --gold: #D4AF37;
    --bright-gold: #FFD700;
    --silver: #C0C0C0;
    --dark: #222;
    --dark-grey: #333;
    --less-dark-grey: #555;

    --orange: #FFA500;
    --lime-green: #32CD32;

    /* Icon-specific colours kept separate from main palette */
    --green-icon: limegreen;
    --red-icon: red;
    --orange-icon: orange;
}

/* ============================================================
   BASE RESET & GLOBAL TYPOGRAPHY
   ============================================================ */

/* Page-wide defaults: dark theme, monospace text, and no browser margins */
body {
    background-color: var(--dark-grey);
    color: var(--gold);
    font-family: 'Courier New', Courier, monospace;
    margin: 0;
    padding: 0;
}

/* Utility class: paragraphs with intentionally no margin */
p.no-margin {
    margin: 0;
}

/* ============================================================
   HEADER & NAVIGATION
   ============================================================ */

/* Page header: centred title area */
header {
    background-color: var(--dark);
    text-align: center;
    padding: 10px;
}

/* Navigation bar background and spacing */
nav {
    background-color: var(--dark);
    padding: 5px;
}

/* Navigation list: remove browser defaults and centre items */
nav ul {
    list-style-type: none;
    text-align: center;
    margin: 0;
    padding: 0;
}

/* Individual navigation items placed horizontally */
nav ul li {
    display: inline-block;
    margin: 0 5px;
}

/* Navigation links: gold text with subtle hover feedback */
nav ul li a.nav-link {
    color: var(--gold);
    font-size: 1.06rem;
    text-decoration: none;
    transition: background-color 0.3s;
    padding: 4px 8px
}

/* Hover: dark-grey background with gold outline for definition */
nav ul li a.nav-link:hover {
    background-color: var(--dark-grey);
    outline: 1px solid var(--gold);
}

/* ============================================================
   MAIN CONTENT LAYOUT
   ============================================================ */

/* Width scales up to 800px and stays 95% on small screens — replaces old media query */
main {
    width: min(95%, 800px);
    margin: 0 auto;
    padding: 20px;
    flex: 1;
}

/* Sections get consistent spacing before the next block */
section {
    margin-bottom: 40px;
}

/* Subheadings use silver for contrast against body text */
h2, h3, h4, h5, h6 {
    color: var(--silver);
}

/* ============================================================
   FIGURES & IMAGES
   ============================================================ */

/* Figure wrapper: centres content and provides external spacing */
figure {
    text-align: center;
    margin: 0 0 20px 0;                /* bottom-only external spacing */
    padding: 0;
}

/* Caption: tight to the image */
figcaption {
    font-style: italic;
    margin: 0;
    padding: 0;
}

/* Image behaviour */
.image-single,
.image-single-large,
.image-multi {
    display: inline-block;             /* allows centring via text-align */
    max-width: 100%;                   /* prevents overflow */
    height: auto;                      /* keeps aspect ratio */
    vertical-align: middle;
    margin: 0 0 5px 0;                 /* bottom-only internal spacing */
}

/* Percentage-based widths preserved exactly as before */
.image-single {
    width: 45%;
}

.image-single-large {
    width: 95%;
}

.image-multi {
    width: 32%;
}

/* ============================================================
   TABLES
   ============================================================ */

/* Base table structure: full width, collapsed borders, centred */
table {
    width: 100%;
    border: 1px solid var(--gold);
    border-collapse: collapse;
    table-layout: auto;
    margin: 0 0 20px 0;                /* bottom-only external spacing */
}

/* Caption: tight to the table */
table caption {
    font-style: italic;
    margin: 0 0 5px 0;                 /* bottom-only internal spacing */
    padding: 0;
}

/* Table cells: explicit borders and consistent padding */
th,
td {
    border: 1px solid var(--gold);
    text-align: left;
    padding: 5px;
}

/* Header cells: centred for clearer column grouping */
th {
    text-align: center;
}

/* Optional utility columns used in specific tables */
td.category-column {
    width: 200px;
    word-wrap: break-word;
}

td.status-column {
    width: 60px;
    text-align: center;
}

/* Status circles used inside table cells */
.circle {
    display: inline-block;
    width: 10px;
    height: 10px;
    vertical-align: 0.025em;            /* slight optical lift against monospace text */
    border-radius: 50%;
}

.circle-green  { background-color: var(--green-icon); }
.circle-red    { background-color: var(--red-icon); }
.circle-orange { background-color: var(--orange-icon); }

/* Status legends placed before tables or lists */
.status-legend {
    margin: 0 0 20px 0;                /* bottom-only external spacing */
}

/* ============================================================
   STUDENT PROJECTS
   ============================================================ */

/* Wrapper for each student project entry */
.student-proj-container {
    margin: 0 0 20px 0;                /* bottom-only external spacing */
}

/* Brief badge aligned with student-project metadata */
.student-proj-brief {
    margin-left: 20px;
}

/* Metadata grid aligns labels and values in two columns */
.student-proj-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 1rem;
    margin-left: 20px;
}

/* Metadata labels are italicised for visual distinction */
.student-proj-meta dt {
    font-style: italic;
}

/* Remove browser default indentation from metadata values */
.student-proj-meta dd {
    margin: 0;
}

/* Bibliography block: vertical spacing between entries */
.student-proj-bib {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-left: 20px;
}

/* Status colours */
.status-open { color: var(--orange); }
.status-ongoing  { color: var(--orange); }
.status-completed { color: var(--lime-green); }

/* --------------------------------------------
   ABSTRACT TOGGLE
   -------------------------------------------- */

/* The clickable summary label */
.student-proj-summary span {
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    padding: 5px;
}

/* Hover makes the label gold */
.student-proj-summary:hover span {
    background-color: var(--gold);
    color: var(--dark);
}

/* Indent student project disclosure blocks to align with metadata and links */
.student-proj-container details {
    margin-left: 20px;
}

/* The abstract paragraph inside <details> */
.student-proj-abstract {
    border-left: 1px solid var(--gold);
    border-radius: 5px;
    padding: 10px;
}

/* Highlight summary label, when details are open */
details[open] .student-proj-summary span {
    background-color: var(--gold);
    color: var(--dark);
}

/* ============================================================
   STUDENT PROJECT LINEAGE
   ============================================================ */

/* --------------------------------------------
   PROJECT NODES
   -------------------------------------------- */

/* Fixed node width allows two nodes to fit within the main content width */
.lineage-node {
    box-sizing: border-box;
    width: 340px;
    max-width: 340px;
    margin: 0 auto;
    padding: 10px 12px;
    border: 1px solid var(--less-dark-grey);
    border-radius: 5px;
    background-color: var(--dark);
    font-size: 0.82rem;
    line-height: 1.2;
}

/* Node top borders indicate project status or framework type */
.lineage-node-completed {
    border-top: 3px solid var(--green-icon);
}

.lineage-node-open {
    border-top: 3px solid var(--orange-icon);
}

.lineage-node-redvid {
    border-top: 3px solid var(--red-icon);
}

/* Keeps the project code and status on the same heading row */
.lineage-node-heading {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    justify-content: space-between;
}

.lineage-node-heading strong {
    overflow-wrap: anywhere;
    color: var(--silver);
    font-size: 0.9rem;
}

/* Compact project description inside each node */
.lineage-node p {
    margin: 8px 0 0;
}

/* --------------------------------------------
   RELATIONSHIPS AND BRANCHES
   -------------------------------------------- */

/* Vertical relationship line and arrow between node groups */
.lineage-relation {
    position: relative;
    display: grid;
    min-height: 62px;
    place-items: center;
}

.lineage-relation::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 7px;
    left: 50%;
    width: 1px;
    background-color: var(--gold);
}

.lineage-relation::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(50% - 5px);
    border-top: 8px solid var(--gold);
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
}

/* Relationship description displayed over the connecting line */
.lineage-relation span {
    position: relative;
    z-index: 1;
    padding: 3px 7px;
    border: 1px solid var(--less-dark-grey);
    border-radius: 5px;
    background-color: var(--dark-grey);
    color: var(--gold);
    font-size: 0.82rem;
    line-height: 1.2;
    text-align: center;
}

/* Two-column layout for parallel or continuing projects */
.lineage-branch {
    display: grid;
    grid-template-columns: repeat(2, 340px);
    gap: 14px;
    justify-content: center;
}

.lineage-branch .lineage-node {
    margin: 0;
}

/* Centres the final node when a branch contains an odd number of projects */
.lineage-branch .lineage-node:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
}

/* ============================================================
   LINK STYLING
   ============================================================ */

/* Default link styling: white text with underline */
a {
    color: white;
    text-decoration: underline;
    display: inline-block;             /* consistent link box model */
    transition: background-color 0.3s, color 0.3s;
}

/* Hover: invert colours subtly */
a:hover {
    background-color: var(--gold);
    color: var(--dark);
}

/* External & download link wrappers (mostly badges) */
.external-link,
.download-link,
.bibtex-download {
    display: inline-flex;              /* makes align-items effective */
    align-items: center;               /* vertically centre badges */
    text-decoration: none;             /* badges shouldn’t be underlined */
}

/* Badge images: align with link text (if any) */
.external-link img,
.download-link img,
.bibtex-download img {
    vertical-align: middle;
}

/* Prevent hover inversion on badge links */
.external-link:hover,
.download-link:hover,
.bibtex-download:hover {
    background-color: transparent;     /* no gold box */
    color: inherit;                    /* no colour inversion */
}

/* ============================================================
   DIVIDERS
   ============================================================ */

/* Major section divider: thick gold line with generous vertical spacing */
hr.section-divider {
    border: 1.5px solid var(--gold);
    margin: 0 0 20px 0;                /* bottom-only spacing */
}

/* Subsection divider: thinner gold line for lighter visual separation */
hr.sub-divider {
    border: 0.5px solid var(--gold);
    margin: 0 0 10px 0;                /* bottom-only spacing */
}

/* ============================================================
   ARTEFACTS
   ============================================================ */

/* Wrapper with gap between each artefact title and its links. */
.artefact-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Adds a gap between consecutive artefact containers. */
.artefact-container + .artefact-container {
    margin-top: 16px;
}

/* Bibliography block: vertical spacing between entries */
.bibliography {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* --------------------------------------------
   ARTEFACT AT-A-GLANCE FIGURES
   -------------------------------------------- */

/* Metadata grid aligns labels and values in two columns */
.artefact-glance-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 1rem;
    /*margin-left: 20px;*/
}

/* Metadata labels are italicised for visual distinction */
.artefact-glance-meta dt {
    font-style: italic;
}

/* Remove browser default indentation from metadata values */
.artefact-glance-meta dd {
    font-weight: bold;
    margin: 0;
}

/* --------------------------------------------
   AUTOMATIC ARTEFACT NUMBERING
   -------------------------------------------- */

/* Reset once per artefact index page so numbering continues across year sections */
.artefact-numbered-index {
    counter-reset: artefact-index;
}

/* Each artefact entry advances the generated IEEE-style index */
.artefact-numbered-index .artefact-cite-inline {
    counter-increment: artefact-index;
}

/* Generated index replaces manually maintained [1], [2], ... spans */
.artefact-numbered-index .artefact-cite-inline::before {
    content: "[" counter(artefact-index) "] ";
}

/* --------------------------------------------
   ARTEFACT INLINE
   -------------------------------------------- */

/* Artefact titles: silver and italic for contrast */
.artefact-title-inline {
    color: var(--silver);
    font-style: italic;
    text-decoration: none;
    display: inline;
}

.artefact-title-inline:hover,
.artefact-title-inline:focus-visible {
    text-decoration: underline;
    background-color: transparent;
    color: var(--silver);
}

/* Artefact venue name: highlighted and italicised */
.artefact-venue-inline {
    color: var(--bright-gold);
    font-style: italic;
}

/* --------------------------------------------
   LABELS
   -------------------------------------------- */

/* Wrapper with gap between label title and its labels. */
.label-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Adds a gap between consecutive label containers. */
.label-container + .label-container {
    margin-top: 16px;
}

/* Adds a gap between an inline artefact year and its label container. */
.artefact-year-inline + .label-container {
    margin-top: 8px;
}

/* Wrapper for a row of labels */
.label-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /*margin-top: 8px;*/
}

/* Type labels */
.label-type {
    background-color: transparent;
    border: 1px solid var(--gold);
    border-radius: 4px;
    color: var(--gold);
    display: inline-block;
    font-size: 0.82rem;
    line-height: 1.2;
    padding: 2px 6px;
}

/* Research topic labels */
.label-topic {
    background-color: transparent;
    border: 1px solid var(--silver);
    border-radius: 4px;
    color: var(--silver);
    display: inline-block;
    font-size: 0.82rem;
    line-height: 1.2;
    padding: 2px 6px;
}

/* --------------------------------------------
   ARTEFACT PAGE
   -------------------------------------------- */

/* Artefact authors: highlighted and slightly enlarged */
.artefact-authors {
    color: var(--bright-gold);
    font-size: 1.1rem;
    font-weight: bold;
}

/* Artefact contributors */
.artefact-contributors {
    color: var(--bright-gold);
    font-size: 1rem;
    font-weight: normal;
}

/* Artefact abstract block: indented to align with metadata */
.artefact-abstract {
    margin-left: 20px;
}

/* --------------------------------------------
   ARTEFACT BIB
   -------------------------------------------- */

/* Wrapper for BibTeX badges */
.artefact-cite-bibtex {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

/* Icon-only buttons (BibTeX badges) */
.artefact-cite-bibtex button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    line-height: 0;
}

/* Keyboard focus ring */
.artefact-cite-bibtex button:focus-visible {
    outline: 2px solid #4a90e2;
    outline-offset: 2px;
}

/* --------------------------------------------
   ARTEFACT METADATA
   -------------------------------------------- */

/* Artefact metadata grid aligns labels and values in two columns */
.artefact-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.25rem 1rem;
    margin-left: 20px;
}

/* Artefact metadata labels are italicised for visual distinction */
.artefact-meta dt {
    font-style: italic;
}

/* Remove browser default indentation from artefact metadata values */
.artefact-meta dd {
    margin: 0;
}

/* --------------------------------------------
   ARTEFACT LINKS
   -------------------------------------------- */

/* Wrapper for external/download badges */
.artefact-links {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 20px;
}

/* --------------------------------------------
   LICENCE
   -------------------------------------------- */

/* Licence note under Publications header */
.artefact-licence-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 20px;
}

/* Licence icon follows text height */
.artefact-licence-note img {
    height: 1em;
    width: auto;
}



/* ============================================================
   RESEARCH ENTRY & AREA LANDINGS
   ============================================================ */

/* Research-area cards reuse the site palette while keeping the entry page compact. */
.research-area-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.research-area-card {
    border: 1px solid var(--gold);
    border-radius: 4px;
    padding: 16px;
}

.research-area-card h3 {
    margin-top: 0;
}

.research-area-link {
    margin-bottom: 0;
}

/* ============================================================
   PAGE STRUCTURE / STICKY FOOTER
   ============================================================ */

/* Allows footer to stay at bottom and main content to stretch */
html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

/* Footer block: dark background, gold text, centred content */
footer {
    background-color: var(--dark);
    text-align: center;
    color: var(--gold);
    padding: 10px;
}

/* Footer logos: uniform sizing and spacing */
.footer-logo {
    width: 100px;
    height: 100px;
    display: inline-block;             /* ensures predictable alignment */
    margin: 10px;                      /* bottom-only not used because row of logos */
}

/* ============================================================
   RETURN-TO-TOP BUTTON
   ============================================================ */

/* Fixed floating button in bottom-right corner */
#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: var(--less-dark-grey);
    color: var(--gold);
    font-size: 25px;
    text-align: center;
    text-decoration: none;
    border-radius: 10%;
    line-height: 1;
    display: inline-block;
    transition: background-color 0.3s, color 0.3s;
    padding: 10px;
}

/* Hover: invert colours for visual feedback */
#return-to-top:hover {
    background-color: var(--gold);
    color: var(--dark-grey);
}

/* ============================================================
   TOAST NOTIFICATIONS
   ============================================================ */

/* Container for all toast messages */
#toast-container {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
    pointer-events: none;              /* clicks pass through */
}

/* Individual toast */
.toast {
    background-color: var(--dark);
    color: var(--gold);
    border: 1px solid var(--gold);
    max-width: 320px;
    padding: 8px 12px;
    margin-top: 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Visible state */
.toast.show {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================================
   ANIMATION CANVAS
   ============================================================ */
   
/* Canvas element for animations: centred block with a gold outline */
#animation-canvas {
    display: block;                    /* ensures it behaves as a block-level element */
    border: 1px solid var(--gold);
    margin: 0 auto 20px;               /* centre horizontally, add bottom spacing */
}