:root {
  --heading-color: #333333;
  --template-bg-light: #F3F5F7;
  --template-special-color: #010101;
}
.container-header {
  background: #ffcb03;
  color: #010101;
}
.container-header a,
.container-header .navbar-brand,
.container-header .navbar-brand a,
.container-header .navbar-brand:hover,
.container-header .navbar-brand:focus,
.container-header .site-description,
.container-header .mod-menu > li > a {
  color: #010101;
}
.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li > a:hover {
  background: #010101;
  color: #ffcb03;
}
.container-header .mod-menu .mod-menu__sub {
}
.container-header .mod-menu .mod-menu__sub a,
.container-header .mod-menu .mod-menu__sub span {
  color: #010101;
}
.container-header .navbar-toggler {
}
.footer {
  background: #010101;
  color: #ffffff;
}
.footer a:not(.btn),
.footer .btn-link {
  color: #ffcb03;
}
.footer a:not(.btn):hover,
.footer a:not(.btn):focus,
.footer .btn-link:hover,
.footer .btn-link:focus {
  color: #ffffff;
}
.btn-primary {
  background-color: #ffcb03;
  border-color: #ffcb03;
  color: #010101;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #010101;
  border-color: #010101;
  color: #ffcb03;
}
a:focus-visible,
.btn:focus-visible,
.navbar-toggler:focus-visible {
  outline: 3px solid #010101;
  outline-offset: 2px;
}
.footer a:focus-visible,
.footer .btn:focus-visible {
  outline-color: #ffcb03;
}
img {
  max-width: 100%;
  height: auto;
}
.container-header .brand-logo img {
  display: block;
  width: auto;
  height: auto;
  max-height: 120px;
}
/* Phase 7 fixes (28 Oct 2026): embeds fit the column, FAQ question on the marker line */
iframe { max-width: 100%; }
iframe[src*="youtube"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
summary { cursor: pointer; }
summary h3 { display: inline; margin: 0; }

/* Poppins (SIL Open Font License 1.1), self-hosted. Files in /media/templates/site/cassiopeia/fonts/ */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Batch 1.1 (28 Oct 2026): Poppins as body, heading and button font */
:root {
  --cassiopeia-font-family-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --cassiopeia-font-family-headings: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --body-font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --btn-font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Batch 1.2 (28 Oct 2026): colours and links, old-site values (yellow #ffcb03, black #010101, text #383838, hover #cfa400) */
:root {
  --cassiopeia-color-primary: #010101;
  --cassiopeia-color-hover: #cfa400;
  --cassiopeia-color-link: #010101;
  --link-color: #010101;
  --link-color-rgb: 1, 1, 1;
  --link-hover-color: #cfa400;
  --link-hover-color-rgb: 207, 164, 0;
  --body-color: #383838;
  --body-bg: #ffffff;
}
body {
  color: #383838;
}
.container-header,
.footer {
  background-image: none;
  background-color: #010101;
}
.btn-primary {
  --btn-color: #010101;
  --btn-bg: #ffcb03;
  --btn-border-color: #ffcb03;
  --btn-hover-color: #010101;
  --btn-hover-bg: #cfa400;
  --btn-hover-border-color: #cfa400;
  --btn-active-color: #010101;
  --btn-active-bg: #cfa400;
  --btn-active-border-color: #cfa400;
  --btn-disabled-color: #010101;
  --btn-disabled-bg: #ffcb03;
  --btn-disabled-border-color: #ffcb03;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #cfa400;
  border-color: #cfa400;
}
main :is(p, li, td, dd) a:not(.btn):not(.page-link) {
  text-decoration: underline;
}

/* Batch 1.3 (28 Oct 2026): header with logo left and Main Menu in the top bar (position "menu"); old values: 90px bar, 14px/500 uppercase items, padding 0 12px, yellow hover and active, white drop-down */
.container-header {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
}
.container-header .grid-child {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 0;
}
.container-header .navbar-brand img {
  width: auto;
  height: 90px;
}
.container-header .container-nav {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  padding: 0;
}
.container-header nav {
  margin: 0;
}
.container-header .mod-menu > li + li {
  margin-left: 0;
}
.container-header .mod-menu > li::after {
  display: none;
}
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > span {
  display: block;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: 90px;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff;
}
.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li.active > span,
.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus {
  color: #ffcb03;
  text-decoration: none;
}
.container-header .mod-menu .mod-menu__sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 14rem;
  margin: 0;
  padding: 0;
  background-color: #fff;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.container-header .mod-menu li.parent:hover > .mod-menu__sub,
.container-header .mod-menu li.parent:focus-within > .mod-menu__sub {
  display: block;
}
.container-header .mod-menu .mod-menu__sub a,
.container-header .mod-menu .mod-menu__sub span {
  display: block;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  color: #010101;
}
.container-header .mod-menu .mod-menu__sub a:hover,
.container-header .mod-menu .mod-menu__sub a:focus,
.container-header .mod-menu .mod-menu__sub li.active > a {
  background-color: #ffcb03;
  color: #010101;
  text-decoration: none;
}
@media (max-width: 767.98px) {
  .container-header {
    flex-wrap: wrap;
    padding: 10px 15px;
  }
  .container-header .navbar-brand img {
    height: 60px;
  }
  .container-header .navbar-brand {
    margin-inline-end: 0;
  }
  .container-header .container-nav,
  .container-header .container-nav nav {
    display: contents;
  }
  .container-header .navbar-toggler {
    margin-inline-start: auto;
  }
  .container-header .navbar-collapse {
    flex: 0 0 100%;
  }
  .container-header .mod-menu > li > a,
  .container-header .mod-menu > li > span {
    padding: 0 12px;
    line-height: 44px;
  }
  .container-header .mod-menu .mod-menu__sub {
    position: static;
    min-width: 0;
    background-color: transparent;
    box-shadow: none;
  }
  .container-header .mod-menu .mod-menu__sub a,
  .container-header .mod-menu .mod-menu__sub span {
    padding: 4px 12px 4px 28px;
    color: #fff;
  }
  .container-header .mod-menu .mod-menu__sub a:hover,
  .container-header .mod-menu .mod-menu__sub a:focus,
  .container-header .mod-menu .mod-menu__sub li.active > a {
    background-color: transparent;
    color: #ffcb03;
  }
}
.container-header .navbar-toggler {
  color: #fff;
  background-color: transparent;
  border-color: #fff;
}
.container-header .navbar-toggler:hover,
.container-header .navbar-toggler:focus {
  color: #010101;
  background-color: #ffcb03;
  border-color: #ffcb03;
}

/* Batch 1.3b (28 Oct 2026): fix for Joomla 6 sub-menu toggle button in the header menu (keeps the bar 100px high, chevron beside the item, sub-menu opens on hover, focus or the button) */
.container-header .mod-menu > li.parent {
  display: flex;
  align-items: center;
}
.container-header .mod-menu__toggle-sub {
  margin-left: -8px;
  padding: 0 8px 0 0;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 90px;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  cursor: pointer;
}
.container-header .mod-menu__toggle-sub .icon-chevron-down {
  font-size: 11px;
}
.container-header .mod-menu__toggle-sub:has(.mod-menu__heading) {
  margin-left: 0;
  padding: 0 12px;
}
.container-header .mod-menu > li.active > .mod-menu__toggle-sub,
.container-header .mod-menu__toggle-sub:hover,
.container-header .mod-menu__toggle-sub:focus {
  color: #ffcb03;
}
.container-header .mod-menu .parent > .mod-menu__sub[aria-hidden="false"] {
  display: block;
}
@media (max-width: 767.98px) {
  .container-header .mod-menu > li.parent {
    flex-wrap: wrap;
  }
  .container-header .mod-menu > li.parent > .mod-menu__toggle-sub {
    line-height: 44px;
  }
  .container-header .mod-menu__toggle-sub:has(.mod-menu__heading) {
    justify-content: flex-start;
    gap: 6px;
  }
  .container-header .mod-menu .mod-menu__sub {
    display: none;
    flex: 0 0 100%;
  }
  .container-header .mod-menu .parent > .mod-menu__sub[aria-hidden="false"] {
    display: block;
  }
}

/* Batch 1.3c (28 Oct 2026): header UI review fixes. Right padding like the old header; drop-downs of the last two items open towards the left so they stay inside the screen; between 768 and 991 px the menu uses the phone button because six items no longer fit */
@media (min-width: 992px) {
  .container-header {
    padding-right: 150px;
  }
}
.container-header .mod-menu .mod-menu__sub {
  white-space: nowrap;
}
.container-header .mod-menu > li:nth-last-child(-n + 2) > .mod-menu__sub {
  right: 0;
  left: auto;
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .container-header {
    flex-wrap: wrap;
    padding: 10px 30px;
  }
  .container-header .navbar-brand img {
    height: 60px;
  }
  .container-header .navbar-brand {
    margin-inline-end: 0;
  }
  .container-header .container-nav,
  .container-header .container-nav nav {
    display: contents;
  }
  .container-header .navbar-toggler {
    display: block;
    margin-inline-start: auto;
  }
  .container-header .navbar-collapse:not(.show) {
    display: none !important;
  }
  .container-header .navbar-collapse {
    flex: 0 0 100%;
  }
  .container-header .mod-menu {
    flex-direction: column;
  }
  .container-header .mod-menu > li > a,
  .container-header .mod-menu > li > span,
  .container-header .mod-menu > li > .mod-menu__toggle-sub {
    line-height: 44px;
  }
  .container-header .mod-menu > li.parent {
    flex-wrap: wrap;
  }
  .container-header .mod-menu .mod-menu__sub,
  .container-header .mod-menu > li:nth-last-child(-n + 2) > .mod-menu__sub {
    display: none;
    position: static;
    flex: 0 0 100%;
    min-width: 0;
    background-color: transparent;
    box-shadow: none;
  }
  .container-header .mod-menu .parent > .mod-menu__sub[aria-hidden="false"] {
    display: block;
  }
  .container-header .mod-menu .mod-menu__sub a,
  .container-header .mod-menu .mod-menu__sub span {
    padding: 4px 12px 4px 28px;
    color: #fff;
  }
  .container-header .mod-menu .mod-menu__sub a:hover,
  .container-header .mod-menu .mod-menu__sub a:focus,
  .container-header .mod-menu .mod-menu__sub li.active > a {
    background-color: transparent;
    color: #ffcb03;
  }
}

/* Batch 1.3d (28 Oct 2026): sticky header like the old site. From 992 px up the header is fixed at the top, content aligned like the old 74% container, the logo sits in a black square, and on scroll the bar shrinks to 60 px and turns dark translucent (old value rgba(0,0,0,.85) = #262626 over white), menu text 1 px smaller. The shrink is a CSS scroll-driven animation: browsers without it keep the full-height solid black bar. Back-to-top button styled like the old one (white square, light border, black chevron). */
html {
  scroll-padding-top: 70px;
}
@media (min-width: 992px) {
  body.site {
  }
  .container-header {
    position: fixed !important;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1000;
    padding: 0 50px 0 30px;
  }
  .container-header .grid-child:first-child {
    align-self: stretch;
    display: flex;
    align-items: center;
    padding: 0 16px;
    background-color: #010101;
  }
  .container-header .navbar-brand {
    padding: 0;
  }
  .container-header .navbar-brand img {
  }
}
@media (min-width: 1200px) {
  .container-header {
  }
}
@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    @keyframes ucn-bar {
      to {
        height: 60px;
        background-color: rgba(0, 0, 0, 0.85);
        box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
      }
    }
    @keyframes ucn-logo {
      to {
        height: 50px;
      }
    }
    @keyframes ucn-menu {
      to {
        font-size: 13px;
        line-height: 52px;
      }
    }
    .container-header,
    .container-header .navbar-brand img,
    .container-header .mod-menu > li > a,
    .container-header .mod-menu > li > span,
    .container-header .mod-menu > li > .mod-menu__toggle-sub {
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root block);
      animation-range: 0 100px;
    }
    .container-header {
      animation-name: ucn-bar;
    }
    .container-header .navbar-brand img {
      animation-name: ucn-logo;
    }
    .container-header .mod-menu > li > a,
    .container-header .mod-menu > li > span,
    .container-header .mod-menu > li > .mod-menu__toggle-sub {
      animation-name: ucn-menu;
    }
  }
}
.back-to-top-link {
  color: #010101;
  border: 1px solid #e0e0e0;
  border-radius: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.back-to-top-link:hover,
.back-to-top-link:focus {
  color: #010101;
  background-color: #ffcb03;
  border-color: #ffcb03;
}

/* Batch 1.4 (28 Oct 2026): white footer like the old site: random square poster at the left, four social icons, main links with the current item as a yellow box, thin line, copyright at the left and Privacy Statement at the right. Also the old back-to-top look (template.css .scrollup: rgba(255,255,255,.4) background, 1px #ddd border, 25px black chevron, hover opaque). Modules: random image (position footer), social icons (class ucn-social), footer links (class ucn-footer-nav), module 113 (class ucn-copy) and module 110 (Privacy Statement). */
.container-footer {
  margin-top: 4rem;
  padding: 40px 10vw 30px;
  color: #383838;
  background-color: #fff;
  background-image: none;
}
.container-footer .grid-child {
  display: grid;
  grid-template-columns: 190px 1fr auto;
  grid-template-areas:
    "img social ."
    "img nav ."
    "line line line"
    "copy copy priv";
  column-gap: 40px;
  row-gap: 20px;
  align-items: center;
}
.container-footer .grid-child::after {
  content: "";
  grid-area: line;
  border-top: 1px solid #e4ebf0;
}
.container-footer .mod-randomimage {
  grid-area: img;
  line-height: 0;
}
.container-footer .mod-randomimage img {
  display: block;
  width: 190px;
  height: 190px;
}
.container-footer .ucn-social {
  grid-area: social;
  align-self: end;
}
.container-footer .ucn-social ul {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.container-footer .ucn-social a {
  display: block;
  font-size: 48px;
  line-height: 1;
  color: #383838;
  text-decoration: none;
}
.container-footer .ucn-social a:hover,
.container-footer .ucn-social a:focus {
  color: #cfa400;
}
.container-footer .ucn-footer-nav {
  grid-area: nav;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-self: start;
  padding: 0;
  margin: 0;
  list-style: none;
}
.container-footer .ucn-footer-nav > li {
  flex: 0 0 auto;
  margin: 0;
}
.container-footer .ucn-footer-nav a {
  display: block;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  text-decoration: none;
  color: #383838;
}
.container-footer .ucn-footer-nav .active > a,
.container-footer .ucn-footer-nav a:hover,
.container-footer .ucn-footer-nav a:focus {
  background-color: #ffcb03;
  color: #010101;
  text-decoration: none;
}
.container-footer .ucn-copy,
.container-footer #mod-menu110 {
  padding: 0;
  margin: 0;
}
.container-footer .ucn-copy {
  grid-area: copy;
  grid-column: 1 / 3;
}
.container-footer .ucn-copy p {
  margin: 0 0 0.25rem;
  font-size: 15px;
}
.container-footer .ucn-copy a {
  color: #383838;
}
.container-footer #mod-menu110 {
  grid-area: priv;
  display: block;
  list-style: none;
}
.container-footer #mod-menu110 a {
  font-size: 15px;
  text-decoration: none;
  color: #383838;
}
.container-footer #mod-menu110 a::before {
  content: "\f054";
  margin-inline-end: 0.6em;
  font-family: "Font Awesome 6 Free";
  font-size: 0.65em;
  font-weight: 900;
  vertical-align: 0.1em;
}
.container-footer #mod-menu110 a:hover,
.container-footer #mod-menu110 a:focus {
  color: #cfa400;
}
@media (max-width: 767.98px) {
  .container-footer {
    padding: 30px 20px 20px;
    text-align: center;
  }
  .container-footer .grid-child {
    grid-template-columns: 1fr;
    grid-template-areas:
      "img"
      "social"
      "nav"
      "line"
      "copy"
      "priv";
    justify-items: center;
  }
  .container-footer .ucn-social,
  .container-footer .ucn-footer-nav {
    justify-content: center;
  }
  .container-footer .grid-child::after {
    width: 100%;
  }
  .container-footer .ucn-copy,
  .container-footer #mod-menu110 {
    grid-column: 1;
  }
}
.back-to-top-link {
  inset-inline-end: 25px;
  bottom: 25px;
  padding: 0.55em 0.7em;
  font-size: 25px;
  line-height: 1;
  background-color: rgba(255, 255, 255, 0.4);
  border-color: #ddd;
}
.back-to-top-link:hover,
.back-to-top-link:focus {
  background-color: #ffcb03;
  border-color: #ffcb03;
}
@media (min-width: 992px) {
  .back-to-top-link {
  }
}

