/* The cookie banner, the footer's two cookie links, and the footer strip on
   the pages that have no footer of their own.

   One file for every page that shows them: the marketing pages, the tools
   (which bring their own stylesheets, not style.css), the brochures, the 404
   page and the training course at /lms/. So it carries its own tokens, for
   both themes, keyed off the same <html data-theme> as everything else
   (theme.js; dark when there is no attribute at all).

   The banner is shown by THIS file, not by a script that runs later:
   consent.js sets <html data-consent="ask"> in <head>, before the first
   paint, and the rule below shows the banner from the first frame. With
   JavaScript off it keeps its `hidden` attribute, and Google Analytics
   cannot run either.

   The two answers are the same button twice: same size, same colour, same
   weight, side by side. Refusing is exactly as easy as accepting, and looks
   it (EDPB guidelines 03/2022; the Garante's cookie guidelines, 2021). The
   X at the top right is the Garante's close control: on a first visit it
   keeps Google Analytics off, so it is drawn plainly visible, never faint.

   A small window in the bottom-left corner, about half the size it was at
   first (owner, 25 October 2026): 320px wide at most, in smaller type, so it
   asks without covering the page. Its words are unchanged; on a phone it
   takes the width of the screen. */

:root {
  --consent-card: #1d1d1f;
  --consent-ink: #f5f5f7;
  --consent-ink-2: #a1a1a6;   /* 6.5:1 on the card */
  --consent-line: #424245;
  --consent-blue: #2997ff;    /* links and focus: 5.6:1 on the card */
  --consent-fill: #2997ff;
  --consent-fill-hover: #4aa7ff;
  --consent-on-fill: #00224d; /* 5.2:1 on the fill, 6.2:1 hovered */
  --consent-shadow: 0 18px 44px -18px rgba(0, 0, 0, 0.9), 0 1px 3px rgba(0, 0, 0, 0.5);
}

:root:where([data-theme='light']) {
  --consent-card: #ffffff;
  --consent-ink: #1d1d1f;
  --consent-ink-2: #6e6e73;   /* 5.1:1 on white */
  --consent-line: #d2d2d7;
  --consent-blue: #0066cc;    /* 5.6:1 on white */
  --consent-fill: #0071e3;
  --consent-fill-hover: #0066cc; /* darker, not lighter: white keeps 5.6:1 */
  --consent-on-fill: #ffffff; /* 4.7:1 on the fill */
  --consent-shadow: 0 18px 44px -20px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ------------------------------------------------------------- banner */

.consent {
  display: none;
  position: fixed;
  /* Under the global bar (9000), so an open phone menu covers it; under the
     sign-in gate and dialogs (9300-9500); over the floating Symbols switch
     (800) and all page content. */
  z-index: 8900;
  inset-inline: 0;
  inset-block-end: 0;
  padding: 0 max(16px, env(safe-area-inset-right, 0px))
    calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  pointer-events: none;
}

/* Shown on a first visit, and whenever somebody asks to see it again. The
   training course holds it back ([data-consent-wait]) until its own words
   are in. */
:root[data-consent='ask'] .consent:not([data-consent-wait]),
:root[data-consent-open] .consent {
  display: block;
}

/* A column: the words in .consent-body, which scrolls on its own when the
   window is small, and the two answers under it, which never scroll out of
   view. Refusing must never take a scroll that accepting does not. */
.consent-card {
  position: relative;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  box-sizing: border-box;
  max-width: 320px;
  margin-inline: 0 auto;
  padding: 12px 14px 12px;
  border: 1px solid var(--consent-line);
  border-radius: 14px;
  background: var(--consent-card);
  color: var(--consent-ink);
  box-shadow: var(--consent-shadow);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue',
    'Atkinson Hyperlegible', Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  text-align: start;
  overflow-wrap: anywhere;
  max-height: calc(100vh - 112px);
  max-height: calc(100dvh - 112px);
  overflow: hidden;
}

.consent-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.consent-actions {
  flex: none;
  margin-top: 10px;
}

.consent-title {
  margin: 0 0 4px;
  /* Clear of the X beside it. */
  padding-inline-end: 36px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--consent-ink);
}

.consent-title:focus {
  outline: none;
}

.consent-title:focus-visible {
  outline: 3px solid var(--consent-blue);
  outline-offset: 4px;
  border-radius: 6px;
}

.consent-text,
.consent-now {
  margin: 0;
  color: var(--consent-ink-2);
}

.consent-now {
  margin-top: 8px;
}

.consent-now {
  color: var(--consent-ink);
  font-weight: 600;
}

