@import url('https://fonts.googleapis.com/css?family=Open+Sans:600,400,400italic,300,100,700|Merriweather+Sans:400,700');

body {
    color: #666666;
    font-family: 'Open Sans', sans-serif;
    background-color: #f3f3f3;
    font-size: 1.125rem;
    line-height: 1.6;
}

.container {
    max-width: 1600px;
}

h1 {
    color: #404040;
    font-size: 2.75rem;
}

h2 {
    color: #404040;
    font-size: 2.25rem;
}

h3 {
    color: #404040;
    font-size: 1.75rem;
}

h4 {
    color: #404040;
    font-size: 1.5rem;
}

h5 {
    color: #404040;
    font-size: 1.25rem;
}

h6 {
    color: #404040;
    font-size: 1.125rem;
}

a {
    color: #294a70;
}

/* 4.5:1 minimum against both #fff and the #f3f3f3 page background (WCAG 1.4.3) */
a:hover {
    color: #4f6d94;
}

/* Bypass blocks (WCAG 2.4.1): visible only while focused */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 1100;
    padding: 0.75rem 1.25rem;
    background-color: #fff;
    color: #294a70;
    font-weight: 700;
    text-decoration: underline;
}

.skip-link:focus {
    top: 0;
}

.navbar {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

/* Bootstrap's navbar-dark defaults (55%/75% white) render 2.95:1 and 4.05:1
   against #49688e. Solid white is 5.75:1. */
.navbar-dark {
    --bs-navbar-color: #fff;
    --bs-navbar-hover-color: #fff;
    --bs-navbar-active-color: #fff;
}

.navbar-brand {
    font-size: 1.5rem;
    font-weight: 700;
}

.nav-link {
    font-size: 1.1rem;
}

/* Colour can no longer carry the current-page cue (WCAG 1.4.1) */
.navbar-nav .nav-link.active {
    box-shadow: inset 0 -3px 0 currentColor;
}

.navbar-nav .nav-link:hover {
    text-decoration: underline;
    text-underline-offset: 0.25rem;
}

/* Bootstrap's default blue focus ring is barely visible on the blue navbar */
.navbar-dark .nav-link:focus-visible,
.navbar-dark .navbar-brand:focus-visible,
.navbar-dark .navbar-toggler:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
    box-shadow: none;
}

.member-gallery {
    text-align: center;
}

.member-gallery-item {
    margin: 5px;
    border: 1px solid #ccc;
    display: inline-block;
    width: 180px;
    vertical-align: top;
    border: none;
}

.member-gallery-item img {
    width: 100%;
    height: auto;
    display: block;
}

/* min-height, not height: a fixed height clips names at 200% zoom (WCAG 1.4.4) */
.member-desc {
    padding: 12px;
    min-height: 100px;
    text-align: center;
    color: #666666;
    font-size: 0.9rem;
}

.member-desc strong {
    color: #404040;
}

.member-desc a {
    color: #294a70;
}

.sidebar {
    min-height: 100vh;
    font-size: 1.125rem;
}

footer small {
    font-size: 1rem;
    font-weight: 400;
}

.content-list li {
    font-size: 1.05rem;
    line-height: 1.7;
}

/* Collapsible year groups */
.year-toggle {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    border-bottom: 1px solid #ddd;
    padding: 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 400;
    color: #404040;
    text-align: left;
    width: 100%;
}

.year-toggle:hover {
    background-color: #f8f9fa;
    text-decoration: none;
}

.year-toggle:focus-visible {
    outline: 3px solid #294a70;
    outline-offset: 2px;
}

.year-toggle .bi-chevron-down {
    transition: transform 0.2s ease;
}

.year-toggle[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}