/* Batch 1.4b (28 Oct 2026): footer module styling by module id, because the custom modules get no extra class (115 = social icons, 113 = copyright); MEDIA is a heading, not a link; back-to-top hover like the old .scrollup:hover (#c4c4c4, black chevron) and moved clear of the footer content */
.container-footer #mod-custom115 {
  grid-area: social;
  align-self: end;
}
.container-footer #mod-custom115 ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  list-style: none;
}
.container-footer #mod-custom115 a {
  display: block;
  line-height: 1;
  color: #383838;
  text-decoration: none;
}
.container-footer #mod-custom115 a:hover,
.container-footer #mod-custom115 a:focus {
  color: #cfa400;
}
.container-footer #mod-custom113 {
  grid-area: copy;
  grid-column: 1 / 3;
  padding: 0;
  margin: 0;
}
.container-footer #mod-custom113 p {
  margin: 0 0 0.25rem;
  font-size: 15px;
}
.container-footer #mod-custom113 a {
  color: #383838;
}
.container-footer .ucn-footer-nav .nav-header {
  display: block;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: #383838;
}
@media (min-width: 768px) {
  .container-footer .ucn-footer-nav {
    grid-column: 2 / 4;
  }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .container-footer {
    padding-right: 5vw;
    padding-left: 5vw;
  }
  .container-footer .grid-child {
    column-gap: 24px;
  }
  .container-footer .ucn-footer-nav {
    gap: 4px 2px;
  }
}
@media (max-width: 767.98px) {
  .container-footer #mod-custom115 ul {
    justify-content: center;
  }
  .container-footer #mod-custom113 {
    grid-column: 1;
  }
}
.back-to-top-link,
.back-to-top-link:hover,
.back-to-top-link:focus {
  color: #010101;
  border-color: #ddd;
}
.back-to-top-link:hover,
.back-to-top-link:focus {
  background-color: #c4c4c4;
}
@media (min-width: 992px) {
  .back-to-top-link {
    inset-inline-end: 24px;
    bottom: 24px;
  }
}

