/* Cookie consent banner (Views/Shared/_CookiePopUp.cshtml, rendered from Home only).
   Linked from that partial, so the rest of the site no longer downloads it.

   The <link> sits immediately before the #popup-box markup: a stylesheet link in the body still
   blocks rendering of the content that follows it, so the banner never paints unstyled.

   `transform` is load-bearing for the reveal - cookiePopUp.js toggles .is-visible - so do not add a
   reduced-motion override that redeclares it. If a transition is ever added here, disable it from
   ONE @media (prefers-reduced-motion: reduce) block at the END of this file, motion properties only.

   Centred by auto inline margins between left:0 and right:0 rather than by a hardcoded offset. The
   old rule had no `left` at all - just width:40% with margin-left:18% - so the banner sat left of
   centre and drifted further as the viewport grew. translateX(-50%) is avoided on purpose. */
#popup-box {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 40%;
  margin-inline: auto;
  display: none;
  justify-content: center;

  /* THE LAYER CONTRACT FOR THIS TEMPLATE, lowest to highest:

       content and sticky chrome   up to 1080 (skip link; Bootstrap's .fixed-top navbar is 1030)
       #popup-box                  9990   <- here
       .confetti-container         9998   (pointer-events: none, so it never blocks anything)
       .loading-overlay            9999
       .dialog-overlay            10000
       .toast-container           10001

     This banner used to be 10001, level with the toasts and above the dialog, and it covered the
     bottom of every modal. At 375px that is the button row: hit-testing the centre of a dialog's
     "Close" returned this element, so the control was mouse-untappable at its centre and, since
     dialog.js traps Tab inside the dialog, keyboard-unreachable while still being visibly focused.
     WCAG 2.4.11 Focus Not Obscured (Minimum), AA.

     A modal is the topmost layer by definition, so the banner belongs under it, where the overlay
     scrim dims it along with the rest of the page. Do not raise this back above 10000; the dialog
     cannot be raised instead, because the toasts sit above it on purpose (see toast.css).
     dialog-is-the-top-layer.test.py asserts this ordering. */
  z-index: 9990;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #dee2e6;
  border-radius: 0.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  padding: 0.75rem 1rem;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

#popup-box.is-visible {
  display: flex;
  visibility: visible;
}

#popup-box .toast-body {
  flex: 1 1 auto;
  padding: 0.25rem 0.5rem;
}

@media only screen and (max-width: 600px) {
  #popup-box {
    width: 63%;
  }
}