/*
 * Student: Troy Noak
 * Date: 29 October 2026
 * Project: Assignment 06 - Grids & Advanced CSS (/grid/ site)
 */

/* ===== Base & Typography ===== */

body {
    /* OUTER GRID: header, main and footer stacked; main row stretches */
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    margin: 0;
    background-color: #f4f7fb;
    color: #1b1b1b;
    font-family: "Inter", Arial, sans-serif;
    line-height: 1.6;
}

h1,
h2,
h3 {
    font-family: "Oswald", Arial, sans-serif;
    line-height: 1.2;
}

a {
    color: #0b1d3a;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

/* ===== Header & Navigation ===== */

header {
    background-color: #0b1d3a;
    color: #ffffff;
    padding: 16px;
}

.brand {
    /* Flexbox: logo and title along one row */
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand > h1 {
    margin: 0;
    font-size: 1.6rem;
}

nav > ul {
    /* Flexbox: nav links along one row, wrapping on small screens */
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}

nav > ul > li > a {
    display: inline-block;
    padding: 6px 14px;
    border: 2px solid #ffffff;
    border-radius: 20px;
    color: #ffffff;
    text-decoration: none;
}

nav > ul > li > a:hover,
nav > ul > li > a:focus-visible {
    background-color: #ffffff;
    color: #0b1d3a;
}

/* highlights the current page without needing an extra class */
nav > ul > li > a[aria-current="page"] {
    background-color: #c8102e;
    border-color: #c8102e;
}

/* ===== SVG Logo ===== */

.roundel {
    width: 64px;
    height: auto;
    flex-shrink: 0;
}

.roundel .ring {
    /* fill: none keeps the ring hollow */
    fill: none;
    stroke: #dc241f;
    stroke-width: 24;
}

.roundel .bar {
    fill: #0019a8;
}

.roundel .station {
    fill: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: bold;
}

/* ===== Main Content: INNER GRID ===== */

main {
    /* mobile first: one column */
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px;
    box-sizing: border-box;
}

article,
aside {
    background-color: #ffffff;
    padding: 20px;
    border-top: 4px solid #0b1d3a;
    border-radius: 8px;
}

/* first heading in each article gets the accent colour */
article > h2:first-child {
    margin-top: 0;
    color: #c8102e;
}

/* first paragraph acts as an intro, so no extra class needed */
article > p:first-of-type {
    font-size: 1.15rem;
    font-weight: 600;
}

aside > h2:first-child {
    margin-top: 0;
}

aside > ul > li:first-child {
    font-weight: 600;
}

figure {
    margin: 20px 0 0;
}

figcaption {
    margin-top: 6px;
    color: #555555;
    font-size: 0.9rem;
}

/* ===== Footer ===== */

footer {
    background-color: #0b1d3a;
    color: #ffffff;
    padding: 16px;
    text-align: center;
}

footer a {
    color: #ffffff;
}

/* ===== Desktop: inner grid becomes two columns ===== */

@media (min-width: 768px) {
    main {
        /* wide article column + narrower sidebar */
        grid-template-columns: 2fr 1fr;
    }
}