/* Batch 1.4c (28 Oct 2026): footer spacing like old-footer.png (measured relative to the poster: icon pitch about 0.42 and icon height about 0.30 of the poster width, menu text gap about 0.11, both rows centred beside the poster) and back-to-top on hover = semi-transparent yellow (alpha .4 like the old resting button) with the black chevron */
@media (min-width: 768px) {
  .container-footer #mod-custom115 {
    grid-column: 2 / 4;
  }
  .container-footer #mod-custom115 ul,
  .container-footer .ucn-footer-nav {
    justify-content: center;
  }
}
.container-footer #mod-custom115 ul {
  gap: 44px;
}
.container-footer #mod-custom115 a {
  font-size: 56px;
}
.container-footer .ucn-footer-nav {
  gap: 4px 0;
}
.back-to-top-link:hover,
.back-to-top-link:focus {
  color: #010101;
  background-color: rgba(255, 203, 3, 0.4);
  border-color: #ddd;
}

/* Batch 2.1 (28 Oct 2026): page-title banner (black, centred, yellow Poppins 700 title, two-colour variants), grey page body and left sub-menu with a yellow current item, like the old site. Banner = Custom modules in position "banner" (h1 class ucn-banner); left menu = core Menu module in position "sidebar-left" (class ucn-submenu). Breadcrumbs stay in the page for screen readers but are not shown (the old site has none). */
.container-banner {
  margin: 0;
  padding: 30px 20px 40px;
  background-color: #010101;
  text-align: center;
}
@media (min-width: 992px) {
  .container-banner {
    padding: 80px 10vw 60px;
  }
}
.ucn-banner {
  margin: 0;
  font-size: clamp(2rem, 6.2vw, 80px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #ffcb03;
}
.ucn-banner .w {
  display: block;
  color: #fff;
}
.ucn-banner .y {
  display: block;
  color: #ffcb03;
}
.ucn-banner-21 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 2rem;
}
.ucn-banner-21 .n {
  font-size: clamp(6rem, 17vw, 220px);
  line-height: 0.85;
  color: #ffcb03;
}
.ucn-banner-21 .t {
  font-size: clamp(1.75rem, 5vw, 64px);
  text-align: center;
}
.mod-breadcrumbs__wrapper {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
body.site:not(.itemid-101):not(.itemid-114):not(.itemid-115) .site-grid {
  background-color: #f3f5f7;
}
.container-component,
.container-sidebar-left {
  padding-top: 50px;
  padding-bottom: 50px;
}
.container-sidebar-left .card {
  background: transparent;
  border: 0;
}
.container-sidebar-left .card-body {
  padding: 0;
}
.container-sidebar-left .ucn-submenu {
  padding: 0;
  margin: 0;
  list-style: none;
}
.container-sidebar-left .ucn-submenu li {
  margin: 0;
}
.container-sidebar-left .ucn-submenu a {
  display: block;
  padding: 7px 20px;
  font-size: 15px;
  line-height: 1.5;
  text-decoration: none;
  color: #555;
}
.container-sidebar-left .ucn-submenu a:hover,
.container-sidebar-left .ucn-submenu a:focus {
  color: #cfa400;
}
.container-sidebar-left .ucn-submenu .active > a,
.container-sidebar-left .ucn-submenu .current > a {
  background-color: #ffcb03;
  font-weight: 700;
  color: #383838;
}
.container-sidebar-left .ucn-side-title {
  margin: 0 0 4px;
  padding: 7px 20px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #383838;
}

/* Batch 2.1b (28 Oct 2026): keep wide content inside the page next to the left menu */
.site-grid > * {
  min-width: 0;
}
.com-content__filter {
  flex-wrap: wrap;
  max-width: 100%;
}
.com-content-category-blog__item,
.com-content-category-blog__item .item-content {
  min-width: 0;
  overflow-wrap: anywhere;
}
body .container-sidebar-left .ucn-submenu li.nav-item > a {
  text-decoration: none;
}

/* Batch 2.2 (28 Oct 2026): upper-case banner titles, second line 80% size with the old line gap, duplicate headings hidden visually */
.ucn-banner {
  text-transform: uppercase;
}
.ucn-banner:not(.ucn-banner-21) .y {
}
.itemid-114 .com-content-article__body > h2:first-child,
.itemid-115 .com-content-article__body > h2:first-child,
.itemid-128 .com-content-article .page-header {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Batch 2.3 (28 Oct 2026): FAQ banner lines the same size; larger logo and taller bar at the top of the page like the old site (logo 9.7% of the page width, between 110 and 175 px; bar about 10 px taller than the logo; menu in the upper part of the bar); the scrolled 60 px state is unchanged; Press releases banner in two colours. */
.ucn-banner:not(.ucn-banner-21) .y {
  margin-top: 0.18em;
  font-size: 1em;
}
@media (min-width: 992px) {
  :root {
    --ucn-logo: clamp(110px, 9.7vw, 175px);
  }
  body.site {
    padding-top: calc(var(--ucn-logo) + 10px);
  }
  .container-header {
    height: calc(var(--ucn-logo) + 10px);
  }
  .container-header .navbar-brand img {
    height: var(--ucn-logo);
    max-height: none;
  }
  .container-header .container-nav {
    align-self: flex-start;
    height: auto;
    margin-top: max(0px, calc(var(--ucn-logo) * 0.46 - 45px));
  }
  .container-banner {
    padding-top: 30px;
  }
}
@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    @keyframes ucn-nav {
      to {
        margin-top: 0;
      }
    }
    .container-header .container-nav {
      animation: ucn-nav linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100px;
    }
  }
}