/* A link in a sentence is underlined: colour alone does not say "link". */
.consent-more {
  color: var(--consent-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  /* A larger target without reflowing the sentence around it. */
  padding-block: 8px;
}

.consent-more:focus-visible,
.consent-foot-link:focus-visible {
  outline: 3px solid var(--consent-blue);
  outline-offset: 2px;
  border-radius: 6px;
}

.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* The two answers. One class for both, on purpose. */
.consent-btn {
  flex: 1 1 100px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 36px: well over the 24px WCAG 2.2 minimum target, in the smaller
     window. */
  min-height: 36px;
  padding: 6px 14px;
  border: 1px solid var(--consent-fill);
  border-radius: 980px;
  background: var(--consent-fill);
  color: var(--consent-on-fill);
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  cursor: pointer;
}

.consent-btn:hover {
  background: var(--consent-fill-hover);
  border-color: var(--consent-fill-hover);
}

.consent-btn:focus-visible {
  outline: 3px solid var(--consent-blue);
  outline-offset: 3px;
}

/* The X: a 32px target in the card's top corner, its cross in the text's
   own colour inside a visible ring. */
.consent-close {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-end: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--consent-ink-2);
  border-radius: 50%;
  /* Opaque, so words scrolling up under it stay behind it. */
  background: var(--consent-card);
  z-index: 1;
  color: var(--consent-ink);
  cursor: pointer;
}

.consent-close svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.consent-close:hover {
  border-color: var(--consent-ink);
}

.consent-close:focus-visible {
  outline: 3px solid var(--consent-blue);
  outline-offset: 2px;
}

/* Read out, never seen: what the choice just saved. */
.consent-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* While the banner is up, the page keeps room for it at the foot and scrolls
   a focused control clear of it (consent.js measures --consent-h). */
:root[data-consent-shown] {
  scroll-padding-bottom: calc(var(--consent-h, 0px) + 16px);
}

:root[data-consent-shown] .globalfooter,
:root[data-consent-shown] .consent-foot-strip,
:root[data-consent-shown] .lms-foot {
  padding-bottom: calc(24px + var(--consent-h, 0px));
}

/* The Symbols switch sits in the other corner; it moves up only where the
   two would meet, on a narrow screen. */
@media (max-width: 600px) {
  :root[data-consent-shown] .sym-toggle {
    inset-block-end: calc(28px + var(--consent-h, 0px) + env(safe-area-inset-bottom, 0px));
  }
}

/* A short window -- a phone on its side, a page zoomed to 400% -- would be
   mostly banner, and its top would sit under the global bar. There the
   banner joins the page instead, first in it (it is first in <body>), and
   scrolls away with it like everything else: nothing is covered and nothing
   has to be scrolled inside it (WCAG 1.4.10). */
@media (max-height: 480px) {
  .consent {
    /* In the flow, but still over the floating Symbols switch where the two
       meet, so both answers stay pressable. */
    position: relative;
    padding-top: 12px;
  }

  .consent-card {
    max-height: none;
    overflow: visible;
  }

  .consent-body {
    overflow: visible;
  }

  :root[data-consent-shown] {
    scroll-padding-bottom: 0;
  }

  :root[data-consent-shown] .globalfooter,
  :root[data-consent-shown] .consent-foot-strip,
  :root[data-consent-shown] .lms-foot {
    padding-bottom: 24px;
  }

  :root[data-consent-shown] .sym-toggle {
    inset-block-end: calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

@media (forced-colors: active) {
  .consent-card { border: 2px solid CanvasText; }
  .consent-btn,
  .consent-close { border: 2px solid ButtonText; }
}

@media print {
  .consent,
  .consent-foot-strip { display: none !important; }
}

/* ------------------------------------------------------- footer links */

/* In the footer's small print, beside "mPower": the cookies page, and the
   control that shows the banner again. 44px targets, as every footer link. */
.consent-foot-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  color: inherit;
  font-size: inherit;
  text-decoration: none;
}

.consent-foot-link:hover {
  text-decoration: underline;
}

.consent-foot {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 18px;
}

/* The strip on a page with no footer of its own: the studios, the
   brochures, the 404 page. One quiet line, last on the page. */
.consent-foot-strip {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 18px;
  margin: 0;
  padding: 4px 16px;
  border-top: 1px solid var(--consent-line);
  background: transparent;
  color: var(--consent-ink-2);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue',
    'Atkinson Hyperlegible', Helvetica, Arial, sans-serif;
  font-size: 12px;
}