/* ============================================================
   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 10px;
}

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

/* 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;
}

/*@media (min-width: 840px) {
    main {
        min-width: 800px;
    }
}*/

section {
    margin-bottom: 40px;
}

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: 12px;
    height: 12px;
    vertical-align: middle;
    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 */
}

/* ============================================================
   PROJECT SECTIONS
   ============================================================ */

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

/* Indents all metadata sections (dl, abstract, links) */
.project-info,
.project-links {
    margin: 0 0 0 20px;                /* left indent to separate from text */
}

/* --------------------------------------------
   DESCRIPTION LIST (Title, Status, Artefacts)
   -------------------------------------------- */

/* Remove user-agent default dd indentation */
.project-details dd {
    margin-left: 20px;                 /* reset browser default indent */
    margin-bottom: 5px;                /* bottom-only internal spacing */
}

/* Make dt visually distinct */
.project-details dt {
    font-weight: bold;                 /* Emphasise the label */
}

/* Italicised project title text */
.project-title-text {
    font-style: italic;
}

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

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

/* The clickable summary label */
.project-abstract span {
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    padding: 5px;
}

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

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

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

/* ============================================================
   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);
}

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

/* External & download link wrappers (mostly badges) */
.external-link,
.download-link {
    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 {
    vertical-align: middle;
}

/* ============================================================
   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
   ============================================================ */

/* Each artefact block: vertical spacing between entries */
.artefact-container {
    margin: 0 0 20px 0;                /* bottom-only spacing */
}

/* Conference names: highlighted and italicised */
.conference-name {
    color: var(--bright-gold);
    font-style: italic;
}

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

/* Wrapper for external/download badges */
.artefact-links {
    display: inline-block;
    margin: 0 0 0 20px;                /* left indent to separate from text */
}

/* ============================================================
   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);
}

/* ============================================================
   ANIMATION CANVAS
   ============================================================ */
#animation-canvas {
    display: block;
    margin: 0 auto 20px;
    border: 1px solid var(--gold);
}

/* 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 */
}