/* Batch 2.3b (28 Oct 2026): no white strip while the header shrinks (the shrink distance now equals the height lost, so the bar and the banner stay flush); header content width capped at 1500 px on very wide screens; menu text grows a little on screens wider than 2000 px. */
@media (min-width: 1200px) {
  .container-header {
    padding: 0 max(13vw, calc((100vw - 1500px) / 2));
  }
}
@media (min-width: 992px) {
  :root {
    --ucn-menu: clamp(14px, 0.7vw, 17px);
    --ucn-shrink: max(100px, calc(var(--ucn-logo) - 50px));
  }
  .container-header .mod-menu > li > a,
  .container-header .mod-menu > li > span,
  .container-header .mod-menu > li > .mod-menu__toggle-sub {
    font-size: var(--ucn-menu);
  }
}
@media (min-width: 992px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    @keyframes ucn-menu {
      to {
        font-size: calc(var(--ucn-menu) - 1px);
        line-height: 52px;
      }
    }
    .container-header,
    .container-header .navbar-brand img,
    .container-header .container-nav,
    .container-header .mod-menu > li > a,
    .container-header .mod-menu > li > span,
    .container-header .mod-menu > li > .mod-menu__toggle-sub {
      animation-range: 0 var(--ucn-shrink);
    }
  }
}

