/* Callaghan Design: shared stylesheet for the inner pages.
   Same look as the new home page (site.css): Arial, ink and cyanotype blue,
   a single yellow accent. Every class the old pages use is still defined here,
   so no page needs editing. The previous version is saved as blstyle01-old.css. */

:root {
  --paper: #ffffff;
  --page: #e9eff4;
  --hull: #f4f7f9;
  --ink: #0c2238;
  --ink-soft: #3a5670;
  --cyan: #1d5c9e;
  --visited: #54407a;
  --line: #b9ccdb;
  --spark: #f0b400;
  --alert: #b00020;
  --font: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Page */

html { overflow-x: hidden; background: var(--page); }

/* Every page is kept to a readable width, whether or not it has a .wrapper box. */
body.main {
  max-width: 62rem;
  margin: 0 auto;
  padding: 1rem 1rem 3rem;
  background: var(--page);
  color: var(--ink);
  font: normal 1.0625rem/1.6 var(--font);
  text-align: left;
}

.wrapper { text-align: left; }

/* Tables: older pages use them for layout, so keep them fitting the screen. */

table { max-width: 100%; border-collapse: separate; color: inherit; font: inherit; }
td, th { color: inherit; font: inherit; }
table[border="1"] { border-collapse: collapse; }
table[border="1"] td, table[border="1"] th { border: 1px solid var(--line); padding: 0.4rem 0.6rem; }

/* Pictures and media */

img { max-width: 100%; height: auto; }
a img { border: 0; }
img[src*="banner"] { display: block; margin: 0.5rem auto; }
iframe, video, embed, object { max-width: 100%; }
pre { max-width: 100%; overflow: auto; }

/* Text */

p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.4rem; }
li { margin-bottom: 0.3rem; }
li::marker { color: var(--cyan); }
hr { margin: 1.5rem 0; border: 0; border-top: 1px solid var(--line); }
b, strong { font-weight: 700; }

h1, h2, h3 { margin: 0 0 0.6em; color: var(--ink); font-family: var(--font); font-style: normal; line-height: 1.25; }
h1 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: clamp(1.15rem, 2.1vw, 1.4rem); font-weight: 700; }
h3 { color: var(--cyan); font-size: 1.1rem; font-weight: 700; }

/* Links */

a { color: var(--cyan); font-family: var(--font); text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
a:visited { color: var(--visited); }
a:hover { color: var(--ink); }
a:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }

/* The classes the old pages use. Colours inherit so they never override a link. */

.medium, .mediumgrey, .blue, .blue10 { font-size: inherit; font-style: normal; }
.mediumgrey, .medium { color: inherit; }
.blue, .blue10 { color: var(--cyan); }

.blue1 { color: var(--cyan); font-weight: 700; }
.blue8i { color: var(--cyan); font-size: 0.9rem; font-style: italic; font-weight: 700; }
.blue18 { color: var(--cyan); font-size: 1.6rem; font-weight: 700; }

.smallgrey { color: var(--ink-soft); font-size: 0.85rem; font-style: normal; }
.smallblack { color: var(--ink); font-size: 0.85rem; font-style: normal; }
.smallblue { color: var(--cyan); font-size: 0.85rem; font-style: normal; }

.largegrey { color: var(--ink); font-size: 1.35rem; font-style: normal; font-weight: 700; line-height: 1.25; }
.largered { color: var(--alert); font-size: 1.25rem; font-style: normal; font-weight: 700; line-height: 1.3; }

/* Text inside a link keeps the link colour, whatever class it carries. */
a .mediumgrey, a .medium, a .blue, a .blue10, a .blue1, a .blue8i, a .smallgrey, a .smallblack, a .smallblue { color: inherit; }

/* Site header (the same block as the home page) */
.top { margin: -1rem calc(50% - 50vw) 0.75rem; border-bottom: 1px solid #000; background: #000; color: #fff; }
.top .wrap { width: min(100% - 2rem, 72rem); margin-inline: auto; }
.top-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 2rem; padding-block: 0.9rem; }
.brand { display: flex; align-items: center; gap: 0.75rem; color: #fff; font: 700 1.3rem/1 var(--font); text-decoration: none; }
.brand:visited { color: #fff; }
.brand:hover { color: var(--spark); }
.brand img { width: 56px; height: 56px; }
.top ul { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.top li { margin: 0; }
.top ul a { color: #fff; font: 500 0.98rem var(--font); text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; }
.top ul a:visited { color: #fff; }
.top ul a:hover { color: var(--spark); }
.top a:focus-visible { outline-color: #fff; }

/* Site header, page menu and footer (the same on every page) */

.sitebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  margin: 0 0 0.75rem;
  padding: 0.6rem 0 0.7rem;
  border-bottom: 1px solid var(--line);
}
.sitebar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink);
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
}
.sitebar-brand:visited { color: var(--ink); }
.sitebar-brand:hover { color: var(--cyan); }
.sitebar-brand img { width: 40px; height: 40px; }
.sitebar-link { font-weight: 600; }

/* The row of page links under each banner: wraps neatly on narrow screens. */
.pagenav, .pagenav tbody { display: block; width: 100%; }
.pagenav tr { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.35rem 1.25rem; }
.pagenav td { display: block; padding: 0; }
.pagenav a { color: var(--ink); font-weight: 600; text-decoration: none; }
.pagenav a:visited { color: var(--ink); }
.pagenav a:hover { color: var(--cyan); text-decoration: underline; }
.pagenav img { margin: 0 auto; }

.sitefoot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* Pages exported from Word keep their own layout but use the site font. */
p.MsoNormal, li.MsoNormal, div.MsoNormal { font-family: var(--font); font-size: 1rem; line-height: 1.55; margin-bottom: 0.6em; }

/* A picture with clickable regions must keep its size, or the regions slip out of place. */
img[usemap] { max-width: none; }

/* Small screens */

@media (max-width: 40rem) {
  body.main { font-size: 1rem; }
  body.main { padding-inline: 0.75rem; }
  td, th { overflow-wrap: anywhere; }
  /* Old pages set wide cell padding in the HTML; trim it so tables fit a phone. */
  td, th { padding: 0.3rem; }
  .top-inner { gap: 0.5rem 1rem; }
  .brand { font-size: 1.15rem; }
  .brand img { width: 44px; height: 44px; }
}

@media print {
  html { border-top: 0; }
  a { color: inherit; }
}