/* ga-consent banner. Every colour, font and size comes from a custom property,
   so each site maps these to its own tokens (and its own light/dark switch).
   The defaults below are neutral and pass WCAG AA in light and dark. */

:root {
  --gac-bg: #ffffff;
  --gac-text: #1b1b1b;
  --gac-link: #1d4f91;
  --gac-border: #1b1b1b;
  --gac-btn-bg: #1b1b1b;
  --gac-btn-text: #ffffff;
  --gac-btn-border: #1b1b1b;
  --gac-btn-hover-bg: #3d3d3d;
  --gac-btn-hover-text: #ffffff;
  --gac-focus: #1d4f91;
  --gac-font: inherit;
  --gac-font-size: 1rem;
  --gac-radius: 8px;
  --gac-max-width: 880px;
  --gac-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
  --gac-z: 1000;
}
@media (prefers-color-scheme: dark) {
  :root {
    --gac-bg: #1b1b1b;
    --gac-text: #f2f2f2;
    --gac-link: #9cc3ff;
    --gac-border: #f2f2f2;
    --gac-btn-bg: #f2f2f2;
    --gac-btn-text: #1b1b1b;
    --gac-btn-border: #f2f2f2;
    --gac-btn-hover-bg: #d0d0d0;
    --gac-btn-hover-text: #1b1b1b;
    --gac-focus: #9cc3ff;
  }
}

.gac {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--gac-z);
  background: var(--gac-bg); color: var(--gac-text);
  border-top: 2px solid var(--gac-border);
  box-shadow: var(--gac-shadow);
  font-family: var(--gac-font); font-size: var(--gac-font-size); line-height: 1.5;
  padding: 16px max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  max-height: 60vh; overflow-y: auto;
}
.gac[hidden] { display: none !important; }
.gac:focus { outline: none; }
.gac:focus-visible { outline: 3px solid var(--gac-focus); outline-offset: -5px; }

.gac-inner {
  max-width: var(--gac-max-width); margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
}
.gac-text { flex: 1 1 22rem; margin: 0; }
.gac-link { color: var(--gac-link); text-decoration: underline; text-underline-offset: 3px; }
.gac-link:hover { color: var(--gac-text); }

/* Two buttons, identical in size and weight: refusing is as easy as accepting. */
.gac-buttons { flex: 0 1 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gac-button {
  font: inherit; font-weight: 700; line-height: 1.2;
  min-height: 44px; min-width: 9.5em; padding: 10px 18px;
  color: var(--gac-btn-text); background: var(--gac-btn-bg);
  border: 2px solid var(--gac-btn-border); border-radius: var(--gac-radius);
  cursor: pointer;
}
.gac-button:hover { color: var(--gac-btn-hover-text); background: var(--gac-btn-hover-bg); }
.gac-link:focus-visible, .gac-button:focus-visible { outline: 3px solid var(--gac-focus); outline-offset: 2px; }

@media (max-width: 480px) {
  .gac-buttons { width: 100%; }
  .gac-button { min-width: 0; }
}

/* While the banner shows, the page gets bottom padding equal to its height,
   so nothing (like a form's Send button) is ever hidden behind it. */
html.gac-open body {
  padding-bottom: calc(var(--gac-pad-orig, 0px) + var(--gac-height, 0px)) !important;
}

@media print {
  .gac { display: none !important; }
  html.gac-open body { padding-bottom: var(--gac-pad-orig, 0px) !important; }
}