/* Batch 3.1 (28 Oct 2026): Home page like the old site. Header transparent over the hero photo at the top (992 px and up); hero with dark overlay, label, yellow title; white shadowed press cards (image on top at 16:9); yellow band with the paragraph and the video; grey band with CONNECT / ORGANISE / DONATE in three columns. The wrapper classes (home-hero, home-press, home-band, home-three, home-col) come from the article 161 markup; before that SQL runs only the header, the cards and the See-all button change. */
body.itemid-101 .site-grid .container-component {
  grid-column: full-start / full-end;
  padding-top: 0;
  padding-bottom: 0;
}
body.itemid-101 #system-message-container:empty {
  display: none;
}
body.itemid-101 .container-component > main {
  margin-top: 0;
}
body.itemid-101 .container-component nav.mod-breadcrumbs__wrapper {
  position: absolute;
}
body.itemid-101 .container-footer {
  margin-top: 0;
}
@media (min-width: 992px) {
  body.site.itemid-101 {
    padding-top: 0;
  }
  body.itemid-101 .container-header {
    background-color: transparent;
  }
  body.itemid-101 .container-header .mod-menu > li > a,
  body.itemid-101 .container-header .mod-menu > li > span {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  }
}
.home-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(520px, 64vw, 900px);
  overflow: hidden;
  background-color: #010101;
}
.home-hero > p:first-child {
  position: absolute;
  inset: 0;
  margin: 0;
}
.home-hero > p:first-child img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
.home-hero-text {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  width: min(1100px, 86%);
  padding: 40px 0 60px;
  text-align: center;
}
@media (min-width: 992px) {
  .home-hero-text {
    padding-top: clamp(150px, 15vw, 230px);
  }
}
.home-label {
  display: inline-block;
  margin: 0 0 20px;
  padding: 8px 24px;
  font-size: clamp(1rem, 1.7vw, 1.4rem);
  font-weight: 700;
  text-transform: uppercase;
  color: #ffcb03;
  background-color: rgba(0, 0, 0, 0.65);
}
.home-hero-text h2 {
  margin: 0 0 20px;
  font-size: clamp(2.25rem, 5.5vw, 5.5rem);
  font-weight: 700;
  line-height: 1.05;
  color: #ffcb03;
  text-shadow: 3px 3px 4px rgba(0, 0, 0, 0.6);
}
.home-hero-text p:not(.home-label) {
  margin: 0;
  font-size: clamp(1.05rem, 1.7vw, 1.4rem);
  font-weight: 600;
  line-height: 1.3;
  text-align: justify;
  color: #fff;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.7);
}
.home-press {
  padding: 60px 8.4vw 70px;
  background-color: #fff;
}
.home-press h2 {
  margin: 0 0 40px;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
}
main .home-press h2 a:not(.btn) {
  color: #383838;
  text-decoration: none;
}
.home-press .mod-articles-grid {
  gap: 30px;
  padding: 0;
  margin: 0 0 40px;
  list-style: none;
}
.home-press .mod-articles-item {
  height: 100%;
  overflow: hidden;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
}
.home-press .mod-articles-item-content {
  display: flex;
  flex-direction: column;
  padding: 0 30px 30px;
}
.home-press .mod-articles-image {
  order: -1;
  margin: 0 -30px 24px;
}
.home-press .mod-articles-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.home-press .mod-articles-title {
  margin: 0 0 8px;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}
main .home-press .mod-articles-item a:not(.btn):not(.page-link) {
  color: #010101;
  text-decoration: none;
}
.home-press .mod-articles-item dl {
  margin: 0 0 10px;
}
.home-press .mod-articles-date {
  font-size: 0.875rem;
  color: #777;
}
.home-press .mod-articles-date .icon-calendar {
  display: none;
}
.home-press .mod-articles-item p:not(.readmore) {
  margin: 0 0 12px;
  text-align: justify;
  color: #555;
}
.home-press .readmore {
  margin: 0;
}
.home-press .readmore .btn {
  padding: 0;
  font-weight: 700;
  color: #010101;
  background: none;
  border: 0;
}
.home-press .readmore .icon-chevron-right {
  display: none;
}
.home-press .moduletable > p {
  margin: 0;
}
.home-press .moduletable .btn-primary {
  padding: 16px 30px;
  font-weight: 700;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.home-press .moduletable .btn-primary .fa-solid {
  margin-inline-end: 12px;
  font-size: 1.4em;
  vertical-align: -0.1em;
}
.home-band {
  padding: 90px 8.4vw;
  background-color: #ffcb03;
}
.home-band p {
  margin: 0 0 50px;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
  line-height: 1.45;
  text-align: justify;
  color: #010101;
}
.home-band iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  border: 0;
}
@media (min-width: 768px) {
  .home-band iframe {
    width: 60%;
  }
}
.home-three {
  display: grid;
  gap: 50px;
  padding: 70px 8.4vw 85px;
  background-color: #f3f5f7;
}
@media (min-width: 992px) {
  .home-three {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 5vw;
  }
}
.home-col h2 {
  margin: 0 0 30px;
  font-size: clamp(1.5rem, 2.2vw, 2.25rem);
  font-weight: 800;
  letter-spacing: 0.15em;
  text-align: center;
  text-transform: uppercase;
  color: #ffcb03;
  text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.75);
}
.home-col > p:has(img) {
  margin: 0 0 40px;
  text-align: center;
}
.home-col img {
  width: auto;
  height: clamp(110px, 10vw, 150px);
}
.home-col p {
  color: #010101;
  text-align: justify;
}
.home-col p a {
  color: #cfa400;
}
@media (max-width: 575.98px) {
  .home-hero-text p:not(.home-label),
  .home-band p,
  .home-col p,
  .home-press .mod-articles-item p:not(.readmore) {
    text-align: left;
  }
  .home-band {
    padding-block: 50px;
  }
  .home-three {
    padding-block: 50px 60px;
  }
}

