/* EU funding acknowledgement. Only copied to the built site when funding is switched on. Uses the tokens in site.css. */

/* Home page notice: fixed to the bottom of the screen, white, only the official image (linked to the EU Funding page) and a close button.
   z-index 4 sits above the page content and below the header (5), so the open mobile menu drawer covers it. */
.funding-notice {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 4;
  display: flex; align-items: center; gap: 4px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom)) 12px;
  background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -2px 14px rgba(0, 0, 0, .1);
  transition: transform .25s ease, visibility 0s;
}
.funding-notice[hidden], .funding-closed .funding-notice { display: none; }
.funding-notice.is-away { transform: translateY(calc(100% + 24px)); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
.funding-notice-link { flex: 1 1 auto; min-width: 0; max-width: 520px; display: block; }
.funding-notice-link img { display: block; width: 100%; height: auto; }
.funding-notice-link:focus-visible { outline: 3px solid var(--terracotta); outline-offset: 2px; }
.funding-notice-close {
  flex: none; width: 44px; height: 44px; margin: 0 0 0 auto; padding: 0; align-self: center;   /* auto margin: at the bar's right edge on 600-759px */
  background: none; border: 0; border-radius: 0; cursor: pointer;
  font: 400 32px/1 var(--font); color: var(--black);
}
.funding-notice-close:hover { color: var(--terracotta-text); }
/* Keep keyboard focus and anchor jumps clear of the notice while it is showing. */
html:not(.funding-closed):has(.funding-notice:not([hidden]):not(.is-away)) { scroll-padding-bottom: 100px; }
/* JavaScript off: the bar cannot be closed or slid away, so keep the end of the page reachable above it (.28 is at least the height/width ratio of either period's artwork). */
html:not(.js) body:has(.funding-notice) { padding-bottom: calc(min(100vw - 68px, 520px) * .28 + 17px + env(safe-area-inset-bottom)); }
@media (min-width: 760px) {
  html:not(.funding-closed):has(.funding-notice:not([hidden]):not(.is-away)) { scroll-padding-bottom: 130px; }
  .funding-notice {
    left: auto; right: 20px; bottom: 20px; gap: 6px; padding: 10px 6px 10px 12px;
    border: 1px solid var(--line);
  }
  .funding-notice-link { flex: none; width: 360px; }
  .funding-notice-close { width: 36px; height: 36px; margin-left: 0; font-size: 28px; }
  .funding-notice.is-away { transform: translateY(calc(100% + 44px)); }
  html:not(.js) body:has(.funding-notice) { padding-bottom: calc(360px * .28 + 44px); }
}
/* Short phones (for example 375x667): tighten the hero's top padding and spacing so both hero buttons end above the notice on load. */
@media (max-width: 759px) and (max-height: 720px) {
  .hero-copy { padding-top: 16px; gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .funding-notice, .funding-notice.is-away { transition: none; }
}

/* EU Funding page */
.funding-official { background: #fff; padding: 12px; max-width: 640px; }
.funding-official img { display: block; width: 100%; max-width: 600px; height: auto; }
.funding-section { padding: clamp(36px, 5vw, 64px) var(--gutter) 0; }
.funding-section:last-of-type { padding-bottom: clamp(56px, 8vw, 120px); }
.funding-body { max-width: 1280px; display: flex; flex-direction: column; gap: 20px; }
.funding-body > * { max-width: 46em; }
.funding-body h2 { font-size: 24px; font-weight: 800; color: var(--black); line-height: 1.25; }
.funding-facts { margin: 0; border-top: 1px solid var(--line); }
.funding-fact { padding: 16px 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr; gap: 6px; }
.funding-facts dt { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--terracotta-text); }
.funding-facts dd { margin: 0; font-size: 17px; line-height: 1.6; color: var(--text); text-wrap: pretty; }
.funding-facts dd p + p { margin-top: 12px; }
.funding-links { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 10px; font-size: 17px; line-height: 1.55; }
@media (min-width: 640px) {
  .funding-fact { grid-template-columns: 190px 1fr; gap: 24px; }
}