/* Cookie banner: shared base stylesheet (2026-11-11). Goes with consent.js (the Pareto edition), which builds the banner and
   gives it the class names used below. consent.js writes plain inline styles (a white box); this file overrides them with
   !important, so the banner takes the colours of whatever page it sits on. A page themes it by setting the custom properties
   below on :root in its own CSS. Every property has a default, so a page that sets none still gets a dark, readable banner.
   Accept and Reject use exactly the same properties: they are always the same size, colour, border, hover and focus ring.

   --consent-bg            panel background. Use a solid colour (not a gradient or transparent) so text contrast is predictable.
   --consent-fg            panel text colour. Keep contrast with --consent-bg at 4.5:1 or better.
   --consent-border        panel border colour (1px).
   --consent-glow          panel box-shadow: the edge and glow that make it stand out from the page.
   --consent-radius        panel corner radius. The buttons use 65% of it.
   --consent-font          font-family stack for the whole banner (buttons included).
   --consent-btn-bg        background of both buttons.
   --consent-btn-fg        text colour of both buttons.
   --consent-btn-border    border colour of both buttons (1px).
   --consent-btn-hover-bg  background of both buttons on hover.
   --consent-focus         keyboard focus ring colour (3px, on buttons and on the link).
   --consent-link          colour of the "Privacy Policy" link.

   Layout is fixed: text on top, Accept (left) and Reject (right) side by side at equal width down to 320 px, "Privacy Policy"
   centred below. Text 15.5 px, buttons 48 px tall. */
.cookie-consent[hidden]{display:none!important}
.cookie-consent{
  box-sizing:border-box;padding:20px 22px!important;
  background:var(--consent-bg,#11181c)!important;color:var(--consent-fg,#eef3f1)!important;
  border:1px solid var(--consent-border,rgba(255,255,255,.3))!important;border-radius:var(--consent-radius,18px)!important;
  box-shadow:var(--consent-glow,0 18px 60px rgba(0,0,0,.55))!important;
  font:400 15.5px/1.55 var(--consent-font,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif)!important;
}
.cookie-consent-text{margin:0 0 16px!important;font-size:15.5px!important;line-height:1.55!important}
.cookie-consent-note{margin:0 0 16px!important;font-size:15.5px!important;line-height:1.55!important}
.cookie-consent-actions{gap:12px!important}
.cookie-consent-btn{
  appearance:none;box-sizing:border-box;width:100%!important;min-height:48px!important;margin:0!important;padding:0 14px!important;
  background:var(--consent-btn-bg,#1c272d)!important;color:var(--consent-btn-fg,#f6faf8)!important;
  border:1px solid var(--consent-btn-border,rgba(255,255,255,.45))!important;border-radius:calc(var(--consent-radius,18px) * .65)!important;
  font:600 15.5px/1.2 var(--consent-font,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif)!important;cursor:pointer;
  transition:background .15s,border-color .15s;
}
.cookie-consent-btn:hover:not(:disabled){background:var(--consent-btn-hover-bg,#27383f)!important}
.cookie-consent-btn:disabled{opacity:.45!important;cursor:not-allowed!important}
.cookie-consent-links{margin:10px 0 0!important;font-size:15px!important;line-height:1.4!important;text-align:center!important}
.cookie-consent-link{display:inline-block;padding:8px 14px;color:var(--consent-link,#8fd3ff)!important;text-decoration:underline!important;text-underline-offset:3px}
.cookie-consent :focus-visible{outline:3px solid var(--consent-focus,#8fd3ff)!important;outline-offset:3px!important}
@media (max-width:420px){
  .cookie-consent{padding:16px 14px!important}
  .cookie-consent-btn{padding:0 8px!important}
}
/* While the banner is open, keep room under the page so no button is stuck behind it. */
body:has(> .cookie-consent:not([hidden])){padding-bottom:300px}
@media print{.cookie-consent,.cookie-settings-button{display:none!important}}