/* Batch 3.1b (28 Oct 2026): the three press cards get equal height (three columns from 992 px) with "Read more" at the bottom; on very wide screens the Home sections keep their text in a 1500 px column (same cap as the header) instead of 83 % of the width. */
.home-press .mod-articles-grid {
  align-items: stretch;
}
.home-press .mod-articles-grid > li {
  display: flex;
}
.home-press .mod-articles-item {
  display: flex;
  flex: 1 1 auto;
}
.home-press .mod-articles-item-content {
  flex: 1 1 auto;
}
.home-press .readmore {
  margin-top: auto;
}
@media (min-width: 992px) {
  .home-press .mod-articles-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.home-press,
.home-band,
.home-three {
  padding-inline: max(8.4vw, calc((100vw - 1500px) / 2));
}

/* Batch 3.2 (28 Oct 2026): Why Unite flip cards (article 162), pure CSS, no JavaScript. Values from the old flip box and the flipcard-12 captures. Cards: 3 columns from 1200 px, 2 from 900 px, 1 below; on touch screens and phones no flip, front and back stacked. */
.flip-grid { display: grid;  gap: 1.25rem; margin: 2rem 0; }
.flip-card { perspective: 1000px;  outline-offset: 3px; }
.flip-inner { position: relative; height: 100%; min-height: 23rem; transform-style: preserve-3d; transition: transform .6s; }
.flip-front, .flip-back { position: absolute; inset: 0; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: auto; }
.flip-back { transform: rotateY(180deg); font-size: .95rem; font-weight: 600; line-height: 1.35; }
.flip-card:nth-child(odd) .flip-front { background: #010101; color: #ffcb03; }
.flip-card:nth-child(odd) .flip-back  { background: #ffcb03; color: #010101; }
.flip-card:nth-child(even) .flip-front { background: #ffcb03; color: #010101; }
.flip-card:nth-child(even) .flip-back  { background: #010101; color: #ffcb03; }
.flip-front h3 { font-size: clamp(1.35rem, 2.3vw, 1.875rem); font-weight: 700; line-height: 1.15; text-transform: uppercase; margin: 1rem 0 0; color: inherit; }
.flip-icon { display: inline-block; width: 85px; height: 85px; line-height: 85px; border-radius: 50%; font-size: 35px; text-align: center; }
.flip-card:nth-child(odd) .flip-icon { background: #ffcb03; color: #010101; }
.flip-card:nth-child(even) .flip-icon { background: #010101; color: #ffcb03; }
.flip-back a[href^="#"], main .flip-back p a[href^="#"]:not(.btn):not(.page-link) { color: #e00; font-weight: 800; font-size: 1.1rem; text-decoration: none; }
.flip-card:hover .flip-inner, .flip-card:focus .flip-inner, .flip-card:focus-within .flip-inner { transform: rotateY(180deg); }
@media (max-width: 1199px) { .flip-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 899px) { .flip-grid { grid-template-columns: 1fr; } }
/* Touch screens and phones: no flip, both faces stacked and readable */
@media (hover: none), (max-width: 575px) {
  .flip-grid { grid-template-columns: 1fr; }
  .flip-card { min-height: 0; }
  .flip-inner { min-height: 0; transform: none !important; transition: none; }
  .flip-front, .flip-back { position: static; transform: none; backface-visibility: visible; }
  .flip-front { padding-bottom: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .flip-inner { transition: none; }
  .flip-card { min-height: 0; }
  .flip-inner { min-height: 0; transform: none !important; }
  .flip-front, .flip-back { position: static; transform: none; backface-visibility: visible; }
}

/* Batch 3.2b (28 Oct 2026): flip cards keep the card look on phones and flip on tap (tabindex 0, :focus and :focus-within, no JavaScript), tapping elsewhere flips back. Front and back share one grid cell, so the card is as tall as its longer face and no text is cut off. Tablets follow the same column rule as desktops (3 from 1200 px, 2 from 900 px). Visitors who prefer reduced motion get a plain switch between front and back (no animation); both faces stay in the page for screen readers. */
.flip-card {
  min-height: 23rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.flip-card .flip-inner {
  display: grid;
  min-height: 23rem;
  transform-style: preserve-3d;
  transition: transform 0.6s;
}
.flip-card .flip-front,
.flip-card .flip-back {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: visible;
}
.flip-card .flip-back {
  transform: rotateY(180deg);
}
.flip-card:hover .flip-inner,
.flip-card:focus .flip-inner,
.flip-card:focus-within .flip-inner {
  transform: rotateY(180deg) !important;
}
@media (min-width: 900px) {
  .flip-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .flip-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 575.98px) {
  .flip-card,
  .flip-card .flip-inner {
    min-height: 15rem;
  }
  .flip-card .flip-front,
  .flip-card .flip-back {
    padding: 1.25rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .flip-card .flip-inner {
    transition: none;
  }
  .flip-card:hover .flip-inner,
  .flip-card:focus .flip-inner,
  .flip-card:focus-within .flip-inner,
  .flip-card .flip-inner {
    transform: none !important;
  }
  .flip-card .flip-front,
  .flip-card .flip-back {
    transform: none;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
  }
  .flip-card .flip-back,
  .flip-card:hover .flip-front,
  .flip-card:focus .flip-front,
  .flip-card:focus-within .flip-front {
    opacity: 0;
  }
  .flip-card:hover .flip-back,
  .flip-card:focus .flip-back,
  .flip-card:focus-within .flip-back {
    z-index: 1;
    opacity: 1;
  }
}

/* 3.2c: Why Unite cards, three columns from 992px, one column below (centred at 70% on tablets), never two columns */
.flip-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 576px) and (max-width: 991.98px) { .flip-grid { width: 70vw; margin-inline: auto; } }
@media (min-width: 992px) { .flip-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }


/* Batch 3.3 (28 Oct 2026): Press releases & statements list as cards like the Home press cards. */
.com-content-category-blog__items.blog-items {
  display: grid;
  gap: 30px;
  column-count: auto;
  align-items: stretch;
}
@media (min-width: 768px) {
  .com-content-category-blog__items.blog-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  .com-content-category-blog__items.blog-items {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.com-content-category-blog__item {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
}
.com-content-category-blog__item .item-image {
  float: none;
  margin: 0;
}
.com-content-category-blog__item .item-image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.com-content-category-blog__item .item-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 24px 30px 30px;
}
.com-content-category-blog__item .page-header {
  margin: 0 0 8px;
  padding: 0;
  border: 0;
}
.com-content-category-blog__item .page-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}
main .com-content-category-blog__item .page-header h2 a {
  color: #010101;
  text-decoration: none;
}
main .com-content-category-blog__item .page-header h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.com-content-category-blog__item .article-info {
  margin: 0 0 10px;
}
.com-content-category-blog__item .article-info-term {
  display: none;
}
.com-content-category-blog__item .article-info dd {
  margin: 0;
  font-size: 0.875rem;
  color: #777;
}
.com-content-category-blog__item .article-info .icon-calendar {
  display: none;
}
.com-content-category-blog__item .item-content > :not(.page-header):not(.article-info):not(p:first-of-type) {
  display: none;
}
.com-content-category-blog__item .item-content > p:first-of-type {
  display: -webkit-box;
  margin: 0 0 12px;
  overflow: hidden;
  text-align: left !important;
  color: #555;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
}
.com-content-category-blog__item .item-content::after {
  content: "Read more";
  margin-top: auto;
  font-weight: 700;
  color: #010101;
}
main .com-content-category-blog__navigation .pagination .page-item.active .page-link {
  color: #fff;
  background-color: #010101;
  border-color: #010101;
}
main .com-content-category-blog__navigation .pagination .page-link:hover,
main .com-content-category-blog__navigation .pagination .page-link:focus {
  color: #010101;
  background-color: #ffcb03;
  border-color: #ffcb03;
}


/* 3.3b: below 992px the left sub-menu sits above the page content (it was below it) */
@media (max-width: 991.98px) {
  .site-grid {
    grid-template-areas:
      ". banner banner banner banner ."
      ". top-a top-a top-a top-a ."
      ". top-b top-b top-b top-b ."
      ". side-l side-l side-l side-l ."
      ". comp comp comp comp ."
      ". side-r side-r side-r side-r ."
      ". bot-a bot-a bot-a bot-a ."
      ". bot-b bot-b bot-b bot-b .";
  }
  .site-grid .container-sidebar-left { width: 100%; }
}


/* 3.3c: below 992px smaller gaps around the left sub-menu (banner to menu, menu to content) */
@media (max-width: 991.98px) {
  body.has-sidebar-left .site-grid .container-sidebar-left { padding-top: 24px; padding-bottom: 0; }
  body.has-sidebar-left .site-grid .container-sidebar-left .sidebar-left.card { margin-top: 0; margin-bottom: 0; }
  body.has-sidebar-left .site-grid .container-component { padding-top: 16px; }
  body.has-sidebar-left .site-grid .container-component > main { margin-top: 0; }
}


/* 3.4: article pages: the picture floats left at a moderate size, text wraps around it; "Details" label hidden visually */
.com-content-article figure.item-image { float: left; width: min(40%, 380px); margin: .25rem 1.75rem 1rem 0; }
.com-content-article figure.item-image img { display: block; width: 100%; height: auto; }
.com-content-article .article-info-term { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 575.98px) { .com-content-article figure.item-image { float: none; width: 100%; margin: 0 0 1rem; } }


/* 4.1: FAQ (article 163): question rows with a yellow icon at the left and a yellow chevron at the right, photo band at the end */
body.itemid-115 .site-grid .container-component { grid-column: full-start / full-end; padding-bottom: 0; }
body.itemid-115 .com-content-article__body { padding-inline: max(8.4vw, calc((100vw - 1500px) / 2)); }
body.itemid-115 .com-content-article__body details { border-bottom: 1px solid #dcdcdc; }
body.itemid-115 .com-content-article__body summary { display: flex; align-items: center; gap: 1rem; padding: 1.1rem .5rem; list-style: none; cursor: pointer; }
body.itemid-115 .com-content-article__body summary::-webkit-details-marker { display: none; }
body.itemid-115 .com-content-article__body summary > i { flex: none; width: 1.6rem; text-align: center; font-size: 1.25rem; color: #ffcb03; }
body.itemid-115 .com-content-article__body summary h3 { display: block; flex: 1; margin: 0; font-size: clamp(1rem, 1.15vw, 1.15rem); font-weight: 700; color: #383838; }
body.itemid-115 .com-content-article__body summary::after { flex: none; content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .85rem; color: #ffcb03; transition: transform .2s; }
body.itemid-115 .com-content-article__body details[open] > summary::after { transform: rotate(90deg); }
body.itemid-115 .com-content-article__body details > :not(summary) { padding: 0 2.5rem 1rem 2.6rem; }
body.itemid-115 .faq-band { margin: 3rem calc(-1 * max(8.4vw, calc((100vw - 1500px) / 2))) 0; height: clamp(160px, 17vw, 330px); background: #ffcb03 url("/images/pictures/buffer_zone_dance2.yellow.jpg") 30% 62% / 150% auto no-repeat; }
@media (prefers-reduced-motion: reduce) { body.itemid-115 .com-content-article__body summary::after { transition: none; } }

/* 3.4b: the 3.4 article picture rules must not touch the picture of the Home press cards (a module inside article 161) */
.com-content-article figure.mod-articles-image.item-image { float: none; width: auto; margin: 0 -30px 24px; }

/* 4.2 share row, 4.5 picture lightbox (child template ucn, article layout override) */
.ucn-share{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:2rem 0 1rem;clear:both}
.ucn-share__label{font-weight:700;margin-right:.25rem}
.ucn-share__btn{display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:50%;background:#010101;color:#fff;text-decoration:none}
.ucn-share__btn:hover,.ucn-share__btn:focus-visible{background:#ffcb03;color:#010101}
.ucn-zoom{display:inline-block;max-width:100%;padding:0;border:0;background:none;line-height:0;cursor:zoom-in}
.ucn-zoom img{max-width:100%;height:auto}
.ucn-zoom.float-start{margin:.25rem 1.5rem 1rem 0}
.ucn-zoom.float-end{margin:.25rem 0 1rem 1.5rem}
figure.item-image .ucn-zoom{display:block;width:100%}
@media(max-width:575.98px){.ucn-zoom.float-start,.ucn-zoom.float-end{float:none!important;display:block;margin:0 0 1rem}}
.ucn-lightbox{inset:0;max-width:94vw;max-height:94vh;margin:auto;padding:0;border:0;background:transparent;overflow:visible}
.ucn-lightbox:popover-open{display:block}
.ucn-lightbox::backdrop{background:rgba(1,1,1,.82)}
.ucn-lightbox img{display:block;width:auto!important;max-width:94vw;max-height:90vh;height:auto;box-shadow:0 8px 40px rgba(0,0,0,.5)}
.ucn-lightbox__close{position:absolute;top:-14px;right:-14px;width:2.5rem;height:2.5rem;padding:0;border:0;border-radius:50%;background:#ffcb03;color:#010101;font-size:1.75rem;line-height:1;cursor:pointer}
.ucn-lightbox__close:hover,.ucn-lightbox__close:focus-visible{background:#010101;color:#fff}

/* 4.6 no black box behind the top menu items on hover/active (text stays yellow) */
@media(min-width:992px){.container-header .mod-menu>li.active>a,.container-header .mod-menu>li>a:hover,.container-header .mod-menu>li>a:focus{background:transparent}}
/* 4.7 share row on the full-width FAQ page lines up with the questions */
body.itemid-115 .ucn-share{padding-inline:max(16px,calc((100% - 1064px)/2))}

/* 4.8 dropdown: highlight fills the whole row (no white gap above/below) */
.container-header .mod-menu .mod-menu__sub li{padding:0}

/* 4.9 dropdown closer to the menu text, rounded corners and a small arrow (like the old site) */
@media (min-width: 992px) {
  .container-header .mod-menu .mod-menu__sub {
    border-radius: 6px;
  }
  .container-header .mod-menu .mod-menu__sub::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 24px;
    border: 8px solid transparent;
    border-top: 0;
    border-bottom-color: #fff;
  }
  .container-header .mod-menu > li:nth-last-child(-n + 2) > .mod-menu__sub::before {
    right: 24px;
    left: auto;
  }
  .container-header .mod-menu .mod-menu__sub li:first-child > a {
    border-radius: 6px 6px 0 0;
  }
  .container-header .mod-menu .mod-menu__sub li:last-child > a {
    border-radius: 0 0 6px 6px;
  }
}

/* 4.10 article list tables (Opinion polls) and the friendly 404/error page */
.com-content-category__table {
  --table-bg: #fff;
  --table-color: #010101;
  --table-striped-bg: #f7f8f9;
  --table-striped-color: #010101;
  --table-hover-bg: #fff4c2;
  --table-hover-color: #010101;
  border: 0;
}
.com-content-category__table thead {
  --table-bg: #010101;
  --table-color: #fff;
}
.com-content-category__table th,
.com-content-category__table td {
  padding: .9rem 1rem;
  vertical-align: middle;
}
.com-content-category__table thead th {
  padding: .8rem 1rem;
}
.com-content-category__table thead th a {
  color: #fff;
  text-decoration: none;
}
.com-content-category__table tbody a {
  font-weight: 500;
  color: #010101;
  text-decoration: none;
}
.com-content-category__table tbody a:hover,
.com-content-category__table tbody a:focus {
  text-decoration: underline;
}
.ucn-error {
  max-width: 44rem;
  margin: 3rem auto;
  text-align: center;
}
.ucn-error__code {
  margin: 0;
  font-size: clamp(5rem, 16vw, 9rem);
  font-weight: 700;
  line-height: 1;
  color: #ffcb03;
  text-shadow: 3px 3px 0 #010101;
}
.ucn-error__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
}
.ucn-error .btn-secondary {
  border-color: #010101;
  background: #010101;
  color: #fff;
}
.ucn-error .btn-secondary:hover,
.ucn-error .btn-secondary:focus-visible {
  border-color: #ffcb03;
  background: #ffcb03;
  color: #010101;
}

/* 4.12 dropdown a little higher than 4.9, with the arrow back in view (replaces 4.11) */
@media (min-width: 992px) {
  .container-header .mod-menu .mod-menu__sub {
    top: calc(50% + 22px);
  }
}

/* 4.13 404 page: more space above the buttons */
.ucn-error__links {
  margin-top: 3rem;
}

/* 4.14 Historical Documents timeline (category 98 description): yellow year tags on a vertical line, first entry open, others open on click (no JavaScript) */
.tl {
  margin: 2rem 0 2rem 12px;
  border-left: 2px solid #c9ced3;
}
.tl-item {
  position: relative;
  padding: 0 0 1.5rem 22px;
}
.tl-item::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 0;
  width: 16px;
  border-top: 2px solid #c9ced3;
}
.tl-item summary {
  display: block;
  cursor: pointer;
  list-style: none;
}
.tl-item summary::-webkit-details-marker {
  display: none;
}
.tl-year {
  display: inline-block;
  padding: .15rem .55rem;
  background: #ffcb03;
  color: #010101;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: .08em;
}
.tl-title {
  display: block;
  margin-top: .6rem;
  color: #555;
}
.tl-title::after {
  content: "\f078";
  display: inline-block;
  margin-left: .6rem;
  font-family: "Font Awesome 6 Free";
  font-size: .7em;
  font-weight: 900;
  color: #ffcb03;
  transition: transform .2s;
}
.tl-item[open] .tl-title::after {
  transform: rotate(180deg);
}
.tl-item summary:focus-visible {
  outline: 2px solid #010101;
  outline-offset: 4px;
}
.tl-body {
  margin-top: 1rem;
}
.tl-body img {
  display: block;
  width: 100%;
  max-width: 600px;
  height: auto;
  border: 1px solid #010101;
}
.tl-cap {
  max-width: 600px;
  margin: .6rem 0 .3rem;
  font-size: .9rem;
  color: #555;
}
.tl-more {
  margin: 0;
  font-size: .9rem;
}

/* 4.15 (1 Nov 2026): Home CONNECT / ORGANISE / DONATE icons are Font Awesome Free 6 (solid) from Joomla core instead of the 2020 PNGs of unknown licence: handshake, bullhorn, hand-holding-heart. Same place and size as the old pictures. */
.home-col > p.home-icon {
  margin: 0 0 40px;
  text-align: center;
}
.home-col .home-icon .fa-solid {
  font-size: clamp(90px, 8.5vw, 130px);
  line-height: 1;
  color: #010101;
}