/* ============================================================
   SASAqS site stylesheet  -  responsive retrofit
   Colours and feel taken from the original andreas08 template
   by Andreas Viklund, kept recognisable but made fluid.
   Self-contained: no frameworks, no web fonts, no CDN links.
   To restyle the whole site, edit the variables in :root.
   ============================================================ */

:root {
  /* --- Colours (from the original andreas08.css) --- */
  --page-bg:      #e8eaec;   /* pale grey field behind the page card */
  --bg:           #ffffff;   /* the page card itself                 */
  --text:         #303030;   /* body text                            */
  --heading:      #505050;   /* grey headings, as in the original    */
  --accent:       #467aa7;   /* header / footer blue                 */
  --nav-bg:       #578bb8;   /* navigation bar                       */
  --nav-hover:    #80b0da;   /* nav item hover and current page      */
  --link:         #467aa7;   /* links                                */
  --link-hover:   #2a5a8a;   /* links on hover/focus                 */
  --card-border:  #a0a0a0;   /* border around the page card          */
  --panel-bg:     #fafbfc;   /* boxed panels (the old .box)          */
  --panel-border: #c0c0c0;
  --important:    #f02025;   /* the old .important red               */

  /* --- Layout --- */
  --measure:   820px;        /* maximum page width                   */
  --logo-size: 72px;         /* width of the daphnia emblem          */
  --radius:    4px;

  /* --- Type (system fonts only, nothing to download) --- */
  --font-body: Verdana, Tahoma, Arial, sans-serif;
}

/* --- Baseline --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--page-bg);
}
img { max-width: 100%; height: auto; }
a { color: var(--link); font-weight: bold; text-decoration: none; }
a:hover, a:focus { color: var(--link-hover); text-decoration: underline; }

/* --- The page card, centred on the grey field --- */
.page {
  width: min(var(--measure), 100%);
  margin: 1.25rem auto;
  background: var(--bg);
  border: 1px solid var(--card-border);
}

/* --- Header band --- */
.site-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  background: var(--accent);
  color: #ffffff;
}
.site-header img {
  width: var(--logo-size);
  background: #ffffff;          /* keeps the emblem legible on blue */
  padding: 4px;
  border-radius: var(--radius);
}
.site-header h1 {
  margin: 0;
  font-size: 2em;
  font-weight: normal;
  letter-spacing: -1px;
  color: #ffffff;
}
.site-header .tagline { margin: .2rem 0 0; color: #f0f2f4; font-size: .95rem; }

/* --- Navigation band (wraps to more rows on narrow screens) --- */
nav.main { background: var(--nav-bg); }
nav.main ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
nav.main a {
  display: block;
  padding: .5em .9em;
  color: #ffffff;
  font-weight: normal;
  text-transform: uppercase;
  font-size: .85rem;
  text-decoration: none;
}
nav.main a:hover,
nav.main a:focus,
nav.main a[aria-current="page"] {
  background: var(--nav-hover);
  color: #ffffff;
  text-decoration: none;
}

/* --- Main content --- */
main { padding: 1.25rem 1.5rem 2.5rem; }
main h2, main h3 {
  color: var(--heading);
  font-weight: normal;
  letter-spacing: -1px;
}
main h2 { font-size: 1.6em; margin: 1.5rem 0 .6rem; }
main h3 { font-size: 1.3em; margin: 1.2rem 0 .4rem; }
p { margin: 0 0 1.2em; }

/* Boxed panel  -  the old .box / used here for the Archive */
.panel {
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: var(--radius);
  color: var(--heading);
}
.panel h2 { margin-top: .25rem; }

/* Pulled-out callout, e.g. the climate statement */
.callout {
  margin: 1.5rem 0;
  padding: .25rem 0 .25rem 1rem;
  border-left: 4px solid var(--accent);
}

/* Utility kept from the original */
.important { color: var(--important); font-weight: bold; }

/* --- Tables (Office bearers, congress lists) scroll, never overflow --- */
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: .5rem .75rem; border-bottom: 1px solid var(--panel-border); }
th { background: var(--panel-bg); }

/* --- Footer band --- */
.site-footer {
  padding: .75rem 1.25rem;
  background: var(--accent);
  color: #f0f0f0;
  font-size: .9rem;
  text-align: center;
}
.site-footer a { color: #f0f0f0; }
.site-footer a:hover { color: #ffffff; }

/* --- Visible keyboard focus (accessibility) --- */
:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; }

/* --- On phones: let the card go edge-to-edge --- */
@media (max-width: 640px) {
  .page { margin: 0; border: none; }
}

/* --- Print: drop the navigation, save ink --- */
@media print {
  body { background: #fff; color: #000; }
  nav.main, .site-header { background: #fff !important; color: #000 !important; }
  .site-header h1, .site-header .tagline { color: #000; }
}

/* --- Medals page: recipient table --- */
td.year { text-align: center; white-space: nowrap; }
td.gold, td.silver, td.bronze, td.tbc {
  text-align: center;
  font-weight: bold;
  color: #303030;
}
td.gold   { background: #f6d34a; }   /* gold   */
td.silver { background: #cdd2d4; }   /* silver */
td.bronze { background: #cd8a45; }   /* bronze */
td.tbc    { background: #dcdcdc; color: #666; font-weight: normal; }  /* to be confirmed */

/* Collapsible aside (e.g. the 1999 awards clarification) */
details.panel summary { cursor: pointer; font-weight: bold; }
details.panel[open] summary { margin-bottom: .6rem; }

/* --- Floated image (e.g. the journal cover); stacks on small screens --- */
.float-right { float: right; max-width: 220px; margin: 0 0 1rem 1.25rem; }
@media (max-width: 640px) {
  .float-right { float: none; max-width: 100%; margin: 0 0 1rem; }
}

/* --- Image galleries and figures (conference report pages) --- */
figure { margin: 1.25rem 0; }
figure img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--panel-border);
  border-radius: 4px;
}
figcaption { font-size: .9em; color: var(--heading); margin-top: .4rem; }

/* Two images per row on a wide screen, one per row on a phone (automatic). */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem 1.25rem;
  margin: 1.5rem 0;
}
.gallery figure { margin: 0; }
.gallery a { display: block; }